/* ==========================================================================
   Nulectrics — Header Styles
   Merged sticky header (2026-06-02 rewrite). Single block that stays
   anchored to viewport top as the user scrolls. No hide-on-scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header shell
   The header uses `position: sticky` — it takes its own space in normal
   flow (no body padding required) and stays anchored to the viewport top
   as the user scrolls. The `--nu-header-h` token is still written by JS
   so modules that need to offset for scroll anchors (e.g. in-page #links)
   can use it.
   -------------------------------------------------------------------------- */

:root {
  --nu-header-h: 110px;  /* sensible default before JS measures the rendered height */
}

@media (max-width: 1024px) {
  :root { --nu-header-h: 96px; }
}

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background-color: #0F1820;
  background-color: var(--nu-theme-bg, #0F1820);
  border-bottom: 1px solid var(--nu-theme-border);
}

[data-theme="light"] .site-header {
  background-color: #FFFFFF;
  background-color: var(--nu-theme-bg, #FFFFFF);
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: var(--nu-gap);
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 86px;
}

/* --------------------------------------------------------------------------
   2. Logo (left column, spans full header height)
   -------------------------------------------------------------------------- */

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--nu-theme-heading);
  margin-right: auto;
}

.site-header__logo:hover { text-decoration: none; }

.site-header__logo-img {
  display: block;
  width: auto;
}

/* Default desktop sizing: full wordmark logo at 70px tall. */
.site-header__logo-img--full { height: 90px; }
/* Inline SVG logo: wordmark follows the theme heading colour; roundel + nu green fixed. */
svg.site-header__logo-img--full { width: auto; display: block; color: var(--nu-theme-heading); }

/* Icon logo hidden on desktop, shown on mobile when uploaded. */
.site-header__logo-img--icon { display: none; }

@media (max-width: 1024px) {
  /* Has dedicated icon upload → swap full for icon, sized to fill the
     header height comfortably. The icon is square, so the height defines
     the visual mass. */
  .site-header--has-icon-logo .site-header__logo-img--full { display: none; }
  .site-header--has-icon-logo .site-header__logo-img--icon { display: block; height: 88px; }

  /* No icon uploaded → keep full logo but smaller so it fits */
  .site-header:not(.site-header--has-icon-logo) .site-header__logo-img--full { height: 50px; }
}

/* Logo light/dark switching — identical pattern to before. */
.site-header__logo .nu-logo--light { display: block; }
.site-header__logo .nu-logo--dark  { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header__logo .nu-logo--light { display: none; }
  :root:not([data-theme="dark"]) .site-header__logo .nu-logo--dark  { display: block; }
}

[data-theme="light"] .site-header__logo .nu-logo--light { display: none; }
[data-theme="light"] .site-header__logo .nu-logo--dark  { display: block; }

/* On mobile WITH an icon logo uploaded, hide the .--full variant even
   when its light/dark rule would normally show it. */
@media (max-width: 1024px) {
  .site-header--has-icon-logo .site-header__logo-img--full,
  [data-theme="light"] .site-header--has-icon-logo .site-header__logo-img--full,
  :root:not([data-theme="dark"]) .site-header--has-icon-logo .site-header__logo-img--full { display: none; }
}

/* On desktop, the .--icon variants always stay hidden. */
@media (min-width: 1025px) {
  .site-header__logo .site-header__logo-img--icon,
  [data-theme="light"] .site-header__logo .site-header__logo-img--icon,
  :root:not([data-theme="dark"]) .site-header__logo .site-header__logo-img--icon { display: none; }
}

/* --------------------------------------------------------------------------
   3. Right column — top row (utility + controls) and nav row, stacked
   -------------------------------------------------------------------------- */

.site-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Top row contains utility (email + phone) on the LEFT and controls
   (theme toggle + hamburger) on the RIGHT. Desktop: horizontal flex row.
   Mobile: column so controls stack below the phone. */
.site-header__top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   4. Utility row — email + phone
   -------------------------------------------------------------------------- */

.site-header__utility {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Controls cluster — theme toggle + hamburger. Inline both on desktop
   (hamburger hidden) and mobile (hamburger shown). */
.site-header__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Contact links — meet 44×44 tap target with vertical padding. */
.site-header .site-header__utility-link,
.site-header .site-header__utility-link:link,
.site-header .site-header__utility-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  color: var(--nu-theme-text);
  font-size: var(--nu-fs-body);
  font-weight: var(--nu-fw-regular);
  text-decoration: none;
  white-space: nowrap;
  line-height: var(--nu-lh-tight);
  transition: color var(--nu-transition);
}

