/* ==============================================================
   §26 — Site footer

   Two grids, not one. The outer grid splits the link block from the
   signup column at the measured 2.12 : 1; the <nav> is its own
   three-track grid inside it. Joining all four columns to a single
   grid would mean display:contents on the <nav>, which has a history
   of dropping elements out of the accessibility tree — and the
   element it would drop is the one carrying the "Footer" label.
   ============================================================== */

.sitefooter {
  /* A container, not a media query. The style guide wraps every
     component in a second padded box, so the width this footer
     actually gets is ~1351 where the viewport says 1440 - a viewport
     threshold would fire at the wrong moment in one of the two
     places. §21, §23, §24 and §25 all reached the same conclusion. */
  container-type: inline-size;

  background: var(--color-sitefooter-surface);
  color: var(--color-sitefooter-link);
}

.sitefooter__inner {
  display: grid;
  grid-template-columns: var(--sitefooter-cols);
  grid-template-areas:
    "nav   signup"
    "legal legal";
  column-gap: var(--sitefooter-gap);

  /* The row gap IS the 256px void the wireframe draws between the
     columns and the legal line — no spacer element, no margin. */
  row-gap: var(--sitefooter-gap-legal);

  max-width: var(--sitefooter-max);
  margin-inline: auto;

  /* The padding lives here and not on .sitefooter because an element
     never resolves cqi against ITSELF - only against an ancestor
     container. On the footer these values would silently fall back to
     viewport units; one element in they read the container. */
  padding-block: var(--sitefooter-pad-top) var(--sitefooter-pad-bottom);
  padding-inline: var(--container-pad);
}


/* --- Link columns ----------------------------------------------- */

.sitefooter__nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sitefooter-gap);
}

/* Both outer tracks need this. A grid track will not shrink below its
   content's min-content width, and "Careers at Northgate" is wide
   enough to push the whole page sideways without it — the same fault
   §18 documents. */
.sitefooter__nav,
.sitefooter__signup { min-width: 0; }

.sitefooter__heading {
  margin: 0 0 var(--sitefooter-heading-gap);
  font-size: var(--text-sitefooter-heading);
  line-height: var(--leading-tight);
  color: var(--color-sitefooter-heading);
}

