/*
The site footer. Spec: docs/blocks/09-footer.md. Every value comes from tokens.css.

It is not a section of the home page — it is in footer.php and renders on every page — so
nothing here may depend on the front page's content or on a block above it.

--- One set of markup, two orders ----------------------------------------------------------

The design's mobile frame reorders the columns: Newsletter rises above the two link lists,
so the phone reads brand, newsletter, navigation, services, legal, where the desktop reads
brand, navigation, services, newsletter and then legal across the foot.

That is one grid with two sets of grid-template-areas, the way blocks 03 and 05 do it, and
not a second copy of the markup. Printing the two link lists twice would put every footer
link on the page twice over: twice in the accessibility tree, twice in the tab order, twice
to a crawler, and one of the two hidden at any width. The areas move the boxes; the DOM does
not change and the reading order follows it in both layouts.

--- The columns are shares, not boxes ------------------------------------------------------

The tracks are stated in fr and sum to 1440fr, so at the design's own frame they come out at
the spec's four widths to the pixel while below it the whole footer narrows with the page.
Fixed tracks would have wanted 1355px of content at a viewport of 701 — where the page inset
leaves 661 — and the footer would have pushed the document sideways across the whole band
between --bp-sm and the design frame. See --footer-col-brand.

minmax(0, ...) rather than a bare fr: a grid track's automatic minimum is its content, so a
single long link would otherwise widen its track and take the row past the container.

--- No entrance ----------------------------------------------------------------------------

The footer does not use the Reveal component, and that is a decision rather than an omission
of rule 8 in docs/design-system.md. It is the end of the document: a visitor pressing End, or
following a link to a fragment near the foot, arrives with the footer already in view, and an
entrance there plays as a flicker under the cursor rather than as an arrival. The design gives
the footer no animation of its own either.

--- No hover -------------------------------------------------------------------------------

The links carry no hover state. The design draws none, and this project's standing rule is
that a state absent from the design is not invented — the one documented exception is the
filled button's, which predates it. Keyboard focus is still visible: the shared :focus-visible
ring in base.css applies here as everywhere.
*/
/*
The room above is a margin and the frame's own padding is padding, so that this element and
the design's frame are the same box: every offset in the spec's tables is then measurable on
.site-footer without an origin to remember. See --footer-room, which is the difference between
the 226.25 the render puts between the last card and the footer's first ink and the 106 of top
padding inside the frame.
*/
.site-footer {
  margin-top: var(--footer-room);
  padding-block: var(--footer-top) var(--footer-bottom);
}

.site-footer__inner {
  display: grid;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  row-gap: var(--footer-legal-gap);
  grid-template-areas:
    "brand nav services news"
    "legal legal legal legal";
  grid-template-columns:
    minmax(0, var(--footer-col-brand))
    minmax(0, var(--footer-col-links))
    minmax(0, var(--footer-col-links))
    minmax(0, var(--footer-col-news));
}

/*
The gap over the legal line is the row gap, so it is measured from the foot of the tallest
column rather than from the top of the footer. At the design's own content that is the
Navigation list and the line lands at 340.92, which is where the design puts it; a fifth link
added by the client pushes the line down and the footer grows, where an absolute offset would
have let the list run into it.
*/
.site-footer__brand {
  grid-area: brand;
}

/*
The logo box is the design's 99x53, and the artwork inside it now fills it exactly.

The footer mark is a different drawing from the header's, not the same file at another size:
the header is a horizontal lockup at 3.275:1, the footer a bracket around "saltMD" at 1.85:1.
The header file stood in here until the real export arrived, letterboxed inside this box, and
it read as the wrong logo rather than as a smaller one. Both now live in assets/img and
salt_md_logo() picks between them.

The box stays stated rather than left to the artwork, so that the tagline under it sits where
the design puts it even if the mark is ever swapped again.
*/
.site-footer__logo {
  display: block;
  width: var(--footer-logo-w);
  height: var(--footer-logo-h);
}

.site-footer__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__tagline {
  max-width: var(--footer-tagline-w);
  margin: var(--footer-tagline-gap) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-footer-tagline);
  font-weight: var(--fw-regular);
  line-height: var(--lh-footer-tagline);
}

.site-footer__col--nav {
  grid-area: nav;
}

.site-footer__col--services {
  grid-area: services;
}

.site-footer__col--news {
  grid-area: news;
}

