/* ============================================================
   BLOOM & ROSE — Main Stylesheet
   Brand colors: #000000 Black | #FFFFFF White | #DC0002 Red | #FFD500 Yellow
   ============================================================ */

/* === CSS VARIABLES === */
:root {
  --black:   #000000;
  --white:   #FFFFFF;
  --red:     #DC0002;
  --red-dk:  #b00001;
  --yellow:  #FFD500;
  --yellow-dk: #e6c000;

  --gray-50:  #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e8e8e8;
  --gray-300: #d0d0d0;
  --gray-500: #888;
  --gray-700: #444;
  --gray-900: #111;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --max-w:    1200px;
  --header-h: 80px;
  --strip-h:  120px;   /* sticky bottom bar height desktop */
  --strip-h-mobile: 86px; /* sticky bottom bar height mobile */
  --r:        8px;
  --r-lg:     16px;
  --shadow:   0 4px 24px rgba(0,0,0,.08);
  --shadow-md:0 10px 40px rgba(0,0,0,.13);
  --ease:     0.22s ease;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Reserve space for the fixed chrome once, page-wide: the header up top and the
     sticky info strip at the bottom. This is why WHATEVER section lands first clears
     the fixed header automatically — sections no longer each pad for the header. */
  padding-top: var(--header-h);
  padding-bottom: var(--strip-h);
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }

/* === CONTAINER === */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .025em;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease),
              box-shadow var(--ease), transform var(--ease), color var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-red:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(220,0,2,.32);
}

.btn-yellow {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
.btn-yellow:hover {
  background: var(--yellow-dk);
  border-color: var(--yellow-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255,213,0,.38);
}

.btn-outline {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-outline:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--black);
}

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.placeholder-img {
  background-color: var(--gray-200);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.placeholder-img .ph-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: var(--gray-500);
  font-style: italic;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  /* Hide ph-text when a real background-image is set via inline style */
  opacity: 1;
}
/* When a real image loads, the background-image covers the ph-text overlay.
   We keep the text in DOM so CSS fallback works; JS hides it on image load. */

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--red); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 14px;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--gray-700);
  margin-bottom: 32px;
  max-width: 560px;
}
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-head .section-sub { margin-left: auto; margin-right: auto; }


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.logo-wrap { display: flex; align-items: center; flex-shrink: 0; }
.site-logo {
  height: 56px;
  width: auto;
  display: block;
}

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  padding: 8px 13px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: var(--r);
  transition: color var(--ease), background var(--ease);
}
.nav-link:hover, .nav-link.active {
  color: var(--red);
  background: rgba(220,0,2,.06);
}
.nav-cta { margin-left: 8px; padding: 10px 20px; font-size: .88rem; }

/* Nav content items */
.nav-content-text {
  padding: 8px 13px;
  font-size: .85rem;
  color: var(--gray-500);
}
.nav-content-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  padding: 4px 8px;
}

/* Nav dropdown (category items — click to expand) */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
}
.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform var(--ease);
}
.nav-dropdown.open .nav-dropdown-toggle::after {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: 6px 0;
  z-index: 50;
}
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: .88rem;
  color: var(--gray-700);
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.nav-dropdown-item:hover {
  background: rgba(220,0,2,.06);
  color: var(--red);
}

/* Nav overflow — hamburger for 4+ items on desktop */
.nav-overflow {
  position: relative;
}
.nav-overflow-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 1px solid var(--gray-200);
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease);
}
.nav-overflow-toggle:hover {
  border-color: var(--red);
}
.nav-overflow-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
}
.nav-overflow-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 6px 0;
  z-index: 50;
  margin-top: 4px;
}
.nav-overflow.open .nav-overflow-menu {
  display: block;
}
.nav-overflow-menu .nav-link {
  display: block;
  padding: 10px 16px;
  border-radius: 0;
}
.nav-overflow-menu .nav-dropdown {
  padding: 0;
}
.nav-overflow-menu .nav-dropdown-toggle {
  display: block;
  padding: 10px 16px;
  width: 100%;
  text-align: left;
}
.nav-overflow-menu .nav-dropdown-menu {
  position: static;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--gray-200);
  border-radius: 0;
  padding-left: 16px;
}

