/* ---------------------------------------------------------------------
   site.css — plain CSS for the CodeIgniter port. Keyed to the theme
   variables defined in app.css (:root) so it never depends on a Tailwind
   utility that may have been tree-shaken out of the compiled bundle.
--------------------------------------------------------------------- */

/* Anchor targets clear of the fixed header */
section[id] { scroll-margin-top: 5rem; }

/* --- Navbar ---------------------------------------------------------- */
.site-nav { background: transparent; }
.site-nav.is-scrolled {
    background: hsl(var(--background) / 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.site-nav-mobile {
    background: hsl(var(--background) / 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
}

/* Top-bar links: light over the (dark) transparent hero, dark once scrolled
   (when the bar gets a light background). */
.site-nav .nav-link { color: hsl(var(--parchment) / 0.85); }
.site-nav .nav-link:hover { color: hsl(var(--parchment)); }
.site-nav #nav-toggle { color: hsl(var(--parchment)); }
.site-nav.is-scrolled .nav-link { color: hsl(var(--stone) / 0.8); }
.site-nav.is-scrolled .nav-link:hover { color: hsl(var(--stone)); }
.site-nav.is-scrolled #nav-toggle { color: hsl(var(--stone)); }

/* Keep the fixed navbar below the WordPress admin bar when logged in. */
body.admin-bar .site-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-nav { top: 46px; } }

/* --- CTA button (React "cta" variant) -------------------------------- */
.btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: hsl(var(--crimson));
    color: hsl(var(--parchment));
    border-radius: var(--radius);
    font-family: 'Cinzel', serif; letter-spacing: .06em;
    font-size: .875rem; line-height: 1; text-transform: none;
    padding: .65rem 1.25rem;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}
.btn-cta:hover { background: hsl(var(--crimson) / 0.9); }
.btn-cta-sm { padding: .4rem .85rem; font-size: .8rem; }
.btn-cta-lg { padding: 1rem 2.5rem; font-size: 1rem; }

/* --- Scroll reveal --------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- Section anchors (left dot nav, home) ---------------------------- */
.section-anchors { display: none; }
@media (min-width: 1024px) {
    .section-anchors {
        display: flex; flex-direction: column; gap: 1rem;
        position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 40;
    }
}
.section-anchors a { display: flex; align-items: center; gap: .75rem; }
.section-anchors .dot { width: .375rem; height: .375rem; border-radius: 9999px; background: hsl(var(--gray) / 0.4); transition: all .3s ease; }
.section-anchors a:hover .dot { background: hsl(var(--stone)); }
.section-anchors a.active .dot { width: .625rem; height: .625rem; background: hsl(var(--crimson)); }
.section-anchors .label { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: hsl(var(--gray)); opacity: 0; transform: translateX(-.5rem); transition: all .3s ease; }
.section-anchors a:hover .label { opacity: 1; transform: none; }
.section-anchors a.active .label { color: hsl(var(--stone)); opacity: 1; transform: none; }

/* --- FAQ (native details) ------------------------------------------- */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform .2s ease; }
.faq-item[open] summary .chev { transform: rotate(180deg); }

/* --- Lightbox -------------------------------------------------------- */
.lightbox-backdrop {
    position: fixed; inset: 0; z-index: 100; display: none;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgb(0 0 0 / 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox-backdrop.open { display: flex; }
.lightbox-backdrop img { max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); }
.lightbox-cap { color: hsl(var(--parchment) / 0.8); font-size: .875rem; margin-top: 1rem; text-align: center; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; color: hsl(var(--parchment) / 0.9); padding: .5rem; background: none; border: 0; cursor: pointer; }
[data-zoom] { cursor: zoom-in; }

/* --- Legal pages (HTML body from admin) ------------------------------ */
.legal-body h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }
@media (min-width: 768px) { .legal-body h2 { font-size: 1.2rem; } }
.legal-body p { margin-bottom: .75rem; }
.legal-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: .75rem; }
.legal-body li { margin-bottom: .35rem; }
.legal-body strong { color: hsl(var(--stone)); }
.legal-body a { color: hsl(var(--crimson)); text-decoration: underline; }
.legal-body table { width: 100%; border: 1px solid hsl(var(--border)); border-collapse: collapse; margin-top: 1rem; font-size: .85rem; }
.legal-body th, .legal-body td { padding: .75rem; border: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; }
.legal-body thead { background: hsl(var(--accent)); }