/**
 * GEBA Group — header, navigation and footer.
 *
 * Structural CSS for the template parts in parts/. Kept separate from
 * components.css because these are three specific, non-reusable regions
 * rather than block style variations.
 *
 * The reference draws the top bar and the nav bar as two rows of ONE sticky
 * container, not as a detached strip above a header — so that is what this
 * builds. `is-scrolled` (set by assets/js/header.js) collapses the top row and
 * shrinks the nav row from --header-h to --header-h-scrolled.
 */

/* ============================================================ header shell */

/*
 * core/template-part wraps its content in a div, and `position: sticky` sticks
 * within its *parent's* box — a box exactly as tall as the header, so the
 * header scrolled away immediately. `display: contents` takes the wrapper out
 * of the box tree so the sticky header's containing block is the page.
 */
.wp-block-template-part:has(> .geba-header) {
  display: contents;
}

.geba-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface-page);
  border-bottom: var(--hairline) solid var(--border-subtle);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.geba-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/*
 * The header's two rows are a structure, not a content stack. Core's flow
 * layout gives every child a block-gap margin, which opened 24px of page
 * background between the top bar and the nav row.
 */
.geba-header > * {
  margin-block: 0;
}

/* ================================================================= top bar */

.geba-topbar {
  overflow: hidden;
  /*
   * A grid row from `1fr` to `0fr`, not a `max-height` ceiling.
   *
   * The ceiling was 200px against a row about 44px tall, so `max-height` spent
   * the first four fifths of its travel in a range the row never occupied and
   * the whole visible collapse happened in the last ~50ms. Coming back up it
   * did the same in reverse: the top bar snapped open in a fifth of its own
   * transition, which is the jump.
   *
   * A grid row animates the row's own height, so every millisecond of the
   * duration is movement the reader can see — and the natural height is still
   * authoritative, which is what the ceiling was there to preserve. Nothing
   * here repeats the row's measurement.
   */
  display: grid;
  /*
   * `minmax(0, …)` and not a bare `fr`: an `fr` track carries an automatic
   * minimum of `auto`, so `0fr` still resolved to 24px here — the row closed
   * most of the way and then stopped, leaving a strip of empty header.
   */
  grid-template-rows: minmax(0, 1fr);
  transition:
    grid-template-rows var(--dur-slow) var(--ease-standard),
    opacity var(--dur-base) var(--ease-standard);
}

/* A grid item's `min-height` is `auto`, which refuses to go below its content
   and would hold the row open at full height however small the track gets. */
.geba-topbar > * {
  min-height: 0;
}

.is-scrolled .geba-topbar {
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
}

.geba-topbar__inner {
  /*
   * `width: 100%` because the row above is a grid now (see the collapse), and
   * a grid item with `width: auto` and auto inline margins is sized to its
   * content rather than stretched — the bar's contents bunched into 772px in
   * the middle of a 1280px header. As a block child the same declarations
   * filled the line. The margins still centre it once `max-width` bites.
   */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-2);
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.geba-topbar__logo {
  margin-inline-end: auto;
  display: block;
  text-decoration: none;
}

.geba-topbar__logo img {
  height: 54px;
  width: auto;
}

.geba-topbar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.geba-topbar__icon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  transition: var(--transition-control);
}

.geba-topbar__contact:hover .geba-topbar__icon {
  background: var(--blue-100);
}

.geba-topbar__contact-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: var(--text-xs);
}

.geba-topbar__contact-text b {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.geba-topbar__contact-text span {
  color: var(--text-muted);
}

/* ================================================================ socials */

.geba-socials {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.geba-socials a {
  width: 32px;
  height: 32px;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: var(--transition-control);
}

.geba-socials a:hover {
  border-color: var(--geba-blue);
  color: var(--geba-blue);
  background: var(--surface-brand-soft);
}

/* ================================================================ nav row */

.geba-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* `--dur-slow`, matching the top bar above: the two rows are one movement,
     and at different durations the header lands in two steps. */
  transition: min-height var(--dur-slow) var(--ease-standard);
}

.is-scrolled .geba-header__inner {
  min-height: var(--header-h-scrolled);
}

.geba-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* ============================================================= navigation */

.geba-nav .wp-block-navigation__container {
  gap: var(--space-6);
}

.geba-nav .wp-block-navigation-item__content {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease-standard);
}

