/* The seam to Salient and WPBakery.

   Patches on framework selectors (.vc_row, .wpb_column, .sf-menu, #header-outer)
   that belong to no single component live here. This is also the only place
   where !important is normal: Salient's specificity sometimes simply has to be
   beaten, and we isolate that here instead of sprinkling it through the
   components.

   If an override belongs to one component, it lives in that component, not here. */

/* Gravity Forms Orbital — Figma contact form (7444:6916).
   Label/description color inherits from the section (dark → white, light → body).
   !important on tokens that GF also writes into the per-form inline <style>. */
.gform-theme--api,
.gform-theme--foundation,
.gform-theme--framework {
  --gf-form-gap-x: 1.5rem; /* 24px Figma */
  --gf-form-gap-y: 1.5rem;
  --gf-label-space-primary: 0.25rem; /* 4px label → control */
  --gf-ctrl-size: 2.75rem !important; /* 44px; beats inline --gf-ctrl-size-md */
  --gf-radius: var(--radius) !important;
  --gf-ctrl-radius: var(--radius);
  --gf-ctrl-textarea-radius: var(--radius);
  --gf-ctrl-textarea-height: 8.4375rem; /* 135px */
  --gf-ctrl-padding-x: 1rem;
  --gf-ctrl-bg-color: var(--color-on-primary);
  --gf-ctrl-border-color: var(--color-primary) !important;
  --gf-ctrl-border-color-hover: var(--color-primary);
  --gf-ctrl-border-color-focus: var(--color-brand-1);
  --gf-font-family-base: inherit;
  --gf-ctrl-btn-font-family: inherit;
  --gf-ctrl-label-font-size-primary: 0.875rem; /* 14px */
  --gf-ctrl-label-font-weight-primary: 400;
  --gf-ctrl-label-letter-spacing-primary: 0.03125rem; /* 0.5px */
  --gf-ctrl-label-line-height-primary: 1.25rem; /* 20px */
  --gf-ctrl-label-color-primary: inherit !important;
  --gf-ctrl-label-color-secondary: inherit !important;
  --gf-ctrl-label-color-tertiary: inherit;
  --gf-ctrl-label-color-quaternary: inherit;
  --gf-ctrl-desc-color: inherit !important;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_description {
  color: inherit;
}

/* Errors + required asterisk: inherit only on light-text / white-color parents
   (Salient .light = light type on a dark band; inline color:#FFF on columns). */
:is(
  .light,
  [style*="color: #FFF" i],
  [style*="color:#FFF" i]
) :is(.gform-theme--api, .gform-theme--foundation, .gform-theme--framework) {
  --gf-ctrl-label-color-req: inherit !important;
  --gf-ctrl-desc-color-error: inherit !important;
  --gf-form-validation-color: inherit !important;
  --gf-form-validation-heading-color: inherit !important;
  --gf-form-validation-summary-color: inherit !important;
  --gf-color-danger: currentColor !important;
  --gf-color-danger-rgb: 255, 255, 255;
}

:is(
  .light,
  [style*="color: #FFF" i],
  [style*="color:#FFF" i]
) .gform_wrapper :is(
  .gfield_required,
  .gfield_required_asterisk,
  .gfield_validation_message,
  .gform_validation_errors,
  .gform_submission_error,
  .gform_validation_errors a,
  .gform_validation_errors ol,
  .gform_validation_errors li
) {
  color: inherit !important;
}

.gform_submission_error .gform-icon {
  display: none;
}

/* Salient's material skin turns inputs translucent inside a light column
   (.span_12.light input/textarea → rgba(255,255,255,.07) + white text), which
   leaves the contact form's fields dark-on-dark on a filled row. Gravity Forms
   owns these controls, so hand them back to GF's own tokens. */
.span_12.light .gform_wrapper :is(input, textarea, select) {
  background-color: var(--gf-ctrl-bg-color, #fff);
  border-color: var(--gf-ctrl-border-color, var(--color-primary));
  color: var(--color-primary);
}

/* Back to top — Figma Frame 1195 (footer): a 40px white disc with a thin dark
   arrow. Salient's #to-top is a 29px translucent-black square with a Font
   Awesome angle-up, sized and coloured from the generated options CSS, plus two
   pseudo-element layers that scale a dark disc in on hover.

   Position, bottom/right and transform are deliberately left alone: the button
   is revealed by animating an inline transform (init.js, translateY(-50%) past
   350px of scroll), so touching those would break the reveal. */
#to-top {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  line-height: 0;
  /* Beats the material skin's border-radius: 0 !important. */
  border-radius: 50% !important;
  background-color: var(--color-on-primary) !important;
  box-shadow: none !important;
  transition: background-color 0.15s linear;
}

/* Hover: a shade off white. Salient's own hover look was the dark ::after disc
   scaling in over a transparent element, so with that layer gone its
   transparent background leaves nothing behind.

   The id is repeated to win on specificity, not for effect. Salient declares
   this in the generated CSS as

     body[data-button-style*="rounded"] #to-top:hover

   which is (1,2,1) — and body here is data-button-style="slightly_rounded_shadow",
   so it matches. An !important of our own is not enough: a plain
   `body #to-top:hover` is only (1,1,1) and still loses. Doubling the id gives
   (2,1,0), which outranks it on id count without depending on that body
   attribute staying as it is. The same Salient rule also adds a box-shadow and
   delays the background transition by 250ms, so both are reset here too. */
#to-top#to-top:hover,
#to-top#to-top:focus-visible,
#to-top#to-top.hovered,
#to-top#to-top.dark:hover {
  background-color: var(--color-gray) !important;
  box-shadow: none !important;
  transition: background-color 0.15s linear;
}

