@layer reset, tokens, base, blocks;

@layer tokens {
  :root {
    --brand: oklch(49.3% 0.192 26.4deg);
    --brand-dark: oklch(35.4% 0.129 24.3deg);
    --navy: oklch(26% 0.038 253.9deg);
    --gold: oklch(81.7% 0.14 80.1deg);
    --ink: oklch(24.5% 0.039 264.4deg);
    --muted: oklch(54.4% 0.035 265.1deg);
    --green: oklch(55.7% 0.143 151deg);

    /* mode-aware: every consumer wants the same dark-mode counterpart */
    --line: light-dark(oklch(92.7% 0.007 260.7deg), oklch(36.9% 0.038 260.5deg));
    --bg: light-dark(oklch(97.5% 0.005 258.3deg), oklch(18.3% 0.031 263.4deg));
    --surface: light-dark(oklch(100% 0 0deg), oklch(21.7% 0.035 259.5deg));
    --surface-muted: light-dark(oklch(98.4% 0.003 247.9deg), oklch(23.4% 0.041 257.8deg));
    --text: light-dark(oklch(24.5% 0.039 264.4deg), oklch(95.9% 0.007 247.9deg));
    --text-strong: light-dark(oklch(36.9% 0.038 260.5deg), oklch(93.8% 0.008 253.9deg));
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  .dark {
    color-scheme: dark;
  }

  /* Every block below sets its own explicit heading/paragraph/list spacing;
     this just removes browser UA defaults so that spacing isn't additive. */
  blockquote,
  dl,
  dd,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  p,
  pre {
    margin: 0;
  }

  menu,
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    appearance: none;
  }

  select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }
}

@layer base {
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  }

  a {
    text-decoration: none;
  }

  /* Reusable "looks like a button" treatment. Lives here (not in one block's
     stylesheet) because it's also hand-applied as an "Additional CSS Class"
     on plain links inside rich-text content, independent of any one block. */
  .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: oklch(100% 0 0deg);
    font-size: 13px;
    font-weight: 900;
    padding-block: 12px;
    padding-inline: 16px;
    border-radius: 9px;
    inline-size: 100%;
    box-shadow: 0 4px 12px oklch(55.7% 0.143 151deg / 0.18);

    &:hover {
      background: oklch(47.9% 0.122 151deg);
    }
  }

  /* Generic page-layout primitives, applied via the content-group block's
     free-text `wrapClass` attribute rather than a fixed class. */
  .page-shell {
    max-inline-size: 1152px;
    margin-inline: auto;
    padding-block: 48px;
    padding-inline: 18px;
  }

  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
    gap: 34px;
  }

  .main-flow > * + * {
    margin-block-start: 44px;
  }

  .avoid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }

  .avoid-card {
    background: light-dark(oklch(97.8% 0.011 17.3deg), oklch(27.5% 0.045 25deg));
    border: 1px solid light-dark(oklch(88.5% 0.059 18.3deg), oklch(44% 0.08 25deg));
    border-radius: 13px;
    padding: 16px;

    h3 {
      color: light-dark(oklch(44.4% 0.161 26.9deg), oklch(85% 0.09 25deg));
      margin-block-end: 7px;
      font-size: 16px;
    }
  }

  @media (width <= 900px) {
    .content-grid {
      display: flex;
      flex-direction: column;
    }
  }

  @media (width <= 640px) {
    .page-shell {
      padding-block: 34px;
      padding-inline: 13px;
    }

    .avoid-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Shared by registration-form, login-form, forgot-password-form,
     reset-password-form, account-dashboard, and contact-form — one card/form
     look kept here instead of duplicated across those blocks' files. */
  .auth-shell {
    max-inline-size: 520px;
    margin-inline: auto;
    padding-block: 48px;
    padding-inline: 18px;
  }

  .auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 8px 24px oklch(21% 0.034 263.4deg / 0.045);
  }

  .auth-card h1,
  .auth-card h2 {
    font-size: 27px;
    letter-spacing: -0.02em;
    margin-block-end: 8px;
    color: var(--text);
    text-wrap: balance;
  }

  .auth-subtitle {
    color: var(--muted);
    margin-block-end: 24px;
    font-size: 14px;
    line-height: 1.6;
  }

  .auth-field {
    margin-block-end: 16px;
  }

  .auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-block-end: 6px;
    color: var(--text);
  }

  .auth-field input,
  .auth-field textarea {
    inline-size: 100%;
    padding-block: 11px;
    padding-inline: 13px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font: inherit;
    color: var(--text);
    background: var(--surface);

    &:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 1px;
    }
  }

  .auth-field textarea {
    min-block-size: 120px;
    resize: vertical;
  }

  /* contact-form honeypot: visually and semantically hidden from real users,
     still present in the DOM for bots to trip on. */
  .cf-hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
    font-size: 13px;
  }

  .auth-remember {
    display: flex;
    align-items: center;
    gap: 6px;

    input {
      inline-size: auto;
    }
  }

  .auth-row a {
    color: var(--brand);
    font-weight: 800;
  }

  .auth-error {
    background: oklch(97.8% 0.011 17.3deg);
    border: 1px solid oklch(88.5% 0.059 18.3deg);
    color: oklch(44.4% 0.161 26.9deg);
    border-radius: 8px;
    padding-block: 10px;
    padding-inline: 13px;
    margin-block-end: 16px;
    font-size: 13px;
    line-height: 1.5;
  }

  .auth-success {
    background: oklch(96% 0.04 150deg);
    border: 1px solid oklch(85% 0.08 150deg);
    color: oklch(35% 0.1 152deg);
    border-radius: 8px;
    padding-block: 10px;
    padding-inline: 13px;
    margin-block-end: 16px;
    font-size: 13px;
    line-height: 1.5;
  }

  .auth-footer-link {
    margin-block-start: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
  }

  .auth-footer-link a {
    color: var(--brand);
    font-weight: 800;
  }

  /* account-dashboard specific: wider two-panel layout inside .page-shell */
  .account-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block-end: 32px;
  }

  .account-header img {
    inline-size: 64px;
    block-size: 64px;
    border-radius: 999px;
  }

  .account-header h1 {
    font-size: 24px;
    margin-block-end: 2px;
  }

  .account-header p {
    color: var(--muted);
    font-size: 13px;
  }

  .account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }

  @media (width <= 900px) {
    .account-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ACF embed: keep the USA header/footer and suppress the theme copies.
   Left unlayered so it reliably wins over any block's layered styles. */
/*body:has(.usa-homepage-layout) #masthead,
body:has(.usa-homepage-layout) #colophon {
  display: none !important;
}

.single-page-wrapper:has(.usa-homepage-layout) {
  max-inline-size: none !important;
  inline-size: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-main:has(.usa-homepage-layout) {
  padding: 0 !important;
  margin: 0 !important;
}

.usa-homepage-layout {
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}*/