/*
  Stepped-form pattern — first built for the Boat Insurance Claim Form
  (Figma node 18589:9073), but named/structured for reuse by any future
  multi-step form on the site, not just claims.

  Figma only exposes ONE section's worth of field styling (a two-column
  text-input example) plus the progress pills, intro header and the
  primary action button — everything else (select, textarea, radio/
  checkbox groups, file upload) isn't present as visible design in that
  frame (the sibling field-type variants are hidden instances Figma
  doesn't expose further). Those are extrapolated from the same visual
  language already established by the confirmed input (white fill,
  1px light-grey border, 10px radius, teal focus) rather than invented
  from scratch — see each block's own comment.
*/

/* ---- Section shells ----
   Intro and progress+steps are two separate <section>s (each full-width,
   own 1280px inner container, like every other section on the site) but
   share the same off-white background (Figma bg-grey-101) and combine
   their own top/bottom padding to reproduce Figma's single-section
   rhythm: 96px above the intro, 64px between intro and the step nav
   (intro-section's own bottom padding), 64px between step nav and the
   step content (.claim-form-section__inner's own gap), 144px below the
   form. Distinct from the page's white body background. */
.centered-intro-section {
  width: 100%;
  background: var(--colour-grey-101);
  padding: var(--space-section-s) 0 var(--space-6xl); /* 96px / 64px */
  box-sizing: border-box;
  /* .site-header is position:fixed (top:76px, ~88px tall) and .notice-bar
     is position:fixed too (0–48px) — together they cover roughly the top
     164px of the viewport. 200px clears both with some breathing room, so
     an anchor jump/scroll here lands below them instead of tucked under. */
  scroll-margin-top: 200px; /* landing offset when the hero CTA jumps here */
}

.centered-intro-section__inner {
  max-width: var(--page-container-outer);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
}

.claim-form-section {
  width: 100%;
  background: var(--colour-grey-101);
  padding: 0 0 var(--space-section-l); /* 144px */
  box-sizing: border-box;
  scroll-margin-top: 200px; /* landing offset when a step change scrolls here — see .centered-intro-section's own comment on this value */
}

.claim-form-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px */
  max-width: var(--page-container-outer);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
}

/* ---- Centered intro (eyebrow + two-tone heading + body copy) ----
   Generic centred header block — same shape as the site's other
   eyebrow/heading/body intros, just standalone rather than nested inside
   a bigger named section (card-grid, accordion-tabs, etc). Full width of
   its container — Figma centres this copy by text-align alone, within
   the section's full 1280px measure, not a narrower inner box. */
.centered-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
  text-align: center;
}

.centered-intro__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.centered-intro__heading {
  text-align: center;
  color: var(--colour-header-grey);
}

.centered-intro__heading-accent {
  color: var(--colour-brand-teal);
}

.centered-intro__body p {
  margin: 0 0 var(--space-xl) 0;
  color: var(--colour-body-grey);
}

.centered-intro__body p:last-child {
  margin-bottom: 0;
}

/* ---- Step progress nav ----
   A single white pill houses every step; the completed + current steps
   are grouped in one solid teal capsule (.step-nav__done), the remaining
   steps sit as plain items in the same row — matches Figma's "Step 1 /
   Step 2" merged pill next to standalone "Step 3", "Step 4", "Step 5". */
.step-nav {
  width: fit-content;
}

.step-nav__pill {
  display: flex;
  align-items: center;
  gap: var(--space-l); /* 16px */
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: var(--space-full);
  padding: var(--space-m); /* 12px */
}

.step-nav__done {
  display: flex;
  align-items: center;
  background: var(--colour-brand-teal);
  border-radius: var(--space-full);
}

.step-nav__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-m) var(--space-xl); /* 12px 20px */
  border: none;
  background: none;
  border-radius: var(--space-full);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
  cursor: pointer;
}

.step-nav__done .step-nav__step {
  color: var(--colour-white);
}

/* Split so small screens (below) can hide the "Step " word everywhere
   except the current step — see the @media block at the end of this
   file. Desktop shows both spans, so it just reads "Step 1" as normal. */
