/* Page-specific CSS for site/index.html (homepage). Task 6 staged only
   .tag and the .menu-card / .location-card components (the ones needing
   a decision). Task 13 (this pass) carries the rest of index.html's
   inline <style> block: nav/hero/footer overrides, .strip, .catering,
   .story, .locations layout, and the responsive breakpoints.

   ===== Corrected method note (see task-13-report.md "method error") =====
   An earlier pass here compared index.html's inline block directly against
   components.css and treated every property components.css declared that
   the inline block did not as an unopposed leak. That comparison was
   pointed at the wrong reference. site/index.html:17 also links
   css/global.css BEFORE its inline block, so the true baseline was always
   a two-layer cascade: global.css, then the inline block on top - the same
   shape as components.css then this file. components.css is a faithful
   copy of global.css for every selector index.html re-declares. So most of
   what looked like "components.css declares an extra property index never
   had" was really "global.css already declared it, and the baseline
   rendered it, through exactly the same gap in the inline block that
   exists in this file relative to components.css." Resetting those
   properties here did not restore the baseline - it changed it.

   Of the properties components.css declares beyond what index.html's own
   rule states, exactly ONE is genuinely new versus the baseline:
   .nav__toggle's min-width: 44px, which has no counterpart in global.css
   at all. It is left alone: components.css's own documented, deliberate,
   site-wide tap-target fix, applying uniformly to every migrated page.

   .btn is the one deliberate EXCEPTION to "carry index's value back":
   index declares padding: 0.85rem 2rem and font-size: 0.9rem;
   components.css says 0.9rem/2.2rem padding and 0.95rem font-size. Task 6
   resolved this in favour of the shared component value (recorded in
   docs/intentional-differences.md), so homepage buttons grow slightly.
   .btn is not re-declared anywhere in this file - that omission IS the
   fix; do not add a .btn rule here.

   .footer__col a (index, specificity 0,1,1) and .footer__col ul li a
   (components.css / global.css, specificity 0,1,3) are different selector
   text targeting the same anchor element, and the higher-specificity
   selector wins regardless of load order. This is real, and global.css's
   version already won in the baseline for the same reason, so the
   baseline's rendered font-size/color for footer links were global.css's
   0.9rem / rgba(255,255,255,0.55), not index's own inline 0.88rem / 0.6.
   No override needed here: components.css reproduces that same win
   unassisted.

   .tag: bodies differ across the pages that define it (index, menu,
   downtown). Index and menu happen to be identical to each other but
   downtown's is not (0.68rem vs 0.65rem font-size and other diffs), so
   per the task-6 brief's escape hatch none of the three is promoted to
   components.css; each stays page-specific. Copied verbatim from
   site/index.html. */

/* ===== Navigation overrides ===== */
.nav--transparent {
    /* global.css also sets backdrop-filter: blur(8px) here, and the
       baseline rendered it (index.html's inline rule never touched that
       property either). Not reset: doing so would diverge from what the
       homepage actually looked like. */
    background: transparent;
}