/* Hamburger (mobile toggle) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  /* Header clearance now lives on <body> (padding-top: --header-h); this is just the
     hero's own top breathing room. Net result is unchanged: 80 + 72 = 152px, as before. */
  padding-top: 72px;
  padding-bottom: 72px;
  background: var(--white);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Text side */
.hero-content { display: flex; flex-direction: column; }
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--black);
  margin-bottom: 22px;
}
.hero-desc {
  font-size: 1.05rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Image side */
.hero-images { display: flex; flex-direction: column; gap: 14px; }
.img-hero-main {
  width: 100%;
  height: 400px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.img-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.img-hero-thumb {
  height: 185px;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
/* Overlay gradient so placeholder text stays readable */
.img-hero-main .ph-text,
.img-hero-thumb .ph-text,
.catering-img .ph-text {
  background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
}

/* ── Image Promo section (insertable) — REUSES the hero pattern ───────────────
   The copy and image cells carry the HERO's OWN classes, so the promo inherits the
   hero's exact typography, sizing, radius, shadow AND responsive breakpoints with
   zero duplication and WITHOUT modifying any hero rule:
     eyebrow  -> .eyebrow      heading -> .hero-tagline     body -> .hero-desc
     small    -> .img-hero-thumb  (one shared height for the whole row +
                                   the hero's 185/130/110 responsive steps)
     large    -> .promo-large     (keeps the per-instance 4:3 / 1:1 toggle)
   Only the promo-specific bits live below: the two-column grid, the N-column
   edge-aligned small row, the CTA placement, and <img> corner-clipping. */
.promo-section { padding: 72px 0; }
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;                 /* match .hero-inner */
  align-items: center;
}
/* Mirror variant: flip text<->images via direction; children keep normal flow. */
.promo-grid--reverse { direction: rtl; }
.promo-grid--reverse > * { direction: ltr; }
/* Text column stretches to the image column's height so the CTA can pin to its
   bottom edge. */
.promo-content { display: flex; flex-direction: column; align-self: stretch; }
/* CTA: horizontal row, pinned to the BOTTOM of the text column, aligned to the
   OUTER edge = the text's side — left for text-left, right for the mirror
   (text-right). btn1 red / btn2 outline (set by render). */
.promo-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: auto; justify-content: flex-start; }
.promo-grid--reverse .promo-btns { justify-content: flex-end; }
.promo-images { display: flex; flex-direction: column; gap: 14px; }   /* mirrors .hero-images */
.promo-large {                 /* large image keeps its per-instance 4:3 / 1:1 toggle */
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.promo-large--4x3 { aspect-ratio: 4 / 3; }
.promo-large--1x1 { aspect-ratio: 1 / 1; }
/* Small row: N columns, edge-aligned (repeat(N,1fr) set INLINE; gaps only BETWEEN
   cells, so the row spans the large image's width at ANY N). Each cell is a reused
   .img-hero-thumb -> ONE shared height for the whole row; object-fit:cover crops
   each image to fill -> uniform height, no distortion. */
.promo-small-grid { display: grid; gap: 14px; }
.promo-cell { overflow: hidden; }   /* clip the <img> to the reused cell's radius */
.promo-img { width: 100%; height: 100%; display: block; object-fit: cover; }  /* per-slot fit set inline */
.promo-img-ph { background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%); }
@media (max-width: 768px) {
  .promo-grid { grid-template-columns: 1fr; gap: 36px; }   /* match hero stack */
  .promo-grid--reverse { direction: ltr; }
  .promo-content { align-self: auto; }                     /* no stretch when stacked */
}
@media (max-width: 480px) {
  .promo-btns { flex-direction: column; }                  /* match .hero-btns @480 */
  .promo-btns .btn { width: 100%; }
  .section-cta { flex-direction: column; }                 /* inline CTA stacks too */
  .section-cta .btn { width: 100%; }
  .section-cta .cta-image-btn { width: 100%; max-width: none; }  /* image CTA fills the column too */
}


/* ============================================================
   INFO STRIP — sticky bottom bar
   ============================================================ */
.info-strip {
  background: var(--black);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.info-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.info-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 32px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.info-box:last-child { border-right: none; }

.info-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  color: var(--yellow);
}
.info-icon svg { width: 100%; height: 100%; }

.info-details { flex: 1; }

.info-primary {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 3px;
}
.info-secondary {
  font-size: .83rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}
.info-link {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  transition: color var(--ease);
}
.info-link:hover { color: var(--white); }

.info-phone {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--yellow);
  transition: color var(--ease);
}
.info-phone:hover { color: var(--white); }

