/*
  base.css
  Shared type, focus, and page rhythm.

  WCAG 2.4.1 Bypass Blocks: the skip link is the first focusable control.
  WCAG 2.4.7 Focus Visible: :focus-visible uses a 2px ring with offset, on both themes.
  WCAG 2.3.3 Animation from Interactions: smooth scrolling is turned off when
  the visitor asks for reduced motion.
*/

/*
  A saved Spanish or Portuguese choice hides the page until i18n.js
  has replaced the English copy, so the first paint is in that language.
*/
html[data-lang-pending] body {
  visibility: hidden;
}

html {
  scroll-padding-top: var(--header-offset);
  /* Proximity snap so a fling can settle on a section without trapping long pages. */
  scroll-snap-type: y proximity;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
  }
}

/*
  The page colour lives on the root. If it stays on body, the browser paints it
  behind a negative z-index canvas, and the dot field disappears.
*/
html {
  background: var(--bg);
}

body {
  position: relative;
  z-index: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

/*
  Dot field sits above the page colour and under the real content.
  Section children are lifted so type, photos, and controls cover the rings.
  The footer keeps its own solid background, so the field does not show there.
*/
.sonar-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--orange-minus-100);
}

[data-theme="light"] .sonar-grid {
  color: var(--orange-minus-300);
}

main > section > *,
.final-cta > * {
  position: relative;
  z-index: 2;
}

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-120%);
  z-index: 30;
  background: var(--white);
  color: var(--dark-500);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
}

.skip:focus {
  transform: translateY(1rem);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

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

.wrap {
  width: min(var(--page), calc(100% - (var(--space-page) * 2)));
  margin-inline: auto;
}

/*
  Each major region fills at least one viewport. Content that is taller than
  the screen still grows the section, so nothing is clipped (1.4.10 Reflow).
*/
main > section,
.final-cta {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

main {
  display: flex;
  flex-direction: column;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.serif {
  font-family: var(--font-serif);
  font-weight: 600;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lede {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  max-width: none;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
}

/*
  White on Orange Minus 500 is about 3.7:1.
  Button labels are 18px+ and bold, which qualifies as large text (1.4.3, 3:1).
  Do not shrink these labels below 18px bold.
*/
.btn:hover {
  background: var(--orange-minus-600);
}

.btn:active {
  background: var(--orange-minus-700);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 700;
  font-size: 1.125rem;
}

.text-link:hover {
  color: var(--accent-ink);
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/*
  Exported icons are stroked in white. On a light theme they would disappear,
  so they are knocked to black. Icons that sit on the orange button stay white.
*/
[data-theme="light"] .icon-ink {
  filter: brightness(0);
}

.note {
  color: var(--text-muted);
  font-size: 0.875rem;
}