.site-header .site-header__utility-link:hover,
.site-header .site-header__utility-link:focus {
  color: var(--nu-theme-accent);
  text-decoration: none;
}

/* On mobile: hide email in the utility row (it moves into the panel).
   Higher-specificity selector to beat the base utility-link rule above. */
@media (max-width: 1024px) {
  .site-header .site-header__utility-link--email,
  .site-header .site-header__utility-link--email:link,
  .site-header .site-header__utility-link--email:visited { display: none; }
}

/* Theme toggle button — 44×44 tap target. */
.site-header__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--nu-theme-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--nu-transition);
}

.site-header__theme-toggle:hover { color: var(--nu-theme-accent); }
.site-header__theme-toggle svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   5. Desktop nav (≥1025px shown via media query below)
   -------------------------------------------------------------------------- */

.site-header__nav--desktop { display: none; }
.site-header__nav--mobile  { display: none; }

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__menu li {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

/* Nav links — 44×44 tap target via min-height + generous padding. */
.site-header__menu > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--nu-theme-text);
  font-size: var(--nu-fs-body);
  font-weight: var(--nu-fw-regular);
  text-decoration: none;
  transition: color var(--nu-transition);
  white-space: nowrap;
}

.site-header__menu > li > a:hover,
.site-header__menu > li.current-menu-item > a,
.site-header__menu > li.current-menu-parent > a,
.site-header__menu > li.current-menu-ancestor > a {
  color: var(--nu-theme-accent);
  text-decoration: none;
}

/* Dropdown chevron.
   The visible V is formed by the border-right + border-bottom of a 6×6
   box, rotated 45deg. The earlier pivot (100% 100%) anchored the L's
   CORNER but let the BBox CENTRE drift 4.24px vertically through the
   flip — the chevron appeared to drop down when it became a ^.

   Solving for the pivot that keeps the BBox centre fixed: the V's
   bounding-box centre after rotation by θ around (px, py) lands at
     ( px + 0.707·(py-px), py + 0.707·(9-px-py) ).
   For the centre to equal the pivot:
     py = px  AND  px + py = 9  →  px = py = 4.5.
   Converted to percentage: 4.5/6 = 75%. Both V (45deg) and ^ (-135deg)
   share the same visual centre at this pivot. */
.site-header__menu > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  margin-left: 10px;
  margin-top: -4px;
  margin-right: 4px;
  transform-origin: 75% 75%;
  transform: rotate(45deg);
  transition: transform var(--nu-transition);
}

.site-header__menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg);
}

.site-header__sub-toggle { display: none; }

/* --------------------------------------------------------------------------
   6. Dropdown submenu
   -------------------------------------------------------------------------- */

.site-header__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--nu-theme-bg);
  border-top: 2px solid var(--nu-green);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--nu-transition), visibility var(--nu-transition), transform var(--nu-transition);
  z-index: 110;
}

.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sub-menu items override the parent flex layout so each <a> fills the
   full width of the dropdown — otherwise the hover background only
   covers the text portion. */
.site-header__menu .sub-menu li {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.site-header__menu .sub-menu a {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  color: var(--nu-theme-text);
  font-size: var(--nu-fs-body);
  font-weight: var(--nu-fw-regular);
  text-decoration: none;
  transition: color var(--nu-transition), background-color var(--nu-transition);
}

.site-header__menu .sub-menu a:hover {
  color: var(--nu-theme-accent);
  background-color: var(--nu-theme-surface);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Hamburger (mobile only)
   -------------------------------------------------------------------------- */

.site-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--nu-theme-text);
  border-radius: 2px;
  /* Slick easing: bars-to-cross uses an ease-in-out curve with a hint of
     acceleration so the rotation feels deliberate, not lazy. The middle
     bar fades a touch faster than the rotation so the X "snaps" cleanly. */
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.2s ease;
}

