/**
 * root Design System - documentation styles: footer
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. The page's last row, always on
 * screen (ADR-024). Same constraints as the rest of the shell: zero CSS classes -
 * element, `[data-part]` and attribute selectors only - zero inline styles, and every
 * value a root foundation token.
 */

/* The page's last row, edge to edge under all three columns - and always on screen,
   because the grid above it is what scrolls and the grid itself is one viewport tall. */
footer[data-part="footer"] {
  display: grid;
  grid-column: 1 / -1;
  /* Two rows, and the nav owns the second one.
     The nav is the flexible cell between two inflexible neighbors, so sharing a row it
     lost every time: the entries shredded into ragged rows at every real width - two at
     1440, five at 1024, where the footer took 187px of a 640px viewport. Stacking both
     side cells was measured and is not enough. Given the whole width it fits on one line
     from 961px, which is where the single-column layout below takes over, and it keeps
     fitting as entries are added: seven of them need 556px today, and the seventh is
     labelled `A11y` rather than `Accessibility` for exactly that reason.
     The bar is on screen for the whole visit (ADR-024), so the row is paid for rather than
     added: the brand block goes horizontal, which is the line it costs. */
  grid-template-columns: auto minmax(0, 1fr);
  /* One step up the scale from where this started, on the padding and on both gaps: the
     bar is the one part of the page that is on screen for the whole visit, and it was the
     densest. A step costs about ten pixels of content height and buys the row enough air
     that the three cells stop reading as one strip. Two steps was measured at ~120px,
     which is three lines of prose on a 1280x800 laptop - visible, and not worth it. */
  gap: var(--root-s--xs) var(--root-s--2xl);
  align-items: center;
  padding: var(--root-s--lg) var(--root-s--4xl);
  /* No size here. Every text-bearing element in the bar names its own step, and this one
     never reached any of them: while `body :where(*)` was resetting every descendant to
     base, a size on a container was inert. See ADR-043. */
  color: var(--docs-muted);
  background: var(--docs-surface);
  border-top: var(--docs-rule-width) solid var(--docs-rule);

  nav {
    grid-row: 2;
    grid-column: 1 / -1;

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--root-s--xs) var(--root-s--lg);
      justify-content: center;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      display: flex;
      gap: var(--root-s--2xs);
      align-items: center;
      font-size: var(--root-t--font-size--sm);
      white-space: nowrap;
    }
  }

  a {
    color: var(--docs-text);
    text-decoration-color: var(--docs-border);
    text-underline-offset: 0.3rem;

    &:hover {
      text-decoration-color: currentcolor;
    }
  }
}

/* The foundations give `li + li` a block-start margin, which is the rhythm of a stacked
   list. In a row it drops every item but the first by 9px. */
footer[data-part="footer"] nav li + li {
  margin-block-start: 0;
}

/* Placed, not ordered: the markup reads brand, nav, legal - the reading order and the tab
   order, and the one the footer should keep - while the grid wants the nav on its own row. */
[data-part="footer-brand"] {
  grid-row: 1;
  grid-column: 1;
  /* `<address>` is italic by the user agent's own rule, and this credit line never asked
     to be: it is the same weight and slant as the rest of the bar. */
  font-style: normal;
  /* A row, not a column. Stacked, the logo and the byline are two lines and 266px wide;
     side by side they are one line and 438. The width does not matter here - the nav is not
     sharing this row - and the line does: it is what keeps the bar at 87px with a second
     row instead of 115. */
  display: flex;
  flex-direction: row;
  gap: var(--root-s--md);
  align-items: center;
}

/* The size is set on the paragraph and not inherited from the footer: the foundations
   re-declare `--root-t--font-size` on every descendant of `body`, so a container's
   font-size reaches nothing. Specificity is not the problem - that rule is a
   `:where(*)`, which any real selector outranks - inheritance is. */
[data-part="footer-brand"] p {
  margin: 0;
  font-size: var(--root-t--font-size--sm);
}

/* The heart is a picture, and it is the size a picture was: the sentence steps down and the
   emoji does not follow it. Measured at 16px against the sentence's 14.2 for as long as the
   blanket reset existed, which is what made it a picture beside the words rather than a
   character in them. */
[data-part="footer-brand"] p > span {
  font-size: var(--root-t--font-size--base);
  line-height: var(--root-t--line-height--base);
}

/* The heart is a picture, so it is hidden from assistive technology and the word it stands
   for is read instead - "made with love by", not "made with red heart by". */