.step-nav__step-label {
  display: inline;
}

/* Not-yet-reached steps aren't clickable — only completed/current steps
   can be revisited (see js/claim-form.js). */
.step-nav__step:disabled {
  cursor: default;
}

/* ---- Step panel ---- */
.form-step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px between numbered sections within a step */
}

.form-step[hidden] {
  display: none;
}

/* ---- Numbered section (e.g. "1. Your Details") ---- */
.form-section {
  width: 100%;
  /* Wider than Figma's confirmed 844px field row (see .form-row below) —
     that value covers only the two-field example Figma actually showed,
     not the overall form's own width, which wasn't specified. 1000px
     balances better against the page's 1280px container than the
     original 880px, confirmed against Section 1. */
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
}

.form-section__heading {
  margin: 0;
  text-align: center;
  color: var(--colour-header-grey);
}

.form-section__heading-number {
  color: var(--colour-brand-teal);
}

.form-section__note {
  margin: 0;
  max-width: 620px;
  text-align: center;
  color: var(--colour-body-grey);
}

.form-section__subheading {
  margin: 0;
  width: 100%;
  color: var(--colour-header-grey);
}

/* ---- Section dividers ----
   A 1px rule sits above every numbered-section heading (except the very
   first on the page, "1. Your Details") and above every subheading
   within a section — same grey used by the existing .content-group-divider
   (css/icon-list.css). Both rely on sitting as an ordinary flex-column
   sibling for their spacing: .content-group-divider is used as-is for
   subheadings (already inside .form-section's own 24px-gap column, so the
   gap above and below it is identical); .form-section-divider is this
   file's own equivalent for the wider 64px gap between whole sections
   (sits directly in .form-step's own gap, not inside .form-section, so it
   needs its own max-width to line up with .form-section's own 1000px). */
.form-section-divider {
  width: 100%;
  max-width: 1000px;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--colour-grey-200);
}

/* ---- Conditional reveal group ----
   Wraps a run of subheadings/rows that only appear together (e.g. "If
   yes, provide details:"), toggled by js/claim-form.js's data-conditional
   attributes. Explicit width + the same flex/gap rhythm as .form-section
   itself, since a bare <div> here would otherwise shrink-to-fit as a
   flex item of .form-section (align-items: center) and collapse its own
   100%-width children instead of sizing them against the real column. */
.form-conditional-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px, matches .form-section's own rhythm */
}

/* ---- Field grid ----
   Two fixed 410px columns + 24px gap = Figma's own confirmed 844px field
   row — NOT 1fr 1fr, which would stretch each input to fill however wide
   .form-section happens to be rather than the actual 410px Figma gives
   each field. Un-set width so the row sizes to its own fixed 844px
   (grid's default sizing) and .form-section's align-items: center takes
   care of centering it, same as any other fixed-width flex item.
   .form-row--single collapses a row to one field that fills the
   available section width instead (textarea, long free-text answers,
   where a fixed 410px would be cramped). */
.form-row {
  width: 100%;
  max-width: 844px;
  display: grid;
  /* minmax(0, 410px), not a bare 410px: fixed tracks don't shrink, so a
     container narrower than 844px (before the single-column breakpoint
     below has a chance to kick in) would overflow instead of the two
     fields shrinking together to fit. */
  grid-template-columns: repeat(2, minmax(0, 410px));
  gap: var(--space-2xl); /* 24px */
}

.form-row--single {
  width: 100%;
  grid-template-columns: 1fr;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.form-field--span-2 {
  grid-column: 1 / -1;
}

.form-field__label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--colour-header-grey);
}

.form-field__required {
  color: var(--colour-orange);
  margin-left: 2px;
}

.form-field__hint {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-body-grey);
}

.form-field__error {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-orange);
  display: none;
}

.form-field.has-error .form-field__error {
  display: block;
}

