/* ============================================================
   Da Baffo — global chrome (reset, layout, buttons, header,
   footer, mobile menu).

   Ported from the static prototype's styles.css.

   TOKEN BRIDGE ------------------------------------------------
   The prototype's --cream/--gold/... variables are re-pointed at
   the theme.json presets. That keeps ~6,350 lines of existing CSS
   working unchanged, AND makes every per-site style variation
   flow through automatically. Do not hardcode hex values below.

   Phase 2: the page-section rules still in this file (hero,
   about, gallery, philosophy, quote, story, experience) move out
   into per-block stylesheets.
   ============================================================ */

:root {
  --cream:  var(--wp--preset--color--base);
  --sand:   var(--wp--preset--color--surface);
  --gold:   var(--wp--preset--color--brand);
  --ink:    var(--wp--preset--color--contrast);
  --line:   var(--wp--preset--color--line);
  --line2:  var(--wp--preset--color--line-strong);
  --white:  var(--wp--preset--color--white);
  --muted:  rgba(0, 0, 0, 0.6);

  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);

  --maxw: 1440px;
  --pad:  16px;
}

/* ============================================================
   Da Baffo — responsive landing page
   Built from Figma (desktop 1440 / mobile 360)
   ============================================================ */


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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  overflow-wrap: break-word;   /* long German words can't force horizontal overflow */
}

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

/* ⚠️ The reset above exists for navigation lists, which is every `ul` the theme
   itself writes. A List block the *client* adds in the editor is prose, and it
   arrived with no bullet, no indent and no marker of any kind — the block only
   carries `wp-block-list`, and nothing in the theme styled that (§9.63).
   Scoped to `ul` because core puts the same class on an ordered list, whose
   numbers this would otherwise delete.
   Kept to exactly the eight properties the section recipes already set
   (`.db-article__body`, `.db-job-body__content`, `.db-packages__list`) and at
   lower specificity, so each of those still wins every property it declares.
   Declaring a ninth here — `transform`, say — would leak into all three,
   because a `::before` is one element and the cascade resolves it per property. */
ul.wp-block-list { margin: 0; padding-left: 14px; list-style: none; }
ul.wp-block-list > li { position: relative; }
ul.wp-block-list > li::before {
  content: ""; position: absolute; left: -14px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* ---------- layout helper ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.5;
  cursor: pointer;
  border: none;
  transition: filter .2s ease, transform .2s ease;
}
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.link-underline {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 2px 0;
  border-bottom: 1px solid var(--gold);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* The rule under this link is a real `border-bottom`, so theme.json's global
   `elements.link:hover { textDecoration: underline }` drew a SECOND line right
   under it — two stacked rules, and a faded `opacity: .7` on top of that.

   Instead: suppress the inherited underline, deepen the gold, and thicken the
   existing rule from 1px to 2px with a box-shadow rather than a border width, so
   nothing reflows. theme.json emits its link styles inside :where() (zero
   specificity), so this class selector wins comfortably. */
.link-underline:hover,
.link-underline:focus-visible {
	opacity: 1;
	text-decoration: none;
	color: color-mix(in srgb, var(--gold) 82%, #000);
	border-bottom-color: currentColor;
	box-shadow: 0 1px 0 currentColor;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(74,63,58,1) 100%),
    url("../images/hero-bg.webp") center 30% / cover no-repeat;
  color: var(--white);
}
.hero__inner {
  min-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 20px;
}

/* ---- sticky header: transparent over the hero, solid once scrolled ---- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(37, 32, 30, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  transition: padding-block .3s ease;
}
.nav__logo img { width: 91px; height: auto; }

/* desktop inline nav; on mobile the hamburger opens the full-screen .menu overlay */
.nav__menu { display: none; }
.nav__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nav__links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
}
.nav__links a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.nav__cta { align-self: flex-start; }

/* ---- current page ------------------------------------------------------
   Reported by the client: the nav never showed where you were, in the top level
   or the dropdown.

   The cause was DATA, not styling. core/navigation only emits
   `current-menu-item` / `aria-current="page"` when a link is `kind: post-type`
   with an `id` it can compare against the queried object — and all 34 internal
   items were `kind: custom` with no id, so core had nothing to match and marked
   nothing. Converted in §9.44; these rules are what makes it visible.

   `current-menu-ancestor` is the sub-nav half: on any Leistungen child, the
   parent item shows active as well as the child inside the panel.

   ⚠️ The treatment reuses the hover underline rather than inventing a token.
   No header frame in Figma shows an active item, so there is no design value to
   copy — a colour would be a guess. Worth confirming with the designer. */
/* It sets the underline COLOUR, not the underline. §9.16 gave the header links a
   permanent `text-decoration-line: underline` with
   `text-decoration-color: transparent` so hover could animate the colour in — so
   `text-decoration: underline` here is a no-op (they are all already underlined,
   invisibly) and the active item stayed indistinguishable. Setting the colour is
   the only thing that paints.

   Specificity: that rule is
   `.site-header .wp-block-navigation .wp-block-navigation-item__content` at
   (0,3,0). These are (0,4,0), so they win without !important. */
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration-color: currentColor;
}

/* ⚠️ And again one level down, at (0,5,0). The dropdown has its own copy of the
   transparent-underline setup (§ hover transitions), at the same (0,4,0) as the
   rule above but LATER in the file — so it re-set the colour to transparent and
   the current item in the panel stayed unmarked while `Leistungen` above it
   showed active. Reported from the browser on /firmen-event-catering/; the data
   was fine, `current-menu-item` and `aria-current="page"` were both on the item.

   Equal specificity decided by source order is a trap in a file this long: state
   rules for a nested component have to out-rank it, not merely match it. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	text-decoration-color: currentColor;
}

/* The overlay menus are outside .site-header, so they never had the transparent
   trick and take a plain underline. */