/* Hours status badge */
.hours-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gray-500);
}
.status-dot.open      { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.status-dot.closed    { background: #ef4444; }
.status-dot.opens-soon{ background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,213,0,.35); }
.status-dot.closing   { background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.35); }

.status-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
}
.status-label.open       { color: #22c55e; }
.status-label.closed     { color: #ef4444; }
.status-label.opens-soon { color: var(--yellow); }
.status-label.closing    { color: #f97316; }


/* ============================================================
   MENU
   ============================================================ */
.menu-section {
  padding: 96px 0;
  background: var(--gray-50);
}

.menu-board {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 48px;
}

.menu-category {
  padding: 36px 40px;
  border-bottom: 1px solid var(--gray-200);
}
.menu-category:last-child { border-bottom: none; }

.cat-label {
  margin-bottom: 22px;
}
.cat-label span {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 99px;
}

.menu-list { display: flex; flex-direction: column; gap: 0; }
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--ease);
}
.menu-item:last-child { border-bottom: none; }

.mi-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mi-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--black);
}
.mi-desc {
  font-size: .82rem;
  color: var(--gray-500);
  max-width: 420px;
}
.mi-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--red);
  flex-shrink: 0;
  margin-left: 24px;
}

.menu-bottom-cta { text-align: center; }

/* ── ORDER PLATFORMS ── */
.order-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.order-platforms--bottom { margin-bottom: 0; margin-top: 0; }

.platform-direct { flex-shrink: 0; }

.platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r);
  padding: 8px 18px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  text-decoration: none;
}
.platform-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--gray-300);
}
.platform-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* ── FEATURED MENU CARDS ── */
.menu-featured {
  margin-bottom: 56px;
}
.menu-section-label {
  margin-bottom: 24px;
}
.menu-section-label span {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 99px;
}

.menu-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.menu-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform var(--ease), box-shadow var(--ease);
}
.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.mc-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-200);
  flex-shrink: 0;
}
.mc-img-placeholder {
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.mc-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.mc-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--black);
  line-height: 1.3;
}
.mc-price {
  font-weight: 700;
  font-size: .95rem;
  color: var(--red);
  flex-shrink: 0;
}
.mc-desc {
  font-size: .82rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 0;
}


/* ============================================================
   CATERING
   ============================================================ */