/* Salient's ripple layers — the design has a flat disc. */
#to-top::after,
#to-top::before {
  display: none !important;
}

/* Salient's JS adds a second .fa-angle-up (.top-icon) and slides the pair up by
   29px on hover, so one arrow leaves as the other arrives. That distance is its
   own 29px button, and the design is a flat disc, so keep a single static arrow.
   Hiding the injected copy rather than the original keeps an arrow if the JS
   never runs. */
#to-top .top-icon {
  display: none;
}

/* Swap the Font Awesome glyph for the design's arrow. */
#to-top .fa-angle-up {
  inline-size: 1rem;
  block-size: 1rem;
  background-color: var(--color-primary);
  /* Figma: the shape is 11 × 12 inside the 16px icon box. */
  mask: url("../static/images/arrow-top.svg") center / 0.6875rem 0.75rem no-repeat;
  -webkit-mask: url("../static/images/arrow-top.svg") center / 0.6875rem 0.75rem no-repeat;
  transform: none !important;
}

#to-top .fa-angle-up::before {
  content: none;
}

/* Salient dims submits on hover — keep btn-gradient readable. */
body[data-form-submit="regular"] .gform_wrapper button[type="submit"].btn:hover,
body[data-form-submit="regular"] .gform_wrapper input[type="submit"]:hover {
  opacity: 1 !important;
}

/* Beat Salient `.material .wpb_row, .material .wpb_content_element { margin-bottom: 1.5em }`. */
body.material .wpb_content_element,
body.material .wpb_row {
  margin-bottom: 2rem;
}

/* Inside a nested column that margin is spacing to nothing: the inner row
   already spaces itself from what follows, so the two stacked into a gap twice
   the size (the contact block's title on a phone). */
.inner_row .child_column > .vc_column-inner > .wpb_wrapper > :last-child {
  margin-bottom: 0;
}

/* A row with column margin "none" zeroes the 25px Salient otherwise gives
   stacked columns, nested ones included. Right side by side, but stacked at
   690px it put the contact block's photo flush against its title. */
