/*
 * Site stylesheet — T-006 page shell on the design tokens of
 * docs/design/design-system.md §2 (T-005), plus the section styles from T-004
 * that T-007…T-013 refine.
 *
 * Rules (tested in tests/unit/site-css.test.ts):
 * - Mobile-first: min-width queries at 768px and 1280px only (NFR-002). The one
 *   max-width query scopes the JavaScript drawer to mobile.
 * - Logical properties only (RTL, CON-002) — never left/right.
 * - Components use var(--token) values.
 * - Fonts are self-hosted; the page makes no request to another domain (NFR-006).
 * - Focus is always visible (:focus-visible, WCAG 2.4.7); no outline removal.
 */

/* ---------- fonts: Heebo 400/700, SIL OFL 1.1 (see /assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/heebo-hebrew-400-normal.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/heebo-hebrew-700-normal.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/heebo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/heebo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- design tokens (design-system.md §2) ---------- */
:root {
  /* §2.1 colour */
  --color-brand-green: #0e5c3a;
  --color-brand-green-dark: #0a4429;
  --color-brand-green-soft: #e7f1ec;
  --color-brand-red: #c1272d;
  --color-brand-red-dark: #9c1f24;
  --color-brand-red-soft: #fbeaea;
  --color-surface: #fdfbf7;
  --color-surface-2: #f4efe7;
  --color-surface-inverse: #0e5c3a;
  --color-text: #1e1b18;
  --color-text-muted: #5a5350;
  --color-text-on-dark: #fdfbf7;
  --color-border: #e0d8cc;
  --color-border-strong: #8c837b;
  --color-focus: #1f6feb;
  --color-success: #116b3a;
  --color-danger: #b3151b;
  --color-warning: #8a5a00;
  --color-warning-bg: #fff6e5;
  --color-overlay: rgba(14, 27, 20, 0.72);
  --color-overlay-strong: rgba(10, 26, 18, 0.92); /* lightbox backdrop (screens.md S-02) */
  --color-border-on-dark: rgba(253, 251, 247, 0.35); /* decorative divider on green (footer) */
  --color-scrim: linear-gradient(to top, rgba(10, 20, 14, 0.78), rgba(10, 20, 14, 0.15));
  /* Focus ring: blue on light surfaces; dark regions switch it to cream (3:1+ against green). */
  --focus-ring-color: var(--color-focus);

  /* §2.3 typography — rem so the browser's text size setting applies (WCAG 1.4.4); px equivalents in comments */
  --font-sans: "Heebo", "Assistant", "Segoe UI", system-ui, sans-serif;
  --text-display: clamp(2.125rem, 7vw, 3.75rem); /* 34–60px */
  --text-h2: clamp(1.625rem, 4.5vw, 2.5rem); /* 26–40px */
  --text-h3: clamp(1.25rem, 3vw, 1.625rem); /* 20–26px */
  --text-h4: 1.125rem; /* 18px */
  --text-lead: clamp(1.0625rem, 2.4vw, 1.25rem); /* 17–20px */
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.9375rem; /* 15px */
  --text-caption: 0.8125rem; /* 13px */
  --measure: 65ch;
  --measure-legal: 72ch;

  /* §2.4 spacing (4px scale) and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-section: clamp(48px, 8vw, 96px);
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --header-h: 64px;
  --menu-nav-h: 60px; /* chip bar: 44px chips + 2 × 8px; menu.js publishes the live value */
  --tap-min: 44px;
  /* Footer social icon links (FR-011): 48px, in rem so they grow with the text size. */
  --social-link-size: max(48px, 3rem);
  /* Quick-action bar (FR-010): 48px buttons — in rem, so they grow with the text size — with 8px above and below (64px). */
  --quick-action-h: max(48px, 3rem);
  --quick-bar-h: calc(var(--quick-action-h) + 2 * var(--space-2));
  /* Room kept free at the page end on mobile: the bar's live height (nav.js), else its nominal height + the safe area. */
  --quick-bar-space: var(--quick-bar-offset, calc(var(--quick-bar-h) + env(safe-area-inset-bottom, 0px)));

  /* §2.5 radius, border, shadow */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --border-thin: 1px solid var(--color-border);
  --border-field: 1.5px solid var(--color-border-strong);
  --shadow-sm: 0 1px 2px rgba(30, 27, 24, 0.06), 0 2px 6px rgba(30, 27, 24, 0.05);
  --shadow-md: 0 4px 12px rgba(30, 27, 24, 0.1);
  --shadow-lg: 0 12px 32px rgba(30, 27, 24, 0.18);
  --shadow-focus: 0 0 0 3px rgba(31, 111, 235, 0.35);
  --shadow-up: 0 -4px 12px rgba(30, 27, 24, 0.1); /* bottom bar: the shadow falls on the content above it */

  /* §2.6 motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-hero: 700ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --stagger: 80ms;

  /* §2.7 layers */
  --z-base: 0;
  --z-sticky-subnav: 90; /* menu category bar: under the header, over the cards */
  --z-sticky-header: 100;
  --z-quick-actions: 200;
  --z-drawer: 300;
  --z-dialog: 400;
  --z-toast: 500;
  --z-skip-link: 600;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  text-align: start;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin-block: 0 var(--space-4);
}

