/* ==========================================================================
   Spectrum IT Hub — header
   --------------------------------------------------------------------------
   The header is a floating rectangular glass box, inset from the viewport
   edges, that condenses as you scroll.

   WHY THE WRAPPER'S HEIGHT NEVER CHANGES
   Twelve of the thirteen pages use `position: sticky` for the header, which
   means it still occupies flow space — shrink it and everything after it jumps
   up by the difference, right at the moment the visitor is scrolling. So the
   wrapper's total footprint is fixed at 104px and only the box inside it
   changes: 12 + 80 + 12 at rest, 20 + 64 + 20 once scrolled. The box loses
   16px of height and gains air around it, the page never reflows, and the same
   rules work for Home's `position: fixed` header without a special case.

   WHY html[data-hdr] AND NOT A CLASS ON THE HEADER
   The header is React-rendered and `style`/`className` are React-managed props,
   so anything written onto it is wiped on the next re-render (menu open, focus
   change). `document.documentElement` is not React's, so the flag lives there —
   the same trick hero-parallax.js uses. See header.js.

   Square corners throughout: the site has no rounded geometry anywhere else.
   ========================================================================== */

/* At rest the glass lives on the WRAPPER, which is edge-to-edge, so the header
   reads as a normal full-width bar. Once scrolled, the wrapper goes transparent
   and the glass moves to the shell, which is capped at the page's 1340px
   measure and inset by the wrapper's padding — so it becomes a floating box.

   Doing it this way means nothing animates that cannot animate. The obvious
   approach, growing the shell's max-width from `none`, does not interpolate;
   cross-fading two background colours and easing the wrapper's padding does.
   The shell keeps the same width in both states, so the nav never shifts
   sideways — only the glass around it changes. */
