/* Tokens sourced from design.md — update there first, then mirror here. */
/* ===========================================================
   Francesco Kávéház — base stylesheet
   =========================================================== */

/* ---- Self-hosted fonts (design.md: Font-loading strategy) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: optional;
  src: url("/assets/fonts/cormorant-italic-300.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url("/assets/fonts/cormorant-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url("/assets/fonts/cormorant-italic-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("/assets/fonts/cormorant-normal-600.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/assets/fonts/ptsans-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/assets/fonts/ptsans-bold-700.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root {
  --bg: #FBF7EF;
  --espresso: #2D241E;
  --neon: #22DDD6;
  --neon-deep: #158D88;
  --neon-glow: rgba(34, 221, 214, 0.35);
  /* Third-party brand color — Viber. Documented exception to the 60/30/10 system
     in design.md; used ONLY on Viber-specific CTAs, never as general UI accent. */
  --viber-purple: #7360F2;
  --viber-purple-deep: #5a48d0;
  --radius: 12px;

  --max: 1200px;
  --header-h: 76px;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "PT Sans", system-ui, -apple-system, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--espresso);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---- Typography ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); }
h2 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2vw + .8rem, 2rem); }
p  { max-width: 65ch; hyphens: auto; overflow-wrap: break-word; }

.italic-light { font-style: italic; font-weight: 400; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
section { padding-block: clamp(4rem, 9vw, 7.5rem); }
#about, #gallery, #visit { scroll-margin-top: calc(var(--header-h) + 16px); }
.section-muted { background: color-mix(in srgb, var(--espresso) 8%, var(--bg)); }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--espresso) 68%, transparent);
  margin-bottom: 1.25rem;
}
.lead { font-size: clamp(1.05rem, 1.4vw + .6rem, 1.25rem); color: color-mix(in srgb, var(--espresso) 68%, transparent); }

/* ---- Neon utilities ---- */
.text-neon { color: var(--neon); }
.glow-text { color: #fff; text-shadow: 0 0 12px var(--neon-glow), 0 0 2px var(--neon); }
.shadow-neon { box-shadow: 0 0 0 1px var(--neon-glow), 0 4px 20px var(--neon-glow); }
.btn-outline-neon {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--neon-deep); color: var(--espresso);
  border-radius: 100px; padding: .875rem 1.75rem;
  font-weight: 600; transition: all .3s ease;
  min-height: 48px;
}
.btn-outline-neon:hover { background: var(--neon-glow); }

.neon-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon-glow); flex: none; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- Hero stagger ---- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp .8s ease forwards; opacity: 0; }
.fade-up.d1 { animation-delay: .1s; }
.fade-up.d2 { animation-delay: .2s; }
.fade-up.d3 { animation-delay: .3s; }
.fade-up.d5 { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fade-up { animation: none; opacity: 1; }
}

/* ===========================================================
   Header
   =========================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.site-header.scrolled {
  background: var(--bg);
  color: var(--espresso);
  border-bottom-color: color-mix(in srgb, var(--espresso) 10%, transparent);
  box-shadow: 0 2px 18px rgba(0,0,0,.05);
}
/* Transparent-header overrides — top-of-page, over dark hero */
.site-header:not(.scrolled) .logo-sub {
  color: color-mix(in srgb, var(--bg) 75%, transparent);
}
.site-header:not(.scrolled) .hamburger span {
  background: var(--bg);
}
/* Outline (non-filled, non-viber) pills over the dark hero: cream text/border.
   Excludes .btn-filled-neon so its dark-on-teal text keeps 8.95:1 contrast (was
   cream-on-teal 1.59:1, a WCAG fail). Viber pills styled separately below. */
.site-header:not(.scrolled) .btn-outline-neon:not(.btn-filled-neon):not([data-cta="viber"]) {
  border-color: var(--neon);
  color: var(--bg);
}
/* 3-part header layout: logo (left) / nav (true center) / actions (right).
   1fr auto 1fr keeps the centre column dead-centre across full header width. */
.header-inner { width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.header-inner .logo { justify-self: start; }
.header-inner .nav-desktop { justify-self: center; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }

.logo { display: flex; align-items: baseline; gap: .5rem; }
.logo-script { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2.2rem; line-height: .8; color: var(--espresso); }
.site-header .logo-script { text-shadow: 0 0 10px var(--neon-glow); }
.logo-sub { font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--espresso) 65%, transparent); }
/* Transparent header over the busy hero photo: dark scrim shadow so the wordmark
   stays legible against foliage/highlights, not just the faint neon glow. */
