/* Apprenticeship Registration Form (/registerinterest) - 2026 brand restyle.
   PREVIEW ONLY: loaded and applied only when the URL has ?preview=new, which adds
   class "alv ri-new" to #regwrap. Sits on top of vacancy_detail.css (.alv tokens).
   Everything is scoped under #regwrap.ri-new so the default page is untouched.
   No ids, name= attributes or JS-used classes are changed - styling only. */

#regwrap.ri-new {
  /* map the form's own tokens onto the brand */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-sunken: #f7f9fb;
  --border: #d5dde6;
  --ink: #1f2a36;
  --ink-muted: #5b6776;
  --ink-faint: #7b8794;
  --accent: #02807B;
  --accent-ink: #ffffff;
  --accent-wash: #e6f5f4;
  --structure: #1A2836;
  --structure-wash: #e6f5f4;
  --success: #02807B;
  --success-wash: #e6f5f4;
  --danger: #b0412a;
  --danger-wash: #fdf0e9;
  --radius: 10px;
  --display: 'Source Sans Pro', 'Oxygen', sans-serif;
  --sans: 'Source Sans Pro', 'Oxygen', sans-serif;
  --mono: 'Source Sans Pro', 'Oxygen', sans-serif;
  background: var(--bg);
  font-size: 16px;
  padding-bottom: 48px;
}
/* keep the reading-background accessibility option working */
#regwrap.ri-new[data-bg="cream"] { --bg: #fbf3dd; --surface: #fffbf0; --surface-sunken: #f5ead3; --border: #ddcd9c; }
#regwrap.ri-new[data-bg="blue"] { --bg: #eaf1fb; --surface: #f4f9ff; --surface-sunken: #dbe9fa; --border: #b9d2ef; }
#regwrap.ri-new[data-bg="grey"] { --bg: #eceff1; --surface: #f7f9fa; --surface-sunken: #e1e6e9; --border: #c9d2d7; }

#regwrap.ri-new h1, #regwrap.ri-new h2, #regwrap.ri-new h3 { letter-spacing: 0; color: var(--alv-navy); }
#regwrap.ri-new a { color: var(--alv-teal-dark); font-weight: 600; }
#regwrap.ri-new :focus-visible { outline: 3px solid #7fe3d6; outline-offset: 2px; }

/* ---------- Hero ---------- */
#regwrap.ri-new .ri-hero { padding: 30px 0 38px; }
#regwrap.ri-new .ri-hero h1 { color: #fff; font-size: 36px; line-height: 1.15; margin: 14px 0 10px; text-wrap: balance; }
#regwrap.ri-new .ri-hero .ri-hero-lead { color: rgba(255, 255, 255, .88); font-size: 17px; line-height: 1.5; max-width: 640px; margin: 0; }

/* ---------- Get started card (one logo only: the site header's) ---------- */
#regwrap.ri-new .get-started-logo,
#regwrap.ri-new #get-started-screen > h1,
#regwrap.ri-new #get-started-screen > p { display: none; }
#regwrap.ri-new #get-started-screen {
  max-width: 620px; margin: 28px auto 20px; padding: 28px 30px; text-align: left;
  background: var(--surface); border: 0; border-radius: var(--alv-radius); box-shadow: var(--alv-shadow);
}
#regwrap.ri-new .ri-start-title { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
#regwrap.ri-new .ri-start-list { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
#regwrap.ri-new .ri-start-list li { position: relative; padding-left: 30px; color: var(--ink); line-height: 1.45; }
#regwrap.ri-new .ri-start-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--alv-teal-soft);
}
#regwrap.ri-new .ri-start-list li::after {
  content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 10px;
  border: solid var(--alv-teal-dark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#regwrap.ri-new #get-started-screen .nav-btn { font-size: 17px; padding: 14px 30px; }

/* ---------- Shell + masthead ---------- */
#regwrap.ri-new .shell { padding-top: 26px; gap: 18px 32px; grid-template-columns: 250px minmax(0, 760px); }
#regwrap.ri-new .masthead {
  border-bottom: 0; padding-bottom: 0; align-items: flex-start; justify-content: flex-end; gap: 10px;
}
/* the masthead's logo + duplicate title (the hero already carries the title) */
#regwrap.ri-new .masthead > div:first-child { display: none !important; }
#regwrap.ri-new .ri-display-toggle {
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--alv-teal-dark);
  background: var(--surface); border: 2px solid var(--alv-teal-dark); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
#regwrap.ri-new .ri-display-toggle::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
#regwrap.ri-new .ri-display-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
#regwrap.ri-new .ri-display-toggle:hover { background: var(--alv-teal-soft); }
#regwrap.ri-new .a11y-toolbar {
  display: none; flex-basis: 100%; justify-content: flex-end;
  background: var(--surface); border-radius: 12px; box-shadow: var(--alv-shadow); padding: 10px 12px; gap: 8px;
}
#regwrap.ri-new .a11y-toolbar.ri-open { display: flex; }
#regwrap.ri-new .a11y-toolbar .a11y-label {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-muted);
}
#regwrap.ri-new .a11y-btn { font-size: 14px; border-radius: 999px; padding: 6px 13px; background: var(--surface); }
#regwrap.ri-new .a11y-btn[aria-pressed="true"] { border-color: var(--alv-teal-dark); color: var(--alv-teal-dark); background: var(--alv-teal-soft); }

