/* ============================================================================
   MOORISH CABANA — STYLESHEET
   ----------------------------------------------------------------------------
   Structure of this file:
     1.  Design tokens (colours, type, spacing)  <- change the brand here
     2.  Reset & base
     3.  Shared pieces: buttons, eyebrows, arches, star divider
     4.  Header, navigation, language switcher
     5.  Home page sections
     6.  Menu page
     7.  Inner pages (about, booking, cooking class, contact)
     8.  Footer
     9.  Responsive
     10. Print (the menu prints cleanly on A4)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change a colour here and it changes everywhere on the site.
   ========================================================================== */
:root {
  /* Night palette — the medina after sunset. Used on hero and footer. */
  --night:        #101826;
  --night-deep:   #080D16;
  --night-soft:   #1B2637;

  /* Day palette — lime plaster walls. Used on menu and body pages. */
  --plaster:      #F3ECE0;
  --plaster-warm: #E9DECB;
  --plaster-edge: #DCCEB6;

  /* Accents */
  --pomegranate:  #A8232B;   /* the brand red, taken from the printed menu */
  --pomegranate-d:#7E1A20;
  --brass:        #C08A3E;   /* lantern brass — headings on night, prices on day */
  --brass-light:  #E0B269;
  --zellige:      #1D6A5A;   /* tile green — vegetarian/vegan markers */

  /* Text */
  --ink:          #1A1611;
  --ink-soft:     #4A4238;
  --muted:        #6F6455;
  --on-night:     #F2EAE0;
  --on-night-dim: #A9B2C0;

  /* Lines */
  --rule:         #CFC0A6;
  --rule-night:   rgba(224, 178, 105, .28);

  /* Type */
  --display: "Fraunces", "Hoefler Text", "Iowan Old Style", Georgia, serif;
  --body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --block:  clamp(4rem, 9vw, 8rem);
  --maxw:   1180px;
  --maxw-narrow: 720px;

  /* The Moorish keyhole arch, as a reusable mask.
     Any element with class="arch" gets cropped into this shape. */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 V60 C0 30 18 8 50 0 C82 8 100 30 100 60 V100 Z' fill='%23000'/%3E%3C/svg%3E");

  /* Khatem — the eight-point star, drawn as two overlapping squares. */
  --khatem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C08A3E' stroke-width='5'%3E%3Crect x='23' y='23' width='54' height='54'/%3E%3Crect x='23' y='23' width='54' height='54' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Visible keyboard focus, everywhere. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; translate: -50% -150%;
  background: var(--pomegranate); color: #fff; padding: .7rem 1.2rem;
  z-index: 200; border-radius: 0 0 6px 6px; text-decoration: none;
  transition: translate .2s;
}
.skip-link:focus { translate: -50% 0; }


/* ==========================================================================
   3. SHARED PIECES
   ========================================================================== */

/* --- Eyebrow: the small tracked label above a heading --------------------- */
.eyebrow {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pomegranate);
  margin: 0 0 1rem;
  display: block;
}
.eyebrow--brass { color: var(--brass); }

