/* ══════════════════════════════════════════════════════════════════════
   DNW global — site-wide (NOT loaded on registration / parent-portal).
   Owns: display typeface, alert bar (moved here from the front-page-only
   stylesheet, where interior pages rendered it as raw text), and the nav's
   rest → scrolled behaviour. Loads after the parent main.css and wins on
   equal specificity by order; no !important except where the parent used it.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --dnw-display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --dnw-col: 1240px;                 /* the section content column */
  --dnw-nav-dur: .45s;
  --dnw-nav-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Alert banner ───────────────────────────────────────────────────── */
.dnw-alert-banner {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 40px;
  background: #d0021b; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap; display: flex; align-items: center; z-index: 101;
}
body.dnw-has-alert { padding-top: 40px; }
body.dnw-has-alert nav { top: 40px !important; }   /* flush under the banner (all widths) */
.dnw-alert-track { display: inline-flex; gap: 80px; animation: dnw-marquee 32s linear infinite; will-change: transform; }
.dnw-alert-text  { display: inline-flex; align-items: center; gap: 10px; }
/* A drawn warning glyph: the previous one was an emoji injected via CSS and
   rendered differently on every OS. */
.dnw-alert-text::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes dnw-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 768px) {
  .dnw-alert-banner { font-size: 11px; height: 36px; }
  body.dnw-has-alert { padding-top: 36px; }
  body.dnw-has-alert nav { top: 36px !important; }
  .dnw-alert-track  { animation-duration: 22s; }
}

/* ── Nav ────────────────────────────────────────────────────────────────
   At rest the bar sits on the content column, so its edges line up with
   every section below it. Once scrolled (.is-stuck, from dnw-global.js) it
   grows to the full viewport and its padding grows by the same amount, so
   the logo and links do not move — only the bar's edges travel outward.
   The parent's .nav-collapsed (toggled by the 3D scene, and stuck on) is
   neutralised by pairing it with every rule below. Mobile (≤900px) keeps
   the parent/tweaks floating pill untouched. */
@media (min-width: 901px) {
  /* The bar is always full-width and transparent; its dark GROUND is a layer
     (::before) that snaps in once the page has scrolled.
     Padding resolves to the same x as the content column, so nothing moves
     sideways or vertically — the bar sits flush under the banner in both
     states and the ground simply appears. The plugin's #dnw-nav-fix forces
     width/justify-content/gap with !important, hence the !important here;
     the higher-specificity selectors then win. */
  nav:not(.is-stuck), nav.nav-collapsed:not(.is-stuck),
  nav.is-stuck, nav.nav-collapsed.is-stuck {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    justify-content: normal !important;
    gap: 0 1.5rem !important;
    width: 100vw !important; max-width: 100vw !important; box-sizing: border-box;
    padding: 1.25rem calc((100vw - min(var(--dnw-col), 100vw - 3rem)) / 2 + 1.5rem);
    border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    top: 0;
    transition: none;                        /* no motion: the ground simply appears in place */
  }
  nav .nav-logo    { justify-self: start; }
  nav .nav-links   { justify-self: center; display: flex; gap: clamp(.25rem, 1.4vw, 1.1rem); margin: 0; }
  nav .nav-actions { justify-self: end; }

  nav.is-stuck, nav.nav-collapsed.is-stuck { top: 0; }

  body.dnw-has-alert nav:not(.is-stuck), body.dnw-has-alert nav.nav-collapsed:not(.is-stuck) { top: 40px !important; }
  body.dnw-has-alert nav.is-stuck, body.dnw-has-alert nav.nav-collapsed.is-stuck { top: 40px !important; }
}

/* ── Nav ground (all widths): the dark layer that simply appears on scroll ── */
nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 22, 40, .9);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .28);
  opacity: 0; transition: none;
}
nav.is-stuck::before { opacity: 1; }

/* ── Mobile / tablet (≤900px): same idea as desktop — flush under the banner,
   no container at rest, the ground appears on scroll. Only the logo and the
   burger show. The plugin's runtime CSS forces width/max-width with
   !important on phones, hence the !important here. ── */
@media (max-width: 900px) {
  nav:not(.is-stuck), nav.nav-collapsed:not(.is-stuck),
  nav.is-stuck, nav.nav-collapsed.is-stuck {
    top: 0;
    width: 100vw !important; max-width: 100vw !important; box-sizing: border-box;
    padding: .9rem 1.375rem !important;
    border: 0; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition: none !important;
  }
}

/* ── Dark nav on light pages ─────────────────────────────────────────────
   Every page except the homepage opens on a light backdrop (sky), where the
   white nav is invisible. body.dnw-nav-on-light (child functions.php) flips
   the items dark AT REST only; once scrolled the dark ground appears and the
   white treatment returns. The logo is a white-fill SVG, so invert(1) gives
   the black badge. The burger's bar colour is forced by the plugin with a
   plain rule, so !important is needed there. */
.dnw-nav-on-light nav:not(.is-stuck) .nav-links a          { color: rgba(10, 22, 40, .78); }
.dnw-nav-on-light nav:not(.is-stuck) .nav-links a:hover    { color: #0A1628; background: rgba(10, 22, 40, .07); }
.dnw-nav-on-light nav:not(.is-stuck) .btn-ghost            { color: #0A1628; border-color: rgba(10, 22, 40, .28); background: rgba(255, 255, 255, .55); }
.dnw-nav-on-light nav:not(.is-stuck) .btn-ghost:hover      { border-color: rgba(10, 22, 40, .5); background: rgba(255, 255, 255, .85); color: #0A1628; }
.dnw-nav-on-light nav:not(.is-stuck) .nav-logo img         { filter: invert(1); }
.dnw-nav-on-light nav:not(.is-stuck) .dnw-burger span      { background: #0A1628 !important; }

/* ── Display typeface ───────────────────────────────────────────────────
   Archivo (variable width + weight) for headlines; Inter stays for body and
   UI. Archivo sets tight on its own, so tracking is eased vs. Inter 900. */
h1, h2, h3,
.hero-title,
.dnw-new-sections .sec-title, .dnw-feat-title, .dnw-bento-cell-title,
.dnw-charter-hero-h1, .dnw-footer-cta-text h3, .dnw-ct-quote, .dnw-wc-title {
  font-family: var(--dnw-display); font-stretch: 92%;
}
.hero-title { font-weight: 800; letter-spacing: -.03em; font-stretch: 90%; }
.dnw-new-sections .sec-title, .dnw-feat-title, .dnw-charter-hero-h1, .dnw-footer-cta-text h3 {
  font-weight: 800; letter-spacing: -.02em;
}
.dnw-bento-stat-n, .dnw-wc-stat-n, .dnw-rel-num, .dnw-stat-num, .dnw-how-step::before {
  font-family: var(--dnw-display); font-weight: 900; font-stretch: 82%; letter-spacing: -.02em;
}