/*
 * header.css — the fixed header (work step 6).
 *
 * Measured on the legacy site (migration/bestand/assets/merged.css, fetched 2026-08-25):
 * fixed above everything, 120px tall, background graphic stretched to the full width, the logo
 * on the left, the navigation on the right. The legacy site's third column — social icons — is
 * an empty <div> there and is hidden from 1300px; it does not come along.
 *
 * Why this lives here and not in a Divi preset: the header is a Theme Builder template with
 * markup of its own (template-parts/header.php). There is no Divi module there that could carry
 * a preset — the reasoning stands at length in sections.css and in E1 of the plan.
 *
 * A word on the breakpoints: they stand as numbers in the @media rules, not as tokens. That is
 * not carelessness — CSS does not resolve custom properties inside media queries, the reference
 * would have no effect and nobody would notice. Each value is justified individually below.
 *
 * The type of the navigation is measured on the RENDERED snapshot and not read from the legacy
 * stylesheet (F4 of the frontend defect list, 2026-09-07). Three sizes, two padding steps and
 * one line height ratio, each narrowed down from both sides; the numbers stand at their tokens
 * in tokens.css. The same holds for the logo height, which has four steps and not two (F11) —
 * one of them comes from no height rule at all, the derivation stands at the token.
 *
 * The COLUMN LAYOUT is measured the same way (F10, 2026-09-07), and it is the reason the two
 * numbers that used to be here are gone. The legacy container carries no side padding and its
 * columns no gap: above 1600px it is 1800px wide and centred, below it 98 % of the window; the
 * logo's distance from the edge is an inset inside its own column, in three steps of 0, 20 and
 * 10px. The rebuild had a 20px padding and a 20px gap instead, which cost the navigation 38px at
 * 1101px and let the five menu items wrap there and at 1051px, where the legacy site holds them
 * on one line.
 */

/* ------------------------------------------------------------------ *
 * The bar
 * ------------------------------------------------------------------ */

.wi-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--wi-header-z);

  height: var(--wi-header-height);

  /* Colour and graphic together: see the reasoning at the token in tokens.css. */
  background-color: var(--wi-header-bg-color);
  background-image: var(--wi-header-bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  /* The legacy site stretches the 1920×160 graphic to the full width and header height. It is
   * squashed in the process — that is intended, it is a gradient with no recognisable edges. */
  background-size: 100% var(--wi-header-height);

  color: var(--wi-color-on-dark);
}

/*
 * The WordPress admin bar, for everyone who is logged in.
 *
 * It is fixed at the top of the viewport and pushes the document down with
 * `html { margin-top: 32px !important }` — but a FIXED element does not move with the document,
 * so the bar lies over the top 32px of this header. What that costs is not a stripe: the header
 * carries its gradient as a background graphic stretched over its full 120px, so the covered
 * third is the darkest part of it, and what stays visible starts halfway down the fade. The
 * header then reads as though its gradient were too short and stopped without fading out.
 *
 * The two heights are WordPress's own and have been for a decade: 32px, and 46px below 782px,
 * where the bar grows a row. Below 600px it stops being fixed and scrolls away with the page —
 * the offset would then push the header 46px into the void, so it goes back to zero there.
 *
 * Visitors never see any of this. Editors see it on every page, which is why the rule sits here
 * and not on the map page that found it.
 */
body.admin-bar .wi-header {
  top: 32px;
}

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

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

/*
 * Neither a padding nor a gap, and both of those are F10.
 *
 * The legacy container carries its width alone — `width: 100%; max-width: 1800px; margin: 0 auto`
 * above 1600px, `max-width: 98%` below — and its three columns sit flush against one another. The
 * distance the eye reads between logo and menu is the logo's inset inside its own column, not a
 * gap between them. The rebuild had both: 20px of padding on each side and 20px of gap. Measured
 * at 1101px that is 38px the navigation does not get, and the five menu items wrapped there and
 * at 1051px where the legacy site holds them on one line.
 */
.wi-header__inner {
  display: flex;
  align-items: flex-start;

  width: 100%;
  max-width: var(--wi-width-max);
  height: 100%;
  margin-inline: auto;
}

