/* Home: footer section (T15, Figma 307:3870) */
.s-footer {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
  color: var(--text-negative);
}
.s-footer a { transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease), background-size var(--dur-slow) var(--ease-out); }
.s-footer a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 3px; border-radius: 4px; }

/* Link hover: accent colour plus an underline drawn from the left */
.s-footer__col a,
.s-footer__legal a {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.35em) / 0 1px;
}
.s-footer__col a:hover,
.s-footer__legal a:hover,
.s-footer__col a:focus-visible,
.s-footer__legal a:focus-visible { background-size: 100% 1px; }

/* Main panel. Desktop is the Figma 12-column grid: 1232px content, 88px columns, 16px gutters, 8px inset. */
.s-footer__panel,
.s-footer__bar {
  background: var(--footer-bg);
  border-radius: var(--radius-lg);
}
.s-footer__panel {
  --footer-pad: var(--space-6);
  display: grid;
  gap: var(--space-10);
  padding: var(--space-10) var(--footer-pad);
}

.s-footer__logo { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; }
.s-footer__logo-mark { width: 33px; height: 33px; transition: transform var(--dur-slow) var(--ease-spring); }
.s-footer__logo-word {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 29px;
  line-height: 28px;
  letter-spacing: -0.5px;
}

/* Primary links: large type under the logo */
.s-footer__primary ul { display: grid; gap: var(--space-2); }
.s-footer__primary a {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  letter-spacing: var(--h5-ls);
}
.s-footer__primary a:hover { color: var(--footer-accent); }

/* Link columns; links never wrap */
.s-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-4);
  align-content: start;
}
.s-footer__col { display: grid; gap: var(--space-1); align-content: start; }
.s-footer__col a {
  display: inline-flex; align-items: center; min-height: 28px; white-space: nowrap;
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  line-height: 1.2;
  letter-spacing: var(--body-md-ls);
}
.s-footer__col a:hover { color: var(--footer-accent); }
/* External links get a small ↗ that lifts on hover */
.s-footer__col a[target="_blank"]::after {
  content: "↗";
  margin-left: 0.3em;
  font-size: 0.85em;
  opacity: 0.5;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.s-footer__col a[target="_blank"]:hover::after { opacity: 1; }

.s-footer__news { display: grid; gap: var(--space-2); max-width: 504px; }
.s-footer__news-title {
  color: var(--text-negative);
  font-size: var(--h5-size);
  line-height: 1.2;
  letter-spacing: var(--h5-ls);
}
.s-footer__news-text {
  /* Dimmed with colour, not opacity, so the reveal fade doesn't snap at the end */
  color: color-mix(in srgb, var(--text-negative) 70%, transparent);
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  line-height: 1.2;
  letter-spacing: var(--body-md-ls);
}
.s-footer__form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.s-footer__input {
  height: 44px;
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--space-8);
  background: var(--footer-field);
  color: var(--text-negative);
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.s-footer__input:hover { border-color: rgb(255 255 255 / 0.14); }
.s-footer__input::placeholder { color: var(--text-negative); opacity: 0.7; }
.s-footer__input:focus { outline: none; border-color: var(--footer-accent); background: rgb(255 255 255 / 0.09); box-shadow: 0 0 0 4px rgb(237 234 198 / 0.12); }
.s-footer__input:focus::placeholder { opacity: 0.4; }
.s-footer__input[aria-invalid="true"] { animation: s-footer-shake var(--dur-slow) var(--ease-in-out); }
.s-footer__input[aria-invalid="true"] { border-color: var(--orange-400); }

.s-footer__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: 44px;
  padding: 0 var(--space-4) 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--stone-100);
  box-shadow: inset 0 0 0 2px var(--base-high), 0 1px 2px var(--black-10), inset 0 -2px 0 2px var(--black-5);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  font-size: var(--body-sm-size);
  letter-spacing: var(--body-sm-ls);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.s-footer__submit svg { transition: transform var(--dur) var(--ease-out); }
