/*
 * horoscope-daily — extra styles beyond Tailwind CDN
 *
 * Tailwind handles the heavy lifting. This file covers:
 *   1. Removing the default <details> / <summary> marker across browsers
 *   2. Smooth details open/close transition
 *   3. Emoji rendering hints
 *   4. Minimal scrollbar styling for dark theme
 */

/* ──────────────────────────────────────────────────────────────────────────
   1. <details> / <summary> — cross-browser marker removal
   ────────────────────────────────────────────────────────────────────────── */
summary {
  list-style: none;
}

/* Firefox */
summary::-moz-list-bullet {
  display: none;
}

/* WebKit/Blink */
summary::-webkit-details-marker {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. Smooth chevron rotation (Tailwind group-open:rotate-180 only rotates
      the element — we ensure the transition applies via CSS too)
   ────────────────────────────────────────────────────────────────────────── */
details > summary .chevron,
details > summary [aria-hidden="true"]:last-child {
  display: inline-block;
  transition: transform 200ms ease;
}

details[open] > summary .chevron,
details[open] > summary [aria-hidden="true"]:last-child {
  transform: rotate(180deg);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. Emoji rendering: prefer native OS colour emoji
   ────────────────────────────────────────────────────────────────────────── */
.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. Dark scrollbar for Chrome / Edge (cosmetic, non-functional)
   ────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0B0B1A;
}

::-webkit-scrollbar-thumb {
  background: #2A2A4A;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7C5CFF;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. Prevent text-size-adjust on mobile Safari from enlarging small text
   ────────────────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}