.menu__nav .current-menu-item > a,
.menu__cat-list .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* The footer lists the same pages and core marks them the same way — there was
   simply never a rule for it, so `Galerie`, `Blog`, `Kontakt` and the rest sat
   in the footer indistinguishable from their neighbours. Reported alongside the
   header and overlay; §9.54.

   No frame shows an active item anywhere in the navigation, so this takes the
   header's restrained treatment — an underline in the link's own colour — and
   not the overlay's bold, which at 14px would read as a different weight of
   type rather than a state. */
.footer .current-menu-item > .wp-block-navigation-item__content,
.footer .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: var(--gold);
  border: none;
  cursor: pointer;
}
.nav__toggle img { width: 18px; height: auto; }

.hero__title {
  font-size: clamp(2.5rem, 11vw, 7.5rem);
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.85);
  max-width: 14ch;
}

/* ============================================================
   ABOUT (two alternating blocks)
   ============================================================ */
.about {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 40px;
}
.about__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__heading { display: flex; flex-direction: column; gap: 16px; }
.about__heading h2 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.08;
  overflow-wrap: break-word;
}
.about__heading p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}
.about__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.about__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.about__divider { height: 1px; width: 100%; background: var(--line); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { background: var(--sand); }
.gallery__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 40px;
}
.gallery__title {
  font-size: clamp(1.5rem, 6vw, 5rem);
  text-align: center;
  line-height: 1.1;
}
.gallery__track {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 auto;
  margin: 0;
  width: 300px;
  scroll-snap-align: start;
}
.gallery__item img {
  width: 300px;
  height: 425px;
  object-fit: cover;
}
.gallery__arrows { display: flex; gap: 12px; }
.arrow {
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease;
}
.arrow img { width: 46px; height: 46px; }
.arrow--next img { transform: scaleX(-1); }
.arrow:hover { background: rgba(0, 0, 0, 0.05); }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy { padding-block: 0; }
.philosophy__head {
  padding: 16px;
  border-bottom: 1px solid var(--line2);
}
.philosophy__head h2 {
  font-size: clamp(1.75rem, 6vw, 5rem);
  text-align: center;
  line-height: 1.1;
}
.philosophy__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 40px;
}
.philosophy__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.philosophy__item:last-child { border-bottom: none; padding-bottom: 0; }
.philosophy__item h3 {
  font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  line-height: 1.25;
}
.philosophy__item p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("../images/quote-bg.png") center / cover no-repeat;
  color: rgba(255, 255, 255, 0.72);
}
.quote__inner {
  display: flex;
  align-items: flex-end;
  min-height: 480px;
  padding-block: 40px;
}
.quote blockquote {
  margin: 0;
  align-self: flex-start;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 3.75rem);
  line-height: 1.15;
  max-width: 18ch;
}

/* ============================================================
   STORY
   ============================================================ */
