/* =========================================================================
   שיפודי התקווה — stylesheet
   Organized by section. All design tokens live in :root below —
   change colors/spacing/type from one place.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm charcoal (not pure black), off-white type, and a brand
     orange accent lifted directly from the real Shipudei Hatikva logo
     (assets/images/brand/shipudei-hatikva-logo.svg, solid fill #F24F14) —
     replaces the previous cool near-black + brass-gold system. */
  --color-bg: #1b140f;
  --color-bg-alt: #221a13;
  --color-surface: #2a2018;
  --color-surface-2: #33271c;
  --color-text: #f7f1e7;
  --color-text-muted: #d9cab8;
  --color-text-faint: #a8987f;
  --color-accent: #f24f14;
  --color-accent-soft: #ff7f4d;
  --color-line: rgba(247, 241, 231, 0.14);
  --color-line-soft: rgba(247, 241, 231, 0.08);
  --color-overlay-strong: rgba(15, 10, 6, 0.72);
  --color-overlay-soft: rgba(15, 10, 6, 0.38);

  /* Text color to pair with a solid --color-accent fill (buttons, badges).
     Bright orange fails AA contrast against white/cream text at normal
     sizes, so accent-filled elements use this near-black warm ink instead
     — verified 4.9:1+ against both --color-accent and --color-accent-soft. */
  --color-ink: #221710;

  /* Warm near-black — used for structural "chrome" (header, footer, nav
     drawer, accessibility widget, mobile action bar) so it reads as a
     deliberately distinct, slightly richer band from the charcoal content
     sections rather than one continuous black mass. */
  --color-navy: #17110c;
  --color-navy-2: #241a13;

  /* Warm light "cream" section palette — used to break up the site's dark
     sections with deliberate rhythm (see .reservation-editorial /
     .contact-editorial / the legal pages' body.page-light). Every value
     below is verified ≥4.5:1 against --color-cream for normal text. */
  --color-cream: #fbf3e7;
  --color-surface-light: #f1e3d1;
  --color-text-dark: #241a14;
  --color-text-dark-muted: #6b5847;
  --color-text-dark-faint: #7a6754;
  --color-brand-deep: #b8390c;
  --color-border-light: rgba(36, 26, 20, 0.15);
  --color-border-light-soft: rgba(36, 26, 20, 0.08);

  /* The form's error/invalid red (#e2726a, dark-theme default set inline
     on .form-error / [aria-invalid]) drops below 3:1 on cream — this is
     the same red, darkened until it clears 4.5:1 there. */
  --color-error-on-light: #b23b32;

  /* Success green for the jobs-form submission status — same "darken for
     cream contrast" treatment as --color-error-on-light above. */
  --color-success: #4caf6a;
  --color-success-on-light: #2f7d43;

  /* Semantic aliases — same palette, names that map directly to the
     brand's conceptual token list. */
  --color-brand: var(--color-accent);
  --color-brand-hover: var(--color-accent-soft);
  --color-charcoal: var(--color-navy);
  --color-charcoal-soft: var(--color-bg);
  --color-text-light: var(--color-text);
  --color-border: var(--color-line);

  /* Reserved vertical space for the mobile-only fixed bottom action bar
     (Part 2), including the safe-area inset — used to keep the footer,
     the a11y widget and the hero's dots/scroll-cue clear of it. */
  --mobile-bar-clearance: calc(78px + env(safe-area-inset-bottom, 0px));

  /* Typography — two-typeface system:
     display = Frank Ruhl Libre (elegant, editorial Hebrew serif, used at
       light/regular weight for a dramatic, high-end restaurant character)
     body    = Heebo (clean, modern Hebrew sans for nav/body/buttons) */
  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-body: "Heebo", "Segoe UI", Arial, sans-serif;
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.2rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.55rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.85rem);
  --step-3: clamp(2.6rem, 1.6rem + 3.4vw, 5.25rem);
  --step-4: clamp(3.4rem, 1.8rem + 5.8vw, 8rem);

  /* Layout */
  --content-width: 1440px;
  --content-width-lg: 1640px;
  --content-width-xl: 1880px;
  --content-padding: clamp(1.5rem, 1rem + 2.5vw, 4rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --space-5: clamp(4rem, 3rem + 3.5vw, 6rem);
  --space-6: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  --header-height: 112px;

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 220ms var(--ease-premium);
  --transition-med: 420ms var(--ease-premium);
  --transition-slow: 900ms var(--ease-premium);

  --radius-sm: 2px;
  --radius-md: 4px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Large editorial display headings — lighter weight reads more dramatic
   and premium at big sizes than the default regular weight. */
.gallery-head h2 {
  font-weight: 300;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

svg.icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.icon path[stroke] {
  fill: none;
}

/* Accessible visually-hidden utility: content stays in the accessibility
   tree (and is announced by screen readers) but is not shown on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- Focus states ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: -60px;
  right: var(--space-2);
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.8em 1.4em;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-2);
}

/* ---------- Shared layout helpers ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: none;
  margin-bottom: var(--space-2);
  display: block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 2.3em;
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-soft);
}

.btn-outline {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* =========================================================================
   HEADER
   Layout: RIGHT = hamburger + social, CENTER = primary nav, LEFT = phone +
   logo. In a dir="rtl" flex row, the first DOM child sits at the "start"
   (screen-right) edge and the last child at the "end" (screen-left) edge,
   so header-right / header-left below are named for where they land.
   ========================================================================= */
.site-header {
  /* Sticky (not fixed) so it reserves its own space in normal flow — the
     hero sits directly below it, never behind it — while still staying
     pinned to the top as the page scrolls. */
  position: sticky;
  top: 0;
  /* Above the drawer (700) and its backdrop (600) so the hamburger stays
     visible and clickable — animated into an X — while the drawer is open,
     since both live in the same right-hand corner. */
  z-index: 720;
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* Solid from the very first paint — no transparent/gradient state, so
     the hero image never bleeds through behind the header, before or
     after scrolling. */
  background: var(--color-navy);
  transition: box-shadow var(--transition-med);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.header-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.header-right,
.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Real Shipudei Hatikva logo (vector SVG, transparent, exact brand
   artwork — see assets/images/README.md). width:auto keeps its intrinsic
   988:401 aspect ratio at every size; only the height is set per context
   below, so it never stretches or distorts. Sized to read as the site's
   main brand mark — --header-height (112px) itself is unchanged, so a
   bigger logo just uses more of the header's existing vertical space. */
.site-logo-img {
  display: block;
  width: auto;
  height: clamp(3rem, 2rem + 4vw, 4.4rem);
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  gap: clamp(var(--space-4), 3vw, 3.25rem);
}

.primary-nav a {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 5px;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--color-accent);
  transition: width var(--transition-fast);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  width: 100%;
}

/* Subtly mark the current page (e.g. "צור קשר" on contact.html) */
.primary-nav a[aria-current="page"] {
  color: var(--color-accent-soft);
}

.primary-nav a[aria-current="page"]::after {
  width: 100%;
}

.header-phone {
  display: none;
  align-items: center;
  gap: 0.5em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  white-space: nowrap;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.social-icon:hover,
.social-icon:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.header-social {
  display: none;
}

/* Hamburger — stays visible at every breakpoint; the drawer carries the
   full site navigation regardless of viewport width. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 2.8rem;
  height: 2.8rem;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animate the three bars into an X while the drawer is open. */
.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);
}

@media (min-width: 860px) {
  .primary-nav {
    display: block;
  }
  .header-phone {
    display: inline-flex;
  }
  .header-social {
    display: inline-flex;
  }
  /* A third header icon squeezes the centre nav into two lines below
     ~1024px, so TikTok joins the header only once there is room for it.
     It is always available in the drawer and the footer. */
  .header-social-tiktok {
    display: none;
  }
}

@media (min-width: 1024px) {
  .header-social-tiktok {
    display: inline-flex;
  }
  .primary-nav a {
    white-space: nowrap;
  }
}

/* "הזמנה אונליין" is longer than the old "תפריט" label; tighten the nav
   gap on narrow desktops only, so it stays on one line. From 1280px the
   original spacing applies unchanged. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .primary-nav ul {
    gap: 1.75rem;
  }
}

/* =========================================================================
   RIGHT-SIDE NAVIGATION DRAWER
   ========================================================================= */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 6, 0.65);
  z-index: 600;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.mobile-nav-backdrop[hidden] {
  display: none;
}

