/* ==========================================================================
   FONTS — Don Chicko official type family.
   Daddy Cartoon = display (logo, headlines, prices, badges)
   Montserrat = body copy, nav, labels
   Tufuli Arabic = Arabic display counterpart to Daddy Cartoon. This is the
   brand's own choice, not a substitute picked for this site — it's the
   exact font the brand's own designers used for Arabic display type in
   the real print deliverables (see DC-BILL HOLDER Report.txt, which lists
   "Tufuli Arabic DEMO Bold" + "Montserrat-Arabic Regular" as the fonts
   used). Daddy Cartoon itself has zero Arabic glyph coverage, so it can't
   be reused directly for Arabic headings.
   NOTE: the source file is named TufuliArabicDEMO-Bold.otf — a demo/trial
   build from the type foundry. Demo builds are typically licensed for
   preview only, not production embedding. Self-hosting it here was a
   deliberate choice made with that risk understood; swap in a fully
   licensed weight file (same @font-face, same filename or update the src
   below) once one is purchased.
   Montserrat Arabic = Arabic body-copy counterpart to Montserrat, from the
   same brand package (Regular 400 only).
   Baloo Bhaijaan 2 = free (OFL) fallback for both, in case the demo font
   is ever pulled — same rounded family as "Baloo 2" in the stack below.
   ========================================================================== */
@font-face {
  font-family: "Daddy Cartoon";
  src: url("assets/fonts/DaddyCartoon.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tufuli Arabic";
  src: url("assets/fonts/TufuliArabic-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Montserrat Arabic";
  src: url("assets/fonts/MontserratArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("assets/fonts/BalooBhaijaan2-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* ==========================================================================
   TOKENS — Don Chicko brand system.
   Colors are the exact hex values from the official brand palette sheet.
   ========================================================================== */
:root {
  /* --- Brand colors (source: DON CHICKO COLOR PALETTE.pdf) --- */
  --brand-maroon: #960048;   /* Pantone 221C — primary */
  --brand-orange: #ff6c0e;   /* Pantone 1585C — primary */
  --brand-red: #ea0029;      /* Pantone 185C — primary */
  --brand-amber: #ff9026;    /* Pantone 151C (90%) — primary */
  --brand-blue: #00698f;     /* Pantone 7706C — secondary */
  --brand-ink: #2a2c2b;      /* Pantone 419C (95%) — secondary */
  --brand-cream: #f6f3ea;    /* Pantone 4545C (20%) — secondary */

  /* --- Functional roles built from the brand palette --- */
  --color-bg: var(--brand-cream);
  --color-ink: var(--brand-ink);
  --color-ink-soft: #5c5f5c;
  --color-accent: var(--brand-orange);
  --color-accent-2: var(--brand-maroon);
  --color-highlight: var(--brand-amber);
  --color-accent-3: var(--brand-blue);
  --color-surface: #fffdf8;
  --color-border: var(--brand-ink);

  /* Category colors — validated against Don Chicko's own packaging system */
  --cat-cold: var(--brand-blue);
  --cat-hot: var(--brand-orange);
  --cat-broasted: var(--brand-red);
  --cat-roasted: var(--brand-maroon);
  --cat-sandwiches: var(--brand-maroon);
  --cat-burgers: var(--brand-orange);
  --cat-rice: var(--brand-amber);
  --cat-sauces: var(--brand-ink);
  --cat-desserts: var(--brand-amber);
  --cat-kids: var(--brand-blue);

  /* Darker text-safe tones for the two brand colors (orange, amber) that
     don't meet WCAG AA contrast on a light card when used as small text.
     Bands/dots keep the true brand color; only label text uses these. */
  --cat-hot-text: #b8500b;
  --cat-rice-text: #986012;

  /* --- Typography --- */
  --font-display: "Daddy Cartoon", "Baloo 2", ui-rounded, sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "Montserrat", sans-serif;

  --fs-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h2: clamp(1.9rem, 3.4vw + 1rem, 3rem);
  --fs-h3-section: clamp(1.5rem, 2.2vw + 1rem, 2.1rem);
  --fs-h3: clamp(1.1rem, 1.1vw + 1rem, 1.35rem);
  --fs-h4: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* --- Shape --- */
  --radius-sm: 10px;
  --radius-md: 22px;
  --radius-lg: 40px;
  --border-thick: 3px;

  /* --- Shadow (sticker-style hard shadow, matches brand's badge/sticker sheet) --- */
  --shadow-card: 7px 7px 0 var(--color-ink);
  --shadow-card-sm: 4px 4px 0 var(--color-ink);
  --shadow-soft: 0 24px 48px rgba(42, 44, 43, 0.16);

  /* --- Motion --- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-med: 300ms;
  --duration-slow: 600ms;

  /* --- Layout --- */
  --content-max: 1200px;
  --header-height: 84px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* `overflow-x: hidden` alone forces overflow-y to auto-compute as `auto`
     per spec (the "one axis non-visible pairs the other to auto" rule),
     which makes body an unintended scroll container that document
     .scrollingElement (still <html>) doesn't match — every native anchor
     jump, scrollIntoView(), and #hash navigation then targets html, which
     has nothing to scroll, while only manual wheel/trackpad scroll (which
     grabs body directly) appears to work. `clip` suppresses the overflow
     without tripping that pairing rule, so html stays the one true scroll
     container. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }

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

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin: 0 0 var(--space-xs);
}
.eyebrow::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  background: var(--brand-orange);
  -webkit-mask-image: url("assets/logos/flame-color.png");
  mask-image: url("assets/logos/flame-color.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: inline-block;
}

.section-heading {
  max-width: 680px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-accent-2);
}
.section-subtitle {
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: var(--border-thick) solid var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-orange);
  color: var(--color-ink);
  box-shadow: var(--shadow-card-sm);
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card-sm);
}
.btn:hover, .btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--color-ink);
}
.btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--color-ink);
}