.catering-section {
  padding: 100px 0;
  background: var(--white);
}
.catering-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.catering-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--black);
  margin-bottom: 22px;
}
.catering-desc {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 14px;
}
.catering-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.catering-img {
  height: 500px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-section {
  background: var(--black);
  padding: 88px 0;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nl-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}
.nl-desc {
  font-size: .97rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
}

/* Form */
.nl-form { display: flex; flex-direction: column; gap: 10px; }
.nl-row { display: flex; gap: 12px; }
.nl-row input[type="email"] {
  flex: 1;
  padding: 13px 16px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-size: .93rem;
  font-family: var(--font-body);
  transition: border-color var(--ease);
}
.nl-row input[type="email"]::placeholder { color: rgba(255,255,255,.38); }
.nl-row input[type="email"]:focus { outline: none; border-color: var(--yellow); }

.nl-fine {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
}
.nl-msg {
  font-size: .88rem;
  font-weight: 500;
  min-height: 18px;
}
.nl-msg.success { color: #22c55e; }
.nl-msg.error   { color: #ef4444; }


/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
  padding: 100px 0;
  background: var(--gray-50);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
/* Form-only / info-only layout modes: single full-width column. The 'both'
   mode keeps the 1.5fr:1fr grid above (matches the homepage). */
.contact-inner--single { grid-template-columns: 1fr; }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-700);
}
.req    { color: var(--red); }
.optional { font-weight: 400; color: var(--gray-500); font-size: .82rem; }

.form-group input,
.form-group textarea {
  padding: 13px 15px;
  border: 2px solid var(--gray-300);
  border-radius: var(--r);
  font-size: .93rem;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  transition: border-color var(--ease);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-500); }

.form-msg { font-size: .88rem; font-weight: 500; min-height: 18px; }
.form-msg.success { color: #22c55e; }
.form-msg.error   { color: #ef4444; }

/* Sidebar */
.contact-aside {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  box-shadow: var(--shadow);
}
.aside-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin-bottom: 28px;
}
.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.contact-detail svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--red);
  margin-top: 3px;
}
.cd-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.cd-value {
  font-size: .92rem;
  color: var(--black);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
  transition: color var(--ease);
}
a.cd-value:hover { color: var(--red); }
/* Hours row: same icon+label+value layout as the other details, with a top
   separator. (Was .contact-hours-block; now carries a clock icon.) */
.contact-hours {
  border-top: 1px solid var(--gray-200);
  padding-top: 22px;
  margin-top: 4px;
}

/* ── Info-only layout (contact-inner--single): full-width treatment ──
   Only when the info block stands alone across the full width. Form+info
   (.contact-inner without --single) is untouched. Heading centers across the
   top; the 4 rows (email, phone, address, hours) sit in a balanced 2×2 grid
   with enlarged icons + text so they hold the space. */
.contact-inner--single .contact-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 48px;
  padding: 48px 56px;
}
.contact-inner--single .aside-title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 10px;
}
.contact-inner--single .contact-detail {
  margin-bottom: 0;          /* grid gap handles spacing */
  gap: 18px;
  align-items: center;
}
.contact-inner--single .contact-detail svg { width: 34px; height: 34px; margin-top: 0; }
.contact-inner--single .cd-label { font-size: .82rem; }
.contact-inner--single .cd-value { font-size: 1.18rem; }
.contact-inner--single .contact-hours {   /* no separator inside the grid */
  border-top: none; padding-top: 0; margin-top: 0;
}
@media (max-width: 768px) {
  /* Phone: the 2 columns would be cramped — collapse to one, ease the padding. */
  .contact-inner--single .contact-aside { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .contact-inner--single .aside-title { font-size: 1.7rem; }
  .contact-inner--single .contact-detail svg { width: 28px; height: 28px; }
  .contact-inner--single .cd-value { font-size: 1.08rem; }
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo-img {
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}
.footer-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  color: var(--yellow);
  margin-bottom: 6px;
}
.footer-tagline {
  font-size: .87rem;
  color: rgba(255,255,255,.48);
  line-height: 1.7;
}
.footer-col h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
  transition: color var(--ease);
}
.footer-col a:hover { color: var(--yellow); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: .8rem;
  color: rgba(255,255,255,.38);
}
.footer-legal-links { display: flex; align-items: center; gap: 12px; }
.footer-legal-links a { transition: color var(--ease); }
.footer-legal-links a:hover { color: var(--yellow); }


/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner         { gap: 40px; }
  .catering-inner     { gap: 40px; }
  .newsletter-inner   { gap: 40px; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 36px; }
  .menu-category      { padding: 28px 28px; }
}