.mobile-nav {
  position: fixed;
  inset-block: 0;
  /* Physical (not logical) right — the site is RTL-only, and the drawer
     must always open from the right edge of the screen regardless. */
  right: 0;
  width: min(92vw, 480px);
  background: var(--color-navy);
  border-left: 1px solid var(--color-navy-2);
  z-index: 700;
  display: flex;
  flex-direction: column;
  /* Content starts below the (now higher z-index) header band, so the
     drawer's own head never sits underneath it. */
  padding-block-start: calc(var(--header-height) + var(--space-2));
  padding-inline: var(--space-4);
  padding-block-end: var(--space-4);
  transform: translateX(100%);
  transition: transform var(--transition-med);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-backdrop.is-visible {
  opacity: 1;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-navy-2);
  margin-bottom: var(--space-3);
}

.mobile-nav-head .site-logo-img {
  height: 2.3rem;
}

.mobile-nav-close {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem);
  letter-spacing: -0.01em;
  padding-block: 0.35em;
  border-bottom: 1px solid var(--color-navy-2);
  transition: color var(--transition-fast), padding-inline-start var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  color: var(--color-accent-soft);
  padding-inline-start: 0.35em;
}

.mobile-nav-link[aria-current="page"] {
  color: var(--color-accent-soft);
}

.mobile-nav-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.mobile-nav-legal-link {
  font-size: 0.9rem;
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
}

