/*
Theme Name: Catering Amsterdam
Theme URI: https://cateringamsterdam.example/
Author: Catering Amsterdam
Description: A lightweight block-free redesign theme for Catering Amsterdam, built pixel-perfect from the Zing Figma design system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cateringamsterdam
*/

/* ==========================================================================
   Fonts (self-hosted, subset woff2)
   ========================================================================== */
/* Work Sans: one VARIABLE file serves every weight (the four former static URLs were byte-identical copies). */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/work-sans-400.woff2") format("woff2"); }
/* Source Serif 4 upright = the VARIABLE font (wght 400-600 + opsz 8-60, latin).
   Figma renders it with automatic optical sizing, so a 56px h1 uses the narrow,
   high-contrast display cut; static instances rendered every heading ~14% wider
   (home h1 line 1: 769px vs Figma 670). font-optical-sizing:auto is the default. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/source-serif-4-var.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/source-serif-4-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Domine"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/domine-400.woff2") format("woff2"); }

/* ==========================================================================
   Design tokens (Figma: Zing V2 — file wtK3c0trP92HkAy3DDColp)
   ========================================================================== */
:root {
  /* Brand */
  --zing-green: #3B6D11;      /* Brand/800, Zing green */
  --zing-green-900: #2F5512;  /* Brand/900 */
  --zing-green-600: #55A709;  /* Brand/600 */
  /* Warm brown ramp */
  --warm-brown-900: #5C3927;
  --warm-brown-700: #8C5A2E;
  --warm-brown-500: #B78A3B;
  --warm-brown-200: #E4D4A4;
  --warm-brown-100: #F1EAD0;
  --warm-brown-50:  #F9F7ED;
  /* Near-black ramp */
  --near-black:     #1B1B1B;  /* 950 */
  --near-black-900: #3D3D3D;
  --near-black-600: #5D5D5D;
  --near-black-500: #6D6D6D;
  --near-black-300: #B0B0B0;
  --near-black-200: #D1D1D1;
  --near-black-100: #E7E7E7;
  --near-black-50:  #F6F6F6;
  /* Neutrals */
  --warm-off-white: #F7F5F0;
  --white: #FFFFFF;

  /* Type families */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-domine: "Domine", Georgia, serif;
  --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --wd-maxw: 1440px;   /* design frame width */
  --wd-gutter: 80px;   /* section horizontal padding */
  --wd-content: 1280px;/* inner content width (1440 - 2*80) */
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--near-black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-family: var(--font-serif); font-size: 56px; font-weight: 600; line-height: 1.0; }
h2 { font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1.1; }
h3 { font-family: var(--font-domine); font-size: 32px; font-weight: 400; line-height: 1.0; }
h4 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.0; }
p  { margin: 0; }

/* Section scaffold: full-bleed section, 1280 content centered with 80 gutters */
.wd-section { width: 100%; }
.wd-inner { max-width: var(--wd-maxw); margin: 0 auto; padding-left: var(--wd-gutter); padding-right: var(--wd-gutter); }

/* ==========================================================================
   Buttons (pills, radius 100)
   ========================================================================== */
.wd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 100px; font-family: var(--font-sans); font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.wd-btn--primary { background: var(--zing-green); color: var(--white); font-size: 18px; line-height: 1.5; padding: 16px 22px; }
.wd-btn--primary:hover { background: var(--zing-green-900); }
.wd-btn--outline { background: transparent; border-color: var(--near-black); color: var(--near-black); font-size: 14px; line-height: 1.4; padding: 9px 15px; gap: 4px; } /* Figma 113:560: 40 tall, stroke inside — the 1px border is absorbed by the padding (header = 73, not 74). */
.wd-btn--outline:hover { background: var(--near-black); color: var(--white); }
.wd-btn--ghost { background: transparent; border-color: var(--white); color: var(--white); font-size: 14px; line-height: 1.2; padding: 10px 14px; }
.wd-btn--ghost:hover { background: rgba( 255, 255, 255, 0.15 ); }

/* ==========================================================================
   Logo (single Figma-exported SVG, 99x41)
   ========================================================================== */
.ca-logo { display: block; flex: 0 0 auto; line-height: 0; }
.ca-logo img { width: 99px; height: 41px; }

/* ==========================================================================
   Site header (134:157)
   ========================================================================== */
.site-header { background: var(--warm-off-white); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--wd-gutter); max-width: var(--wd-maxw); margin: 0 auto; }
.main-nav ul { display: flex; gap: 44px; align-items: center; list-style: none; margin: 0; padding: 0; }
.main-nav a { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black); text-decoration: none; }
.main-nav a:hover { color: var(--zing-green); }

/* On desktop the collapse wrapper is transparent, so nav + actions lay out as
   direct children of the header row (logo · nav · actions). On mobile it becomes
   the drawer (see the ≤768 block). */