/* The fixed header sits outside the document flow — without this offset the page content starts
 * underneath it. `#page-container` is Divi's outermost wrapper and the only place every page
 * has; should Divi ever be unavailable, the second rule takes over.
 *
 * Against the legacy site this is a deviation, and a deliberate one: the legacy site knows no
 * page offset because **every** subpage there starts with a 600px image band that the header
 * lies on top of. Where that band is present the offset has to go again — `.wi-bleed-top` in
 * sections.css does that. The offset here is the default for everything else: a page without an
 * image band is not foreseen in the legacy site, but is created in WordPress at any time. */
#page-container,
body > .wi-page {
  padding-top: var(--wi-header-height);
}

/*
 * The shell of the header layout must take up no space in the flow — everything inside it is
 * fixed. It does anyway: Divi gives every column `min-height: 1px`, and that single pixel is
 * passed on by the column through row, section and `.et_builder_inner_content` all the way to
 * `.et-l--header`. Measured on 2026-08-26: the page content began at y = 121 instead of y = 120.
 *
 * Invisible as long as the offset from above stands below it — visible as soon as an image band
 * with `.wi-bleed-top` is meant to begin at y = 0: it would then sit one pixel too low and be one
 * pixel too tall. The default is only taken back inside the header shell; everywhere else it is
 * Divi's business.
 */