.story { padding-block: 40px; }
.story__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.story__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.story__divider { display: none; }
.story__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.story__text h2 { font-size: clamp(1.5rem, 6vw, 5rem); line-height: 1.1; }
.story__body { display: flex; flex-direction: column; gap: 16px; }
.story__body p { font-size: 16px; line-height: 1.75; color: var(--muted); }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.experience {
  background:
    linear-gradient(rgba(0,0,0,0.56), rgba(0,0,0,0.56)),
    url("../images/experience-bg.png") center / cover no-repeat;
  color: var(--white);
}
.experience__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 520px;
  padding-block: 40px;
  justify-content: center;
}
.experience__title {
  font-size: clamp(1.5rem, 6vw, 4.75rem);
  line-height: 1.1;
  overflow-wrap: break-word;
}
.experience__text {
  font-size: 16px;
  line-height: 1.75;
}
.experience__cta { align-self: flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--sand); }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 20px 16px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "services services"
    "nav      contactlines"
    "contact  contact";
  gap: 24px;
  align-items: start;
}
.footer__services {
  grid-area: services;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.footer__services a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
}
.footer__nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__contactlines {
  grid-area: contactlines;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__nav a,
.footer__contactlines a {
  font-size: 14px;
}
.footer__nav a:hover,
.footer__contactlines a:hover { color: var(--gold); }

.footer__contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.footer__address {
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.footer__social { display: flex; align-items: center; gap: 24px; }
.footer__social img { width: 24px; height: 24px; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(173, 173, 173, 0.32);
}
.footer__copy,
.footer__legal a { font-size: 14px; color: rgba(0, 0, 0, 0.4); }
.footer__copy span { color: rgba(0, 0, 0, 0.4); }
.footer__legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   DESKTOP  (>= 861px)
   ============================================================ */
@media (min-width: 861px) {
  :root { --pad: 40px; }

  /* ---- hero ---- */
  .hero__inner { min-height: 900px; padding-bottom: 48px; }

  /* ---- about ---- */
  .about {
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
    padding-block: 120px;
  }
  .about__col { flex: 1; gap: 60px; }
  .about__text { gap: 32px; }
  .about__heading { gap: 24px; }
  .about__heading h2 { font-size: 3rem; line-height: 1.08; }
  .about__actions { flex-direction: row; align-items: center; gap: 24px; }
  /* second button (underlined link) vertically centered against the gold button */
  .about__col:nth-of-type(1) .about__actions .link-underline,
  .about__col.about__col--reverse .about__actions .link-underline { align-self: center; }
  .about__media img { height: 600px; }
  .about__divider { width: 1px; height: auto; align-self: stretch; }

  /* ---- gallery ---- */
  .gallery__inner {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title track"
      "arrows track";
    align-items: start;
    gap: 32px 48px;
    padding-block: 120px;
  }
  .gallery__title {
    grid-area: title;
    text-align: left;
    font-size: 5rem;
    line-height: 1.1;
    align-self: start;
  }
  .gallery__arrows { grid-area: arrows; align-self: end; }
  .gallery__track { grid-area: track; }
  .gallery__item, .gallery__item img { width: 480px; }
  .gallery__item img { height: 680px; }
  .gallery__track { gap: 16px; }

  /* ---- philosophy ---- */
  .philosophy__head { padding: 60px 0; }
  .philosophy__head h2 { font-size: 5rem; }
  .philosophy__grid {
    flex-direction: row;
    gap: 0;
    padding: 60px 0 120px;
  }
  .philosophy__item {
    flex: 1;
    padding: 0 48px;
    border-bottom: none;
    border-left: 1px solid var(--line);
    justify-content: space-between;
  }
  .philosophy__item:first-child { padding-left: 0; border-left: none; }
  .philosophy__item:last-child { padding-right: 0; }
  .philosophy__item h3 { font-size: 1.5rem; }

  /* ---- quote ---- */
  .quote__inner { min-height: 800px; padding-block: 48px; }
  .quote blockquote { font-size: 3.75rem; max-width: 1005px; }

  /* ---- story ---- */
  .story { padding-block: 96px; }
  .story__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
  }
  .story__media { flex: 1 1 55%; }
  .story__media img { height: 500px; }
  .story__divider {
    display: block;
    width: 1px;
    align-self: stretch;
    background: var(--line);
  }
  .story__text {
    flex: 1 1 40%;
    justify-content: space-between;
    align-self: stretch;
    gap: 48px;
  }
  .story__text h2 { font-size: 5rem; }

  /* ---- experience ---- */
  /* Figma: left block (title top / CTA bottom) w-1005, full-height divider, text bottom-right.
     Column ratios 925fr : 354fr resolve to the exact Figma widths at 1440 and scale below it;
     the ::before pseudo is the full-height divider so the flat markup stays unchanged. */
  .experience__inner {
    display: grid;
    grid-template-columns: 925fr 1px 354fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title   divider text"
      "cta     divider text";
    column-gap: 40px;
    row-gap: 48px;
    min-height: 700px;
    padding-block: 60px;
  }
  .experience__inner::before {
    content: "";
    grid-area: divider;
    align-self: stretch;
    margin-block: -60px; /* cancel padding-block so the divider spans the full section height */
    width: 1px;
    background: rgba(255, 255, 255, 0.37);
  }
  .experience__title {
    grid-area: title;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
  }
  .experience__cta {
    grid-area: cta;
    align-self: end;
    justify-self: start;
  }
  .experience__text {
    grid-area: text;
    align-self: end;
    max-width: none;
  }

  /* ---- footer ---- */
  .footer__inner { padding-block: 48px 24px; gap: 60px; }
  .footer__top {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "services contact"
      "nav      contactlines";
    column-gap: 48px;
    row-gap: 60px;
    align-items: start;
  }
  .footer__services { text-align: left; }
  .footer__services a { font-size: 2.5rem; }
  .footer__nav {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: max-content;
    column-gap: 160px;
    row-gap: 0;
  }
  .footer__nav li { margin-bottom: 2px; }
  .footer__nav a { text-align: left; }
  .footer__contact { align-self: start; align-items: flex-end; gap: 8px; }
  .footer__address { text-align: right; }
  .footer__contactlines { align-self: end; text-align: right; }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .footer__legal { gap: 52px; }
}

/* ============================================================
   Large desktop niceties
   ============================================================ */
@media (min-width: 1200px) {
  .about__heading h2 { max-width: 11ch; }
}

/* ============================================================
/* The prototype-markup port of the mobile overlay used to live here — `.menu[hidden]`,
   `.menu__item`, `<img>` icons and so on, none of which the block build renders. It was
   dead weight once the real overlay landed, and left two `.menu` blocks fighting over
   the same properties. The live version is the block-aware one further down. */

/* ============================================================
   HEADER breakpoint — switches to the desktop nav at 1100px
   (the rest of the layout switches at 861px)
   ============================================================ */
@media (min-width: 1100px) {
  .nav { padding-block: 24px; }
  .site-header.is-scrolled .nav { padding-block: 14px; }
  .nav__logo img { width: 114px; }
  .nav__toggle { display: none; }
  .nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 0;
    background: none;
  }
  .nav__links { flex-direction: row; gap: 36px; }
  .nav__links a { font-size: 16px; }
  .nav__cta { padding: 16px 28px; font-size: 16px; }
}

/* the full-screen overlay menu is only used below the header breakpoint */
@media (min-width: 1100px) {
  .menu { display: none !important; }
}

/* Menu items with no target page yet (empty href="") are flagged red so the
   missing sections are visible at a glance. Wire the href and the red clears. */
.nav__links a[href=""],
.nav__cta[href=""],
.footer__services a[href=""],
.footer__nav a[href=""],
.footer__legal a[href=""],
.menu__item[href=""],
.menu__cat a[href=""] {
  color: #E23B2E;
}
.footer__services a[href=""]:hover,
.footer__nav a[href=""]:hover,
.footer__legal a[href=""]:hover,
.menu__item[href=""]:hover,
.menu__cat a[href=""]:hover {
  color: #B02A20;
}

/* Active page — bold + underline on the matching menu entry */
.nav__links a.is-active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.menu__item.is-active { font-weight: 700; }
.menu__item.is-active span {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* "???" menu — gathers every section that has no page yet. Desktop nav only
   (the mobile overlay already lists these); CSS-only hover/focus reveal. */
.nav__has-drop { position: relative; }
.nav__drop-trigger {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #E23B2E;
  cursor: pointer;
}
.nav__drop-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.nav__drop {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 18px;           /* transparent bridge keeps hover alive over the gap */
  display: none;
  z-index: 200;
}
.nav__has-drop:hover .nav__drop,
.nav__has-drop:focus-within .nav__drop { display: block; }
.nav__drop-inner {
  min-width: 240px;
  padding: 22px 26px;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(37, 32, 30, 0.22);
}
.nav__drop-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 14px;
}
.nav__drop-list { display: flex; flex-direction: column; gap: 10px; }
.nav__drop-list a { font-size: 14px; color: var(--ink); }