.site-header__collapse { display: contents; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.site-header__lang { position: relative; }
.site-header__lang-current { display: inline-flex; align-items: center; color: var(--near-black); cursor: pointer; list-style: none; }
.site-header__lang-current::-webkit-details-marker { display: none; }
.site-header__lang-current:hover { opacity: 0.8; }
.site-header__lang[open] .site-header__chev svg { transform: rotate(180deg); }
/* The other site's language, under the flag. */
.site-header__lang-menu { position: absolute; top: 100%; right: 0; z-index: 20; min-width: 160px; margin: 4px 0 0; padding: 8px; list-style: none; background: var(--white); border: 1px solid var(--near-black-100); border-radius: 8px; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 ); }
.site-header__lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--near-black); text-decoration: none; white-space: nowrap; }
.site-header__lang-menu a:hover,
.site-header__lang-menu a:focus-visible { background: var(--warm-off-white); }
/* Language changer (Figma style guide 380:13166): 24px round flag of the current site + chevron in a 40px box. */
.site-header__flag { display: flex; flex-direction: column; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: 0 0 24px; }
.site-header__flag span { flex: 1 1 0; }
.site-header__flag span:nth-child(1) { background: #be0020; }
.site-header__flag span:nth-child(2) { background: var(--white); }
.site-header__flag span:nth-child(3) { background: #0f4791; }
.site-header__chev { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
/* English flag (EN site's current flag; NL site's menu option): a simple round Union
   flag (white + red cross on navy). TODO(design): confirm — the design system only has the NL variant. */
.site-header__flag--en { position: relative; background: #012169; }
.site-header__flag--en span { display: none; }
.site-header__flag--en::before,
.site-header__flag--en::after { content: ""; position: absolute; inset: 0; }
.site-header__flag--en::before { background: linear-gradient( var(--white), var(--white) ) center / 100% 34% no-repeat, linear-gradient( var(--white), var(--white) ) center / 34% 100% no-repeat; }
.site-header__flag--en::after { background: linear-gradient( #c8102e, #c8102e ) center / 100% 18% no-repeat, linear-gradient( #c8102e, #c8102e ) center / 18% 100% no-repeat; }
.site-header__chev svg { width: 24px; height: 24px; }

/* Hamburger — hidden on desktop, shown at ≤768 (Figma icon/burger, 24px, 2.5
   stroke). Swaps to a close (X) icon when the drawer is open. */
.site-header__toggle { display: none; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; color: var(--near-black); }
.site-header__icon { display: block; width: 24px; height: 24px; }
.site-header__icon--close { display: none; }
.site-header.is-nav-open .site-header__icon--open { display: none; }
.site-header.is-nav-open .site-header__icon--close { display: block; }

/* Accessible-hidden label (visually hidden, still read by screen readers). */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Breadcrumb (Frame 53)
   ========================================================================== */
.wd-breadcrumb { background: var(--white); }
.wd-breadcrumb__inner { display: flex; align-items: center; gap: 8px; padding: 16px var(--wd-gutter); max-width: var(--wd-maxw); margin: 0 auto; list-style: none; }
.wd-breadcrumb__inner li { display: inline-flex; align-items: center; }
.wd-breadcrumb a, .wd-breadcrumb span { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--near-black-600); text-decoration: none; }
.wd-breadcrumb a:hover { color: var(--zing-green); }
.wd-breadcrumb [aria-current="page"] { color: var(--near-black); }
.wd-breadcrumb__sep { display: inline-flex; width: 24px; height: 24px; color: var(--near-black-300); flex: 0 0 auto; }

/* Accessible tap targets (Lighthouse target-size): the carousel dots are 24x24
   buttons (min touch size) with the visible 8px dot drawn by ::before, so the
   clickable box meets the 24px minimum without enlarging the dot. See the dot
   rules in the mobile carousel media queries below. */

/* ==========================================================================
   Info / trust bar (home) — MOBILE-FIRST (Figma 466:46409 base, 158:2286 ≥769)
   Mobile: rating row → full-width divider → big-number stat columns.
   Desktop: one centered inline row, short vertical dividers between items.
   ========================================================================== */
.wd-info { background: var(--white); }
.wd-info__inner { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 24px var(--wd-gutter); }
.wd-info__rating { display: flex; gap: 8px; align-items: center; }
.wd-info__stars { display: inline-flex; gap: 2px; color: var(--zing-green); }
.wd-info__star { display: block; width: 16px; height: 16px; }
.wd-info__rating-text { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--near-black); white-space: nowrap; }
.wd-info__divider { width: 100%; height: 1px; background: var(--near-black-200); }
.wd-info__stats { display: flex; gap: 32px; align-items: stretch; justify-content: center; width: 100%; }
.wd-info__stat { display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 0; text-align: center; }
.wd-info__num { font-family: var(--font-sans); font-weight: 500; font-size: 24px; line-height: 1.5; color: var(--near-black); white-space: nowrap; }
.wd-info__label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--near-black); }
.wd-info__stat-sep { width: 1px; background: var(--near-black-200); align-self: stretch; flex: 0 0 1px; }

@media ( min-width: 769px ) {
  /* One centered inline row: rating · stat · stat, thin vertical dividers. */
  .wd-info__inner { flex-direction: row; flex-wrap: wrap; gap: 48px; max-width: var(--wd-maxw); margin: 0 auto; }
  .wd-info__star { width: 18px; height: 18px; }
  .wd-info__rating-text { font-size: 16px; line-height: 1.2; }
  .wd-info__divider { width: 1px; height: 12px; }
  .wd-info__stats { display: contents; }
  .wd-info__stat { flex-direction: row; gap: 4px; align-items: baseline; }
  .wd-info__num, .wd-info__label { font-size: 16px; line-height: 1.2; }
  .wd-info__label { white-space: nowrap; }
  .wd-info__stat-sep { height: 12px; align-self: center; }
}

/* ==========================================================================
   Local cards (home) — MOBILE-FIRST (Figma 466:46457 base, 158:2406 ≥769)
   Eyebrow + heading, then two big image cards. Mobile: stacked. Desktop: row.
   ========================================================================== */
.wd-local { background: var(--warm-off-white); }
.wd-local__inner { display: flex; flex-direction: column; gap: 24px; padding: 48px var(--wd-gutter); }
.wd-local__head { display: flex; flex-direction: column; gap: 16px; }
.wd-local__eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 1.5; text-transform: uppercase; color: var(--warm-brown-700); }
.wd-local__head h2 { color: var(--near-black); }
.wd-local__cards { display: flex; flex-direction: column; gap: 24px; }
.wd-local__card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wd-local__img { border-radius: 16px; overflow: hidden; aspect-ratio: 628 / 290; }
.wd-local__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wd-local__body { display: flex; flex-direction: column; gap: 8px; }
.wd-local__title { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1; color: var(--near-black); margin: 0; }
.wd-local__text { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--near-black-600); }

@media ( min-width: 769px ) {
  .wd-local__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); gap: 48px; }
  /* Heading centers on desktop (mobile keeps it left) — matches Figma 158:2406. */
  .wd-local__head { align-items: center; text-align: center; }
  .wd-local__cards { flex-direction: row; gap: 24px; }
  .wd-local__card { flex: 1 1 0; }
}

/* ==========================================================================
   Subcategory menu index (ca/menu-cards) — MOBILE-FIRST (Figma 466:47273 base,
   355:8217 >=769). Heading + intro, a row of image/title link cards, closing
   note. Same carousel chrome as ca/catering-options for site consistency:
   DESKTOP = static grid (no arrows/dots); MOBILE = scroll-snap carousel with
   overlay prev/next arrows + pagination dots. Cards link to the leaf menus.
   ========================================================================== */
.wd-subcat { background: var(--warm-off-white); }
.wd-subcat__inner { display: flex; flex-direction: column; gap: 16px; padding: 48px var(--wd-gutter); }
.wd-subcat__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wd-subcat__head h2 { color: var(--near-black); }
.wd-subcat__intro { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--near-black-600); }
.wd-subcat__carousel { position: relative; width: 100%; }
.wd-subcat__track { display: flex; gap: 16px; width: 100%; }
.wd-subcat__card { flex: 0 0 84%; min-width: 0; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: center; text-decoration: none; color: inherit; }
.wd-subcat__img { border-radius: 14px; overflow: hidden; aspect-ratio: 300 / 310; }
.wd-subcat__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wd-subcat__title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1; color: var(--near-black); margin: 0; }
/* Arrows: overlay left/right, mobile-only (matches .wd-options__nav). */
.wd-subcat__nav { display: none; align-items: center; justify-content: center; position: absolute; top: 40%; transform: translateY(-50%); width: 40px; height: 40px; padding: 8px; border-radius: 1000px; background: var(--white); border: 0; box-shadow: 0 2px 3px rgba( 0, 0, 0, 0.14 ); color: var(--near-black); cursor: pointer; z-index: 2; transition: opacity 0.2s ease; }
.wd-subcat__nav svg { width: 24px; height: 24px; }
.wd-subcat__nav--prev { left: 8px; }
.wd-subcat__nav--next { right: 8px; }
.wd-subcat__nav:disabled { opacity: 0; pointer-events: none; cursor: default; }
.wd-subcat__dots { display: none; }
.wd-subcat__outro { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--near-black-600); }

