/* =========================================================
   THEME — this is the only section you should need to touch
   to match your brand. Everything below references these
   custom properties, so swapping values here re-skins the
   whole form.
   ========================================================= */
/*
   Optima ships as a built-in system font on macOS and iOS, so the
   "Optima" entry in --font-body below will just work there with no
   extra step — Mac/iOS visitors get the real typeface for free.

   It's a commercial Monotype/Linotype design though, not a web font,
   so Windows/Android/Linux visitors (who don't have it installed)
   will fall through to the next name in the stack instead of seeing
   Optima at all. To have everyone see the real typeface, you need a
   licensed webfont file — available via Monotype Fonts or a similar
   foundry license — dropped in a ./fonts folder here, with this block
   uncommented (add more @font-face blocks for other weights as needed):
*/
/*
@font-face {
  font-family: "Optima";
  src: url("./fonts/Optima-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* Brand colors.
     #0090CD and #FF9333 are the true brand hexes. #40d2ac is the accent color */
  --color-brand-blue: #0090cd;
  --color-brand-orange: #ff9333;
  --color-brand-teal: #40d2ac;
  --color-brand-navy: #003369;
  --color-brand-white: #ffffff;
  --color-brand-black: #000000;

  /* Page backdrop — fixed navy, the same in light and dark mode. Unlike
     everything below, this one deliberately does NOT change with
     prefers-color-scheme: only the card itself switches. */
  --color-bg: var(--color-brand-navy);

  /* Card surface + everything on it. Each of these has a dark-mode
     override just below, re-checked against WCAG AA (4.5:1 text /
     3:1 UI components) for its own pairing. */
  --color-surface: #ffffff;
  --color-input-bg: var(--color-surface);
  --color-text: var(--color-brand-black);
  /* --color-text-muted: #5c6b85; 5.4:1 on white */
  --color-text-muted: #000000;
  --color-border: #d7dde3;
  --color-border-focus: var(--color-brand-blue);
  --color-primary-action: #00719f;
  --color-primary-action-hover: #0090cd;
/*
  --color-primary-action: #00719f; /* AA-safe (5.4:1 on white) button fill
  --color-primary-action-hover: #00577a;
*/
  --color-primary-contrast: #ffffff;
  --color-error: #c22a2a;
  --color-error-bg: #fdecec;
  --color-success: var(--color-brand-navy);
  --color-success-bg: #e3f7f0;
  --color-card-edge: transparent; /* dark mode gives the card a hairline
                                      border so it doesn't blend into the
                                      equally-dark page background */

  /* Typography */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-heading-weight: 500;
  /* "Segoe UI" is the fallback that reads closest to Optima's humanist-
     geometric feel on Windows, where Optima itself isn't installed. */
  --font-body: "Optima", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-title: 1.85rem;
  --font-size-subtitle: 1rem;
  --font-weight: 800;

  /* Shape & spacing */
  --radius: 10px;
  --radius-sm: 6px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  --transition-fast: 150ms ease;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 35%, transparent);
}

/* Dark mode — auto, based on the visitor's OS/browser preference. Only
   the card's own colors change here; --color-bg (the page backdrop) is
   intentionally left out so it stays the fixed navy in both modes. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #10213a;
    --color-input-bg: #1c3252; /* slightly lighter than the card for depth */
    --color-text: #eef3f8;
    /*--color-text-muted: #9fb0c7; 7.3:1 on --color-surface */
    --color-text-muted: #ffffff;
    --color-border: #5a7ba3; /* 3.7:1 on --color-surface, clears the 3:1 UI minimum */
    --color-border-focus: #26a8e0; /* 6:1 on --color-surface — more visible than the plain brand blue on a dark card */
    --color-primary-action: #26a8e0;
    --color-primary-action-hover: #5bc0ec;
    --color-primary-contrast: #05131f; /* 6.9:1 on --color-primary-action */
    --color-error: #ffb3b3; /* 8+:1 on --color-surface and on --color-error-bg */
    --color-error-bg: #4a2020;
    --color-success: #9be8cf; /* 8.5+:1 on --color-surface and on --color-success-bg */
    --color-success-bg: #123d30;
    --color-card-edge: rgba(255, 255, 255, 0.08);
  }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.signup {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Mobile-first: this 26rem card is "this size on mobile" as-is. The
   breakpoints below only ever make it wider, never narrower, as the
   viewport grows — the mobile size is untouched. */
.signup-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--color-surface);
  border: 1px solid var(--color-card-edge);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + 4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

