/* ═══════════════════════════════════════════
   FAQ — Page-specific styles.
   Global tokens, reset, body, and heading rules
   are inherited from style.css (loaded first).
   ═══════════════════════════════════════════ */

/* Nav styles inherited from style.css — no overrides needed */



/* ═══════════════════════════════════════════
   SECTION 1 — FAQ HERO
   ═══════════════════════════════════════════ */
.faq-hero {
    position: relative;
    /* Was a flat 80dvh. On a 360px phone this section holds ~200px of content,
       so ~440px rendered as a void between the subhead and the tabs — it read
       as a layout fault rather than as breathing room. Let content size it
       below 768px; keep the full-height stage on larger screens. */
    min-height: 80svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--pad-section) var(--gutter);
    overflow: hidden;
}

@media (max-width: 767px) {
    .faq-hero {
        min-height: 0;
    }
}

/* The fixed logo is 72px of image inside 16px of padding — it owns the top
   104px of the viewport, and the burger disc sits inside that band too. But
   --pad-section resolves to only 81px at 375px wide (its 10svh floor beats
   the 15vw term), so this hero's headline started *underneath* the logo.
   Reported from an iPhone 2026-08-05.

   Every other page opens with a full-height image hero, which is why this is
   the only one that collided: it is the only first section whose content sits
   at the very top of the page. */
@media (max-width: 1023px) {
    .faq-hero {
        /* max(), not calc() alone: --pad-section is clamp(10svh, 15vw, 15svh),
           so on a short viewport it can fall low enough to put the headline
           back under the logo. (It is svh now, so it no longer contracts as
           the URL bar shows — but a short screen still needs the floor.)
           The floor makes the clearance deterministic: the
           fixed logo owns the top 88px (72px image inside a 16px inset), and
           9.5rem leaves 64px of air below it at every screen height. */
        padding-top: max(calc(var(--pad-section) + 3.5rem), 9.5rem);
    }
}

/* ═══════════════════════════════════════════
   SOMATIC MANDALA — Fixed page background
   ═══════════════════════════════════════════ */
.mandala-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80svh;
    height: 80svh;
    z-index: -1;
    pointer-events: none;
    /* Smooth blur transition driven by JS scroll */
    transition: filter 0.6s ease-out, opacity 0.6s ease-out;
}

.somatic-mandala {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: breathe-spin 120s linear infinite;
    transform-origin: center;
    opacity: 0.55;
}

@keyframes breathe-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        opacity: 0.6;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .mandala-wrapper {
        width: 120vw;
        height: 120vw;
        opacity: 0.5;
    }
}

.faq-hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.faq-hero__headline {
    font-size: var(--fs-display);
    color: var(--charcoal);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: floatIn 0.8s var(--ease-smooth) 0.3s forwards;
}

.faq-hero__subhead {
    font-size: var(--fs-body);
    color: rgba(44, 44, 44, 0.67);
    max-width: 50ch;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    animation: floatIn 0.8s var(--ease-smooth) 0.6s forwards;
}

@keyframes floatIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════
   SECTION 2 — FAQ MAIN (Sidebar + Accordion)
   ═══════════════════════════════════════════ */
.faq-main {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--gutter) var(--pad-section);
    gap: 3rem;
}

/* Sidebar */
.faq-sidebar {
    width: 100%;
}

.faq-sidebar__list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.faq-sidebar__list::-webkit-scrollbar {
    display: none;
}

/* The tab strip is a horizontal scroller with its scrollbar hidden. Below
   ~480px the third tab is clipped mid-word, and with no scrollbar there is
   nothing to say it scrolls — it just reads as a rendering fault. Fade the
   right edge so the clip is intentional and legible as "more this way".
   Masking rather than an overlay gradient keeps it independent of whatever
   is painted behind the strip. */
@media (max-width: 480px) {
    .faq-sidebar__list {
        /* Mask reads the alpha channel, so the colour here is not painted —
           opaque-white/transparent-white avoids the pure-black lint while
           producing an identical fade. */
        -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 1) calc(100% - 2.5rem), rgba(255, 255, 255, 0) 100%);
        mask-image: linear-gradient(to right, rgba(255, 255, 255, 1) calc(100% - 2.5rem), rgba(255, 255, 255, 0) 100%);
    }
}

.faq-sidebar__btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(44, 44, 44, 0.5);
    border-radius: 999px;
    transition: var(--transition-somatic);
}

.faq-sidebar__btn:hover {
    color: var(--charcoal);
}

.faq-sidebar__btn.is-active {
    color: var(--charcoal);
    font-weight: 700;
    background: rgba(138, 154, 144, 0.08);
}

/* Sage green dot */
.faq-sidebar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: var(--transition-somatic);
    flex-shrink: 0;
}

.faq-sidebar__btn.is-active .faq-sidebar__dot {
    background: var(--sage-green);
}

/* Content area */
.faq-content {
    flex: 1;
    max-width: 680px;
}

/* Individual FAQ item */
.faq-item {
    border-bottom: 1px solid rgba(44, 44, 44, 0.1);
}

.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    margin: 0 -1rem;
    font-family: 'Playfair Display', 'Editorial New', serif;
    font-size: clamp(1.05rem, 1.2vw + 0.4rem, 1.3rem);
    font-weight: 500;
    text-align: left;
    color: var(--charcoal);
    border-radius: 8px;
    transition: color 0.8s var(--ease-smooth), background 0.8s var(--ease-smooth);
}