.sitefooter__list {
  display: grid;
  gap: var(--sitefooter-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* inline-block, not inline: an inline link's box does not take
   padding-block for hit-testing, and the padding here exists to lift
   the target to 24px. */
.sitefooter__link {
  display: inline-block;
  padding-block: 2px;
  font-size: var(--text-sitefooter-link);
  line-height: var(--leading-body);
  color: var(--color-sitefooter-link);
  text-decoration: none;
}

/* Colour alone distinguishes these from the headings, which SC 1.4.1
   allows because they are not links inside running text — there is no
   surrounding prose they could be confused with. The underline
   arrives on hover and focus, where it is a state change rather than
   the only signal. */
.sitefooter__link:hover,
.sitefooter__link:focus-visible {
  color: var(--color-sitefooter-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- Signup ------------------------------------------------------ */

.sitefooter__signup { grid-area: signup; }

/* Stacked now: input, then an opt-in consent row, then a full-width
   labelled button — no longer a single bordered row the button rides
   inside of, so the border moves to the input itself and the button
   goes back to being an ordinary .btn. */
.sitefooter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sitefooter__input {
  border: var(--sitefooter-field-border-w) solid var(--color-sitefooter-field-border);
  padding-block: var(--sitefooter-field-pad-block);
  padding-inline: var(--sitefooter-field-pad-inline);
  background: transparent;
  font: inherit;
  font-size: var(--text-sitefooter-input);
  line-height: var(--leading-control);
  color: var(--color-sitefooter-heading);
}

/* Same decision as §18 and the request modal: the field itself is the
   component boundary, so it is what shows focus, not a UA default
   ring that would otherwise hug the text. */
.sitefooter__input:focus {
  outline: none;
  border-color: var(--color-sitefooter-link-hover);
  box-shadow: 0 0 0 1px var(--color-sitefooter-link-hover);
}

/* 5.89:1 on this ground, so it clears 4.5 as text in its own right.
   Safe only because a real <label> is present — the placeholder is
   never the accessible name. */
.sitefooter__input::placeholder {
  color: var(--color-sitefooter-link);
  opacity: 1;
}


/* --- Consent -------------------------------------------------------
   A native, unstyled checkbox — same native-control-first choice this
   system already made for <select> (kept appearance:auto) and every
   <dialog> here. Only its accent colour is set, not its shape.
   flex-start (not center) so the box aligns with the FIRST line of a
   label that wraps to two, rather than sitting centred against the
   whole block.
   --------------------------------------------------------------------- */

.sitefooter__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.sitefooter__checkbox {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  accent-color: var(--color-sitefooter-link-hover);
}

.sitefooter__consent-label {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-sitefooter-link);
}


/* --- Submit ----------------------------------------------------------
   An ordinary .btn--solid — the same orange-fill primary action used
   everywhere else on the page (Search, Send My Request, Find a Car),
   not a bespoke arrow control. NOT .btn--inverse: that variant is a
   dark fill for a BRIGHT ground (the adcta band, where solid orange
   would blend into the orange background) — on this already-dark
   footer it would read as a near-invisible dark-on-dark button.
   --------------------------------------------------------------------- */

.sitefooter__submit {
  width: 100%;
}


/* --- Legal ------------------------------------------------------- */

.sitefooter__legal { grid-area: legal; }

.sitefooter__copyright {
  margin: 0;
  font-size: var(--text-sitefooter-legal);
  line-height: var(--leading-body);
  color: var(--color-sitefooter-legal);
}


/* ==============================================================
   T4 — Responsive

   Every threshold below is a measured content limit, not a device
   width. Sweeping the container from 1400 to 320 in 20px steps:

     880   "Careers at Northgate" wraps          -> 4 across ends
     800   the signup heading wraps
     740   the input is narrower than its own placeholder
     none  horizontal overflow, at any width

   That last line is the point. The layout NEVER overflows: the input
   has min-width:0, so it absorbs every pixel taken from it and was
   still 4px wide at a 400px container. No overflow is not the same
   as working — §22 shipped exactly that bug.
   ============================================================== */

/* --- 4 across -> stacked, links still 3 across ------------------ */

@container (max-width: 879px) {

  .sitefooter__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "nav"
      "signup"
      "legal";
    row-gap: var(--sitefooter-gap);
  }

  /* One row-gap cannot be two sizes. The big measured gap before the
     legal line is put back as a margin, the same way §G3 handles its
     uneven rows. --sitefooter-gap-legal never drops below --space-9,
     so this cannot go negative. */
  .sitefooter__legal {
    margin-top: calc(var(--sitefooter-gap-legal) - var(--sitefooter-gap));
  }

  /* Left full width the field runs the whole footer, which reads as a
     search bar rather than a signup. Capped at the same 26rem §18
     uses when its own field stops sharing a row. */
  .sitefooter__form { max-width: 26rem; }
}


/* --- Links 3 across -> 2 ---------------------------------------- */

/* Three columns hold "Careers at Northgate" down to a ~575px
   container. Set at 599 rather than 575: --container-pad is still a
   viewport value, so inside the style guide the footer can be handed
   a narrow box with desktop-sized padding, and the columns lose 25px
   that a real page would not take from them. The margin absorbs it. */
@container (max-width: 599px) {

  .sitefooter__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- Links 2 across -> 1 ---------------------------------------- */

/* Two columns reach their own limit at ~374px. The break is set at
   399 rather than 373 so a 360px phone gets a single column with
   room to spare, instead of two columns sized exactly to their
   longest label. */
@container (max-width: 399px) {

  .sitefooter__nav { grid-template-columns: minmax(0, 1fr); }
}