.mobile-nav-legal-link:hover,
.mobile-nav-legal-link:focus-visible {
  color: var(--color-accent-soft);
}

.mobile-nav-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-nav-phone {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent-soft);
}

.mobile-nav-social {
  display: flex;
  gap: var(--space-2);
}

/* =========================================================================
   HERO — pure photography: slider, subtle arrows/dots only.
   ========================================================================= */
.hero {
  position: relative;
  /* The header now sits above the hero in normal flow (not overlaying
     it), so the hero fills exactly the remaining viewport below it. */
  height: calc(100svh - var(--header-height));
  min-height: calc(560px - var(--header-height));
  overflow: hidden;
  background: var(--color-bg);
}

/* Mobile also has a second piece of persistent chrome — the fixed bottom
   action bar (Part 2) — so the hero is additionally shortened by its
   height here, exactly as it already is for the header above, keeping
   the dots/scroll-cue clear of the bar instead of hidden behind it. This
   is a sizing-only change: the slider's JS, autoplay timing and the
   desktop/mobile <picture> sources are untouched. */
@media (max-width: 767px) {
  .hero {
    height: calc(100svh - var(--header-height) - var(--mobile-bar-clearance));
    min-height: calc(
      480px - var(--header-height) - var(--mobile-bar-clearance)
    );
  }
}

.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* One stable frame per slide: the .hero-slide box is absolutely
   positioned inset:0 (fixed size, set by .hero's height), and every
   slide's <picture>/<img> fills that exact same box at width:100%/
   height:100% — dimensions never change when the active slide changes.
   object-fit: cover crops without stretching/distorting. No scale()/zoom
   animation, so the crop stays identical and stable on every device
   (a "Ken Burns" zoom previously caused inconsistent framing and could
   crop important content out of view on mobile). */
.hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Pure photography — just a faint top/bottom vignette so the header
     icons and the arrows/dots keep enough contrast to read. */
  background: linear-gradient(
    to bottom,
    rgba(8, 6, 4, 0.35) 0%,
    rgba(8, 6, 4, 0) 18%,
    rgba(8, 6, 4, 0) 78%,
    rgba(8, 6, 4, 0.4) 100%
  );
}

/* Prev / next arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 230, 0.35);
  color: var(--color-text);
  background: rgba(9, 7, 5, 0.25);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  border-color: var(--color-accent);
  background: rgba(9, 7, 5, 0.55);
}

.hero-arrow-prev {
  inset-inline-start: var(--space-3);
}

.hero-arrow-next {
  inset-inline-end: var(--space-3);
}

/* RTL: flip icon direction so prev/next arrows still point correctly */
[dir="rtl"] .hero-arrow-prev svg {
  transform: scaleX(-1);
}
[dir="rtl"] .hero-arrow-next svg {
  transform: scaleX(-1);
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: var(--space-4);
  inset-inline: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 230, 0.6);
  background: transparent;
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.hero-dot.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  width: 22px;
  border-radius: 5px;
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-2);
  inset-inline-end: var(--space-3);
  z-index: 4;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(245, 239, 230, 0.55);
  border-radius: 14px;
  display: none;
}

.hero-scroll-cue span {
  display: block;
  width: 4px;
  height: 8px;
  margin: 6px auto 0;
  background: var(--color-accent);
  border-radius: 2px;
  animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (min-width: 640px) {
  .hero-scroll-cue { display: block; }
}

/* =========================================================================
   SECTION SPACING (shared)
   ========================================================================= */
section {
  padding-block: var(--space-6);
}

/* =========================================================================
   RESERVATION — editorial split (same family as the Contact page): one
   dedicated media block, one content column. No full-bleed banner, no
   giant centered headline over a background image.

   Desktop composition note: .reservation-editorial (this section) is the
   full-bleed cream band — it carries no max-width, so the background
   reaches both viewport edges with no dark gutters. .reservation-inner is
   the separate, centered, max-width content container. This split is
   what lets ≥900px widen the band edge-to-edge while leaving mobile
   (a single column at the page's normal content padding, which never had
   a gutter problem) pixel-identical to before.
   ========================================================================= */
.reservation-inner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--content-width-lg);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  gap: var(--space-4);
}

.reservation-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.reservation-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservation-content {
  align-self: center;
  max-width: 48ch;
}

