/*
 * VESSEL Wholesale Intake — Stylesheet
 *
 * =========================================================
 * BRAND PALETTE — FOUR COLORS ONLY
 * =========================================================
 * These four custom properties are the ENTIRE brand palette.
 * Every other color on this page derives from them.
 *
 *   --color-black:    #000000
 *   --color-charcoal: #24272A
 *   --color-white:    #FFFFFF
 *   --color-taupe:    #D1CCBD
 *
 * AAA CONTRAST AUDIT (WCAG 2.1 §1.4.6 — 7:1 minimum)
 * ┌─────────────────────────────────────────────────────┐
 * │ Text color        Background    Ratio  Rule          │
 * ├─────────────────────────────────────────────────────┤
 * │ #000000 (black)   #FFFFFF       21:1   black-on-white│
 * │ #000000 (black)   #D1CCBD       13.9:1 black-on-taupe│
 * │ #FFFFFF (white)   #000000       21:1   white-on-black│
 * │ #FFFFFF (white)   #24272A       16.7:1 white-on-charcoal│
 * ├─────────────────────────────────────────────────────┤
 * │ NEVER USED (fail AAA)                               │
 * │ #24272A (charcoal) #000000      1.3:1  BANNED        │
 * │ #D1CCBD (taupe)   #FFFFFF       1.5:1  BANNED        │
 * │ #FFFFFF (white)   #D1CCBD       1.5:1  BANNED        │
 * └─────────────────────────────────────────────────────┘
 *
 * VALIDATION ERRORS — brand-only, no red:
 *   Bold black/charcoal error text + charcoal border on
 *   invalid field + existing aria-describedby text wiring.
 *   Errors are conveyed by text and border, not color alone
 *   (WCAG 1.4.1 satisfied).
 *
 * =========================================================
 * FONTS
 * =========================================================
 * Body / UI:       Poppins 400 — Vessel's secondary typeface
 * Headlines:       Poppins 600/700, ALL CAPS, -0.025em tracking
 *                  (approximates licensed Styrene A treatment)
 *
 * TO SWAP IN LICENSED STYRENE A (one-line change):
 *   In the --font-headline declaration below, prepend
 *   "Styrene A" before "Poppins". Then add your @font-face
 *   block at the STYRENE A SWAP POINT comment below.
 * =========================================================
 */

/*
 * STYRENE A SWAP POINT
 * ─────────────────────────────────────────────────────────
 * When the licensed Styrene A woff2 files are available,
 * add an @font-face block HERE (before :root) like this:
 *
 *   @font-face {
 *     font-family: "Styrene A";
 *     src: url("assets/styrene-a-web-bold.woff2") format("woff2");
 *     font-weight: 700;
 *     font-style: normal;
 *     font-display: swap;
 *   }
 *   @font-face {
 *     font-family: "Styrene A";
 *     src: url("assets/styrene-a-web-medium.woff2") format("woff2");
 *     font-weight: 600;
 *     font-style: normal;
 *     font-display: swap;
 *   }
 *
 * Then change --font-headline in :root to:
 *   --font-headline: "Styrene A", "Poppins", "Century Gothic",
 *                    "Futura", "Avenir Next", system-ui, sans-serif;
 * That single prepend is the ONLY code change needed.
 * ─────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --color-black:    #000000;
  --color-charcoal: #24272A;
  --color-white:    #FFFFFF;
  --color-taupe:    #D1CCBD;

  /* ── Semantic theme tokens (wired to brand palette) ──── */
  --vessel-bg:           var(--color-white);      /* page background */
  --vessel-text:         var(--color-black);      /* body text — black-on-white is AAA (21:1) */
  --vessel-text-strong:  var(--color-black);      /* labels, headings */
  --vessel-accent:       var(--color-black);      /* buttons, focus rings */
  --vessel-accent-text:  var(--color-white);      /* button text — white-on-black is AAA */
  --vessel-border:       var(--color-taupe);      /* field borders, dividers (decorative, not text) */
  --vessel-border-strong: var(--color-charcoal);  /* invalid field border */
  --vessel-surface:      var(--color-taupe);      /* subtle section bg, file input bg */
  --vessel-surface-text: var(--color-black);      /* text on taupe — black-on-taupe is AAA */
  --vessel-muted:        var(--color-black);      /* hints/secondary text — black-on-white AAA; hierarchy via size/weight */

  /* Error conveyance — brand-only, no red.
     Errors use bold black text + black border on the
     invalid field. Color is NEVER the sole cue (WCAG 1.4.1). */
  --vessel-error-text:   var(--color-black);     /* black-on-white 21:1 / black-on-taupe 13.9:1 — AAA */
  --vessel-error-border: var(--color-black);     /* strong border on invalid fields */
  --vessel-error-bg:     var(--color-taupe);     /* subtle taupe banner bg */

  /* ── Typography ─────────────────────────────────────────── */
  /* Body / UI: Poppins (loaded from Google Fonts — see index.html) */
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;

  /* Headlines: approximates licensed Styrene A — see SWAP POINT above.
     To activate Styrene A: prepend "Styrene A" to this list (one line). */
  --font-headline: "Poppins", "Century Gothic", "Futura", "Avenir Next",
                   system-ui, sans-serif;

  /* ── Layout ─────────────────────────────────────────────── */
  --vessel-radius:     4px;
  --vessel-focus-ring: 2px solid var(--color-black);
  --vessel-max-width:  680px;
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ─────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--vessel-bg);
  color: var(--vessel-text);
  line-height: 1.6;
  padding: 0 1rem 5rem;
  min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--vessel-border);
  padding: 1.75rem 0 1.5rem;
  margin-bottom: 3rem;
  text-align: center;
  background: var(--vessel-bg); /* white surface — logo black-on-white = AAA */
}