.site-header:not(.scrolled) .logo-script {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.5), 0 0 3px var(--neon-glow);
}
.site-header:not(.scrolled) .logo-sub {
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

.nav-desktop { display: flex; align-items: center; gap: 2rem; }
.nav-link { position: relative; font-weight: 500; font-size: .95rem; padding: .25rem 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.header-cta { display: inline-flex; }
.cta-pair { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.lang-switch { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.lang-link { padding: .25rem .4rem; color: color-mix(in srgb, currentColor 55%, transparent); transition: color .2s ease; }
.lang-link:hover, .lang-link[aria-current="page"] { color: currentColor; text-decoration: underline; text-underline-offset: 3px; }
.site-header:not(.scrolled) .lang-switch { color: var(--bg); }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; background: none; border: none; padding: 12px;
}
.hamburger span { display: block; height: 2px; width: 100%; background: var(--espresso);
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay nav */
.nav-mobile {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(22, 22, 31, .98);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  visibility: hidden; pointer-events: none; opacity: 0;
  transition: opacity .35s ease, visibility .35s ease;
}
.nav-mobile.open { visibility: visible; pointer-events: auto; opacity: 1; }
.nav-mobile a { color: #fff; font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
.nav-mobile .btn-outline-neon { color: #fff; font-family: var(--font-body); font-size: 1rem; border-color: var(--neon); }

/* ===========================================================
   Hero
   =========================================================== */
/* Hero fills the viewport so height is viewport-driven, not content-driven — both
   languages fill fully regardless of headline line-count (was clamp-capped at 760px,
   which let the shorter HU headline leave a page-background strip at the bottom). */
.hero { position: relative;
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden; color: #fff; isolation: isolate;
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0;
  background-color: color-mix(in srgb, var(--espresso) 70%, transparent);
  mix-blend-mode: multiply; }
.hero-inner {
  position: relative; z-index: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  max-width: 56rem;
}
.hero .eyebrow { color: rgba(255,255,255,.85); }
.hero h1 { color: #fff; }
.hero h1 .italic-light { display: block; font-weight: 300; line-height: 1.35; margin-top: .12em; color: color-mix(in srgb, var(--bg) 90%, transparent); }
.hero-lead { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.4vw + .7rem, 1.3rem); margin-top: 1.5rem; max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.25rem; }

/* Hero entrance: staggered fade + small rise. opacity/transform only (GPU, no
   reflow → CLS 0). `both` holds the start state through the delay so nothing
   flashes. Gated on no-preference so reduced-motion users get the resting
   state (opacity:1) with no animation at all (C10). Fires once on load — not
   scroll-bound, no scroll-jacking. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .hero .eyebrow, .hero h1, .hero-lead, .hero-cta {
    animation: heroRise .7s cubic-bezier(.2, .6, .2, 1) both;
  }
  .hero h1   { animation-delay: .08s; }
  .hero-lead { animation-delay: .16s; }
  .hero-cta  { animation-delay: .24s; }
}

/* Hero-specific CTA buttons */
.btn-hero-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--neon); color: var(--neon); background: transparent;
  border-radius: 100px; padding: .875rem 1.75rem; font-weight: 600;
  transition: all .3s ease; min-height: 48px;
}
.btn-hero-outline:hover { background: rgba(34, 221, 214, .15); }
.btn-hero-dark {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.2); color: var(--bg); background: var(--espresso);
  border-radius: 100px; padding: .875rem 1.75rem; font-weight: 600;
  transition: all .3s ease; min-height: 48px;
}
.btn-hero-dark:hover { background: color-mix(in srgb, var(--espresso) 80%, #fff); }

/* Shared button variants used below the hero */
.btn-filled-neon { background: var(--neon); border-color: var(--neon); color: var(--espresso); }
.btn-filled-neon:hover { background: #18c4be; }
.btn-ghost-light { border: 2px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }

/* ---- Viber brand color (only on Viber CTAs; see design.md exception) ---- */
/* Outline Viber pills (header + visit section): purple outline/text, fill on hover */
.btn-outline-neon[data-cta="viber"] { border-color: var(--viber-purple); color: var(--viber-purple); }
.btn-outline-neon[data-cta="viber"]:hover { background: var(--viber-purple); color: #fff; }
/* Transparent header over dark photo: keep purple border, white text for legibility */
.site-header:not(.scrolled) .btn-outline-neon[data-cta="viber"] { border-color: var(--viber-purple); color: #fff; }
/* Hero filled Viber button: solid purple. Uses the deep shade at rest so white
   text clears WCAG 4.5:1 (brand #7360F2 gave only 4.48:1 white-on-purple). */
.btn-hero-dark[data-cta="viber"] { background: var(--viber-purple-deep); border-color: var(--viber-purple-deep); color: #fff; }
.btn-hero-dark[data-cta="viber"]:hover { background: #4a39b8; border-color: #4a39b8; }
/* Mobile overlay Viber pill */
.nav-mobile .btn-outline-neon[data-cta="viber"] { border-color: var(--viber-purple); color: #fff; }
.nav-mobile .btn-outline-neon[data-cta="viber"]:hover { background: var(--viber-purple); }

/* Trust strip — cream bg strip directly below hero */
.trust-strip { background: var(--bg); padding-block: 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--espresso) 10%, transparent); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.trust-item { display: flex; align-items: center; gap: .625rem; font-size: .9rem; font-weight: 500; color: var(--espresso); }
.trust-item svg { stroke: var(--neon-deep); flex: none; }

/* ===========================================================
   About
   =========================================================== */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-copy p { margin-top: 1.25rem; color: color-mix(in srgb, var(--espresso) 68%, transparent); }
.stat-row { display: flex; margin-top: 2.25rem; }
.stat-row:has(.stat:only-child) { justify-content: flex-start; }
.stat { padding-left: 1rem; border-left: 3px solid var(--neon); }
.stat-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--espresso); text-shadow: 0 0 14px var(--neon-glow); }
.stat-label { font-size: .85rem; color: color-mix(in srgb, var(--espresso) 68%, transparent); margin-top: .25rem; }

.about-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-images .img-tall { grid-row: span 2; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.about-images .img-sq { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; }
.about-images img { width: 100%; height: 100%; object-fit: cover; }

/* ===========================================================
   Menu
   =========================================================== */
.menu-head { max-width: 720px; }
.menu-head .lead { margin-top: 1rem; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2.25rem 0 2.5rem; }
.tab-btn {
  border: 2px solid color-mix(in srgb, var(--espresso) 10%, transparent); background: var(--bg);
  border-radius: 100px; padding: .65rem 1.4rem; font-weight: 600; font-size: .92rem;
  color: color-mix(in srgb, var(--espresso) 68%, transparent); transition: all .25s ease; min-height: 48px;
}
.tab-btn:hover { border-color: var(--neon); color: var(--espresso); }
.tab-btn.active { background: var(--espresso); border-color: var(--neon); color: #fff; }

.menu-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.menu-hero-col { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.menu-hero-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.menu-hero-card img { width: 100%; height: 100%; object-fit: cover; }
.menu-hero-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.8)); }
.menu-hero-label { position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem; z-index: 1; color: #fff; }
.menu-hero-label .kicker { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--neon); }
.menu-hero-label .cat-name { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.1; margin-top: .35rem; }

.menu-panel { display: none; }
.menu-panel.active { display: block; }
.menu-panel.fading { opacity: 0; transition: opacity .18s ease; }

.menu-item { display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--espresso) 10%, transparent); }
.menu-item:last-child { border-bottom: none; }
.menu-item-thumb { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex: none; }
.menu-item-body { flex: 1; }
.menu-item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.menu-item-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.menu-item-price { font-weight: 600; color: var(--espresso); white-space: nowrap; font-size: .98rem; }
.menu-item-desc { color: color-mix(in srgb, var(--espresso) 68%, transparent); font-size: .95rem; margin-top: .35rem; max-width: 60ch; }

/* ===========================================================
   Gallery
   =========================================================== */
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; }
.gallery-head .lead { max-width: 38ch; text-align: right; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }

/* TODO: real testimonials pending owner confirmation, section removed per doctrine S7 */

/* ===========================================================
   Visit
   =========================================================== */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hours-table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; }
.hours-table td { padding: .65rem 0; border-bottom: 1px solid color-mix(in srgb, var(--espresso) 10%, transparent); }
.hours-table td:last-child { text-align: right; color: color-mix(in srgb, var(--espresso) 68%, transparent); font-variant-numeric: tabular-nums; }
.visit-contact { margin: 1.5rem 0; }
.visit-contact div { margin-bottom: .5rem; }
.visit-contact .label { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: color-mix(in srgb, var(--espresso) 68%, transparent); }
.visit-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--espresso) 10%, transparent); }
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }
.map-caption { font-size: .85rem; color: color-mix(in srgb, var(--espresso) 68%, transparent); margin-top: .75rem; text-align: center; }

