/* =========================================================================
   Tailor Finder — public site custom layer (editorial design system)
   ========================================================================= */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6rem; }

::selection { background: #4C1D95; color: #fff; }

/* Native form controls (select popups, date pickers, scrollbars) follow the theme.
   Without this, dark mode shows white-on-white option lists. */
:root { color-scheme: light; }
:root.dark { color-scheme: dark; }
/* Chromium themes the <select> popup from the ELEMENT's color-scheme —
   root-level alone is not enough. */
select, input, textarea { color-scheme: light; }
.dark select, .dark input, .dark textarea { color-scheme: dark; }
select option { color: #111827; background-color: #ffffff; }
.dark select option { color: #F9FAFB; background-color: #0F172A; }

/* --- Navbar: transparent over hero → white glass on scroll ---------------- */
#siteNav { background: transparent; }
#siteNav.nav-scrolled {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}
.dark #siteNav.nav-scrolled {
    background: rgba(15, 23, 42, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* --- Soft editorial wash (legacy pages still reference .hero-mesh) -------- */
.hero-mesh {
    background:
        radial-gradient(1100px 480px at 12% -10%, rgba(76, 29, 149, .07), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(225, 29, 116, .05), transparent 55%);
}
.dark .hero-mesh {
    background:
        radial-gradient(1100px 480px at 12% -10%, rgba(122, 78, 194, .10), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(225, 29, 116, .07), transparent 55%);
}

/* --- Reveal on scroll: 200ms, subtle, no bounce --------------------------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .2s ease-out, transform .2s ease-out; }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

/* --- Image zoom hover ------------------------------------------------------ */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .45s cubic-bezier(.2, .6, .2, 1); }
.img-zoom:hover img { transform: scale(1.04); }

/* --- Hide scrollbars on slider tracks ------------------------------------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* --- Star rating input (review form) -------------------------------------- */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .125rem; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { cursor: pointer; color: #d1d5db; transition: color .12s ease; }
.dark .star-input label { color: #4b5563; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f59e0b; }

/* --- Lightbox -------------------------------------------------------------- */
.tf-lightbox {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 23, 42, .9);
    display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.tf-lightbox.open { display: flex; }
.tf-lightbox img { max-width: 100%; max-height: 90vh; border-radius: .75rem; }

/* --- Line clamps ----------------------------------------------------------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- FAQ accordion (Apple-minimal) ----------------------------------------- */
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary { list-style: none; }
details.faq[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease-out; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .img-zoom img, .faq-icon { transition: none !important; transform: none !important; opacity: 1 !important; }
}