.faq-item__question:hover {
    color: var(--dark-rust);
    background: rgba(138, 154, 144, 0.08);
    /* subtle sage green hover */
}

/* Plus/minus icon */
.faq-item__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    background: var(--sage-green);
    transition: transform 0.8s var(--ease-smooth), opacity 0.8s var(--ease-smooth);
}

/* Horizontal bar */
.faq-item__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    transform: translateY(-50%);
}

/* Vertical bar (rotates to minus when open) */
.faq-item__icon::after {
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* Answer — collapsible */
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s var(--ease-smooth), opacity 0.8s var(--ease-smooth);
    opacity: 0;
}

.faq-item__answer.is-open {
    opacity: 1;
}

.faq-item__answer p {
    padding: 0 0 1.5rem 0;
    color: rgba(44, 44, 44, 0.7);
    line-height: 1.6;
    max-width: 60ch;
}


/* ═══════════════════════════════════════════
   SECTION 3 — "STILL UNSURE?" CTA
   ═══════════════════════════════════════════ */
.faq-cta {
    padding: var(--pad-section) var(--gutter);
    display: flex;
    justify-content: center;
}

.faq-cta__glass {
    max-width: 800px;
    width: 100%;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    text-align: center;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: var(--transition-somatic);
}

.faq-cta__glass:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.faq-cta__text {
    font-size: var(--fs-body);
    color: rgba(44, 44, 44, 0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

.faq-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Playfair Display', 'Editorial New', serif;
    font-size: clamp(1rem, 1.2vw + 0.3rem, 1.2rem);
    font-weight: 600;
    color: var(--dark-rust);
    border-bottom: 1px solid transparent;
    transition: border-color 0.8s var(--ease-smooth), letter-spacing 0.8s var(--ease-smooth);
}

.faq-cta__link:hover {
    border-bottom-color: var(--dark-rust);
    letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════
   FOOTER — intentionally not defined here.
   ═══════════════════════════════════════════
   This file used to carry a full copy of the .footer__* tree. It was a
   snapshot of style.css taken BEFORE the footer became four columns
   (2026-08-05), and because faq.css loads after style.css at equal
   specificity, the stale copy won: this page rendered the 4-column footer
   on a 3-column grid, so the Connect column wrapped onto its own row under
   the brand block. It also shrank the logo to 48px and undid the
   inline-flex fix on .footer__list a.

   The footer is styled in ONE place — style.css, "FOOTER" section.
   Do not redeclare .footer or .footer__* in any per-page stylesheet.
   If this page ever needs a footer variation, override a token
   (--footer-rule, --footer-legal-ink) the way nsr-protocol.css does,
   not the rule. Removed 2026-08-07. */


/* ═══════════════════════════════════════════
   RESPONSIVE — Desktop (sidebar becomes sticky)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
    .faq-main {
        flex-direction: row;
        gap: 4rem;
        padding-top: 2rem;
    }

    .faq-sidebar {
        position: sticky;
        top: 6rem;
        width: 220px;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .faq-sidebar__list {
        flex-direction: column;
        gap: 0.25rem;
    }

    .faq-sidebar__btn {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ═══════════════════════════════════════════
   ENTRANCE ANIMATIONS (Float-in on scroll)
   ═══════════════════════════════════════════ */
.faq-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.faq-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Opacity-only arrival. This panel owns a backdrop-filter, and translating an
   element that owns one re-rasterises the blur every frame of the reveal —
   the same reason .moc-lib__inner is opacity-only (menu-of-care.css:933).
   The hover lift below is kept: it is desktop-only and user-initiated. */
.faq-cta__glass {
    opacity: 0;
    transition: opacity 0.8s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.faq-cta__glass.is-visible {
    opacity: 1;
}

.faq-cta__glass.is-visible:hover {
    transform: translateY(-4px);
}


/* ═══════════════════════════════════════════════
   BENEDICTION — Fixed behind all page content
   ═══════════════════════════════════════════════ */
.page-content {
    position: relative;
    z-index: 1;
    background: var(--cream);
}

.benediction-spacer {
    height: var(--benediction-h, 400px);
    pointer-events: none;
}

.benediction {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: var(--charcoal);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    min-height: 50svh;
}

.benediction__inner {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.benediction__sanskrit {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.benediction__verse {
    font-family: var(--font-indic, 'Noto Sans Devanagari', sans-serif);
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: var(--cream);
    line-height: var(--leading-body);
    margin: 0;
}

.benediction__translations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}

.benediction__transliteration {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    font-style: italic;
    color: rgba(249, 248, 242, 0.65);
    line-height: var(--leading-body);
    margin: 0;
}

.benediction__meaning {
    font-family: 'Lato', sans-serif;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    color: rgba(249, 248, 242, 0.65);
    line-height: var(--leading-body);
    margin: 0;
}

.benediction__meaning--closing {
    margin-top: 1rem;
    font-style: italic;
    color: var(--sage-green, #8FA39A);
}

@media (min-width: 768px) {
    .benediction__translations {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 4vw, 4rem);
        text-align: left;
    }

    .benediction__col:last-child {
        text-align: right;
    }
}


/* Reduced motion — see style.css for the authoritative sitewide block.
   Repeated here so this stylesheet is self-consistent if loaded alone. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Focus — keyboard affordance for this page's interactive elements. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sage-deep, #5A6457);
  outline-offset: 3px;
}