/* ==========================================================================
   LANGUAGE OVERLAY — shown on every page load, by design (not remembered
   between visits, see translations.js initLanguageOverlay)
   ========================================================================== */
body.lang-locked { overflow: hidden; }

/* Set synchronously by the inline script at the top of <head>, before the
   overlay markup below is even parsed, whenever a language is already
   chosen for this session — otherwise the overlay (opacity: 1 by default)
   paints for a frame on every page navigation before JS can remove it. */
html.lang-preset #langOverlay { display: none; }

.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--brand-orange) 0%, var(--brand-red) 40%, var(--brand-maroon) 100%);
  padding: var(--space-md);
  opacity: 1;
  transition: opacity var(--duration-med) var(--ease-standard);
}
.lang-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.lang-overlay-inner {
  text-align: center;
  max-width: 420px;
}
.lang-overlay-mark {
  width: 60px;
  height: 74px;
  margin: 0 auto var(--space-md);
  color: var(--brand-cream);
  filter: drop-shadow(0 6px 0 rgba(42, 44, 43, 0.25));
}
.lang-overlay-title {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: var(--space-lg);
}
.lang-overlay-line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
  color: var(--brand-cream);
  line-height: 1.15;
}
.lang-overlay-line[lang="ar"] { font-family: "Tufuli Arabic", "Baloo Bhaijaan 2", ui-rounded, sans-serif; font-weight: 800; letter-spacing: normal; line-height: 1.25; }
.lang-overlay-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.lang-overlay-btn {
  min-width: 150px;
  padding: 1rem 1.75rem;
  font-size: 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 999px;
  border: var(--border-thick) solid var(--brand-cream);
  background: transparent;
  color: var(--brand-cream);
  transition: transform var(--duration-fast) var(--ease-bounce),
              background var(--duration-fast), color var(--duration-fast),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.lang-overlay-btn:hover, .lang-overlay-btn:focus-visible {
  background: var(--brand-cream);
  border-color: var(--brand-cream);
  color: var(--brand-maroon);
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(42, 44, 43, 0.3);
}

/* ==========================================================================
   LANGUAGE SWITCHER — small EN/AR toggle, lives in the nav
   ========================================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  padding: 0.2rem;
}
.lang-switch-btn {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-soft);
  border: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.lang-switch-btn.is-active {
  background: var(--brand-maroon);
  color: var(--brand-cream);
}
.lang-switch-btn:hover:not(.is-active) { color: var(--color-ink); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--border-thick) solid var(--color-ink);
}
.menu-page .site-header { border-bottom: none; }
.navbar {
  max-width: var(--content-max);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.logo-mark {
  height: 40px;
  width: auto;
}
.logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--color-accent-2);
  line-height: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.nav-link {
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.1rem;
  position: relative;
}
.nav-link:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nav-link:not(.nav-cta):hover::after,
.nav-link:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}
.nav-cta {
  background: var(--brand-maroon);
  color: var(--brand-cream);
  padding: 0.95rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0.01em;
  transition: transform var(--duration-fast) var(--ease-bounce), background var(--duration-fast);
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--brand-orange);
  transform: translateY(-2px) rotate(-2deg);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: 0;
}
.nav-toggle-bar {
  width: 20px;
  height: 3px;
  margin: 0 auto;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--duration-med) var(--ease-standard), opacity var(--duration-med);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   FLAME MOTIF — every flame on the page is masked from the real logo mark,
   never a generic icon. Used standalone via .flame-shape for decorative
   accents throughout the page.
   ========================================================================== */

/* Solid-color flame silhouette built by masking the real logo artwork —
   used for decorative accents so every "flame" on the page is the brand's
   actual mark, never a generic icon. */
.flame-shape {
  background: currentColor;
  -webkit-mask-image: url("assets/logos/flame-white.png");
  mask-image: url("assets/logos/flame-white.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: var(--space-xl) var(--space-md);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--brand-cream);
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
/* Auto-sliding hero background — four independently-animated slides, each
   its own full-size layer. Each spends most of its 20s cycle either fully
   visible (holding at center) or fully off-screen; it only moves during
   two short 1s windows — entering and, later, exiting.
   The critical detail is WHEN those windows fall: slide N's exit and
   slide N+1's entrance are scheduled to the *same* 1s window, not two
   adjacent-but-separate windows that merely touch. Two things moving
   through the same window, one leaving as the other arrives, stay
   exactly complementary throughout — whatever width N+1 hasn't yet
   covered entering is exactly the width N still occupies leaving. A
   first version staggered every slide 5s apart with a continuous (no-
   hold) scroll; the even 50%-of-viewport spacing that produced meant
   three slides could be simultaneously partway on-screen at once (a
   stray sliver of a third photo at the edge) instead of a clean
   two-at-a-time handoff. Scheduling the transitions to literally overlap
   fixes both that and the plain touching-but-not-overlapping gap an
   even earlier version had.
   A single 500%-wide flex "filmstrip" sliding via one shared transform
   was tried before either of these — it silently stopped painting
   mid-transition after the first cycle, in both English and Arabic, a
   real Chrome compositing bug with that many large images sharing one
   huge animated layer. Four normal, viewport-sized layers avoids that
   entirely.
   animation-delay is negative for the first slide, so it's already
   mid-entrance at page load instead of waiting off-screen — the other
   three wait out a real (positive) delay, during which fill-mode:
   backwards holds them at their 0% keyframe (off-screen) instead of the
   un-animated default, which would otherwise show them fully visible,
   alarmingly, on top of everything else. */
.hero-slide-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: hero-slide-scroll 20s linear infinite backwards;
  will-change: transform;
}
.hero-slide-track.is-paused .hero-slide { animation-play-state: paused; }
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 4s; }
.hero-slide:nth-child(3) { animation-delay: 9s; }
.hero-slide:nth-child(4) { animation-delay: 14s; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
[dir="ltr"] .hero-slide-wraps-fries img { transform: scaleX(-1); }
@keyframes hero-slide-scroll {
  0% { transform: translateX(100%); }
  5% { transform: translateX(0%); }
  25% { transform: translateX(0%); }
  30%, 100% { transform: translateX(-100%); }
}
[dir="rtl"] .hero-slide { animation-name: hero-slide-scroll-rtl; }
@keyframes hero-slide-scroll-rtl {
  0% { transform: translateX(-100%); }
  5% { transform: translateX(0%); }
  25% { transform: translateX(0%); }
  30%, 100% { transform: translateX(100%); }
}

/* Small, unobtrusive pause/play control for the hero slideshow — sits in
   the lower corner so it doesn't compete with the headline. */
.hero-slide-toggle {
  position: absolute;
  z-index: 1;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(246, 243, 234, 0.6);
  background: rgba(42, 44, 43, 0.45);
  backdrop-filter: blur(2px);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-bounce);
}
/* Keeps the visible 36px circle but widens the actual tap target to 44px
   (WCAG's recommended floor) via an invisible expanded hit area — clicks
   on it still bubble to this button. */
.hero-slide-toggle::before {
  content: "";
  position: absolute;
  /* The pseudo's containing block is the button's padding box (36px minus
     its 2px border, box-sizing: border-box), not its 36px border box —
     -6px here (not -4px) is what actually yields a 44px hit area. */
  inset: -6px;
}
.hero-slide-toggle:hover, .hero-slide-toggle:focus-visible {
  border-color: var(--brand-cream);
  background: rgba(42, 44, 43, 0.7);
  transform: translateY(-2px);
}
/* Default (playing): pause icon — two bars — signals "click to pause". */
.hero-slide-toggle-icon {
  width: 10px;
  height: 12px;
  border-left: 3px solid var(--brand-cream);
  border-right: 3px solid var(--brand-cream);
}
/* Paused: play icon — a triangle — signals "click to resume". */
.hero-slide-toggle[aria-pressed="true"] .hero-slide-toggle-icon {
  width: 0;
  height: 12px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--brand-cream);
  border-left-width: 10px;
  margin-left: 2px;
}
[dir="rtl"] .hero-slide-toggle { right: auto; left: var(--space-md); }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(42, 44, 43, 0.94) 0%, rgba(42, 44, 43, 0.88) 32%, rgba(42, 44, 43, 0.5) 62%, rgba(42, 44, 43, 0.12) 85%);
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-flame {
  position: absolute;
  opacity: 0.5;
  animation: flame-float 14s ease-in-out infinite;
}
.hero-flame-1 { width: 90px; height: 110px; top: 10%; left: 63%; color: var(--brand-amber); opacity: 0.28; }
.hero-flame-2 { width: 50px; height: 62px; bottom: 18%; left: 55%; color: var(--brand-orange); opacity: 0.3; animation-duration: 18s; animation-direction: reverse; }
.hero-flame-3 { width: 34px; height: 42px; top: 55%; left: 36%; color: var(--brand-red); opacity: 0.25; animation-duration: 11s; }
@keyframes flame-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-4%, 5%) rotate(4deg); }
}