.nav__logo {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.nav__link {
    font-size: 0.9rem;
    font-weight: 400;
    transition: color 0.3s ease, opacity 0.2s ease;
}

.nav__cta {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: 100px;
    background: var(--chipotle);
    color: var(--white) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(125, 39, 45, 0.3);
    opacity: 1 !important;
}

/* ===== Hero overrides ===== */
.hero {
    /* index.html declares height, justify-content and text-align, none of
       which components.css's .hero declares at all, so these are not
       "leaks" (nothing to leak) - but they DO need to be carried, or the
       hero loses its fixed 100vh height and centered layout entirely. */
    position: relative;
    height: 100vh;
    min-height: 700px;
    max-height: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    /* The "0 2rem" shorthand below already sets padding-top to 0, and
       that shorthand is declared here (later in the cascade than
       components.css's separate padding-top: 72px longhand), so it wins
       for that specific longhand regardless of shorthand vs longhand
       syntax. No separate padding-top override is needed; index.html's
       own inline rule relied on the same mechanism against global.css. */
    padding: 0 2rem;
}

.hero__headline {
    font-family: Georgia, serif;
    font-size: 4rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.hero__sub {
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.hero__ctas {
    /* global.css also sets margin-bottom: 2.5rem here, and the baseline
       rendered it: .hero__content is a flex item of .hero, which
       establishes its own formatting context, so this margin does not
       collapse out of it. Not reset: doing so shifts the hero copy
       (centered via .hero's align-items: center) up by roughly half the
       margin, away from where the baseline actually centered it. */
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.tag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: var(--mist);
    color: var(--text-secondary);
}

/* .menu-card: also defined separately in
   site/locations/downtown-atlanta.html with slightly different
   .menu-card__name and .menu-card__desc font sizes (1.2rem/0.92rem there
   vs 1.15rem/0.85rem here). Bodies differ, so kept page-specific per the
   same escape hatch rather than unified into one .card base. Copied
   verbatim from site/index.html. */
.menu-card {
    text-align: center;
}

.menu-card__image-wrap {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    aspect-ratio: 1 / 1;
    background: var(--mist);
}

.menu-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.menu-card:hover .menu-card__image-wrap img {
    transform: scale(1.04);
}

.menu-card__name {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 0.35rem;
    color: var(--char);
}

.menu-card__desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.menu-card__tags {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* .location-card: only defined on index.html; no other page uses it. */
.location-card {
    background: var(--white);
    border-radius: 16px;
    padding: 3rem;
    border: 1px solid rgba(16, 25, 33, 0.06);
}

.location-card__name {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--char);
    margin-bottom: 0.5rem;
}

.location-card__neighborhood {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--turmeric);
    margin-bottom: 1.5rem;
}

.location-card__address {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.location-card__phone {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.location-card__hours {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    font-style: italic;
}

.location-card__map {
    width: 100%;
    height: 180px;
    background: var(--mist);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.location-card__map-placeholder {
    font-size: 0.8rem;
    color: var(--text-light);
    letter-spacing: 0.05em;
}

.location-card__link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--turmeric);
    transition: opacity 0.2s ease;
}

.location-card__link:hover {
    opacity: 0.7;
}

/* ===== Confidence Strip ===== */
.strip {
    background: var(--cream);
    padding: 2rem 2rem;
    text-align: center;
}

.strip__text {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.8;
}

.strip__divider {
    display: inline-block;
    margin: 0 1rem;
    color: var(--turmeric);
    font-weight: 300;
}

/* ===== Menu Highlight ===== */
.menu-section {
    padding: 120px 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.menu-section__header {
    text-align: center;
    margin-bottom: 4rem;
}

.menu-section__headline {
    font-family: Georgia, serif;
    font-size: 2.8rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--char);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.menu-section__cta {
    text-align: center;
    margin-top: 3.5rem;
}

.link-arrow {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--turmeric);
    transition: opacity 0.2s ease;
}

.link-arrow:hover {
    opacity: 0.75;
}

/* ===== Catering Section ===== */
.catering {
    background: var(--char);
    padding: 120px 3rem;
}

.catering__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 5rem;
    align-items: center;
}

.catering__image-wrap {
    border-radius: 16px;
    overflow: hidden;
}

.catering__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catering__text {
    max-width: 440px;
}

.catering__headline {
    font-family: Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.catering__body {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.catering__cta-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--turmeric);
    transition: opacity 0.2s ease;
}

.catering__cta-link:hover {
    opacity: 0.75;
}

.catering__stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.catering__stat {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* ===== Story Section ===== */
.story {
    padding: 120px 3rem;
    text-align: center;
}

.story__inner {
    max-width: 640px;
    margin: 0 auto;
}

.story__image-wrap {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.story__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story__caption {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    font-style: italic;
}

.story__headline {
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--char);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.story__body {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ===== Locations Section ===== */
.locations {
    background: var(--cream);
    padding: 120px 3rem;
}

.locations__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.locations__header {
    text-align: center;
    margin-bottom: 4rem;
}

.locations__headline {
    font-family: Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--char);
}

.locations__grid {
    max-width: 500px;
    margin: 0 auto;
}

/* ===== Footer overrides ===== */
.footer {
    background: var(--char);
    color: rgba(255,255,255,0.6);
    padding: 5rem 3rem 3rem;
}

.footer__inner {
    max-width: 1100px;
    /* The "0 auto" shorthand below already sets margin-bottom to 0 and
       wins over components.css's separate margin-bottom: 3rem longhand
       for the same reason as .hero__content's padding-top above. No
       separate override needed. */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer__brand-name {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
}

.footer__brand-desc {
    /* global.css also sets color: rgba(255,255,255,0.4) here, and the
       baseline rendered it (index.html's inline rule never set color on
       this selector, so it never inherited .footer's own color either -
       a same-selector declaration always beats inheritance). Not
       overridden: doing so would diverge from the baseline's actual
       (dimmer) description text color. */
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 260px;
}

.footer__col-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 1.25rem;
}

.footer__col ul {
    /* global.css also sets display: flex, flex-direction: column and
       gap: 0.75rem here, and the baseline rendered it as a flex column
       (index.html's inline rule only ever set list-style: none on this
       selector). Not reset: doing so would diverge from the baseline's
       actual footer-link spacing. */
    list-style: none;
}

.footer__col li {
    margin-bottom: 0.7rem;
}

/* .footer__col a (specificity 0,1,1) is index.html's own inline rule,
   carried verbatim. components.css's .footer__col ul li a (specificity
   0,1,3, sourced from global.css) targets the same anchor elements at
   higher specificity and wins font-size/color regardless of load order -
   exactly as global.css's identical rule already won in the baseline. No
   override is added here: the baseline's rendered footer-link font-size
   and color were always global.css's 0.9rem / rgba(255,255,255,0.55), not
   this rule's 0.88rem / 0.6, so adding one would diverge from the
   baseline rather than restore it. transition: color is unaffected by
   the specificity collision (components.css never sets it), so it still
   applies from this rule. */
.footer__col a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.2s ease;
}

.footer__col a:hover {
    color: var(--white);
}

.footer__bottom {
    /* global.css also sets flex-wrap: wrap and gap: 1rem here, and the
       baseline rendered it. Not reset: doing so would diverge from the
       baseline, even though at full desktop width the visual difference
       is expected to be negligible (justify-content: space-between
       already separates the two items well past 1rem). */
    max-width: 1100px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__copy {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .catering__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .catering__text {
        max-width: 100%;
    }

    .hero__headline {
        font-size: 3.2rem;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 600px;
    }

    .hero__headline {
        font-size: 2.5rem;
    }

    .hero__sub {
        font-size: 1rem;
    }

    .strip__divider {
        display: none;
    }

    .strip__text {
        font-size: 0.7rem;
        line-height: 2.2;
    }

    .strip__segment {
        display: block;
    }

    .menu-section,
    .catering,
    .story,
    .locations {
        padding: 80px 1.5rem;
    }

    .menu-section__headline,
    .catering__headline,
    .locations__headline {
        font-size: 2rem;
    }

    .menu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* index.html sets grid-template-columns: 1fr 1fr AND gap: 2rem here.
       components.css only overrides grid-template-columns (to 1fr) at
       this breakpoint, so gap was missed on the first pass of this file:
       with no override, components.css's base gap: 3rem (outside any
       media query) kept applying below 768px, sitting 1rem wider than
       the baseline's mobile/tablet footer columns. Both properties are
       carried here now. */
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero__headline {
        font-size: 2rem;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero__ctas {
        flex-direction: column;
        align-items: center;
    }

    .footer__inner {
        grid-template-columns: 1fr;
    }

    .catering__stats {
        flex-wrap: wrap;
        gap: 1rem;
    }
}