/* ===========================================================
   Legal / utility pages (privacy policy)
   =========================================================== */
.legal h1 { margin-top: 1rem; }
.legal h2 { font-size: clamp(1.4rem, 2vw + .8rem, 1.9rem); margin-top: 2.5rem; }
.legal .lead { margin-top: 1rem; }
.legal p { margin-top: 1rem; color: color-mix(in srgb, var(--espresso) 82%, transparent); }
/* espresso (not neon-deep) — neon-deep on cream is only 3.78:1, fails WCAG.
   Underline carries the link affordance instead of color. */
.legal a:not(.btn-outline-neon):not(.nav-link):not(.lang-link) {
  color: var(--espresso); text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
.legal a:not(.btn-outline-neon):not(.nav-link):not(.lang-link):hover { color: var(--neon-deep); }

/* ===========================================================
   Consent banner (GA4 gate)
   =========================================================== */
.consent-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: var(--z-toast);
  max-width: 640px; margin-inline: auto;
  background: var(--bg); color: var(--espresso);
  border: 1px solid color-mix(in srgb, var(--espresso) 15%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.consent-text { font-size: .9rem; max-width: 46ch; }
/* espresso not neon-deep — neon-deep on the cream banner is 3.78:1 (WCAG fail). */
.consent-link { color: var(--espresso); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; white-space: nowrap; }
.consent-link:hover { color: var(--neon-deep); }
.consent-actions { display: flex; gap: .75rem; flex: none; }
.consent-actions .btn-outline-neon { padding: .6rem 1.25rem; font-size: .85rem; min-height: 48px; }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer { background: var(--espresso); color: rgba(255,255,255,.7); padding-block: 3rem; text-align: center; }
.site-footer .logo-script { font-size: 2.4rem; color: #fff; }
.footer-sub { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .25rem; }
.footer-copy { font-size: .85rem; margin-top: 1.5rem; max-width: none; }
.footer-legal { font-size: .85rem; margin-top: .5rem; max-width: none; }
.footer-legal a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: #fff; }
/* Reusable MSA footer credit — inline SVG recolors via currentColor (muted footer ink) */
.footer-credit { margin-top: 1.25rem; font-size: .8rem; max-width: none; }
.footer-credit a { display: inline-flex; align-items: center; gap: .5em; color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s ease; }
.footer-credit a:hover { color: rgba(255,255,255,.85); }
.footer-credit__mark { height: 22px; width: auto; flex: none; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 768px) {
  body { font-size: 16px; }
  .nav-desktop, .header-cta { display: none; }
  .hamburger { display: flex; }
  /* header-actions content (lang-switch + hamburger) sits flush against the
     grid track's available width at narrow mobile — the 44→48px tap-target
     floor raise left ~0 slack. Trim the gap here (mobile-only; header-cta is
     already hidden at this width) to reclaim the room, no vertical/header-h
     change. */
  .header-actions { gap: 1rem; }
  .about-grid { grid-template-columns: 1fr; }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-hero-col { position: static; }
  .menu-hero-card { aspect-ratio: 16/10; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-head .lead { text-align: left; }
  .testi-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .map-wrap iframe { height: 320px; }
}

@media (max-width: 480px) {
  .about-images { grid-template-columns: 1fr 1fr; }
  .hero-cta a { flex: 1 1 100%; }
  .menu-item-head { flex-direction: column; gap: .15rem; }
}

/* 769–1080px: full desktop header is shown (hamburger only takes over ≤768px),
   but width is tight enough that the header CTA pills would wrap out of the
   fixed-height header (.cta-pair flex-wraps). Trim the pills' horizontal
   footprint and header gaps so both pills stay on one row inside --header-h.
   min-height:44px is untouched, so the vertical tap target is unchanged. */
@media (min-width: 769px) and (max-width: 1080px) {
  .nav-desktop { gap: 1.25rem; }
  .header-actions { gap: 1rem; }
  .header-cta .btn-outline-neon { padding: .625rem 1.1rem; font-size: .9rem; }
}