h1 {
  font-size: var(--text-display);
  line-height: 1.08;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--color-brand-green);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
}

h4 {
  font-size: var(--text-h4);
  line-height: 1.3;
}

p {
  max-inline-size: var(--measure);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--color-brand-green);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
}

.skip-link {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-9));
  inset-inline-start: var(--space-4);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.skip-link:focus-visible {
  inset-block-start: var(--space-4);
}

/* Dark regions: cream focus ring (blue on green is below 3:1). */
.hero,
.site-footer {
  --focus-ring-color: var(--color-text-on-dark);
}

/* ---------- layout ---------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prose {
  max-inline-size: var(--measure-legal);
}

.section {
  padding-block: var(--space-section);
}

.section--alt {
  background: var(--color-surface-2);
}

/* ---------- header and main navigation (FR-013) ---------- */
.site-header {
  position: relative;
  z-index: var(--z-sticky-header);
  background: var(--color-surface);
  border-block-end: var(--border-thin);
  transition: box-shadow var(--dur-base) var(--ease-in-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  min-block-size: var(--header-h);
  padding-block: var(--space-1);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--color-brand-green);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Drawer-only controls: shown by the "scripting: enabled" query below. */
.nav-toggle,
.site-nav__bar {
  display: none;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-1);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

/* Current section: underline (not colour alone, WCAG 1.4.1) + aria-current. */
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-1);
  inset-block-end: 6px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-red);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-link[aria-current="true"]::after {
  transform: none;
}

/* Sticky header + anchor offset: always on desktop; on mobile only with JS (the
   drawer keeps the header one row high — without JS the nav wraps under the brand). */
@media (min-width: 768px), (scripting: enabled) {
  html {
    scroll-padding-block-start: calc(var(--header-offset, var(--header-h)) + var(--space-3));
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
  }

  /* The menu chip bar sticks right under the sticky header (nav.js measures its height). */
  .menu-nav {
    inset-block-start: var(--header-offset, var(--header-h));
  }
}

/* Mobile drawer (JS). nav.js toggles .is-open, aria-expanded and the dialog role. */
@media (scripting: enabled) and (max-width: 767.98px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* The nav is a viewport-sized frame that clips the sliding panel, so the
     off-screen panel can never widen the page (no horizontal scroll at 360px). */
  .site-nav {
    --focus-ring-color: var(--color-text-on-dark);
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-base);
  }

  .site-nav.is-open {
    visibility: visible;
    transition: none;
  }

  .site-nav__panel {
    block-size: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-1) var(--container-pad) var(--space-7);
    background: var(--color-brand-green);
    color: var(--color-text-on-dark);
    transform: translateX(100%); /* enters from the right (the start side in RTL) */
    transition: transform var(--dur-base) var(--ease-out);
  }

  .site-nav.is-open .site-nav__panel {
    transform: none;
  }

  .site-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: var(--header-h);
    margin-block-end: var(--space-5);
  }

  .site-nav__brand {
    font-size: var(--text-h3);
    font-weight: 700;
  }

  .nav-close {
    border-color: var(--color-text-on-dark);
  }

  .site-nav .nav-list {
    flex-direction: column;
    gap: var(--space-2);
  }

  .site-nav .nav-link {
    min-block-size: 48px;
    color: var(--color-text-on-dark);
    font-size: var(--text-h3);
  }

  .site-nav .nav-link::after {
    background: var(--color-text-on-dark);
  }

  .nav-open,
  .nav-open body {
    overflow: hidden;
  }

  /* Above the quick-action bar and anything else fixed while the drawer is open. */
  .nav-open .site-header {
    z-index: var(--z-drawer);
  }
}