.hero-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero-content { max-width: 640px; }
.hero-eyebrow.eyebrow { color: var(--brand-amber); }
.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}
.hero-headline-name {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--brand-cream);
}
.hero-headline-name .hl-orange { color: var(--brand-amber); }
.hero-headline-sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.35rem);
  color: rgba(246, 243, 234, 0.85);
  max-width: 44ch;
}
.hero-copy {
  max-width: 48ch;
  color: rgba(246, 243, 234, 0.8);
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
}
.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.hero .btn-secondary {
  background: transparent;
  color: var(--brand-cream);
  border-color: var(--brand-cream);
  box-shadow: 4px 4px 0 rgba(246, 243, 234, 0.4);
}
.hero .btn-secondary:hover, .hero .btn-secondary:focus-visible {
  box-shadow: 7px 7px 0 rgba(246, 243, 234, 0.4);
}

/* ==========================================================================
   MENU CARD — signature component used by featured + full menu.
   Redesigned around Don Chicko's category-color packaging system, with a
   flame-wave band and a soft wave cut into the card body.
   ========================================================================== */
.ticket-card {
  position: relative;
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-med) var(--ease-bounce),
              box-shadow var(--duration-med) var(--ease-standard);
}
.ticket-card:hover,
.ticket-card:focus-within {
  transform: translateY(-6px) rotate(var(--hover-rotate, -1deg));
  box-shadow: 11px 11px 0 var(--color-ink);
}

