/* ============================================================
   Larizia custom overlays — things that Tailwind arbitrary
   values alone don't cover. Layered on top of tailwind-compiled.
   ============================================================ */

/* -----------------------------------------------------------
   Gender toggle — client-side SPA-like slicing.
   `applyGenderSlice()` in main.js walks every [data-gender-slice]
   container, tags mismatched/surplus children with
   [data-gender-hidden], and this rule hides them. Cards outside a
   slicer (e.g. Author archives, static sections) are always visible
   regardless of gender toggle — matches React which only applies
   gender filtering inside specific useMemo slicing.
----------------------------------------------------------- */
[data-gender-hidden] { display: none !important; }

/* -----------------------------------------------------------
   Mobile menu slide-out base state. Tailwind handles the
   transitions; these ensure correct initial/open states
   even before JS hydrates.
----------------------------------------------------------- */
.larizia-mobile-menu {
    transform: translateX(-100%);
    transition: transform 300ms ease-out;
}
.larizia-mobile-menu.is-open {
    transform: translateX(0);
}
.larizia-mobile-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.larizia-mobile-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* -----------------------------------------------------------
   Search overlay visibility
----------------------------------------------------------- */
.larizia-search-overlay {
    display: none;
}
.larizia-search-overlay.is-open {
    display: flex;
}

/* Body lock when overlays active */
body.larizia-overlay-lock {
    overflow: hidden;
}

/* -----------------------------------------------------------
   WP admin bar compatibility — offset sticky header so it
   doesn't hide behind the admin bar when scrolled.
----------------------------------------------------------- */
body.admin-bar header.sticky {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.sticky {
        top: 46px;
    }
}

/* -----------------------------------------------------------
   Pillar TOC active state
----------------------------------------------------------- */
.larizia-toc-link {
    border-left: 2px solid transparent;
    color: #8B8580;
}
.larizia-toc-link:hover {
    color: #4A4540;
    border-left-color: #D4CFC8;
}
.larizia-toc-link.is-active {
    border-left-color: #C4A265;
    color: #2A2A2A;
    background: #F3EDE4;
}

/* -----------------------------------------------------------
   WP core content compat — make sure p + img in article content
   works cleanly under article-body class.
----------------------------------------------------------- */
.article-body img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}
.article-body ul, .article-body ol {
    margin: 1rem 0 1.5rem 1.5rem;
}
.article-body li {
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------
   Profile body — Q&A formatting with strong labels
----------------------------------------------------------- */
.profile-body strong {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
.profile-body h3 {
    font-family: var(--font-display);
    font-style: italic;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #2A2A2A;
}

/* -----------------------------------------------------------
   Toast (custom, no Sonner)
----------------------------------------------------------- */
#larizia-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: #2A2A2A;
    color: #F8F5F0;
    padding: 14px 24px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 13px;
    z-index: 9999;
    transition: transform 300ms ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-width: 420px;
}
#larizia-toast.is-visible {
    transform: translateX(-50%) translateY(0);
}
#larizia-toast.is-error {
    background: #7A2E3B;
}

/* -----------------------------------------------------------
   Sticky header compensation
----------------------------------------------------------- */
html { scroll-padding-top: 180px; }

/* -----------------------------------------------------------
   Guide main content min-width fix for sticky TOC layout
----------------------------------------------------------- */
.larizia-guide-content { min-width: 0; }

/* -----------------------------------------------------------
   RTL guide layout (Guides index alternating)
----------------------------------------------------------- */
@media (min-width: 768px) {
    .md\:direction-rtl {
        direction: rtl;
    }
    .md\:direction-rtl > * {
        direction: ltr;
    }
}