.et-l--header .et_pb_column {
  min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Column 1 — logo
 * ------------------------------------------------------------------ */

.wi-header__brand {
  /* The legacy value. The logo is a vector file; the column gives it the room, the height below
   * limits it. */
  flex: 0 0 var(--wi-header-col-1);
  margin-top: var(--wi-header-logo-offset);
}

/*
 * The height is fixed, the width follows — not the other way round, and not `auto/auto`.
 *
 * DP_wildislands_4C_white.svg carries only a `viewBox` and no dimensions of its own. Such a file
 * has no intrinsic size: the browser derives it from the available room. With
 * `height: auto; max-height: …` inside a column whose width in turn follows its content, each
 * size referred to the other and both became 0 — measured on the instance at 375px: the logo was
 * simply gone, with no error and no gap.
 */
.wi-header__brand img,
.wi-header__brand .custom-logo {
  display: block;
  width: auto;
  /* The inset sits on the image and not as a padding on the column, and that is not a matter of
   * taste: a padding would narrow the column's content box to 220px, and the `max-width: 100%`
   * below 1600px would then bite an image that carries its size in the height — it would squash it
   * rather than scale it, which is exactly what F11 arranged the height for. The legacy site does
   * squash: its logo is 220 x 100.17 and therefore 0.4px narrower than its own aspect ratio. */
  margin-left: var(--wi-header-logo-inset);
  /* No width cap above 1600px, and that is the legacy site's own arrangement: it puts
   * `max-width: 100%` on the header images only from 1600px down. Above that the logo is wider
   * than its column — 263.5px against 243 at 1920px — and overflows it into the empty second
   * column. Rebuilt here for a reason that is not fidelity for its own sake: with an explicit
   * height a width cap does not scale the image, it squashes it (F11). The cap comes back at
   * 1600px, where the column is wide enough that it does not bite. */
  max-width: none;
  height: var(--wi-logo-height);
}

/* Fallback as long as no custom logo is set. Not a legacy feature — the legacy site always has a
 * logo. But a nameless header would be worse than one with a word mark. */
.wi-header__site-title {
  display: inline-block;
  margin-left: var(--wi-header-logo-inset);
  color: var(--wi-color-on-dark);
  font-size: var(--wi-font-size-body);
  font-weight: var(--wi-font-weight-semibold);
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Column 3 — navigation
 *
 * The legacy site's column 2 (social) is deliberately missing; it was empty.
 * ------------------------------------------------------------------ */

.wi-header__nav {
  flex: 1 1 auto;
  margin-top: var(--wi-header-nav-offset);
  text-align: right;
}

/*
 * The selector carries `.wi-header` along although `.wi-menu` alone would be unambiguous. The
 * reason is a Divi rule that bites inside a Theme Builder header:
 *
 *   #left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul
 *   { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px }
 *
 * It is one step more specific than a single class and gives the navigation bullets, 23px of
 * padding and a foreign line height. Measured on the rendered markup of the instance — it became
 * visible as a single bullet in front of the first menu item, because the remaining markers sat
 * behind their neighbours.
 */
.wi-header .wi-menu,
.wi-header .wi-menu__submenu,
.wi-header .wi-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}

.wi-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wi-menu > li {
  position: relative;
}

.wi-menu > li > a {
  display: block;
  padding: var(--wi-header-nav-padding-block) var(--wi-header-nav-padding-inline);
  color: var(--wi-color-on-dark);
  font-size: var(--wi-font-size-nav);
  font-weight: var(--wi-font-weight-semibold);
  /* Not `--wi-line-height-body`: the legacy navigation runs on a ratio of its own and body copy
   * on a fixed 24px. That the two happened to be close is what let the deviation stand (F4). */
  line-height: var(--wi-line-height-nav);
  text-decoration: none;
}

/*
 * The legacy site inverts the top-level item on hover: white area, orange type. The plan's table
 * of measurements names only the text colour — but the area is the reason the opened submenu
 * visually hangs off its item. Without it, it floats free.
 *
 * `:focus-within` is the keyboard version of the same rule and does not exist in the legacy site.
 */
.wi-menu > li:hover > a,
.wi-menu > li:focus-within > a,
.wi-menu > li.is-open > a,
.wi-menu > li.current-menu-item > a,
.wi-menu > li.current-menu-ancestor > a {
  background-color: var(--wi-color-surface);
  color: var(--wi-color-accent);
}

/* ------------------------------------------------------------------ *
 * Submenus
 * ------------------------------------------------------------------ */

.wi-menu__submenu {
  position: absolute;
  top: 100%;
  /* Anchored on the left as in the legacy site: the submenu grows to the right, beginning at the
   * left edge of its menu item. It does not run out of view doing so — the last item with a
   * submenu is "News & media", and to the right of it "Contacts" is still there. The max-width
   * below is the stop for the case that somebody changes the menu structure later. */
  left: 0;
  z-index: 20;

  width: var(--wi-dropdown-width);
  /* The width of the header container itself from 1600px down — the widest a submenu could grow
   * without sticking out past the bar it hangs from. Until F10 the line read
   * `calc(100vw - 2 * var(--wi-header-logo-inset))`, which was the same statement while that token
   * was the container's padding; it is the logo's own inset now and would say nothing here. */
  max-width: 98vw;

  text-align: left;
  background-color: var(--wi-color-surface);

  /* Visibility instead of display: this keeps a transition possible and the content out of reach
   * of the keyboard as long as it is closed. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.wi-menu > li:hover > .wi-menu__submenu,
.wi-menu > li:focus-within > .wi-menu__submenu,
.wi-menu > li.is-open > .wi-menu__submenu {
  opacity: 1;
  visibility: visible;
}

.wi-menu__submenu li {
  display: block;
}

.wi-menu__submenu a {
  display: block;
  /* The padding does NOT follow the staircase of the top level. Measured across every width of
   * the snapshot: the drop-down keeps 7.5/20 while the level above it goes 20 → 12 → 5. */
  padding: var(--wi-header-nav-padding-block) var(--wi-header-nav-padding-inline);
  color: var(--wi-color-ink);
  font-size: var(--wi-font-size-dropdown);
  font-weight: var(--wi-font-weight-regular);
  line-height: var(--wi-line-height-nav);
  text-align: left;
  text-decoration: none;
}

/* `is-open` like the top level: an entry whose fly-out the button opened shows it the way hover
 * would — and its white chevron needs the orange area, otherwise it stands white on white. */
.wi-menu__submenu li:hover > a,
.wi-menu__submenu li.is-open > a,
.wi-menu__submenu li.current-menu-item > a,
.wi-menu__submenu a:focus {
  background-color: var(--wi-color-accent-hover);
  color: var(--wi-color-on-dark);
}

/* A second-level entry whose child is the current page: the top level marks its ancestors with
 * the inverted area, which inside the drop-down would read as hover. The weight marks it instead. */
.wi-menu__submenu > li.current-menu-ancestor > a {
  font-weight: var(--wi-font-weight-semibold);
}

/*
 * The third level (2026-10-23, AI/plans/done/menue-dritte-ebene-und-redirects.md, E2).
 *
 * A fly-out to the RIGHT of the drop-down, top-aligned with the entry it belongs to — the
 * instruction's wording. It inherits the drop-down's class and with it the absolute position, the
 * width and the hidden state from above; only the anchor changes: the top edge of its entry, the
 * right edge of the drop-down. Measured on the header before deciding (bin/check-header.sh, NAV):
 * the navigation is right-flush and begins between 241px (1101px window) and 967px (1920px), so
 * a fly-out of the FIRST entry's drop-down has 250px of room to its right at every desktop width.
 * One of the last entry would not; header.js measures that case and flips the fly-out to the
 * left (`wi-menu__submenu--flip`) rather than letting it leave the window.
 *
 * It opens the way the drop-down does: :hover, :focus-within, or `is-open` from the button that
 * the walker renders on touch devices.
 */
.wi-menu__submenu > li {
  position: relative;
}

.wi-menu__submenu--nested {
  top: 0;
  left: 100%;
}

.wi-menu__submenu--nested.wi-menu__submenu--flip {
  left: auto;
  right: 100%;
}

.wi-menu__submenu > li:hover > .wi-menu__submenu--nested,
.wi-menu__submenu > li:focus-within > .wi-menu__submenu--nested,
.wi-menu__submenu > li.is-open > .wi-menu__submenu--nested {
  opacity: 1;
  visibility: visible;
}

/* The entry that carries a fly-out says so: a small triangle pointing where it opens, in the text
 * colour so it inverts with the hover. Hidden where the button of touch devices takes its place. */
.wi-menu__submenu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5em;
  vertical-align: middle;
  border-block: 5px solid transparent;
  border-left: 6px solid currentColor;
}