.reservation-content h2 {
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

.reservation-content p {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Small decorative pause between the copy and the CTA. */
.reservation-accent-line {
  width: 1px;
  height: 2.75rem;
  background: var(--color-accent);
  margin-block: var(--space-3);
}

/* CTA pair: reservation (solid, primary) + online ordering (outline,
   secondary) — side by side when there's room, wrapping as a unit. */
.reservation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Phones: stack both at full width so each is an easy, uncramped tap. */
@media (max-width: 559px) {
  .reservation-actions {
    flex-direction: column;
  }
  .reservation-actions .btn {
    width: 100%;
  }
}

/* Mobile only — unchanged/approved: the single-column stack (image, then
   content) previously inherited the same generous section/gap spacing as
   desktop's two-column layout, which read as excessive on a narrow
   screen. Tightened here; the ≥900px desktop rules below are a separate
   block and don't affect this one. */
@media (max-width: 767px) {
  .reservation-inner {
    gap: var(--space-3);
  }
  .reservation-editorial {
    padding-block: var(--space-4);
  }
  .reservation-content h2 {
    margin-bottom: var(--space-2);
  }
  .reservation-accent-line {
    height: 2rem;
    margin-block: var(--space-2);
  }
}

/* Desktop-only recomposition: a true full-bleed cream band with a
   tighter, wider-image, shorter-section editorial layout. Was reading as
   a boxed "card" floating in dark gutters, with a tall portrait-poster
   image and too much empty cream above/below — fixed here by widening
   the image toward a landscape proportion, narrowing the outer vertical
   padding, and giving the headline real desktop scale. Nothing in this
   block touches the ≤767px rules above. */
@media (min-width: 900px) {
  .reservation-editorial {
    padding-block: clamp(3rem, 4vw, 4.5rem);
  }
  .reservation-inner {
    grid-template-columns: 0.95fr 1.15fr;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 4rem);
    max-width: 1360px;
  }
  .reservation-media {
    aspect-ratio: 4 / 3;
  }
  .reservation-content {
    max-width: 50ch;
  }
  .reservation-content h2 {
    font-size: clamp(3rem, 2rem + 2.2vw, 4.5rem);
  }
  .reservation-content .btn {
    padding: 1.15em 2.6em;
    font-size: 1.1rem;
  }
}

/* Warm "cream" section rhythm (Part 3): flips to a light warm surface so
   the page reads hero(dark) → reservation(light) → gallery(dark) →
   footer(dark) instead of one continuous dark mass. Redefining the text
   tokens *scoped to this section* lets every rule that already reads
   var(--color-text)/--color-text-muted/--color-text-faint/--color-line*
   flip to light-appropriate values automatically, with no rule-by-rule
   rewrite — --color-accent itself is left alone so the CTA button and the
   accent-line divider keep their full brand-orange punch. This section
   carries no max-width/border-radius of its own (see .reservation-inner
   above for the centered content container and the full-bleed note). */
.reservation-editorial {
  background: var(--color-cream);
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-dark-muted);
  --color-text-faint: var(--color-text-dark-faint);
  --color-line: var(--color-border-light);
  --color-line-soft: var(--color-border-light-soft);
  color: var(--color-text);
}

.reservation-editorial .eyebrow {
  /* .eyebrow reads var(--color-accent) directly (not one of the tokens
     redefined above) — the vivid brand orange doesn't clear 4.5:1 on
     cream at this text size, so use the deepened variant here instead. */
  color: var(--color-brand-deep);
}

/* Same light treatment for the contact page's editorial split — its own
   rule (not combined with .reservation-editorial above, which is now a
   full-bleed band with no max-width/radius) so the two sections stay
   independently tunable. Untouched by this pass. */
.contact-editorial {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-dark-muted);
  --color-text-faint: var(--color-text-dark-faint);
  --color-line: var(--color-border-light);
  --color-line-soft: var(--color-border-light-soft);
  color: var(--color-text);
}

.contact-editorial .eyebrow {
  color: var(--color-brand-deep);
}

/* =========================================================================
   GALLERY — explicit art-directed grid. Desktop uses a real 12-column
   grid where every item has a fixed place, so nothing protrudes past the
   gallery boundary and no row is left partial. Mobile repeats a simple
   3-image cycle (wide + two halves) that divides evenly into the 12
   images, so the layout never ends on a hanging final image.

   Warm rhythm (Part 3 color pass): a soft warm-neutral surface — a
   different, slightly deeper warm tone than the reservation card's
   --color-cream, so two adjacent light sections still read as distinct
   — with charcoal text and orange kept to a strict accent role. .gallery
   itself carries no max-width (unlike .reservation-editorial), so this
   background is genuinely full-bleed edge to edge.
   ========================================================================= */
.gallery {
  background: var(--color-surface-light);
  color: var(--color-text-dark);
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-dark-muted);
  --color-text-faint: var(--color-text-dark-faint);
}

.gallery .eyebrow {
  color: var(--color-brand-deep);
}

.gallery-head {
  max-width: var(--content-width-xl);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  margin-bottom: var(--space-4);
}

.gallery-head h2 {
  font-size: var(--step-3);
}

.gallery-grid {
  max-width: var(--content-width-xl);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med), filter var(--transition-med);
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 5, 0);
  transition: background-color var(--transition-fast);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  background: rgba(9, 7, 5, 0.12);
}

/* Mobile: a repeating 3-image cycle — wide banner, then two halves.
   12 images / 3 per cycle = exactly 4 clean cycles, always ending on a
   full row. */