/* ---------- back to top (FR-013 AC4) — shown by nav.js after one screen ----------
   On mobile it floats above the quick-action bar; from 768px in the corner. */
.back-to-top {
  position: fixed;
  inset-block-end: calc(var(--quick-bar-space) + var(--space-3));
  inset-inline-end: var(--space-4);
  z-index: var(--z-quick-actions);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-2));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* It floats over any background: a cream gap keeps the blue ring visible everywhere. */
.back-to-top:focus-visible {
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-md);
}

/* ---------- quick actions: call + WhatsApp (FR-010, T-012) ----------
   One group in the header (partials/quick-actions.ejs), on every page.
   Mobile: a bar fixed to the bottom of the screen — two equal 48px buttons, 64px
   in all plus the safe area — reachable at any scroll position. The page keeps
   --quick-bar-space free at its end and scrolls focused/anchored elements clear of
   it, so the bar never hides content for good.
   From 768px (breakpoint block below): two buttons in the flow of the sticky
   header — always in view, never floating over the content or the form. */
html {
  scroll-padding-block-end: var(--quick-bar-space);
}

body {
  padding-block-end: var(--quick-bar-space);
}

.quick-actions {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-quick-actions);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-2) var(--container-pad) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-thin);
  background: var(--color-surface);
  box-shadow: var(--shadow-up);
}

.quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: var(--tap-min);
  min-block-size: var(--quick-action-h);
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.quick-action .contact-icon {
  color: currentColor;
}

.quick-action__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-inline-size: 0;
}

/* Contrast (design-system §2.2): white on red 6.0:1, cream on green 8.6:1. */
.quick-action--call {
  background: var(--color-brand-red);
  color: #ffffff;
}

.quick-action--whatsapp {
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
}

/* BR-006: a sample number — dashed, amber, "ממתין לעדכון" (5.5:1), and only an in-page link. */
.quick-action--pending {
  border: 1.5px dashed var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.quick-action__status {
  font-size: var(--text-caption);
  line-height: 1.3;
}

/* The number is in the call button's accessible name everywhere; on screen from 768px. */
.quick-action__value {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- BR-006: sample content is always visibly marked ---------- */
.placeholder-tag {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
  vertical-align: middle;
}

.placeholder-banner,
.site-notice {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-small);
}

.site-notice {
  border-radius: 0;
  border-inline: 0;
  border-block-start: 0;
  text-align: center;
}

.site-notice p {
  margin: 0;
  max-inline-size: none;
}

/* A neutralised link: looks inactive, does nothing (no href). */
.field-link--disabled {
  cursor: not-allowed;
  opacity: 0.7;
  text-decoration: line-through dashed;
}

/* ---------- lists ---------- */
.chips,
.menu-items,
.diet-tags,
.gallery-grid,
.social-list,
.legal-links,
.site-footer__contact,
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips,
.social-list,
.legal-links,
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* ---------- footer (T-013 · design-system §3.10, screens.md S-01g) ---------- */
/* Dark green with cream text (8.6:1); a thin Italian tricolour along its top edge. */
.site-footer {
  padding-block: var(--space-7);
  border-block-start: 4px solid var(--color-brand-green);
  border-image: linear-gradient(90deg, var(--color-brand-green) 33.33%, var(--color-text-on-dark) 33.33% 66.66%, var(--color-brand-red) 66.66%) 1;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-dark);
}