@media ( min-width: 769px ) {
  /* Static grid — cards fill the row, no carousel chrome (like catering-options). */
  .wd-subcat__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); gap: 48px; }
  .wd-subcat__head { padding: 0 40px; }
  .wd-subcat__carousel { padding: 0 40px; } /* Figma 355:8240: cards inset 40 like the heading (282px cards at 1440). */
  .wd-subcat__intro { font-size: 16px; max-width: 720px; }
  /* 4 cards fill the row exactly (a static grid); a 5th+ overflows into a
     horizontal scroll and JS reveals the overlay arrows (.is-scrollable). */
  .wd-subcat__track { gap: 24px; overflow-x: auto; scroll-padding-left: var(--wd-gutter); scrollbar-width: none; }
  .wd-subcat__track::-webkit-scrollbar { display: none; }
  .wd-subcat__card { flex: 0 0 calc((100% - 3 * 24px) / 4); }
  .wd-subcat__title { font-size: 24px; }
  .wd-subcat__carousel.is-scrollable .wd-subcat__nav { display: flex; }
  .wd-subcat__outro { text-align: center; font-size: 16px; padding: 0 40px; }
}

@media ( max-width: 768px ) {
  /* Swipeable carousel: one card with the next peeking, native scroll-snap for
     touch, overlay arrows + pagination dots (matches ca/catering-options). */
  .wd-subcat__track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--wd-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wd-subcat__track::-webkit-scrollbar { display: none; }
  .wd-subcat__nav { display: flex; }
  .wd-subcat__dots { display: flex; gap: 1px; justify-content: center; width: 100%; }
  .wd-subcat__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .wd-subcat__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--near-black-300); transition: background 0.2s ease; }
  .wd-subcat__dot.is-active::before { background: var(--near-black); }
}

/* ==========================================================================
   Hero (V3 — 328:6074)
   ========================================================================== */
.wd-hero { position: relative; min-height: 851px; display: flex; flex-direction: column; justify-content: flex-end; padding: 160px var(--wd-gutter) 64px; overflow: hidden; } /* Figma V3: fixed 851 frame, text bottom-aligned — long copy grows UP (a 432px top pad made it grow down: Staff 973px). */
.wd-hero__bg { position: absolute; inset: 0; z-index: 0; }
.wd-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.wd-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.08) 89.2%, rgba(0,0,0,0.09) 100%); }
.wd-hero__content { position: relative; z-index: 1; max-width: var(--wd-content); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; color: var(--white); }
.wd-hero__text { display: flex; flex-direction: column; gap: 16px; }
.wd-hero h1 { color: var(--white); max-width: 861px; }
.wd-hero__desc { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; max-width: 565px; }
.wd-hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wd-hero__eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--warm-brown-200); }

/* Hero — side layout (V5 328:5255): left text column over a left-to-right dark gradient */
.wd-hero--side { min-height: 0; justify-content: center; padding: 100px var(--wd-gutter); }
.wd-hero--side .wd-hero__bg::after { background: linear-gradient(90deg, rgb(53,30,19) 39%, rgba(53,30,19,0) 80%); }
.wd-hero--side .wd-hero__content { max-width: var(--wd-content); }
.wd-hero--side .wd-hero__text { max-width: 514px; }

/* Hero — blog layout (V4 237:4540): cream text column + image, dark text, no
   overlay. Mobile: image banner on top, cream text below. Desktop: text left
   on cream, image right. */
.wd-hero--blog { min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.wd-hero--blog .wd-hero__bg { position: relative; inset: auto; height: 260px; flex: 0 0 auto; }
.wd-hero--blog .wd-hero__bg img { height: 100%; object-position: center top; }
.wd-hero--blog .wd-hero__bg::after { display: none; }
.wd-hero--blog .wd-hero__content { position: static; z-index: auto; background: var(--warm-brown-100); color: var(--near-black); max-width: none; width: 100%; margin: 0; padding: 40px var(--wd-gutter); gap: 16px; }
.wd-hero--blog h1 { color: var(--near-black); font-size: 32px; line-height: 1.1; max-width: none; }
.wd-hero--blog .wd-hero__eyebrow { color: var(--warm-brown-700); }
.wd-hero--blog .wd-hero__desc { color: var(--near-black-600); max-width: 500px; }
@media ( min-width: 769px ) {
	/* Cap the hero height so a portrait photo / long intro doesn't make it huge.
	   Content column is fixed; image fills the rest and is cropped to the cap. */
	.wd-hero--blog { flex-direction: row-reverse; align-items: stretch; max-height: 520px; }
	.wd-hero--blog .wd-hero__bg { height: auto; flex: 1 1 0; min-width: 0; }
	.wd-hero--blog .wd-hero__content { flex: 0 0 560px; padding: 56px 64px; justify-content: center; overflow: hidden; }
	.wd-hero--blog h1 { font-size: 40px; }
	.wd-hero--blog .wd-hero__desc { font-size: 16px; }
}

/* Home hero (V3 158:2278) desktop pixel pass. Home-scoped so the shared service
   hero — taller, with body copy — keeps its 851px default. Mobile-first: only
   overrides at >=769, so the mobile hero rules below still own small screens.
   Deltas vs default: shorter frame (comp is 728, not 851), tighter eyebrow->h1
   gap (8), and the second (ghost) button matches the primary's 18px size.
   Buttons = Figma "Size=2xl" (59 tall; 16x22 padding + 2px text padding, stroke
   inside): .wd-btn's 1px border sits outside the padding, so pad 15x23 to land
   on 59 x (text + 48) exactly. */
@media ( min-width: 769px ) {
  .home .wd-hero:not(.wd-hero--side) { min-height: 728px; }
  .home .wd-hero__text { gap: 8px; }
  .home .wd-hero:not(.wd-hero--side) .wd-btn--primary,
  .home .wd-hero:not(.wd-hero--side) .wd-btn--ghost { font-size: 18px; line-height: 1.5; padding: 15px 23px; }
}

/* ==========================================================================
   Section heading (shared: heading + subheading, optional side button)
   ========================================================================== */
.wd-sec-head { display: flex; gap: 16px; align-items: flex-start; justify-content: center; width: 100%; max-width: var(--wd-content); }
.wd-sec-head__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wd-sec-head__sub { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); max-width: 704px; }
.wd-sec-head--center { flex-direction: column; align-items: stretch; text-align: center; }
.wd-sec-head--center .wd-sec-head__text { align-items: center; }
.wd-sec-head--center .wd-sec-head__sub { max-width: none; }

/* ==========================================================================
   Catering options (485:14206)
   ========================================================================== */