.geba-nav .wp-block-navigation-item__content:hover {
  color: var(--text-brand);
}

/*
 * The active underline. Drawn as a pseudo-element on the link so it needs no
 * extra markup, and scaled rather than shown/hidden so it can animate.
 */
.geba-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--hairline) * -1);
  height: 3px;
  background: var(--geba-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.geba-nav .wp-block-navigation-item__content:hover::after,
.geba-nav .current-menu-item > .wp-block-navigation-item__content::after,
.geba-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Inside the mobile overlay the underline is noise — the panel is a list. */
.geba-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
  display: none;
}

/*
 * The top padding is what places the close button, which core positions
 * absolutely against this box.
 *
 * At 64px the X sat 41px below the hamburger it replaces, so the control
 * jumped down the moment it was pressed and left a band of empty panel above
 * it. Half the difference between the bar's height and the 24px icon puts it on
 * exactly the same line, and it keeps tracking the bar: both read
 * `--header-h-scrolled`, which is what the phone header is sized to.
 */
.geba-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--surface-page);
  padding: calc((var(--header-h-scrolled) - 24px) / 2) var(--gutter)
    var(--space-8);
}

.geba-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
  gap: var(--space-5);
}

.geba-nav .wp-block-navigation__responsive-container-open,
.geba-nav .wp-block-navigation__responsive-container-close {
  color: var(--text-primary);
}

/* ------------------------------------------------------------- dropdowns */

/*
 * A submenu is core's own `core/navigation-submenu`: it brings the toggle
 * button, `aria-expanded`, the Escape handling and — with the block's default
 * `submenuVisibility` — opening on hover *and* on keyboard focus. None of that
 * is worth rewriting, so what is left here is the panel's surface.
 *
 * The background has to be stated rather than inherited. Core's default is
 * `background-color: inherit`, which resolves to `transparent` under
 * `.geba-header--transparent` and leaves a dropdown unreadable over a hero.
 */
.geba-nav .wp-block-navigation__submenu-container {
  min-width: 15rem;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

/*
 * The bar's letter-spaced uppercase is a label style; a dropdown is a list of
 * page names and reads as one.
 */
.geba-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-book);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}

.geba-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover,
.geba-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:focus-visible {
  background: var(--surface-muted);
  color: var(--text-brand);
}

/*
 * The bar's underline is drawn on `.wp-block-navigation-item__content`, which
 * is what a submenu link is too — inside the panel it would underline against
 * the panel's edge. The hover tint above is the dropdown's own affordance.
 */
.geba-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content::after {
  display: none;
}

.geba-nav .wp-block-navigation__submenu-icon {
  color: currentColor;
  transition: transform var(--dur-base) var(--ease-standard);
}

.geba-nav [aria-expanded="true"] > .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/*
 * Over a hero the bar is inverted, and that rule reaches every
 * `.wp-block-navigation-item__content` under the header — including the ones
 * in the panel, which sits on its own light surface. Put them back.
 */
.geba-header--transparent:not(.is-scrolled)
  .geba-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  color: var(--text-primary);
}

/*
 * In the overlay core lays a submenu out in the flow rather than over the
 * page, so the panel treatment is wrong there: an indent is the whole of it.
 *
 * Core writes that indent itself, twice, and both rules are longer than the
 * obvious one of ours: `padding-inline: 2rem` on the submenu at (0,5,0), and
 * `0.5em 1em` on each link at (0,5,0). So `padding-inline-start` set on a
 * (0,3,0) selector never applied and the child pages sat 47px in from their
 * parent — an indent nobody wrote. Match core's own chain, add `.geba-nav` to
 * win it, and state the whole indent in one place.
 */
.geba-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child
  .wp-block-navigation__submenu-container {
  min-width: 0;
  padding: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--space-3);
}

/* The link's own inline padding is the other half of core's indent. */
.geba-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding-inline: 0;
}