@media (max-width: 899px) {
  .gallery-item {
    aspect-ratio: 1 / 1;
  }
  .gallery-item:nth-child(3n+1) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

/* Desktop: explicit 12-column band layout. Every one of the 12 items has
   a hand-placed grid-column / grid-row, so the grid tiles perfectly with
   no gaps and no overflow. */
@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(150px, 13vw, 240px);
    gap: var(--space-3);
  }

  .gallery-item:nth-child(1)  { grid-column: 1 / 6;  grid-row: 1 / 3; }
  .gallery-item:nth-child(2)  { grid-column: 6 / 9;  grid-row: 1 / 2; }
  .gallery-item:nth-child(3)  { grid-column: 9 / 13; grid-row: 1 / 2; }
  .gallery-item:nth-child(4)  { grid-column: 6 / 9;  grid-row: 2 / 3; }
  .gallery-item:nth-child(5)  { grid-column: 9 / 13; grid-row: 2 / 3; }

  .gallery-item:nth-child(6)  { grid-column: 1 / 7;  grid-row: 3 / 4; }
  .gallery-item:nth-child(7)  { grid-column: 7 / 13; grid-row: 3 / 4; }

  .gallery-item:nth-child(8)  { grid-column: 8 / 13; grid-row: 4 / 6; }
  .gallery-item:nth-child(9)  { grid-column: 5 / 8;  grid-row: 4 / 5; }
  .gallery-item:nth-child(10) { grid-column: 1 / 5;  grid-row: 4 / 5; }
  .gallery-item:nth-child(11) { grid-column: 5 / 8;  grid-row: 5 / 6; }
  .gallery-item:nth-child(12) { grid-column: 1 / 5;  grid-row: 5 / 6; }
}

@media (min-width: 1440px) {
  .gallery-grid {
    grid-auto-rows: clamp(200px, 12vw, 260px);
  }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  background: var(--color-navy);
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-6);
}

.site-footer .site-logo-img {
  height: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
}

.footer-inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.footer-tagline {
  color: var(--color-text-faint);
  font-size: var(--step-1);
  margin-block: var(--space-2) var(--space-3);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
}

.footer-nav-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.footer-nav-group ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-nav-group a {
  color: var(--color-text-muted);
  font-size: 1rem;
  transition: color var(--transition-fast);
}

.footer-nav-group a:hover,
.footer-nav-group a:focus-visible {
  color: var(--color-accent-soft);
}

.footer-nav-group a[aria-current="page"] {
  color: var(--color-accent-soft);
}

.footer-bottom {
  border-top: 1px solid var(--color-navy-2);
  padding: var(--space-4) var(--content-padding);
  text-align: center;
}

.footer-bottom p {
  color: var(--color-text-faint);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: 1.3fr 1fr 1fr;
    align-items: start;
    gap: var(--space-5);
  }
}

/* Reserve room for the mobile-only fixed action bar (below) so it never
   permanently covers the copyright line — the last thing at the true
   bottom of every page. */
@media (max-width: 767px) {
  .footer-bottom {
    padding-bottom: calc(var(--space-4) + var(--mobile-bar-clearance));
  }
}

/* =========================================================================
   MOBILE-ONLY FIXED BOTTOM ACTION BAR
   Three actions a visitor needs without opening the hamburger drawer.
   DOM order mirrors the primary nav / footer nav (צור קשר, הזמנת מקום,
   תפריט) so the visual RTL order matches the rest of the site, and puts
   הזמנת מקום in the center column. Hidden entirely ≥768px. The drawer
   (z-index 700) and its backdrop (600) both sit above this bar (500), so
   opening the drawer covers it, exactly as intended. Below the lightbox
   (900) too, so a lightbox open also covers it. Sits above ordinary page
   content and above the a11y widget spatially (the widget is nudged up
   to clear it, further down this file), independent of z-index order
   since the two are never meant to overlap on screen. */
.mobile-action-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 500;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-navy);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 -10px 28px rgba(6, 4, 2, 0.45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-action-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 3.6rem;
  padding-block: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-inline-start: 1px solid var(--color-navy-2);
  transition: color var(--transition-fast);
}

.mobile-action-bar-item:first-child {
  border-inline-start: none;
}

.mobile-action-bar-item .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.mobile-action-bar-item:hover,
.mobile-action-bar-item:focus-visible,
.mobile-action-bar-item:active {
  color: var(--color-accent-soft);
}

/* הזמנת מקום — the primary/central action. Kept in the same continuous
   navy bar (not split into a separate colored block, so the three
   actions still read as one cohesive bar) but raised in hierarchy with a
   small brand-orange badge behind its icon and an orange label. */
.mobile-action-bar-item-primary {
  color: var(--color-accent-soft);
  font-weight: 700;
}

.mobile-action-bar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-ink);
  margin-top: -0.3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: background-color var(--transition-fast);
}

.mobile-action-bar-badge .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.mobile-action-bar-item-primary:hover .mobile-action-bar-badge,
.mobile-action-bar-item-primary:focus-visible .mobile-action-bar-badge,
.mobile-action-bar-item-primary:active .mobile-action-bar-badge {
  background: var(--color-accent-soft);
}

