/* ============================================================
   Site header, ported from the Solaris Finance theme
   (wp-content/themes/solaris/styles/nav.css) so both sites share one
   header design. Markup: template-parts/header-nav.php.

   Desktop (>= 1024px): navy utility strip, 96px white services row,
   hover mega panels.
   Mobile  (< 1024px):  no strip, 72px row, tap-to-open drawer.

   These are two designs, not one layout reflowing — the strip and the
   mega panels do not exist below 1024px, and the drawer and its Call
   button do not exist above it.

   Differences from the Solaris copy:
   - The design tokens are declared here, scoped to the header, because
     this site does not load the Solaris token files. Same values.
   - The header stays FIXED, as this site's header always was: page
     templates, WooCommerce and the reports filter bar are all laid out
     for a fixed header. Scrolling retracts the strip by collapsing it,
     so the header's own height drops to the 96px row.
   - The logo is the square Solar Nerds mark, not a horizontal lockup.

   Everything is prefixed `sol-`, so none of it collides with the old
   Bootstrap navbar rules still in styles/nav.css.
   ============================================================ */

.sol-header {
  --sol-strip-h: 44px;

  --color-base-navy-700: #162D54;
  --color-base-navy-900: #0F2244;
  --color-base-amber-ink: #9A5A00;

  --color-text-primary: #000;
  --color-text-secondary: #333;
  --color-text-muted: #666;
  --color-text-brand: var(--color-base-navy-700);
  --color-text-inverse: #fff;
  --color-text-accent-ink: var(--color-base-amber-ink);
  --color-surface-default: #fff;
  --color-surface-sunken: #F2F2F2;
  --color-surface-invert: var(--color-base-navy-700);
  --color-surface-invert-hover: var(--color-base-navy-900);
  --color-surface-on-invert: rgba(255, 255, 255, .12);
  --color-surface-on-invert-hover: rgba(255, 255, 255, .22);
  --color-on-invert-secondary: rgba(255, 255, 255, .86);
  --color-on-invert-muted: rgba(255, 255, 255, .66);
  --color-border-default: #E6E6E6;
  --color-accent-default: #F15C30;
  --color-accent-hover: #D94A23;
  --color-accent-subtle: rgba(241, 92, 48, .14);
  --color-accent-highlight: #FF9A24;
  --color-on-accent: #fff;
  --color-on-accent-highlight: #000;

  --font-family-body: 'Mona Sans', 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 24px;
  --space-600: 32px;
  --space-700: 48px;

  --radius-md: 14px;
  --radius-pill: 999px;
  --target-min: 44px;

  --elevation-100: 0 1px 2px rgba(22, 45, 84, .06), 0 1px 3px rgba(22, 45, 84, .10);
  --elevation-200: 0 6px 18px rgba(22, 45, 84, .10);
  --elevation-300: 0 16px 40px rgba(22, 45, 84, .16);
  --elevation-focus: 0 0 0 2px #fff, 0 0 0 4px var(--color-base-navy-700);

  --motion-duration-fast: .15s;
  --motion-duration-base: .18s;
  --motion-duration-slow: .22s;
  --motion-ease: cubic-bezier(.2, .6, .2, 1);
}

/* The <header> around this is position:fixed (styles/nav.css). Content
   clears it with padding on the first element after it, sized to the
   unscrolled header: strip + row on desktop, the row alone on mobile. */
body > div:first-of-type {
  padding-top: calc(44px + 96px);
}

.sol-header {
  position: relative;
  font-family: var(--font-family-body);
  line-height: 1.5;
  text-align: left;
}

.sol-header a {
  text-decoration: none;
}

.sol-header :focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus);
}

/* The kit's ring is navy, which would be invisible against navy. Navy
   grounds keep a white ring instead. */
.sol-header__strip :focus-visible,
.sol-drawer__footer :focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

/* ---- Utility strip (navy, desktop only) ------------------ */
.sol-header__strip {
  display: flex;
  align-items: center;
  gap: var(--space-500);
  height: var(--sol-strip-h);
  padding: 0 var(--space-600);
  box-sizing: border-box;
  background: var(--color-surface-invert);
  transition: margin-top var(--motion-duration-slow) var(--motion-ease);
}

/* Scrolled: the navy strip retracts by exactly its own height. That
   retraction IS the scroll signature — no colour inversion, no pill. */