.site-footer a {
  color: var(--color-text-on-dark);
}

/* One column on mobile; from 768px the blocks sit side by side (2 → 4 columns). */
.site-footer__inner {
  display: grid;
  gap: var(--space-6);
}

.site-footer__brand {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.site-footer__tagline {
  margin: var(--space-2) 0 0;
}

.site-footer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
}

.site-footer__contact {
  display: grid;
  gap: var(--space-2);
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Icons follow the cream text (green on green would vanish). */
.site-footer .contact-icon {
  margin-block-start: 0.2em;
  color: currentColor;
}

/* Phone and e-mail: a 44px target to tap, not just the line of text. */
.site-footer__contact .field-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}

/* A neutralised sample link stays readable on green (≥4.5:1): no fading here; it is
   struck through and carries the "לדוגמה" tag. */
.site-footer .field-link--disabled {
  opacity: 1;
}

/* Social networks (FR-011): 48px round icon links, outlined in cream (≥3:1 on green). */
.site-footer .social-list {
  gap: var(--space-3);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--social-link-size);
  block-size: var(--social-link-size);
  border: 1.5px solid var(--color-text-on-dark);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-dark);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.social-icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
}

/* Privacy policy + accessibility statement: underlined text links, 44px tall. */
.site-footer .legal-links {
  flex-direction: column;
  gap: 0;
}

.legal-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-links a[aria-current="page"] {
  font-weight: 700;
}

.site-footer__copyright {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-on-dark);
  font-size: var(--text-caption);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    column-gap: var(--space-7);
  }
}

@media (hover: hover) and (pointer: fine) {
  .social-link:hover {
    background: var(--color-text-on-dark);
    color: var(--color-brand-green);
  }

  .legal-links a:hover {
    text-decoration-thickness: 2px;
  }
}

/* ---------- buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--color-brand-red);
  color: #ffffff;
}

.btn--secondary {
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
}

.btn--light {
  border-color: var(--color-text-on-dark);
  color: var(--color-text-on-dark);
}

.btn--outline {
  border-color: var(--color-brand-green);
  background: transparent;
  color: var(--color-brand-green);
}

/* ---------- hero (FR-001, T-007) ----------
   Mobile: one column; the image is an out-of-flow background layer under a scrim,
   so it never pushes the name, sentence and buttons below the fold (360px) and
   cannot shift anything when it loads. From 768px: text beside the image.
   The content is visible by default; the entrance motion lives in the
   prefers-reduced-motion: no-preference block at the end of this file. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-7);
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: var(--space-6);
}

.hero__content {
  min-inline-size: 0;
}

.hero__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
}

/* Decorative Italian tricolour next to the name; outlined so the green shows on green. */
.hero__flag {
  flex: none;
  inline-size: 40px;
  block-size: 10px;
  border: 1px solid var(--color-text-on-dark);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-brand-green) 33.33%, var(--color-text-on-dark) 33.33% 66.66%, var(--color-brand-red) 66.66%);
}

.hero h1 {
  margin-block-end: var(--space-3);
  text-wrap: balance;
}

.hero__lead {
  max-inline-size: 60ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* "To the menu" on its own row, call + WhatsApp side by side below it. */
.hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.hero__actions > :first-child {
  grid-column: 1 / -1;
}

.hero__actions .btn {
  padding-inline: var(--space-4);
  text-align: center;
}

.hero__note {
  margin: var(--space-3) 0 0;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim over the image: text on it stays ≥4.5:1 whatever the photo (design-system §2.2). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim), var(--color-overlay);
}

/* BR-006 tag of a sample image, in its corner (on mobile: inside the hero's bottom padding). */
.hero__media .placeholder-tag {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
}

/* ---------- menu (FR-002, T-008) ----------
   All categories are shown one after another; the chip bar is a sticky row of
   in-page links that scrolls sideways on its own (never the page) on a phone.
   The sticky offset under the header is in the "sticky header" query below. */
.section-lead {
  margin-block: 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.menu-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky-subnav);
  margin-inline: calc(-1 * var(--container-pad));
  background: var(--color-surface-2);
}