/* ------------------------------------------- the bar, and where it gives up */

/*
 * Core switches `overlayMenu: "mobile"` to an inline bar at 600px, which is far
 * too early for seven items plus a dropdown: on a tablet the row wrapped onto a
 * second line and the header grew a ragged extra band. The hamburger therefore
 * stays until 1100px — the same width at which the top bar folds away, so the
 * header has one compact state rather than two half-compact ones.
 *
 * This is core's own pair of rules from `@media (min-width: 600px)`, turned
 * back over the range in between. Everything else about the overlay — the
 * toggle, the focus containment, Escape — is untouched.
 */
@media (min-width: 600px) and (max-width: 1100px) {
  .geba-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }

  .geba-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/*
 * The active underline is drawn at the bottom of the link, so it only touches
 * the header's own edge if the link is as tall as the header. Stretching the
 * nav rather than positioning the rule against the header keeps it correct
 * while the header shrinks on scroll, which is a transition on the row's
 * min-height.
 *
 * Above the overlay breakpoint only: inside the panel the items are a stacked
 * list and full height would mean one item per screen.
 */
@media (min-width: 1101px) {
  /*
   * Flex the whole way down rather than `height: 100%` the whole way down.
   * Core's responsive container is `display: block` above its own breakpoint,
   * so the chain stopped there twice over: a block parent has no alignment to
   * stretch against, and a percentage height does not resolve against a flex
   * item that was merely *stretched* — Chromium treats that height as
   * indefinite. Flex stretch needs neither, so the row's height reaches the
   * links without anybody stating a number.
   */
  .geba-nav {
    align-self: stretch;
    display: flex;
    /* core/navigation centres its own children; nothing below can stretch
	   past an ancestor that is centring it. */
    align-items: stretch;
  }

  /*
   * Five elements, not two. Between the nav and its list core also nests a
   * `__responsive-close` and a `__responsive-dialog`, both `display: block`,
   * and either one alone stops the height. The container repeats core's own
   * `:not(.hidden-by-default):not(.is-menu-open)` because that is what core
   * sets `display: block` with — (0,3,0), which a plain two-class selector
   * loses to.
   */
  .geba-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ),
  .geba-nav .wp-block-navigation__responsive-close,
  .geba-nav .wp-block-navigation__responsive-dialog,
  .geba-nav .wp-block-navigation__responsive-container-content {
    display: flex;
    flex: 1;
    align-items: stretch;
  }

  .geba-nav .wp-block-navigation__container {
    flex: 1;
    align-items: stretch;
  }

  .geba-nav .wp-block-navigation__container > .wp-block-navigation-item {
    align-items: stretch;
  }

  .geba-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    height: 100%;
  }

  /*
   * The dropdown hangs off the bottom of a now full-height item, which is the
   * header's own edge — core's default `top: 100%` needs no help, but the
   * submenu must not inherit the stretch.
   */
  .geba-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    align-items: center;
  }
}

/*
 * The chevron sits on the line box, and uppercase text has no descenders — so
 * centring it against the line put it visibly below the letters it belongs to.
 * Aligning it to the text's own box instead, and the toggle carries the link's
 * padding rather than its own.
 */
.geba-nav .wp-block-navigation-submenu__toggle {
  align-self: center;
  padding-block: 0;
}

.geba-nav .wp-block-navigation__submenu-icon svg {
  display: block;
  /* Cap height, not line height: the optical centre of GEBA's uppercase. */
  margin-block-start: -0.1em;
}

/* ----------------------------------------------------- under the admin bar */

/*
 * `position: sticky; top: 0` puts the header under the admin bar, which is
 * fixed and opaque — so a logged-in client saw the top of their own header
 * cut off, and nothing about it while logged out. Core's own breakpoints: the
 * bar is 32px, 46px under 783px, and stops being fixed at all under 601px,
 * where it scrolls away and the header belongs back at the top.
 */
body.admin-bar .geba-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .geba-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar .geba-header {
    top: 0;
  }
}

/* ======================================================= language switcher */