.sol-header.is-scrolled .sol-header__strip {
  margin-top: calc(-1 * var(--sol-strip-h));
}

/* Powered by Solaris (sn_header_powered_by): a quiet credit, not a call to
   action. Muted like the old tagline, no underline in any state; it only
   brightens on hover. The same treatment closes the drawer on mobile. */
.sol-header__powered,
.sol-drawer__powered {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  white-space: nowrap;
  letter-spacing: .5px;
  color: var(--color-on-invert-muted);
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.sol-header__powered {
  flex: none;
  min-height: var(--target-min);
  font: 500 12px/1.4 var(--font-family-body);
}

.sol-header__powered img,
.sol-drawer__powered img {
  flex: none;
  width: 18px;
  height: 18px;
}

.sol-header a.sol-header__powered,
.sol-header a.sol-header__powered:hover,
.sol-header a.sol-header__powered:focus-visible {
  text-decoration: none;
}

.sol-header a.sol-header__powered:hover,
.sol-header a.sol-header__powered:focus-visible,
.sol-header a.sol-drawer__powered:hover,
.sol-header a.sol-drawer__powered:focus-visible {
  color: var(--color-text-inverse);
}

.sol-header__util {
  flex: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  /* A 44px hit area on 21px of text, with no visual change: the padding is
     invisible, and the negative margin gives back the width it takes, so
     the links sit where they did. */
  min-height: var(--target-min);
  padding: 0 var(--space-300);
  margin: 0 calc(-1 * var(--space-300));
  white-space: nowrap;
  font: 500 14px/1.5 var(--font-family-body);
  color: var(--color-on-invert-secondary);
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.sol-header__util:hover,
.sol-header__util:focus-visible {
  color: var(--color-text-inverse);
}

/* You are here, on the strip: a white pill, navy ink, 600. The strip's own
   current-state shape, accepted for the strip only. The pill is
   drawn behind the text at 32px so it stays inside the 44px strip while the
   link keeps its full 44px hit area. */
.sol-header__util[aria-current="page"],
.sol-header__util[aria-current="page"]:hover {
  color: var(--color-text-brand);
  font-weight: 600;
}

.sol-header__util[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
}

/* 44 tall, the target minimum. line-height pinned to /1 so the
   height is the min-height and not the text's. */
.sol-header__login {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  white-space: nowrap;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-on-invert);
  font: 600 14px/1 var(--font-family-body);
  color: var(--color-text-inverse);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-header__login:hover,
.sol-header__login:focus-visible {
  background: var(--color-surface-on-invert-hover);
  color: var(--color-text-inverse);
}

/* ---- Services row (white) -------------------------------- */
.sol-header__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-400);
  height: 96px;
  padding: 0 var(--space-600);
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-default);
  /* Slow, not base: the shadow and hairline change WITH the strip
     retraction above, and one event gets one motion. */
  transition: box-shadow var(--motion-duration-slow) var(--motion-ease),
              border-color var(--motion-duration-slow) var(--motion-ease);
}

/* Trade the hairline for a lift. */
.sol-header.is-scrolled .sol-header__row {
  border-bottom-color: transparent;
  box-shadow: var(--elevation-200);
}

.sol-header__logo {
  flex: none;
  display: block;
  line-height: 0;
  margin-right: var(--space-200);
}

/* The square Solar Nerds mark. Its artboard has generous white space, so
   80px tall shows ink about 55px tall inside the 96px row. */
.sol-header__logo img {
  width: auto;
  height: 80px;
  display: block;
}

.sol-header__nav {
  display: flex;
  align-items: center;
}

.sol-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  margin: 0;
  padding: 6px var(--space-200);
  list-style: none;
}

.sol-header__li {
  margin: 0;
}

.sol-header__item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--target-min);  /* 44, the target minimum. */
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-family-body);
  white-space: nowrap;
  color: var(--color-text-primary);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}

/* Amber Ink, not Princeton Orange: orange type on white fails contrast. */
.sol-header__item:hover {
  color: var(--color-text-accent-ink);
}

.sol-header__item.is-open {
  background-color: var(--color-surface-sunken);
}

/* Current page. Ink on Princeton Orange is black, never white (2.1:1).
   */
.sol-header__item.is-active {
  background-color: var(--color-accent-highlight);
  color: var(--color-on-accent-highlight);
  font-weight: 600;
}

.sol-header__item.is-active:hover {
  color: var(--color-on-accent-highlight);
}