/* Item photo, framed at the top of the card. Cards for items with no
   photo (most sauces/dips) simply omit .card-media and stay compact. */
.card-media {
  position: relative;
  height: 148px;
  background: var(--color-bg);
  border-bottom: var(--border-thick) solid var(--color-ink);
  overflow: hidden;
}
.card-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.ticket-card:hover .card-media img,
.ticket-card:focus-within .card-media img {
  transform: scale(1.06);
}

.card-body { padding: var(--space-md); padding-top: var(--space-sm); }
.card-media + .card-body { padding-top: var(--space-md); }

.card-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--brand-amber);
  margin-bottom: var(--space-sm);
}
.card-badge[data-badge="New"] { background: var(--brand-blue); color: var(--color-surface); }
.card-badge[data-badge="Chef's Pick"] { background: var(--brand-maroon); color: var(--color-surface); }
.card-badge[data-badge="Popular"] { background: var(--brand-amber); }
.card-badge[data-badge="Signature"] { background: var(--brand-red); color: var(--color-surface); }

/* When a card has a photo, its badge floats on the photo like a sticker
   instead of sitting inline in the body copy. */
.card-media .card-badge {
  position: absolute;
  top: var(--space-sm);
  inset-inline-end: var(--space-sm);
  margin-bottom: 0;
  box-shadow: 3px 3px 0 var(--color-ink);
  transform: rotate(3deg);
  z-index: 1;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}
.card-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}
.card-price {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: 0.95rem;
  background: var(--cat-color, var(--color-ink));
  color: var(--cat-badge-text, var(--color-bg));
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transform: rotate(3deg);
}
.card-desc {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin: 0.6rem 0 0.8rem;
}
.card-category {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cat-text, var(--cat-color, var(--color-ink-soft)));
}
.card-category::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat-color, var(--brand-orange));
  display: inline-block;
}

/* Category color assignment — matched to Don Chicko's real packaging palette.
   --cat-color drives the price badge background (.card-price); --cat-badge-text
   overrides its text color to dark ink on the two light backgrounds (orange,
   amber) where cream text wouldn't meet contrast. */
.ticket-card[data-category="cold-starters"],
.ticket-card[data-category="salads"],
.ticket-card[data-category="drinks"],
.ticket-card[data-category="kids"] { --cat-color: var(--cat-cold); }
.ticket-card[data-category="hot-starters"],
.ticket-card[data-category="burgers"] { --cat-color: var(--cat-hot); --cat-text: var(--cat-hot-text); --cat-badge-text: var(--color-ink); }
.ticket-card[data-category="broasted"],
.ticket-card[data-category="chicken-strips"] { --cat-color: var(--cat-broasted); --cat-badge-text: #fff; }
.ticket-card[data-category="roasted"],
.ticket-card[data-category="sandwiches"] { --cat-color: var(--cat-roasted); }
.ticket-card[data-category="rice"],
.ticket-card[data-category="rice-bowls"],
.ticket-card[data-category="desserts"] { --cat-color: var(--cat-rice); --cat-text: var(--cat-rice-text); --cat-badge-text: var(--color-ink); }
.ticket-card[data-category="sauces"] { --cat-color: var(--cat-sauces); }

/* ==========================================================================
   FEATURED MENU — "The Don's Picks"
   ========================================================================== */
.featured-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  align-items: start;
}
.featured-grid .ticket-card:nth-child(1) { --hover-rotate: -2deg; transform: rotate(-1.5deg); }
.featured-grid .ticket-card:nth-child(2) { --hover-rotate: 1.5deg; transform: rotate(1deg); margin-top: var(--space-lg); }
.featured-grid .ticket-card:nth-child(3) { --hover-rotate: -1deg; transform: rotate(-0.75deg); }
.featured-grid .card-name { font-size: clamp(1.25rem, 1.4vw + 1rem, 1.55rem); }