/* ============================================================
   RESPONSIVE — 768px (tablet/mobile)
   ============================================================ */
@media (max-width: 768px) {
  :root { --header-h: 68px; }
  body { padding-bottom: var(--strip-h-mobile); }

  /* Sticky bar mobile: hours only */
  .info-strip-inner { grid-template-columns: 1fr; }
  .info-strip .info-box:nth-child(2),
  .info-strip .info-box:nth-child(3) { display: none; }
  .info-strip .info-box { padding: 16px 24px; }
  /* Compact hours layout on mobile */
  .info-strip .info-box .info-icon { width: 36px; height: 36px; }
  .info-strip .info-box .info-primary { font-size: .88rem; }
  .info-strip .info-box .info-secondary { display: none; }

  /* Nav — mobile slide-down */
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    padding: 12px 20px 20px;
    border-top: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    gap: 4px;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--ease), opacity var(--ease);
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-link { padding: 12px 16px; font-size: .97rem; }
  .nav-cta  { margin-left: 0; text-align: center; justify-content: center; margin-top: 4px; }

  /* Mobile: show all overflow items inline (no separate hamburger) */
  .nav-overflow { display: contents; }
  .nav-overflow-toggle { display: none; }
  .nav-overflow-menu { display: contents; }
  .nav-overflow-menu .nav-link { display: block; border-radius: var(--r); }

  /* Mobile: dropdown menus stack instead of absolute */
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--gray-200);
    padding-left: 16px;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }

  /* Hero */
  .hero-section { padding-top: 44px; padding-bottom: 0; } /* body reserves --header-h (68 here); net 68+44=112, unchanged */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-images { order: -1; }
  .img-hero-main  { height: 280px; }
  .img-hero-thumb { height: 130px; }

  /* Info strip */
  .info-strip-inner {
    grid-template-columns: 1fr;
  }
  .info-box {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 28px 24px;
  }
  .info-box:last-child { border-bottom: none; }

  /* Menu */
  .menu-section { padding: 72px 0; }
  .menu-category { padding: 24px 20px; }
  .menu-cards { grid-template-columns: repeat(2, 1fr); }
  .order-platforms { gap: 10px; }

  /* Catering */
  .catering-section { padding: 72px 0; }
  .catering-inner { grid-template-columns: 1fr; gap: 36px; }
  .catering-img { height: 300px; order: -1; }

  /* Newsletter */
  .newsletter-section { padding: 64px 0; }
  .newsletter-inner   { grid-template-columns: 1fr; gap: 32px; }
  .nl-row { flex-direction: column; }

  /* Contact */
  .contact-section { padding: 72px 0; }
  .contact-inner   { grid-template-columns: 1fr; gap: 36px; }
  .form-row-2      { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 40px; }
  .footer-bottom  { flex-direction: column; gap: 10px; text-align: center; }
}

/* ============================================================
   RESPONSIVE — 480px (small phones)
   ============================================================ */
@media (max-width: 480px) {
  .container       { padding: 0 18px; }
  .hero-tagline    { font-size: 2.3rem; }
  .hero-btns       { flex-direction: column; }
  .hero-btns .btn  { width: 100%; }
  .catering-btns   { flex-direction: column; }
  .catering-btns .btn { width: 100%; }
  .footer-grid     { grid-template-columns: 1fr; }
  .section-title   { font-size: 1.8rem; }
  .img-hero-thumb  { height: 110px; }
  .menu-cards      { grid-template-columns: 1fr; }
  .order-platforms { flex-direction: column; align-items: stretch; }
  .platform-direct, .platform-badge { text-align: center; justify-content: center; }
  .platform-badge svg { width: 100%; height: auto; }
}

/* ============================================================
   ORDER TOAST
   ============================================================ */