@media (max-width: 690px) {
  [data-column-margin="none"] .inner_row .child_column + .child_column {
    margin-top: var(--gap-l);
  }
}

/* Page Builder vertical rhythm (Zorgvrij model, Salient selectors).
   Gap between stacked outer rows is margin; filled rows (full-bleed or
   contained) get that spacer as inner padding so the colour fills with
   breathing room. Nested .inner_row stays compact. .u-no-padding opts
   a row out of fill padding. */

/* Half background: hard stop at 50% — top transparent, bottom primary.
   Paint on Salient’s .row-bg layer (absolute, full row).
   Bottom spacer as padding so the dark half extends into the gap. */
.wpb_row.half-background:not(.inner_row):not(.u-no-padding) {
  padding-bottom: var(--row-padding-block-end);
}

.wpb_row.half-background > .row-bg-wrap .row-bg {
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    var(--color-primary) 50%,
    var(--color-primary) 100%
  );
}

/* Case tiles are meant to sit astride the colour edge with the split halfway up
   their images. Half the row is not that point — a heading above the tiles moves
   it down by its own height — and the row layer cannot know how tall an image is.
   So hand the band to the component, which does: case-tiles.css. */
.wpb_row.half-background:has(.case-tiles) > .row-bg-wrap .row-bg {
  background-image: none;
}

.container-wrap .main-content > .row > .wpb_row.half-background:not(.inner_row):last-child:not(.u-no-padding) {
  margin-block-end: 0;
}

.wpb_row:not(.inner_row) + .wpb_row:not(.inner_row) {
  margin-block-start: var(--row-spacer);
}

/* Salient: hex bg_color → .has-row-bg-color (any width). */
.wpb_row.has-row-bg-color:not(.inner_row):not(.u-no-padding) {
  padding-top: var(--row-padding-block-start);
  padding-bottom: var(--row-padding-block-end);
}

/* A contained filled row is a card (Over ons, "Onze missie"). On desktop a
   column offset keeps the content off its edge; stacked, the offset is gone and
   the text ran flush against the side of the card. */
@media (max-width: 999px) {
  .wpb_row.has-row-bg-color:not(.full-width-section):not(.inner_row) {
    padding-inline: var(--gap-l);
  }
}

/* Adjacent filled rows: padding already spaces them. */
.wpb_row.has-row-bg-color:not(.inner_row)
  + .wpb_row.has-row-bg-color:not(.inner_row) {
  margin-block-start: 0;
}

/* Row class `hero-band`: the page’s first row runs behind the fixed header,
   the way .hero does in hero.css. That component owns its own markup, so it
   can’t be dropped into the page builder — this is the row-level version, for
   a page whose opening section is built from rows (e.g. Contact).

   Collapse Salient’s spacer, then pay the header height back as padding so the
   colour starts at the top of the viewport while the content still clears the
   bar. Wins the padding-top of .has-row-bg-color above on class count. */
body:has(.wpb_row.hero-band) #header-space {
  height: 0 !important;
  background: transparent;
}

body[data-header-resize="1"]:has(.wpb_row.hero-band) .container-wrap {
  padding-block-start: 0;
}

.wpb_row.hero-band.has-row-bg-color:not(.inner_row) {
  padding-top: calc(var(--header-height) + var(--row-padding-block-start));
}

/* The brand wheel, as in the hero. Two things decide where it lives:

   Not .rotating-wheel — that class turns its column into a centred flex box,
   which suits the footer's wheel-only column but would lay this column's
   stacked content out in a row.

   And not the row itself — a full-width-section bleeds past the row box through
   .row-bg-wrap, so clipping the row to contain a 120vw wheel would cut the
   colour back to container width. .row-bg-wrap is already the full-bleed layer,
   so it can clip the wheel without costing the bleed, and it sits under the
   content by itself. */
.wpb_row.hero-band > .row-bg-wrap {
  overflow: hidden;
}