/*
 * Placeholder until WPML renders the real switcher in Phase 6. Styled now so
 * the header's proportions are correct in the meantime.
 */
/*
 * Language switcher. A `<details>`, so opening and closing it is the browser's
 * job — the same reasoning that puts the mobile menu on core/navigation and the
 * careers accordion on core/details. Two languages need no JavaScript.
 */
.geba-lang {
  position: relative;
}

.geba-lang__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 10px;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: var(--transition-control);
}

/* Safari still paints its own marker unless this is said explicitly. */
.geba-lang__toggle::-webkit-details-marker {
  display: none;
}

.geba-lang__toggle:hover {
  border-color: var(--geba-blue);
}

.geba-lang__current {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: 0.03em;
  line-height: 1;
}

.geba-lang__caret {
  transition: rotate var(--dur-fast) var(--ease-standard);
}

.geba-lang[open] .geba-lang__caret {
  rotate: 180deg;
}

.geba-lang__menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface-page);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.geba-lang__menu a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  color: var(--text-primary);
  text-decoration: none;
}

/*
 * The entry screen is dark and has no header behind it, so the switcher carries
 * its own inverse skin rather than borrowing the transparent header's.
 */
.geba-lang--inverse .geba-lang__toggle {
  border-color: var(--border-inverse);
  background: rgb(255 255 255 / 5%);
  color: var(--blue-300);
}

.geba-lang--inverse .geba-lang__toggle:hover {
  border-color: var(--blue-300);
}

.geba-lang--inverse .geba-lang__current {
  color: var(--text-inverse);
}

.geba-lang--inverse .geba-lang__menu {
  background: var(--geba-black);
  border-color: var(--border-inverse);
}

.geba-lang--inverse .geba-lang__menu a {
  color: var(--text-inverse);
}

.geba-lang--inverse .geba-lang__menu a:hover,
.geba-lang--inverse .geba-lang__menu a:focus-visible {
  background: rgb(255 255 255 / 8%);
  color: var(--text-inverse);
}

.geba-lang__menu a:hover,
.geba-lang__menu a:focus-visible {
  background: var(--surface-muted);
}

/* ==================================================== transparent variant */

/*
 * Sits over a hero image. Reverts to the solid treatment on scroll, so the
 * `is-scrolled` rules deliberately come after and win on specificity.
 */
.geba-header--transparent:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--text-inverse);
}

.geba-header--transparent:not(.is-scrolled) .geba-topbar__contact-text b,
.geba-header--transparent:not(.is-scrolled)
  .geba-nav
  .wp-block-navigation-item__content {
  color: var(--text-inverse);
}

.geba-header--transparent:not(.is-scrolled) .geba-topbar__contact-text span {
  color: var(--text-inverse-muted);
}

.geba-header--transparent:not(.is-scrolled) .geba-topbar__icon {
  background: var(--surface-glass);
  color: var(--text-inverse);
}

.geba-header--transparent:not(.is-scrolled) .geba-socials a,
.geba-header--transparent:not(.is-scrolled) .geba-lang__toggle {
  border-color: var(--border-inverse);
  color: var(--text-inverse-muted);
  background: transparent;
}

.geba-header--transparent:not(.is-scrolled) .geba-lang__current {
  color: var(--text-inverse);
}

.geba-header--transparent:not(.is-scrolled) .geba-topbar__logo img {
  /* The single-colour logo has no inverse variant at this size. */
  filter: brightness(0) invert(1);
}

/* ================================================================= footer */

/*
 * A light footer on the bands' sand (ADR-084): the dark logo, the white G,
 * outlined social icons. Like a band, it redefines the inverse tokens its parts
 * read rather than each part changing.
 */
.geba-footer {
  --surface-inverse: var(--surface-band);
  --text-inverse: var(--text-primary);
  --text-inverse-muted: var(--ink-600);
  --border-inverse: var(--border-band);
  --text-faint: var(--ink-500);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-inverse-muted);
  padding-block: var(--space-20) var(--space-8);
}

