/* ==========================================================================
   Dropdown navigation — cascading flyout pattern.

   Level 2 is a single-column panel; entries that have children carry a right
   chevron and open level 3 as a flyout panel to their right. Kept in its own
   file so assets/css/site.css stays a faithful port of the reference build.

   Colours come from the reference's own custom properties: a light panel with
   purple text, which is the same pairing the design uses for its light
   surfaces (13.29:1).
   ========================================================================== */

/* ---- Top-level bar ------------------------------------------------------ *
   The reference `.nav-links` is `display:flex; gap:28px; justify-content:
   flex-end` with no alignment or wrapping rules, because its own menu was
   seven short single-word items. The real menu has longer labels, so flex
   shrank them and "Über uns" broke onto two lines — which also knocked the
   items out of vertical alignment with each other. Hold the row on one line
   and centre everything on it.                                              */

.kiez-site .nav-links {
  align-items: center;
  flex-wrap: nowrap;
}

.kiez-site .nav-links > a,
.kiez-site .nav-item > .nav-top {
  white-space: nowrap;
  flex-shrink: 0;
}

.kiez-site .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.kiez-site .nav-item > .nav-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kiez-site .nav-caret {
  font-size: .65em;
  line-height: 1;
  transition: transform .25s;
}
.kiez-site .nav-item:hover > .nav-top .nav-caret,
.kiez-site .nav-item:focus-within > .nav-top .nav-caret {
  transform: rotate(180deg);
}

/* Between the mobile drawer (≤960px) and comfortable desktop the seven German
   labels get tight once they can no longer wrap. Tighten the gap rather than
   let them collide. */
@media (min-width: 961px) and (max-width: 1200px) {
  .kiez-site .nav-links { gap: 18px; }
}

/* ---- Level 2 panel ------------------------------------------------------ */
.kiez-site .nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: #fff;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 18px 48px rgba(60, 31, 102, .22);
  padding: 14px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
  z-index: 120;
}

/* :focus-within keeps the whole cascade keyboard-operable with no JS. */
.kiez-site .nav-item:hover > .nav-sub,
.kiez-site .nav-item:focus-within > .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hover bridge between the button and its panel. It hangs under the item, as
   wide as the item only: on the 300px-wide panel it lay over the lower half of
   the next button, so with "Über uns" open the pointer on "Kompetenz" still
   counted as "Über uns" and its click landed in the wrong panel (board 10-14). */
@media (min-width: 961px) {
  .kiez-site .nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }
}

.kiez-site .nav-sub-inner {
  display: flex;
  flex-direction: column;
}

.kiez-site .nav-col {
  position: relative;   /* anchor for the level-3 flyout */
}

/* NOTE ON THE SELECTORS BELOW — they are written `.nav-links .nav-sub-link`,
   never `.nav-sub-link` alone, and that extra ancestor is load-bearing.

   site.css:66 colours the whole bar with `.kiez-site .nav-links a` — two
   classes PLUS a type selector, so (0,2,1). A bare `.kiez-site .nav-sub-link`
   is (0,2,0), one element-selector short, so despite nav-menu.css loading after
   site.css the bar's pale on-dark #CEC7D9 won and every level-2 entry rendered
   near-invisible on the white panel. (Level 3 escaped only by accident:
   `.nav-sub2 a` carries its own type selector, ties at (0,2,1) and wins on
   source order.)

   Adding `.nav-links` takes these to (0,3,0) and makes the win explicit rather
   than order-dependent. */

.kiez-site .nav-links .nav-sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  /* The panel is white, so the entries take the colour the top-level links
     have on the SOLID nav (site.css:67), not the on-dark colour. */
  color: var(--purple);
  padding: 11px 26px;
  line-height: 1.35;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.kiez-site .nav-links .nav-sub-link:hover,
.kiez-site .nav-links .nav-sub-link:focus-visible,
.kiez-site .nav-links .nav-col:focus-within > .nav-sub-link {
  background: var(--violet-06);
  color: var(--violet);
}