.wpb_row.hero-band > .row-bg-wrap::after {
  content: "";
  position: absolute;
  /* Figma: the looping animation is centred left of the middle, near the top. */
  top: 23rem;
  left: 27%;
  translate: -50% -50%;
  inline-size: 120vw;
  aspect-ratio: 1;
  background: url("../static/images/wheel.png") center / contain no-repeat;
  opacity: 0.2;
  animation: rotate 25s infinite linear;
  pointer-events: none;
  /* Above Salient's .inner-wrap colour layer, still under the row content. */
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .wpb_row.hero-band > .row-bg-wrap::after {
    animation: none;
  }
}

/* Close the page: last outer row in .container-wrap gets the spacer below.
   Plain → margin; filled → padding (colour extends into the gap). */
.container-wrap .main-content > .row > .wpb_row:not(.inner_row):last-child:not(.has-row-bg-color) {
  margin-block-end: var(--row-spacer) !important;
}

.page .container-wrap {
  padding-block: 0 !important;
}

/* Salient single.css: .single-post[data-bg-header] .container-wrap { padding-top: 40/80px !important }.
   Cases are .single-case so they never hit it; blog posts do even with our own template. */
body.single-post.material[data-bg-header="true"] .container-wrap.case-single-wrap,
body.single-post[data-bg-header="true"] .container-wrap.case-single-wrap,
body.single-post .container-wrap.case-single-wrap {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}

body.single-post .case-single-wrap .nectar-global-section.nectar_hook_before_content,
body.single-post .case-single-wrap .nectar_hook_before_content_global_section {
  margin-bottom: 0;
}

.container-wrap .main-content > .row > .wpb_row.has-row-bg-color:not(.inner_row):last-child:not(.u-no-padding) {
  margin-block-end: 0;
  padding-bottom: var(--row-padding-block-end);
}

/* Clip Salient’s abs .row-bg to .border-radius (TL + BR, --radius-lg). */
.wpb_row.border-radius {
  overflow: hidden;
}

/* Overlay nav hangs past the content box; clip only the bg so the radius stays. */
.wpb_row.border-radius:has(:is(.logo-carousel, .gallery)) {
  overflow: visible;
}

.wpb_row.border-radius:has(:is(.logo-carousel, .gallery)) > .row-bg-wrap {
  overflow: hidden;
  border-start-start-radius: var(--row-radius, var(--radius-lg));
  border-end-end-radius: var(--row-radius, var(--radius-lg));
}

/* Salient typo class. Brand radius: top-left + bottom-right (Figma).
   Scoped to .container-wrap so footer global sections stay square. */
.container-wrap .img-with-aniamtion-wrap .hover-wrap,
.container-wrap .img-with-aniamtion-wrap .img-with-animation,
.container-wrap .img-with-aniamtion-wrap .color-overlay {
	border-radius: 0 !important;
	border-start-start-radius: var(--radius-lg) !important;
	border-end-end-radius: var(--radius-lg) !important;
}

/* Facta gallery component — beat Salient `.gallery a img` frame (padding/border). */
.gallery a.gallery-link img.gallery-image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Decorative spinning wheel on WPBakery columns (extra class rotating-wheel). */
.rotating-wheel::before {
  content: "";
  position: absolute;
  background-image: url("../static/images/wheel.png");
  background-repeat: no-repeat;
  background-size: contain;
  animation: rotate 25s infinite linear;
  width: 120vw;
  aspect-ratio: 1;
  z-index: -1;
  opacity: 0.2;
  pointer-events: none;
}

@keyframes rotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 359deg;
  }
}

.wpb_column.rotating-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotating-wheel-mobile::before {
  @media (min-width: 769px) {
    display: none !important;
  }
}

.rotating-wheel-desktop::before {
  @media (max-width: 768px) {
    display: none !important;
  }
}

