/* =============================================================================
   Foothills event funnel

   Deliberately LIGHT ONLY, and that is a decision rather than an omission. This
   page gets used outdoors on a golf course in Alberta sun. Maximum screen
   brightness against a white ground is what reads there; a dark theme would be
   actively worse. Every colour is painted explicitly so the page holds whatever
   ground the browser puts behind it.

   Colour comes from the approved logo file, not from the brand guideline docx.
   The guideline names Foothills Blue as #2FA7DB, but every real artifact uses
   #0062b0: the inline SVG logo on foothillsgroup.ca, and every file in
   1 - Marketing\Interim Logo's\SVG. Since the guideline also says the logo must
   never be recoloured, the logo on this page renders #0062b0 regardless, and a
   #2FA7DB button beside it would simply be a second blue on one screen.

   The contrast works out better this way too, which settles it:
     white on #0062b0   6.22:1   passes WCAG AA
     white on #2FA7DB   2.74:1   fails
   So #0062b0 carries anything with text on it. #2FA7DB survives as a non-text
   accent only, on the progress bar, where 2.74:1 is not a text requirement.
   ============================================================================= */

:root {
  color-scheme: light;

  --blue:        #0062b0;   /* buttons, links, headings. 6.22:1 with white */
  --blue-dark:   #004e8c;   /* pressed state */
  --blue-light:  #2FA7DB;   /* non-text accent only */
  --blue-wash:   #EAF4FB;
  --orange:      #F7941D;   /* non-text accent only, 2.28:1 on white */

  --ink:    #12181D;
  --text:   #3A4750;        /* 9.56:1 on white */
  --muted:  #667581;
  --faint:  #8A97A1;

  --bg:      #FFFFFF;
  --bg-soft: #F5F8FA;
  --line:    #DFE6EA;

  --radius:    12px;
  --radius-sm: 8px;

  --font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fast. 200-300ms reads as responsive; slower reads as broken. */
  --slide: 240ms;
}

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

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

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Stops the pull-to-refresh bounce from feeling like the form moved. */
  overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------------- progress */

/* A filling bar, never "3 of 6". A number invites people to work out how much
   is left and quit. The short path uses the same bar, so it fills in two steps
   and feels quick. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--line);
  z-index: 20;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue-light);
  transition: width var(--slide) ease-out;
}

/* ---------------------------------------------------------------- layout */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 20px calc(32px + env(safe-area-inset-bottom));
  position: relative;
}

.screen { animation: slide-in var(--slide) ease-out both; }

@keyframes slide-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.screen.back { animation-name: slide-in-back; }
@keyframes slide-in-back {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.back { animation: fade-in var(--slide) ease-out both; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .progress-fill { transition: none; }
}

/* ---------------------------------------------------------------- welcome */

.screen-welcome { text-align: center; }

.logo {
  display: block;
  width: min(280px, 78%);
  height: auto;
  margin: 0 auto 34px;
}

h1 {
  margin: 0 0 28px;
  font-size: clamp(1.75rem, 7.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------------------------------------------------------------- questions */

.question {
  margin: 0 0 22px;
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}

.options { display: flex; flex-direction: column; gap: 10px; }

/* Tap targets are 56px, above the 48px floor, because the person tapping is
   one-handed, holding a drink, and probably wearing sunglasses. */
.option {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 15px 18px;
  text-align: left;
  font: 500 17px/1.35 var(--font);
  color: var(--ink);
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.option:hover { border-color: var(--blue-light); }
.option:active,
.option.chosen {
  background: var(--blue-wash);
  border-color: var(--blue);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 16px 28px;
  font: 700 18px/1.2 var(--font);
  color: #FFFFFF;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn.ghost {
  color: var(--blue);
  background: transparent;
}

/* Back arrow, small, top left, on every screen after the first. */
.back-btn {
  position: absolute;
  top: 18px;
  left: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.back-btn:hover { color: var(--blue); background: var(--bg-soft); }

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- fields */

.fields { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; }

label.field { display: block; }

label.field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
label.field .optional { text-transform: none; letter-spacing: 0; color: var(--faint); }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  /* 17px, never 16px or below: iOS Safari zooms the viewport on focus under
     16px and the person loses their place in the form. */
  font: 400 17px/1.4 var(--font);
  color: var(--ink);
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
input:focus, textarea:focus { border-color: var(--blue); background: var(--bg); }
textarea { min-height: 110px; resize: vertical; }

/* Consent. Unticked, normal weight, and never required. */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 14px;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.fine {
  margin: 0 0 20px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--faint);
}
.fine a { color: var(--muted); }

.err {
  margin: 0 0 14px;
  padding: 11px 14px;
  font-size: 15px;
  color: #8C2B12;
  background: #FDF0EC;
  border: 1px solid #F6D8CE;
  border-left: 3px solid #C2410C;
  border-radius: var(--radius-sm);
}

.muted { color: var(--muted); }

/* ---------------------------------------------------------------- done */

.screen-done { text-align: center; }
.tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #FFFFFF;
  background: var(--blue);
  border-radius: 50%;
}
.bonus { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); text-align: left; }
.bonus h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.bonus p.muted { margin: 0 0 14px; font-size: 15px; }
.bonus-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.bonus-actions .btn { width: auto; flex: 1; }
/* Skip carries the same visual weight as sending, so nobody feels cornered
   after they have already entered. */
.skip {
  font: 500 16px/1 var(--font);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 14px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.noscript {
  padding: 18px 20px;
  margin: 0;
  color: #8C2B12;
  background: #FDF0EC;
  border-bottom: 2px solid #C2410C;
}

/* ---------------------------------------------------------------- doc pages */

body.doc .app { justify-content: flex-start; padding-top: 48px; text-align: center; }
body.doc h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
body.doc a { color: var(--blue); }