.featured-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* ==========================================================================
   MENU PAGE — dedicated page (menu.html), every category stacked in full
   ========================================================================== */
.menu-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 144, 38, 0.3) 0%, rgba(255, 144, 38, 0) 60%),
    var(--brand-maroon);
  color: var(--brand-cream);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.menu-hero-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.menu-hero-flame {
  position: absolute;
  animation: flame-float 15s ease-in-out infinite;
}
.menu-hero-flame-1 { width: 120px; height: 150px; top: -20px; left: 8%; color: var(--brand-orange); opacity: 0.28; }
.menu-hero-flame-2 { width: 70px; height: 88px; bottom: -10px; right: 12%; color: var(--brand-amber); opacity: 0.3; animation-duration: 19s; animation-direction: reverse; }
.menu-hero-flame-3 { width: 44px; height: 55px; top: 45%; right: 32%; color: var(--brand-cream); opacity: 0.2; animation-duration: 12s; }

.menu-hero-inner { max-width: 640px; margin: 0 auto; }
.menu-hero .eyebrow { color: var(--brand-cream); justify-content: center; }
.menu-hero .eyebrow::before { background: var(--brand-amber); }
.menu-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--brand-cream);
  margin-bottom: var(--space-sm);
}
.menu-hero-copy {
  color: rgba(246, 243, 234, 0.8);
  max-width: 46ch;
  margin: 0 auto;
}

/* Sticky category jump bar, parked directly under the site header */
.menu-jumpbar {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--color-bg);
}
/* .menu-filters is centered and narrower than the full-width jumpbar, so the
   fade needs its own wrapper matching that centered width — anchoring the
   fade to .menu-jumpbar itself would land it over empty background past the
   actual (already-narrower) edge of the chip row. */
.menu-filters-wrap {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
}
/* With 14 categories the chip row always overflows; scrollbar-width:none on
   .menu-filters hides even the native scrollbar hint, so nothing signals
   it's scrollable. These edge fades are the visible cue. */
.menu-filters-wrap::before,
.menu-filters-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.menu-filters-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, transparent 100%);
}
.menu-filters-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg) 0%, transparent 100%);
}
/* JS toggles these once scrolled away from an edge, so the fade never
   implies hidden content in a direction that has none. is-scrolled means
   "moved away from the reading-start edge" and has-more means "more toward
   the reading-end edge" — left/right in LTR, but reversed in RTL (where
   scrollLeft itself goes negative), so the physical side each class lights
   up has to flip too. */
.menu-filters-wrap.is-scrolled::before { opacity: 1; }
.menu-filters-wrap.has-more::after { opacity: 1; }
[dir="rtl"] .menu-filters-wrap.is-scrolled::before { opacity: 0; }
[dir="rtl"] .menu-filters-wrap.is-scrolled::after { opacity: 1; }
[dir="rtl"] .menu-filters-wrap.has-more::after { opacity: 0; }
[dir="rtl"] .menu-filters-wrap.has-more::before { opacity: 1; }
.menu-filters {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.menu-filters::-webkit-scrollbar { display: none; }

.filter-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: var(--border-thick) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-surface);
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-bounce),
              background var(--duration-fast), color var(--duration-fast);
}
.filter-tab:hover { transform: translateY(-2px) rotate(-1deg); }
.filter-tab.is-active {
  background: var(--brand-maroon);
  color: var(--brand-cream);
  border-color: var(--brand-maroon);
}

/* Tag filter row — same chip look as the category jump-nav above it (one
   family), but its own row with a thin divider so the two controls read as
   distinct groups rather than one 18-chip wall. Wraps rather than scrolling:
   with only 5 chips it fits most widths, and unlike the 14-category row it
   doesn't need a scroll affordance. */
.menu-tagbar {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--space-md) 0.85rem;
  border-top: 1px dashed rgba(42, 44, 43, 0.2);
  margin-top: -1px;
  padding-top: 0.65rem;
}
.menu-tagbar .filter-tab {
  font-size: 0.72rem;
  padding: 0.7rem 0.9rem;
}

.menu-category-empty {
  color: var(--color-ink-soft);
  font-style: italic;
  padding: var(--space-sm) 0;
}

.menu-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.menu-category {
  padding-top: var(--space-lg);
  /* html already reserves --header-height via scroll-padding-top; this adds
     just enough to clear the sticky jump bar and land the heading under it. */
  scroll-margin-top: 34px;
}
.menu-category-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.menu-category-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3-section);
  line-height: 1.1;
  color: var(--brand-maroon);
}
.menu-category-count {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-left: auto;
  white-space: nowrap;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}
