/*
 * WCAG 2.2 AA Compliance — enforced at the template level.
 * All campaigns served by this system inherit these standards automatically.
 * When standards update, update this file and all campaigns benefit immediately.
 *
 * Criteria addressed:
 *   1.1.1  Non-text content — alt text on hero image (set in intake Step 2)
 *   1.3.1  Info and relationships — semantic HTML, fieldsets, legends
 *   1.3.5  Input purpose — autocomplete attributes on all form fields
 *   1.4.3  Contrast — 4.5:1 minimum for text; button text chosen via WCAG luminance formula
 *   1.4.4  Resize text — rem/em units throughout; layout reflows at 320px
 *   1.4.10 Reflow — single-column at 320px, no horizontal scroll
 *   1.4.11 Non-text contrast — UI components (inputs, buttons) meet 3:1 against background
 *   1.4.12 Text spacing — no fixed heights that clip text when spacing is increased
 *   2.1.1  Keyboard — all controls reachable and operable by keyboard
 *   2.4.1  Bypass blocks — skip-to-main link
 *   2.4.2  Page titled — title set from config.productName
 *   2.4.3  Focus order — logical DOM order matches visual order
 *   2.4.7  Focus visible — visible focus ring on all interactive elements
 *   2.4.11 Focus not obscured — no sticky elements covering focused items
 *   2.5.3  Label in name — visible labels match accessible names
 *   2.5.8  Target size — interactive elements min 44×44px
 *   3.1.1  Language — lang attribute set from campaign language config
 *   3.3.1  Error identification — errors described in text, not colour alone
 *   3.3.2  Labels or instructions — all inputs have visible labels
 *   4.1.3  Status messages — success/error use aria-live regions
 */

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

