/* =============================================================
   GI Insured — header / primary nav
   -------------------------------------------------------------
   Corrections to the desktop nav so it matches the mockups: one
   unbroken row of links, evenly spaced, sized to sit on a single
   line at every desktop width.

   This is a separate file rather than an edit to site.css because
   site.css is carried over unmodified from the approved static
   build and is meant to stay re-syncable from it (see README).
   It loads immediately after site.css, so it wins on equal
   specificity without needing !important.

   The problem it fixes: site.css never set white-space on
   .nav__link, so long labels — "Comprehensive Car", "Commercial
   Insurance" — broke across two lines as soon as the flex row ran
   short of space, which pushed the whole nav to double height and
   left the items visually unevenly spaced.
   ============================================================= */

@media (min-width: 992px) {

  /* The row must never wrap, and must never be the thing that
     gives way when space is tight — the fluid sizes below are
     what absorb the pressure instead. */
  .nav__list {
    flex-wrap: nowrap;
    gap: clamp(0px, .5vw, 12px);
  }

  .nav__link {
    /* The actual fix: a label is one line, always. */
    white-space: nowrap;

    /* Fluid between the two desktop breakpoints so the row tightens
       smoothly instead of jumping. Resolves to ~13px at the 992px
       breakpoint and reaches the design's 14px from 1200px up, which
       is where site.css intended to sit. Measured headroom at 992px
       is ~40px, so the row cannot overflow. */
    font-size: clamp(.75rem, .62vw + .43rem, .875rem);
    padding: .4rem clamp(.3rem, .55vw, .8rem);

    font-weight: 600;
    line-height: 1.2;
    color: var(--dark);
  }

  /* The underline is drawn inset from the link box, so it has to
     track the same fluid padding or it detaches from the label. */
  .nav__link::after {
    left: clamp(.3rem, .55vw, .8rem);
    right: clamp(.3rem, .55vw, .8rem);
    bottom: 0;
  }

  /* Logo, nav and button share one row; at 992px the fixed 1.5rem
     gaps were 48px the nav could not spare. */
  .header__inner {
    gap: clamp(.5rem, 1.2vw, 1.5rem);
    flex-wrap: nowrap;
  }

  .header__cta {
    margin-left: clamp(.4rem, 1vw, 1.25rem);
    flex: none;
    padding-inline: clamp(.9rem, 1.1vw, 1.35rem);
    font-size: clamp(.8125rem, .3vw + .69rem, .875rem);
  }

  /* Neither the mark nor the button may be squeezed to make room —
     if anything has to give it is the nav's own spacing. */
  .logo,
  .logo img { flex: none; }
}

/* ≥1200px — site.css re-states .nav__link here at a fixed size and
   re-anchors the underline, which would undo the fluid values
   above. Restated so the fluid scale survives past 1200px. */
@media (min-width: 1200px) {
  .nav__link {
    font-size: clamp(.75rem, .62vw + .43rem, .875rem);
    padding: .4rem clamp(.3rem, .55vw, .8rem);
  }

  .nav__link::after {
    left: clamp(.3rem, .55vw, .8rem);
    right: clamp(.3rem, .55vw, .8rem);
  }
}