.menu-grid .ticket-card:nth-child(3n+1) { --hover-rotate: -1.5deg; }
.menu-grid .ticket-card:nth-child(3n+2) { --hover-rotate: 1.5deg; }
.menu-grid .ticket-card:nth-child(3n+3) { --hover-rotate: -1deg; }

.menu-note {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  padding: var(--space-xl) 0 0;
}
.menu-note a { font-weight: 700; color: var(--brand-maroon); }
.menu-note a:hover, .menu-note a:focus-visible { text-decoration: underline; }

/* scroll-reveal target state */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   ABOUT / BRAND STORY — the four flames
   ========================================================================== */
.about-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
.about-top {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-lg);
}
.about-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-thick) solid var(--color-ink);
  box-shadow: var(--shadow-card);
}
.about-visual picture { display: block; width: 100%; height: 100%; }
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-visual-badge {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-cream);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  transform: rotate(-3deg);
}
.about-visual-badge .flame-shape { width: 26px; height: 32px; color: var(--brand-orange); }
.about-visual-badge span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--brand-maroon);
}

.about-content .eyebrow { color: var(--color-accent-2); }
.about-content h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-sm);
  color: var(--brand-maroon);
}
.about-content p {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
  max-width: 58ch;
}
.about-content p.about-lede {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-ink);
}
.about-stat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--brand-amber);
  width: fit-content;
  transform: rotate(-1deg);
}
.about-stat-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-ink);
}
.about-stat-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Four flames grid */
.flames-heading { text-align: center; margin-bottom: var(--space-lg); }
.flames-heading .eyebrow { justify-content: center; }
.flames-heading h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3-section);
  color: var(--brand-maroon);
}
.flames-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.flame-card {
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-sm);
  transition: transform var(--duration-med) var(--ease-bounce), box-shadow var(--duration-med) var(--ease-standard);
}
.flame-card:hover { transform: translateY(-5px); box-shadow: 8px 8px 0 var(--color-ink); }
.flame-card-icon {
  display: block;
  width: 34px;
  height: 42px;
  margin-bottom: var(--space-sm);
}
.flame-card:nth-child(1) .flame-card-icon { color: var(--brand-red); }
.flame-card:nth-child(2) .flame-card-icon { color: var(--brand-maroon); }
.flame-card:nth-child(3) .flame-card-icon { color: var(--brand-blue); }
.flame-card:nth-child(4) .flame-card-icon { color: var(--brand-amber); }
.flame-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}
.flame-card p {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ==========================================================================
   VISIT
   ========================================================================== */
.visit-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}
.visit-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
}
.visit-item h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin-bottom: 0.35rem;
  color: var(--brand-maroon);
}
.visit-item p { color: var(--color-ink-soft); }
.visit-item a:hover, .visit-item a:focus-visible { color: var(--brand-orange); text-decoration: underline; }
.social-list { display: flex; flex-direction: column; gap: 0.2rem; margin: -0.65rem 0; }
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.65rem 0;
}