.wd-options { background: var(--warm-off-white); }
.wd-options__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.wd-options__carousel { position: relative; width: 100%; max-width: var(--wd-content); }
.wd-options__grid { display: flex; gap: 24px; align-items: stretch; width: 100%; }
/* Nav arrows: hidden on desktop (all cards visible); shown as the mobile carousel controls. */
.wd-options__nav { display: none; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 8px; border-radius: 1000px; background: var(--white); border: 0; box-shadow: 0 2px 3px rgba(0,0,0,0.14); color: var(--near-black); cursor: pointer; z-index: 2; }
.wd-options__nav svg { width: 24px; height: 24px; }
.wd-options__nav--prev { left: 8px; }
.wd-options__nav--next { right: 8px; }
.wd-options__nav { transition: opacity 0.2s ease; }
.wd-options__nav:disabled { opacity: 0; pointer-events: none; cursor: default; }
/* Dots + bottom CTA are mobile carousel chrome — hidden on desktop, where every
   card is visible and the hero's quote button already covers the CTA. */
.wd-options__dots, .wd-options__cta { display: none; }
.wd-opt-card { flex: 1 0 0; min-width: 0; background: var(--white); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 550px; }
.wd-opt-card__img { height: 310px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; }
.wd-opt-card__img img { width: 100%; height: 100%; object-fit: cover; }
a.wd-opt-card { text-decoration: none; color: inherit; }
a.wd-opt-card .wd-opt-card__img img { transition: transform 0.3s ease; }
a.wd-opt-card:hover .wd-opt-card__img img { transform: scale(1.04); }
.wd-opt-card__body { display: flex; flex-direction: column; gap: 8px; }
.wd-opt-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--near-black); }
.wd-opt-card__text { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); }
/* Plain variant (home services, Figma 485:7208): image + text only, no white
   card wrapper/padding. */
.wd-options--plain .wd-opt-card { background: transparent; padding: 0; border-radius: 0; min-height: 0; }
.wd-options--plain .wd-opt-card__title { font-size: 22px; }
.wd-options--plain .wd-opt-card__text { font-size: 14px; }
/* More than 4 plain cards (NL home: 8 services) wrap into rows of 4 on desktop
   instead of squeezing into one row; the mobile carousel (<=768px) is unchanged. */
@media ( min-width: 769px ) {
  .wd-options--plain .wd-options__grid { flex-wrap: wrap; row-gap: 40px; }
  .wd-options--plain .wd-opt-card { flex: 0 0 calc((100% - 3 * 24px) / 4); }
}

/* ==========================================================================
   Sample menu cards (328:6091)
   ========================================================================== */
.wd-menucards { background: var(--white); }
.wd-menucards__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.wd-menucards__row { display: flex; gap: 24px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1216px; }
/* Fixed quarter width (Figma card 286 @1440) so a short last row (7 menus = 4+3)
   or a 2-card grid keeps the same card size, centred, instead of stretching. */
.wd-menucard { flex: 0 0 calc((100% - 3 * 24px) / 4); min-width: 0; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.wd-menucard__img { height: 310px; border-radius: 14px; overflow: hidden; }
.wd-menucard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.wd-menucard:hover .wd-menucard__img img { transform: scale(1.04); } /* links only — unlinked cards are not clickable */
.wd-menucard__body { display: flex; flex-direction: column; gap: 8px; }
.wd-menucard__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--near-black); }
.wd-menucard__text { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--near-black-600); }

/* Mobile accordion variant of the sample-menu grid (Figma 587:26668): white
   rounded cards on the cream section background, chevron toggle, first item open.
   Hidden on desktop (the card grid shows instead — the ≤768 block swaps them). */
.wd-menucards__accordion { display: none; flex-direction: column; gap: 8px; width: 100%; }
.wd-menucards__acc { background: var(--white); border-radius: 8px; padding: 12px; }
.wd-menucards__acc[open] { border-radius: 14px; }
.wd-menucards__acc-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wd-menucards__acc-summary::-webkit-details-marker { display: none; }
.wd-menucards__acc-title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1; color: var(--near-black); }
.wd-menucards__acc-chevron { flex: 0 0 20px; color: var(--near-black); transition: transform 0.2s ease; }
.wd-menucards__acc[open] .wd-menucards__acc-chevron { transform: rotate(180deg); }
.wd-menucards__acc-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--near-black-200); }
.wd-menucards__acc-desc { display: flex; flex-direction: column; gap: 8px; }
.wd-menucards__acc-img { border-radius: 14px; overflow: hidden; }
.wd-menucards__acc-img img { display: block; width: 100%; height: 232px; object-fit: cover; }
.wd-menucards__acc-text { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 20px; color: var(--near-black-600); }
.wd-menucards__acc-foot { display: flex; flex-direction: column; gap: 8px; }
.wd-menucards__acc-link { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--zing-green-900); text-decoration: none; }
.wd-menucards__acc-link:hover { text-decoration: underline; }
.wd-menucards__acc-quote { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--near-black-600); border-top: 1px solid var(--near-black-200); padding-top: 8px; margin: 0; }
.wd-menucards__acc-quote a { color: var(--near-black); text-decoration: none; }
.wd-menucards__acc-quote a:hover { text-decoration: underline; }

/* ==========================================================================
   Dish menu — per-course cards (328:5267)
   ========================================================================== */
.wd-menu { background: var(--white); }
.wd-menu__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.wd-menu__cards { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: var(--wd-content); }
.wd-menu__empty { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--near-black-600); }
.wd-menu-card { background: var(--white); border: 1px solid var(--near-black-100); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; gap: 32px; }
.wd-menu-card__head { background: rgba(59, 109, 17, 0.12); padding: 16px; }
/* Course title = Figma h3 (Domine 32, 328:5269) on desktop; mobile uses Source Serif 28 (466:46925). */
.wd-menu-card__head h3 { font-family: var(--font-domine); font-weight: 400; font-size: 32px; line-height: 1; color: var(--near-black); }
.wd-menu-card__items { display: flex; flex-direction: column; gap: 24px; padding: 0 24px 24px; }
.wd-dish { display: flex; flex-direction: column; gap: 8px; }
.wd-dish__name { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--near-black); margin: 0; }
.wd-dish__desc { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); }
.wd-dish__note { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--zing-green); }
.wd-dish__divider { height: 1px; width: 100%; background: var(--near-black-100); border: 0; margin: 0; }
/* Option B: dishes are plain core Heading/Paragraph blocks inside .wd-dish.
   Base h4 already matches .wd-dish__name; style the description paragraph and
   the dietary note (an <em> after a <br>) to match .wd-dish__desc/.wd-dish__note
   so the front end is byte-identical to the old DB-driven markup. */
.wd-dish > h4 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--near-black); margin: 0; }
.wd-dish > p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); margin: 0; }
.wd-dish > p em { display: inline-block; margin-top: 2px; font-style: normal; font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--zing-green); }
/* A dietary note typed as its own paragraph, or after a line break without
   <em> (render.php marks both); an <em> inside it is just part of the note. */