/* ============================================================
   CORE BLOCK MAPPING
   The prototype's chrome selectors assume hand-written markup
   (.nav__links a). Core blocks render their own structure, and
   core's selectors often out-specify the ported ones:

     .wp-block-navigation .wp-block-navigation-item__content  (0,2,0)
     beats  .nav__links a                                     (0,1,1)

   These rules re-assert the design over the core defaults. Keep
   them here rather than editing the ported rules above, so the
   prototype CSS stays diffable against the static site.
   ============================================================ */

/* Header nav sits over a dark hero — links must be white. */
.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation-item__content:visited {
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* Site Logo block replaces .nav__logo img sizing. */
.site-header .wp-block-site-logo img {
	width: 91px;
	height: auto;
}

@media (min-width: 1100px) {
	.site-header .wp-block-site-logo img { width: 114px; }
}

/* Footer nav: the ported .footer__nav / .footer__services rules target `a`
   directly and lose to core for the same reason. */
.footer .wp-block-navigation .wp-block-navigation-item__content {
	color: inherit;
}

.footer__services .wp-block-navigation-item__content {
	font-size: 2.5rem;
	font-family: var(--font-display);
	text-transform: uppercase;
	line-height: 1.1;
}

/* Header CTA.
   The prototype's .btn/.nav__cta classes must NOT be placed on the Gutenberg
   button wrapper — they carry padding + background, which then apply twice
   (wrapper 268x88 around a 212x56 link). The wrapper is left unclassed and the
   inner link is styled here instead.

   Two things the removed .btn class was silently providing: display:inline-flex
   (so the wrapper shrank to content) and align-self:flex-start. Without them
   core renders .wp-block-button as display:block and it stretches to fill the
   nav. Both are restored explicitly below. */
.site-header .nav__cta-wrap {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-self: center;
}

.site-header .nav__cta-wrap .wp-block-button {
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
}

.site-header .nav__cta-wrap .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
}

/* From 1100px the header CTA is bigger than a normal button: the prototype's
   .nav__cta (16px / 16px 28px) against the .btn default (14px / 12px 20px). */
@media (min-width: 1100px) {
	.site-header .nav__cta-wrap .wp-block-button__link {
		font-size: 16px;
		padding: 16px 28px;
	}
}

/* ---- section button size step ------------------------------------------
   OPEN-QUESTIONS §4a, resolved 2026-08-07.

   theme.json gives every button 14px / 12-20. That is Figma's MOBILE step
   [368:4101]; the desktop frames all ask for 16px / 16-28 [368:3949 about-pair,
   368:558 intro band, 368:1631 event-service row, 368:2731 catering-service row].
   The prototype only ever had the small size, which is why this was filed as a
   prototype-vs-Figma conflict — it is really a missing breakpoint, and the header
   CTA above already proves the pattern exists in this design system.

   861px, not 1100px: that is the breakpoint every section stylesheet uses to go
   desktop, so the buttons grow with the layout they sit in. The header keeps its
   own 1100px rule — it is a different control with a different reason.

   ⚠️ The overlay CTA is excluded. The mobile menu is live from 861px to 1099px,
   and it is a mobile control that keeps the mobile size; without this reset it
   would be the one button that grew while its own layout stayed mobile.

   Applies to 119 buttons across 81 pages on all four networks. */
@media (min-width: 861px) {
	/* `:root` prefix is load-bearing. theme.json emits its button styles as
	   `:root :where(.wp-element-button, .wp-block-button__link)` — (0,1,0), since
	   :where() contributes nothing — and WordPress prints that block AFTER the
	   theme stylesheet. A bare `.wp-element-button` ties on specificity and loses
	   on source order; measured, the first attempt changed nothing at all.
	   Mirroring core's own selector shape reaches (0,2,0) and wins. */
	:root .wp-element-button,
	:root .wp-block-button__link {
		font-size: 16px;
		padding: 16px 28px;
	}

	/* (0,3,0), so it still beats the rule above. */
	.menu .menu__cta-wrap .wp-block-button__link {
		font-size: 14px;
		padding: 12px 20px;
	}
}

/* ---- inline link size step ----------------------------------------------
   The `Mehr erfahren` links are the text sibling of the section buttons and step
   with them: Figma draws them 16px/24 UPPER on desktop in every frame that has
   one [368:893 story, 368:904 BBQ banner, 368:2844 service columns] while
   .link-underline is a flat 14px, the mobile value. Same missing breakpoint as
   §4a, same 861px, so the link and the button beside it stay the same size. */
@media (min-width: 861px) {
	.link-underline { font-size: 16px; }
}


/* ---- block-layout gaps -------------------------------------------------
   theme.json sets blockGap: 0 so sections control their own spacing. WP turns
   that into a generated per-block rule:

     .wp-container-core-group-is-layout-<hash> { gap: 0 }        (0,1,0)

   printed in `core-block-supports-inline-css`, which loads AFTER this file.
   Any ported `gap` on a class the block also carries (`.nav__menu { gap: 40px }`)
   has the same specificity and therefore loses on source order — silently, with
   the element collapsing to gap 0.

   Every flex/grid group in a template part needs its gap re-asserted at higher
   specificity. Watch for this on every new section that uses a Group or
   Columns with a layout type. */

.site-header .nav            { gap: 16px; }
.site-header .nav__menu      { gap: 16px; }
.footer .footer__services    { gap: 0; }
.footer .footer__nav         { gap: 4px; }
.footer .footer__bottom      { gap: 4px; }
.footer .footer__legal       { gap: 24px; }

/* core/social-links is a flex layout too, and was missing from this list — so
   the ported `.footer__social { gap: 24px }` lost to the generated gap:0 and the
   five icons rendered edge to edge. Prototype and Figma [368:4048] both say 24px
   with 24x24 glyphs. */
.footer .footer__social      { gap: 24px; }

@media (min-width: 861px) {
	/* 80px, not the prototype's 160px — Figma [368:4036]. See the footer
	   corrections below. */
	.footer .footer__nav   { column-gap: 80px; row-gap: 0; }
	.footer .footer__legal { gap: 52px; }
}