/* ---------- Steps list (desktop) ---------- */
#regwrap.ri-new .rail-title {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink-muted);
}
#regwrap.ri-new .index { border-left: 2px solid var(--alv-line); }
#regwrap.ri-new .index li { padding-left: 20px; }
#regwrap.ri-new .index li::before { left: -6px; top: 13px; width: 10px; height: 10px; border-width: 2px; border-color: #b9c3ce; }
#regwrap.ri-new .index button { font-size: 15px; padding: 7px 4px 7px 0; }
#regwrap.ri-new .index button .num { font-family: var(--sans); font-weight: 700; color: var(--ink-faint); }
#regwrap.ri-new .index li.active button { color: var(--alv-navy); font-weight: 700; }
#regwrap.ri-new .index li.active button .num { color: var(--alv-teal-dark); }
#regwrap.ri-new .index li.active::before { background: var(--alv-teal-dark); border-color: var(--alv-teal-dark); }
#regwrap.ri-new .index li.done::before { background: var(--alv-teal); border-color: var(--alv-teal); }

/* ---------- Form card ---------- */
#regwrap.ri-new .step-frame { border: 0; border-radius: var(--alv-radius); box-shadow: var(--alv-shadow); }
#regwrap.ri-new .step-progress { height: 5px; background: var(--alv-line); }
#regwrap.ri-new .step-progress-fill { background: linear-gradient(90deg, var(--alv-teal), var(--alv-orange)); }
#regwrap.ri-new .step-viewport { padding: 28px 32px 32px; }
#regwrap.ri-new .sec-head { border-bottom: 1px solid var(--alv-line); align-items: center; }
#regwrap.ri-new .sec-head .tag {
  font-family: var(--sans); font-weight: 700; font-size: .8em; letter-spacing: .04em; text-transform: uppercase;
  color: var(--alv-teal-dark); background: var(--alv-teal-soft); border: 0; padding: 3px 11px;
}
#regwrap.ri-new .sec-head h2 { font-size: 1.45em; font-weight: 700; }
#regwrap.ri-new .step-panel .q { color: var(--alv-navy); font-size: 1.05em; }

/* fields */
#regwrap.ri-new .field label, #regwrap.ri-new .field legend { color: var(--alv-navy); font-weight: 700; }
#regwrap.ri-new .field input[type="text"], #regwrap.ri-new .field input[type="date"], #regwrap.ri-new .field input[type="email"],
#regwrap.ri-new .field input[type="tel"], #regwrap.ri-new .field textarea, #regwrap.ri-new .field select,
#regwrap.ri-new .reveal textarea {
  font-family: var(--sans); font-size: 1em; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease;
}
#regwrap.ri-new .reveal textarea { width: 100%; }
#regwrap.ri-new .field input:focus, #regwrap.ri-new .field textarea:focus, #regwrap.ri-new .field select:focus,
#regwrap.ri-new .reveal textarea:focus {
  outline: none; border-color: var(--alv-teal-dark); box-shadow: 0 0 0 3px rgba(3, 153, 147, .2);
}
#regwrap.ri-new input[type="radio"], #regwrap.ri-new input[type="checkbox"] { width: 18px; height: 18px; }
#regwrap.ri-new .radio-row label, #regwrap.ri-new .check-row label { font-size: 1em; }
#regwrap.ri-new .option-grid label { border-radius: var(--radius); background: var(--surface); padding: 9px 11px; }
#regwrap.ri-new .option-grid label:has(input:checked) { border-color: var(--alv-teal-dark); background: var(--alv-teal-soft); }

/* conditional follow-up questions */
#regwrap.ri-new .reveal { background: var(--alv-teal-soft); border-left-color: var(--alv-teal); border-radius: 0 var(--radius) var(--radius) 0; }
#regwrap.ri-new .reveal.show { border-left-width: 4px; }

/* eligibility result + notes (brand note style, like .alcr-note) */
#regwrap.ri-new .gate-result { border: 0; border-left: 4px solid transparent; color: var(--ink); font-size: .95em; }
#regwrap.ri-new .gate-result.yes { background: var(--alv-teal-soft); border-left-color: var(--alv-teal); color: var(--ink); }
#regwrap.ri-new .gate-result.no { background: #fdf0e9; border-left-color: var(--alv-orange); color: var(--ink); }
#regwrap.ri-new .gate-result.show { max-height: 220px; }
#regwrap.ri-new .n-a-note {
  font-family: var(--sans); font-size: .92em; color: var(--ink); background: var(--alv-teal-soft);
  border: 0; border-left: 4px solid var(--alv-teal); border-radius: var(--radius); padding: 12px 14px;
}
#regwrap.ri-new .submit-error.show { background: #fdf0e9; border: 0; border-left: 4px solid var(--alv-orange); color: #8a3a1c; }
#regwrap.ri-new .step-label .nav-hint { color: #b0412a; font-size: 12.5px; }

