/* Header. Ported from Header.astro. See parts/header.php for why the bar is
   Off White rather than the dominant Dark Green. */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--msc-off-white);
  color: var(--msc-near-black);
  /* Every page opens on a Dark Green hero, so a Dark Green rule here would be
     invisible against it. Red reads against both the Off White bar above and
     the dark hero below. */
  border-block-end: 3px solid var(--msc-red);
}

/* Fixed box that shrinks by scaling the logo, never by animating its own
   height, so scrolling never triggers a layout pass. */
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--msc-space-lg);
  height: var(--msc-header-h);
}

/* Brand -------------------------------------------------------------- */

/* The lockup needs clear space on all four sides (brand guide). */
.header__brand {
  display: flex;
  align-items: center;
  gap: var(--msc-space-md);
  flex: none;
  padding-block: var(--msc-space-sm);
  padding-inline-end: var(--msc-space-sm);
  text-decoration: none;
  color: inherit;
}

.header__wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header__name {
  font-family: var(--msc-font-display);
  font-size: 1.4375rem;
  line-height: 1.08;
  color: var(--msc-green-dark);
  white-space: nowrap;
}

/* Sentence case, not small caps: the brief bans caps used for emphasis.
   Separation comes from size, weight and tracking. */
.header__descriptor {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--msc-red);
  white-space: nowrap;
}

/* Scaled with transform rather than height: transform is compositor-only, so
   the shrink-on-scroll costs no layout work. */
.header__logo {
  width: auto;
  height: 80px;
  transform-origin: left center;
  transition: transform var(--msc-transition);
}

.header[data-scrolled='true'] .header__logo {
  transform: scale(0.75);
}

/* The one animation that fires continuously while scrolling. Hold the small
   size without animating into it. */
@media (prefers-reduced-motion: reduce) {
  .header__logo { transition: none; }
}

/* Nav ---------------------------------------------------------------- */

.header__nav { flex: 1; }

.header__list {
  display: flex;
  align-items: center;
  gap: var(--msc-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__item { position: relative; }

.header__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--msc-space-xs) 0;
  background: none;
  border: 0;
  font-family: var(--msc-font-body);
  font-size: var(--msc-size-button);
  font-weight: 600;
  color: var(--msc-near-black);
  text-decoration: none;
  cursor: pointer;
  border-block-end: 2px solid transparent;
  transition: border-color var(--msc-transition), color var(--msc-transition);
}

/* Gold underlines fall to about 1.4:1 on Off White. Red is the light-surface
   accent and is already the header's second colour. */
.header__link:hover {
  color: var(--msc-red);
  border-block-end-color: var(--msc-red);
}

.header__link[data-current='true'] {
  border-block-end-color: var(--msc-red);
}

.header__chev { transition: transform var(--msc-transition); }

.header__disclosure[aria-expanded='true'] .header__chev {
  transform: rotate(180deg);
}

/* Services menu ------------------------------------------------------ */

.header__menu {
  position: absolute;
  inset-inline-start: calc(var(--msc-space-md) * -1);
  inset-block-start: calc(100% + 12px);
  min-width: 19rem;
  margin: 0;
  padding: var(--msc-space-xs);
  background: var(--msc-white);
  border: 1px solid var(--msc-hairline-dark);
  border-radius: var(--msc-radius-card);
  list-style: none;
  display: none;
}

.header__menu[data-open='true'] { display: block; }

.header__menu a {
  display: block;
  padding: 0.7rem var(--msc-space-md);
  font-size: var(--msc-size-button);
  font-weight: 600;
  color: var(--msc-near-black);
  text-decoration: none;
  border-radius: 2px;
}

.header__menu a:hover,
.header__menu a[aria-current='page'] {
  background: var(--msc-off-white);
  color: var(--msc-red);
}

.header__menu-all {
  border-block-start: 1px solid var(--msc-hairline-dark);
  margin-block-start: var(--msc-space-2xs);
  padding-block-start: var(--msc-space-2xs);
}

.header__menu-all a { font-weight: 400; opacity: 0.85; }

/* Actions ------------------------------------------------------------ */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--msc-space-md);
  flex: none;
  margin-inline-start: auto;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--msc-size-button);
  font-weight: 600;
  color: var(--msc-near-black);
  text-decoration: none;
  white-space: nowrap;
}

.header__phone:hover { color: var(--msc-red); }
.header__cta { white-space: nowrap; }

/* Burger ------------------------------------------------------------- */

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--msc-hairline-dark);
  border-radius: var(--msc-radius);
  cursor: pointer;
}

.header__burger-bar {
  display: block;
  height: 1.5px;
  background: var(--msc-near-black);
  transition: transform var(--msc-transition), opacity var(--msc-transition);
}

.header__burger[aria-expanded='true'] .header__burger-bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.header__burger[aria-expanded='true'] .header__burger-bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobile panel ------------------------------------------------------- */

.header__mobile {
  display: none;
  background: var(--msc-white);
  border-block-start: 1px solid var(--msc-hairline-dark);
  padding-block: var(--msc-space-lg) var(--msc-space-xl);
}

.header__mobile[data-open='true'] { display: block; }

/* Gold on white fails contrast badly. Red is the light-surface accent. */
.header__mobile-label {
  font-size: var(--msc-size-caption);
  font-weight: 600;
  color: var(--msc-red);
  margin-block: var(--msc-space-md) var(--msc-space-xs);
}

.header__mobile-list { margin: 0; padding: 0; list-style: none; }

.header__mobile-list a {
  display: block;
  padding: 0.65rem 0;
  font-size: var(--msc-size-body);
  font-weight: 600;
  color: var(--msc-near-black);
  text-decoration: none;
  border-block-end: 1px solid var(--msc-hairline-dark);
}

.header__mobile-cta { width: 100%; margin-block-start: var(--msc-space-lg); }

@media (max-width: 68rem) {
  .header__nav,
  .header__cta { display: none; }
  .header__burger { display: flex; }
  .header__actions { margin-inline-start: auto; }
  .header__logo,
  .header[data-scrolled='true'] .header__logo { height: 56px; transform: none; }
  .header__brand { gap: var(--msc-space-sm); }
  .header__name { font-size: 1.1875rem; }
  .header__descriptor { font-size: 0.625rem; }
}

/* Below roughly 30rem the full name plus the phone cannot share a row. The
   name stays and the descriptor goes: the H1 repeats the metro immediately
   below, whereas the name appears nowhere else above the fold. */
@media (max-width: 30rem) {
  .header__descriptor { display: none; }
  .header__name {
    font-size: 0.9375rem;
    white-space: normal;
    max-width: 15ch;
    line-height: 1.15;
  }
  .header__logo,
  .header[data-scrolled='true'] .header__logo { height: 44px; }
  .header__brand { gap: var(--msc-space-xs); padding-block: var(--msc-space-xs); }
}

@media (max-width: 26rem) {
  .header__phone span { display: none; }
}