.sol-header__caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
}

.sol-header__spacer {
  flex: 1;
}

.sol-header__phone {
  flex: none;
  /* 44px hit area on 17px of text, no visual change. */
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  white-space: nowrap;
  font: 600 17px/1 var(--font-family-body);
  color: var(--color-text-primary);
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.sol-header__phone:hover {
  color: var(--color-text-accent-ink);
}

/* The WooCommerce cart button, in the row rather than floated over it. */
.sol-header .header-cart {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
  margin: 0;
}

/* ---- Desktop mega panels --------------------------------- */
.sol-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-500);
  padding: var(--space-600) var(--space-600) var(--space-700);
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: var(--elevation-300);
}

/* Columns wrap and carry no vertical dividers — a divider that ends a
   wrapped line reads as broken. */
.sol-panel[hidden] {
  display: none;
}

.sol-panel__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  min-width: var(--sol-col-min, 248px);
}

.sol-panel__heading {
  font: 500 12px/1.4 var(--font-family-body);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
  padding: 0 14px var(--space-100);
}

.sol-panel__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-panel__link:hover {
  background-color: var(--color-surface-sunken);
}

.sol-panel__title {
  font: 600 15px/1.2 var(--font-family-body);
  color: var(--color-text-primary);
}

.sol-panel__sub {
  font: 400 14px/1.5 var(--font-family-body);
  color: var(--color-text-muted);
}

/* The one tinted card per panel: the route to the vertical's landing page,
   which the top-level item itself no longer navigates to on desktop. */
.sol-panel__link--feature {
  gap: 3px;
  padding: 12px 14px;
  background-color: var(--color-accent-subtle);
}

.sol-panel__link--feature:hover {
  background-color: var(--color-accent-subtle);
}

/* A stand-alone link, so Amber Ink rather than Flamingo, underlined on
   hover. */
.sol-panel__link--feature .sol-panel__title {
  color: var(--color-text-accent-ink);
}

.sol-panel__link--feature:hover .sol-panel__title {
  text-decoration: underline;
}

/* The feature column sits on an 8px rhythm instead of 4px. */
.sol-panel__heading + .sol-panel__link--feature {
  margin-top: var(--space-100);
}

/* ---- Menu button ----------------------------------------- */
.sol-header__burger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 18px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  font: 600 15px/1 var(--font-family-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-header__burger:hover {
  background: var(--color-surface-invert-hover);
}

.sol-header__burger-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sol-header__burger-bars span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              opacity var(--motion-duration-base) var(--motion-ease);
}

/* Bars cross into an X. 2px bars at 3px gaps put the centres at 0/5/10,
   so ±5px brings the outer two together. */
.sol-header__burger.is-open .sol-header__burger-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.sol-header__burger.is-open .sol-header__burger-bars span:nth-child(2) {
  opacity: 0;
}

.sol-header__burger.is-open .sol-header__burger-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---- The drawer ------------------------------------------ */
.sol-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  /* Static fallback for before JS runs. The script replaces it with the
     measured distance from the row's bottom to the viewport bottom, which
     is also correct when the header has scrolled. */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface-default);
  box-shadow: var(--elevation-300);
}

.sol-drawer[hidden] {
  display: none;
}

/* Top-level row: 64px, comfortably past the 44px minimum. */
.sol-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  min-height: 64px;
  padding: var(--space-300) var(--space-500);
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border-default);
  cursor: pointer;
}

/* The negative margin cancels the pill's own padding, so the TEXT aligns to
   the 24px gutter whether or not the pill is filled. */
.sol-drawer__label {
  padding: 8px 14px;
  margin-left: -14px;
  border-radius: var(--radius-pill);
  font: 600 18px/1.2 var(--font-family-body);
  color: var(--color-text-primary);
  background-color: transparent;
}

/* Same active device as desktop, just wrapping the label. */
.sol-drawer__row.is-active .sol-drawer__label {
  background-color: var(--color-accent-highlight);
  color: var(--color-on-accent-highlight);
}

.sol-drawer__caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
  transition: transform var(--motion-duration-base) var(--motion-ease);
}

.sol-drawer__row.is-expanded .sol-drawer__caret {
  transform: rotate(180deg);
}

/* An arrow says "navigates" where a caret would say "expands". */
.sol-drawer__arrow {
  flex: none;
  font: 400 18px/1 var(--font-family-body);
  color: var(--color-text-muted);
}