/* --- Headings ------------------------------------------------------------ */
.h-xl { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-md { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

.lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- The arch mask ------------------------------------------------------- */
.arch {
  -webkit-mask-image: var(--arch); mask-image: var(--arch);
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  background: var(--night-soft);   /* shows if the photo hasn't loaded */
}

/* --- The khatem star divider --------------------------------------------- */
.divider {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 0 0 2.5rem;
}
.divider::before, .divider::after {
  content: ""; height: 1px; background: var(--rule); flex: 1;
}
.divider__star {
  width: 26px; height: 26px; flex: none;
  background: var(--khatem) center / contain no-repeat;
}
.divider--night::before, .divider--night::after { background: var(--rule-night); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: var(--body);
  font-size: .875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 2px;
  transition: background-color .22s, color .22s, border-color .22s, translate .22s;
}
.btn:hover { translate: 0 -2px; }

.btn--solid  { background: var(--pomegranate); color: #FFF6EE; }
.btn--solid:hover { background: var(--pomegranate-d); }

.btn--brass  { background: var(--brass); color: #17110A; }
.btn--brass:hover { background: var(--brass-light); }

.btn--ghost  { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--ghost-night { background: transparent; color: var(--on-night); border-color: var(--rule-night); }
.btn--ghost-night:hover { border-color: var(--brass); color: var(--brass-light); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Section shell ------------------------------------------------------- */
.section { padding-block: var(--block); }
.section--night { background: var(--night); color: var(--on-night); }
.section--night .lede,
.section--night p { color: var(--on-night-dim); }
.section--warm { background: var(--plaster-warm); }
.section--tight { padding-block: calc(var(--block) * .6); }


/* ==========================================================================
   4. HEADER, NAV, LANGUAGE SWITCHER
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--night);
  border-bottom: 1px solid var(--rule-night);
}

.topbar__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
}

.brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; }
.brand__name {
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 600; letter-spacing: .01em;
  color: var(--on-night); line-height: 1;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.brand__sub {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin-top: .3rem; font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  text-decoration: none; color: var(--on-night-dim);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding-block: .4rem; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--on-night); }
.nav a[aria-current="page"] { color: var(--brass); border-color: var(--brass); }

/* Language switcher — four zellige tiles. This is the site's signature control. */
.langswitch { display: flex; gap: 4px; align-items: center; }
.langswitch__btn {
  position: relative;
  min-width: 40px; height: 34px; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  color: var(--on-night-dim);
  background: transparent;
  border: 1px solid var(--rule-night);
  border-radius: 2px; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.langswitch__btn:hover { color: var(--on-night); border-color: var(--brass); }
.langswitch__btn[aria-pressed="true"] {
  color: #17110A; background: var(--brass); border-color: var(--brass);
}
/* On the light menu page the switcher sits on plaster instead of night. */
.langswitch--day .langswitch__btn { color: var(--muted); border-color: var(--rule); }
.langswitch--day .langswitch__btn:hover { color: var(--ink); border-color: var(--ink); }
.langswitch--day .langswitch__btn[aria-pressed="true"] {
  color: #FFF6EE; background: var(--pomegranate); border-color: var(--pomegranate);
}

/* Mobile menu toggle */
.navtoggle {
  display: none; background: none; border: 1px solid var(--rule-night);
  color: var(--on-night); width: 42px; height: 38px; border-radius: 2px;
  cursor: pointer; align-items: center; justify-content: center;
}
.navtoggle svg { width: 20px; height: 20px; }


/* ==========================================================================
   5. HOME PAGE
   ========================================================================== */

/* --- Hero: the arch is the thesis --------------------------------------- */
.hero {
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6.5rem);
  position: relative; overflow: hidden;
}
.hero::after {
  /* faint zellige lattice, barely there */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(224,178,105,.05) 25%, transparent 25%, transparent 75%, rgba(224,178,105,.05) 75%),
    linear-gradient(45deg, rgba(224,178,105,.05) 25%, transparent 25%, transparent 75%, rgba(224,178,105,.05) 75%);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
  opacity: .55;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__title { color: var(--on-night); margin-bottom: 1.4rem; }
.hero__lede { color: var(--on-night-dim); max-width: 46ch; margin-bottom: 2rem; }

.hero__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 620px;
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  position: relative; z-index: 1;
}
/* A second, larger arch in brass sits behind the photo — the shape doubled,
   like the recessed arches you see set into medina walls. */
.hero__frame::before {
  content: ""; position: absolute; inset: -18px -18px 0 -18px; z-index: 0;
  background: var(--brass);
  -webkit-mask-image: var(--arch); mask-image: var(--arch);
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  opacity: .22;
}

/* --- Intro --------------------------------------------------------------- */
.intro__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
}

/* --- Pillars ------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.pillar { border-top: 2px solid var(--pomegranate); padding-top: 1.4rem; }
.pillar h3 { margin-bottom: .6rem; }
.pillar p { color: var(--ink-soft); font-size: .96rem; }
.section--night .pillar { border-top-color: var(--brass); }
.section--night .pillar h3 { color: var(--on-night); }

/* --- Gallery: a row of arches -------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); }
.gallery figure { margin: 0; overflow: hidden; }
.gallery img {
  width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover;
  transition: scale .5s ease;
}
.gallery figure:hover img { scale: 1.04; }
.gallery .arch { display: block; }

/* --- Menu teaser --------------------------------------------------------- */
.teaser {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.teaser__demo {
  background: var(--plaster);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.5);
}
.teaser__demo .dish { padding-block: .8rem; }

/* --- Trust bar ----------------------------------------------------------- */
.trust { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }


/* ==========================================================================
   6. MENU PAGE — the centrepiece
   ========================================================================== */
.menuhead {
  background: var(--plaster-warm);
  border-bottom: 1px solid var(--plaster-edge);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
}
.menuhead__title { margin-bottom: .6rem; }
.menuhead__lede { color: var(--muted); margin-bottom: 1.75rem; }

.menuhead__controls {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center;
}
.control-group { display: flex; align-items: center; gap: .65rem; }
.control-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* Vegetarian filter */
.vegtoggle {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--rule); background: transparent;
  padding: .5rem .9rem; border-radius: 2px; cursor: pointer;
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; color: var(--muted);
  transition: all .2s;
}
.vegtoggle:hover { border-color: var(--zellige); color: var(--zellige); }
.vegtoggle[aria-pressed="true"] {
  background: var(--zellige); border-color: var(--zellige); color: #F0F7F4;
}

/* Sticky section rail */
.menurail {
  position: sticky; top: 72px; z-index: 60;
  background: var(--plaster);
  border-bottom: 1px solid var(--plaster-edge);
}
.menurail__scroll {
  display: flex; gap: .35rem; overflow-x: auto; padding-block: .6rem;
  scrollbar-width: none;
}
.menurail__scroll::-webkit-scrollbar { display: none; }
.menurail a {
  flex: none; text-decoration: none; white-space: nowrap;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: .45rem .8rem; border-radius: 2px;
  transition: color .2s, background-color .2s;
}
.menurail a:hover { color: var(--ink); background: var(--plaster-warm); }
.menurail a.is-active { color: #FFF6EE; background: var(--pomegranate); }

/* The menu body */
.menubody { padding-block: clamp(2.5rem, 5vw, 4rem) var(--block); }
.menusection { margin-bottom: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 140px; }
.menusection__head { margin-bottom: 1.75rem; }
.menusection__head .divider { margin-bottom: 1rem; }
.menusection__title {
  font-family: var(--body);
  font-size: .82rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pomegranate);
}
.menusection__note { font-size: .88rem; color: var(--muted); margin-top: .5rem; font-style: italic; }

/* Two columns of dishes on wide screens, like a printed carte. */
.dishlist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0;
}

.dish { padding-block: 1.05rem; border-bottom: 1px solid var(--plaster-edge); }
.dish__head { display: flex; align-items: baseline; gap: .5rem; }
.dish__name {
  font-family: var(--display); font-size: 1.12rem; font-weight: 600;
  color: var(--ink); font-variation-settings: "SOFT" 30, "WONK" 0;
}
/* The leader dots — a real menu convention, and it keeps prices readable
   when dish names change length between languages. */
.dish__leader {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-.32em);
}
.dish__price {
  font-weight: 800; font-size: 1rem; color: var(--pomegranate);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dish__desc { margin: .35rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }

.dish__tags { display: inline-flex; gap: .3rem; margin-left: .1rem; }
.tag {
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .15rem .4rem; border-radius: 2px; white-space: nowrap;
}
.tag--veg   { background: rgba(29,106,90,.12); color: var(--zellige); }
.tag--vegan { background: var(--zellige); color: #F0F7F4; }
.tag--gf    { background: rgba(192,138,62,.16); color: #8A5F1E; }

.menu-empty { color: var(--muted); font-style: italic; grid-column: 1 / -1; padding-block: 1rem; }

/* Footnotes */
.footnotes {
  border-top: 2px solid var(--pomegranate); padding-top: 1.5rem;
  display: grid; gap: .5rem;
}
.footnotes li { font-size: .85rem; color: var(--muted); }
.footnotes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

/* Fade the menu very slightly while it re-renders in a new language. */
.menubody { transition: opacity .18s ease; }
.menubody.is-swapping { opacity: .35; }


/* ==========================================================================
   7. INNER PAGES
   ========================================================================== */
.pagehead {
  background: var(--night); color: var(--on-night);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.pagehead h1 { color: var(--on-night); margin-bottom: 1rem; }
.pagehead .lede { color: var(--on-night-dim); max-width: 56ch; }

.prose { max-width: 62ch; }
.prose p { color: var(--ink-soft); }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 6vw, 5rem); }

/* Fact / info list */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.facts li {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .95rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--plaster-edge); padding-bottom: .9rem;
}
.facts li::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: .35rem;
  background: var(--khatem) center / contain no-repeat;
}

/* Booking cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.card {
  background: #fff; border: 1px solid var(--plaster-edge);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: .8rem;
}
.card h3 { font-size: 1.4rem; }
.card p { font-size: .93rem; color: var(--muted); }
.card .btn { margin-top: auto; align-self: flex-start; }

/* Contact detail block */
.details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.details dt, .details .k {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .25rem;
}
.details .v { font-size: 1.02rem; color: var(--ink); }
.details a { color: var(--pomegranate); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Map */
.map {
  width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--plaster-edge);
  background: var(--plaster-warm);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  padding: .8rem .9rem; width: 100%;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--pomegranate); }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.formnote { font-size: .85rem; color: var(--muted); }
