/*
 * Public site: header, navigation, drawer, content and footer.
 *
 * Every value that a site owner might want to change is a custom property written by
 * the Customizer (see inc/customizer/class-customizer.php). Nothing here hardcodes a
 * colour, a size or a weight that has a control attached to it, so adding a control
 * never means hunting through this file.
 *
 * The breakpoint is the one exception. CSS cannot use a custom property inside a media
 * query, so the two rules that switch between the desktop menu and the drawer are
 * written out by PHP with the number substituted. Everything else here is breakpoint
 * agnostic and works at any width.
 */

/* ------------------------------------------------------------------ scaffolding */

/*
 * Border-box, for the public site.
 *
 * The application bundle brings its own reset, so this was easy to miss: every public
 * page - the home page, the policy pages and all 321 worksheet landing pages - was
 * laying out in content-box. `.wsm-shell` is width:100% with 20px of side padding, so
 * it came out 40px wider than the screen and every phone and tablet got a horizontal
 * scrollbar on every page.
 *
 * The `html` rule is deliberately NOT wrapped in :where(). This idiom depends on `html`
 * (0,0,1) outranking `*` (0,0,0); zeroing the first with :where() makes the two tie, the
 * later rule wins, and `html` inherits from nothing - which is content-box, the very
 * thing being fixed. `*` carries no specificity to begin with, so a component that
 * genuinely wants content-box still overrides it with any selector at all.
 */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.wsm-shell {
  width: 100%;
  max-width: var(--wsm-shell, 1180px);
  margin: 0 auto;
  padding: 0 20px;
}

