/* Page-specific CSS for site/faq.html, staged during Task 6 (fix round 1).

   The nine .faq-item* rules below all have bodies that differ from the
   .faq-item* rules ported into components.css from global.css (different
   border opacity, font, size, weight, hover color, icon size, and
   line-height throughout, plus a completely different open/close
   mechanism). Per the brief's escape hatch for differing bodies (the same
   rule already applied to .tag across three pages), faq's own versions
   are kept here rather than unified into components.css.

   .faq-item__question h3 is NOT here. It is a structural reset (button
   text inherits from its own typography rules) needed by any page using
   the accordion, not page layout, so it lives in components.css next to
   .faq-item__question instead.

   IMPORTANT: components.css's .faq-item__answer sets `display: none` /
   `display: block` for the closed/open states (the global.css mechanism).
   This page uses a `max-height` transition instead, and a `display` flip
   is not animatable: if `display: none` from components.css were left in
   effect, the element would not be in the render tree while collapsed, so
   the max-height transition would silently never play (it would just snap
   open/closed). The `.faq-item__answer` rule below therefore explicitly
   sets `display: block` to override components.css's `display: none` at
   equal specificity (this file loads after components.css, so source
   order decides the tie). The `.faq-item.open .faq-item__answer` rule
   does not need to repeat it: components.css's higher-specificity
   `.faq-item.open .faq-item__answer { display: block; ... }` already wins
   for that state. */

/* ===== Hero (cream, no photo) ===== */
.faq-hero {
    background: var(--cream);
    padding: 160px 3rem 80px;
    text-align: center;
}

.faq-hero__headline {
    font-family: Georgia, serif;
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--char);
    margin-bottom: 1rem;
}

.faq-hero__sub {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== FAQ Sections ===== */
.faq-section {
    padding: 80px 3rem;
    border-bottom: 1px solid rgba(16, 25, 33, 0.06);
}

.faq-section:last-of-type {
    border-bottom: none;
}

.faq-section__inner {
    max-width: 760px;
    margin: 0 auto;
}

.faq-section__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--turmeric);
    margin-bottom: 2rem;
}

/* Accordion items. Bodies differ from components.css's .faq-item*; see
   file header. Border opacity 0.10 here vs components.css's 0.12. */
.faq-item {
    border-bottom: 1px solid rgba(16, 25, 33, 0.10);
}

.faq-item:first-child {
    border-top: 1px solid rgba(16, 25, 33, 0.10);
}

.faq-item__question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--char);
    line-height: 1.45;
    gap: 1.5rem;
}

.faq-item__question:hover {
    color: var(--chipotle);
}

.faq-item__icon {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--turmeric);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    line-height: 1;
}

.faq-item.open .faq-item__icon {
    transform: rotate(45deg);
}

/* display: block overrides components.css's display: none at equal
   specificity (this file loads after components.css). Without this the
   max-height transition below would never be visible; see file header. */
.faq-item__answer {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-item__answer {
    max-height: 600px;
    padding-bottom: 1.5rem;
}

.faq-item__answer p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ===== CTA Section ===== */
.faq-cta {
    background: var(--cream);
    padding: 100px 3rem;
    text-align: center;
}

.faq-cta__inner {
    max-width: 560px;
    margin: 0 auto;
}

.faq-cta__headline {
    font-family: Georgia, serif;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--char);
    margin-bottom: 1rem;
}

.faq-cta__body {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.faq-cta__links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.faq-cta__link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--chipotle);
    transition: opacity 0.2s ease;
}

.faq-cta__link:hover {
    opacity: 0.7;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .faq-hero {
        padding: 140px 1.5rem 60px;
    }
    .faq-hero__headline {
        font-size: 2.4rem;
    }
    .faq-section {
        padding: 60px 1.5rem;
    }
    .faq-cta {
        padding: 80px 1.5rem;
    }
    .faq-cta__headline {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .faq-hero__headline {
        font-size: 2rem;
    }
    .faq-cta__headline {
        font-size: 1.7rem;
    }
    .faq-item__question {
        font-size: 0.95rem;
    }
}