/* The scroll container keeps room around the chips so their focus ring is never clipped. */
.menu-nav .chips {
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--container-pad);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-pad);
  scrollbar-width: thin;
}

.menu-nav li {
  flex: none;
  scroll-snap-align: start;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* The category in view (menu.js): filled green, announced with aria-current. */
.chip[aria-current="true"] {
  border-color: var(--color-brand-green);
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
}

.menu-category {
  margin-block-start: var(--space-6);
  /* Anchor target: its heading lands below the sticky chip bar. */
  scroll-margin-block-start: var(--menu-nav-offset, var(--menu-nav-h));
}

/* Category heading with a thin decorative rule after it. */
.menu-category > h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-brand-green-dark);
}

.menu-category > h3::after {
  content: "";
  flex: 1 1 var(--space-6);
  block-size: 1px;
  background: var(--color-border);
}

.menu-items {
  display: grid;
  gap: var(--space-4);
}

/* A card is information only — not a link or a button (FR-002 AC5). */
.menu-item {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  min-inline-size: 0;
  padding: var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* With a photo: text first, a 96px thumbnail at the end side. Without: the text uses the full width. */
.menu-item--with-image {
  grid-template-columns: minmax(0, 1fr) 96px;
}

.menu-item__body {
  min-inline-size: 0;
}

.menu-item__img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Name and price on one row (space-between); a long name wraps, the price never does. */
.menu-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.menu-item__name {
  min-inline-size: 0;
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.menu-item__desc {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.price {
  flex: none;
  color: var(--color-brand-red);
  font-size: var(--text-h4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* Icon + text, never colour alone (WCAG 1.4.1). */
.diet-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-brand-green-soft);
  color: var(--color-brand-green-dark);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.45;
}

.diet-tag__icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}

/* BR-003: "prices may change, orders by phone" + last update date. */
.menu-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-6) var(--space-5);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--color-brand-green);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-small);
}

.menu-disclaimer .icon {
  color: var(--color-brand-green);
}

.menu-disclaimer p {
  margin: 0;
}

/* ---------- about (FR-003, T-009) ----------
   Mobile: text, image and highlights stacked in reading order. From 768px: text at
   the start side (right in RTL, 55%) beside the image (45%), highlights below both.
   Text is start-aligned (never justified) at a readable measure. The fade-up reveal
   lives in the prefers-reduced-motion: no-preference block at the end of this file. */
.about__inner {
  display: grid;
  gap: var(--space-6);
}

.about__content {
  min-inline-size: 0;
}

.about__content p {
  margin-block: 0 var(--space-4);
  line-height: 1.75;
}

.about__content p:last-child {
  margin-block-end: 0;
}

/* Decorative Italian tricolour along the image's start edge (right in RTL). */
.about__media {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  padding-inline-start: var(--space-3);
}

.about__media::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--color-brand-green) 33.33%, var(--color-border) 33.33% 66.66%, var(--color-brand-red) 66.66%);
}

/* Height follows the width/height attributes' ratio: the box is reserved before the image loads (no CLS). */
.about__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* BR-006 tag of a sample image, in its corner. */
.about__media .placeholder-tag {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
}