/*
The capitals are the stylesheet's, not the content's — the same argument the location label
makes: the field will hold "Navigation" and the design draws "NAVIGATION", so a client typing
in lower case has to come out looking the way the design draws it.
*/
.site-footer__heading {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-footer-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-footer-heading);
  line-height: var(--lh-footer-heading);
  text-transform: uppercase;
}

/*
Real lists, named by their headings. A footer column is a list of links and is announced as
one, rather than as four links in a row with nothing to say what they belong to.
*/
/*
The type is on the list rather than on the links, and that is a measurement rather than a
tidying. A line box is at least as tall as its parent's own strut, so with the size and the
leading declared on the <a> the rows were laid out on the <li>'s inherited 16px at a normal
line height: 21px per row against the 16.9 the design sets, and a step of 31.1 against 27.
Declared here, the strut is the design's own and the four links land on 137, 164, 191 and 218.
*/
.site-footer__list {
  display: flex;
  flex-direction: column;
  margin: var(--footer-list-gap) 0 0;
  padding: 0;
  gap: var(--footer-link-gap);
  font-size: var(--fs-footer-link);
  font-weight: var(--fw-regular);
  line-height: var(--lh-footer-link);
  list-style: none;
}

.site-footer__list a {
  color: var(--ink-faint);
}

.site-footer__news-text {
  max-width: var(--footer-news-w);
  margin: var(--footer-news-gap) 0 0;
  color: var(--ink-faint);
  font-size: var(--fs-footer-news);
  font-weight: var(--fw-regular);
  line-height: var(--lh-footer-news);
}

/*
The newsletter control is a link, because that is all the design draws: a pill reading
"SIGN UP" with an arrow, and no input beside it. Where it goes is a field with "#" for a
default. A form invented here would be a form that collects an email address in a clinic's
footer, which is not a small thing to add on an assumption.

The label sits against the left edge rather than in the middle — see --footer-news-btn-px for
the measurement that separates the two readings — and that arrives through the component's own
--btn-justify rather than through a rule reaching into it.
*/
.site-footer__cta {
  margin-top: var(--footer-news-btn-gap);

  --btn-justify: flex-start;
  --btn-px: var(--footer-news-btn-px);
  --arrow-size: var(--footer-news-arrow);
}

/*
The width, through the component's knob and with the size modifier named alongside the
instance — `.btn--sm.btn--outline` authors --btn-w itself and a single class cannot outweigh
two. Block 08 records this as the one number its first pass got wrong.

min() rather than the width alone: between --bp-sm and the design frame the track is narrower
than the design's pill, and a pill that will not shrink is a pill that pushes the page
sideways. At the frame the track is 359 and the pill is its designed 274.63.
*/
.btn--sm.site-footer__cta {
  --btn-w: min(100%, var(--footer-news-btn-w));
}

/*
The legal line: one row, the copyright at the left edge of the content and the place and the
privacy link against its right edge. In capitals from here, like the headings.
*/
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
  grid-area: legal;
  color: var(--ink-slate);
  font-size: var(--fs-footer-legal);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-footer-legal);
  line-height: var(--lh-footer-legal);
  text-transform: uppercase;
}

.site-footer__legal p {
  margin: 0;
}

/*
NO RULE ABOVE THIS ROW. The frame in the design file is named "HorizontalBorder" and has no
stroke, and the render has no line there either — forty consecutive rows of pure #FFFFFF where
it would be. Recorded because the name invites one to be drawn.
*/
.site-footer__legal-meta {
  text-align: right;
}

/*
Mobile: one column, and Newsletter above the two lists. --bp-sm

The order is the areas and nothing else — no element is moved, hidden or printed twice, so the
tab order and the reading order stay the DOM's in both layouts.
*/
@media (max-width: 700px) {
  .site-footer__inner {
    grid-template-areas:
      "brand"
      "news"
      "nav"
      "services"
      "legal";
    grid-template-columns: minmax(0, 1fr);
  }

  /*
  The four gaps the design's mobile frame draws between the blocks are 24.8, 24.0, 23.8 and
  23.8 — one number on the spacing scale — and the gap over the legal line is the same one,
  so the whole column is a single row gap here where the desktop needs its own.
  */
  .site-footer__legal {
    flex-direction: column;
    gap: var(--footer-legal-stack-gap);
  }

  .site-footer__legal-meta {
    text-align: left;
  }
}