@media (max-width: 767px) {
  .mobile-action-bar {
    display: grid;
  }
}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 4, 0.94);
}

.lightbox.is-open {
  display: flex;
}

.lightbox-frame {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
}

.lightbox-frame img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-close {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-prev {
  inset-inline-start: var(--space-3);
}

.lightbox-next {
  inset-inline-end: var(--space-3);
}

[dir="rtl"] .lightbox-prev svg {
  transform: scaleX(-1);
}
[dir="rtl"] .lightbox-next svg {
  transform: scaleX(-1);
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* =========================================================================
   ACCESSIBILITY WIDGET — floating toggle + panel with real, functional
   controls. This widget does not by itself certify or guarantee legal
   accessibility compliance.
   ========================================================================= */
.a11y-toggle {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 480;
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  border: 1px solid var(--color-line);
  color: var(--color-accent-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.a11y-toggle svg {
  width: 1.6rem;
  height: 1.6rem;
}

.a11y-toggle:hover,
.a11y-toggle:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.a11y-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 480;
  width: min(90vw, 320px);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--color-navy);
  border: 1px solid var(--color-navy-2);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.a11y-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-navy-2);
}

.a11y-panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-text);
}

.a11y-panel-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
}

.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
  color: var(--color-text);
}

.a11y-panel-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.a11y-stepper {
  display: flex;
  gap: 0.4rem;
}

.a11y-btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.a11y-btn:hover,
.a11y-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-soft);
}

.a11y-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-navy-2);
}

.a11y-switch {
  position: relative;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.16);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.a11y-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: calc(1.35rem - 4px);
  height: calc(1.35rem - 4px);
  border-radius: 50%;
  background: var(--color-text);
  transition: inset-inline-start var(--transition-fast);
}

.a11y-toggle-row[aria-pressed="true"] .a11y-switch {
  background: var(--color-accent);
}

.a11y-toggle-row[aria-pressed="true"] .a11y-switch::after {
  inset-inline-start: calc(100% - 1.35rem + 2px);
  background: var(--color-ink);
}

.a11y-reset {
  margin-top: 0.8rem;
  padding: 0.6em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.a11y-reset:hover,
.a11y-reset:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-soft);
}

.a11y-statement-link {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-navy-2);
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hide the widget while the nav drawer or lightbox is open, to avoid
   overlapping those overlays. */
body.nav-open .a11y-toggle,
body.nav-open .a11y-panel {
  display: none;
}

/* Nudge the widget up above the mobile-only fixed action bar so the two
   never overlap (the same 64px gap between toggle and panel is kept). */
@media (max-width: 767px) {
  .a11y-toggle {
    bottom: calc(var(--mobile-bar-clearance) + 16px);
  }
  .a11y-panel {
    bottom: calc(var(--mobile-bar-clearance) + 80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-panel {
    transition: none;
  }
}

/* =========================================================================
   ACCESSIBILITY PREFERENCE OVERRIDES — applied via classes on <html> by
   the accessibility widget (script.js) and persisted in localStorage.
   ========================================================================= */
:root.a11y-high-contrast {
  --color-bg: #000000;
  --color-bg-alt: #000000;
  --color-surface: #0a0a0a;
  --color-surface-2: #141414;
  --color-text: #ffffff;
  --color-text-muted: #f2f2f2;
  --color-text-faint: #d8d8d8;
  --color-accent: #ffd166;
  --color-accent-soft: #ffe4a3;
  --color-line: rgba(255, 255, 255, 0.4);
  --color-line-soft: rgba(255, 255, 255, 0.25);
  --color-navy: #000000;
  --color-navy-2: #1a1a1a;
}

:root.a11y-emphasize-links a:not(.btn):not(.social-icon):not(.site-logo):not(.hero-scroll-cue) {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

:root.a11y-reduce-motion,
:root.a11y-reduce-motion *,
:root.a11y-reduce-motion *::before,
:root.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

:root.a11y-readable-font {
  --font-display: var(--font-body);
}

:root.a11y-readable-font body {
  line-height: 1.8;
}

:root.a11y-readable-font h1,
:root.a11y-readable-font h2,
:root.a11y-readable-font h3,
:root.a11y-readable-font h4 {
  letter-spacing: 0;
}

/* =========================================================================
   CONTACT PAGE (contact.html) — edge-integrated editorial split: details
   and actions one side, the counter photo filling the other half.
   No cards, no form, no pill UI — reuses the same tokens, buttons and
   eyebrow style as the homepage.

   Grid areas keep one DOM order for both layouts:
     mobile   info → media → extra   (useful details first, photo second)
     desktop  info | media           (RTL: info on the right, photo left)
              extra | media
   ========================================================================= */
.contact-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info"
    "media"
    "extra";
  max-width: var(--content-width-lg);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  gap: var(--space-4);
}

.contact-content {
  grid-area: info;
  max-width: 54ch;
}

.contact-media {
  grid-area: media;
  position: relative;
  /* Mobile: full-bleed — the negative margins cancel the section's side
     padding so the photo runs edge to edge instead of sitting as a card.
     4:3 keeps it well short of a full screen; the export is ~1.86, so cover
     trims ~14% off each side and the counter logo (51% x, 75% y of the
     frame) stays comfortably inside. */
  margin: var(--space-1) calc(var(--content-padding) * -1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-light);
}

.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 70%;
}

.contact-reservation {
  grid-area: extra;
}

.contact-content h1 {
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-1);
}