/* ---- header nav spacing: Figma corrections ------------------------------
   Values where Figma [368:3929] and the prototype disagree and the prototype
   is the outlier — same situation as the footer block below.

   The design is THREE space-between siblings:

       logo (114x40)  |  links (gap 60px)  |  CTA (16px 28px)

   so the leftover width distributes into two EQUAL gaps. At the 1440 design
   width that is 146px either side of the links — the "144px" you measure in
   Figma. It is emergent free space, not an authored value.

   The prototype instead wraps links + CTA in `.nav__menu` with a fixed 40px
   between them, which collapses all the free space onto the logo side and
   leaves the links hard against the CTA (measured: 396px / 40px). Figma wins
   here, per OPEN-QUESTIONS.md §4.

   `display: contents` dissolves the `.nav__menu` box at desktop widths so its
   two children become direct flex items of `.nav` and take part in its
   space-between. Below 1100px `.nav__menu` is `display: none` and the
   hamburger overlay is used instead, so this is desktop-only and the mobile
   layout is untouched.
   ------------------------------------------------------------------------ */
/* `.nav__menu` is a grouping box that exists in the prototype's hand-written
   markup only. In the block build core's hamburger button lives INSIDE the
   navigation block, i.e. inside this wrapper — so the ported
   `.nav__menu { display: none }` would hide the hamburger along with the links,
   which is exactly what was happening below 1100px. Dissolve the box at every
   width instead: `.nav` then lays out [logo | links | CTA] directly, which is
   also the structure the design uses. */
.site-header .nav__menu { display: contents; }

@media (min-width: 1100px) {
	/* Here `gap` is a FLOOR, not the spacing: space-between adds the surplus on
	   top of it. Protects the 1100-1240 band where the surplus runs out. */
	.site-header .nav { gap: 40px; }

	/* The design's 60px, but only once there is room for it. 36px at 1100px
	   ramping to 60px at 1440px, where `.wrap` reaches its 1440 max-width and
	   the design's exact conditions hold; clamped there, so every viewport from
	   1440px up renders the design spacing.

	   Ramped rather than stepped on purpose: widening the item gap by 24px takes
	   6 x 24 = 144px out of the space-between surplus, so a hard breakpoint would
	   jerk each outer gap by 72px (218px -> 146px) on resize. */
	.site-header .nav__links {
		gap: clamp(36px, calc(36px + (100vw - 1100px) * 0.0706), 60px);
	}
}

/* ---- header nav: mobile ------------------------------------------------
   Figma's mobile header [368:4080] is two children only — the 91x32 logo and a
   48x48 gold square holding a 24px menu glyph [368:4090]. No CTA. The links
   live in the .menu overlay below.

   core/navigation's own overlay is switched off (`overlayMenu: "never"` in
   parts/header.html) because the design's overlay also carries contact details,
   an address, socials and a CTA, none of which core/navigation can host.
   --------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
	/* The mobile header carries no CTA in the design; on the overlay it
	   reappears at the bottom. */
	.site-header .nav__cta-wrap,
	.site-header .nav__links { display: none; }
}

/* Hidden by default and shown only below the breakpoint — NOT the reverse. A
   `display: none` in a min-width query would lose to the unconditional rule
   below it on source order, and the hamburger would sit on the desktop header. */
.site-header .nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: var(--gold);
	color: var(--white);
	border: none;
	cursor: pointer;
}

@media (max-width: 1099.98px) {
	.site-header .nav__toggle { display: inline-flex; }
}

/* core/navigation's own overlay is off (`overlayMenu: "never"`), but belt and
   braces: nothing of core's responsive chrome should ever paint in the header. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close { display: none; }

/* ---- desktop dropdown / sub-navigation ---------------------------------
   core/navigation renders a submenu as
     li.has-child.open-on-hover-click > a + button.submenu-icon + ul.submenu-container
   and handles open/close itself (hover, focus-within, and click for touch). Only
   the appearance is ours.

   The panel takes the scrolled header's treatment — rgba(37,32,30,0.95) over a 6px
   blur — so a dropdown opened over the hero reads as part of the header rather than
   as a light card floating on a dark image. Same values as `.site-header.is-scrolled`.

   ⚠️ Specificity: core's own rule is
     `.wp-block-navigation .has-child .wp-block-navigation__submenu-container` (0,3,0)
   which would tie with a two-class selector and win on source order. These use four
   classes to clear it outright.
   --------------------------------------------------------------------- */
/* No min-width here: core's own 200px wins even against this selector, the same
   way it keeps `display` and `padding` on the items below. The panel sizes to its
   widest label (~214px), which is fine. */
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	padding: 18px 0 14px;
	background-color: rgba(37, 32, 30, 0.95);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: none;
	border-radius: 0;
	box-shadow: 0 18px 44px rgba(37, 32, 30, 0.28);
	color: var(--white);
}

/* Flush under the parent item — `top: 100%`, no offset. A gap here looks tidier in
   a screenshot but breaks the interaction: the panel only stays open while the
   pointer is inside the parent <li>, so any space between link and panel is a dead
   zone the mouse crosses on its way down, closing the menu. Core keeps it flush for
   exactly this reason.

   `left: 0` rather than a negative offset: the panel's left edge lines up with the
   parent <li>, and core's 16px item padding then puts the submenu label directly
   under the parent label. */
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	top: 100%;
	left: 0;
}

/* Typography and colour only. `display` and `padding` are deliberately NOT set:
   core's own submenu rule wins on those two even against a four-class selector,
   and its 8px/16px is perfectly reasonable — the design has no dropdown to match,
   so there is nothing to be gained by fighting it. Declaring them here anyway
   would just be CSS that lies about what renders. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--white);
	text-decoration: none;
	white-space: nowrap;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	color: var(--gold);
}

/* The chevron core adds next to a parent item.

   Taken OUT of the layout flow on purpose. In flow it widens the links group by
   ~14px, and because the header distributes leftover width with space-between,
   that comes straight off the two outer gaps — 146.2px each drops to 139.4px, i.e.
   the header stops matching Figma the moment a dropdown is added. Absolute keeps
   the design spacing exactly and still shows the affordance; there is 36-60px of
   gap after the label for it to sit in.

   `.has-child` is already `position: relative` (core needs it for the panel), so
   this needs no extra positioning context. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: 6px;
	padding: 0;
	pointer-events: none;
	/* The icon is a <button>, so it does NOT inherit the nav link's colour — it was
	   computing to ink (#25201E) against a dark header and effectively disappearing.
	   Set it to match the link beside it; the light-hero override below flips both
	   together. */
	color: var(--white);
	transition: color .2s ease;
}