.visit-visual {
  position: relative;
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--brand-maroon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 280px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
}
.visit-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
}
.visit-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.directions-link {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 9px 0;
  font-weight: 600;
  color: var(--brand-orange);
}
.directions-link:hover, .directions-link:focus-visible { text-decoration: underline; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: var(--border-thick) solid var(--color-ink);
  background: var(--color-ink);
  color: var(--brand-cream);
  padding: var(--space-lg) var(--space-md) var(--space-md);
}
.footer-top {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(246, 243, 234, 0.2);
}
.footer-logo { gap: 0.6rem; }
.footer-logo img { height: 34px; width: auto; }
.footer-logo-ar { height: 26px !important; opacity: 0.85; margin-left: 0.3rem; }
.footer-nav, .footer-social {
  display: flex;
  gap: var(--space-sm);
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Padding (not just font-size) grows the tap target to ~44px tall without
   inflating the visible text — the text stays the same size, only the
   clickable area around it grows. */
.footer-nav a, .footer-social a {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 0.5rem;
}
.footer-nav a:hover, .footer-social a:hover,
.footer-nav a:focus-visible, .footer-social a:focus-visible {
  color: var(--brand-amber);
}
.footer-bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: rgba(246, 243, 234, 0.65);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* .hero's height is purely content-driven (see .hero-photo above), and past
   ~1200px wide the headline's font-size clamp is maxed out, so the text
   block's height stops growing while the section keeps getting wider. On a
   typical 1920px desktop that leaves a photo band around 2.4:1 — much wider
   than the 1.5:1 the hero photos are cropped at — so object-fit: cover has
   to zoom deep into every image's vertical center to fill it, no matter how
   generous the source crop is. Growing .hero's own height on wide screens
   keeps that ratio closer to what the photos were actually cropped for.
   min-height alone (no flex/centering) leaves the text exactly where it
   already was — block layout keeps it anchored at the top after
   padding-top, and the extra room from min-height just shows as more
   photo below the CTA buttons instead of shifting the headline down. */
@media (min-width: 961px) {
  .hero {
    min-height: clamp(700px, 57vw, 1200px);
  }
}

@media (max-width: 960px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-grid .ticket-card:nth-child(2) { margin-top: 0; }
  .about-top { grid-template-columns: 1fr; }
  .about-visual { max-width: 380px; margin: 0 auto; }
  .flames-grid { grid-template-columns: repeat(2, 1fr); }
  .visit-grid { grid-template-columns: 1fr; }
  .hero-photo img { object-position: 65% 35%; }
}

@media (max-width: 720px) {
  :root { --header-height: 68px; }

  .nav-toggle { display: flex; }
  .logo-text { font-size: 1.15rem; }
  .logo-mark { height: 32px; }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: var(--border-thick) solid var(--color-ink);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-med) var(--ease-standard),
                opacity var(--duration-med) var(--ease-standard),
                visibility var(--duration-med);
  }
  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-link {
    padding: 0.85rem 0.2rem;
    border-bottom: 1px dashed rgba(42, 44, 43, 0.2);
  }
  .nav-cta {
    margin-top: var(--space-sm);
    text-align: center;
    justify-content: center;
    display: flex;
  }
  .lang-switch {
    align-self: flex-start;
    margin-top: var(--space-sm);
  }

  .hero-photo img { object-position: 50% 30%; }
  .flames-grid { grid-template-columns: 1fr; }

  /* On narrow viewports the headline wraps to many more lines, so .hero's
     content-driven height balloons far past its width — the resulting
     photo box gets so tall and narrow that object-fit: cover has to zoom
     deep into the source image to fill it, destroying the crop no matter
     which photo is used. Capping the photo band to a sane width-relative
     height (independent of how tall the text stack grows) keeps the crop
     readable; the plain --color-ink background shows below it, matching
     the gradient's own color so the join reads as a deliberate fade
     rather than a seam. */
  .hero-photo {
    top: 0;
    bottom: auto;
    height: min(80vw, 460px);
  }
  /* The desktop horizontal fade (dark left -> clear right) assumes a text
     column that stops well short of the photo's right edge. At mobile
     widths the headline wraps edge-to-edge instead, so that same fade left
     the right portion of every line sitting on bare photo. Floor it at 60%
     dark instead of fading to clear, so every line stays readable
     regardless of which slide is showing. */
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(42, 44, 43, 0) 65%, rgba(42, 44, 43, 1) 100%),
      linear-gradient(100deg, rgba(42, 44, 43, 0.94) 0%, rgba(42, 44, 43, 0.88) 40%, rgba(42, 44, 43, 0.75) 70%, rgba(42, 44, 43, 0.6) 100%);
  }
  /* .hero-slide-toggle anchors to var(--space-md) from .hero's own bottom
     edge, which is fine when the photo fills the section — but the photo
     band above is now much shorter than .hero's full (text-driven) height,
     so that anchor leaves it stranded over the CTA buttons instead of
     sitting on the photo it controls. Pin it to the photo's own bottom
     edge instead. */
  .hero-slide-toggle {
    top: calc(min(80vw, 460px) - 36px - var(--space-sm));
    bottom: auto;
  }
}