body:not(.wsm-app) {
  margin: 0;
  background: var(--wsm-page-bg, #fff);
  color: var(--wsm-text, #1a1f2b);
  font-family: var(--wsm-font-body);
  font-size: var(--wsm-text-size, 17px);
  font-weight: var(--wsm-text-weight, 400);
  line-height: var(--wsm-line-height, 1.65);
  -webkit-font-smoothing: antialiased;
}

/*
 * Page defaults, wrapped in :where() so they carry no specificity at all.
 *
 * This matters more than it looks. `body:not(.wsm-app) a` scores (0,1,2), because a
 * :not() contributes the specificity of what is inside it - so it beat every single
 * class in this file. The header's call-to-action came out as link-blue text on the
 * accent-blue button, and the footer links came out as link-blue on the near-black
 * footer at roughly 2:1 contrast. Both were unreadable, and neither was visible in the
 * CSS: each component *had* a correct colour rule that was simply losing.
 *
 * :where() scores zero, so these are true defaults: any component rule, however simply
 * written, overrides them. Nothing in this file needs a specificity hack again.
 */
:where(body:not(.wsm-app)) h1,
:where(body:not(.wsm-app)) h2,
:where(body:not(.wsm-app)) h3,
:where(body:not(.wsm-app)) h4 {
  font-family: var(--wsm-font-heading);
  font-weight: var(--wsm-heading-weight, 700);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

:where(body:not(.wsm-app)) h1 { font-size: var(--wsm-h1, 44px); }
:where(body:not(.wsm-app)) h2 { font-size: var(--wsm-h2, 36px); }
:where(body:not(.wsm-app)) h3 { font-size: var(--wsm-h3, 29px); }
:where(body:not(.wsm-app)) h4 { font-size: var(--wsm-h4, 24px); }

:where(body:not(.wsm-app)) a { color: var(--wsm-link, #1d4ed8); }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------- header */

.wsm-header {
  background: var(--wsm-header-bg, #fff);
  color: var(--wsm-header-text, #1a1f2b);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: relative;
  z-index: 60;
}

.wsm-header.is-sticky {
  position: sticky;
  top: 0;
}

.wsm-header.has-shadow {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.04);
}

.wsm-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--wsm-header-h, 64px);
}

/* Logo centred, menu on a second row. */
.wsm-header--logo-centre .wsm-header__inner {
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 8px;
}
.wsm-header--logo-centre .wsm-desktop-nav {
  order: 3;
  width: 100%;
  justify-content: center;
}

/* Menu tight against the brand rather than pushed to the far side. */
.wsm-header--menu-left .wsm-desktop-nav { margin-right: auto; }
.wsm-header--logo-left .wsm-desktop-nav { margin-left: auto; }

.wsm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
}

/*
 * The brand lockup.
 *
 * Three presentations, one piece of markup:
 *
 *   phone   the mark alone - the bar has room for a logo and a menu button, not both
 *   tablet  mark + wordmark, tight, at a smaller height
 *   desktop mark + wordmark, full height, with the gap the lockup was drawn with
 *
 * The tablet and desktop boundary is the Customizer's own breakpoint, so those two rules
 * are written by PHP alongside the ones that switch the menu (see Customizer::print_css).
 * The phone boundary is fixed at 600px and lives here.
 */
.wsm-brand__image {
  display: block;
  height: var(--wsm-logo-h, 34px);
  width: auto;
  max-width: 260px;
}

.wsm-brand__builtin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wsm-logo {
  display: block;
  height: var(--wsm-logo-h, 34px);
  width: auto;
  flex: none;
}

/* The mark is square; the wordmark is not, so it is sized off the mark's height. */
.wsm-logo--mark {
  aspect-ratio: 1;
}

/*
 * The wordmark is text, not a drawing.
 *
 * It was SVG, pinned to a fixed width so the lockup would occupy the same space in any
 * font. That is correct for the standalone files in assets/brand/, which have fixed
 * dimensions, and wrong here: a name longer than the ten characters it was drawn for got
 * squeezed into the same width. "Worksheet Studio" measures 226 units and was being
 * crushed into 148 - a 35% squeeze, and unreadable.
 *
 * Text has a natural width and cannot be squeezed. It is sized from the same
 * `--wsm-logo-h` as the mark, so the two stay in proportion at every breakpoint, and one
 * Customizer number still controls the whole lockup.
 */
.wsm-logo__word {
  font-family: var(--wsm-font-heading);
  font-size: calc(var(--wsm-logo-h, 34px) * 0.62);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wsm-logo-text, var(--wsm-header-text, #1a1f2b));
  white-space: nowrap;
}

/*
 * Every colour here is a Customizer value, which is the reason the logo is inline in
 * the first place. `--wsm-logo-color` is the escape hatch: set it and the whole mark
 * takes that colour instead, which is what a dark header needs.
 */
.wsm-logo__sheet,
.wsm-logo__check {
  fill: none;
  stroke: var(--wsm-logo-color, var(--wsm-accent, #2563eb));
  stroke-linejoin: round;
}

.wsm-logo__sheet {
  stroke-width: 2.6;
}

.wsm-logo__check {
  stroke-width: 3.6;
  stroke-linecap: round;
}

.wsm-logo__fold {
  fill: var(--wsm-logo-color, var(--wsm-accent, #2563eb));
  opacity: 0.9;
}

.wsm-logo__rules {
  fill: none;
  stroke: var(--wsm-logo-color, var(--wsm-accent, #2563eb));
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.34;
}

/* The hyphen is the brand, so it is the one character that carries the accent. */
.wsm-logo__hyphen {
  color: var(--wsm-logo-color, var(--wsm-accent, #2563eb));
}

/* An uploaded logo replaces the built-in one for the widths it was uploaded for. */
.wsm-brand__image--narrow,
.wsm-brand__builtin--narrow {
  display: none;
}

@media (max-width: 600px) {
  .wsm-logo__word,
  .wsm-brand__image--wide,
  .wsm-brand__builtin--wide {
    display: none;
  }

  .wsm-brand__image--narrow,
  .wsm-brand__builtin--narrow {
    display: block;
  }

  .wsm-brand__builtin--narrow {
    display: inline-flex;
  }
}

.wsm-brand__stack {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.wsm-brand__name {
  font-family: var(--wsm-font-heading);
  font-weight: 700;
  font-size: calc(var(--wsm-nav-size, 15px) + 4px);
  letter-spacing: -0.02em;
}

.wsm-brand__tagline {
  font-size: calc(var(--wsm-nav-size, 15px) - 3px);
  color: var(--wsm-muted, #5c6575);
  font-weight: 400;
}

/* -------------------------------------------------------------- desktop menu */

.wsm-desktop-nav {
  align-items: center;
  min-width: 0;
}

.wsm-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wsm-menu__item {
  position: relative;
}

.wsm-menu__item > a,
.wsm-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--wsm-nav-size, 15px);
  font-weight: var(--wsm-nav-weight, 500);
  text-transform: var(--wsm-nav-transform, none);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.wsm-menu__item > a:hover,
.wsm-menu__toggle:hover {
  background: rgba(15, 23, 42, 0.05);
}

.wsm-menu__item.is-current > a {
  color: var(--wsm-accent, #2563eb);
}

/*
 * The caret.
 *
 * Drawn with borders rather than an image or a font glyph: it needs no request, it
 * inherits the text colour, and it rotates rather than being swapped for a second
 * shape, so opening a dropdown is one continuous movement.
 */
.wsm-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.wsm-menu__item--has-children:hover .wsm-caret,
.wsm-menu__toggle[aria-expanded='true'] .wsm-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
  opacity: 1;
}

/* ------------------------------------------------------------------ dropdown */

.wsm-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-width: min(460px, 90vw);
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 70;
}

/*
 * Open on hover, on keyboard focus anywhere inside, and when the button says it is
 * open. All three matter: hover for a mouse, focus-within for a keyboard, and the
 * attribute for a tap, where there is no hover at all.
 */
.wsm-menu__item--has-children:hover > .wsm-dropdown,
.wsm-menu__item--has-children:focus-within > .wsm-dropdown,
.wsm-menu__toggle[aria-expanded='true'] + .wsm-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wsm-dropdown__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.wsm-dropdown__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--wsm-text, #1a1f2b);
  line-height: 1.35;
}

.wsm-dropdown__list a:hover,
.wsm-dropdown__list a:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  color: var(--wsm-accent, #2563eb);
}

.wsm-dropdown__list strong {
  display: block;
  font-size: var(--wsm-nav-size, 15px);
  font-weight: 600;
}

.wsm-dropdown__list span {
  display: block;
  margin-top: 1px;
  font-size: calc(var(--wsm-nav-size, 15px) - 2px);
  color: var(--wsm-muted, #5c6575);
}

/* The last dropdowns in the row open leftwards so they cannot leave the viewport. */
.wsm-menu__item:nth-last-child(-n + 2) .wsm-dropdown {
  left: auto;
  right: 0;
}

/* ------------------------------------------------------------------- actions */

.wsm-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

.wsm-header--menu-left .wsm-header__actions { margin-left: 0; }

.wsm-header__search input {
  width: clamp(140px, 18vw, 240px);
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  font: inherit;
  font-size: calc(var(--wsm-nav-size, 15px) - 1px);
  color: inherit;
}

.wsm-header__search input:focus {
  outline: 2px solid var(--wsm-accent, #2563eb);
  outline-offset: 1px;
  background: #fff;
}

/* Inherits the header's text colour rather than the page link colour. */
.wsm-header__login {
  color: inherit;
  padding: 9px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: var(--wsm-nav-size, 15px);
  font-weight: var(--wsm-nav-weight, 500);
  white-space: nowrap;
}

.wsm-header__login:hover { background: rgba(15, 23, 42, 0.05); }

.wsm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--wsm-accent, #2563eb);
  color: var(--wsm-accent-text, #fff);
  font-family: var(--wsm-font-heading);
  font-size: var(--wsm-nav-size, 15px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.wsm-button:hover {
  filter: brightness(0.93);
  color: var(--wsm-accent-text, #fff);
}

.wsm-button:active { transform: translateY(1px); }

/*
 * The secondary button.
 *
 * This modifier used to live in public.css, which loads first - so `.wsm-button` here
 * (same specificity, later in the cascade) painted the accent fill straight back over
 * it, and the home page showed two identical blue buttons where there should be a clear
 * first and second choice. It belongs with the button it modifies.
 *
 * The label takes the page's own text colour rather than the accent. The accent is a
 * Customizer setting and can be set to anything, including a pale colour that would be
 * unreadable as text on a white page; body text on the page background cannot be. The
 * accent still shows, in the border, where legibility does not depend on it.
 */
.wsm-button--ghost {
  background: var(--wsm-page-bg, #fff);
  color: var(--wsm-text, #1a1f2b);
  border: 1px solid var(--wsm-accent, #2563eb);
}

.wsm-button--ghost:hover {
  background: var(--wsm-page-bg, #fff);
  color: var(--wsm-text, #1a1f2b);
  filter: brightness(0.97);
}

/* -------------------------------------------------------------- menu button */

/*
 * Three bars that become a cross.
 *
 * The bars are transformed rather than replaced, so the change is one movement the eye
 * can follow. The middle bar fades while the outer two rotate onto each other, which is
 * what makes the result read as a cross rather than as two stray lines.
 */
.wsm-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.wsm-nav-toggle:hover { background: rgba(15, 23, 42, 0.05); }

.wsm-nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.wsm-nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.24s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.16s ease;
}

.wsm-nav-toggle__bars span:nth-child(1) { top: 0; }
.wsm-nav-toggle__bars span:nth-child(2) { top: 6px; }
.wsm-nav-toggle__bars span:nth-child(3) { top: 12px; }

.wsm-nav-toggle[aria-expanded='true'] .wsm-nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.wsm-nav-toggle[aria-expanded='true'] .wsm-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.wsm-nav-toggle[aria-expanded='true'] .wsm-nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------------- drawer */

.wsm-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.wsm-drawer[hidden] { display: none; }

.wsm-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 18, 0.45);
  opacity: 0;
  transition: opacity 0.24s ease;
  border: 0;
  padding: 0;
}

.wsm-drawer.is-open .wsm-drawer__scrim { opacity: 1; }

.wsm-drawer__panel {
  position: absolute;
  background: var(--wsm-header-bg, #fff);
  color: var(--wsm-header-text, #1a1f2b);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(9, 12, 18, 0.25);
  transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1);
  max-width: 100%;
}

/* Right, left or a sheet from the top - whichever the Customizer chose. */
.wsm-drawer[data-side='right'] .wsm-drawer__panel {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  transform: translateX(100%);
}
.wsm-drawer[data-side='left'] .wsm-drawer__panel {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(400px, 88vw);
  transform: translateX(-100%);
}
.wsm-drawer[data-side='top'] .wsm-drawer__panel {
  top: 0;
  left: 0;
  right: 0;
  max-height: 92dvh;
  transform: translateY(-100%);
}

.wsm-drawer.is-open .wsm-drawer__panel { transform: none; }

.wsm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  min-height: var(--wsm-header-h, 64px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  flex: none;
}

.wsm-drawer__title {
  font-family: var(--wsm-font-heading);
  font-weight: 700;
  font-size: calc(var(--wsm-nav-size, 15px) + 3px);
}

.wsm-drawer__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.wsm-drawer__close:hover { background: rgba(15, 23, 42, 0.06); }

.wsm-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 40px;
  -webkit-overflow-scrolling: touch;
}

.wsm-drawer__search { margin-bottom: 16px; }

.wsm-drawer__search input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  font: inherit;
  color: inherit;
}

.wsm-drawer__primary,
.wsm-drawer__account {
  display: grid;
  gap: 4px;
}

.wsm-drawer__account {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

/* Touch targets are 48px, not the 44 the guidelines floor at: this is the one menu
   on the site and it is used one-handed on a phone. */
.wsm-drawer__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: calc(var(--wsm-nav-size, 15px) + 1px);
  font-weight: var(--wsm-nav-weight, 500);
}

.wsm-drawer__link:hover,
.wsm-drawer__link:focus-visible {
  background: rgba(15, 23, 42, 0.06);
}

.wsm-drawer__link.is-primary {
  background: var(--wsm-accent, #2563eb);
  color: var(--wsm-accent-text, #fff);
  font-weight: 600;
  justify-content: center;
  margin-bottom: 6px;
}

.wsm-drawer__link.is-primary:hover { filter: brightness(0.93); }

.wsm-drawer__group {
  margin-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 10px;
}

.wsm-drawer__group summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: calc(var(--wsm-nav-size, 15px) + 1px);
  list-style: none;
}

.wsm-drawer__group summary::-webkit-details-marker { display: none; }

/* The disclosure arrow, drawn the same way as the desktop caret so the two match. */
.wsm-drawer__group summary::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform 0.18s ease;
}

.wsm-drawer__group[open] summary::after { transform: rotate(-135deg); }

.wsm-drawer__sub { padding-left: 10px; }

.wsm-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wsm-drawer__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.wsm-drawer__list a:hover { background: rgba(15, 23, 42, 0.06); }

.wsm-drawer__menu {
  margin-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 10px;
}

/* Nothing behind the drawer should scroll while it is open. */
body.wsm-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------- footer */

.wsm-footer {
  background: var(--wsm-footer-bg, #0f172a);
  color: var(--wsm-footer-text, #c7cedb);
  font-size: var(--wsm-footer-size, 15px);
  padding: 56px 0 28px;
  margin-top: 64px;
}

.wsm-footer__columns {
  display: grid;
  grid-template-columns: repeat(var(--wsm-footer-cols, 4), minmax(0, 1fr));
  gap: 36px 28px;
}

/* The about column carries prose, so it gets more room than the link columns. */
.wsm-footer__col--about { grid-column: span 1; }

.wsm-footer__brand {
  display: block;
  font-family: var(--wsm-font-heading);
  font-size: calc(var(--wsm-footer-size, 15px) + 5px);
  font-weight: 700;
  color: var(--wsm-footer-heading, #fff);
  margin-bottom: 10px;
}

.wsm-footer__about {
  margin: 0;
  max-width: 40ch;
  line-height: 1.6;
  opacity: 0.92;
}

.wsm-footer__heading {
  margin: 0 0 12px;
  font-family: var(--wsm-font-heading);
  font-size: var(--wsm-footer-h-size, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wsm-footer-heading, #fff);
}

.wsm-footer__list,
.wsm-footer__social,
.wsm-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.wsm-footer__social {
  grid-auto-flow: column;
  justify-content: start;
  gap: 16px;
  margin-top: 16px;
}

.wsm-footer a {
  color: var(--wsm-footer-link, #c7cedb);
  text-decoration: none;
}

.wsm-footer a:hover,
.wsm-footer a:focus-visible {
  color: var(--wsm-footer-heading, #fff);
  text-decoration: underline;
}

.wsm-footer__nav {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wsm-footer__menu {
  grid-auto-flow: column;
  justify-content: start;
  gap: 20px;
  flex-wrap: wrap;
}

.wsm-footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wsm-footer__copyright {
  margin: 0;
  font-size: calc(var(--wsm-footer-size, 15px) - 1px);
  opacity: 0.8;
}

/* Footer columns collapse well before the menu does; they are independent. */
@media (max-width: 900px) {
  .wsm-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsm-footer__col--about { grid-column: 1 / -1; }
}

/*
 * Phone.
 *
 * Designed for the width rather than shrunk to fit it. The bar carries the brand and
 * the menu button and nothing else - the call to action is the first thing inside the
 * drawer, where it has a full-width target instead of a 90px one. The heading scale
 * comes down too: 44px is a good desktop h1 and a bad phone one, where it costs three
 * lines before the reader has learnt anything.
 */
@media (max-width: 560px) {
  .wsm-header__inner { gap: 10px; }
  .wsm-header__actions { gap: 4px; }
  .wsm-header__actions .wsm-button { display: none; }
  .wsm-brand { min-width: 0; }
  .wsm-brand__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wsm-brand__tagline { display: none; }

  :where(body:not(.wsm-app)) h1 { font-size: clamp(28px, calc(var(--wsm-h1, 44px) * 0.68), var(--wsm-h1, 44px)); }
  :where(body:not(.wsm-app)) h2 { font-size: clamp(24px, calc(var(--wsm-h2, 36px) * 0.74), var(--wsm-h2, 36px)); }
  :where(body:not(.wsm-app)) h3 { font-size: clamp(21px, calc(var(--wsm-h3, 30px) * 0.8), var(--wsm-h3, 30px)); }
  :where(body:not(.wsm-app)) h4 { font-size: clamp(19px, calc(var(--wsm-h4, 24px) * 0.88), var(--wsm-h4, 24px)); }

  .wsm-footer__columns { grid-template-columns: 1fr; }
  .wsm-footer { padding: 40px 0 24px; margin-top: 40px; }
  .wsm-footer__social { grid-auto-flow: row; gap: 8px; }
  .wsm-footer__menu { grid-auto-flow: row; gap: 8px; }
}

/*
 * Content the author cannot control the width of.
 *
 * A page of policy text can carry a wide table or a long code sample, and a phone has
 * no room for either. They scroll inside their own box; the page itself never does.
 */
:where(body:not(.wsm-app)) img,
:where(body:not(.wsm-app)) video,
:where(body:not(.wsm-app)) iframe,
:where(body:not(.wsm-app)) embed,
:where(body:not(.wsm-app)) object {
  max-width: 100%;
  height: auto;
}

:where(body:not(.wsm-app)) table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

:where(body:not(.wsm-app)) pre {
  overflow-x: auto;
  max-width: 100%;
}

/* A long unbroken string - a URL in a policy page - must not widen the page either. */
:where(body:not(.wsm-app)) p,
:where(body:not(.wsm-app)) li,
:where(body:not(.wsm-app)) h1,
:where(body:not(.wsm-app)) h2,
:where(body:not(.wsm-app)) h3,
:where(body:not(.wsm-app)) h4 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------- skip link */

.wsm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 16px;
  background: var(--wsm-accent, #2563eb);
  color: var(--wsm-accent-text, #fff);
  z-index: 200;
  border-radius: 0 0 8px 0;
}

.wsm-skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wsm-drawer__panel,
  .wsm-drawer__scrim,
  .wsm-dropdown,
  .wsm-nav-toggle__bars span,
  .wsm-caret {
    transition: none;
  }
}