.site-header a {
  display: inline-block;
  text-decoration: none;
}

/* Logo image on a light (white) header: stays black, no recolor needed.
   The SVG fill="#000000" renders as black-on-white which is AAA (21:1). */
.site-header-logo {
  display: block;
  height: 44px;
  width: auto;
  /* max-width keeps it from going huge on retina monitors */
  max-width: 220px;
}

/* Tagline — "Filled With Purpose®" — one appearance only, below the logo */
.site-tagline {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;  /* 11px — discreet, not competing */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-black);   /* black-on-white = AAA */
  margin-top: 0.5rem;
}

/* ── Layout ───────────────────────────────────────────── */
.form-wrapper {
  max-width: var(--vessel-max-width);
  margin: 0 auto;
}

.form-intro {
  margin-bottom: 2.5rem;
}

/* Main page headline — headline treatment */
.form-intro h1 {
  font-family: var(--font-headline);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
  margin-bottom: 0.75rem;
}

.form-intro p {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--vessel-muted);   /* black-on-white = AAA */
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ── Section headings ─────────────────────────────────── */
.form-section {
  margin-bottom: 2.5rem;
}

/* Section label — headline treatment (uppercase + -0.025em tracking) */
.form-section-title {
  font-family: var(--font-headline);
  font-size: 0.6875rem;  /* 11px — section label, not a document heading */
  font-weight: 700;
  letter-spacing: 0.12em; /* section labels read better with slight positive tracking */
  text-transform: uppercase;
  color: var(--vessel-text-strong);    /* black-on-white = AAA */
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vessel-border); /* taupe divider — decorative only */
}

/* ── Field groups ─────────────────────────────────────── */
.field-group {
  display: grid;
  gap: 1.25rem;
}

.field-row-2 {
  grid-template-columns: 1fr 1fr;
}

.field-row-3 {
  grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 540px) {
  .field-row-2,
  .field-row-3 {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ── Labels ───────────────────────────────────────────── */
label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
}

/* Required asterisk — decorative; required stated in label text + aria-required */
.req {
  /* Black so it passes AAA on white (black-on-white 21:1) */
  color: var(--color-black);
  font-weight: 700;
  margin-left: 0.125rem;
}

.field-hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--vessel-muted);  /* black-on-white = AAA */
  margin-top: 0.05rem;
}

/* ── Inputs / selects / textareas ─────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--vessel-border);
  border-radius: var(--vessel-radius);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--vessel-text-strong);  /* black — AAA on white */
  background: var(--vessel-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Custom select chevron — charcoal color to pass on white bg */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2324272A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

/* File input — taupe surface, black text = AAA (black-on-taupe) */
input[type="file"] {
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  background: var(--vessel-surface);   /* taupe bg */
  color: var(--vessel-surface-text);   /* black text on taupe = AAA */
  border-color: var(--vessel-border);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

/* Invalid fields — charcoal/black border + no color-only cue (WCAG 1.4.1) */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--vessel-error-border);  /* black border */
  border-width: 2px;
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
}

/* Readonly / disabled */
input[readonly],
input[disabled] {
  background: var(--vessel-surface);
  color: var(--vessel-muted);
  cursor: default;
}

/* ── Checkbox row ─────────────────────────────────────── */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}

.checkbox-row input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-black);
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-row label {
  font-weight: 400;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
}

/* ── Radio fieldset (yes/no gate questions, e.g. "Are you
     working with a Vessel rep?") ───────────────────────── */
.radio-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.radio-fieldset legend {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
  padding: 0;
  width: 100%;
}

.radio-option-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio-option input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-black);
  flex-shrink: 0;
  cursor: pointer;
}