.order-toast {
  position: fixed;
  bottom: calc(var(--strip-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--black);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--r);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 900;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  flex-wrap: wrap;
  justify-content: center;
}
.order-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.order-toast-link {
  color: var(--yellow);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.order-toast-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0 0 8px;
  opacity: .6;
  cursor: pointer;
}
.order-toast-close:hover { opacity: 1; }

@media (max-width: 480px) {
  .order-toast { bottom: calc(var(--strip-h-mobile) + 12px); font-size: .82rem; }
}

/* ============================================================
   CONTENT SECTIONS — CMS-generated page layouts
   ============================================================ */

/* Base section */
.content-section {
  padding: 64px 0;
}
.content-section + .content-section {
  padding-top: 0;
}
.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--black);
  margin-bottom: 28px;
  line-height: 1.2;
}
.section-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  max-width: 740px;
}
.section-body p + p { margin-top: 1em; }

/* Full-width text */
.layout-full-text .section-body { max-width: 100%; }

/* Two-column text */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.col-panel h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.col-panel p { line-height: 1.8; color: #333; }

/* Image + Text grids */
.img-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.img-text-grid--reverse {
  direction: rtl;
}
.img-text-grid--reverse > * { direction: ltr; }

.section-img-wrap { overflow: hidden; border-radius: var(--r); }
.section-img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.section-text-wrap .section-heading { margin-top: 0; }

/* Image Banner */
.layout-banner {
  background-size: cover;
  background-position: center;
  padding: 0;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.banner-overlay {
  width: 100%;
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 100%);
}
.banner-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.15;
}
.banner-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  line-height: 1.6;
}

/* Two images + text */
.two-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.img-cell { display: flex; flex-direction: column; gap: 10px; }
.img-caption { font-size: .88rem; color: #666; text-align: center; }
.section-footer-text { font-size: 1rem; line-height: 1.8; color: #333; }

/* Text + two stacked images */
.text-two-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.two-img-stack { display: flex; flex-direction: column; gap: 16px; }

/* CTA block */
.cta-block {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 0;
}
.cta-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 16px;
}
.cta-sub {
  font-size: 1.05rem;
  color: #444;
  margin-bottom: 32px;
  line-height: 1.7;
}
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 2px solid var(--black);
  color: var(--black);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .5px;
  border-radius: var(--r);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--black); color: var(--white); }

/* Inline section CTA — the shared renderCtaButtons() component when used inside a
   section (newsletter/contact above the form; insertable text/image blocks).
   Positional buttons: 1st .btn-red, 2nd .btn-outline. Left-aligned row, stacks
   on mobile (see @480). Only rendered when ctaEnabled is set, so existing
   sections are unaffected. */
.section-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* Clickable-image CTA button (image acts as the button, e.g. an ezCater badge).
   Capped to a button-ish width so it sits with text buttons in the row; the
   image fills that width. Full width when the CTA stacks (see mobile rule). */
.cta-image-btn { display: inline-block; line-height: 0; max-width: 240px; }
.cta-image-btn img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* On the dark newsletter panel a black outline button would vanish — flip the
   outline to light there. (The primary .btn-red already reads on dark.) */
.newsletter-inner .section-cta { margin-bottom: 8px; }
.newsletter-inner .section-cta .btn-outline { border-color: var(--white); color: var(--white); }
.newsletter-inner .section-cta .btn-outline:hover { background: var(--white); color: var(--black); }

/* Raw HTML block (inserted via HTML modal) */
.raw-html-block { margin: 24px 0; }

/* ── Rich-text overflow safety ───────────────────────────────────────────────
   Content sections carry CKEditor / hand-authored rich text (fullText,
   twoColText bodies, etc.). Guard against horizontal page scroll on small
   screens: long words and pasted URLs wrap, grid text cells may shrink below
   their content, and wide tables become their own horizontal-scroll container
   (CKEditor wraps tables in <figure class="table">). overflow-wrap is inherited,
   so setting it on the section cascades to all its text. */
