/* RJ Distro event feedback. Colours follow WEBSITE_THEME_BRAND_DECISIONS.md, as on apply.rjdistro.com. */
:root {
  --blue: #2A6FB8;
  --blue-dark: #215790;
  --blue-light: #5A96D2;
  --blue-tint: #F2F7FC;
  --red: #E06666;
  --ink: #1C1C1E;
  --slate: #242A35;
  --muted: #5B616B;
  --line: #C9CDD3;
  --line-soft: #E3E6EA;
  --field-border: #8B919A; /* 3.17:1 on white: input borders need 3:1 (WCAG 1.4.11) */
  --chip: #F4F6F9;
  --error: #d31313;
  --success: #008A06;
  --warning: #FFBA2C;
  --star: #F5B301;
  --white: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
}
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.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;
}

/* Chrome: slate header and footer; blue on slate uses the light step (#5A96D2), focus ring included */
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--blue-light); }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; background: var(--slate);
}
.brand img { display: block; width: 125px; height: auto; }
/* Links in the chrome are 44px tall touch targets; the gap stands in for the space before the arrow.
   The footer's links already carry their own height, so its rows have no gap and little padding. */
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--blue-light); font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--white); text-decoration: underline; }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px;
  padding: 4px 16px; background: var(--slate); color: var(--line); font-size: 13px;
}
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-light); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

/* Page and steps: red is used only for the kicker and the short rule */
.page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; }
.test-banner {
  margin: 0 0 20px; padding: 8px 12px; border: 1px solid var(--warning); border-radius: 6px;
  background: #FFF6DE; font-size: 14px;
}
/* Progress bar and step buttons, as on apply.rjdistro.com */
.progress { display: flex; gap: 4px; margin-bottom: 18px; }
.progress .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); }
.progress .seg.done { background: var(--blue); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 8px; }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.step-title { margin: 4px 0 8px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--blue); }
.step-title:focus { outline: none; }
.rule { width: 44px; height: 3px; margin-bottom: 22px; background: var(--red); }
.copy { margin: 0 0 20px; }

/* Fields: the brand uses Poppins 400 and 700 only, so question labels are 700 and answer options 400 */
.field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.field > label:not(.choice), .field > legend, .field > .label { display: block; margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 700; }
fieldset.field > legend { margin-bottom: 8px; }
.req { color: var(--ink); font-weight: 700; }
.help { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: 6px;
}
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: #6B7079; }
.row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.row > .field { flex: 1 1 220px; }
@media (max-width: 480px) {
    }
.nowrap { white-space: nowrap; }
/* Radio and checkbox options: the question-label rule above skips .choice, and the 20px control
   sits 2px down so it is centred on the first 24px line of its label, even when the label wraps.
   10px above and below that line makes every option row a 44px touch target. */
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 15px; line-height: 24px; cursor: pointer; }
.choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }

/* Errors use the protected error red (#d31313), never the brand red */
.has-error input[type="text"], .has-error input[type="email"], .has-error input[type="tel"],
.has-error select, .has-error textarea { border-color: var(--error); }
.error { margin: 6px 0 0; font-size: 14px; color: var(--error); }
.error-summary { margin: 0 0 22px; padding: 12px 16px; border: 2px solid var(--error); border-radius: 8px; }
.error-summary p { margin: 0 0 6px; font-weight: 700; }
.error-summary ul { margin: 0; padding-left: 18px; }
.error-summary a { color: var(--error); }

/* Submit area and buttons: blue owns every action */
.turnstile { margin: 8px 0 16px; }
.failure { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--error); border-radius: 8px; }
.failure p { margin: 0 0 10px; }
.btn { min-height: 44px; padding: 0 24px; font: inherit; font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.btn-primary { color: var(--white); background: var(--blue); border: 1.5px solid var(--blue); }
.btn-primary:hover, .btn-primary:active { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-secondary { color: var(--blue); background: var(--white); border: 1.5px solid var(--blue); }
.btn-secondary:hover { color: var(--blue-dark); border-color: var(--blue-dark); }
.btn[aria-disabled="true"] { cursor: progress; }
.btn-link { display: inline-flex; align-items: center; text-decoration: none; }
.btn-link:hover { color: var(--white); }

/* Confirmation */
.tick { display: block; margin-bottom: 12px; color: var(--success); }

/* Honeypot: off-screen for people, still filled in by naive bots */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Event form additions (approved mockup, docs/mockup/event-feedback-mockup.html) */
.req-key { margin: -8px 0 22px; font-size: 14px; color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.section-h { margin: 34px 0 4px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.section-h.first { margin-top: 0; }
.section-sub { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.divider { height: 1px; margin: 30px 0 0; background: var(--line-soft); border: 0; }
input[type="date"] {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: 6px;
}
.has-error input[type="date"] { border-color: var(--error); }

/* Pills: one-choice answers. The radio stays in the DOM for keyboard and screen readers. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px;
  border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--white); cursor: pointer;
}
.pill input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--white); }
.pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.has-error .pill span { border-color: var(--error); }

/* Star ratings: five radios in 1-to-5 order; data-value (kept by app.js) fills the stars. */
.rating {
  display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  min-width: 0; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft);
}
.rating legend { float: left; max-width: 330px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.rating legend small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
/* The box sits 12px outside the column on each side (1.5px border + 10.5px padding), so its label and
   stars line up exactly with the plain rows below it. */
.rating.overall { margin: 0 -12px 6px; padding: 14px 10.5px; border: 1.5px solid var(--line-soft); border-radius: 8px; }
.rating.overall legend { font-size: 16px; }
.rating .error { flex: 1 1 100%; margin: 0; }
.stars { display: inline-flex; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.stars label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; cursor: pointer; color: var(--line); }
.stars label svg { width: 30px; height: 30px; }
.stars[data-value="1"] label:nth-of-type(-n+1),
.stars[data-value="2"] label:nth-of-type(-n+2),
.stars[data-value="3"] label:nth-of-type(-n+3),
.stars[data-value="4"] label:nth-of-type(-n+4),
.stars[data-value="5"] label:nth-of-type(-n+5) { color: var(--star); }
/* Hover previews the fill; these come after the data-value rules so they win while hovering. */
.stars.stars:hover label { color: var(--star); }
.stars.stars label:hover ~ label { color: var(--line); }
.stars input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 4px; }

/* Errors on questions without a text box (spec §4.3: every flagged question gets a red outline). */
/* Pulled out by its own padding, like the overall box, so a flagged row's content doesn't shift. */
.rating.has-error { margin: 4px -12px; padding: 12px; border-color: transparent; border-radius: 8px; box-shadow: 0 0 0 2px var(--error); }
.rating.overall.has-error { padding: 14px 10.5px; }
.has-error .choice input { outline: 2px solid var(--error); outline-offset: 1px; }

.submit-area { margin: 30px 0 8px; }
.fine { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 520px) {
  .rating legend { float: left; width: 100%; max-width: none; }
  .stars label { width: 44px; }
}

@media (min-width: 700px) {
  .site-header { padding: 14px 24px; }
  .page { padding-top: 36px; }
  .step-title { font-size: 28px; }
}