.contact-branch {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-text-muted);
}

.contact-details {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: 0.25rem;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line-soft);
}

.contact-detail-row dt {
  min-width: 6em;
  color: var(--color-text-faint);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.contact-detail-row dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--step-1);
}

.contact-detail-row dd a {
  transition: color var(--transition-fast);
}

.contact-detail-row dd a:hover,
.contact-detail-row dd a:focus-visible {
  color: var(--color-brand-deep);
}

/* The email address is too long for a phone at --step-1; step down and
   allow a break inside it rather than overflowing the column. */
.contact-detail-row .contact-email {
  font-size: var(--step-0);
  overflow-wrap: anywhere;
}

.contact-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-actions .btn {
  padding-inline: 1.6em;
}

.contact-actions .btn-outline:hover,
.contact-actions .btn-outline:focus-visible {
  color: var(--color-ink);
}

.contact-action-call .icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

/* Small decorative divider above the reservation prompt — the "subtle
   vertical accent line" from the reference, used sparingly. */
.contact-accent-line {
  width: 1px;
  height: 2.75rem;
  background: var(--color-accent);
  margin-bottom: var(--space-3);
}

.contact-reservation h2 {
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.contact-reservation p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.contact-quick-links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.contact-quick-links-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-inline-end: 0.4rem;
}

.contact-quick-links a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.contact-quick-links a:hover,
.contact-quick-links a:focus-visible {
  /* This section is on the light cream surface (see .contact-editorial
     above) — --color-accent-soft is tuned for dark backgrounds, so use
     the deepened brand orange here for readable contrast on cream. */
  color: var(--color-brand-deep);
}

.contact-quick-links span {
  color: var(--color-text-faint);
}

/* Tablets (single column but wide): a 4:3 photo would be ~580px tall at
   768px, so flatten to 16:9 — still full-bleed, logo still in frame. */
@media (min-width: 560px) and (max-width: 899px) {
  .contact-media {
    aspect-ratio: 16 / 9;
  }
}

/* Phones, and the narrow desktop text column (900-1199px): the call button
   spans the full width as the primary action, the two navigation buttons
   share the row below it. */
@media (max-width: 559px), (min-width: 900px) and (max-width: 1199px) {
  .contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .contact-actions .btn {
    padding-inline: 0.75em;
  }
  .contact-action-call {
    grid-column: 1 / -1;
  }
}

/* Desktop: the section becomes a full-bleed split. The text columns keep
   their own padding; the photo takes the whole left half (RTL end) and
   bleeds to the viewport edge and to the section's top and bottom, so it
   reads as half of the composition rather than a card beside the text. */
@media (min-width: 900px) {
  .contact-editorial {
    max-width: none;
    border-radius: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "info media"
      "extra media";
    gap: 0;
    align-items: start;
  }
  .contact-content,
  .contact-reservation {
    width: 100%;
    max-width: 44rem;
    justify-self: center;
    padding-inline: clamp(2rem, 3.5vw, 4rem);
  }
  /* Kept deliberately compact: the section's height sets the photo's
     proportion, and a tall text column would squeeze it into a narrow
     portrait that loses the width of the counter. */
  .contact-content {
    padding-top: var(--space-4);
  }
  .contact-details {
    margin-top: var(--space-2);
    gap: 0.75rem;
  }
  .contact-detail-row {
    padding-bottom: 0.75rem;
  }
  .contact-reservation {
    padding-top: var(--space-3);
    padding-bottom: var(--space-4);
  }
  .contact-accent-line {
    height: 2rem;
    margin-bottom: var(--space-2);
  }
  .contact-media {
    align-self: stretch;
    margin: 0;
    aspect-ratio: auto;
    min-height: 600px;
  }
  /* A single orange rule on the seam, level with the heading — ties the
     text column to the photo without framing the photo as a card. */
  .contact-media::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: calc(var(--space-4) + 0.4rem);
    width: 4px;
    height: clamp(4.5rem, 7vw, 6.5rem);
    background: var(--color-accent);
  }
}

/* =========================================================================
   JOBS PAGE (jobs.html)
   ========================================================================= */

/* Small decorative divider reused across the site's editorial sections. */
.accent-line-vertical {
  width: 1px;
  height: 2.75rem;
  background: var(--color-accent);
  margin-block: var(--space-3);
}