/* The expanded region sits on the one light grey, so nesting reads without
   indentation. */
.sol-drawer__section {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-400);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-default);
}

.sol-drawer__section[hidden] {
  display: none;
}

.sol-drawer__heading {
  font: 500 12px/1.4 var(--font-family-body);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
  padding: var(--space-400) var(--space-500) var(--space-200);
}

/* Headings after the first get more air above them. */
.sol-drawer__link + .sol-drawer__heading {
  padding-top: var(--space-500);
}

.sol-drawer__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-200) var(--space-500);
  box-sizing: border-box;
}

.sol-drawer__link-title {
  font: 600 16px/1.25 var(--font-family-body);
  color: var(--color-text-primary);
}

.sol-drawer__link-sub {
  font: 400 14px/1.5 var(--font-family-body);
  color: var(--color-text-muted);
}

.sol-drawer__link--feature {
  gap: 3px;
  margin: 0 var(--space-500);
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
}

.sol-drawer__link--feature .sol-drawer__link-title {
  color: var(--color-text-accent-ink);
}

.sol-drawer__link--feature:hover .sol-drawer__link-title {
  text-decoration: underline;
}

.sol-drawer__link--feature .sol-drawer__link-sub {
  color: var(--color-text-secondary);
}

/* Calling is the installer conversion path, so it is the one CTA in the
   whole header — and it only exists on mobile. */
.sol-drawer__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: var(--space-500);
  padding: var(--space-300) var(--space-500);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-accent-default);
  color: var(--color-on-accent);
  font: 600 17px/1 var(--font-family-body);
  box-shadow: var(--elevation-100);
}

.sol-drawer__call:active {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* Navy block echoing the strip that is off-screen on mobile.
   margin-top:auto pins it to the bottom when the content is short. */
.sol-drawer__footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: var(--space-400) var(--space-500) var(--space-500);
  background: var(--color-surface-invert);
}

.sol-drawer__footer a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font: 500 16px/1.4 var(--font-family-body);
  color: var(--color-on-invert-secondary);
}

/* Smaller and muted, after the drawer's links, as on the desktop strip.
   Specific enough to beat `.sol-drawer__footer a`. */
.sol-drawer__footer .sol-drawer__powered {
  margin-top: var(--space-300);
  font: 500 13px/1.4 var(--font-family-body);
  color: var(--color-on-invert-muted);
}

/* Specific enough to beat `.sol-drawer__footer a` without !important. */
.sol-drawer__footer .sol-drawer__footer-login {
  justify-content: center;
  min-height: 52px;
  margin-top: var(--space-300);
  padding: 0 var(--space-500);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-surface-on-invert);
  font: 600 16px/1 var(--font-family-body);
  color: var(--color-text-inverse);
}

/* ============================================================
   MOBILE (< 1024px)
   1024px is production's own collapse point, held there against
   Bootstrap's 1200px default.
   ============================================================ */

.sol-header__compact {
  display: none;
}

@media (max-width: 1023.98px) {
  /* The navy strip does not exist on mobile. Its links and Powered by
     Solaris are all in the drawer's footer, so it would only duplicate
     them. */
  .sol-header__strip {
    display: none;
  }

  .sol-header__nav,
  .sol-header__phone {
    display: none;
  }

  /* 72px, and a 24px gutter matching the drawer's own, so the logo's left
     edge lines up with the menu labels beneath it. */
  .sol-header__row {
    height: 72px;
    padding: 0 var(--space-500);
  }

  .sol-header__logo img {
    height: 64px;
  }

  .sol-header__compact {
    display: flex;
    align-items: center;
    gap: var(--space-300);
    flex: none;
  }

  .sol-panel {
    display: none;
  }

  .sol-drawer {
    display: flex;
  }

  .sol-drawer[hidden] {
    display: none;
  }

  body > div:first-of-type {
    padding-top: 72px;
  }
}

/* ---- Logged-in admin bar --------------------------------- */
@media screen and (min-width: 783px) {
  body.admin-bar > header {
    top: 32px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .sol-header__strip,
  .sol-header__row,
  .sol-header__item,
  .sol-header__login,
  .sol-header__util,
  .sol-header__phone,
  .sol-header__powered,
  .sol-drawer__powered,
  .sol-panel__link,
  .sol-drawer__caret,
  .sol-header__burger,
  .sol-header__burger-bars span {
    transition: none;
  }
}