.s-footer__submit:hover { background: var(--base-high); }
.s-footer__submit:active { transform: scale(0.98); }
.s-footer__submit:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 3px; }
.s-footer__submit.is-done svg { animation: s-footer-send 600ms var(--ease-in-out); }
.s-footer__submit-sep { width: 1px; height: 12px; background: var(--black-10); }
.s-footer__form-msg { grid-column: 1 / -1; min-height: 0; font-size: var(--body-sm-size); color: var(--footer-accent); }
.s-footer__form-msg:empty { display: none; }
.s-footer__form-msg:not(:empty) { animation: s-footer-msg var(--dur-slow) var(--ease-out); }
.s-footer__input[aria-invalid="true"] ~ .s-footer__form-msg { color: var(--orange-400); }

/* Bottom bar */
.s-footer__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  line-height: 1.2;
  letter-spacing: var(--body-md-ls);
}
/* Dimmed with colour, not opacity, so the reveal fade doesn't snap at the end */
.s-footer__bar > p,
.s-footer__legal li { color: color-mix(in srgb, var(--text-negative) 60%, transparent); }
.s-footer__legal li:has(a:hover, a:focus-visible) { color: var(--text-negative); }
/* Theme switcher (js/theme.js renders into the mount), tuned for the dark bar */
.s-footer__bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.s-footer__theme:empty { display: none; }
.s-footer .theme-switcher { border-color: rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.06); }
.s-footer .theme-switcher__btn:hover { background: rgb(255 255 255 / 0.1); }
.s-footer .theme-switcher__btn[aria-pressed="true"] { background: rgb(255 255 255 / 0.18); }
.s-footer .theme-switcher__swatch { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
.s-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.s-footer__legal a { display: inline-block; padding-block: 4px; }
.s-footer__legal a:hover { color: var(--footer-accent); }

@keyframes s-footer-shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes s-footer-send {
  50% { transform: translateX(10px); opacity: 0; }
  51% { transform: translateX(-10px); opacity: 0; }
}
@keyframes s-footer-msg {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Hover movement only on devices that really hover (no sticky states on touch) */
@media (hover: hover) {
  .s-footer__logo:hover .s-footer__logo-mark { transform: rotate(-12deg) scale(1.08); }
  .s-footer__col a[target="_blank"]:hover::after { transform: translate(2px, -2px); }
  .s-footer__submit:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px var(--base-high), 0 6px 16px rgb(0 0 0 / 0.25), inset 0 -2px 0 2px var(--black-5);
  }
  .s-footer__submit:hover svg { transform: translateX(3px); }
  .s-footer__submit:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .s-footer *, .s-footer *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .s-footer__logo:hover .s-footer__logo-mark,
  .s-footer__submit:hover, .s-footer__submit:hover svg,
  .s-footer__col a[target="_blank"]:hover::after { transform: none; }
}

@media (min-width: 480px) {
  .s-footer__form { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 768px) {
  .s-footer__panel { --footer-pad: var(--space-10); padding-block: var(--space-12); }
  .s-footer__cols { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  .s-footer__bar {
    flex-direction: row; align-items: center; justify-content: space-between;
    min-height: 66px; padding: var(--space-4) var(--footer-pad, var(--space-10));
  }
}

@media (min-width: 1024px) {
  /* Content sits on 1232px centred in the panel (96px side padding at 1440) */
  .s-footer__panel, .s-footer__bar { --footer-pad: max(var(--space-10), (100% - 1232px) / 2); }
  .s-footer__panel {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--space-4);
    row-gap: 44px;
    min-height: 509px;
    padding: 50px var(--footer-pad) var(--space-12);
  }
  .s-footer__logo { grid-column: 1 / 6; grid-row: 1; }
  .s-footer__primary { grid-column: 1 / 6; grid-row: 2; }
  /* 44px rhythm between primary links, as in Figma */
  .s-footer__primary ul { gap: 0; }
  .s-footer__primary li { height: 44px; }
  /* Link columns start on grid columns 6, 8, 10 and 12 */
  .s-footer__cols {
    grid-column: 6 / -1; grid-row: 1 / 3; align-self: start;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--space-4);
    padding-top: var(--space-1);
  }
  .s-footer__col { grid-column: span 2; gap: 0; }
  .s-footer__col:last-child { grid-column: span 1; }
  .s-footer__news { grid-column: 8 / -1; grid-row: 2; align-self: end; max-width: none; }
  .s-footer__news-text { margin-top: var(--space-1); }
  .s-footer__form { margin-top: var(--space-6); }
  .s-footer__bar { padding-inline: var(--footer-pad); }
}