.formstatus { font-size: .92rem; font-weight: 600; min-height: 1.4em; }
.formstatus[data-state="error"] { color: var(--pomegranate); }
.formstatus[data-state="ok"]    { color: var(--zellige); }


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.footer { background: var(--night-deep); color: var(--on-night-dim); padding-block: var(--block) 2.5rem; }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); margin-bottom: 3rem;
}
.footer h4 {
  font-family: var(--body); font-size: .68rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: var(--on-night-dim); text-decoration: none; font-size: .92rem; }
.footer a:hover { color: var(--brass-light); }
.footer__brand .brand__name { color: var(--on-night); font-size: 1.6rem; }
.footer__tagline { font-size: .92rem; margin-top: .9rem; max-width: 34ch; }
.footer__bottom {
  border-top: 1px solid var(--rule-night); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8rem;
}

.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--rule-night); border-radius: 2px; color: var(--on-night-dim);
  transition: all .2s;
}
.social a:hover { border-color: var(--brass); color: var(--brass); }
.social svg { width: 17px; height: 17px; }

/* Floating WhatsApp button — the fastest path to a booking. */
.wa-float {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1FA855; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.5);
  transition: scale .2s;
}
.wa-float:hover { scale: 1.07; }
.wa-float svg { width: 27px; height: 27px; }


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .hero__inner   { grid-template-columns: 1fr; }
  .hero__frame   { max-height: 420px; order: -1; aspect-ratio: 4/3; }
  .intro__grid,
  .two-col,
  .teaser        { grid-template-columns: 1fr; }
  .pillars,
  .cards         { grid-template-columns: 1fr; }
  .gallery       { grid-template-columns: repeat(3, 1fr); }
  .gallery figure:nth-child(n+4) { display: none; }
  .dishlist      { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .navtoggle { display: inline-flex; order: 3; }

  .nav {
    position: fixed; inset: 64px 0 auto 0;
    background: var(--night); border-bottom: 1px solid var(--rule-night);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: .9rem; border-bottom: 1px solid var(--rule-night); }
  .nav a[aria-current="page"] { border-bottom-color: var(--brass); }

  .topbar__inner { min-height: 64px; gap: .75rem; }
  .menurail { top: 64px; }
  .brand__sub { display: none; }
  .langswitch__btn { min-width: 34px; height: 30px; font-size: .66rem; padding: 0 .35rem; }

  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:nth-child(n+3) { display: none; }
}

/* Respect people who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .wa-float:hover, .gallery figure:hover img { translate: none; scale: none; }
}


/* ==========================================================================
   10. PRINT — so the kitchen can print the menu in any language
   ========================================================================== */
@media print {
  .topbar, .menurail, .footer, .wa-float, .menuhead__controls,
  .skip-link, .no-print { display: none !important; }

  body { background: #fff; font-size: 10.5pt; }
  .menubody { padding-block: 0; }
  .menusection { break-inside: avoid; margin-bottom: 1.5rem; }
  .dishlist { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .dish { padding-block: .5rem; }
  .dish__price { color: #000; }
  .menusection__title { color: #000; }
  a { text-decoration: none; color: #000; }
}


/* Very narrow phones — keep the four language tiles on a single line. */
@media (max-width: 400px) {
  .langswitch__btn { min-width: 30px; padding: 0 .25rem; font-size: .62rem; }
  .topbar__inner { gap: .5rem; }
}