/* Page-specific CSS for site/menu.html. .tag (+ dark variants), .fav-card
   and .protein-card were staged during Task 6 (see notes on each below).
   The remaining rules were added during Task 12 to carry the rest of the
   page's inline <style> block: menu-hero, favorites, transition, byo-step,
   protein-grid, format-*, toppings-* and chutney-*, sides and the page's own
   catering-callout (a different body from downtown.css's catering-callout;
   see docs/intentional-differences.md), plus their responsive breakpoints.
   None of these exist in components.css. Copied verbatim from
   site/menu.html.

   .btn--outline-char and .btn--outline-white are NOT re-declared here even
   though menu.html's inline block has its own values for both (border
   opacity 0.25 vs components.css's 0.4, and 0.4 vs 0.6, plus differing
   :hover states) - see docs/intentional-differences.md. That file records
   the divergence as intentional; components.css's shared value wins on
   this page like every other, so the buttons render with the shared
   design system's border and hover state, not the baseline's.

   .tag: identical body to site/index.html's .tag, but differs from
   site/locations/downtown-atlanta.html's .tag (font-size 0.65rem here vs
   0.68rem there). Per the task-6 brief's escape hatch, not promoted to
   components.css; kept page-specific. Copied verbatim from
   site/menu.html. */
.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);
}

.tag--dark {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}

.tag--halal-dark {
    background: rgba(101, 168, 18, 0.15);
    color: #8BC34A;
}

.tag--veg-dark {
    background: rgba(101, 168, 18, 0.15);
    color: #8BC34A;
}

.tag--vegan-dark {
    background: rgba(101, 168, 18, 0.15);
    color: #8BC34A;
}

/* .fav-card: only defined on menu.html (dark "Mom's Favorites" cards). */
.fav-card {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.3s ease;
}

.fav-card:hover {
    transform: translateY(-4px);
}

.fav-card__image-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}

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

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

.fav-card__body {
    padding: 1.5rem;
}

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

.fav-card__desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.fav-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fav-card__price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--turmeric);
}

.fav-card__tags {
    display: flex;
    gap: 0.4rem;
}

/* .protein-card: only defined on menu.html (Build Your Own step). */
.protein-card {
    text-align: center;
}

.protein-card__image-wrap {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    aspect-ratio: 1 / 1;
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
    background: var(--mist);
}

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

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

.protein-card__name {
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
    color: var(--char);
}

.protein-card__desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.protein-card__note {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--chipotle);
    margin-bottom: 0.4rem;
}

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

/* .link-arrow: menu.html's own body (font-size 0.95rem), differing from
   downtown.css's .link-arrow (1rem). Per the same escape hatch as .tag,
   kept page-specific. Copied verbatim from site/menu.html. */
.link-arrow {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--turmeric);
    transition: opacity 0.2s ease;
}

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

/* ===== Menu Hero (shorter than homepage) ===== */
.menu-hero {
    padding: 120px 3rem 80px;
    text-align: center;
    background: var(--cream);
}

.menu-hero__content {
    max-width: 680px;
    margin: 0 auto;
}

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

.menu-hero__sub {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.menu-hero__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Mom's Favorites ===== */
.favorites {
    background: var(--char);
    padding: 120px 3rem;
}

.favorites__inner {
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.favorites__sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.75rem;
    line-height: 1.6;
}

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

.favorites__grid--bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 66%;
    margin: 2.5rem auto 0;
}

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

/* ===== Transition Strip ===== */
.transition {
    padding: 80px 3rem;
    text-align: center;
    background: var(--white);
}

.transition__headline {
    font-family: Georgia, serif;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--char);
    margin-bottom: 0.5rem;
}

.transition__sub {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* ===== BYO Steps ===== */
.byo-step {
    padding: 120px 3rem;
}

.byo-step--cream {
    background: var(--cream);
}

.byo-step--white {
    background: var(--white);
}

.byo-step__inner {
    max-width: 1200px;
    margin: 0 auto;
}

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

.byo-step__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--chipotle);
    margin-bottom: 1rem;
}

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

