/* Site footer (Concept 4, "Footer"). Copied from the concept; grids and multi-column lists mirror themselves
   in right-to-left pages, so no direction-specific rules are needed. */
.site-footer {
  --foot-cols: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) 28px;
}
/* The brand and four columns, then a second tier where a few use cases and comparisons, each ending with its hub,
   sit in columns */
.foot-grid {
  display: grid; gap: 40px 28px;
  grid-template-columns: var(--foot-cols);
  grid-template-areas:
    "brand product res co ind"
    "use use use cmp cmp";
}
.foot-brand { grid-area: brand; }
.foot-product { grid-area: product; }
.foot-res { grid-area: res; }
.foot-co { grid-area: co; }
.foot-ind { grid-area: ind; }
.foot-use { grid-area: use; }
.foot-cmp { grid-area: cmp; }
.foot-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
/* Same as the header's .brand, so the footer stands on its own */
.foot-brand .brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: calc(10px * var(--sq-scale, 1)); corner-shape: var(--sq-shape, round); }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { max-width: 34ch; font-size: 16px; color: var(--ink-soft); }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background-color 160ms ease;
}
.social .i { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .social a:hover { background: var(--field-sky); }
  .foot-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .foot-bottom a:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.foot-col h2 { margin-bottom: 12px; font: 800 15px/1.2 var(--text); }
.foot-col ul { display: grid; gap: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; line-height: 1.3; color: var(--ink-soft); text-decoration: none; transition: color 150ms ease; }
.foot-use ul, .foot-cmp ul { display: block; column-gap: 28px; }
.foot-use ul { columns: 3; }
.foot-cmp ul { columns: 2; }
.foot-use li, .foot-cmp li { break-inside: avoid; }
/* Where subgrid works (all current browsers), the use cases and comparisons sit on the columns above them, row by
   row, so every list in the footer starts on the same lines */
@supports (grid-template-columns: subgrid) {
  .foot-use, .foot-cmp { display: grid; grid-template-columns: subgrid; align-content: start; row-gap: 0; }
  .foot-use h2, .foot-cmp h2 { grid-column: 1 / -1; }
  /* column-gap: normal takes the parent's gap; any other value would shift the items off the parent's lines */
  .foot-use ul, .foot-cmp ul { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0 normal; columns: auto; }
}
.foot-bottom {
  display: grid; grid-template-columns: var(--foot-cols); gap: 6px 28px; align-items: baseline;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.foot-bottom p { grid-column: 1; text-wrap: pretty; }
/* Two lines (the company number on its own) except in a landing page's single legal line */
.site-footer:not(.is-landing) .foot-bottom p > span:not(.foot-sep) { display: block; }
.site-footer:not(.is-landing) .foot-sep { display: none; }
@media (min-width: 1200px) {
  /* the wordmark's top meets the column headings' cap height */
  .foot-brand .brand { margin-top: -6px; }
}
.foot-bottom ul { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-bottom a {
  display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-soft);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
/* Landing variant: the legal line alone, without the rule and gap that separate it from the columns, so it keeps
   the copyright at one end and the links at the other */
.site-footer.is-landing { padding-block: 24px; }
.site-footer.is-landing .foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* Responsive */
@media (max-width: 1199px) {
  .site-footer { --foot-cols: repeat(4, minmax(0, 1fr)); }
  .foot-bottom p, .foot-bottom ul { grid-column: 1 / -1; }
  .foot-grid {
    grid-template-areas:
      "brand brand brand brand"
      "product res co ind"
      "use use use cmp";
  }
  .foot-cmp ul { columns: 1; }
}
@media (max-width: 719px) {
  .site-footer { --foot-cols: repeat(2, minmax(0, 1fr)); }
  /* the legal links take the two columns too */
  .site-footer:not(.is-landing) .foot-bottom ul { display: grid; grid-template-columns: subgrid; gap: 0 normal; }
  .foot-grid {
    grid-template-areas:
      "brand brand"
      "product res"
      "co ind"
      "use use"
      "cmp cmp";
  }
  .foot-use ul, .foot-cmp ul { columns: 2; }
}
@media (max-width: 719px) {
  .foot-col a { min-height: 44px; }
  .foot-bottom a { min-height: 44px; }
}
/* In the concept the header's ".brand img" rule also shrank this wordmark on small phones */
@media (max-width: 479px) {
  .foot-brand img { height: 24px; }
}