/* === Afitt Bistro Theme — Typography (v2: Afitt Display HU + Nunito Sans) ===
   Source spec: FONTS/TYPOGRAPHY_GUIDE.md (2026-10-03). */

/* ==== Font tokens ==== */
:root {
    --font-display: 'Afitt Display HU', 'Arial Black', sans-serif;
    --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-ui: var(--font-body);
    --font-price: var(--font-body);
}

/* ==== Type scale (16px root; fluid via clamp) ==== */
:root {
    --text-hero:         clamp(3.5rem, 6vw, 6.5rem);
    --text-display:      clamp(1.75rem, 5vw, 3.25rem);
    --text-display-sm:   clamp(1.5rem, 3.5vw, 2.25rem);
    --text-product:      clamp(1.5rem, 4vw, 2.75rem);
    --text-product-sm:   clamp(1.25rem, 3vw, 1.75rem);
    --text-subtitle:     clamp(1rem, 2vw, 1.125rem);
    --text-lead:         clamp(1.125rem, 1.5vw, 1.375rem);
    --text-price:        clamp(1.125rem, 2.5vw, 1.375rem);
    --text-price-lg:     clamp(1.375rem, 3vw, 1.75rem);
    --text-button-size:  clamp(1rem, 1.8vw, 1.125rem);
    --text-body:         1.0625rem;
    --text-ui:           1rem;
    --text-compact:      0.9375rem;
    --text-input:        clamp(1rem, 1.4vw, 1.125rem);
    --text-micro:        clamp(0.75rem, 1.2vw, 0.8125rem);

    --leading-display:   1.02;
    --leading-heading:   1.1;
    --leading-body:      1.55;
    --leading-compact:   1.4;
    --leading-ui:        1.25;
    --leading-price:     1.15;
}

@media (max-width: 860px) {
    :root {
        --text-hero: clamp(2.5rem, 12vw, 3.5rem);
    }
}

/* ==== Element defaults ==== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
}

strong,
b {
    font-weight: 700;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
    font-size: var(--text-ui);
}

/* ==== 1. Display role — Afitt Display HU 400 ====
   Owner amendment (2026-10-03): the product sheet's large title and the large
   homepage feature titles are display exceptions — compact menu cards keep
   Nunito Sans (long names get too dense in the display face at card size). */
.display-title,
.section-title,
.section-title--sm,
.home-section__title,
.home-feast__title,
.home-favorites__title,
.home-weekmenu__title,
.home-cat__name,
.menu-hero__title,
.menu-section__title,
.menu-sheet__title,
.menu-empty__label,
.menu-cart__title,
.menu-nav__title,
.category-card__label,
.wm-hero__title,
.wm-title,
.wm-day__num {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    line-height: var(--leading-heading);
    letter-spacing: -0.015em;
    text-transform: none;
}

/* Emphasis inside a display heading stays upright 400 (use colour instead). */
.afitt-display :is(strong, b, em),
.afitt-display,
.display-title :is(strong, b, em),
.section-title :is(strong, b, em),
.home-section__title :is(strong, b, em),
.menu-hero__title :is(strong, b, em),
.menu-section__title :is(strong, b, em) {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
}

.section-title,
.display-title {
    font-size: var(--text-display);
}

.section-title--sm {
    font-size: var(--text-display-sm);
}

/* ==== 2. Product names — Nunito Sans 700 ==== */
.product-card-title,
.food-display,
.product-card-title--sm,
.menu-item__title,
.product-card__title,
.product-modal__title {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    overflow-wrap: break-word;
    hyphens: auto;
}

.product-card-title,
.food-display {
    font-size: var(--text-product);
}

.product-card-title--sm {
    font-size: var(--text-product-sm);
}

/* ==== 3. Body / descriptions — Nunito Sans 400 ==== */
.subtitle,
.category-label,
.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: var(--leading-body);
    letter-spacing: normal;
    text-transform: none;
}

.subtitle,
.category-label {
    font-size: var(--text-subtitle);
}

.body-text {
    font-size: var(--text-body);
}

/* ==== 4. UI / buttons — Nunito Sans 700, natural casing ==== */
.btn-primary,
.btn-outline,
.btn,
.btn-label {
    font-family: var(--font-ui);
    font-size: var(--text-button-size);
    font-weight: 700;
    line-height: var(--leading-ui);
    letter-spacing: normal;
    text-transform: none;
}

.menu-chip,
.menu-nav__link {
    font-family: var(--font-ui);
    font-weight: 600;
    line-height: var(--leading-ui);
    letter-spacing: normal;
    text-transform: none;
}

/* Header nav items use the brand heading font (owner request 2026-10-10). */
.site-nav__item a {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-ui);
    letter-spacing: normal;
    text-transform: none;
}

/* ==== 5. Prices — Nunito Sans 700, tabular figures ==== */
.price-display,
.price-display--lg,
.home-feast__price,
.home-fav-card__price,
.menu-item__price,
.menu-sheet__price,
.menu-cart__item-total,
.menu-cart__total-value {
    font-family: var(--font-price);
    font-weight: 700;
    line-height: var(--leading-price);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: normal;
    text-transform: none;
}

.price-display {
    font-size: var(--text-price);
}

.price-display--lg {
    font-size: var(--text-price-lg);
}

/* ==== 6. Eyebrows — Nunito Sans 700, uppercase ==== */
.micro-label,
.badge,
.home-hero__eyebrow,
.home-section__eyebrow,
.menu-hero__eyebrow,
.wm-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    font-weight: 700;
    line-height: 1.3;
}

.home-hero__eyebrow,
.home-section__eyebrow,
.menu-hero__eyebrow,
.wm-eyebrow {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Badge / micro label keep their compact uppercase treatment. */
.micro-label,
.badge {
    letter-spacing: 0.5px;
    text-transform: uppercase;
}