.about__highlights {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about__highlight {
  min-inline-size: 0;
  padding: var(--space-4);
  border-inline-start: 4px solid var(--color-brand-green);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.about__highlight-title {
  margin-block-end: var(--space-1);
  color: var(--color-brand-green-dark);
  font-size: var(--text-h4);
}

.about__highlight p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ---------- gallery (FR-004, T-010) ----------
   Uniform 4:3 tiles: 2 columns on mobile, 3 from 768px (6 photos fill balanced rows).
   The tile width is mirrored in the images' `sizes` (src/modules/content/images.ts).
   A tile is a link (a button once gallery.js runs); its image zooms slightly on
   hover/focus inside the clipped frame — the frame never moves, so nothing shifts. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.gallery-tile {
  min-inline-size: 0;
  margin: 0;
}

.gallery-tile__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface); /* shown while the lazy image loads */
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.gallery-tile__link img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.gallery-tile__link:focus-visible img {
  transform: scale(1.04);
}

.gallery-tile__caption {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ---------- gallery lightbox (FR-004, NFR-003) — built by gallery.js ----------
   A full-screen modal layer: the close button at the top (inline-end = left in RTL),
   the photo — never wider than 1200px or taller than the space left — with its
   caption, then previous · counter · next. The backdrop is almost opaque
   (screens.md S-02), so cream text and the cream focus ring stay readable on it. */
.lightbox {
  --focus-ring-color: var(--color-text-on-dark);
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--container-pad) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--color-overlay-strong);
  color: var(--color-text-on-dark);
  overscroll-behavior: contain;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__bar {
  display: flex;
  justify-content: flex-end;
}

.lightbox .icon-btn {
  border-color: var(--color-text-on-dark);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  color: var(--color-text-on-dark);
}

.lightbox__stage {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

/* The photo shrinks to the space left above the caption; object-fit keeps its proportions. */
.lightbox__figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 0;
  margin: 0;
}

.lightbox__img {
  flex: 0 1 auto;
  min-block-size: 0;
  max-inline-size: min(100%, 1200px);
  object-fit: contain;
}

.lightbox__figure[aria-busy="true"] .lightbox__img {
  background: var(--color-brand-green-dark);
}

.lightbox__error {
  margin: 0;
  font-weight: 700;
}

.lightbox__caption {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  max-inline-size: var(--measure);
  text-align: center;
}

.lightbox__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.lightbox__counter {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* The page behind the open lightbox does not scroll. */
.lightbox-open,
.lightbox-open body {
  overflow: hidden;
}

/* ---------- contact details and opening hours (FR-005, FR-012, T-011) ----------
   Two cards — details (address + navigation, phone, WhatsApp, e-mail) and opening
   hours — stacked on mobile, side by side from 768px. Every value is text that wraps
   on a 360px screen; phone/e-mail/WhatsApp links are 44px tap targets. A sample
   value's neutralised link keeps the .field-link--disabled look (BR-006). */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}

.card {
  min-inline-size: 0;
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.contact-card__title {
  color: var(--color-brand-green-dark);
}

.contact-card__note {
  margin-block: 0 var(--space-3);
}

.details {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.details__row {
  min-inline-size: 0;
}

/* Label with its icon; the value lines up under the label text. */
.details dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.contact-icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--color-brand-green);
}

.details dd {
  min-inline-size: 0;
  margin: 0;
  padding-inline-start: calc(20px + var(--space-2));
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Phone, WhatsApp, e-mail: a whole 44px row to tap, not just the line of text. */
.details dd > .field-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}

.details__action {
  margin-block: var(--space-3) 0;
}

.details__action .btn {
  gap: var(--space-2);
}

.details__action .contact-icon {
  color: currentColor;
}

.details__note {
  margin-block: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: 400;
}

.hours {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hours th,
.hours td {
  padding-block: var(--space-2);
  border-block-end: var(--border-thin);
  text-align: start;
}

.hours th {
  font-weight: 400;
}

/* Times line up at the end side (left in RTL), in tabular figures. */
.hours td {
  font-weight: 700;
  text-align: end;
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-block-end: 0;
}

/* ---------- legal pages ---------- */
.breadcrumbs {
  margin-block-end: var(--space-4);
  font-size: var(--text-small);
}

.breadcrumbs li + li::before {
  content: "›";
  margin-inline-end: var(--space-2);
  color: var(--color-text-muted);
}

.doc-meta {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

/* ---------- breakpoints (mobile-first) ---------- */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-6);
    --header-h: 72px;
  }

  .nav-list {
    gap: 0 var(--space-5);
  }

  /* Quick actions join the sticky header: in the flow, so the page needs no room for them. */
  html {
    scroll-padding-block-end: auto;
  }

  body {
    padding-block-end: 0;
  }

  .quick-actions {
    position: static;
    display: flex;
    gap: var(--space-2);
    padding: 0;
    border-block-start: 0;
    background: none;
    box-shadow: none;
  }

  .quick-action {
    padding-inline: var(--space-4);
  }

  .quick-action__value {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
  }

  .back-to-top {
    inset-block-end: var(--space-5);
  }

  .menu-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* About: text 55% at the start side (right in RTL), image 45%, vertically centred. */
  .about__inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    align-items: center;
    gap: var(--space-6) var(--space-7);
  }

  .about__highlights {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  /* Hero: text at the start (right in RTL), image beside it in its own box. */
  .hero {
    padding-block: var(--space-section);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-7);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    min-block-size: 56px;
    padding-inline: var(--space-5);
  }

  .hero__media {
    position: relative;
    z-index: auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  /* Height follows the width/height attributes' ratio: the box is reserved before the image loads. */
  .hero__media img {
    block-size: auto;
  }

  .hero__media::after {
    content: none;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-pad: var(--space-7);
  }
}