/* core draws the chevron as a STROKED path with fill="none" on the svg, so
   `fill: currentColor` colours nothing (and would blob the open path if it did). */
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	fill: none;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-icon svg path {
	stroke: currentColor;
	stroke-width: 1.5;
}

/* A hovered parent should not lose its own underline treatment. */
.site-header .wp-block-navigation .has-child > .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* The submenu is desktop chrome only — below 1100px the whole inline nav is
   hidden and the overlay takes over, which has its own two-panel treatment. */
@media (max-width: 1099.98px) {
	.site-header .wp-block-navigation__submenu-container { display: none; }
}

/* ---- button hover ------------------------------------------------------
   The prototype has `.btn--gold:hover { filter: brightness(1.06) }`, but that class
   is never on a Gutenberg button — the block build renders
   `.wp-block-button__link.wp-element-button`, so buttons had NO hover state at all,
   and theme.json's `elements.button:hover` only unsets a duotone filter.

   color-mix rather than `filter: brightness()`: brightness lightens the label too
   (white survives only because it clamps at 255) and would wash out any dark-on-light
   button later. Mixing the background alone leaves the text untouched, which is what
   was asked for.

   Brand-aware by construction — `--gold` is the `brand` preset, so each site lightens
   its own colour: #C78F54 → #CD9A65, #6B462C → #7A5841, #8C5A3C → #986A50,
   #B07C8E → #B88999. A 10% white mix shifts 32-54 sRGB units: clearly visible, not loud.

   theme.json sets the button background inside :where() (zero specificity), so a plain
   class selector wins comfortably. */
.wp-element-button,
.wp-block-button__link,
.site-header .nav__toggle {
	transition: background-color .2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.site-header .nav__toggle:hover {
	background-color: color-mix(in srgb, var(--gold) 90%, #fff);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* ============================================================
   MOBILE FULL-SCREEN MENU OVERLAY
   Ported from the prototype's `.menu`; Figma [368:4306 / 4217 / 4275 / 4357].
   Values are the prototype's, not re-derived.

   Two departures from the ported CSS, both forced by the block build:

   1. Visibility is a CLASS (`.menu.is-open`), not the `hidden` attribute —
      core/group cannot emit `hidden`, and setting it from JS would flash the
      whole menu on first paint.
   2. Every gap is re-asserted at `.menu` specificity, because core prints
      `gap` for each flex/grid layout container at (0,1,0) and later in source
      order than this file. The trap documented above for `.nav__menu`.
   ============================================================ */
.menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--sand);
	display: none;
	flex-direction: column;
	overflow: hidden;
}

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

/* Belt and braces: the overlay is desktop-irrelevant, and this also stops a
   stale `is-open` surviving a resize past the breakpoint. */
@media (min-width: 1100px) {
	.menu { display: none !important; }
}

.menu .menu__bar {
	flex: 0 0 auto;
	padding-block: 16px;
}

/* The light logo mark inverted for the sand ground, rather than a second asset —
   same trick the light-hero pages use on the header. */
.menu .menu__logo img {
	width: 91px;
	height: auto;
	filter: brightness(0);
}

.menu__close,
.menu__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: none;
	cursor: pointer;
	color: #A49B91;
}

.menu__close {
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 1px solid var(--line);
	flex: 0 0 auto;
}

/* panels share the space below the bar; only the active one shows */
.menu .menu__panel {
	flex: 1 1 auto;
	min-height: 0;
	display: none;
	flex-direction: column;
	padding-bottom: 20px;
}

.menu .menu__panel.is-active { display: flex; }

/* ---- level 1: main menu (content bottom-weighted) ---- */
.menu .menu__panel--root { gap: 40px; overflow-y: auto; }

/* core/navigation: the <ul> is the flex container, and it carries the block's
   className too, so target the ul explicitly. */
/* Level 1 is TOP-aligned. The prototype and Figma [368:4321] both bottom-weight it
   (`justifyContent: flex-end`), which looks identical at the 360x720 design size
   because the content fills the frame — but on a taller phone it opens with a band
   of empty space under the logo. Client's call 2026-08-07: align top. Achieved by
   NOT setting `margin-top: auto` on `.menu__panel--root > .menu__nav`. */

.menu ul.menu__nav,
.menu .menu__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}

.menu .menu__nav .wp-block-navigation-item { display: block; }

.menu .menu__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

.menu .menu__nav .wp-block-navigation-item__content:hover { color: var(--gold); }

/* `current-menu-ancestor` is added by menu-overlay.js for the Catering opener,
   which points at "#catering" and so is invisible to core's own matching. It is
   the mobile half of what core does for "Leistungen" in the desktop header. */
.menu .menu__nav .current-menu-item > .wp-block-navigation-item__content,
.menu .menu__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* The submenu opener. The item is an ordinary navigation link pointing at
   "#catering" so it stays editable in the menu; the arrow is decoration and the
   panel switch is menu-overlay.js. Icon is the prototype's assets/menu-arrow.svg
   inlined, so the overlay needs no image requests. */
.menu .menu__nav .wp-block-navigation-item__content[href$="#catering"]::after {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: no-repeat center / 40px 40px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M10 20H30M25.8824 16L30 20L25.8824 24" stroke="%2325201E" stroke-width="1.5" stroke-linejoin="round"/></svg>');
}