@media (max-width: 520px) {
  .hero { padding: var(--space-xl) var(--space-sm) var(--space-lg); }
  .hero-copy { font-size: 1rem; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .section-heading { padding: 0 var(--space-xs); }
}

/* ==========================================================================
   RTL — Arabic layout.
   Most of the site mirrors for free: block boxes anchor to the inline-start
   edge, CSS Grid renumbers its columns, and flexbox "row" already reads from
   the direction property — all direction-aware by default. What's listed
   here is only what those defaults don't already handle: physical left/right
   values, decorative elements meant to face a specific way, and the display
   font's lack of Arabic glyphs.
   ========================================================================== */
[dir="rtl"] {
  direction: rtl;
  /* Daddy Cartoon and Montserrat have zero Arabic glyph coverage, so every
     element that reads `var(--font-display)` / `var(--font-body)` needs a
     real Arabic face instead of silently falling through to a generic
     system font. Redefining the custom properties here (rather than
     overriding font-family on each selector that uses them) means every
     current and future element picks the right one up automatically. */
  --font-display: "Tufuli Arabic", "Baloo Bhaijaan 2", "Daddy Cartoon", ui-rounded, sans-serif;
  --font-body: "Montserrat Arabic", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "Montserrat Arabic", "Montserrat", sans-serif;
}

/* Tufuli Arabic only ships as a single Bold weight, and the Baloo
   Bhaijaan 2 fallback behind it reads lighter than Daddy Cartoon's
   naturally chunky, hand-drawn line at its default weight — request 800
   explicitly (Tufuli's one weight satisfies it regardless; Baloo's
   400–800 variable range picks its heavy end) so translated headings and
   buttons keep the same bold, poster-ish energy as the English version. */
[dir="rtl"] .section-heading h2,
[dir="rtl"] .logo-text,
[dir="rtl"] .hero-headline-name,
[dir="rtl"] .card-name,
[dir="rtl"] .menu-hero-title,
[dir="rtl"] .menu-category-title,
[dir="rtl"] .about-content h1,
[dir="rtl"] .flames-heading h2,
[dir="rtl"] .flame-card h3,
[dir="rtl"] .visit-item h3,
[dir="rtl"] .visit-visual-label,
[dir="rtl"] .about-visual-badge span,
[dir="rtl"] .btn,
[dir="rtl"] .nav-cta {
  font-weight: 800;
}

/* Every font's vertical metrics (hhea ascent + descent, relative to its
   em-size) set a line-height floor below which SOME pair of glyphs, on
   some line-break, WILL collide — it isn't a stylistic choice to fudge.
   An earlier pass here picked a ratio that happened to clear the specific
   wrap tested but still collided once the text re-wrapped onto a
   different pair of lines at another viewport width, stacking a
   different, taller glyph pair. Tufuli Arabic's own metrics (hhea ascent
   750 + descent 250 on a 1000-unit em, +100 line gap) put its safe
   minimum at 1.1 — 1.25 sits comfortably above that, verified against
   the hero's worst-case wraps at multiple widths. Applies to every
   selector that carries an explicit tight line-height with translated
   Arabic text; headings without an explicit line-height already inherit
   the body's generous 1.6 and don't need an override. */
[dir="rtl"] .hero-headline-name,
[dir="rtl"] .section-heading h2,
[dir="rtl"] .menu-hero-title,
[dir="rtl"] .card-name,
[dir="rtl"] .menu-category-title,
[dir="rtl"] .logo-text {
  line-height: 1.25;
}

/* Letter-spacing gives the Latin/uppercase type some air in English, but it
   fights Arabic's cursive letter-joining — spaced-out Arabic reads as
   disconnected letters instead of words. Every selector below sets
   letter-spacing for English; switch it back to normal for Arabic. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .section-heading h2,
[dir="rtl"] .btn,
[dir="rtl"] .logo-text,
[dir="rtl"] .nav-link,
[dir="rtl"] .nav-cta,
[dir="rtl"] .hero-headline-name,
[dir="rtl"] .card-badge,
[dir="rtl"] .card-category,
[dir="rtl"] .filter-tab,
[dir="rtl"] .menu-category-count,
[dir="rtl"] .about-stat-label,
[dir="rtl"] .footer-nav,
[dir="rtl"] .footer-social {
  letter-spacing: normal;
}

[dir="rtl"] .skip-link {
  left: auto;
  right: -999px;
  border-radius: 0 0 0 var(--radius-sm);
}
[dir="rtl"] .skip-link:focus { right: 0; left: auto; }

[dir="rtl"] .menu-category-count {
  margin-left: 0;
  margin-right: auto;
}

/* The dark-to-transparent gradient overlay and decorative flames mirror so
   the legible dark side still sits behind the copy, which itself moves to
   the right automatically in RTL. Only the gradient (a pseudo-element) is
   mirrored here, deliberately NOT .hero-photo itself — that element now
   contains the animated sliding photo track (see .hero-slide-track), and
   stacking a static scaleX(-1) on top of an already-animated transform
   caused the carousel to render blank/black in RTL on some browsers. The
   photos read fine unmirrored since they're just rotating background
   scenery, not a single directional composition anymore. */
[dir="rtl"] .hero-photo::after,
[dir="rtl"] .hero-decor,
[dir="rtl"] .menu-hero-decor {
  transform: scaleX(-1);
}

/* Badge stays pinned to the visual's bottom-inline-end corner either way. */
[dir="rtl"] .about-visual-badge {
  left: auto;
  right: var(--space-sm);
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}

/* The extra breathing room next to the Arabic wordmark flips sides with it. */
[dir="rtl"] .footer-logo-ar {
  margin-left: 0;
  margin-right: 0.3rem;
}

/* Cosmetic tilts read more natural mirrored. */
[dir="rtl"] .card-price { transform: rotate(-3deg); }
[dir="rtl"] .card-media .card-badge { transform: rotate(-3deg); }
[dir="rtl"] .filter-tab:hover { transform: translateY(-2px) rotate(1deg); }
[dir="rtl"] .featured-grid .ticket-card:nth-child(1) { --hover-rotate: 2deg; transform: rotate(1.5deg); }
[dir="rtl"] .featured-grid .ticket-card:nth-child(2) { --hover-rotate: -1.5deg; transform: rotate(-1deg); }
[dir="rtl"] .featured-grid .ticket-card:nth-child(3) { --hover-rotate: 1deg; transform: rotate(0.75deg); }
[dir="rtl"] .about-stat { transform: rotate(1deg); }