/* ---- Inputs, selects, textareas ----
   Confirmed from Figma: white fill, 1px light-grey border, 10px radius,
   20px horizontal / 8px vertical padding, 16px Inter body text, mid-grey
   placeholder. Select + textarea reuse this identically (same component
   family, only the field-type variants differ) — see file header. */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 10px;
  padding: var(--space-s) var(--space-xl); /* 8px 20px */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-ink);
}

.form-input,
.form-select {
  height: 44px;
}

.form-textarea {
  min-height: 128px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--colour-mid-grey);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--colour-brand-teal);
}

.has-error .form-input,
.has-error .form-select,
.has-error .form-textarea {
  border-color: var(--colour-orange);
}

.form-select {
  appearance: none;
  padding-right: var(--space-4xl); /* room for the chevron */
  background-image: none;
  /* Selects have no ::placeholder — the "Please select" option stands in
     for one, so it needs the same mid-grey placeholder colour as every
     other field. :invalid alone only catches required-and-empty selects,
     so match on the actual selected option instead — correct for both
     required and optional selects. */
  color: var(--colour-mid-grey);
}

.form-select:has(option:checked:not([value=""])) {
  color: var(--colour-ink);
}

/* Custom chevron — same mask technique as .page-hero__breadcrumb's
   separator (css/page-hero.css), reusing the same existing asset. */
.form-field--select {
  position: relative;
}

.form-field--select::after {
  content: "";
  position: absolute;
  right: var(--space-xl);
  bottom: 16px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-color: var(--colour-body-grey);
  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMzY4LjkgMzYuMTUgMTAuNDIgNi4yMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM3My43MTEgNDIuMDM5MUwzNjkuMjExIDM3LjUzOTFDMzY4LjkzIDM3LjIzNDQgMzY4LjkzIDM2Ljc2NTYgMzY5LjIxMSAzNi40NjA5QzM2OS41MTYgMzYuMTc5NyAzNjkuOTg0IDM2LjE3OTcgMzcwLjI4OSAzNi40NjA5TDM3NC4yNSA0MC40NDUzTDM3OC4yMTEgMzYuNDYwOUMzNzguNTE2IDM2LjE3OTcgMzc4Ljk4NCAzNi4xNzk3IDM3OS4yODkgMzYuNDYwOUMzNzkuNTcgMzYuNzY1NiAzNzkuNTcgMzcuMjM0NCAzNzkuMjg5IDM3LjUzOTFMMzc0Ljc4OSA0Mi4wMzkxQzM3NC40ODQgNDIuMzIwMyAzNzQuMDE2IDQyLjMyMDMgMzczLjcxMSA0Mi4wMzkxWiIgZmlsbD0iI0FBQUNCMSIvPgo8L3N2Zz4K') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMzY4LjkgMzYuMTUgMTAuNDIgNi4yMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM3My43MTEgNDIuMDM5MUwzNjkuMjExIDM3LjUzOTFDMzY4LjkzIDM3LjIzNDQgMzY4LjkzIDM2Ljc2NTYgMzY5LjIxMSAzNi40NjA5QzM2OS41MTYgMzYuMTc5NyAzNjkuOTg0IDM2LjE3OTcgMzcwLjI4OSAzNi40NjA5TDM3NC4yNSA0MC40NDUzTDM3OC4yMTEgMzYuNDYwOUMzNzguNTE2IDM2LjE3OTcgMzc4Ljk4NCAzNi4xNzk3IDM3OS4yODkgMzYuNDYwOUMzNzkuNTcgMzYuNzY1NiAzNzkuNTcgMzcuMjM0NCAzNzkuMjg5IDM3LjUzOTFMMzc0Ljc4OSA0Mi4wMzkxQzM3NC40ODQgNDIuMzIwMyAzNzQuMDE2IDQyLjMyMDMgMzczLjcxMSA0Mi4wMzkxWiIgZmlsbD0iI0FBQUNCMSIvPgo8L3N2Zz4K') center / contain no-repeat;
}

/* ---- Choice groups (radio / checkbox) ---- */
.form-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-2xl); /* 16px row / 24px column */
}

.form-choice-group--column {
  flex-direction: column;
  gap: var(--space-m); /* 12px */
}

