/* ============================================
   FAQ — Illuminated Manuscript
   A static book-page layout where all Q&A
   entries are visible simultaneously, styled
   as ink on aged paper. No scrolling — all
   content must fit within the fixed page.
   ============================================ */

/* Disable scroll on FAQ page parent container */
.book-page[data-page-index="3"] .book-page-content {
    overflow: hidden;
}

/* --- Scene container --- */
.faq-scene {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 0.8rem 1.2rem 0.5rem;
}

/* Specificity override for book-system + desk-scene .book-page-section-content padding */
.book-frame .faq-scene.book-page-section-content {
    padding: 0.8rem 1.2rem 0.5rem;
    overflow: hidden;
}

/* Warm overlay for text legibility over background image */
.faq-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(250, 240, 225, 0.18) 0%,
        rgba(250, 240, 225, 0.06) 40%,
        rgba(250, 240, 225, 0.06) 60%,
        rgba(250, 240, 225, 0.22) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Aged vignette — dark edges fading inward */
.faq-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 100px rgba(44, 26, 14, 0.2),
                inset 0 0 40px rgba(44, 26, 14, 0.08);
    pointer-events: none;
    z-index: 0;
}

/* --- Running header --- */
.faq-running-header {
    font-family: var(--font-sc);
    font-variant: small-caps;
    font-size: 0.65rem;
    color: var(--color-dusty-rose);
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 0.15rem;
    opacity: 0.7;
    position: relative;
    z-index: 1;
}

/* --- Page heading (Great Vibes preserved) --- */
.faq-heading {
    font-family: var(--font-script);
    font-size: clamp(2rem, 4vw, 3rem);
    color: #1a0f00;
    text-align: center;
    margin: 0 0 0.15rem;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(44, 26, 14, 0.15),
                 0 0 8px rgba(250, 240, 225, 0.6);
    position: relative;
    z-index: 1;
}

