/* Shared site header and footer (partials/site-header.html, partials/site-footer.html).
   Every rule is scoped under .vs-header / .vs-footer so page stylesheets and these
   rules never leak into each other; divs with ARIA roles avoid page-level
   `nav {}`, `header {}` and `footer {}` selectors. */

/* Metric-matched fallbacks for the web fonts (the only global rules here).
   Until Space Grotesk and DM Sans arrive, text is drawn in Arial resized to the
   same widths and line heights, so the layout no longer jumps when the web font
   replaces it (it caused most of the layout shift on /features and articles).
   Values measured in Chromium on a French sample text, October 2026. */
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 500; size-adjust: 106.3%; ascent-override: 92.2%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900; size-adjust: 100.8%; ascent-override: 97.2%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 450; size-adjust: 102.5%; ascent-override: 96.6%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 451 600; size-adjust: 104.2%; ascent-override: 95%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 601 900; size-adjust: 102.5%; ascent-override: 96.6%; descent-override: 30.2%; line-gap-override: 0%; }


.vs-header, .vs-footer {
  --vs-ink: #0d0d0d;
  --vs-muted: #5c6370;
  --vs-paper: #fafaf7;
  --vs-line: #e5e5e0;
  --vs-brand: #e63946;
  --vs-accent: #d62839;
  --vs-accent-dark: #b4232f;
  --vs-focus: #f5a623;
  box-sizing: border-box;
  font-family: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--vs-ink);
}
.vs-header *, .vs-footer * { box-sizing: border-box; }

.vs-header a, .vs-footer a, .vs-footer .vs-footer-link {
  color: inherit;
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.vs-header a:focus-visible, .vs-header button:focus-visible,
.vs-footer a:focus-visible, .vs-footer button:focus-visible {
  outline: 3px solid var(--vs-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.vs-header .vs-logo, .vs-footer .vs-logo {
  font-family: "Space Grotesk", "Space Grotesk Fallback", "DM Sans", "DM Sans Fallback", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vs-ink);
  white-space: nowrap;
}
.vs-header .vs-logo span, .vs-footer .vs-logo span { color: var(--vs-brand); }

/* Skip link: hidden until focused with the keyboard */
.vs-header .vs-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--vs-ink);
  color: #fff;
  font-weight: 600;
}
.vs-header .vs-skip:focus { top: 0.5rem; }

/* Header */
.vs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(250, 250, 247, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vs-line);
}
.vs-header .vs-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.vs-header .vs-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
}
.vs-header .vs-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--vs-muted);
  white-space: nowrap;
}
.vs-header .vs-nav a:hover, .vs-header .vs-nav a[aria-current="page"] { color: var(--vs-ink); }
.vs-header .vs-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vs-brand); }
.vs-header .vs-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 8px;
  background: var(--vs-accent);
  color: #fff;
  font-family: "Space Grotesk", "Space Grotesk Fallback", "DM Sans", "DM Sans Fallback", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.vs-header .vs-cta:hover { background: var(--vs-accent-dark); color: #fff; }
.vs-header .vs-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 auto;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.vs-header .vs-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--vs-ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.vs-header .vs-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vs-header .vs-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vs-header .vs-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.vs-header .vs-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1.25rem;
  border-top: 1px solid var(--vs-line);
  background: var(--vs-paper);
}
.vs-header .vs-menu[hidden] { display: none; }
.vs-header .vs-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: "Space Grotesk", "Space Grotesk Fallback", "DM Sans", "DM Sans Fallback", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--vs-line);
}
.vs-header .vs-menu a[aria-current="page"] { color: var(--vs-accent-dark); }
.vs-header .vs-menu .vs-cta {
  justify-content: center;
  margin-top: 0.75rem;
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .vs-header .vs-nav, .vs-header .vs-header-inner > .vs-cta { display: none; }
  .vs-header .vs-burger { display: flex; }
}
@media (min-width: 1081px) {
  .vs-header .vs-menu { display: none; }
}

/* Footer */
.vs-footer {
  width: 100%;
  margin-top: 4rem;
  padding: 3rem 0 2rem;
  background: var(--vs-paper);
  border-top: 1px solid var(--vs-line);
  font-size: 0.9rem;
}
.vs-footer .vs-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.vs-footer .vs-footer-brand p {
  max-width: 30ch;
  margin: 0.75rem 0;
  color: var(--vs-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.vs-footer .vs-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -11px;
  color: var(--vs-muted);
}
.vs-footer .vs-social:hover { color: var(--vs-ink); }
.vs-footer .vs-footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.vs-footer .vs-footer-title {
  margin: 0 0 0.35rem;
  color: var(--vs-ink);
  font-family: "Space Grotesk", "Space Grotesk Fallback", "DM Sans", "DM Sans Fallback", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vs-footer .vs-footer-col a, .vs-footer .vs-footer-col .vs-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--vs-muted);
  text-align: left;
  cursor: pointer;
}
.vs-footer .vs-footer-col a:hover, .vs-footer .vs-footer-col .vs-footer-link:hover {
  color: var(--vs-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.vs-footer .vs-footer-legal {
  width: calc(100% - 2.5rem);
  max-width: calc(1200px - 2.5rem);
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vs-line);
  color: var(--vs-muted);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .vs-footer .vs-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .vs-footer .vs-footer-brand { grid-column: 1 / -1; }
}

@media print {
  .vs-header, .vs-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-header .vs-burger span { transition: none; }
}