.wd-dish > p.wd-dish__note { margin-top: -6px; font-size: 14px; line-height: 20px; color: var(--zing-green); }
.wd-dish > p > span.wd-dish__note { display: inline-block; margin-top: 2px; }
.wd-dish > p.wd-dish__note em,
.wd-dish > p > span.wd-dish__note em { display: inline; margin-top: 0; font-size: inherit; line-height: inherit; color: inherit; }
.wd-menu-card--collapsible:not(.is-expanded) .wd-dish--extra,
.wd-menu-card--collapsible:not(.is-expanded) .wd-dish__divider--extra { display: none; }
.wd-menu-card__toggle { width: 100%; margin-top: 0; padding: 12px 18px; border: 0; border-radius: 100px; background: var(--zing-green); font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--white); cursor: pointer; }
.wd-menu-card__toggle:hover { background: var(--zing-green-900); }
/* Expanded state ("Show less") is a white outline pill (Figma 495:7317). */
.wd-menu-card__toggle[aria-expanded="true"] { background: transparent; border: 1px solid var(--near-black-300); color: var(--near-black); }
.wd-menu-card__toggle[aria-expanded="true"]:hover { background: var(--warm-brown-50); }

/* ==========================================================================
   Testimonials (328:6105)
   ========================================================================== */
.wd-testimonials { background: var(--white); }
.wd-testimonials__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 24px; align-items: center; }
.wd-testimonials__row { display: flex; align-items: center; gap: 0; width: 100%; max-width: var(--wd-content); }
.wd-testimonials .wd-splide { flex: 1 1 0; min-width: 0; }
.wd-testimonials .splide__list { align-items: stretch; }
.wd-testimonials .splide__slide { height: auto; }
.wd-tcard { background: var(--warm-brown-50); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; height: 100%; min-width: 0; }
.wd-tcard__top { display: flex; flex-direction: column; gap: 12px; }
.wd-tcard__name, .wd-tcard__event { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--near-black); }
.wd-tcard__stars { display: flex; gap: 2px; }
.wd-tcard__stars img { width: 18px; height: 18px; }
.wd-tcard__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black); }
.wd-tcard__divider { height: 1px; background: var(--near-black-200); border: 0; width: 100%; margin: 0; }
.wd-tnav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.wd-tnav__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 8px; border-radius: 1000px; background: var(--white); border: 1px solid var(--near-black-200); box-shadow: 0 4px 12px rgba(0,0,0,0.12); cursor: pointer; color: var(--near-black); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.wd-tnav__btn:hover { background: var(--zing-green); border-color: var(--zing-green); color: var(--white); }
.wd-tnav__btn svg { width: 24px; height: 24px; }
.wd-btn--google { background: transparent; border-color: var(--zing-green); color: var(--zing-green); font-size: 16px; line-height: 1.2; padding: 12px 18px; gap: 6px; }
.wd-btn--google img { width: 20px; height: 20px; }

/* ==========================================================================
   CTA band (218:3103)
   ========================================================================== */
.wd-cta { background: var(--zing-green); }
.wd-cta__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 48px var(--wd-gutter); display: flex; flex-direction: column; gap: 24px; align-items: center; }
.wd-cta__head { width: 720px; max-width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.wd-cta__title { font-family: var(--font-domine); font-weight: 400; font-size: 32px; line-height: 1; color: var(--white); }
/* Quote heading keeps the h2 scale even when it's the page's h1 (quote/contact). */
.wd-quote__head .wd-quote__title { font-family: var(--font-serif); font-weight: 600; font-size: 40px; line-height: 1.1; }
@media ( max-width: 768px ) { .wd-quote__head .wd-quote__title { font-size: 28px; } }
@media ( max-width: 480px ) { .wd-quote__head .wd-quote__title { font-size: 24px; } }
.wd-cta__text { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-50); }
.wd-cta__text strong { font-weight: 500; font-size: 18px; }
.wd-cta a.wd-hl { color: var(--white); }
.wd-cta a.wd-hl:hover { color: var(--near-black-50); }
/* Boxed variant — Figma 466:53084: off-white section (48 / gutter), green card
   720px text + 40px padding, radius 2. */
.wd-cta--boxed { background: var(--warm-off-white); padding: 48px var(--wd-gutter); }
.wd-cta--boxed .wd-cta__inner { background: var(--zing-green); border-radius: 2px; padding: 40px; max-width: 800px; }
.wd-btn--white { background: var(--white); color: var(--zing-green-900); font-size: 16px; line-height: 1.2; padding: 12px 18px; }
.wd-btn--white:hover { background: var(--warm-brown-50); }

/* ==========================================================================
   Split text/image blocks (328:6115, 6122, 6129, 6135)
   ========================================================================== */
.wd-split-section { width: 100%; }
.wd-split-section--off { background: var(--warm-off-white); }
.wd-split-section--white { background: var(--white); }
.wd-split { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; align-items: stretch; justify-content: space-between; gap: 66px; }
.wd-split__text { flex: 1 1 614px; min-width: 0; max-width: 614px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.wd-split__text p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); }
.wd-split--text-only { justify-content: center; }
.wd-split--text-only .wd-split__text { max-width: 760px; }
.wd-split__media { flex: 1 1 600px; min-width: 0; max-width: 600px; position: relative; border-radius: 16px; overflow: hidden; min-height: 420px; }
.wd-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wd-split__media--bordered { border: 6px solid rgba(0,0,0,0.06); border-radius: 14px; }
/* Labeled-list variant (About Us, Figma 466:47362): heading + {label, text} rows. */
.wd-split__list { display: flex; flex-direction: column; gap: 16px; }
.wd-split__item { display: flex; flex-direction: column; gap: 8px; }
/* Labelled-list rows (About). Mobile-first per Figma: mobile 466:47367 = label
   Source Serif Medium 18 / text Work Sans 14; desktop 355:6842 = 24 / 16. The text
   selector is scoped under .wd-split__text so it out-ranks `.wd-split__text p`
   (which forced 16px on mobile). */
.wd-split__item-title { font-family: var(--font-serif); font-weight: 500; font-size: 18px; line-height: 1; color: var(--near-black); margin: 0; }
.wd-split__text .wd-split__item-text { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--near-black-600); }
@media ( min-width: 769px ) {
  .wd-split__item-title { font-size: 24px; }
  .wd-split__text .wd-split__item-text { font-size: 16px; }
}
.wd-split__item-text a { color: var(--zing-green); }
.wd-split__item-text .wd-hl { color: var(--zing-green); }
/* Inline green link (Figma 355:6856: green, underline from-font). Underlined on
   every link, not just the one in the comp: green on the #5D5D5D body is only
   1.06:1, so colour alone would fail WCAG 1.4.1 (link-in-text-block). */
a.wd-hl { color: var(--zing-green); text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; text-decoration-skip-ink: none; }
a.wd-hl:hover { color: var(--zing-green-900); }
.wd-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--warm-brown-700); }
.wd-checklist { display: flex; flex-direction: column; gap: 16px; }
.wd-checkitem { display: flex; gap: 16px; align-items: flex-start; }
.wd-checkitem__icon { flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--zing-green); }
.wd-checkitem__icon svg { width: 16px; height: 16px; }