.radio-option label {
  font-weight: 400;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
}

/* Invalid fieldset — same non-color-only cue pattern as inputs/selects:
   a visible black outline, never color alone (WCAG 1.4.1). */
.radio-fieldset[aria-invalid="true"] {
  outline: 2px solid var(--vessel-error-border);
  outline-offset: 4px;
}

/* ── Error messages ───────────────────────────────────── */
/*
 * Errors are conveyed by:
 *   1. Bold black text (black-on-white = AAA, not color alone)
 *   2. Black border (2px) on the invalid field
 *   3. Text wired via aria-describedby (screen reader accessible)
 * No red is used — this satisfies WCAG 1.4.1 (color not sole cue).
 */
.field-error {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vessel-error-text);   /* black — AAA on white */
  display: none;
}

.field-error.visible {
  display: block;
}

/* ── File size notice ─────────────────────────────────── */
.file-limit-notice {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--vessel-muted);       /* black-on-white = AAA */
  margin-bottom: 1rem;
}

/* ── Turnstile widget container ───────────────────────── */
.turnstile-wrapper {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

/* ── Submit area ──────────────────────────────────────── */
#submit-area {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vessel-border);
}

/* ── Submit button ────────────────────────────────────── */
.btn-submit {
  display: inline-block;
  padding: 0.9375rem 2.25rem;
  background: var(--vessel-accent);       /* black */
  color: var(--vessel-accent-text);       /* white — white-on-black = AAA */
  border: none;
  border-radius: var(--vessel-radius);
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  width: 100%;
}

.btn-submit:hover:not(:disabled) {
  background: var(--color-charcoal);  /* charcoal on hover — white-on-charcoal = AAA */
}

.btn-submit:focus-visible {
  outline: var(--vessel-focus-ring);
  outline-offset: 3px;
}

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

/* ── Form-level error banner ──────────────────────────── */
/*
 * Banner uses taupe background with black text = AAA (black-on-taupe).
 * A charcoal left border provides a non-color visual cue alongside text.
 */
.form-error-banner {
  display: none;
  background: var(--vessel-error-bg);        /* taupe — black text on taupe = AAA */
  border: 1px solid var(--color-taupe);
  border-left: 4px solid var(--color-charcoal);  /* stronger left accent, non-color cue */
  color: var(--vessel-error-text);           /* black — AAA on taupe */
  border-radius: var(--vessel-radius);
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.form-error-banner.visible {
  display: block;
}

/* ── Submission states ────────────────────────────────── */
.submitting-note {
  display: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--vessel-muted);   /* black-on-white = AAA */
  margin-top: 0.875rem;
  text-align: center;
}

.submitting-note.visible {
  display: block;
}

/* ── Acknowledgment screen ────────────────────────────── */
#ack-screen {
  display: none;
  max-width: var(--vessel-max-width);
  margin: 5rem auto;
  text-align: center;
  padding: 0 1rem;
}

#ack-screen.visible {
  display: block;
}

.ack-icon {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-black);   /* black-on-white = AAA */
  border: 2px solid var(--color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.ack-title {
  font-family: var(--font-headline);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--vessel-text-strong);   /* black-on-white = AAA */
  margin-bottom: 1.25rem;
}

.ack-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--vessel-muted);    /* black-on-white = AAA */
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ack-contact {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--vessel-text-strong);
}

.ack-contact a {
  color: var(--color-black);         /* black-on-white = AAA */
  font-weight: 600;
  text-decoration: underline;
}

.ack-contact a:focus-visible {
  outline: var(--vessel-focus-ring);
  outline-offset: 2px;
}

/* ── 403 / expired-link screen ────────────────────────── */
#expired-screen {
  display: none;
  max-width: var(--vessel-max-width);
  margin: 5rem auto;
  text-align: center;
  padding: 0 1rem;
}

#expired-screen.visible {
  display: block;
}

.expired-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--vessel-text-strong);  /* black-on-white = AAA */
  margin-bottom: 0.875rem;
}

.expired-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--vessel-muted);    /* black-on-white = AAA */
}

.expired-body a {
  color: var(--color-black);     /* black-on-white = AAA */
  font-weight: 600;
  text-decoration: underline;
}

.expired-body a:focus-visible {
  outline: var(--vessel-focus-ring);
  outline-offset: 2px;
}

/* ── Page footer ──────────────────────────────────────── */
.site-footer {
  max-width: var(--vessel-max-width);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vessel-border);
  text-align: center;
}

.site-footer p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--vessel-muted);   /* black-on-white = AAA */
}

/* ── Utilities ────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.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;
}

/* ── Divider between sections ─────────────────────────── */
.section-spacer {
  height: 0.5rem;
}