/* Global footer section (Salient class .footer) + copyright bar. */
.footer {
  overflow-y: clip;

  .rotating-wheel {
    &::before {
      width: 70vw;
    }

    > .vc_column-inner {
      position: absolute;

      /* Stacked, the wheel column's centring put the social icons in the
         middle while everything else in the footer sits left. Back in the flow
         and full width, they line up; the wheel stays centred on its own. */
      @media (max-width: 690px) {
        position: relative;
        flex: 1;
      }
    }
  }

  .nectar_icon {
    border-radius: 50%;
    background-color: var(--color-on-primary);
    margin-inline-end: 1.25rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
  }

  .our-companies p {
    padding-block-end: 1rem;
  }

  .our-companies a {
    text-decoration: underline;
    position: relative;
    display: block;

    &[target="_blank"]::after {
      content: "\f08e";
      font-family: "FontAwesome";
      position: absolute;
      inset-inline-end: 0;
      vertical-align: baseline;
    }
  }
}

.copyright ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;

  @media (max-width: 768px) {
    flex-direction: column;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: underline;

    &[target="_blank"] {
      opacity: 1;
    }
  }
}

/* Logged in, the admin bar sits over the top of the viewport and Salient moves
   #header-outer down by its own set of numbers. Anchor scrolling has to clear
   both, so --header-offset-top mirrors those numbers exactly:
   style.css      → top: 32px
   responsive.css → top: 0 below 1000px, top: 47px at 782px and under.
   Below 600px WordPress stops pinning the bar, but Salient keeps the 47px, so
   that breakpoint is Salient's to change, not ours. */
:root:has(body.admin-bar) {
  --header-offset-top: 32px;
}

@media (max-width: 999px) {
  :root:has(body.admin-bar) {
    --header-offset-top: 0px;
  }
}

@media (max-width: 782px) {
  :root:has(body.admin-bar) {
    --header-offset-top: 47px;
  }
}

/* Header: logo left, utility buttons + main menu stacked on the right (Figma).
   Not Salient's secondary header bar — buttons come from nectar_hook_before_button_menu_items. */