/* The toggle of a second-level entry sits inside the drop-down, which is left-aligned — the
 * absolute button from above keeps to the right edge of the entry there as well. The chevron
 * points to the right, where the fly-out opens, and turns like the top level's when open. */
.wi-menu__submenu > li > .wi-menu__toggle .wi-menu__chevron {
  transform: rotate(-90deg);
}

.wi-menu__submenu > li.is-open > .wi-menu__toggle .wi-menu__chevron {
  transform: rotate(0);
}

@media (hover: none) {
  .wi-js .wi-menu__submenu > li.menu-item-has-children > a::after {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * Buttons: open a submenu, open the menu
 * ------------------------------------------------------------------ */

.wi-menu__toggle,
.wi-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wi-header-nav-padding-block);
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/*
 * The button on the individual menu item is gone by default — the legacy site does not have it,
 * and wherever there is hover it would be a second way to the same place.
 *
 * It only appears where hover achieves nothing: on touch devices. The query is deliberately
 * phrased this way round and not as "hide on pointer devices". Environments that give no answer
 * — headless renderers, say — report neither `hover: hover` nor `pointer: fine`; they would then
 * get a button that does not appear in the legacy picture. This way round the unknown case is
 * the normal case.
 */
.wi-menu__toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

@media (hover: none) {
  .wi-js .wi-menu__toggle {
    display: inline-flex;
  }
}

/*
 * The button takes the colour of the link it stands on, in every state. `color: inherit` above
 * reads the bar's white from the <li>, not the link's colour — and the link turns its area white
 * when open, hovered or current, so the chevron stood white on white (reported on the panel,
 * 2026-10-23). The same on the second level, whose links are ink on white and white on orange.
 */
.wi-menu > li:hover > .wi-menu__toggle,
.wi-menu > li:focus-within > .wi-menu__toggle,
.wi-menu > li.is-open > .wi-menu__toggle,
.wi-menu > li.current-menu-item > .wi-menu__toggle,
.wi-menu > li.current-menu-ancestor > .wi-menu__toggle {
  color: var(--wi-color-accent);
}

.wi-menu__submenu > li > .wi-menu__toggle {
  color: var(--wi-color-ink);
}

.wi-menu__submenu > li:hover > .wi-menu__toggle,
.wi-menu__submenu > li.is-open > .wi-menu__toggle,
.wi-menu__submenu > li.current-menu-item > .wi-menu__toggle {
  color: var(--wi-color-on-dark);
}

/* Without JavaScript the button operates nothing — it then stays away, because both rules above
 * demand `.wi-js`. In that case opening happens through :hover and :focus-within, the two ways
 * that work without a script. */

/* On a wide window the button sits inside the link's own side padding — the chevron is small
 * there so the text keeps clear of it. The panel below 980px gives both their full size. */
.wi-menu__chevron {
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
}

.wi-menu > li.is-open > .wi-menu__toggle .wi-menu__chevron {
  transform: rotate(180deg);
}

/* The hamburger mark: three bars out of one element and its two pseudo-elements. */
.wi-header__toggle {
  display: none;
  align-self: center;
  margin-left: auto;
}

.wi-header__burger,
.wi-header__burger::before,
.wi-header__burger::after {
  display: block;
  width: 28px;
  height: 3px;
  background-color: currentColor;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.wi-header__burger {
  position: relative;
}

.wi-header__burger::before,
.wi-header__burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.wi-header__burger::before { top: -9px; }
.wi-header__burger::after  { top: 9px; }

.wi-header__toggle[aria-expanded='true'] .wi-header__burger {
  background-color: transparent;
}

.wi-header__toggle[aria-expanded='true'] .wi-header__burger::before {
  transform: translateY(9px) rotate(45deg);
}

.wi-header__toggle[aria-expanded='true'] .wi-header__burger::after {
  transform: translateY(-9px) rotate(-45deg);
}

/* ------------------------------------------------------------------ *
 * Skip link
 * ------------------------------------------------------------------ */

/* The link is invisible until it takes focus — then it has to be visible, otherwise focus
 * apparently jumps into nothing for keyboard users. The legacy site does not have it. */
.wi-skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--wi-header-z) + 1);

  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5em 1em;
  overflow: visible;

  clip-path: none;
  color: var(--wi-color-on-dark);
  background-color: var(--wi-color-ink);
}

