/* Navbar refinements.
 * ===========================================================================
 *
 * Measured, not guessed. The header at 1440x900 before this file, reading the
 * actual ink in a screenshot rather than the element boxes:
 *
 *            ink top   ink bottom   height   optical centre
 *   logo        27         96         69px        62
 *   links       56         78         22px        67
 *   button      47         84         37px        66
 *
 * Two problems fall out of that. The logo carries three times the ink of the
 * links and nearly touches the top of the viewport — its box is the full 89px
 * band, 22px to 111px, and the hero frame starts at exactly 111. And its
 * optical centre sits 4-5px above everything else, because the artwork is not
 * centred inside its own file: within the 89px box the ink runs 5..74, so its
 * middle is 5px high.
 *
 * Everything else in the header is already centred correctly (all three boxes
 * report mid = 66) — the misalignment was entirely the logo.
 */

/* Where the header ends, for whatever has to sit directly under it. The hero
   frame used to hard-code 111px with a comment explaining it was "y 22 + h 89";
   scaling the logo made that wrong by 17px, so the number lives here now and
   the heroes read it.
     desktop  navbar top 22 + height 72 = 94
     <=991    navbar top  0 + height 72 = 72   (the bar is flush at the top) */
:root {
  --site-header-bottom: 94px;
  /* How far the bar floats below the viewport top. The reveal ground has to
     start up there, not at the bar's own edge. */
  --site-header-top: 22px;
  /* The header's typeface, shared by the links and the Contact button. */
  --site-nav-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Glass. One definition for every surface that sits over the page and has to
     stay legible — the header ground here, the modal scrims in modal.css. They
     were written twice and would have drifted apart on the first change.
     0.58 is not arbitrary: see the arithmetic at .navbar::before below. */
  --site-glass: rgba(12, 12, 12, 0.58);
  --site-glass-blur: blur(40px);
  /* Brand colour. The one token the two ported sites disagree on: sand on
     Defence, blue on Lawenforcement (measured off their compiled
     stylesheets). Everything in the design system reads this rather than
     naming a colour, so a site only has to override it once. */
  --site-accent: var(--_primitives---colors--brand-yellow, #c4b798);
}

@media (max-width: 991px) {
  :root {
    --site-header-bottom: 72px;
    --site-header-top: 0px;
  }
}

/* 1208x671 source, so height drives the width. 56px puts the logo's ink at
   ~43px, in proportion with the 37px button instead of towering over it, and
   leaves ~16px of air above and below inside the 89px band. */
.navbar .navbar_logo {
  /* 60px, raised from 44px when the official mark replaced the Figma export.
   *
   * The two lockups are not interchangeable. The old one was the bold cut with
   * a sand swoosh and the wordmark filling 45% of the box; the official file is
   * the light cut with a white swoosh sweeping high and low, and "DRONIVO"
   * takes only 27% of the height. Measured at the same 44px box: the wordmark
   * dropped from 19.8px to 11.9px — a third smaller, and set in a thinner
   * weight on top of that.
   *
   * 60px puts the wordmark back at ~16px. Matching the old 19.8px exactly would
   * need a 73px box, which does not fit a 72px header — this is the closest
   * legible size that leaves the band intact. */
  height: 3.75rem;
  width: auto;
}

/* Defence only.
 *
 * The 60px above is sized for the official Dronivo Defence lockup. Lawenforcement
 * and General carry their OWN marks with their own proportions (2.73 and 2.39
 * against Defence's 1.96), and this stylesheet is shared — without this reset
 * their logos grew by a third for a reason that has nothing to do with them.
 *
 * `.wf-site` is the wrapper SitePage puts around the non-Defence sites; Defence
 * renders through the other branch and never carries it. */
.wf-site .navbar .navbar_logo {
  height: 2.75rem;
}

@media (max-width: 991px) {
  .wf-site .navbar .navbar_logo {
    height: 2.75rem;
  }
}

/* The link is a block wrapping the image and inherited the old height. */
.navbar .navbar_logo-link,
.navbar .navbar_container > a:first-child {
  display: flex;
  align-items: center;
}

/* Never distort the mark.
 *
 * Webflow gives `.navbar_logo-link` a fixed 96px width below 992px, and the
 * global `img { max-width: 100% }` clamps the logo to it. With an explicit
 * height and the default `object-fit: fill`, the result is a horizontally
 * squashed wordmark — measured at 96x60 where the file's ratio wants 118x60.
 *
 * This is not new: the previous mark was squashed too, 96x44 against a natural
 * 131x44, i.e. 27% narrower than drawn. It went unnoticed because that cut was
 * bold and short; the official one is a light, wide lockup where the
 * compression is obvious.
 *
 * Two fixes, deliberately both: the wrapper is allowed to take the width the
 * mark needs, and `object-fit: contain` guarantees that any future clamp
 * letterboxes instead of stretching. A logo is the one asset on a site that may
 * never be redrawn by a layout rule. */
.navbar .navbar_logo {
  object-fit: contain;
}

@media (max-width: 991px) {
  .navbar .navbar_logo-link,
  .navbar .navbar_logo-link.w--current {
    width: auto;
    max-width: 60vw;
  }

  /* 52px rather than the header's 60: the mobile band is tighter and the mark
     still clears the 44px minimum for the tap target it sits in. */
  .navbar .navbar_logo {
    height: 3.25rem;
  }
}

/* Fallback: if the button swap in lib/nav-button.ts ever stops matching, the
   Webflow pill is still shaped like the rest of the header rather than
   reverting to a 160px radius on its own.
   Scoped to .navbar — `.btn-bubble-arrow` is also the "Learn more" button on
   the not-yet-rebuilt pages, and those keep their pill. */
.navbar .btn-bubble-arrow__content,
.navbar .btn-bubble-arrow__arrow,
.navbar .btn-bubble-arrow__arrow.is--duplicate {
  border-radius: 2px;
}

.navbar .btn-bubble-arrow__content {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* --- Links ---------------------------------------------------------------- */

/* Set in the same face as the Contact button, so the header reads as one
   object rather than a serif-ish wordmark, a grotesk menu and a mono button.
   0.04em uppercase is the button's own setting, and it is also what Anduril
   runs in its header (measured: 12px, 0.48px tracking, uppercase).
 *
 * One deliberate difference: 13px here against the button's 12px. Measured,
 * the two were identical — same face, size, weight and tracking — but the
 * button reads visibly larger because its label is dark on filled sand while
 * the links are white on black. Light type on a dark ground loses weight to
 * irradiation; dark on light gains it. The extra pixel cancels that out, so
 * the row reads as one size. Do not "fix" this back to 12px by matching the
 * numbers — the numbers were already matching, and it looked wrong.
 *
 * `!important` throughout because the navbar carries an inline <style> embed
 * inside the body — later in the document than this file — that sets
 * font-family, size, weight, letter-spacing, text-transform and padding with
 * !important of its own. `.navbar .nav_link` outranks its `.nav_link`.
 */
.navbar .nav_link,
.navbar .w-dropdown-link.nav_link {
  font-family: var(--site-nav-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  /* The embed sets `padding: 0 0 0.25rem 0`. That 4px only at the bottom is
     what made the links ride 2px above the button: the flex row centres the
     padded box, so the text inside it sits high. Symmetric now — and the 4px
     is kept top and bottom so the underline animation still clears the text. */
  padding: 0.25rem 0 !important;
}

/* The dropdown's own list stays readable at its inherited size; only the
   header row is set in the header face. */
.navbar .dropdown .w-dropdown-list .nav_link {
  font-size: 0.75rem !important;
}

/* --- Reveal on scroll up ---------------------------------------------------
 *
 * Hidden while scrolling down, brought back the moment the user scrolls up.
 *
 * A note on where this comes from, because the file should not claim more than
 * it can back up: anduril.com does NOT do this. Measured over twelve scroll
 * steps down and eight back up, their `.HeaderDesktop` never moves — fixed at
 * y=0, `transform: none`, `opacity: 1` throughout. Their header is permanently
 * on screen and transparent; the only thing it animates is `color`, which is
 * how they keep it legible as sections of different value pass under it.
 *
 * So the reveal is ours. What IS taken from them is the second half of the
 * request — the bar staying readable over anything — but solved differently:
 * they recolour the type per section, we give the bar its own ground once it
 * leaves the top of the page. That suits this site better, because the header
 * sits over a video whose luminance changes every second; there is no stable
 * "section colour" to swap against.
 */

[data-mode="frontier"] .navbar {
  /* Was absolute, i.e. it simply scrolled away with the hero. */
  position: fixed;
  left: 0;
  right: 0;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Pulled up by its own full height — the bar sits 22px below the viewport top,
   so --site-header-bottom (top + height) is exactly the distance that clears
   it, including the air above. */
[data-mode="frontier"] .navbar.is-hidden {
  transform: translateY(calc(-1 * var(--site-header-bottom)));
}

/* The ground. Painted as a pseudo-element stretched from the viewport top
   through the bar, rather than as a background on .navbar itself: the bar
   floats 22px down the page, so a background on it would leave a transparent
   strip above and read as an unfinished band. Fading opacity also keeps the
   whole thing on the compositor. */
[data-mode="frontier"] .navbar::before {
  content: "";
  /* `.navbar` is also `.w-nav`, and Webflow's base sheet puts its clearfix on
     `.w-nav::before { content:" "; display:table }`. Inheriting that made this
     an absolutely positioned TABLE box with empty content, which shrink-wraps
     to 0x0 no matter what the insets say — so the ground measured 0px wide and
     never painted at all. Filling it with 90% red produced no red band; that
     was the test that found it. Declaring `display` is the whole fix. */
  display: block;
  position: absolute;
  /* Reaches up to the viewport top. A percentage would not work here: in
     `top`, % resolves against the containing block's height, not the element's
     own — the first attempt used that and painted the ground in the wrong
     place, covering the links. */
  inset: calc(-1 * var(--site-header-top)) 0 0;
  z-index: -1;
  /* Glass, measured off harmattan.ai's `.top-bar-background`: blur(40px) over a
     dark fill, no border. The heavy blur is what makes it read as glass — it
     smears the page behind into a flat wash instead of hiding it, which is the
     opposite of the near-opaque rgba(11,11,11,0.88)/blur(12px) this started as.
     A 12px blur leaves enough structure that only near-opacity covers it.

     Their fill is 0.4. Ours is 0.58, and the difference is content, not taste.
     Behind their bar sits one uniform dust cloud; behind ours sits whatever
     photograph the section happens to use, and on /cuav that is bright metal
     under studio light. Measured with verify/navcontrast.mjs, 0.4 put the
     wordmark at 1.5:1 there — illegible. Over a white backdrop the fill alone
     decides the floor:

         0.40 -> RGB 158 -> 2.7:1        0.55 -> RGB 121 -> 4.4:1
         0.50 -> RGB 134 -> 3.6:1        0.58 -> RGB 114 -> 4.8:1   <- AA

     0.58 is the first step that clears WCAG AA (4.5:1) against white type even
     if the whole backdrop goes white, so no section can ever break it. */
  background-color: var(--site-glass);
  backdrop-filter: var(--site-glass-blur);
  -webkit-backdrop-filter: var(--site-glass-blur);
  /* No hairline. At 88% the border separated two solid surfaces; at 40% it
     draws a line under a pane of glass and reads as a seam. */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Where the browser cannot blur, the fill has to carry it alone — otherwise
   the type sits on 40% of dark over a bright hero and is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-mode="frontier"] .navbar::before {
    background-color: rgba(12, 12, 12, 0.86);
  }
}

/* Only once the header has left the top of the page. At the very top it stays
   transparent, so it sits on the hero exactly as it does today. */
[data-mode="frontier"] .navbar.is-docked::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-mode="frontier"] .navbar {
    transition: none;
  }
  /* navbar-reveal.js never adds .is-hidden under reduced motion; this is the
     belt to that braces. */
  [data-mode="frontier"] .navbar.is-hidden {
    transform: none;
  }
}


/* --- Solutions dropdown ----------------------------------------------------
 *
 * The list was only ever seen inside the burger menu (`.dropdown.hide-desktop`),
 * so its panel was never dressed for the desktop header — 4px corners on #ddd,
 * with the dark fill applied only in the open state. lib/nav-menu.ts un-hides
 * it; this makes it look like the rest of the header.
 *
 * Webflow's own JS keeps driving it: open/close, Escape, outside click and the
 * `w--open` class are all theirs. Nothing here changes behaviour.
 */

[data-mode="frontier"] .navbar .dropdown-list-2,
[data-mode="frontier"] .navbar .dropdown-list-2.w--open {
  min-width: 12rem;
  padding: 0.5rem 0;
  background-color: var(--fr-panel, #151515);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* 2px, like every other corner in the design system. */
  border-radius: 2px;
}

/* Where the panel hangs. Desktop only — inside the burger the list is part of
   the drawer's flow and must stay where it is.
 *
 * Webflow drops it at `top: 100%; left: 0` of the toggle, and both were wrong
 * here. Measured at 1440:
 *
 *   toggle   x 992.8  w 74.9   centre 1030.3   bottom 68.5
 *   panel    x 992.8  w 192.0  centre 1088.8   top    68.5
 *   header lower edge                                 94.0
 *
 * So the panel started level with the label's own baseline box — 25px *above*
 * the header's lower edge, sitting on the header band rather than under it —
 * and because it is 192px wide against a 75px label, aligning their left edges
 * pushed it 58px right of the word it belongs to.
 *
 * The 2rem clears the header: 25.5px of it is the distance from the toggle's
 * bottom to the header edge (the toggle is centred in a 72px bar), the
 * remaining 6.5px is the visible gap. */
@media (min-width: 992px) {
  [data-mode="frontier"] .navbar .dropdown-list-2 {
    top: calc(100% + 2rem);
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Alle Eintraege gleich breit und linksbuendig.
 *
 * Webflows Komponenten-Grundstil setzt
 *
 *   .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link
 *     { margin-left: auto; margin-right: auto }
 *
 * Das ist fuer den Inline-Block-Aufbau gedacht, den Webflow ohne eigenes
 * Layout verwendet. Sobald die geoeffnete Liste eine Flex-Spalte wird —
 * `.dropdown-list-2.w--open` tut genau das — schrumpft damit jeder Eintrag
 * auf seine Textbreite und wird einzeln mittig gesetzt. Gemessen im
 * Solutions-Menue: 55px fuer "UXS", 132px fuer "All Solutions", jeder mit
 * eigenem Rand. Das Menue franste dadurch auf beiden Seiten aus.
 *
 * Betraf alle drei Menues, nicht nur Training — dort faellt es nur staerker
 * auf, weil "Drone Operator" der laengste Eintrag der Leiste ist und den
 * Unterschied zu "FPV Workshop" auf 85px bringt. */
[data-mode="frontier"] .navbar .dropdown-list-2 .nav_link {
  display: block;
  width: 100%;
  margin-inline: 0;
  padding: 0.5rem 1rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  white-space: nowrap;
}

[data-mode="frontier"] .navbar .dropdown-list-2 .nav_link:hover,
[data-mode="frontier"] .navbar .dropdown-list-2 .nav_link.w--current {
  color: #ffffff !important;
}

/* The toggle carries the same mono treatment as the plain links beside it, and
   the chevron marks it as the one item that opens something. */
[data-mode="frontier"] .navbar .dropdown-toggle {
  padding: 0;
}