@media (min-width: 1000px) {
  /* Salient insets a top-level menu label from its own <li> by 21px (it writes
     that as margin on the link so the underline hugs the text). The dropdown
     panel starts at the <li>, so its first column has to pay the same inset back
     or the sub-items sit to the right of the label they hang under. */
  #header-outer #top nav > .sf-menu:not(.buttons) {
    --submenu-inset-start: 21px;
  }

  /* Salient puts "header padding" on #logo margins; with a stacked nav that
     leaves menu items flush to the edge. Real block padding instead. */
  #header-outer #top {
    padding-block: var(--header-padding);
  }

  #header-outer #logo,
  #header-outer .logo-clone,
  #header-outer .logo-spacing {
    margin-block: 0 !important;
  }

  #header-outer.small-nav #top {
    padding-block: calc(var(--header-padding) / 1.8);
  }

  #header-outer #top nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: calc(var(--gap-m) + var(--gap-s)); /* 24px. Figma 11px; more air at the client's request */
  }

  #header-outer #top nav > .buttons {
    order: -1;
    margin-inline-start: 0 !important;
    /* Both rows are flex items with Salient's z-index:10, so they stack — and
       order:-1 puts this one underneath. Lift it so the language panel, which
       hangs down into the menu row, paints on top. */
    z-index: 11;
  }

  /* Salient's "Bottom of Header Navigation Bar" is top:100% of a stretched li.
     The column nav shrinks those lis to the label; grow the menu and extend
     each item through #top's bottom padding so 100% is the header edge again. */
  #header-outer #top nav > .sf-menu:not(.buttons) {
    display: flex;
    justify-content: flex-end;
    flex: 1 0 auto;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item {
    align-items: flex-start;
    padding-block-end: var(--header-padding);
    margin-block-end: calc(var(--header-padding) * -1);
  }

  /* Salient spaces items with padding/margin on both sides of every link.
     Drop the trailing end so the last label lines up with the language button. */
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:last-child > a {
    margin-inline-end: 0;
    padding-inline-end: 0;
  }

  #header-outer.small-nav #top nav > .sf-menu:not(.buttons) > .menu-item {
    padding-block-end: calc(var(--header-padding) / 1.8);
    margin-block-end: calc(var(--header-padding) / -1.8);
  }

  /* Hide Salient's default search control; our .header-buttons owns the trigger. */
  #header-outer #top nav > .buttons > #search-btn {
    display: none;
  }

  /* Main-nav dropdowns: padding + item dividers (Figma 7444:13620). */
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu {
    width: max-content;
    padding: 1.25rem 1.875rem 2rem var(--submenu-inset-start);
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item {
    float: none;
    width: max-content;
    min-width: 100%; /* stretch to equal column; still contribute intrinsic width */
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item > a {
    display: block;
    white-space: nowrap;
    padding-block: 0.75rem; /* 12px Figma gap around divider */
    padding-inline: 0 2rem;
    border-block-end: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    line-height: 1.5rem; /* lock line box so bold hover doesn't change height */
    background-color: transparent !important;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item > a .menu-title-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Invisible bold twin: columns size to bold width, hover can use real weight. */
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item > a .menu-title-text::after {
    content: attr(data-text);
    font-weight: 700;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    user-select: none;
    pointer-events: none;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item > a:hover,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item.sfHover > a,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .current-menu-item > a,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .current-menu-ancestor > a {
    background-color: transparent !important;
    color: var(--color-on-primary) !important;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item > a:hover .menu-title-text,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .menu-item.sfHover > a .menu-title-text,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .current-menu-item > a .menu-title-text,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu) > .sub-menu > .current-menu-ancestor > a .menu-title-text {
    font-weight: 700;
  }

  /* Two columns, top-to-bottom. Equal col width = widest item (+ its 2rem end padding).
     Opt-in: CSS class `submenu-cols` on the parent. Also auto at 7+ items. */
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item.submenu-cols:not(.megamenu) > .sub-menu,
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(7)) > .sub-menu {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--submenu-rows, 4), auto);
    column-gap: 1.875rem; /* 30px Figma */
    padding-inline: var(--submenu-inset-start) 0.9375rem; /* 15px end, Figma */
    padding-block: 1.25rem 2rem;
  }

  /* Row count = ceil(n / 2) so column-flow splits evenly. */
  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(1)):not(:has(> .sub-menu > .menu-item:nth-child(3))) {
    --submenu-rows: 1;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(3)):not(:has(> .sub-menu > .menu-item:nth-child(5))) {
    --submenu-rows: 2;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(5)):not(:has(> .sub-menu > .menu-item:nth-child(7))) {
    --submenu-rows: 3;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(7)):not(:has(> .sub-menu > .menu-item:nth-child(9))) {
    --submenu-rows: 4;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(9)):not(:has(> .sub-menu > .menu-item:nth-child(11))) {
    --submenu-rows: 5;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(11)):not(:has(> .sub-menu > .menu-item:nth-child(13))) {
    --submenu-rows: 6;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(13)):not(:has(> .sub-menu > .menu-item:nth-child(15))) {
    --submenu-rows: 7;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(15)):not(:has(> .sub-menu > .menu-item:nth-child(17))) {
    --submenu-rows: 8;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(17)):not(:has(> .sub-menu > .menu-item:nth-child(19))) {
    --submenu-rows: 9;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(19)):not(:has(> .sub-menu > .menu-item:nth-child(21))) {
    --submenu-rows: 10;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(21)):not(:has(> .sub-menu > .menu-item:nth-child(23))) {
    --submenu-rows: 11;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) > .menu-item:not(.megamenu):has(> .sub-menu > .menu-item:nth-child(23)):not(:has(> .sub-menu > .menu-item:nth-child(25))) {
    --submenu-rows: 12;
  }
}

.header-buttons {
  float: none !important;
  list-style: none;
}

