/* ===========================================================================
 * header.css — the SINGLE-PAGE LAUNCH header (see header.php).
 *
 * This project takes the documented exception to the locked starter header:
 * the source site is one page and carries no navigation, so there is no
 * primary menu, no toggle and no drawer. The nav scripts still ship and still
 * load; they bail on their own when the markup they target is absent.
 *
 * NAV BREAKPOINT — SINGLE SOURCE OF TRUTH. The literal in the
 * `@media (max-width: 991px)` block below is the only place the drawer width
 * is written; assets/js/nav-mobile.js reads the `--nav-drawer` flag it
 * publishes rather than repeating the number. `--nav-breakpoint` is the same
 * number in a form JS can read, and nav-mobile.js warns if the two drift.
 * The contract is kept intact here even though this header never draws a
 * drawer — the day a second page arrives, the locked header drops straight in.
 * ======================================================================== */
:root {
  --nav-breakpoint: 991px;
  --nav-drawer: 0;
}

@media (max-width: 991px) {
  :root {
    --nav-drawer: 1;
  }
}

/* The bar is two half-canvases: brand on white at the left, the call-now block
   on brand blue at the right, both bleeding to the viewport edge while the
   content stays inside the chrome measure. One gradient, no pseudo-elements. */
.site-header {
  --header-split: 50%;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--white) 0 var(--header-split),
    var(--brand) var(--header-split) 100%
  );
}

.site-header__inner {
  width: 92%;
  max-width: var(--container-chrome);
  margin-inline: auto;
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header__logo {
  display: block;
  flex: 0 1 auto;
  line-height: 0;
}

.site-header__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.site-header__logo-text {
  font-family: var(--heading);
  font-size: 1.75rem;
  color: var(--ink);
}

.site-header__cta {
  flex: 0 1 auto;
  text-align: right;
  text-decoration: none;
  line-height: normal;
}

.site-header__cta-label {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.46vw, 1.3125rem);
  font-weight: 400;
  color: var(--brand-support);
}

.site-header__cta-label strong {
  font-weight: 700;
}

.site-header__cta-phone {
  display: block;
  font-family: var(--heading);
  font-size: clamp(2rem, 2.92vw, 2.625rem);
  font-weight: 400;
  color: var(--white);
}

.site-header__cta:hover .site-header__cta-phone,
.site-header__cta:focus-visible .site-header__cta-phone {
  color: var(--brand-support);
}

.site-header__cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * 1399 / 991 — the two widths the bar loses height at (the heights themselves
 * are the --header-h declarations in variables.css).
 * ----------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .site-header__inner {
    padding-block: 1rem;
  }
}

@media (max-width: 991px) {
  .site-header__inner {
    gap: 1.25rem;
  }
}

/* Below 767 the two halves stop being halves: each becomes a full-width band
   of its own colour, stacked, centred. */
@media (max-width: 767px) {
  .site-header {
    background: var(--white);
  }

  .site-header__inner {
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0;
  }

  /* The logo stays LEFT on a phone, not centred. The header stacks into two
     bands here, and centring the mark in its own band reads as a different
     layout rather than the same one narrowed — the logo is the site's anchor
     and it sits at the left edge at every width. The CTA band below keeps its
     centre, because a call-to-action spanning the full width has no left edge
     to align to. */
  .site-header__logo {
    background: var(--white);
    padding: 1rem;
    text-align: left;
  }

  .site-header__logo img {
    margin-inline: 0;
  }

  .site-header__cta {
    background: var(--brand);
    padding: 1rem;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .site-header__logo img {
    max-width: 260px;
  }
}