/* ==========================================================================
   Quote form (218:3495)
   ========================================================================== */
.wd-quote { background: var(--warm-off-white); }
.wd-quote__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 48px; }
.wd-quote__head { display: flex; flex-direction: column; gap: 24px; }
.wd-quote__head p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); }
.wd-quote__form { display: flex; flex-direction: column; gap: 20px; }
.wd-quote__row { display: flex; gap: 20px; }
.wd-field { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wd-field label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--near-black); }
.wd-field .wd-req { color: var(--warm-brown-500); }
.wd-field input, .wd-field textarea { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black); background: var(--white); border: 1px solid var(--near-black-100); border-radius: 8px; padding: 10px 14px; width: 100%; }
.wd-field textarea { padding: 12px 14px; min-height: 180px; resize: vertical; }
.wd-field input::placeholder, .wd-field textarea::placeholder { color: var(--near-black-500); }
.wd-field input:focus, .wd-field textarea:focus { outline: none; border-color: var(--zing-green); }
.wd-btn--block { width: 100%; font-size: 16px; line-height: 1.2; padding: 10px 16px; }

/* Formcraft embed ([fc] inside ca/quote-form) restyled to the Figma quote design.
   Formcraft inline-styles only the form width (620px) + textarea height, so only
   those need !important; everything else is a plain stylesheet override. */
.wd-quote__form--embed .formcraft-css { width: 100%; }
.wd-quote__form--embed .formcraft-css .fc-form { width: 100% !important; max-width: none; margin: 0; border: 0 !important; background: transparent !important; color: var(--near-black) !important; }
.wd-quote__form--embed .formcraft-css .field-cover { width: 100%; margin: 0; padding: 0; }
/* Figma layout: name/phone/email in a 3-col row, message + submit full width. */
.wd-quote__form--embed .formcraft-css .form-page-content { display: flex; flex-wrap: wrap; gap: 20px; }
.wd-quote__form--embed .formcraft-css .form-element { margin: 0; }
.wd-quote__form--embed .formcraft-css .form-element-type-oneLineText,
.wd-quote__form--embed .formcraft-css .form-element-type-email { flex: 1 1 180px; min-width: 0; }
.wd-quote__form--embed .formcraft-css .form-element-type-textarea,
.wd-quote__form--embed .formcraft-css .form-element-type-submit,
.wd-quote__form--embed .formcraft-css .form-element-type-reCaptcha { flex: 1 1 100%; min-width: 0; }
.wd-quote__form--embed .formcraft-css .main-label { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--near-black); margin: 0 0 6px; padding: 0; }
.wd-quote__form--embed .formcraft-css .sub-label,
.wd-quote__form--embed .formcraft-css .formcraft-icon { display: none; }
.wd-quote__form--embed .formcraft-css .oneLineText-cover,
.wd-quote__form--embed .formcraft-css .textarea-cover { padding: 0; }
.wd-quote__form--embed .formcraft-css input:not([type="hidden"]),
.wd-quote__form--embed .formcraft-css textarea,
.wd-quote__form--embed .formcraft-css select { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black); background: var(--white) !important; border: 1px solid var(--near-black-100) !important; border-radius: 8px !important; padding: 10px 14px !important; width: 100%; box-shadow: none !important; }
.wd-quote__form--embed .formcraft-css textarea { padding: 12px 14px !important; min-height: 180px !important; resize: vertical; }
.wd-quote__form--embed .formcraft-css input::placeholder,
.wd-quote__form--embed .formcraft-css textarea::placeholder { color: var(--near-black-500); }
.wd-quote__form--embed .formcraft-css input:focus,
.wd-quote__form--embed .formcraft-css textarea:focus,
.wd-quote__form--embed .formcraft-css select:focus { outline: none; border-color: var(--zing-green); }
.wd-quote__form--embed .formcraft-css .submit-cover { margin: 8px 0 0; padding: 0; text-align: left; }
.wd-quote__form--embed .formcraft-css .submit-cover { width: 100%; text-align: left; }
.wd-quote__form--embed .formcraft-css .submit-button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--white) !important; background: var(--zing-green) !important; border: 0 !important; border-radius: 100px !important; padding: 10px 16px !important; width: 100%; cursor: pointer; }
.wd-quote__form--embed .formcraft-css .submit-button:hover { background: var(--zing-green-900) !important; }
.wd-quote__form--embed .formcraft-css .powered-by,
.wd-quote__form--embed .formcraft-css .fc-pagination,
.wd-quote__form--embed .formcraft-css .prev-next { display: none; }

@media (max-width: 768px) {
	.wd-quote__form--embed .formcraft-css .form-element-type-oneLineText,
	.wd-quote__form--embed .formcraft-css .form-element-type-email { flex: 1 1 100%; }
}

/* ==========================================================================
   FAQ accordion (328:6178)
   ========================================================================== */
.wd-faq { background: var(--white); }
.wd-faq__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 100px var(--wd-gutter); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.wd-faq h2 { text-align: center; width: 100%; }
.wd-faq__list { display: flex; flex-direction: column; width: 100%; max-width: var(--wd-content); }
.wd-faq__item { border-bottom: 1px solid var(--near-black-200); }
.wd-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--near-black); }
.wd-faq__item summary::-webkit-details-marker { display: none; }
.wd-faq__icon { position: relative; width: 24px; height: 24px; flex: 0 0 24px; }
.wd-faq__icon::before, .wd-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--near-black); border-radius: 2px; transform: translate(-50%, -50%); }
.wd-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.wd-faq__item[open] .wd-faq__icon::after { display: none; }
.wd-faq__answer { padding: 0 0 16px; margin-top: -4px; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--near-black-600); }

/* ==========================================================================
   Site footer (134:156)
   ========================================================================== */
.site-footer { background: var(--near-black); color: var(--white); }
.site-footer__inner { display: flex; flex-direction: column; gap: 32px; padding: 80px var(--wd-gutter); max-width: var(--wd-maxw); margin: 0 auto; }
.site-footer__cols { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col--last { align-self: stretch; justify-content: space-between; gap: 32px; }
.site-footer__heading { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--warm-brown-200); margin: 0; }
.site-footer__list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-footer__list a, .site-footer__list li { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--white); text-decoration: none; }
.site-footer__list a:hover { color: var(--warm-brown-200); }
.site-footer__contact { display: flex; flex-direction: column; gap: 12px; }
.site-footer__contact a { color: var(--zing-green-600); text-decoration: none; }
.site-footer__divider { height: 1px; width: 100%; background: var(--near-black-900); border: 0; }
.site-footer__copyright { display: flex; align-items: center; gap: 4px; }
.site-footer__copyright, .site-footer__copyright p { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--near-black-300); }

/* ==========================================================================
   Responsive — tablet / mobile (down to 390)
   ========================================================================== */