/* ------------------------------------------------------------------ *
 * Narrower windows
 * ------------------------------------------------------------------ */

/*
 * 1800px: the logo moves 20px away from the left edge (F10).
 *
 * Above this the legacy holder has no left margin at all — the logo begins exactly where the
 * container does, which on a 1920 screen is x = 60, because the 1800px container is centred there.
 * The rebuild used to begin at x = 80 at every width, and that was the leftover F11 named and left
 * to F10: it is the same column, and one number cannot be got right twice.
 *
 * The legacy rule behind this step is `.fixed-holder .logo-holder { margin: 10px 0 0 20px }`, and
 * only its last value is rebuilt. The `10px` at the front lets the legacy logo hang below the bar
 * between 1800 and 1601px — 20px on the front page, 10px on a subpage, because the bar stays at
 * 120px while the holder drops. F11 declined that half for being an accident that comes out
 * differently per page; the sideways inset has no such property.
 */
@media only screen and (max-width: 1800px) {
  .wi-header__brand img,
  .wi-header__brand .custom-logo,
  .wi-header__site-title {
    margin-left: var(--wi-header-logo-inset-medium);
  }
}

/*
 * 1600px: the legacy site gives the logo column a fixed width here instead of a share —
 * 13.5 % of 1600 would be 216px and therefore tighter than the logo is wide.
 *
 * With it the logo takes its second step, from 120px to 100.17px, and drops by 10px. Both
 * narrowed down on the rendered snapshot at 1601 against 1600 (F11) and both true of the front
 * page and of every subpage: the legacy site's own difference between the two lies at 1300px,
 * not here.
 *
 * And both navigation levels take a step back, in opposite directions: the top level from 22 to
 * 20px, the drop-down from 22 to 18px. Both boundaries narrowed down on the rendered snapshot at
 * 1601 against 1600 (F4). The drop-down has no further step below this — 18px stands down to the
 * narrowest measured window.
 *
 * And the container stops being 1800px wide and becomes a share: 98 % of the window, centred. That
 * is the second half of F10 and the one that made the menu wrap — the share leaves 11px at 1101px
 * where the rebuild's fixed padding took 20, and 230px of logo column plus nothing else stand
 * between it and the navigation.
 */