.menu .menu__contact { display: flex; flex-direction: column; gap: 32px; }
.menu .menu__lines   { display: flex; flex-direction: column; gap: 4px; }
.menu .menu__lines a { font-size: 14px; color: #000; text-decoration: none; }
.menu .menu__lines a:hover { color: var(--gold); }
.menu .menu__addr    { display: flex; flex-direction: column; gap: 12px; }
.menu .menu__addr p  { font-size: 14px; line-height: 1.45; }

.menu .menu__social { display: flex; align-items: center; gap: 24px; }
.menu .menu__social .wp-block-social-link { margin: 0; }
.menu .menu__social .wp-social-link svg { width: 24px; height: 24px; }

/* Full-bleed CTA, as the prototype's `.menu__cta { width: 100% }`. */
.menu .menu__cta-wrap { flex: 0 0 auto; display: flex; }
.menu .menu__cta-wrap .wp-block-button { width: 100%; }
.menu .menu__cta-wrap .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* ---- level 2: Catering München submenu (internal scroll) ---- */
.menu .menu__panel--sub { gap: 32px; }

.menu__back {
	flex: 0 0 auto;
	align-self: flex-start;
	gap: 8px;
	padding: 0;
	border: none;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: rgba(37, 32, 30, 0.4);
}

.menu__back:hover { color: var(--ink); }

.menu .menu__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-right: 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.menu .menu__scroll::-webkit-scrollbar { width: 2px; }
.menu .menu__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.menu .menu__scroll::-webkit-scrollbar-track { background: transparent; }

.menu .menu__cat { display: flex; flex-direction: column; gap: 8px; }

.menu .menu__cat h3 {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 28px;
	text-transform: uppercase;
	color: var(--ink);
}

.menu ul[class*="menu__cat-list"],
.menu [class*="menu__cat-list"] .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}

.menu [class*="menu__cat-list"] .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	text-transform: none;
	color: #000;
	text-decoration: none;
}

.menu [class*="menu__cat-list"] .wp-block-navigation-item__content:hover { color: var(--gold); }

/* ⚠️ The active state for level 2, at (0,4,0). The one near the top of this file
   (`.menu__cat-list .current-menu-item > a`) is (0,2,0) and sits ~1,250 lines
   ABOVE the rule right here, whose `text-decoration: none` therefore erased it —
   so opening the overlay on, say, /firmen-event-catering/ marked nothing even
   though core had put `current-menu-item` on the item. Same shape as the desktop
   dropdown; see §9.54.

   Treatment matches level 1 of the same overlay (bold + underline) rather than
   the desktop dropdown's underline alone: it is one component, and level 1 sets
   the house style. No Figma frame shows an active item anywhere in the nav. */
.menu [class*="menu__cat-list"] .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Scroll lock while the overlay is open, set by menu-overlay.js. */
body.has-menu-open { overflow: hidden; }

/* ---- footer: Figma corrections -----------------------------------------
   Values where Figma [368:4028] and the prototype disagree and the prototype
   is the outlier. Applied at the desktop breakpoint only, since the Figma frame
   is the 1440 desktop design and says nothing about the mobile stack.

     4046  address -> social gap      8px  -> 12px
     4068  contact lines row gap      4px  ->  2px
     4072  bottom bar padding-top    16px -> 24px
     4036  nav column gap           160px -> 80px   (above)
     text  footer link line-height   1.6  -> 20px

   line-height matters more than it looks: with row-gap 0 and `li` margin 2px,
   20px + 2px reproduces Figma's 22px row rhythm, where the inherited 1.6
   (22.4px) drifted the columns by ~2.4px per row.

   NOT changed here — content decisions, see BLOCK-INVENTORY.md:
     - Figma lists 6 nav items (…Rezepte) in 3 rows; the prototype has 7
       (…Galerie, Kontakt) in 4. Rezepte lives on the Kochschule site.
     - Figma's address is one left-aligned line; the prototype breaks it into
       two right-aligned lines. */
@media (min-width: 861px) {
	.footer .footer__contact      { gap: 12px; }
	.footer .footer__contactlines { gap: 2px; }
	.footer .footer__bottom       { padding-top: 24px; }

	.footer .footer__nav a,
	.footer .footer__contactlines a { line-height: 20px; }
}

/* ---- header over a light hero -------------------------------------------
   blog.php and gallery.php put the fixed header over a CREAM hero, so the
   white nav and white logo are invisible. The prototype solved this with a
   per-page override; a block theme has no per-page stylesheet, so this keys
   off the light hero actually being present via :has().

   Once scrolled the header gains its own dark background, so both revert. */
/* Selector list, not a single class: any section that opens a page on a light
   background needs this. Currently the light hero (blog, galerie) and the job
   header (job-detail). ADD NEW LIGHT PAGE-OPENERS HERE or their header will
   render white-on-cream and effectively disappear.

   ⚠️ `> li >`, i.e. TOP-LEVEL ITEMS ONLY. Written flat, this also recoloured the
   items inside the dropdown — which is its own dark panel, so on /blog/ and
   /galerie/ the submenu opened as a black rectangle with black text in it. The
   submenu's own `color: var(--white)` is (0,4,0) and this rule is (0,4,1), so it
   won. Scoping by the top-level `ul` is what keeps them apart: core marks the
   dropdown `wp-block-navigation__submenu-container` and never
   `wp-block-navigation__container`.

   The chevron is deliberately left unscoped — it only ever renders on a
   top-level item, and it does need to turn ink here. */
/* ⚠️ `body.db-page-plain` is the plain page (§9.68, rewritten in §9.70). The
   header is `position: fixed` and transparent, painted for a dark hero image; a
   page the client simply typed has no hero at all, so the nav and logo rendered
   white on cream and vanished.
   It was briefly a third `:has()` argument keyed on the first child. That broke
   the moment a breadcrumb block was added — the block renders
   `db-hero__breadcrumb`, the selector saw `db-`, and the page silently lost the
   ink treatment along with all its other plain-page styling. The class is set in
   PHP from the BLOCK ATTRIBUTES, which a rendered element cannot spoof. */