.geba-footer__decoration {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: min(560px, 60%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}

.geba-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.geba-footer__columns {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.geba-footer__brand {
  /* The brand column carries more content, so it earns more room. */
  grid-column: span 1;
  min-width: min(100%, 320px);
}

.geba-footer__logo {
  height: 64px;
  width: auto;
  margin-block-end: var(--space-6);
}

.geba-footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-inverse);
  margin-block: 0 var(--space-5);
}

.geba-footer__contact,
.geba-footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

/*
 * A nested menu item in the footer. `.geba-footer__column ul` above is a flex
 * column and reaches this list too, so all this adds is the indent and some
 * air above it — but that rule is (0,1,1) and a lone class is (0,1,0), the
 * ADR-038 trap. Naming the column as well makes it (0,2,0), which wins on
 * class count without an `!important`.
 */
.geba-footer__column .geba-footer__submenu {
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-4);
  font-size: var(--text-xs);
}

.geba-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.geba-footer__icon {
  flex: 0 0 auto;
  color: var(--geba-blue);
  margin-block-start: 1px;
}

.geba-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

.geba-footer a:hover {
  color: var(--text-inverse);
}

/*
 * The social icons on white rather than on the sand, as the entry screen's
 * are. Restated with the footer's class, because `.geba-footer a` above would
 * otherwise hand them the footer's text colour.
 */
.geba-footer .geba-socials a {
  background: var(--surface-page);
  color: var(--text-muted);
}

.geba-footer .geba-socials a:hover {
  border-color: var(--geba-blue);
  background: var(--surface-brand-soft);
  color: var(--geba-blue);
}

.geba-footer__bottom {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-6);
  border-block-start: var(--hairline) solid var(--border-inverse);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/*
 * Three parts, and the socials are the middle one. `space-between` alone would
 * only centre them when the copyright and the legal links happened to be the
 * same width, so the two outer parts share the leftover space and the socials
 * take exactly what they need.
 */
.geba-footer__legal,
.geba-footer__legal-links {
  flex: 1 1 0;
  min-width: 0;
}

.geba-footer__bottom .geba-socials {
  flex: 0 0 auto;
}

/*
 * The centring depends on there being three parts, and for a long time there
 * were two: `geba_legal_links()` prints nothing until the pages it looks for
 * are published, so the icons sat hard against the right edge and read as a
 * layout bug rather than as missing content. `wp geba seed-legal` creates the
 * pages; this keeps the row honest on an install that has not run it, or where
 * the client has unpublished one.
 */
.geba-footer__bottom .geba-socials:last-child {
  margin-inline: auto;
}

.geba-footer__legal {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* The maker's credit, after the copyright: dressed like the legal links. */
.geba-footer__credit {
  margin-inline-start: var(--space-2);
  color: var(--text-inverse-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control);
}

.geba-footer__credit:hover {
  color: var(--text-inverse);
}

.geba-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.geba-footer__legal-links a {
  font-size: var(--text-xs);
  color: var(--text-inverse-muted);
  text-decoration: none;
  transition: var(--transition-control);
}

.geba-footer__legal-links a:hover {
  color: var(--text-inverse);
}

/* ========================================================== cookie consent */

/*
 * The consent banner and the placeholder for a held map belong to the
 * hfs-consent plugin, which draws them from custom properties of its own and
 * declares them at zero specificity. Setting them here is the whole of the
 * theming: the site's surfaces, blue, card radius and shadow. The type is the
 * page's own, inherited, like every section heading. ADR-086.
 */
:root {
  --hfs-consent-surface: var(--surface-page);
  --hfs-consent-text: var(--text-primary);
  --hfs-consent-muted: var(--ink-600);
  --hfs-consent-line: var(--border-subtle);
  --hfs-consent-accent: var(--blue-600);
  --hfs-consent-accent-strong: var(--blue-700);
  --hfs-consent-on-accent: var(--ink-0);
  --hfs-consent-radius: var(--radius-card);
  --hfs-consent-button-radius: var(--radius-pill);
  --hfs-consent-shadow: var(--shadow-xl);
  --hfs-consent-embed-surface: var(--surface-muted);
}

/* ========================================================== small screens */

@media (max-width: 1000px) {
  .geba-topbar__inner {
    gap: var(--space-6);
  }

  .geba-topbar__logo img {
    height: 44px;
  }
}

/*
 * The overlay's own additions: the telephone, the e-mail and the social
 * profiles, which the top bar stops showing at 1100px. They are ordinary
 * navigation links, so above core's 600px overlay breakpoint — where the menu
 * is an inline row — they have to be taken back out of it.
 */
@media (min-width: 1101px) {
  .geba-nav .geba-nav__overlay-only {
    display: none;
  }
}

.geba-nav__overlay-only .wp-block-navigation-item__content {
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--text-muted);
}