/* The one-pixel box is the convention, and it is a pixel rather than a step of any scale:
   nothing here is spacing, it is the smallest rectangle a screen reader will still walk
   into. */
[data-part="visually-hidden"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The logo's own ink is `currentColor`, so the link must not paint itself: it takes the
   page's text color, and the wordmark mirrors with the scheme through the same token
   the prose does. The width is the logo's only fixed dimension - the file keeps its
   viewBox and drops its width and height for exactly this. */
[data-part="footer-brand"] a {
  display: block;
  width: 16rem;
  color: var(--docs-text);
}

svg[data-part="webidoo-logo"] {
  display: block;
  width: 100%;
  height: auto;
}

/* One line, and it wraps on its own when the viewport is too narrow for it - which is the
   right thing to give way, since the nav has a row to itself. Splitting the credit onto a
   line of its own was tried while the nav shared this row and is not needed now that it
   does not: it saved 221px of width the nav no longer wants. */
[data-part="footer-legal"] {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--root-s--3xs) var(--root-s--xl);
  justify-content: end;
  margin: 0;
}

[data-part="footer-legal"] > * {
  font-size: var(--root-t--font-size--xs);
}

/* Wide enough for one row, so take it: the nav rejoins the two side cells and they stack to
   make room for it, which is 12.5px shorter than the two-row shape above (75.9 against 88.4).
   75rem = 1200px, and the threshold is measured rather than derived: the nav needs 565px with
   the planned pages marked by a dot, the stacked brand block is 266, and the stacked legal
   cell wants 215 - not the 200 the arithmetic suggested, which is why 1168 came out at 91.6px
   with the credit line spilling onto a third row. It goes clean at 1174, so the breakpoint
   sits a round 26px above that: enough that a font rendering a hair wider changes nothing.
   It was 84rem while the four planned pages carried the word "Planned" in a pill: that cost
   the nav 158px, and 1317px of viewport to sit on one line.
   Below this the layout above applies unchanged, which is the point: a 14" laptop is 1512px
   and gets the short bar, and the same laptop with the browser at half width gets the robust
   one instead of the ragged rows this whole exercise was about. */
@media (min-width: 75rem) {
  footer[data-part="footer"] {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  /* All three back in the flow, in markup order: brand, nav, legal. */
  [data-part="footer-brand"],
  footer[data-part="footer"] nav,
  [data-part="footer-legal"] {
    grid-row: auto;
    grid-column: auto;
  }

  /* Stacked, and it is the nav that gets the width: side by side the logo and the byline are
     one line and 438px, over each other two lines and 266 - 172px handed to the middle cell. */
  [data-part="footer-brand"] {
    flex-direction: column;
    gap: var(--root-s--3xs);
    align-items: start;
  }

  /* The credit takes a line of its own and the licence, version and source share the next:
     421px of bar as one row, about 200 as two. Done with the first child rather than by
     wrapping the other three, because the split is layout and `<p>` holding four spans is
     the right markup for a credit line either way. */
  [data-part="footer-legal"] > :first-child {
    flex-basis: 100%;
    text-align: end;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  /* The document is the scroller here, so "always visible" is `position: sticky` at the
     bottom rather than a grid row: the bar rides the viewport while the page scrolls and
     comes to rest at the end of it. Above the sticky rows the sidebar carries (z-index 3),
     because the two overlap while the nav is being scrolled past. */
  footer[data-part="footer"] {
    position: sticky;
    inset-block-end: 0;
    z-index: calc(var(--root-z--sticky) + 3);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: var(--root-s--md) var(--root-s--xl);
  }

  /* One column, so the two-row placement above has to go: left standing, `grid-column: 2`
     would invent an implicit second column and put the legal line outside the footer's only
     track. `auto` hands the three blocks back to the flow, which stacks them in markup order
     - brand, nav, legal - and that is the order to read them in anyway. */
  [data-part="footer-brand"],
  footer[data-part="footer"] nav,
  [data-part="footer-legal"] {
    grid-row: auto;
    grid-column: auto;
  }

  /* The brand block goes back to a column here: on a phone the logo and the line under it
     do not fit side by side, and there is no second row being paid for. */
  [data-part="footer-brand"] {
    flex-direction: column;
    gap: var(--root-s--3xs);
    align-items: start;
  }

  footer[data-part="footer"] nav ul,
  [data-part="footer-legal"] {
    justify-content: start;
  }
}