/* ==========================================================================
   MECAS Techsolutions - Site Header
   --------------------------------------------------------------------------
   Measured from design/reference/01-home.jpg and 02-products.jpg at a 1440
   canvas:

     header band      112-120px        -> --header-h 112px
     emblem           66 x 70px        -> 68px tall
     emblem to word   18px gap
     MECAS wordmark   184px wide, 42px cap height
     sub-line         185px wide, 11px cap height, tracked to match the wordmark
     nav label        16px with seven items; 14px with eight, as mockup 05
                      draws them (D-046)
     nav gaps         ~34px with eight items -> --nav-gap
     active underline 57px wide, 4px tall, 20px below the label
     side padding     ~42px            -> .container-wide gives 40px at 1440

   The lockup uses the real supplied emblem (D-007) with live HTML text for the
   wordmark rather than a baked image: it stays crisp at any density, scales
   with the type system, and the company name stays readable to crawlers and
   screen readers.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--white);
  border-bottom: var(--border-w) solid var(--border);
  transition: box-shadow var(--duration) var(--ease);
}

.site-header.is-scrolled { box-shadow: var(--shadow-card); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* --------------------------------------------------------------------------
   Logo lockup
   -------------------------------------------------------------------------- */

.site-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  text-decoration: none;
  color: var(--ink-heading);
}

.site-logo:hover { color: var(--ink-heading); }

.site-logo__mark {
  width: auto;
  height: 68px;
  flex: none;
}

.site-logo__text { display: block; }

.site-logo__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;             /* 48px - balances the measured 184px width
                                  against the measured 42px cap height;
                                  Archivo is wider than the mockup face */
  font-weight: var(--fw-extrabold);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
}

.site-logo__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;        /* 13px */
  font-weight: var(--fw-bold);
  line-height: 1;
  /* Tracked so the sub-line measures the same width as the wordmark above it,
     which is how the lockup is drawn. */
  letter-spacing: 0.055em;
  color: var(--ink-heading);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Primary navigation
   -------------------------------------------------------------------------- */

.site-nav { display: flex; align-items: center; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-heading);
  transition: color var(--duration-fast) var(--ease);
}

.site-nav__link:hover { color: var(--color-action); }

/* Active item: blue label with a 4px rule 20px below it. The rule extends a
   little past the label on each side, as drawn. */
.site-nav__link[aria-current="page"] { color: var(--color-action); }

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: calc(100% + 12px);
  height: 4px;
  background-color: var(--color-action);
}

/* --------------------------------------------------------------------------
   Mobile toggle
   --------------------------------------------------------------------------
   Not designed in the PDF. Authored to match the header, and hidden until the
   nav can no longer fit on one row.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border-radius: var(--radius);
  color: var(--ink-heading);
}

.nav-toggle:hover { color: var(--color-action); }

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition:
    transform var(--duration) var(--ease),
    opacity var(--duration-fast) var(--ease);
}

/* Bars fold into a cross while the panel is open. With 2px bars and a 6px gap
   the outer bars sit exactly 8px from centre, so the translate lands them on
   it. Selected by class, not :nth-child - the button previously held a
   visually-hidden label as its first child, which shifted every index by one
   and animated the wrong bars. The label is now an aria-label instead. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bot {
  transform: translateY(-8px) rotate(-45deg);
}

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

/* Without JavaScript the panel is a plain stacked list sitting in the flow
   beneath the header, so small screens always have working navigation. With
   JavaScript it becomes an overlay the toggle opens and closes. */
.nav-panel {
  display: none;
  background-color: var(--white);
  border-top: var(--border-w) solid var(--border);
}

.js .nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-nav-panel);
  max-height: calc(100vh - var(--header-h-mobile));
  overflow-y: auto;
  box-shadow: var(--shadow-float);
}

.nav-panel__list {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}

.nav-panel__link {
  display: block;
  padding: var(--space-4) var(--gutter);
  font-family: var(--font-heading);
  font-size: 1rem;              /* the panel has room; the desktop row does not */
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-heading);
  border-left: 4px solid transparent;
}

.nav-panel__link:hover { background-color: var(--surface-alt); }

.nav-panel__link[aria-current="page"] {
  color: var(--color-action);
  border-left-color: var(--color-action);
  background-color: var(--surface-alt);
}


/* --------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------
   Between 1200 and 1100 the lockup and nav shrink together so all eight items
   still sit on one row: at 1100 the row measures 1050px of the 1053px the
   container offers. Below 1100 it cannot fit and the panel takes over.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .site-header__inner { min-height: 96px; }

  .site-logo__mark  { height: 58px; }
  .site-logo__name  { font-size: 2.625rem; }   /* 42px */
  .site-logo__sub   { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .site-logo        { gap: 14px; }

  .site-nav__link   { font-size: 0.8125rem; }  /* 13px */
}

@media (max-width: 1099.98px) {
  .site-header__inner { min-height: var(--header-h-mobile); }

  .site-logo__mark { height: 44px; }
  .site-logo__name { font-size: 2rem; }        /* 32px */
  .site-logo__sub  { font-size: 0.625rem; letter-spacing: 0.085em; }

  /* The desktop row gives way to the toggle. */
  .site-nav { display: none; }

  /* The toggle is useless without the script that drives it. */
  .js .nav-toggle { display: flex; }
  .nav-panel      { display: block; }
}

@media (max-width: 400px) {
  .site-logo__mark { height: 38px; }
  .site-logo__name { font-size: 1.625rem; }    /* 26px */
  .site-logo__sub  { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .site-logo       { gap: 10px; }
}