@media only screen and (max-width: 1600px) {
  .wi-header__inner {
    max-width: var(--wi-header-inner-max-narrow);
  }

  .wi-header__brand {
    flex: 0 0 230px;
    /* The logo drops by 10px as it gets smaller — the legacy site's own value, measured at its
     * top edge. Above this it is as tall as the bar and there is nothing to drop. */
    margin-top: var(--wi-header-logo-offset-medium);
  }

  .wi-header__brand img,
  .wi-header__brand .custom-logo {
    /* Second step of the logo. Not a height rule in the legacy site but the consequence of the
     * 230px column — the derivation stands at the token. Together with the offset above, the
     * logo ends at y = 110.17 in the 120px bar, which is where the legacy site ends it too. */
    height: var(--wi-logo-height-medium);
    /* From here the legacy site caps the header images at their column. It does not bite at any
     * measured width — the rebuild's column is 230px wide where the legacy holder keeps 220 —
     * and it stands for the case the column ever gets narrower than the logo. */
    max-width: 100%;
    /* Third step of the inset (F10). The legacy holder keeps 10px of its 230px column here, which
     * is why its logo is 220px wide and the rebuild's 220.4: the cap above measures against the
     * column, the margin below sits inside it. */
    margin-left: var(--wi-header-logo-inset-narrow);
  }

  .wi-header__site-title {
    margin-left: var(--wi-header-logo-inset-narrow);
  }

  .wi-menu > li > a {
    font-size: var(--wi-font-size-nav-medium);
  }

  .wi-menu__submenu a {
    font-size: var(--wi-font-size-dropdown-medium);
  }
}

/*
 * 1300px: the header goes from 120px to 100px (work step 12).
 *
 * The legacy site does that — `body.home .fixed-holder header { height: 100px }` — but **only on
 * the front page**. On every subpage it stays at 120px, because a second rule with the same
 * specificity and a later position wins there
 * (`body .main-holder .fixed-holder header { height: 120px }`). Both selectors are (0,2,2); what
 * decided was the order in the stylesheet, not an intention.
 *
 * Here the staggering applies to every page. Reason: there is exactly one header, and the
 * occasion for the smaller height — from 1300px the room next to the navigation gets tight —
 * applies to the subpages just the same. A header that behaves differently depending on the page
 * would be the legacy burden, not the model.
 *
 * The logo takes its third step here, to 90px, and therefore closes flush at the bottom: 10px
 * offset + 90px height make exactly the 100px of the bar. That is precisely what the legacy site
 * does on its front page. The navigation's offset moves along, otherwise it would sit too low in
 * the lower bar.
 *
 * And this step carries `body.home` in the legacy site the same way the bar height does: on a
 * subpage the logo stays at 100.17px down to 992px. It is unified here for the same reason and
 * for one more, which is not a matter of taste: the bar is 100px tall on every page from 1300px,
 * and a 100.17px logo with its 10px offset would hang 10px below it. The legacy subpage can
 * afford the larger logo only because its bar is still 120px there (F11).
 */
@media only screen and (max-width: 1300px) {
  :root {
    --wi-header-height: 100px;
    --wi-header-nav-offset: 25px;
  }

  .wi-header__brand img,
  .wi-header__brand .custom-logo {
    height: var(--wi-logo-height-compact);
  }
}

/* 1100px: the first of the two padding steps of the top level. The legacy site pulls the items
 * together here before it reduces the type — narrowed down at 1101 against 1100 (F4). Until then
 * the rebuild jumped straight from 20px to the 5px below, and between 1100 and 1051px the five
 * items stood 16px wider apart than in the legacy site. */
@media only screen and (max-width: 1100px) {
  .wi-menu > li > a {
    padding-inline: var(--wi-header-nav-padding-inline-medium);
  }
}

/* 1050px: here the legacy site takes back the type size and the padding of the top level a
 * second time, so that the five items keep fitting side by side. Both narrowed down at 1051
 * against 1050. The drop-down does NOT follow — neither in size nor in padding. */
@media only screen and (max-width: 1050px) {
  .wi-menu > li > a {
    padding-inline: var(--wi-header-nav-padding-inline-narrow);
    font-size: var(--wi-font-size-nav-narrow);
  }
}