/*
 * One row from 1100px down: logo, language, and the menu — the hamburger below
 * 600px, where core takes over. The contact tiles and socials go first; the
 * row wrapped into three lines above every page from about 1100px, which is
 * where a laptop and a tablet in landscape both sit. The enquiry button goes
 * too: the menu carries Kontakt, and the overlay carries the number itself.
 */
@media (max-width: 1100px) {
  /*
   * Below 1100px there is one header row and it never shrinks: the top bar is
   * flattened into it with `display: contents`, so `--header-h-scrolled` stops
   * meaning "the collapsed height" and starts meaning "the header's height".
   * Restating it here is what keeps everything that measures the header — the
   * row itself, the padding that places the overlay's close button, the root's
   * `scroll-padding-top` and the sticky asides — reading one number.
   *
   * A phone shows the wordmark and nothing else of the brand, so it is set
   * larger than the desktop bar's collapsed row rather than inheriting it.
   */
  :root {
    --header-h-scrolled: var(--header-h-mobile);
  }

  .geba-topbar__contact,
	.geba-topbar .geba-socials,
	/*
	 * Scoped to the header so it outranks core's own `.wp-block-buttons`
	 * display rule, which is printed inline after this stylesheet and would
	 * otherwise win on source order at equal specificity.
	 */
	.geba-header .geba-header__cta {
    display: none;
  }

  /*
	 * Flatten the top bar so its logo becomes a direct child of the header's
	 * own row. `display: contents` also drops the boxes the scroll collapse
	 * animates, so the logo stays put when the header shrinks — which is what
	 * we want when it is the only branding on screen.
	 */
  .geba-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--gutter);
  }

  .geba-header > .wp-block-template-part,
  .geba-header .geba-topbar,
  .geba-header .geba-topbar__inner {
    display: contents;
  }

  .geba-topbar__logo {
    flex: none;
  }

  .geba-topbar__logo img {
    height: 50px;
  }

  .geba-header__bar {
    flex: 1;
    min-width: 0;
  }

  .geba-header__inner {
    min-height: var(--header-h-scrolled);
    padding-inline: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  /* Language switcher, then the hamburger hard against the right edge. */
  .geba-header__actions {
    order: 1;
  }

  .geba-nav {
    order: 2;
  }

  .geba-footer {
    padding-block: var(--space-14) var(--space-6);
  }

  .geba-footer__bottom {
    justify-content: flex-start;
  }

  /* Stacked, so nothing is centred against anything: all three read left. */
  .geba-footer__legal,
  .geba-footer__legal-links {
    flex: 1 1 100%;
  }

  /*
   * Three links wrap on a phone, and a wrapped line should sit with its own
   * row rather than a link's width away from it.
   */
  .geba-footer__legal-links {
    justify-content: flex-start;
    row-gap: var(--space-3);
  }
}

/* --------------------------------------------------------------- print */

/*
 * `geba/print-button` on a project puts the page on paper, and the chrome is
 * the part of it that does not survive the trip: a sticky bar reprints itself
 * at the top of whichever sheet it overlaps, and a navigation is a list of
 * places nobody can go from a sheet of paper. The footer goes with them — it is
 * four columns of links around a watermark, and it would cost a page to say
 * what the aside's own card already says.
 */
@media print {
	.geba-header,
	.geba-topbar,
	.geba-footer,
	#wpadminbar,
	.wpml-ls-statics-footer {
		display: none !important;
	}
}