@media (min-width: 640px) {
  .signup-card {
    max-width: 34rem;
  }
}

@media (min-width: 1024px) {
  .signup-card {
    max-width: 46rem;
  }
}

/* Brand accent stripe — solid teal, purely decorative. */
.signup-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-brand-orange);
}

.signup-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--font-size-title);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.01em;
}

.signup-subtitle {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-subtitle);
  color: var(--color-text-muted);
}

/* Visually hides content from sighted users while keeping it in the
   accessibility tree — standard "sr-only" pattern. Never use
   display:none/visibility:hidden here, both remove it for screen
   readers too. */
.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;
}

/* Rectangular slot for a logo, deliberately the same width as the
   intro paragraphs below it (both just fill the card's content width —
   neither has a max-width of its own). EDIT ME: once you drop in real
   logo files, adjust the aspect-ratio to match their actual proportions. */
.logo-slot {
  margin-bottom: var(--space-4);
}

.logo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}

/* Shown automatically (via the <img onerror> in index.html) until real
   logo files exist, so the layout never shows a broken-image icon.
   Safe to delete once both logo-color.svg and logo-knockout.svg exist. */
.logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intro-text p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .intro-text p {
    font-size: 1.15rem;
  }
}

@media (min-width: 1024px) {
  .intro-text p {
    font-size: 1.15rem;
  }
}

.intro-text p.headline-p {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .intro-text p.headline-p {
    font-size: 1.6rem;
  }
}

@media (min-width: 1024px) {
  .intro-text p.headline-p {
    font-size: 1.6rem;
  }
}


.intro-text p:last-child {
  margin-bottom: 0;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* =========================================================
   FIELDS
   ========================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-label,
.field-group > legend {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  display: block;
  font-weight: 600;
  font-size: 1.2rem;
}

.field-group {
  border: none;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
}

.field-hint {
  font-weight: 400;
  color: var(--color-text-muted);
}

input[type="text"],
input[type="email"] {
  font: inherit;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover {
  border-color: var(--color-text-muted);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
}

/* Invalid state, applied by JS via aria-invalid after a failed check */
input[aria-invalid="true"] {
  border-color: var(--color-error);
}
input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 30%, transparent);
}

.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--color-border-focus);
}

.checkbox-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.field-error {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--color-error);
}

.field-error:empty {
  display: none;
}

/* Honeypot: hidden from sighted users but NOT display:none/visibility:hidden,
   since some spam bots specifically skip those and some screen readers
   ignore display:none differently than expected. Off-screen positioning
   is the more reliable trap. Real users never encounter this field. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   STATUS / MESSAGES
   ========================================================= */
.form-status {
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
  min-height: 0;
  transition: padding var(--transition-fast);
}

.form-status:not(:empty) {
  padding: var(--space-2) var(--space-3);
}

.form-status[data-tone="error"] {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.form-status[data-tone="success"] {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */
.submit-btn {
  position: relative;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-contrast);
  background: var(--color-primary-action);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.submit-btn:hover {
  background: var(--color-primary-action-hover);
}

.submit-btn:active {
  transform: translateY(1px);
}

.submit-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.btn-spinner {
  display: none;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  border: 2px solid color-mix(in srgb, var(--color-primary-contrast) 40%, transparent);
  border-top-color: var(--color-primary-contrast);
  border-radius: 50%;
  vertical-align: -0.2em;
  animation: spin 700ms linear infinite;
}

.submit-btn[data-loading="true"] .btn-spinner {
  display: inline-block;
}

.submit-btn[data-loading="true"] .btn-label {
  opacity: 0.85;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect motion preferences: kill the spin animation and any
   transitions/transforms for anyone who's asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn-spinner {
    animation: none;
    border-top-color: color-mix(in srgb, var(--color-primary-contrast) 60%, transparent);
  }
}

/* =========================================================
   SMALL SCREENS
   ========================================================= */
@media (max-width: 420px) {
  .signup-card {
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + 4px);
  }
}