/*
 * 980px: this is where standing side by side stops. The legacy site keeps trying below 900px and
 * then visibly fails — it has an empty <div class='mobile-menu'> for mobile devices and nothing
 * else. E2 of the parent plan therefore lists the mobile navigation under "deliberately
 * corrected".
 *
 * The logo takes its fourth step here, not at the legacy site's 991px (work step 12). Eleven
 * pixels of difference would be no gain but a second threshold right next to the first: between
 * 981 and 991px one would see the logo jump once without anything else changing. At this point
 * the header rebuilds itself anyway — logo, navigation and area belong to the same turn. That
 * decision stands; F11 measured the band it costs (90px against the legacy site's 70px between
 * 991 and 981px) and bin/check-header.sh prints it as INFO instead of demanding it.
 */
@media only screen and (max-width: 980px) {
  /*
   * The panel keeps the geometry it had before F10, and that is a decision and not an oversight:
   * the 98 % container above is the legacy bar's, and the legacy bar spans the window. Carried down
   * here it would leave 3.75px between the logo and the edge of a 375px screen. The padding comes
   * back instead, and with it the logo's inset goes — the two would otherwise add up.
   */
  .wi-header__inner {
    align-items: center;
    position: relative;

    max-width: none;
    padding-inline: var(--wi-header-panel-inset);
  }

  /* Do not let it shrink: the logo is the only feature by which the site is recognisable in this
   * crop. It takes no room from the button beside it. */
  .wi-header__brand {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .wi-header__brand img,
  .wi-header__brand .custom-logo,
  .wi-header__site-title {
    margin-left: 0;
  }

  .wi-header__brand img,
  .wi-header__brand .custom-logo {
    height: var(--wi-logo-height-narrow);
  }

  /*
   * On narrow windows the legacy site gives the header an opaque area instead of the gradient
   * (`body.home .fixed-holder header { background-color: black }` from 1300px). That is not a
   * matter of taste: the gradient fades out downwards, and the white button would stand on white
   * page content while scrolling — invisible.
   */
  .wi-header {
    background-color: var(--wi-header-bg-color-narrow);
  }

  /*
   * Divi sets `padding-top: 0 !important` on `#page-container` here — right for its own header,
   * because that one is not fixed on narrow windows. Ours is at every width (E4), so the offset
   * has to stay, otherwise the page content begins underneath the bar.
   *
   * The rule names Divi's class explicitly. That is deliberate: against `!important` only
   * `!important` and a higher specificity help, and the latter would otherwise come out of a
   * trick (doubled selectors) that nobody can place later on. This way the selector says what the
   * rule is aimed at — Divi's original reads
   * `.et-tb #page-container, .et-tb-has-header #page-container { padding-top: 0 !important }`.
   */
  body.et-tb-has-header #page-container,
  body.et-tb #page-container,
  body > .wi-page {
    padding-top: var(--wi-header-height) !important;
  }

  .wi-js .wi-header__toggle {
    display: inline-flex;
  }

  .wi-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    margin-top: 0;
    max-height: calc(100vh - var(--wi-header-height));
    overflow-y: auto;

    background-color: var(--wi-color-ink);
    text-align: left;
  }

  /*
   * Collapsed is the normal state — but only if there is JavaScript that can open it again. The
   * class `wi-js` is set synchronously by template-parts/header.php as its first line; it is
   * there before the browser paints. Without JavaScript the rule does not bite, the menu stands
   * open one item below the other and the button stays away. A menu that is unreachable without a
   * script would be the worst of all states.
   */
  .wi-js .wi-header__nav {
    display: none;
  }

  .wi-js .wi-header__nav.is-open {
    display: block;
  }

  /*
   * The fallback without JavaScript. It does not consist of leaving the menu open — it would then
   * hang as a panel over the start of the page, which nobody would get to see. Instead the header
   * gives up being fixed and grows along: everything stands one below the other in the flow, the
   * page content begins underneath. The button stays away because both rules above demand
   * `.wi-js`.
   */
  html:not(.wi-js) .wi-header {
    position: static;
    height: auto;
  }

  html:not(.wi-js) .wi-header__inner {
    flex-wrap: wrap;
    height: auto;
  }

  html:not(.wi-js) .wi-header__nav {
    position: static;
    flex-basis: 100%;
    max-height: none;
  }

  html:not(.wi-js) body.et-tb-has-header #page-container,
  html:not(.wi-js) body.et-tb #page-container {
    padding-top: 0 !important;
  }

  .wi-menu {
    display: block;
  }

  /*
   * In the panel the two steps above are taken back: there is room again, one item below the
   * other. The size is the MIDDLE step of the navigation and no longer the body one — the panel
   * has no legacy counterpart (E2), but hanging it on body copy is exactly the mistake F4 was
   * about, and it would be no better for being invisible here.
   */
  .wi-menu > li > a {
    padding: var(--wi-header-nav-padding-block) var(--wi-header-nav-padding-inline);
    font-size: var(--wi-font-size-nav-medium);
  }

  /* There is no hover substitute here: the menu stands one item below the other, a submenu is
   * opened by the button alone. It therefore has to be visible regardless of the pointer type. */
  .wi-js .wi-menu__toggle {
    display: inline-flex;
    /* A hand needs more than the chevron: the whole square at the right edge of the entry is the
     * target, 48px wide (tokens.css). The link keeps clear of it, so the text never runs under
     * the button. Both reported on 2026-10-23: too small to hit and to see. */
    min-width: var(--wi-menu-toggle-size);
    /* And exactly the row's height, not the entry's: in the panel the submenu stands in the flow
     * below its link, so an open entry is as tall as its whole submenu, and the `height: 100%`
     * from above put the chevron in the middle of that — beside "Our vision" rather than beside
     * "WILDislands" (seen on dev, 2026-10-23). Every row in the panel is the square below. */
    height: var(--wi-menu-toggle-size);
  }

  .wi-js .wi-menu li.menu-item-has-children > a {
    padding-right: var(--wi-menu-toggle-size);
  }

  .wi-menu__chevron {
    border-inline-width: var(--wi-menu-chevron-half-width);
    border-top-width: calc(var(--wi-menu-chevron-half-width) * 1.25);
  }

  /* The button is as tall as its row, so the row has to be as tall as a target: the drop-down's
   * rows measured 41px (7.5px of padding around an 18px line). The link grows to the square and
   * keeps its text centred; the top level is taller than that already. */
  .wi-menu li > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--wi-menu-toggle-size);
  }

  /* In the opened menu top-level and sub-items stand one below the other. The absolute
   * positioning from above would give a menu here that falls over itself. */
  .wi-menu__submenu {
    position: static;
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background-color: var(--wi-color-surface);
  }

  .wi-menu > li.is-open > .wi-menu__submenu {
    display: block;
  }

  /* Hover must open nothing here — on a touch device it fires while scrolling. The rule stands
   * after the is-open rule, which is why that one is repeated below it: otherwise it would close
   * a submenu again as soon as the finger rests on it. */
  .wi-menu > li:hover > .wi-menu__submenu,
  .wi-menu > li:focus-within > .wi-menu__submenu {
    display: none;
  }

  .wi-menu > li.is-open > .wi-menu__submenu {
    display: block;
  }

  .wi-menu__submenu a {
    padding-left: calc(var(--wi-header-nav-padding-inline) * 2);
  }

  /* The fly-out becomes a nested block in the panel, one more step in, opened by its own button
   * like the drop-down above it. The three rules mirror the drop-down's: closed by default, open
   * with `is-open`, and hover opens nothing. */
  .wi-menu__submenu--nested {
    position: static;
    display: none;
  }

  .wi-menu__submenu > li.is-open > .wi-menu__submenu--nested {
    display: block;
  }

  .wi-menu__submenu > li:hover > .wi-menu__submenu--nested,
  .wi-menu__submenu > li:focus-within > .wi-menu__submenu--nested {
    display: none;
  }

  .wi-menu__submenu > li.is-open > .wi-menu__submenu--nested {
    display: block;
  }

  .wi-menu__submenu--nested a {
    padding-left: calc(var(--wi-header-nav-padding-inline) * 3);
  }

  /* No triangle in the panel: the button beside the entry is the mark there, as on level 1. */
  .wi-menu__submenu > li.menu-item-has-children > a::after {
    display: none;
  }
}