.header-buttons-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

#slide-out-widget-area .header-buttons-inner {
  flex-direction: column;
  align-items: flex-start;
}

.header-buttons .btn {
  margin: 0 !important;
  padding-block: 4px !important;
  padding-inline: 8px !important;
}

.header-buttons .btn-primary {
  background-color: var(--color-header-btn) !important;
  border-color: var(--color-header-btn);
  color: var(--color-on-primary) !important;

  &:hover,
  &:focus-visible {
    color: var(--color-primary) !important;
  }
}

.header-buttons .btn-primary.btn-urgent {
  color: var(--color-urgent) !important;

  &:hover,
  &:focus-visible {
    color: var(--color-primary) !important;
  }
}

/* Open state lives on the li (Superfish panel is a sibling of the toggle). */
.header-buttons .sf-menu > li:is(:hover, :focus-within, .sfHover) > .btn-primary {
  color: var(--color-primary) !important;
  border-color: var(--end-color);

  &::before {
    width: calc(200% + 2rem);
  }
}

/* Salient reads this nested ul.sf-menu as a deep submenu: `.sf-menu > li ul`
   sizes it 20em wide with 20px padding, `.sf-menu li li ul` parks the panel at
   left:20em / top:0 with -20px margins. Reset that geometry — the toggle is
   only as wide as its label, the panel hangs right-aligned underneath. */
.header-buttons .sf-menu {
  position: static;
  pointer-events: all;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;

  > li {
    float: none;
    position: relative;
    width: auto;
  }

  .sub-menu {
    top: 100% !important; /* beat .sf-menu li li ul { top: 0 !important } */
    left: auto !important; /* beat .sf-menu > li.sfHover > ul { left: 0 } */
    right: 0;
    width: max-content;
    min-width: 100%;
    margin: 0 !important; /* beat [data-header-color] … li ul { margin-top: -20px } */
    padding: 0.5rem;
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
  }
}

#header-outer .header-buttons .emergency-selector .sub-menu {
  width: max-content;
  max-width: max-content;
  min-width: 0; /* beat shared min-width: 100% (toggle width) */
  padding: 0.625rem 0.9375rem 1rem; /* half of main-nav 1.25 / 1.875 / 2 */

  > .menu-item {
    float: none;
    width: max-content;
    min-width: 100%;
  }

  > .menu-item > a {
    display: flex;
    align-items: baseline;
    width: 100%;
    white-space: nowrap;
    padding-block: 0.75rem; /* same gap around the divider as main-nav */
    padding-inline: 0;
    border-block-end: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    background-color: transparent !important;
  }

  .emergency-selector-label {
    flex: 0 0 120px;
    width: 120px;
    margin-inline-end: 1rem;
  }
}

/* Mobile: phone icon in Salient's `.nectar-mobile-only` slot. */
.emergency-mobile {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--color-urgent);
  cursor: pointer;
  line-height: 1;
}

.emergency-mobile .fa-phone {
  font-size: 22px;
  transform: rotate(270deg);
}

/* Mobile numbers modal — factarotating.nl overlay, native <dialog>. */
.emergency-modal[open] {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.emergency-modal::backdrop {
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.emergency-modal-panel {
  position: relative;
  width: min(80vw, 22rem);
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
}

.emergency-modal-close {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  translate: 100% -100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-primary);
  cursor: pointer;
  line-height: 1;
}

.emergency-modal-close .fa-times {
  font-size: 2rem;
}

.emergency-modal-title {
  margin: 0;
  padding-bottom: 0;
}

.emergency-modal-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.emergency-modal-list li {
  list-style: none;
}

.emergency-modal-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--color-border);
  color: inherit;
}

.emergency-modal-list li:last-child a {
  border-block-end: 0;
}

/* Salient 404: same offset as .nectar-button, now on the Facta btn. */
body #error-404 .btn {
  margin-block-start: 3.125rem;
}