.form-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s); /* 8px */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-ink);
  cursor: pointer;
}

.form-choice input[type="radio"],
.form-choice input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--colour-brand-teal);
  cursor: pointer;
  flex-shrink: 0;
}

/* Declaration-style long checkbox statements (Section 16) get a bit more
   breathing room and align the box to the first line of text. */
.form-choice--statement {
  align-items: flex-start;
  gap: var(--space-m);
}

.form-choice--statement input {
  margin-top: 4px;
}

/* ---- File upload ----
   No upload control exists in the supplied Figma frame, so this reuses
   the same input surface (white, light-grey border, 10px radius) rather
   than inventing a new visual language, with the project's existing
   icon-file.svg asset standing in for an upload glyph. */
.form-upload {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  width: 100%;
  box-sizing: border-box;
  background: var(--colour-white);
  border: 1px dashed var(--colour-light-grey);
  border-radius: 10px;
  padding: var(--space-l) var(--space-xl);
}

.form-upload__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.form-upload__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-upload__filename {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 19.6px;
  color: var(--colour-body-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-upload__filename:empty::before {
  content: "No file selected";
  color: var(--colour-mid-grey);
}

.form-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-upload__button {
  flex-shrink: 0;
  height: 40px;
  padding: 0 var(--space-xl);
  font-size: 16px;
}

/* ---- Actions (Back / Next / Submit) ---- */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l); /* 16px */
}

/* ---- Responsive ----
   The field grid is already fluid: minmax(0, 410px) tracks shrink
   together, so a two-field row stays two fields right down to tablet
   portrait, where each field is still ~340px. It only becomes one field
   per row on phones, where 410px halved would leave inputs too small to
   use comfortably. Everything else here is spacing and the step pill.  */

@media (max-width: 1279px) {
  .centered-intro-section {
    padding: var(--space-section-xs) 0 var(--space-5xl); /* 80px / 42px */
  }

  .claim-form-section {
    padding-bottom: var(--space-section-s); /* 96px, down from 144px */
  }

  .claim-form-section__inner {
    gap: var(--space-5xl); /* 42px */
  }

  .form-step {
    gap: var(--space-5xl); /* 42px between numbered sections */
  }
}

@media (max-width: 767px) {
  .centered-intro-section {
    padding: var(--space-6xl) 0 var(--space-3xl); /* 64px / 32px */
  }

  .claim-form-section {
    padding-bottom: var(--space-section-xxs); /* 64px */
  }

  .claim-form-section__inner,
  .form-step {
    gap: var(--space-3xl); /* 32px */
  }

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

  /* Both actions full width and stacked — two pills side by side on a
     320px row leave neither with a usable label or touch target. */
  .form-actions {
    flex-direction: column-reverse; /* primary action stays on top */
    align-items: center;
    width: 100%;
  }

  .form-actions .btn {
    width: auto;
  }

  /* The upload row's inline "Choose file" button drops under the
     filename rather than squeezing it to a few characters. */
  .form-upload {
    flex-wrap: wrap;
    row-gap: var(--space-m);
  }

  .form-upload__button {
    width: auto;
  }

  /* Every step drops its "Step " word and shows just its number — e.g.
     "1 2 [Step 3] 4 5" — except the current step, which keeps the full
     label so it's still clear which step that number means. Keeps all
     five steps on one line instead of the pill wrapping across two or
     three. */
  .step-nav__step-label {
    display: none;
  }

  .step-nav__step--current .step-nav__step-label {
    display: inline;
  }

  .step-nav__step {
    padding: var(--space-s) var(--space-l); /* 8px 16px, tighter than desktop's 12px 20px */
  }

  /* Tighter gap than desktop's 16px; flex-wrap is a safety net for the
     narrowest phones — the compact chips above should fit five-across
     without it, but this wraps cleanly instead of overflowing if a
     particular device still can't fit them all. */
  .step-nav__pill {
    gap: var(--space-s); /* 8px */
    flex-wrap: wrap;
    justify-content: center;
  }
}