.hdr {
  z-index: 90;
  padding: 0;
  background: rgba(6, 7, 10, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: padding 420ms cubic-bezier(.16, 1, .3, 1),
              background-color 420ms ease, border-color 420ms ease,
              box-shadow 300ms ease;
}

.hdr-shell {
  max-width: 1340px;
  margin: 0 auto;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 420ms ease, border-color 420ms ease,
              box-shadow 300ms ease;
}

.hdr-bar {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
  height: 88px;
  display: flex;
  align-items: center;
  gap: 44px;
  transition: height 420ms cubic-bezier(.16, 1, .3, 1), padding 420ms ease;
}

/* --- Condensed: the glass hands off from wrapper to shell -----------------
   Footprint is identical in both states — 0 + 88 at rest, 12 + 64 + 12
   scrolled — because twelve pages use a sticky header that holds flow space,
   and changing its height would shove the page up mid-scroll. */
html[data-hdr="on"] .hdr {
  padding: 12px 20px;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;          /* the inset gutter must not eat clicks */
}

html[data-hdr="on"] .hdr-shell {
  pointer-events: auto;
  background: rgba(6, 7, 10, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 48px -28px rgba(0, 0, 0, 0.95);
}

html[data-hdr="on"] .hdr-bar { height: 64px; padding: 0 30px; }

/* --- Gold glow on hover --------------------------------------------------
   Same idea as the hero tiles, in gold: pointing anywhere at the header lights
   its outline. Two rules because the outline sits on a different element in
   each state — the wrapper's bottom border at rest, the shell's full border
   once floating. :focus-within covers keyboard users tabbing into the nav. */
.hdr:hover,
.hdr:focus-within {
  border-bottom-color: rgba(232, 181, 71, 0.55);
  box-shadow: 0 12px 30px -16px rgba(232, 181, 71, 0.45);
}

html[data-hdr="on"] .hdr:hover,
html[data-hdr="on"] .hdr:focus-within {
  border-bottom-color: transparent;
  box-shadow: none;
}

html[data-hdr="on"] .hdr-shell:hover,
html[data-hdr="on"] .hdr:focus-within .hdr-shell {
  border-color: rgba(232, 181, 71, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(232, 181, 71, 0.2),
    0 22px 50px -26px rgba(232, 181, 71, 0.45);
}

/* --- Brand lockup --------------------------------------------------------
   Two images, not one. The supplied artwork sizes the ribbon 4.4x taller than
   the wordmark, which is right for the mark standing alone but means an intact
   lockup would need to be 98px tall to give a 22px wordmark — taller than the
   bar itself. Split, each half is sized for the space it is actually in.

   The mark is decorative here (the wordmark carries the name), so it is
   aria-hidden with an empty alt and screen readers announce the link once.

   All header sizing is scoped under .hdr so the condensed state cannot reach
   the footer's copy of the same lockup. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark,
.brand-word {
  width: auto;
  display: block;
}

/* `!important` on every height below is required, not stylistic. responsive.css
   sets `img { height: auto !important }` under 760px so that oversized media
   cannot force horizontal scrolling. These two images are explicitly sized and
   would otherwise fall back to their natural aspect — the ribbon rendered 418px
   tall on a phone. The old logo escaped this only because another rule
   re-forced its inline height by matching the literal style string. */
.hdr .brand-mark { height: 40px !important; transition: height 420ms cubic-bezier(.16, 1, .3, 1); }
.hdr .brand-word { height: 20px !important; transition: height 420ms cubic-bezier(.16, 1, .3, 1); }

html[data-hdr="on"] .hdr .brand-mark { height: 34px !important; }
html[data-hdr="on"] .hdr .brand-word { height: 17px !important; }

.brand-footer .brand-mark { height: 34px !important; }
.brand-footer .brand-word { height: 17px !important; }

/* --- Nav type ------------------------------------------------------------ */
.hdr-nav a,
.hdr-nav [role="button"] {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 200ms ease, text-shadow 240ms ease;
}

/* --- Gold hover: bloom on the letterforms, plus a rule that lights up ------
   The underline is a pseudo-element so it costs no layout and cannot shift the
   nav as it appears. It grows from the left rather than fading in, which reads
   as deliberate rather than as a hover state flickering. */
.hdr-nav a::after,
.hdr-nav [role="button"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: #E8B547;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), box-shadow 280ms ease;
}

.hdr-nav a:hover,
.hdr-nav [role="button"]:hover,
.hdr-nav a:focus-visible,
.hdr-nav [role="button"]:focus-visible {
  color: #E8B547;
  text-shadow: 0 0 12px rgba(232, 181, 71, 0.55), 0 0 26px rgba(232, 181, 71, 0.26);
}

.hdr-nav a:hover::after,
.hdr-nav [role="button"]:hover::after,
.hdr-nav a:focus-visible::after,
.hdr-nav [role="button"]:focus-visible::after {
  transform: scaleX(1);
  box-shadow: 0 0 10px rgba(232, 181, 71, 0.7);
}

/* The logo is an image, so it glows with a drop-shadow rather than a text one. */
.brand img { transition: filter 240ms ease; }
.hdr .brand:hover img { filter: drop-shadow(0 0 10px rgba(232, 181, 71, 0.45)); }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 760px) {
  .hdr     { padding: 0; }
  .hdr-bar { padding: 0 20px; height: 76px; }

  .brand { gap: 9px; }
  .hdr .brand-mark { height: 30px !important; }
  .hdr .brand-word { height: 15px !important; }
  html[data-hdr="on"] .hdr .brand-mark { height: 26px !important; }
  html[data-hdr="on"] .hdr .brand-word { height: 13px !important; }
  .brand-footer .brand-mark { height: 30px !important; }
  .brand-footer .brand-word { height: 15px !important; }

  html[data-hdr="on"] .hdr     { padding: 8px 14px; }
  html[data-hdr="on"] .hdr-bar { height: 60px; padding: 0 16px; }

  /* The drop-down panel measures against the box, not the old 82px bar. */
  .mnav-panel { max-height: calc(100vh - 160px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr-bar, .hdr-shell, .brand-mark, .brand-word,
  .hdr-nav a, .hdr-nav [role="button"],
  .hdr-nav a::after, .hdr-nav [role="button"]::after {
    transition: none;
  }
}


/* --- Mobile nav: Services disclosure -------------------------------------
   max-height rather than display/height, because `auto` does not animate. The
   cap is generous enough for seven items at any text size; overflow is hidden
   so the extra never shows. */
.mnav-services {
  transition: max-height 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .mnav-services { transition: none; }
}

/* --- Services mega-menu items -------------------------------------------
   Same gold as the Core Strength grid, because it is the same seven services:
   the item fills gold and its text flips dark, with a bloom around the edge so
   it belongs to the header's gold hover language rather than reading as a
   separate button style.

   These need CSS rather than `style-hover` for two reasons: the number and the
   title are child <span>s, and `style-hover` cannot reach children
   (HANDOFF.md section 4); and the inline `background` would otherwise win.
   The `style-hover` that used to sit on these anchors has been removed, so
   nothing here is competing with a runtime-injected rule. */
.mega-item {
  transition: background 220ms ease, box-shadow 220ms ease;
}

.mega-item:hover,
.mega-item:focus-visible {
  background: #E8B547 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 160, 0.9),
    0 16px 36px -20px rgba(232, 181, 71, 0.6);
}

/* Title and number both go dark, at the two weights the gold can carry. */
.mega-item:hover span,
.mega-item:focus-visible span {
  color: #14110A !important;
}
.mega-item:hover span:first-child,
.mega-item:focus-visible span:first-child {
  color: #3F3413 !important;
}

@media (prefers-reduced-motion: reduce) {
  .mega-item { transition: none; }
}