/* ---------- interaction and motion ---------- */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after {
    transform: none;
  }

  .back-to-top:hover {
    background: var(--color-brand-green-dark);
  }

  .quick-action--call:hover {
    background: var(--color-brand-red-dark);
  }

  .quick-action--whatsapp:hover {
    background: var(--color-brand-green-dark);
  }

  .quick-action--pending:hover {
    text-decoration: underline;
  }

  /* Buttons (FR-014 AC2). Only real links react: a neutralised BR-006 button is a <span>. */
  a.btn--primary:hover {
    background: var(--color-brand-red-dark);
    transform: translateY(-1px);
  }

  a.btn--light:hover {
    background: var(--color-text-on-dark);
    color: var(--color-brand-green);
    transform: translateY(-1px);
  }

  a.btn--outline:hover {
    background: var(--color-brand-green);
    color: var(--color-text-on-dark);
    transform: translateY(-1px);
  }

  .chip:not([aria-current="true"]):hover {
    background: var(--color-brand-green-soft);
  }

  /* Menu card (design-system §3.5): a slight lift — feedback only, the card is not clickable. */
  .menu-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .menu-item:hover .menu-item__name {
    color: var(--color-brand-green-dark);
  }

  /* Gallery tile (design-system §3.5): the image zooms inside its frame (no layout shift). */
  .gallery-tile__link:hover img {
    transform: scale(1.04);
  }

  .lightbox .icon-btn:hover {
    background: var(--color-text-on-dark);
    color: var(--color-brand-green-dark);
  }
}

/* Lightbox opening (design-system §3.7): a short fade and settle, transform/opacity only. */
@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero entrance (FR-001 AC2, FR-014): fade + slide of the texts, staggered, and a
   slight settle of the image. Everything ends within 1.2s (< 1.5s) and ends
   visible. Only transform/opacity move, so nothing shifts the layout (CLS). */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-settle {
  from {
    transform: scale(1.03);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* The image is not faded: it is the LCP element and must paint at once. */
  .hero__media img {
    animation: hero-settle calc(var(--dur-hero) + var(--dur-slow)) var(--ease-out) both;
  }

  .hero__brand,
  .hero h1,
  .hero__lead,
  .hero__actions,
  .hero__note {
    animation: hero-rise var(--dur-hero) var(--ease-out) both;
  }

  .hero h1 {
    animation-delay: var(--stagger);
  }

  .hero__lead {
    animation-delay: calc(var(--stagger) * 2);
  }

  .hero__actions {
    animation-delay: calc(var(--stagger) * 3);
  }

  .hero__note {
    animation-delay: calc(var(--stagger) * 4);
  }

  /* Scroll reveal (FR-003 AC2, FR-014 AC1, design-system §2.6): motion.js marks a
     block that is still below the screen .js-reveal, then .is-visible when it enters
     the viewport. The hidden state exists only here — under reduced motion, without
     JS or if the script fails, every block stays visible. */
  .js-reveal {
    opacity: 0;
    transform: translateY(var(--space-4));
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* The image follows the text by one stagger step when both enter together. */
  .about__media.js-reveal {
    transition-delay: var(--stagger);
  }

  /* Replays every time the lightbox is shown (display: none → grid). */
  .lightbox__figure {
    animation: lightbox-in var(--dur-base) var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}