.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(2) {
  opacity: 0;
}
.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. Mobile fade-in-down dropdown (≤1024px)
   The mobile nav is rendered inside <header> and dropped down from
   directly below the header bar on hamburger tap. CSS-only transition
   using opacity + transform — feels slick, no JS animation libraries.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  /* Top row stacks vertically on mobile: utility (phone) on top,
     controls (theme toggle + hamburger inline) below. */
  .site-header__top-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* Utility row contains phone only (email is hidden) — single item,
     right-aligned. */
  .site-header__utility {
    align-items: center;
    gap: 0;
  }

  /* Phone link — primary CTA on mobile. 1.5em, regular weight (400)
     per the theme's two-weight font system (no 500 available).
     :link/:visited selectors are needed to beat the base utility-link
     :link rule, which would otherwise win the specificity battle. */
  .site-header .site-header__utility-link--phone,
  .site-header .site-header__utility-link--phone:link,
  .site-header .site-header__utility-link--phone:visited {
    font-size: 1.5em;
    font-weight: var(--nu-fw-regular);
    padding: 4px 0;
    min-height: 44px;
    letter-spacing: var(--nu-ls-tight);
  }

  /* Hide desktop nav inside the header on mobile (hamburger takes over). */
  .site-header__nav--desktop { display: none; }

  /* The mobile dropdown sits flush against the bottom edge of the header
     and animates with opacity + a slight downward translate. */
  .site-header__nav--mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #0F1820;
    background-color: var(--nu-theme-bg, #0F1820);
    border-bottom: 1px solid var(--nu-theme-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* ease-out-expo curve: feels expensive, decelerates clean. The
       visibility transition is delayed to match the opacity fade so the
       dropdown remains interactive throughout the animation. */
    transition: opacity 0.28s ease,
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.32s;
    z-index: 95;
    overflow: hidden;
    max-height: calc(100vh - var(--nu-header-h));
    max-height: calc(100dvh - var(--nu-header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  [data-theme="light"] .site-header__nav--mobile {
    background-color: #FFFFFF;
    background-color: var(--nu-theme-bg, #FFFFFF);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .site-header__nav--mobile {
      background-color: #FFFFFF;
      background-color: var(--nu-theme-bg, #FFFFFF);
    }
  }

  .site-header__nav--mobile.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header__nav-mobile-inner {
    padding-top: 12px;
    padding-bottom: 24px;
  }

  /* Mobile menu items — full-width row, big tap targets */
  .site-header__menu {
    flex-direction: column;
    height: auto;
    gap: 0;
    text-align: left;
    width: 100%;
  }

  .site-header__menu > li {
    display: block;
    width: 100%;
  }

  .site-header__menu > li > a {
    display: flex;
    align-items: center;
    font-size: var(--nu-fs-h3);
    padding: 14px 0;
    min-height: 56px;
    border-bottom: 1px solid var(--nu-theme-border);
  }

  /* Last menu item — no trailing border before the email link */
  .site-header__menu > li:last-child > a { border-bottom: none; }

  /* Mobile dropdown — inline expanded list */
  .site-header__menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background-color: transparent;
    border-top: none;
    padding: 0 0 8px;
  }

  .site-header__menu .sub-menu a {
    font-size: var(--nu-fs-body);
    padding: 10px 20px;
    min-height: 44px;
  }

  /* Hide dropdown arrow on mobile (whole row taps to expand). */
  .site-header__menu > li.menu-item-has-children > a::after { display: none; }

  /* Email link inside the mobile panel (replaces the hidden utility one). */
  .site-header__nav-email {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 16px 0 8px;
    margin-top: 12px;
    border-top: 1px solid var(--nu-theme-border);
    color: var(--nu-theme-accent);
    font-size: var(--nu-fs-body);
    font-weight: var(--nu-fw-regular);
    text-decoration: none;
  }

  .site-header__nav-email:hover { color: var(--nu-theme-accent-hover); }
}

/* --------------------------------------------------------------------------
   9. Desktop (≥1025px)
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .site-header__nav--desktop {
    display: flex;
    align-items: center;
  }

  /* Mobile panel never shows on desktop, even if mis-toggled. */
  .site-header__nav--mobile { display: none !important; }

  .site-header__hamburger { display: none; }
}

/* --------------------------------------------------------------------------
   10. Prevent body scroll when mobile menu open
   -------------------------------------------------------------------------- */

body.is-menu-open {
  overflow: hidden;
}

/* Reading progress bar at the bottom of the sticky header (posts + case studies).
   Same green gradient as the hero's vertical accent line. */
.nu-read-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.nu-read-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nu-gradient-green-start), var(--nu-gradient-green-end));
  transition: width 0.12s linear;
}