/* ---------- Jobs hero: one wide image, one centered heading ---------- */
.jobs-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.jobs-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jobs-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 5, 4, 0.55);
}

.jobs-hero-content {
  position: relative;
  z-index: 1;
  padding-inline: var(--content-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jobs-hero-content .eyebrow {
  text-align: center;
}

.jobs-hero-content h1 {
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Jobs intro: centered statement on the dark ground ---------- */
.jobs-intro {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--content-padding);
  text-align: center;
}

.jobs-intro h2 {
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

.jobs-intro p {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.jobs-intro p:last-child {
  margin-bottom: 0;
}

/* ---------- Application section: form + portrait image ---------- */
.jobs-application {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--content-width-lg);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  gap: var(--space-4);
}

.jobs-application-content h2 {
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.jobs-application-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.jobs-application-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .jobs-application {
    grid-template-columns: 1fr 0.9fr;
    align-items: start;
    gap: clamp(var(--space-6), 6vw, 7rem);
  }
  .jobs-application-media {
    aspect-ratio: 3 / 4;
    align-self: center;
  }
}

/* ---------- Jobs application form ----------
   No cards, no white boxes: transparent fields with a thin bottom
   border, integrated directly into the page like the reference. */
.jobs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.65em 0.2em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-faint);
}

.form-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239a8f7f' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.3em center;
  background-size: 1.1em;
  padding-inline-end: 1.8em;
}

.form-field select option {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-bottom-color: var(--color-accent);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-bottom-color: #e2726a;
}

.form-error {
  min-height: 1.1em;
  font-size: 0.8rem;
  color: #e2726a;
  margin: 0;
}

.form-error:empty {
  display: none;
}

.jobs-form-submit {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.jobs-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.jobs-form-privacy-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-faint);
  margin: 0;
}

.jobs-form-privacy-note a {
  color: inherit;
  text-decoration: underline;
}

.jobs-form-status {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line-soft);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

.jobs-form-status[hidden] {
  display: none;
}

.jobs-form-status--success {
  color: var(--color-success);
}

.jobs-form-status--error {
  color: #e2726a;
}

.jobs-form-status--error a {
  color: inherit;
  font-weight: 600;
}

/* =========================================================================
   STATIC PAGES (privacy / accessibility)
   ========================================================================= */
.static-page {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--content-padding);
  padding-top: calc(var(--header-height) + var(--space-5));
  padding-bottom: var(--space-6);
}

.static-page h1 {
  font-size: var(--step-3);
  margin-bottom: var(--space-2);
}

.static-page .page-updated {
  color: var(--color-text-faint);
  font-size: 0.85rem;
  margin-bottom: var(--space-5);
}

.static-page h2 {
  font-size: var(--step-1);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--color-accent-soft);
}

.static-page p,
.static-page li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.static-page ul {
  padding-inline-start: 1.4em;
  list-style: disc;
}

.static-page a {
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.static-page .back-home {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-text-faint);
  font-size: 0.9rem;
}

.static-page dl {
  margin: var(--space-2) 0;
}

.static-page dt {
  font-weight: 700;
  color: var(--color-text);
}

.static-page dd {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}

/* Warm "cream" content areas (Part 3 color pass): privacy.html,
   accessibility.html, contact.html and jobs.html all mark <body
   class="page-light"> — dense body text, contact details and the jobs
   form all just read better on a light surface, and it keeps the dark
   theme from being the site's *predominant* surface. Scoping the
   redefined tokens (and the light background) to <main> — a full-width
   sibling of the header/footer, not an ancestor — flips only the content
   between them, leaving the dark header/footer chrome untouched, and
   still lets a specific dark element inside main (jobs.html's photo
   hero, below) opt back out where it needs to. */
body.page-light main {
  background: var(--color-cream);
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-dark-muted);
  --color-text-faint: var(--color-text-dark-faint);
  --color-accent-soft: var(--color-brand-deep);
  --color-line: var(--color-border-light);
  --color-line-soft: var(--color-border-light-soft);
  color: var(--color-text);
}

/* jobs.html's hero is a full-bleed photo with its own dark overlay, not
   the cream surface above — it needs its light-on-dark text back. */
body.page-light .jobs-hero {
  --color-text: var(--color-text-light);
}

/* The jobs form's select-arrow icon and error/invalid color are baked
   into a fixed data-URI / hex value tuned for the dark theme — both fail
   contrast against cream, so give them light-surface equivalents here. */
body.page-light .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b5847' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.page-light .form-field select option {
  color: var(--color-text-light);
}

body.page-light .form-error {
  color: var(--color-error-on-light);
}

body.page-light .form-field input[aria-invalid="true"],
body.page-light .form-field select[aria-invalid="true"],
body.page-light .form-field textarea[aria-invalid="true"] {
  border-bottom-color: var(--color-error-on-light);
}

body.page-light .jobs-form-status--success {
  color: var(--color-success-on-light);
}

body.page-light .jobs-form-status--error {
  color: var(--color-error-on-light);
}