/* Header: logo + hamburger on one row; nav + actions collapse into a drawer
   that the toggle opens (see assets/js/nav.js). From 960 down, not 768: the full
   desktop row (logo · nav · flag + quote button) needs ~900px (NL ~940) inside
   the 80px gutters, and below that the items touched. */
@media ( max-width: 960px ) {
  .site-header__inner { flex-wrap: wrap; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; }
  .site-header__toggle { display: inline-flex; }
  .site-header__collapse { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 8px; }
  .site-header.is-nav-open .site-header__collapse { display: flex; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-header__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; }
  .site-header__actions .wd-btn { width: 100%; text-align: center; }
  .site-header__lang-menu { position: static; margin-top: 8px; box-shadow: none; }
}

@media ( max-width: 768px ) {
  /* Tighten the shared gutter everywhere it is used (header, breadcrumb,
     sections, footer all read this token). */
  :root { --wd-gutter: 20px; }

  /* Fluid type down-scale. */
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }

  .wd-breadcrumb__inner { flex-wrap: wrap; row-gap: 4px; }

  /* Section heading + side button: stack instead of cramming side by side. */
  .wd-sec-head { flex-direction: column; align-items: stretch; }
  .wd-sec-head .wd-btn { align-self: flex-start; }

  /* Section vertical rhythm: 100px → 56px. */
  .wd-options__inner,
  .wd-menucards__inner,
  .wd-testimonials__inner,
  .wd-quote__inner,
  .wd-faq__inner,
  .wd-menu__inner { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .wd-cta__inner { padding-top: 40px; padding-bottom: 40px; }
  .wd-split { padding-top: 56px; padding-bottom: 56px; }

  /* Menu page: cream section so the white menu cards stand out (Figma 466:46906),
     and dish type sized to the mobile comp. */
  .wd-menu { background: var(--warm-off-white); }
  .wd-dish__name, .wd-dish > h4 { font-size: 22px; }
  .wd-dish__desc, .wd-dish > p { font-size: 14px; }
  .wd-dish__note, .wd-dish > p em, .wd-dish > p.wd-dish__note { font-size: 12px; }
  .wd-dish > p.wd-dish__note em, .wd-dish > p > span.wd-dish__note em { font-size: inherit; }
  .wd-menu-card__head h3 { font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.1; }
  .wd-menu-card__items { gap: 16px; }

  /* Hero — bottom (V3, service) matches Figma 466:46510 at the 390 viewport;
     side (V5, menu) keeps its own treatment below. */
  .wd-hero { min-height: 520px; padding: 200px var(--wd-gutter) 40px; }
  .wd-hero__desc { max-width: none; }
  .wd-hero:not(.wd-hero--side) { min-height: 600px; padding: 48px 16px 24px; }
  .wd-hero:not(.wd-hero--side) .wd-hero__content { gap: 48px; }
  .wd-hero:not(.wd-hero--side) h1 { font-size: 40px; }
  .wd-hero:not(.wd-hero--side) .wd-hero__desc { font-size: 14px; }
  .wd-hero:not(.wd-hero--side) .wd-hero__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .wd-hero:not(.wd-hero--side) .wd-hero__content .wd-btn { width: 100%; font-size: 14px; padding: 12px 18px; }
  /* Image crop — the Figma fill transform (cover-scaled 210.49%×100%, offset). */
  .wd-hero:not(.wd-hero--side) .wd-hero__bg img { position: absolute; width: 210.49%; height: 100%; left: -56.81%; top: -30.22%; max-width: none; object-fit: cover; }
  /* Fade — solid black across the bottom half, out by ~84% up (Figma gradient). */
  .wd-hero:not(.wd-hero--side) .wd-hero__bg::after { background: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 84%); }
  .wd-hero--side { min-height: 0; padding: 56px var(--wd-gutter); }
  .wd-hero--side .wd-hero__text { max-width: none; }

  /* Sample menus (Figma 587:26668): the heading + accordion sit inside a cream
     rounded panel (bg #f7f5f0, radius 14, padding 16) on a WHITE section; the
     cards inside are white. Swaps the desktop card grid for the accordion. */
  .wd-menucards { background: var(--white); padding: 48px 16px; }
  .wd-menucards__inner { max-width: none; margin: 0; padding: 16px; gap: 24px; background: var(--warm-off-white); border-radius: 14px; align-items: stretch; }
  .wd-menucards .wd-sec-head--center,
  .wd-options .wd-sec-head--center { text-align: left; }
  .wd-menucards .wd-sec-head--center .wd-sec-head__text,
  .wd-options .wd-sec-head--center .wd-sec-head__text { align-items: flex-start; }
  .wd-menucards__row { display: none; }
  .wd-menucards__accordion { display: flex; }

  /* Catering options become a swipeable carousel (Figma 485:12079): one card
     with the next peeking, native scroll-snap for touch, arrows for the rest. */
  .wd-options__grid { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--wd-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wd-options__grid::-webkit-scrollbar { display: none; }
  .wd-opt-card { flex: 0 0 84%; min-height: 466px; scroll-snap-align: center; }
  .wd-opt-card__img { height: 220px; }
  .wd-opt-card__title { font-size: 22px; }
  .wd-options__nav { display: flex; }
  /* Pagination dots (Figma 485:12086) + full-width bottom CTA (485:14239). */
  .wd-options__dots { display: flex; gap: 1px; justify-content: center; width: 100%; }
  .wd-options__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .wd-options__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--near-black-300); transition: background 0.2s ease; }
  .wd-options__dot.is-active::before { background: var(--near-black); }
  .wd-options__cta { display: inline-flex; width: 100%; justify-content: center; font-size: 14px; }

  /* Split text/image: stack, image full width, sensible height. */
  .wd-split { flex-direction: column; gap: 32px; }
  .wd-split__text,
  .wd-split__media { flex: 1 1 auto; max-width: none; width: 100%; }
  .wd-split__media { min-height: 320px; }
  /* Keep image above text regardless of desktop side. */
  .wd-split__media { order: -1; }

  /* Testimonials: one card per view (carousel), hide the desktop arrows and
     show Splide pagination dots instead. */
  .wd-testimonials__row { flex-wrap: wrap; justify-content: center; gap: 0; }
  .wd-testimonials .wd-splide { flex: 0 0 100%; order: 0; width: 100%; }
  /* Move the prev/next arrows below the carousel (buttons + swipe on mobile). */
  .wd-tnav { display: flex; padding: 0; }
  .wd-tnav--left { order: 1; margin: 24px 8px 0; }
  .wd-tnav--right { order: 2; margin: 24px 8px 0; }

  /* Quote form: single column, full-width fields. */
  .wd-quote__row { flex-direction: column; gap: 20px; }
  .wd-cta__head { width: 100%; }

  /* Footer columns stack. */
  .site-footer__inner { padding-top: 56px; padding-bottom: 56px; }
  .site-footer__cols { flex-direction: column; gap: 32px; }
}

@media ( max-width: 480px ) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  /* Dish rows: a touch more breathing room between name and body. */
  .wd-menu-card__items { padding-left: 16px; padding-right: 16px; }
  .wd-menu-card__head { padding: 12px 16px; }
}