body:has(.db-hero--light, .db-job-head) .site-header:not(.is-scrolled) .wp-block-navigation__container > li > .wp-block-navigation-item__content,
body:has(.db-hero--light, .db-job-head) .site-header:not(.is-scrolled) .wp-block-navigation__container > li > .wp-block-navigation-item__content:visited,
body:has(.db-hero--light, .db-job-head) .site-header:not(.is-scrolled) .wp-block-navigation__submenu-icon,
body.db-page-plain .site-header:not(.is-scrolled) .wp-block-navigation__container > li > .wp-block-navigation-item__content,
body.db-page-plain .site-header:not(.is-scrolled) .wp-block-navigation__container > li > .wp-block-navigation-item__content:visited,
body.db-page-plain .site-header:not(.is-scrolled) .wp-block-navigation__submenu-icon {
	color: var(--ink);
}

body:has(.db-hero--light, .db-job-head) .site-header:not(.is-scrolled) .wp-block-site-logo img,
body.db-page-plain .site-header:not(.is-scrolled) .wp-block-site-logo img {
	filter: brightness(0);
}

/* ============================================================
   HOVER TRANSITIONS — nav links, submenu, overlay, footer

   `text-decoration-line` is NOT animatable: none → underline is a discrete
   switch, which is why the underline used to snap in no matter what transition
   was declared. `text-decoration-color` IS animatable, so the underline is
   present at rest and simply transparent, then fades to currentColor on hover.
   Nothing moves — an underline does not affect layout — and with no transition
   support the worst case is the old instant appearance.

   Placed at the end of the file on purpose: several of these selectors also set
   `text-decoration: none` earlier at the same specificity, and the rest state
   below has to win on source order.
   ============================================================ */

/* --- header: top-level nav + submenu items --- */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: color .2s ease, text-decoration-color .2s ease;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	text-decoration-color: currentColor;
}

/* The submenu also shifts to gold; both properties ride the same transition.
   Thickness is pinned to 1px at rest as well — left at `auto` it would step to
   1px the instant the hover rule applies, a small discrete jump inside an
   otherwise smooth fade. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	transition: color .2s ease, text-decoration-color .2s ease;
}

/* The panel itself fades rather than blinking in. core toggles visibility and
   opacity; opacity is animatable, visibility steps at the end of the transition
   so the panel is not click-through while fading out. */
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	transition: opacity .2s ease, visibility .2s ease;
}

/* --- mobile overlay --- */
.menu .menu__nav .wp-block-navigation-item__content,
.menu [class*="menu__cat-list"] .wp-block-navigation-item__content,
.menu .menu__lines a,
.menu__back,
.menu__close {
	transition: color .2s ease;
}

/* --- footer --- */
.footer .footer__nav a,
.footer .footer__contactlines a,
.footer .footer__services a,
.footer .footer__legal a {
	transition: color .2s ease;
}


/* ---- mobile section headings -------------------------------------------
   OPEN-QUESTIONS §12, applied 2026-08-07.

   Figma uses ONE style for every section heading on mobile: `display-2xl`,
   24px / 32px. Verified on four separate frames — "Ihre Ansprechpartner"
   [368:6011], "Menü" [368:4740], "Firmenevent Catering Beispiele" [368:4512]
   and the daily menu [368:4700]. The theme instead gives each section its own
   `clamp()` whose middle `vw` term dominates below 861px, so the same heading
   rendered anywhere from 24px to 46.8px depending on which section it was in.
   At 390px it had started breaking words mid-token (ANSPRECHPARTNE / R).

   Done as one override rather than 20 edits to the section files: each of those
   clamps still has to produce the right DESKTOP size, and several sections rely
   on the clamp's own maximum rather than an explicit min-width rule. Changing
   the clamps would mean re-deriving every one of them.

   `:root:root` is (0,3,0) on purpose. global.css is enqueued BEFORE the section
   stylesheets, so a plain class ties and loses on source order — and the
   per-instance `--title-25` / `--title-45` variants are themselves (0,2,0). This
   has to outrank both. See Trap 26 for the same lesson in theme.json's output.

   NOT included: .db-hero__title and .db-banner__title. Those are full-bleed
   statement headings rather than section headings, their mobile frames were not
   checked, and the hero already measures correctly. */
@media (max-width: 860.98px) {
	:root:root .db-answers__heading,
	:root:root .db-carousel__title,
	:root:root .db-checklists__title,
	:root:root .db-clients__title,
	:root:root .db-columns__col h2,
	:root:root .db-faq__title,
	:root:root .db-form__title,
	:root:root .db-gallery__title,
	/* ⚠️ `.db-job-head__title` was in this list and is NOT a section heading —
   it is the job page's h1. The 1.5rem cap held it at 24px on mobile where
   its frame (368:5211) says 36/40, and job.css could not win because
   `:root:root` makes this (0,3,0). Page titles belong with `.db-hero__title`,
   which was never in here. */
:root:root .db-intro-band__title,
		:root:root .db-joblist__title,
	:root:root .db-menu__title,
	:root:root .db-mosaic__title,
	:root:root .db-packages__title,
	:root:root .db-philosophy__head h2,
	:root:root .db-posts__heading,
	:root:root .db-pricelist__title,
	:root:root .db-process__title,
	:root:root .db-rows__title,
	:root:root .db-service-cols__head h2,
	:root:root .db-story__text h2,
	:root:root .db-story-pair__title,
	:root:root .db-team__title,
	:root:root .db-testimonials__title,
	:root:root .db-tiles__title,
	:root:root .db-about-pair__heading h2,
	:root:root .db-cardgrid__head h2,
	/* .db-banner__title, not .db-experience__title — the homepage band was folded
	   into the banner block (§9.37). This also settles the item §9.33 left open:
	   the banner title WAS excluded from this pass as a "statement heading", and
	   Figma 368:5934 / 368:4166 both show it at display-2xl = 24/32 on mobile, so
	   it belongs here after all. .db-hero__title is still genuinely open. */
	:root:root .db-banner__title {
		font-size: 1.5rem;
		line-height: 1.3333;
	}
}