/* Protein grid - 4 columns desktop, 2 mobile */
.protein-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Format options (Step 2) - circular */
.format-grid {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.format-option {
    text-align: center;
    width: 160px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.format-option:hover {
    transform: translateY(-4px);
}

.format-option__circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.25rem;
    background: var(--mist);
    border: 3px solid transparent;
    transition: border-color 0.2s ease;
}

.format-option:hover .format-option__circle {
    border-color: var(--turmeric);
}

.format-option__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.format-option__name {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--char);
    margin-bottom: 0.25rem;
}

.format-option__price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--char);
    margin-bottom: 0.2rem;
}

.format-option__gf {
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--chipotle);
    vertical-align: super;
}

.format-note {
    text-align: center;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.format-note strong {
    color: var(--chipotle);
    font-weight: 600;
}

.format-option__badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--chipotle);
}

.format-option__desc {
    font-size: 0.82rem;
    color: var(--text-light);
}

/* Toppings & chutneys (Step 3) */
.toppings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.toppings-col__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chipotle);
    margin-bottom: 1.25rem;
}

.toppings-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.topping-pill {
    background: var(--white);
    padding: 0.6rem 1.1rem;
    border-radius: 100px;
    font-size: 0.88rem;
    color: var(--text-primary);
    border: 1px solid rgba(16, 25, 33, 0.06);
}

.chutney-pill {
    background: var(--white);
    padding: 0.6rem 1.1rem;
    border-radius: 100px;
    font-size: 0.88rem;
    color: var(--text-primary);
    border: 1px solid rgba(16, 25, 33, 0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chutney-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chutney-note {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 1rem;
    font-style: italic;
}

/* ===== Sides & Drinks ===== */
.sides {
    padding: 120px 3rem;
    background: var(--white);
}

.sides__inner {
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.sides__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.side-item {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--cream);
    border-radius: 16px;
}

.side-item__name {
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--char);
    margin-bottom: 0.25rem;
}

.side-item__price {
    font-size: 0.85rem;
    color: var(--text-light);
}

.sides__more {
    text-align: center;
    margin-top: 2.5rem;
}

/* ===== Catering Callout (menu.html's own body - differs from
   downtown.css's .catering-callout; see docs/intentional-differences.md's
   Menu section for the property-by-property note) ===== */
.catering-callout {
    background: var(--char);
    padding: 120px 3rem;
}

.catering-callout__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

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

.catering-callout__body {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.catering-callout__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Responsive =====
   Ported verbatim from menu.html's inline <style> block. The .nav and
   .footer__inner rules in the baseline's 768px/480px blocks are NOT
   carried: both are shared chrome now fully owned by components.css (see
   about.css/downtown.css, neither of which carries them either). Losing
   the baseline's two-column .footer__inner between 481px and 768px is a
   real visual change on this page only, recorded in
   docs/intentional-differences.md's "Shared footer CSS consolidation"
   section - a separate entry from the "Shared footer" text-only section,
   because this one is layout, not wording, and menu is the only baseline
   whose footer CSS actually differs from components.css's collapse
   breakpoint. */
@media (max-width: 1024px) {
    .favorites__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .favorites__grid--bottom {
        max-width: 100%;
    }
    .protein-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .menu-hero { padding: 100px 1.5rem 60px; }
    .menu-hero__headline { font-size: 2.8rem; }
    .favorites,
    .byo-step,
    .sides,
    .catering-callout { padding: 80px 1.5rem; }
    .transition { padding: 60px 1.5rem; }
    .favorites__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .favorites__grid--bottom { grid-template-columns: 1fr; max-width: 400px; }
    .protein-grid { grid-template-columns: repeat(2, 1fr); max-width: 360px; margin: 0 auto; }
    .format-grid { gap: 1.5rem; }
    .format-option { width: 120px; }
    .format-option__circle { width: 100px; height: 100px; }
    .toppings-layout { grid-template-columns: 1fr; gap: 2rem; }
    .sides__grid { grid-template-columns: repeat(2, 1fr); }
    .favorites__headline,
    .byo-step__headline { font-size: 2rem; }
}

@media (max-width: 480px) {
    .menu-hero__headline { font-size: 2.2rem; }
    .menu-hero__ctas { flex-direction: column; align-items: center; }
    .format-grid { flex-direction: column; align-items: center; }
    .sides__grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}