/* --- Header ornament (quill vignette) --- */
.faq-header-ornament {
    text-align: center;
    margin: 0 auto 0.5rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.faq-ornament-svg {
    width: 120px;
    height: 30px;
    color: var(--color-ink-medium);
}

/* --- Manuscript body --- */
.faq-manuscript {
    max-width: 520px;
    width: 94%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* --- Individual Q&A entry --- */
.faq-entry {
    margin-bottom: 0.6rem;
    animation: faq-ink-appear 0.6s ease-out both;
}

/* --- Question heading --- */
.faq-question {
    font-family: var(--font-manuscript-heading);
    font-size: clamp(0.95rem, 2vw, 1.12rem);
    color: #1a0f00;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 0.25rem;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Roman numeral marker */
.faq-numeral {
    font-family: var(--font-manuscript-heading);
    font-style: italic;
    margin-right: 0.25em;
    color: #2c1a0e;
}

/* --- Answer text --- */
.faq-answer {
    font-family: var(--font-manuscript-body);
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.55;
    color: #1c1209;
    margin: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

/* --- Illuminated drop capital --- */
.faq-drop-cap {
    float: left;
    font-family: var(--font-manuscript-heading);
    font-size: 2.8em;
    line-height: 0.75;
    padding-right: 0.08em;
    padding-top: 0.04em;
    color: #5c1a1a;
    text-shadow: 1px 1px 0 rgba(212, 175, 55, 0.35),
                 0 0 6px rgba(212, 175, 55, 0.12),
                 0 0 1px rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 0.3px rgba(90, 40, 20, 0.3);
}

/* LOVED drop-cap colors — L, O, V, E, D */
.faq-entry:nth-child(5n+1) .faq-drop-cap { /* L — dusty rose */
    color: #c17c74;
    text-shadow: 0 0 10px rgba(193, 124, 116, 0.35), 1px 1px 0 rgba(193, 124, 116, 0.3), 0 0 1px rgba(0, 0, 0, 0.15);
}
.faq-entry:nth-child(5n+2) .faq-drop-cap { /* O — sage */
    color: #7a9e7e;
    text-shadow: 0 0 10px rgba(122, 158, 126, 0.35), 1px 1px 0 rgba(122, 158, 126, 0.3), 0 0 1px rgba(0, 0, 0, 0.15);
}
.faq-entry:nth-child(5n+3) .faq-drop-cap { /* V — lavender */
    color: #9b89b4;
    text-shadow: 0 0 10px rgba(155, 137, 180, 0.35), 1px 1px 0 rgba(155, 137, 180, 0.3), 0 0 1px rgba(0, 0, 0, 0.15);
}
.faq-entry:nth-child(5n+4) .faq-drop-cap { /* E — soft peach */
    color: #d4956a;
    text-shadow: 0 0 10px rgba(212, 149, 106, 0.35), 1px 1px 0 rgba(212, 149, 106, 0.3), 0 0 1px rgba(0, 0, 0, 0.15);
}
.faq-entry:nth-child(5n+5) .faq-drop-cap { /* D — blue-grey */
    color: #8a9ab5;
    text-shadow: 0 0 10px rgba(138, 154, 181, 0.35), 1px 1px 0 rgba(138, 154, 181, 0.3), 0 0 1px rgba(0, 0, 0, 0.15);
}

/* LOVED numeral colors to match drop caps */
.faq-entry:nth-child(5n+1) .faq-numeral { color: #c17c74; }
.faq-entry:nth-child(5n+2) .faq-numeral { color: #7a9e7e; }
.faq-entry:nth-child(5n+3) .faq-numeral { color: #9b89b4; }
.faq-entry:nth-child(5n+4) .faq-numeral { color: #d4956a; }
.faq-entry:nth-child(5n+5) .faq-numeral { color: #8a9ab5; }

/* --- Ornamental divider (wave flourish) --- */
.faq-divider {
    text-align: center;
    margin: 0.35rem 0;
    line-height: 1;
}

.faq-divider-svg {
    width: 100px;
    height: 16px;
    color: var(--color-dusty-rose);
    opacity: 0.6;
}

/* --- Entry appearance animation --- */
@keyframes faq-ink-appear {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Decorative Design Elements
   ============================================ */

/* --- Botanical border frame --- */
.faq-border-frame {
    position: absolute;
    inset: 6px;
    pointer-events: none;
    z-index: 0;
}

.faq-border-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    color: var(--color-sage);
    opacity: 0.6;
}

.faq-border-corner--tl { top: 0; left: 0; }
.faq-border-corner--tr { top: 0; right: 0; }
.faq-border-corner--bl { bottom: 0; left: 0; }
.faq-border-corner--br { bottom: 0; right: 0; }

/* --- Faint watermark behind text --- */
.faq-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    color: var(--color-ink-light);
}

.faq-watermark svg {
    width: 100%;
    height: 100%;
}

/* --- Marginal decorations --- */
.faq-marginalia {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.faq-margin-icon {
    position: absolute;
}

.faq-margin-icon--quill {
    width: 20px;
    height: 40px;
    left: 8px;
    top: 25%;
    color: var(--color-lavender);
}

.faq-margin-icon--sprig {
    width: 24px;
    height: 50px;
    right: 8px;
    top: 20%;
    color: var(--color-sage);
}

.faq-margin-icon--hourglass {
    width: 16px;
    height: 28px;
    left: 10px;
    top: 60%;
    color: var(--color-gold);
}

.faq-margin-icon--seal {
    width: 24px;
    height: 24px;
    right: 10px;
    top: 65%;
    color: var(--color-dusty-rose);
}

/* --- Decorative manuscript page footer --- */
.faq-page-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;
    position: relative;
    z-index: 1;
}

.faq-footer-ornament {
    width: 40px;
    height: 10px;
    color: var(--color-ink-light);
}

.faq-page-numeral {
    font-family: var(--font-manuscript-heading);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--color-dusty-rose);
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* --- Paper grain texture overlay --- */
.faq-manuscript::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* ============================================
   Decorative Animations (preserved)
   ============================================ */

/* --- Floating botanicals --- */
.faq-botanicals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.faq-botanical {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(ellipse, rgba(181, 196, 177, 0.35), transparent 70%);
    animation: faq-leaf-float 20s ease-in-out infinite;
}

.faq-botanical--1 { top: 10%; left: 5%; animation-delay: 0s; }
.faq-botanical--2 { top: 40%; right: 8%; animation-delay: 5s; width: 12px; height: 12px; }
.faq-botanical--3 { bottom: 15%; left: 15%; animation-delay: 10s; width: 14px; height: 14px; }
.faq-botanical--4 { bottom: 30%; right: 20%; animation-delay: 15s; width: 10px; height: 10px; }

@keyframes faq-leaf-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
    25% { transform: translate(10px, -12px) rotate(20deg); opacity: 0.45; }
    50% { transform: translate(-6px, -25px) rotate(-10deg); opacity: 0.35; }
    75% { transform: translate(12px, -8px) rotate(15deg); opacity: 0.4; }
}

/* --- Falling petals --- */
.faq-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.faq-petal {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 6px;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(ellipse, rgba(232, 196, 188, 0.5), transparent 80%);
    animation: faq-petal-fall 12s ease-in-out infinite;
}

.faq-petal--1 { left: 12%; animation-delay: 0s; animation-duration: 11s; }
.faq-petal--2 { left: 28%; animation-delay: 2s; animation-duration: 13s; width: 5px; height: 5px; }
.faq-petal--3 { left: 45%; animation-delay: 4s; animation-duration: 10s; }
.faq-petal--4 { left: 62%; animation-delay: 1.5s; animation-duration: 14s; width: 7px; height: 7px; }
.faq-petal--5 { left: 78%; animation-delay: 3.5s; animation-duration: 11.5s; }
.faq-petal--6 { left: 35%; animation-delay: 6s; animation-duration: 12.5s; width: 5px; height: 5px; }
.faq-petal--7 { left: 88%; animation-delay: 5s; animation-duration: 13.5s; }

@keyframes faq-petal-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.3; }
    100% { transform: translateY(calc(100vh)) rotate(180deg); opacity: 0; }
}

/* --- Color swatches for dress code --- */
.faq-swatches {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.faq-swatch-label {
    font-family: var(--font-manuscript-body);
    font-style: italic;
    font-size: 0.6rem;
    color: #6b4a2a;
    margin-right: 2px;
}

.faq-swatch {
    width: 16px;
    height: 16px;
    border-radius: 45% 50% 48% 52%;
    border: 1.5px solid rgba(193, 124, 116, 0.3);
    cursor: default;
    position: relative;
    transition: transform 0.2s ease;
}

.faq-swatch:hover {
    transform: scale(1.3);
}

/* Tooltip on hover */
.faq-swatch::after {
    content: attr(data-color);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-family: var(--font-manuscript-body);
    font-size: 0.55rem;
    color: #1c1209;
    background: #f5f0e8;
    border: 1px solid rgba(193, 124, 116, 0.3);
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.faq-swatch:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* --- Hobbit animations --- */

/* Dragon tail flick */
.faq-margin-icon--dragon {
    width: 24px;
    height: 20px;
    right: 8px;
    bottom: 8%;
    color: #9a9080;
}

.faq-margin-icon--dragon .dragon-tail {
    animation: faq-dragon-tail 4s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes faq-dragon-tail {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    75% { transform: rotate(-5deg); }
}

/* Hobbit round door (top-left margin) */
.faq-margin-icon--door {
    width: 22px;
    height: 26px;
    left: 8px;
    top: 6%;
    color: #5a7a4a;
}

/* Wizard hat (top-right margin) */
.faq-margin-icon--wizard {
    width: 20px;
    height: 24px;
    right: 8px;
    top: 6%;
    color: #9b89b4;
}

/* Mushroom cluster (bottom-left margin) */
.faq-margin-icon--mushrooms {
    width: 24px;
    height: 20px;
    left: 8px;
    bottom: 8%;
    color: #c17c74;
}

/* Dust motes floating upward */
.faq-dust-motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.faq-dust-mote {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(212, 196, 170, 0.35);
    animation: faq-dust-float 7s ease-in-out infinite;
}

.faq-dust-mote--1 { left: 25%; bottom: 20%; animation-delay: 0s; animation-duration: 7s; }
.faq-dust-mote--2 { left: 50%; bottom: 30%; animation-delay: 2s; animation-duration: 8s; width: 1.5px; height: 1.5px; }
.faq-dust-mote--3 { left: 72%; bottom: 15%; animation-delay: 4s; animation-duration: 6s; }
.faq-dust-mote--4 { left: 38%; bottom: 40%; animation-delay: 1s; animation-duration: 9s; width: 1.5px; height: 1.5px; }

@keyframes faq-dust-float {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.4; }
    80% { opacity: 0.2; }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* Easter egg annotation */
.faq-easter-egg {
    position: absolute;
    left: 10px;
    top: 16%;
    font-family: var(--font-manuscript-body);
    font-style: italic;
    font-size: 0.5rem;
    color: var(--color-ink-light);
    opacity: 0.12;
    writing-mode: vertical-rl;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 0;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .faq-scene,
    .faq-scene.book-page-section-content,
    .book-frame .faq-scene.book-page-section-content {
        padding: 0.6rem 0.8rem 0.4rem;
    }

    .faq-heading {
        font-size: 1.8rem;
        margin-bottom: 0.1rem;
    }

    .faq-running-header {
        font-size: 0.55rem;
    }

    .faq-drop-cap {
        font-size: 2.4em;
    }

    .faq-entry {
        margin-bottom: 0.3rem;
    }

    .faq-divider {
        margin: 0.15rem 0;
    }

    .faq-marginalia {
        display: none;
    }

    .faq-border-corner {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 375px) {
    .faq-scene,
    .faq-scene.book-page-section-content,
    .book-frame .faq-scene.book-page-section-content {
        padding: 0.4rem 0.6rem 0.3rem;
    }

    .faq-manuscript {
        width: 98%;
    }

    .faq-question {
        font-size: 0.9rem;
    }

    .faq-answer {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .faq-drop-cap {
        font-size: 2em;
    }

    .faq-header-ornament {
        margin-bottom: 0.3rem;
    }

    .faq-border-frame {
        display: none;
    }
}