.content-section { overflow-wrap: break-word; }
.col-panel, .section-text-wrap, .section-body { min-width: 0; }
.content-section figure.table { max-width: 100%; overflow-x: auto; }
.content-section table { max-width: 100%; }

/* ── Mini rich-text: named styles + content headings ─────────────────────────
   Classes applied by the editor's "Styles" dropdown. Defined here so they render
   identically on the public page AND inside CKEditor (which loads this file), and
   stay tied to the type tokens/scale (no baked px, no drift). em-relative sizes
   preserve the responsive base rather than freezing a pixel value. */
.text-display { font-family: var(--font-display); }
.text-large   { font-size: 1.2em; }
.text-small   { font-size: 0.85em; }

/* ── Badhorse accent faces (self-hosted, lazy) ───────────────────────────────
   Hashed filenames = immutable URLs (cache-busting without a build-pipeline
   change; swap = new file + new line here). font-display:swap, no preload — it's
   an accent, so the browser only fetches a face when text actually uses it.
   Loaded by both the public page and the editor (this file), so WYSIWYG matches.
   Retained OpenType alternates (salt/ss01/ss02[/ss03-05]) verified post-subset. */
@font-face {
  font-family: 'Badhorse';
  src: url('/fonts/badhorse-regular-ba9440c1.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Badhorse Script';
  src: url('/fonts/badhorse-script-f52fc2e0.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* One source of truth per face: the heading class (.font-badhorse, applied by the
   "Heading font" select) and the inline class (.text-script, applied by the editor
   "Styles" dropdown) share the same family + feature settings. Fallback to the
   default display font if the accent fails to load. */
.font-badhorse, .text-script {
  font-family: 'Badhorse', var(--font-display);
  font-feature-settings: "salt" 1, "ss01" 1, "ss02" 1, "dlig" 1;
}
.font-badhorse-script, .text-script-cursive {
  font-family: 'Badhorse Script', var(--font-display);
  font-feature-settings: "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss05" 1, "dlig" 1;
}

/* On-brand styling for BARE headings the mini editor emits (H2/H3/H4), scoped to
   the rich-text containers. :not([class]) targets ONLY editor headings, never the
   class-bearing ones (.section-heading, .col-panel h3, …), so existing headings
   are untouched. No color (inherits the container, so it works on light or dark).
   clamp() keeps them responsive. */
.section-text-wrap :is(h2, h3, h4):not([class]),
.section-footer-text :is(h2, h3, h4):not([class]),
.hero-desc :is(h2, h3, h4):not([class]) {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
.section-text-wrap h2:not([class]), .section-footer-text h2:not([class]), .hero-desc h2:not([class]) { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.section-text-wrap h3:not([class]), .section-footer-text h3:not([class]), .hero-desc h3:not([class]) { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.section-text-wrap h4:not([class]), .section-footer-text h4:not([class]), .hero-desc h4:not([class]) { font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* Responsive — collapse grids on mobile */
@media (max-width: 700px) {
  .two-col-grid,
  .img-text-grid,
  .text-two-img-grid,
  .two-img-row { grid-template-columns: 1fr; }
  .img-text-grid--reverse { direction: ltr; }
}

/* ============================================================
   INFO STRIP — Position variants (CMS section builder)
   ============================================================ */

/* Static: flows in page like a normal section */
.info-strip--static {
  position: static;
  width: 100%;
}

/* Fixed to top of viewport */
.info-strip--top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
}
/* Push body content down when top strip is present */
body:has(.info-strip--top) { padding-top: var(--strip-h, 90px); }

/* Fixed to bottom of viewport */
.info-strip--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
}
body:has(.info-strip--bottom) { padding-bottom: var(--strip-h, 90px); }

/* Multiple strips — second bottom strip stacks above first */
.info-strip--bottom + .info-strip--bottom { bottom: var(--strip-h, 90px); }

/* CMS icon inline (material icons inserted via CMS) */
.cms-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.cms-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}