/* ── Blog post (single.php) ─────────────────────────────────────────────────
   Block-built posts render the full design from ca/* section blocks (ca/hero
   side, ca/split, ca/cta-band, ca/quote-form) — each a full-bleed .wd-section,
   so NO wrapper styling is needed for them. The rules below style the article
   prose between those sections — the migrated posts' core blocks (p, h2-h4,
   lists, images, a table) and legacy classic-editor posts — scoped with `>` so
   they never touch the internals of the .wd-section blocks. */
.wd-post__article > p,
.wd-post__article > h1,
.wd-post__article > h2,
.wd-post__article > h3,
.wd-post__article > h4,
.wd-post__article > table,
.wd-post__article > .wd-table-scroll,
.wd-post__article > ul,
.wd-post__article > ol,
.wd-post__article > blockquote,
.wd-post__article > figure {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wd-gutter);
	padding-right: var(--wd-gutter);
}
.wd-post__article > p:first-child { margin-top: 40px; }
.wd-post__article > p { font-family: var(--font-sans); font-size: 18px; line-height: 1.7; color: var(--near-black-900); margin: 0 auto 20px; }
.wd-post__article > p img,
.wd-post__article > figure img { display: block; width: 100%; height: auto; border-radius: 12px; margin: 8px auto; }
.wd-post__article > p a, .wd-post__article > ul a, .wd-post__article > ol a { color: var(--zing-green); text-decoration: underline; }
.wd-post__article > ul, .wd-post__article > ol { padding-left: 42px; margin: 0 auto 20px; }
.wd-post__article > ul li, .wd-post__article > ol li { margin-bottom: 8px; line-height: 1.6; }
.wd-post__article > h1 { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; margin: 32px auto 12px; }
.wd-post__article > h2 { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; margin: 40px auto 14px; }
.wd-post__article > h3 { font-family: var(--font-domine); font-size: 22px; line-height: 1.3; margin: 32px auto 12px; }
.wd-post__article > blockquote { border-left: 3px solid var(--zing-green); padding-left: 20px; font-style: italic; color: var(--near-black); }
/* Migrated posts (2026-10-06): h4, figure captions, a table, and breathing room
   between the full-bleed sections (hero, quote form) and the prose. */
.wd-post__article > h4 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.4; margin: 28px auto 8px; }
.wd-post__article > figure { margin-top: 24px; margin-bottom: 28px; }
.wd-post__article > figure figcaption { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--near-black-600); margin-top: 8px; }
.wd-post__article > .wd-table-scroll { overflow-x: auto; margin-bottom: 24px; }
.wd-post__article table { border-collapse: collapse; width: 100%; min-width: 560px; font-family: var(--font-sans); font-size: 16px; }
.wd-post__article table td, .wd-post__article table th { border-bottom: 1px solid var(--near-black-200); padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.wd-post__article > .wd-section + :not(.wd-section) { margin-top: 56px; }
.wd-post__article > :not(.wd-section) + .wd-section { margin-top: 48px; }

/* ── Legacy page template (template-legacy.php; also index.php) ─────────────
   Pages not rebuilt in the new design (e.g. the /blog/<child> event stories)
   had no styling: everything sat flush left and
   images ran at their natural width. Same centred prose column as the blog
   post above, scoped with `>` so Elementor/ca-* sections inside are untouched. */
.ca-container > .entry > .entry-header,
.ca-container > .entry > .entry-content > p,
.ca-container > .entry > .entry-content > h1,
.ca-container > .entry > .entry-content > h2,
.ca-container > .entry > .entry-content > h3,
.ca-container > .entry > .entry-content > h4,
.ca-container > .entry > .entry-content > ul,
.ca-container > .entry > .entry-content > ol,
.ca-container > .entry > .entry-content > blockquote,
.ca-container > .entry > .entry-content > figure {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wd-gutter);
	padding-right: var(--wd-gutter);
	box-sizing: border-box;
}
.ca-container > .entry > .entry-header { padding-top: 48px; }
.ca-container > .entry .entry-title { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; margin: 0 0 24px; }
.ca-container > .entry > .entry-content { padding-bottom: 64px; }
.ca-container > .entry > .entry-content > p { font-family: var(--font-sans); font-size: 18px; line-height: 1.7; color: var(--near-black-900); margin-top: 0; margin-bottom: 20px; }
.ca-container > .entry > .entry-content > p:empty { display: none; }
.ca-container > .entry > .entry-content > p a, .ca-container > .entry > .entry-content > ul a, .ca-container > .entry > .entry-content > ol a { color: var(--zing-green); text-decoration: underline; }
.ca-container > .entry > .entry-content > ul, .ca-container > .entry > .entry-content > ol { padding-left: calc(var(--wd-gutter) + 22px); margin-top: 0; margin-bottom: 20px; }
.ca-container > .entry > .entry-content > h2 { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; margin-top: 40px; margin-bottom: 14px; }
.ca-container > .entry > .entry-content > h3 { font-family: var(--font-domine); font-size: 22px; line-height: 1.3; margin-top: 32px; margin-bottom: 12px; }
.ca-container > .entry > .entry-content > h4 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.4; margin-top: 28px; margin-bottom: 8px; }
.ca-container > .entry > .entry-content > figure { margin-top: 24px; margin-bottom: 28px; }
/* Editor-set pixel widths ("is-resized" style="width:800px") must not overflow. */
.ca-container > .entry > .entry-content > p img,
.ca-container > .entry > .entry-content > figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 0 auto; }
.ca-container > .entry > .entry-content > figure figcaption { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--near-black-600); margin-top: 8px; text-align: center; }
@media ( max-width: 768px ) {
  .ca-container > .entry .entry-title { font-size: 30px; }
  .ca-container > .entry > .entry-header { padding-top: 32px; }
}

/* ── Blog index (ca/post-grid) — mobile-first ─────────────────────────────── */
.wd-postgrid__inner { max-width: var(--wd-maxw); margin: 0 auto; padding: 48px var(--wd-gutter); display: flex; flex-direction: column; gap: 32px; }
.wd-postgrid__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; width: 100%; }
.wd-postcard { display: flex; flex-direction: column; gap: 16px; min-width: 0; text-decoration: none; color: inherit; }
.wd-postcard__img { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--warm-off-white); }
.wd-postcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.wd-postcard:hover .wd-postcard__img img { transform: scale(1.04); }
.wd-postcard__body { display: flex; flex-direction: column; gap: 8px; }
.wd-postcard__date { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--near-black-600); }
.wd-postcard__title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--near-black); margin: 0; }
.wd-postcard__excerpt { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--near-black-600); margin: 0; }
@media (min-width: 769px) {
  .wd-postgrid__inner { padding: 100px var(--wd-gutter); gap: 48px; }
  .wd-postgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; max-width: 1216px; margin: 0 auto; }
  .wd-postcard__title { font-size: 24px; }
}