/* ============================================================================================
   REGISTRATION FORM  (registration.cfm)  - October 2026
   Page chrome (header, title bar, footer) comes from styles.css; everything below is the form.
   ============================================================================================ */

:root {
  --reg-navy:     #246;
  --reg-accent:   #457;
  --reg-accent-2: #5a7399;
  --reg-link:     #269;
  --reg-text:     #3b4652;
  --reg-muted:    #6b7a88;
  --reg-border:   #b9c8d6;
  --reg-line:     #e3ebf2;
  --reg-card:     #fff;
  --reg-focus:    rgba(68,85,119,0.22);
  --reg-ok-bg:    #e6f4e6;  --reg-ok-bd:   #79b279;  --reg-ok-tx:   #1e5a1e;
  --reg-warn-bg:  #fdeeee;  --reg-warn-bd: #d98c8c;  --reg-warn-tx: #8a1f1f;
  --reg-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- layout ---------- */
.regwrap               { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
@media (max-width: 900px) {
  .regwrap             { grid-template-columns:minmax(0,1fr); gap:24px; }
}
.regmain, .regaside    { min-width:0; }

.regintro              { font-size:1.05rem; color:var(--reg-text); margin:0 0 20px 0; max-width:60ch; }
.req                   { color:#b4262a; font-weight:bold; }
.opt                   { color:var(--reg-muted); font-weight:normal; font-size:0.85em; }

/* ---------- cards ---------- */
.regcard               { background:var(--reg-card); border-radius:12px; padding:22px 26px 10px 26px; margin:0 0 18px 0;
                         box-shadow:0 1px 2px rgba(20,40,70,0.06), 0 6px 18px rgba(20,40,70,0.06); border:solid 1px #d8e3ee; }
@media (max-width: 560px) {
  .regcard             { padding:18px 16px 6px 16px; border-radius:10px; }
}
.regcard-title         { display:flex; align-items:center; gap:12px; font-size:1.3rem; color:var(--reg-navy); margin:0 0 14px 0; line-height:1.3; }
.regstep               { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--reg-accent); color:#fff;
                         font-family:var(--reg-sans); font-size:0.95rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.regcard-intro         { font-size:0.95rem; color:var(--reg-text); margin:-4px 0 16px 0; }

/* ---------- fields ---------- */
.regform, .regform *   { font-family:var(--reg-sans); }
.regfield              { margin:0 0 16px 0; }
.regfield-half         { max-width:320px; }
.regrow-2              { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width: 560px) {
  .regrow-2            { grid-template-columns:1fr; gap:0; }
}

.regform label,
.regform legend,
.regform .label-text   { display:block; font-size:0.92rem; font-weight:600; color:var(--reg-text); margin:0 0 5px 0; font-style:normal; padding:0; }
.regform label.sublabel{ font-weight:normal; font-size:0.8rem; color:var(--reg-muted); margin-bottom:3px; }

.regform input[type=text],
.regform input[type=tel],
.regform input[type=email],
.regform input[type=password],
.regform select,
.regform textarea      { display:block; width:100%; font-size:1rem; line-height:1.4; color:#222; background:#fff;
                         border:solid 1px var(--reg-border); border-radius:7px; padding:10px 12px; margin:0;
                         -webkit-appearance:none; appearance:none; transition:border-color 0.15s, box-shadow 0.15s; }
.regform select        { padding-right:34px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23457' d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
                         background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.regform textarea      { resize:vertical; min-height:80px; }
.regform input::placeholder, .regform textarea::placeholder { color:#9aa7b3; }

.regform input:focus,
.regform select:focus,
.regform textarea:focus{ outline:none; border-color:var(--reg-accent); box-shadow:0 0 0 3px var(--reg-focus); }

.regform .is-invalid,
.regform input.is-invalid,
.regform select.is-invalid,
.regform textarea.is-invalid { border-color:#c23b3b; background-color:#fff7f7; }
.regform fieldset.is-invalid,
.regform .regprogs-wrap.is-invalid,
.regform .regcaptcha.is-invalid { border:solid 1px #c23b3b; border-radius:8px; padding:10px 12px; background:#fff7f7; }

.hint                  { font-size:0.82rem; color:var(--reg-muted); margin:6px 0 0 0; line-height:1.45; }
.hint.is-good          { color:var(--reg-ok-tx); }

/* ---------- date of birth ---------- */
.regdob                { border:0; padding:0; margin:0 0 16px 0; }
.regdob-fields         { display:grid; grid-template-columns:76px 1.5fr 1fr; gap:10px; max-width:420px; }
.regdob-fields > div   { min-width:0; }
.regform .regdob-fields input { text-align:center; }

/* ---------- live year-group panel ---------- */
.regyear               { border-radius:8px; padding:12px 16px; margin:0 0 18px 0; font-size:0.95rem; line-height:1.5; border:solid 1px transparent; }
.regyear.is-ok         { background:var(--reg-ok-bg);   border-color:var(--reg-ok-bd);   color:var(--reg-ok-tx); }
.regyear.is-warn       { background:var(--reg-warn-bg); border-color:var(--reg-warn-bd); color:var(--reg-warn-tx); }
.regyear a             { color:inherit; text-decoration:underline; }
.regyear[hidden]       { display:none; }

/* ---------- programme options (selectable cards) ----------
   NB: selectors are prefixed with .regform so they outrank the generic ".regform label" rule above */
.regprogs-wrap                   { margin-bottom:22px; }
.regprogs                        { display:grid; gap:10px; margin-top:10px; }
.regform .regprog                { display:flex; align-items:center; gap:14px; position:relative; margin:0; padding:14px 18px 14px 16px;
                                   border:solid 1.5px #c9d6e3; border-radius:10px; background:#fff; cursor:pointer; font-weight:normal; font-size:1rem;
                                   transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.regform .regprog:hover          { border-color:var(--reg-accent-2); box-shadow:0 2px 8px rgba(20,40,70,0.08); }

/* custom radio */
.regform .regprog input          { flex:0 0 22px; width:22px; height:22px; margin:0; padding:0; -webkit-appearance:none; appearance:none; cursor:pointer;
                                   border:solid 2px #9fb0c2; border-radius:50%; background:#fff; transition:border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.regform .regprog input:checked  { border-color:var(--reg-accent); background:var(--reg-accent); box-shadow:inset 0 0 0 4px #fff; }
.regform .regprog input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--reg-focus); }
.regform .regprog input:checked:focus-visible { box-shadow:inset 0 0 0 4px #fff, 0 0 0 3px var(--reg-focus); }

.regprog-body                    { display:block; flex:1 1 auto; min-width:0; }
.regprog-title                   { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:1.02rem; font-weight:600; color:var(--reg-navy); line-height:1.3; }
.regprog-title small             { display:inline-block; font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; line-height:1.6;
                                   color:var(--reg-accent); background:#e8eef5; border-radius:999px; padding:1px 9px; }
.regprog-detail                  { display:block; font-size:0.87rem; color:var(--reg-muted); margin-top:4px; line-height:1.45; }

/* selected */
.regform .regprog.is-checked     { border-color:var(--reg-accent); background:#eef3f9; box-shadow:inset 0 0 0 1px var(--reg-accent); }
.regform .regprog.is-checked .regprog-detail { color:var(--reg-text); }
.regform .regprog.is-checked::after { content:"\2713"; flex:0 0 auto; margin-left:auto; width:24px; height:24px; border-radius:50%; background:var(--reg-accent); color:#fff;
                                   font-size:0.9rem; font-weight:700; line-height:24px; text-align:center; }

/* waiting for a date of birth */
.regform .regprog.is-pending     { cursor:default; border-color:#dde5ed; }
.regform .regprog.is-pending:hover { border-color:#dde5ed; box-shadow:none; }
.regform .regprog.is-pending input { border-color:#d3dbe3; background:#f3f6f9; }

/* not available for this year group - muted, no opacity so it stays legible */
.regform .regprog.is-off         { cursor:not-allowed; background:#f4f6f9; border-color:#e1e8ef; }
.regform .regprog.is-off:hover   { border-color:#e1e8ef; box-shadow:none; }
.regform .regprog.is-off input   { border-color:#d3dbe3; background:#eceff3; cursor:not-allowed; }
.regform .regprog.is-off .regprog-title { color:#8a97a4; }
.regform .regprog.is-off .regprog-title small { color:#8a97a4; background:#e6ebf0; }
.regform .regprog.is-off .regprog-detail { color:#9aa7b3; font-style:italic; }

@media (max-width: 560px) {
  .regform .regprog              { padding:12px 14px; gap:12px; align-items:flex-start; }
  .regform .regprog input        { margin-top:2px; }
}

/* ---------- address lookup ---------- */
.regpcode              { display:flex; gap:10px; align-items:stretch; max-width:420px; }
.regform .regpcode input { flex:1 1 auto; text-transform:uppercase; }
.regaddr-results       { margin-top:10px; font-size:0.9rem; color:var(--reg-muted); max-width:560px; }
.regaddr-results:empty { display:none; }
.regaddr-err           { color:#8a1f1f; }
.regform .regaddr-select { margin-top:0; }

/* ---------- password meter ---------- */
.pwmeter               { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:8px; }
.pwmeter span          { height:6px; border-radius:3px; background:#e1e8ef; transition:background 0.2s; }
.pwmeter[data-score="1"] span:nth-child(-n+1) { background:#d9534f; }
.pwmeter[data-score="2"] span:nth-child(-n+2) { background:#f0ad4e; }
.pwmeter[data-score="3"] span:nth-child(-n+3) { background:#5cb85c; }
.pwmeter[data-score="4"] span                 { background:#3c8f3c; }

/* ---------- buttons ---------- */
.regform button, .regbtn-primary, .regbtn-secondary { font-family:var(--reg-sans); border:0; border-radius:7px; cursor:pointer; line-height:1.3; }
.regbtn-primary        { background:var(--reg-accent); color:#fff; font-size:1.1rem; font-weight:600; padding:14px 34px; margin-top:16px; }
.regbtn-primary:hover  { background:#33425f; }
.regbtn-primary:focus  { outline:none; box-shadow:0 0 0 3px var(--reg-focus); }
.regbtn-secondary      { background:#e6edf4; color:var(--reg-navy); font-size:0.92rem; font-weight:600; padding:10px 16px; white-space:nowrap; flex:0 0 auto; }
.regbtn-secondary:hover{ background:#d6e1ec; }

/* ---------- submit area ---------- */
.regsubmit             { padding:6px 0 10px 0; }
.regcaptcha            { display:inline-block; width:auto; }
.regsubmit .g-recaptcha{ margin:0; }
.regsubmit .hint       { margin-top:10px; }

/* ---------- error summary ---------- */
.regerrors             { background:#fff; border:solid 1px #e3a3a3; border-left:solid 6px #c23b3b; border-radius:8px; padding:16px 20px; margin:0 0 20px 0;
                         color:#5a1b1b; font-family:var(--reg-sans); font-size:0.95rem; line-height:1.5; }
.regerrors:focus       { outline:none; box-shadow:0 0 0 3px rgba(194,59,59,0.2); }
.regerrors ul          { margin:10px 0 0 0; padding:0 0 0 20px; }
.regerrors li          { margin:3px 0; }
.regerrors a           { color:#8a1f1f; }

/* ---------- side column ---------- */
.regaside              { background:#eef4fa; border:solid 1px #d8e3ee; border-radius:12px; padding:20px 22px; font-size:0.95rem; color:var(--reg-text); }
.regaside h2           { font-size:1.05rem; color:var(--reg-navy); margin:0 0 8px 0; }
.regaside h2 + *       { margin-top:0; }
.regaside p, .regaside ol { margin:0 0 18px 0; }
.regaside ol           { padding-left:20px; }
.regaside li           { margin-bottom:6px; }
.regaside .small       { font-size:0.85rem; color:var(--reg-muted); }
.regaside > :last-child{ margin-bottom:0; }

/* ---------- several children on one form ---------- */
.regchild-head                   { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.regchild-head .regcard-title    { margin-bottom:14px; }
.regform button.regchild-remove  { flex:0 0 auto; background:none; border:solid 1px #d9b3b3; color:#8a1f1f; font-size:0.82rem; font-weight:600;
                                   padding:5px 12px; border-radius:6px; margin-top:2px; }
.regform button.regchild-remove:hover { background:#fdeeee; border-color:#c23b3b; }
#regchildren .regchild + .regchild { border-top:solid 4px var(--reg-accent-2); }
.regaddchild                     { margin:-4px 0 22px 0; padding:16px 18px; border:dashed 2px #b9c8d6; border-radius:12px; background:rgba(255,255,255,0.55); }
.regform button.regbtn-add       { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--reg-navy); border:solid 1.5px var(--reg-accent);
                                   font-size:1rem; font-weight:600; padding:10px 18px; border-radius:8px; }
.regform button.regbtn-add span  { font-size:1.3rem; line-height:1; font-weight:700; }
.regform button.regbtn-add:hover { background:var(--reg-accent); color:#fff; }
.regaddchild .hint               { margin-top:8px; }
.regbtn-primary:disabled         { opacity:0.7; cursor:progress; }