/*
 * MentorGoat waitlist pages: shared base (NIC-643; landing pages NIC-523).
 * Only the C/ colours, Figtree and the corner radii drawn in the frames live
 * here; every other stylesheet uses these tokens and never a raw value. The
 * header bar and footer are shared by the landing pages and the statements.
 * Everything is self-hosted under /waitlist-assets/ (no third-party request).
 */

/* Figtree (variable, latin), from @fontsource-variable/figtree 5.3.0.
   Licence: fonts/OFL.txt. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/waitlist-assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* C/ colours */
  --c-page: #fbf7f1;
  --c-surface: #ffffff;
  --c-ink: #241f1c;
  --c-ink-muted: #6b5f57;
  --c-pine: #1c5e56;
  --c-amber: #d8952b;
  --c-line: rgba(36, 31, 28, 0.08);
  --c-line-strong: rgba(36, 31, 28, 0.1);
  /* Landing pages (NIC-523): eyebrow, errors, field and box outlines, tints */
  --c-terracotta: #b85c43;
  --c-error: #a6342a;
  --c-field-line: rgba(36, 31, 28, 0.15);
  --c-check-line: rgba(36, 31, 28, 0.3);
  --c-pine-tint: rgba(28, 94, 86, 0.1);
  --c-pine-line: rgba(28, 94, 86, 0.25);
  --c-error-tint: rgba(166, 52, 42, 0.08);
  --c-error-line: rgba(166, 52, 42, 0.3);
  --shadow-picture: 0 12px 32px rgba(36, 31, 28, 0.08);

  /* C/ corner radii */
  --r-card: 16px;
  --r-button: 12px;
  --r-input: 10px;
  /* Drawn in the landing frames: pills and circles, the tick box, badges */
  --r-pill: 999px;
  --r-check: 6px;
  --r-badge: 8px;
  --r-badge-small: 7px;

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font);
  font-weight: 400;
}

h1,
h2,
h3,
p,
figure,
table,
th,
td {
  margin: 0;
}

a {
  color: var(--c-pine);
}

/* Read out by screen readers, not shown. */
.wl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lockup: C/Mark - Summit Peak + the MentorGoat wordmark. */
.wl-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wl-mark {
  display: block;
  width: 36px;
  height: 36px;
}

.wl-wordmark {
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  color: var(--c-ink);
}

/* Header bar: lockup left, page actions right (landing pages and statements). */
.wl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
  padding: 0 120px;
}

/* Header actions (landing pages and help pages): the language switch, then
   the page's link (NIC-523; help pages NIC-760). */
.wl-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* C/Language switch (255:40 / 257:39): a pill with NL | EN, the current
   language selected. */
.wl-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-page);
}

.wl-switch a {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
}

.wl-switch a[aria-current='page'] {
  background: var(--c-pine);
  color: var(--c-surface);
}

.wl-switch a:focus-visible {
  outline: 2px solid var(--c-pine);
  outline-offset: 2px;
}

/* Footer: company line left, links right. */
.wl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 120px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 13px;
}

.wl-footer-company {
  color: var(--c-ink-muted);
}

.wl-footer-links {
  display: flex;
  gap: 24px;
}

@media (max-width: 767px) {
  .wl-header {
    height: 64px;
    padding: 0 24px;
  }

  .wl-header-actions {
    gap: 16px;
  }

  .wl-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    line-height: 16px;
  }

  .wl-lockup {
    gap: 10px;
  }

  .wl-mark {
    width: 28px;
    height: 28px;
  }

  .wl-wordmark {
    font-size: 18px;
    line-height: 22px;
  }
}