:root {
  --color-primary:     #0066cc;
  --color-primary-dark:#004499;
  --color-light:       #f0f4f8;
  --color-muted:       #888888;
  --color-dark-muted:  #333333;
  --color-button-text: #ffffff;
  --color-error:       #b91c1c; /* darkened from #dc3545 for 4.5:1 on white */
  --color-success:     #166534; /* darkened from #198754 for 4.5:1 on white */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 5px;
  --field-radius: 14px;   /* generous-rounded form fields + button (Option B) */
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --min-touch: 44px; /* WCAG 2.5.8 minimum target size */
  /* Body/footer tints and a contrast-safe field border are derived from the
     hero-extracted (or admin-overridden) accent via color-mix, so every
     client site picks up its brand color automatically. The tints are very
     light (text stays dark, contrast preserved); the resting field border
     keeps a dark base so it stays >=3:1 for WCAG 1.4.11. */
  --color-tint:        color-mix(in srgb, var(--color-primary) 7%,  #fff);
  --color-tint-strong: color-mix(in srgb, var(--color-primary) 12%, #fff);
  --color-field-border: color-mix(in srgb, var(--color-primary) 22%, #767676);
}

/* WCAG 1.4.4: base font size in rem so user zoom works correctly */
html { font-size: 100%; }

body {
  font-family: var(--font);
  /* Light tint of the brand accent pulled down from the hero so the page
     reads as "designed" rather than a white form under an image. */
  background: var(--color-tint);
  color: #111;        /* ~16:1 contrast on the light tint */
  line-height: 1.55;
}

/* ─── Skip navigation — WCAG 2.4.1 ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: .6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  width: 100%;
  overflow: hidden;
  background: var(--color-dark-muted);
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;      /* Show the FULL artwork at its natural aspect ratio on
                        every width (phone → laptop → external monitor). The old
                        fixed heights + object-fit:cover cropped the image on
                        wide screens. Image fills the width edge-to-edge and is
                        never cut off. */
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.container {
  /* Wide enough for a long single-line headline/subheadline on desktop
     (including ALL-CAPS copy). The form itself is constrained narrower below
     so it doesn't stretch — only the heading area uses the full width. */
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
/* Keep the form column a comfortable reading width even though the heading
   area is wide. These are centered within the wider container. */
.entry-form,
.success-message,
.form-error-banner,
.legal-copy {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Typography ────────────────────────────────────────────────────────── */
/* text-wrap:balance/pretty → the headline and subheadline stay on one line
   while they fit the container and wrap into nicely balanced lines (no lone
   orphan word) only when the window is too narrow. The wider container plus
   the slightly smaller subheadline cap keep a one-line subhead on desktop
   even with larger system fonts or browser zoom. */
.headline {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: .5rem;
  color: #111;
  text-align: center;
  text-wrap: balance;
}
.subheadline {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #444;
  margin-bottom: 1.75rem;
  text-align: center;
  text-wrap: pretty;
}
.reassurance {
  text-align: center;
  font-size: .95rem;
  color: #555;
  max-width: 540px;
  margin: -0.75rem auto 1.75rem;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Offer description card — deliberately NEUTRAL (not themed from the hero
   artwork) so every campaign gets the same clean, modern treatment. */
.prize-description {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #374151;
  text-align: center;
  margin: 0 auto 2.25rem;
  max-width: 560px;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}
.prize-description p { margin-bottom: .5rem; }
.prize-description p:last-child { margin-bottom: 0; }
.prize-description strong { color: #111827; }

/* ─── Form ──────────────────────────────────────────────────────────────── */
.entry-form { margin-bottom: 2rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.25rem;
}
@media (min-width: 500px) {
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.form-group {
  margin-bottom: 1.1rem;
  position: relative;
}
.form-group label,
.dob-fieldset legend,
.upload-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: #222; /* 12:1 contrast on white */
}
/* WCAG 3.3.2: required marker visible but not relied upon alone */
.required-mark { color: var(--color-error); margin-left: .15rem; }
.optional-mark { font-weight: 400; color: #555; font-size: .85em; margin-left: .25rem; }
.required-note { font-size: .8rem; color: #555; margin-top: -.25rem; margin-bottom: 1rem; }
.form-group input,
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  /* WCAG 2.5.8: min 44px touch target height */
  min-height: var(--min-touch);
  min-height: 50px;
  padding: .8rem 1.1rem;
  font-size: 1rem;
  font-family: var(--font);
  /* WCAG 1.4.11: border keeps a dark base (>=3:1) with a hint of the accent. */
  border: 2px solid var(--color-field-border);
  border-radius: var(--field-radius);
  background: #fff;
  color: #111;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group 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='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  outline: none;
}
.form-group input.has-error,
.form-group select.has-error {
  border-color: var(--color-error);
}
.field-error {
  color: var(--color-error);
  font-size: .8rem;
  margin-top: .3rem;
  display: none;
}
.field-error.visible { display: block; }

/* ─── DOB row ───────────────────────────────────────────────────────────── */
.dob-label {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: #222;
}

/* ─── Receipt upload ────────────────────────────────────────────────────── */
.upload-area {
  border: 2px dashed #ccc;
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-area:hover,
.upload-area.drag-over {
  border-color: var(--color-primary);
  background: var(--color-light);
}
.upload-area input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.upload-area .upload-icon { font-size: 2rem; margin-bottom: .5rem; line-height: 1; }
.upload-area .upload-text { font-size: .95rem; color: #555; }
.upload-area .upload-name { font-size: .85rem; color: var(--color-primary); margin-top: .4rem; font-weight: 600; }

/* ─── Country / state conditional ──────────────────────────────────────── */
.country-group { display: none; }
.state-group   { display: none; }
.province-group{ display: none; }
.country-group.visible  { display: block; }
.state-group.visible    { display: block; }
.province-group.visible { display: block; }

/* ─── Submit button ─────────────────────────────────────────────────────── */
/* WCAG 2.5.8: min 44px touch target; 1.4.3: text contrast guaranteed by WCAG luminance formula in colors.js */
.btn-submit {
  display: block;
  width: 100%;
  min-height: var(--min-touch);
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--color-primary);
  color: var(--color-button-text);
  border: 2px solid transparent;
  border-radius: var(--field-radius);
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.btn-submit:hover  { background: var(--color-primary-dark); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.btn-submit:active { transform: translateY(1px); box-shadow: var(--shadow); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ─── Messages ──────────────────────────────────────────────────────────── */
.form-error-banner {
  background: #fff2f2;
  border: 1px solid #f5c6cb;
  color: var(--color-error);
  padding: .85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .92rem;
  display: none;
}
.form-error-banner.visible { display: block; }

.success-message {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: var(--radius);
  display: none;
}
.success-message.visible { display: block; }
.success-message .success-icon { font-size: 3rem; line-height: 1; margin-bottom: .75rem; }
.success-message h2 { font-size: 1.5rem; color: var(--color-success); margin-bottom: .5rem; }
.success-message p  { color: #444; font-size: 1rem; }

/* ─── Legal ─────────────────────────────────────────────────────────────── */
.legal-copy {
  font-size: .78rem;
  color: #777;
  margin-top: 2rem;
  line-height: 1.6;
}
.legal-links {
  margin-top: .75rem;
  font-size: .8rem;
}
.legal-links a {
  color: var(--color-muted);
  text-decoration: underline;
  margin-right: 1rem;
}
.legal-links a:hover { color: var(--color-primary); }

/* ─── Ended / staging pages ─────────────────────────────────────────────── */
.page-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}
.page-center .icon { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; }
.page-center h1   { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: .75rem; }
.page-center p    { color: #555; max-width: 440px; margin: 0 auto .5rem; }

.staging-form {
  width: 100%;
  max-width: 340px;
  margin: 1.5rem auto 0;
}
.staging-form input {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: var(--radius);
  margin-bottom: .85rem;
  text-align: center;
  letter-spacing: .1em;
}
.staging-form input:focus { border-color: var(--color-primary); outline: none; }
.staging-error { color: var(--color-error); font-size: .85rem; margin-bottom: .75rem; }

/* ─── Loading spinner ───────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 1.1em; height: 1.1em;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: .4em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Site footer ───────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-tint-strong);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 18%, #fff);
  margin-top: 3rem;
  padding: 2rem 1.25rem;
  font-size: .78rem;
  color: #666;
  text-align: center;
}
.footer-inner {
  max-width: 800px;
  margin: 0 auto;
}
.footer-trust {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #555;
}
.footer-copyright {
  margin-bottom: .85rem;
  font-weight: 600;
  color: #444;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .1rem;
  margin-bottom: .85rem;
}
.footer-links a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  padding: 0 .35rem;
}
.footer-links a:hover { color: var(--color-primary); }
.footer-powered {
  margin-top: 1rem;
  font-size: .8rem;
  letter-spacing: .02em;
  color: #777;
}
.footer-powered b {
  color: var(--color-primary-dark);
  font-weight: 700;
}
.footer-sep { color: #bbb; }

.footer-compliance-link {
  margin-bottom: .4rem;
}
.footer-compliance-link a {
  color: #555;
  text-decoration: underline;
}
.footer-compliance-link a:hover { color: var(--color-primary); }

.privacy-choices-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.privacy-choices-icon {
  width: 30px;
  height: 14px;
  vertical-align: middle;
  flex-shrink: 0;
}

.footer-sensitive-notice {
  margin-top: .6rem;
  color: #555;
  font-style: italic;
}

.footer-bbb {
  margin-top: 1rem;
}
.bbb-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: .3rem .65rem;
  color: #333;
}
.bbb-badge:hover { border-color: #003087; color: #003087; }
.bbb-icon {
  font-size: .7rem;
  font-weight: 900;
  background: #003087;
  color: white;
  padding: .15rem .3rem;
  border-radius: 3px;
  letter-spacing: .05em;
}
.bbb-text { font-size: .78rem; font-weight: 600; }

/* ─── Fieldsets (DOB, Address) ──────────────────────────────────────────── */
.dob-fieldset,
.address-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.dob-fieldset legend { margin-bottom: .5rem; }
.address-fieldset { margin-bottom: 0; }
.upload-label { margin-bottom: .3rem; }
.upload-hint  { font-size: .85rem; color: #555; margin-bottom: .6rem; }

/* ─── Accessibility ─────────────────────────────────────────────────────── */

/* WCAG 2.4.7 & 2.4.11: visible focus ring on ALL interactive elements, never hidden */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Ensure focus ring is also visible on inputs which already have a border */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* WCAG 1.4.12: text spacing — no fixed heights that would clip content */
* { line-height: normal; }
p, li, label, legend { line-height: 1.55; }

/* WCAG 1.4.10: reflow at 320px — no horizontal scrolling */
@media (max-width: 320px) {
  .form-row.cols-2,
  .form-row.cols-3 { grid-template-columns: 1fr; }
}

/* Screen reader only — visually hidden but available to assistive technology */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Coming-soon countdown */
.countdown {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem auto 0;
  flex-wrap: wrap;
}
.countdown-cell {
  background: var(--primary, #0066cc);
  color: var(--button-text, #fff);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.countdown-num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
  opacity: 0.85;
}

/* Opt-in checkbox group (rules + marketing) */
.optin-group {
  border: 0;
  padding: 0;
  margin: 1.25rem 0 0;
}
.optin-row { margin-bottom: 0.75rem; }
.optin-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.4;
}
.optin-label input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.optin-label a { text-decoration: underline; }

/* Language toggle (top-right corner of every public page) */
.lang-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.lang-toggle a {
  color: #555;
  text-decoration: none;
}
.lang-toggle a:hover { text-decoration: underline; }
.lang-toggle .lang-active {
  color: #111;
  text-decoration: underline;
  cursor: default;
}

/* ── Accessible focus styles (WCAG 2.4.7 / 2.4.11 / 2.4.13 / 1.4.11) ────────
 * Adopted from PEP WCAG Handbook v1.2 Appendix D (_focus.css), brand-mapped.
 * Uses :focus-visible so the indicator only appears for keyboard users (not
 * on click). Two-color ring (outer dark + inner light) guarantees ≥3:1 change
 * contrast against any solid background. Includes forced-colors support for
 * Windows High Contrast. scroll-padding prevents focus from being hidden
 * under any sticky UI we add later.
 */
:root {
  --a11y-focus-color-outer: #0b3d7a;          /* mid-dark variant of brand primary */
  --a11y-focus-color-inner: #ffffff;
  --a11y-focus-outline: 2px;
  --a11y-focus-ring:    4px;
  --a11y-focus-offset:  2px;
  --a11y-sticky-header: 0px;                  /* no sticky header today; future-proof */
  scroll-padding-top: var(--a11y-sticky-header);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline:    var(--a11y-focus-outline) solid var(--a11y-focus-color-outer);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-color-inner);
}

/* Utility class for any custom focusable container (.tag-pill, etc.) */
.focus-ring:focus-visible {
  outline:    var(--a11y-focus-outline) solid var(--a11y-focus-color-outer);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-color-inner);
}

/* Forced colors / High Contrast mode (Windows) — keep an indicator visible
 * using CanvasText (the system foreground color) instead of brand colors. */
@media (forced-colors: active) {
  *:focus-visible {
    outline: var(--a11y-focus-outline) solid CanvasText;
    outline-offset: var(--a11y-focus-offset);
    box-shadow: none;
  }
}

/* Anchored / programmatic focus targets must not be hidden under any
 * future sticky banner or header. */
:target,
[tabindex="-1"]:focus { scroll-margin-top: var(--a11y-sticky-header); }

/* Fallback for very old browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [role="button"]:focus,
  [tabindex]:focus {
    outline: var(--a11y-focus-outline) solid var(--a11y-focus-color-outer);
    outline-offset: var(--a11y-focus-offset);
    box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-color-inner);
  }
}

/* ── Barcode Bucks offer value ──────────────────────────────────────────── */
/* Neutral near-black, not the artwork palette — one consistent look. */
.offer-value {
  text-align: center;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Brand accent (dark variant for text contrast on the light page tint). */
  color: var(--color-primary-dark);
  margin: 0.5rem 0 1rem;
}