/* repeatable + file blocks */
#regwrap.ri-new .repeat-entry { border-radius: 12px; background: var(--surface-sunken); }
#regwrap.ri-new .repeat-entry .remove-entry,
#regwrap.ri-new .add-entry { font-family: var(--sans); font-weight: 700; border-radius: 999px; }
#regwrap.ri-new .add-entry { color: var(--alv-teal-dark); border: 2px dashed var(--alv-teal); font-size: .9em; padding: 8px 16px; }
#regwrap.ri-new .file-row { border-radius: 12px; border-color: #b9c3ce; }

/* ---------- Buttons (alv-btn look) ---------- */
#regwrap.ri-new .nav-btn {
  font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1; border-radius: 999px; padding: 12px 22px;
  border: 2px solid var(--alv-teal-dark); background: var(--surface); color: var(--alv-teal-dark);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#regwrap.ri-new .nav-btn:hover:not(:disabled) { background: var(--alv-teal-soft); transform: translateY(-1px); }
#regwrap.ri-new .nav-btn.primary { background: var(--alv-teal-dark); border-color: var(--alv-teal-dark); color: #fff; box-shadow: 0 6px 18px rgba(2, 128, 123, .3); }
#regwrap.ri-new .nav-btn.primary:hover:not(:disabled) { background: #026d69; border-color: #026d69; }
#regwrap.ri-new .nav-btn:disabled { opacity: .45; }
#regwrap.ri-new .nav-btn.primary:disabled { background: #e3e8ee; border-color: #e3e8ee; color: var(--ink-faint); box-shadow: none; }
#regwrap.ri-new .step-nav { padding: 14px 22px; border-top: 1px solid var(--alv-line); }
#regwrap.ri-new .step-label { font-family: var(--sans); font-size: 14px; color: var(--ink-muted); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 900px) {
  #regwrap.ri-new .shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; }
  #regwrap.ri-new .masthead { justify-content: flex-end; }
  /* steps list becomes a compact numbered strip */
  #regwrap.ri-new .rail-title { display: none; }
  #regwrap.ri-new .index {
    display: flex; justify-content: space-between; align-items: center; position: relative;
    border-left: 0; margin: 0; padding: 0 2px;
  }
  #regwrap.ri-new .index::before {
    content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 2px; margin-top: -1px; background: var(--alv-line);
  }
  #regwrap.ri-new .index li { padding: 0; margin: 0; flex: 0 0 auto; position: relative; z-index: 1; }
  #regwrap.ri-new .index li::before { display: none; }
  #regwrap.ri-new .index button {
    width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 0; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 2px solid #c6cfd8;
  }
  #regwrap.ri-new .index button .num { font-size: 15px; margin: 0; color: var(--ink-muted); }
  #regwrap.ri-new .index li.active button { background: var(--alv-teal-dark); border-color: var(--alv-teal-dark); box-shadow: 0 0 0 4px rgba(3, 153, 147, .18); }
  #regwrap.ri-new .index li.active button .num { color: #fff; }
  #regwrap.ri-new .index li.done button { background: var(--alv-teal-soft); border-color: var(--alv-teal); }
  #regwrap.ri-new .index li.done button .num { color: var(--alv-teal-dark); }
  #regwrap.ri-new .index li.locked button { opacity: .6; }
}
@media (max-width: 600px) {
  #regwrap.ri-new .ri-hero { padding: 20px 0 28px; }
  #regwrap.ri-new .ri-hero h1 { font-size: 27px; }
  #regwrap.ri-new .ri-hero .ri-hero-lead { font-size: 16px; }
  #regwrap.ri-new #get-started-screen { margin: 18px 16px; padding: 22px 18px; }
  #regwrap.ri-new #get-started-screen .nav-btn { width: 100%; }
  #regwrap.ri-new .step-viewport { padding: 22px 18px 26px; }
  #regwrap.ri-new .step-nav { padding: 12px 14px; gap: 8px; }
  #regwrap.ri-new .nav-btn { padding: 11px 16px; font-size: 15px; }
  #regwrap.ri-new .step-label { font-size: 12.5px; }
  #regwrap.ri-new .a11y-toolbar { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #regwrap.ri-new .nav-btn, #regwrap.ri-new .ri-display-toggle::after { transition: none; }
}

/* ---------- Hero logo on the right (21 Oct 2026, Ryan) ---------- */
#regwrap.ri-new .ri-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
#regwrap.ri-new .ri-hero-text { min-width: 0; flex: 1 1 auto; }
#regwrap.ri-new .ri-hero-logo { flex: 0 0 auto; width: 150px; height: auto; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 600px) {
  #regwrap.ri-new .ri-hero-inner { gap: 14px; align-items: flex-start; }
  #regwrap.ri-new .ri-hero-logo { width: 78px; padding: 7px 8px; border-radius: 10px; margin-top: 6px; }
}