/* Right chevron marks an entry that opens a further panel. */
.kiez-site .nav-links .nav-sub-link.has-children::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  opacity: .55;
  transform: translateY(-1px);
}

/* ---- Level 3 flyout ----------------------------------------------------- */
.kiez-site .nav-sub2 {
  position: absolute;
  top: -14px;                 /* align with the parent panel's padding */
  left: 100%;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: 0 18px 48px rgba(60, 31, 102, .22);
  padding: 14px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
  z-index: 130;
}
.kiez-site .nav-col:hover > .nav-sub2,
.kiez-site .nav-col:focus-within > .nav-sub2,
.kiez-site .nav-col.is-open > .nav-sub2 {   /* is-open: first tap on a touch screen, site.js (responsive check 10-12) */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kiez-site .nav-links .nav-sub2 a {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
  padding: 10px 26px;
  line-height: 1.35;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.kiez-site .nav-links .nav-sub2 a:hover,
.kiez-site .nav-links .nav-sub2 a:focus-visible {
  background: var(--violet-06);
  color: var(--violet);
}

/* Near the right edge, open panels leftwards so they stay on screen.

   The links sit right-aligned in the bar, so panels opening at left:0 (and
   flyouts at left:100%) ran past the viewport and were clipped by
   `.kiez-site { overflow-x: hidden }` — measured with the real font, the
   Aktuelles panel and the Apps flyouts were cut off at every desktop width up
   to and including 1920px (#8950/#8951). The old rule here counted the bare
   "Kontakt" link among the last two children and so only reached Aktuelles,
   which has no flyouts.

   site.js measures each panel and sets .nav-sub--end / .nav-sub2--start
   wherever one would overflow, which keeps working when the menu is edited.
   The :nth-last-child rule is the no-JS fallback for the last three items. */
.kiez-site .nav-item:nth-last-child(-n+4) > .nav-sub,
.kiez-site .nav-sub.nav-sub--end {
  left: auto;
  right: 0;
}
.kiez-site .nav-item:nth-last-child(-n+4) .nav-sub2,
.kiez-site .nav-sub2.nav-sub2--start {
  left: auto;
  right: 100%;
  border-radius: var(--r) 0 0 var(--r);
}

/* ---- Mobile ------------------------------------------------------------- */
/* Hover cascades do not work on touch: inside the drawer everything is
   expanded and indented instead. */
@media (max-width: 960px) {
  .kiez-site .nav-item { display: block; width: 100%; }
  .kiez-site .nav-item > .nav-top { justify-content: space-between; width: 100%; }
  .kiez-site .nav-caret { display: none; }

  .kiez-site .nav-sub,
  .kiez-site .nav-sub2 {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 6px 14px;
  }
  .kiez-site .nav-links .nav-sub-link,
  .kiez-site .nav-links .nav-sub2 a {
    color: #fff;
    white-space: normal;
    padding: 9px 4px;
  }
  .kiez-site .nav-links .nav-sub-link:hover,
  .kiez-site .nav-links .nav-sub2 a:hover { background: transparent; color: var(--orange); }
  .kiez-site .nav-links .nav-sub-link.has-children::after { content: ""; }
  .kiez-site .nav-sub2 {
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .25);
  }

  /* Responsive check 10-12: rules meant for the white bar and the white
     desktop panel reached the purple drawer. Once the nav was solid, level 2
     turned #A58FD9 (.nav--solid .nav-links a, site.css/chrome.css, 0,3,1),
     the wordmark turned purple on purple, focus was violet on purple
     (2.4:1), and the bare "Kontakt" link sat centred. */
  .kiez-site .nav-links { align-items: stretch; }
  .kiez-site .nav-links a.nav-sub-link { color: #fff; }
  .kiez-site .nav:has(.nav-links.open) .wm-purple { color: #ECE9F0; }
  .kiez-site .nav-links .nav-col:focus-within > .nav-sub-link:focus-visible,
  .kiez-site .nav-links .nav-sub2 a:focus-visible { background: transparent; color: var(--orange); }
  .kiez-site .nav-links .nav-col:focus-within > .nav-sub-link:not(:focus-visible) { background: transparent; color: #fff; }
  .kiez-site .nav-links a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }   /* tokens.css rings violet on chrome pages */
}

/* ---- Mobile drawer: scrollable, starting below the bar (2026-10-05) ----- *
   The reference drawer is a full-screen flex column with
   `justify-content: center` and no overflow handling — fine for its seven
   short links, but the real menu with every sub-page expanded is several
   screens tall. Centred, it overflowed at the top *and* bottom, and without
   overflow-y nothing could be scrolled: most entries were unreachable on a
   phone, and items showed through behind the logo (browser-tested at 390px).
   Now: the drawer begins under the bar (90px, 50px once compact), lists from
   the top and scrolls; the bar turns solid while the drawer is open. */
@media (max-width: 960px) {
  .kiez-site .nav-links {
    top: 90px;
    justify-content: flex-start;
    padding: 16px 40px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .kiez-site .nav--compact .nav-links { top: 50px; }
  .kiez-site.admin-bar .nav-links { top: calc(90px + var(--kiez-bar, 46px)); }   /* --kiez-bar: inc/home.php, site.js */
  .kiez-site.admin-bar .nav--compact .nav-links { top: calc(50px + var(--kiez-bar, 46px)); }
  .kiez-site .nav:has(.nav-links.open)::after { background: var(--purple); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 600px) {
  .kiez-site .nav-links { padding: 12px 24px 40px; }
}

/* ---- Top-level items with a sub-menu are buttons (#8818, 2026-10-06) ---- *
   They only open their panel; the overview pages are the sub-items. The
   button mirrors the link styles of site.css:66–72 (bar) and :487–505
   (drawer) so nothing changes visually. `.is-open` is set by site.js on
   click/tap and mirrors :hover / :focus-within for touch and keyboard. */
.kiez-site .nav-links button.nav-top {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: inherit;
  color: #CEC7D9;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color .25s;
}
.kiez-site .nav--solid .nav-links button.nav-top { color: var(--purple); }
.kiez-site .nav-links button.nav-top:hover,
.kiez-site .nav-item:focus-within > button.nav-top,
.kiez-site .nav-item.is-open > button.nav-top { color: var(--orange); }
.kiez-site .nav--solid .nav-item.is-active > button.nav-top { color: var(--violet); }
/* #9110: sub-pages now open with the transparent nav over the purple band,
   where the active section looked like every other item; white there, as
   #8801 marks active items on dark. The drawer (≤960px) has its own colours. */
@media (min-width: 961px) {
  .kiez-site .nav:not(.nav--solid) .nav-item.is-active > button.nav-top { color: var(--white); }
}
.kiez-site .nav-links button.nav-top:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.kiez-site .nav-item.is-open > .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; }
.kiez-site .nav-item.is-open > .nav-top .nav-caret { transform: rotate(180deg); }

@media (min-width: 1800px) {
  .kiez-site .nav-links button.nav-top { font-size: 18px; }
}
@media (max-width: 960px) {
  /* In the drawer every panel is expanded, so the button is a section label. */
  .kiez-site .nav-links button.nav-top,
  .kiez-site .nav--solid .nav-links button.nav-top {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #A58FD9;
    padding: 12px 0;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: default;
  }
}
/* Escape, or the pointer moving on to another entry (site.js): keep a panel
   shut while its button still has focus, so only one is open per level. */
.kiez-site .nav-item.is-dismissed > .nav-sub,
.kiez-site .nav-item.is-dismissed:hover > .nav-sub,
.kiez-site .nav-item.is-dismissed:focus-within > .nav-sub,
.kiez-site .nav-col.is-dismissed > .nav-sub2,
.kiez-site .nav-col.is-dismissed:hover > .nav-sub2,
.kiez-site .nav-col.is-dismissed:focus-within > .nav-sub2 { opacity: 0; visibility: hidden; pointer-events: none; }

/* Skip link (inc/chrome.php): off-screen until it gets keyboard focus, then
   above the fixed nav (and below the WordPress toolbar when logged in). */
.kiez-site .kiez-skip-link {
  position: fixed; left: 16px; top: -200px; z-index: 1001;
  padding: 10px 18px; border-radius: var(--r, 8px);
  background: var(--white, #fff); color: var(--purple, #3C1F66);
  font-family: var(--display); font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 24px rgba(60, 31, 102, .25);
}
.kiez-site .kiez-skip-link:focus { top: calc(16px + var(--wp-admin--admin-bar--height, 0px)); outline: 2px solid var(--orange, #EC6329); outline-offset: 2px; }
/* The skip link focuses the page wrapper (tabindex -1, site.js); no ring
   around the whole page. */
.kiez-site #confera-page-wrapper:focus { outline: none; }

/* Burger: a 32 × 44.5px tap area around the 20 × 14.5px bars (responsive
   check 2026-10-12); the negative margin keeps the bars where they were.
   background/border: chrome-only pages lack site.css's button reset. */
.kiez-site .nav-burger { padding: 15px 6px; margin: -15px -6px; background: none; border: 0; }

/* The logo link filled the whole first grid column (672px at 1440), so a
   click anywhere in the left half went home and the focus ring was a huge
   empty box (2026-10-12). */
.kiez-site .nav-logo { justify-self: start; }

/* ---- Bar colour after scrolling (board 2026-10-14, variant A) ---- *
   site.css/chrome.css made the scrolled bar 92 % white with a blur, so it
   looked white over white sections and purple-grey over purple ones. Solid
   light purple-grey with a line at the bottom instead: the same on every
   background. The transparent bar over the hero/page header stays (#9110).
   Here because nav-menu.css loads on both full-design and chrome-only pages. */
.kiez-site .nav--solid::after {
  background: #EFEDF3;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(60, 31, 102, .16);
}

/* ---- Footer: funding and cooperation notice (board 2026-10-14) ---- *
   Compliance: the wording of the DH.NRW / MKW reference ("Gefördert
   durch:", "Ein Kooperationsvorhaben empfohlen durch die:") and the logos in
   their versions for dark grounds, shown as they are. site.css and
   chrome.css whitened them with a filter at 75 % opacity, which also turned
   the coat of arms into a white outline. Desktop: third column of the footer
   grid, right of the links, the ministry on top and DH.NRW below it (user,
   2026-10-14). Up to 960px: full width under the links, side by side while
   they fit. Here because nav-menu.css loads on both full-design and
   chrome-only pages. Logo heights stay as in site.css. */
.kiez-site .footer .footer-partners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
@media (max-width: 960px) {
  .kiez-site .footer .footer-partners { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 40px 48px; }
}
.kiez-site .footer .footer-partner-label {
  font-family: var(--display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--white);
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 16px;
}
/* MKW and DH.NRW: the official footer lockups (label and logo in one file,
   2026-10-19 / 2026-10-20), shown at the column width instead of the 72px
   logo height. At the same width both labels have the same cap height. */
.kiez-site .footer .footer-partner--mkw img,
.kiez-site .footer .footer-partner--dh img { width: min(360px, 100%); height: auto; }
.kiez-site .footer .footer-partner img,
.kiez-site .footer .footer-partner a:hover img { filter: none; opacity: 1; }
.kiez-site .footer .footer-partner a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.kiez-site .footer > .wrap > .footer-copy { margin-top: 64px; }
@media (max-width: 600px) {
  .kiez-site .footer > .wrap > .footer-copy { margin-top: 48px; }
}

/* ---- Top bar (client request 2026-10-21, inc/chrome.php) ---------------- *
   Content from the Customizer (General > Top Bar), colour from "Farbe der
   Leiste" (theme mod kiez_topbar_style). The first violet strip did not sit
   well on the hero (user, 2026-10-21), so:
   - dark (default): the purple of the header band, a hairline below; on the
     hero and the band it reads as part of the header. Bold text in gold
     (8:1), an orange dot before the first text.
   - gold: Token Gold with purple text (8.1:1), the most attention.
   - light: pale lilac with purple text, violet for bold text (4.8:1).
   A lone text (one side only) is centred, as announcement bars are. The dot
   pulses twice and then rests (no endless motion, WCAG 2.2.2); none when the
   text brings its own icon. Colours set inline in the Customizer text
   (copied from another site) give way to the bar's colours.
   The bar is in the page flow: hero, band and plain pages start below it. It
   scrolls away and the fixed nav rides on its bottom edge until it reaches
   the top (--kiez-tb-bottom, site.js), as the nav already follows WordPress'
   toolbar on phones (--kiez-bar). In the burger layout (≤960px) the zones
   stack and centre. */
.kiez-site .kiez-topbar {
  --tb-bg: #2E1752;
  --tb-fg: #F2ECFF;
  --tb-strong: var(--gold, #F0C808);
  --tb-line: rgba(255, 255, 255, .5);
  --tb-dot: var(--orange, #EC6329);
  --tb-focus: var(--gold, #F0C808);
  position: relative;
  background: var(--tb-bg);
  color: var(--tb-fg);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
}
.kiez-site .kiez-topbar--gold {
  --tb-bg: var(--gold, #F0C808);
  --tb-fg: var(--purple, #3C1F66);
  --tb-strong: var(--purple, #3C1F66);
  --tb-line: rgba(60, 31, 102, .55);
  --tb-dot: var(--purple, #3C1F66);
  --tb-focus: var(--purple, #3C1F66);
  border-bottom-color: rgba(60, 31, 102, .12);
}
.kiez-site .kiez-topbar--light {
  --tb-bg: #F6F2FC;
  --tb-fg: var(--purple, #3C1F66);
  --tb-strong: var(--violet, #8635F6);
  --tb-line: rgba(134, 53, 246, .5);
  --tb-dot: var(--orange, #EC6329);
  --tb-focus: var(--violet, #8635F6);
  border-bottom-color: rgba(134, 53, 246, .12);
}
.kiez-site .kiez-topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px 24px;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 32px;
}
.kiez-site .kiez-topbar-inner:has(> .kiez-topbar-zone:only-child) { justify-content: center; text-align: center; }
.kiez-site .kiez-topbar-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  min-width: 0;
}
.kiez-site .kiez-topbar-right { margin-left: auto; justify-content: flex-end; text-align: right; }
.kiez-site .kiez-topbar-zone:only-child { margin: 0; justify-content: center; text-align: center; }
.kiez-site .kiez-topbar-text { min-width: 0; overflow-wrap: anywhere; }
.kiez-site .kiez-topbar-text p { margin: 0; }
.kiez-site .kiez-topbar :is(strong, b) { font-weight: 700; color: var(--tb-strong); letter-spacing: .01em; }
.kiez-site .kiez-topbar [style*="color"] { color: inherit !important; }
.kiez-site .kiez-topbar :is(strong, b)[style*="color"] { color: var(--tb-strong) !important; }
.kiez-site .kiez-topbar i[class*="fa-"] { vertical-align: -1px; }
.kiez-site .kiez-topbar-inner > .kiez-topbar-zone:first-child > .kiez-topbar-text:not(:has(i[class*="fa-"]))::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 10px 0 2px;
  border-radius: 50%;
  background: var(--tb-dot);
  vertical-align: 1px;
  animation: kiezTbPulse 1.8s ease-out 2;
}
@keyframes kiezTbPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tb-dot) 60%, transparent); }
  80%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tb-dot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .kiez-site .kiez-topbar-text::before { animation: none !important; }
}
.kiez-site .kiez-topbar a {
  color: var(--tb-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--tb-line);
  transition: text-decoration-color .2s;
}
.kiez-site .kiez-topbar a:hover { color: var(--tb-fg); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.kiez-site .kiez-topbar a:focus-visible { outline: 2px solid var(--tb-focus); outline-offset: 2px; border-radius: 2px; }
.kiez-site .kiez-topbar-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kiez-site .kiez-topbar-menu li { margin: 0; padding: 0; list-style: none; }
.kiez-site .kiez-topbar-menu a { font-family: var(--display); font-weight: 600; text-decoration-color: transparent; }
.kiez-site .kiez-topbar-menu a[aria-current] { text-decoration-color: currentColor; }
.kiez-site .kiez-topbar-social { display: flex; align-items: center; gap: 2px; }
.kiez-site .kiez-topbar a.kiez-topbar-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s;
}
.kiez-site .kiez-topbar a.kiez-topbar-social-link:hover { background: color-mix(in srgb, var(--tb-fg) 14%, transparent); }
@media (min-width: 1800px) {
  .kiez-site .kiez-topbar { font-size: 15px; }
  .kiez-site .kiez-topbar-inner { padding: 10px 48px; }
}
@media (max-width: 960px) {
  .kiez-site .kiez-topbar--wide-only { display: none; }
  .kiez-site .kiez-topbar-inner { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .kiez-site .kiez-topbar-zone,
  .kiez-site .kiez-topbar-right { margin-left: 0; justify-content: center; text-align: center; }
  .kiez-site .kiez-topbar-menu { justify-content: center; gap: 2px 16px; }
}
@media (max-width: 600px) {
  .kiez-site .kiez-topbar { font-size: 13px; }
  .kiez-site .kiez-topbar-inner { padding: 8px 20px; }
}

/* The nav (and the drawer under it) on the bar's bottom edge; with the
   toolbar, never above it. Specific enough to beat inc/home.php's
   `.kiez-site.admin-bar .nav` and the drawer offsets above. */
body.kiez-site.kiez-has-topbar .nav { top: max(var(--kiez-bar, 0px), var(--kiez-tb-bottom, 0px)); }
@media (max-width: 960px) {
  body.kiez-site.kiez-has-topbar .nav-links { top: calc(90px + max(var(--kiez-bar, 0px), var(--kiez-tb-bottom, 0px))); }
  body.kiez-site.kiez-has-topbar .nav--compact .nav-links { top: calc(50px + max(var(--kiez-bar, 0px), var(--kiez-tb-bottom, 0px))); }
}

/* ---- Nav button and search (client request 2026-10-21) ------------------ *
   A fourth grid column after the menu. Below 960px the menu leaves the grid
   (it is the drawer), so the same columns hold logo, actions and burger;
   the buttons move into the drawer and only the search stays in the bar.
   Button 1 is the design's filled orange button, button 2 its outline. */
.kiez-site .nav--actions .nav-inner { grid-template-columns: 1fr auto 1fr auto; }
.kiez-site .nav-actions { display: flex; align-items: center; justify-self: end; gap: 10px; margin-left: 24px; }
.kiez-site .nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color .25s, background .25s;
}
.kiez-site .nav--solid .nav-search-toggle { color: var(--purple); }
.kiez-site .nav-search-toggle:hover,
.kiez-site .nav-search-toggle[aria-expanded="true"] { color: var(--orange); }
.kiez-site .nav-search-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.kiez-site .nav-ctas { display: flex; align-items: center; gap: 10px; }
.kiez-site .nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 10px 20px;
  border: 1.5px solid var(--orange);
  border-radius: var(--r);
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  transition: filter .25s, transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.kiez-site .nav a.nav-cta:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(236, 99, 41, .3); }
.kiez-site .nav a.nav-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.kiez-site .nav a.nav-cta--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.kiez-site .nav a.nav-cta--ghost:hover { filter: none; box-shadow: none; background: rgba(255, 255, 255, .08); border-color: #fff; }
.kiez-site .nav--solid a.nav-cta--ghost { border-color: var(--violet-25, rgba(134, 53, 246, .25)); color: var(--violet); }
.kiez-site .nav--solid a.nav-cta--ghost:hover { color: var(--violet); border-color: var(--violet); background: var(--violet-06, rgba(134, 53, 246, .06)); }
.kiez-site .nav--compact a.nav-cta { padding: 7px 16px; }
.kiez-site .nav-drawer-ctas { display: none; }
/* Too little room for the whole row (site.js fitNavActions()): the typed
   wordmark steps aside, then the second button. */
.kiez-site .nav--fit-mark .nav-wordmark { position: absolute; visibility: hidden; pointer-events: none; }
.kiez-site .nav--fit-one .nav-ctas .nav-cta--ghost { display: none; }
@media (min-width: 961px) and (max-width: 1200px) {
  .kiez-site .nav-actions { margin-left: 16px; gap: 6px; }
  .kiez-site .nav a.nav-cta { padding: 8px 14px; }
}
@media (max-width: 960px) {
  .kiez-site .nav-actions { margin: 0 10px 0 0; gap: 0; }
  .kiez-site .nav-actions .nav-ctas { display: none; }
  .kiez-site .nav:has(.nav-links.open) .nav-search-toggle { color: #fff; }
  .kiez-site .nav .nav-links .nav-drawer-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .kiez-site .nav .nav-links a.nav-cta { font-size: 17px; padding: 14px 24px; border-bottom: 1.5px solid var(--orange); color: #fff; }
  .kiez-site .nav .nav-links a.nav-cta--ghost { border-color: rgba(255, 255, 255, .45); }
}

/* Search panel under the nav, like the menu panels: white, purple text. */
.kiez-site .nav-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--violet-10, rgba(134, 53, 246, .1));
  box-shadow: 0 18px 48px rgba(60, 31, 102, .22);
}
.kiez-site .nav-search[hidden] { display: none; }
.kiez-site .nav-search-form { display: flex; gap: 10px; max-width: 760px; margin: 0 auto; padding: 20px 24px; box-sizing: border-box; }
.kiez-site .nav-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 11px 14px;
  font: 400 16px/1.4 var(--body);
  color: var(--purple);
  background: #fff;
  border: 1.5px solid var(--violet-25, rgba(134, 53, 246, .25));
  border-radius: var(--r);
  box-shadow: none;
}
.kiez-site .nav-search-form input[type="search"]::placeholder { color: #8A76A6; opacity: 1; }
.kiez-site .nav-search-form input[type="search"]:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.kiez-site .nav-search-form button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 22px;
  font: 600 14px/1 var(--display);
  color: #fff;
  background: var(--purple);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .2s;
}
.kiez-site .nav-search-form button:hover { background: var(--violet); }
.kiez-site .nav-search-form button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 600px) {
  .kiez-site .nav-search-form { padding: 16px 20px; }
  .kiez-site .nav-search-form button { padding: 0 16px; }
}
.kiez-site .nav .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Menu item set to open in a new tab (inc/chrome.php kiez_render_menu()). */
.kiez-site .nav .nav-ext {
  display: inline-block;
  margin-left: .3em;
  font-size: .85em;
  line-height: 1;
  opacity: .75;
}

/* ---- Bar content centred on wide screens (Tim Trappen, 2026-10-22) ----- *
   Above 1800px site.css scales the typed wordmark (font-size 144%, .wm-text
   25px): its two rows are then 57.6px tall, more than the 50px compact bar.
   The bar's single grid row took the wordmark's height and overflowed at
   the bottom, so logo, menu, search and button all sat 3.8px below the
   centre of the scrolled bar (the wordmark is typed away by then, but its
   box stays). Pin the row to the bar's height: a taller item then overflows
   its track equally at the top and the bottom, as a tall flex item does
   (item-level overflow alignment, shared with flexbox in every engine);
   align-content covers an implicit row the same way. Below 1800px the rows
   are 40px and nothing changes. */
.kiez-site .nav-inner { grid-template-rows: 100%; align-content: center; }