/* ==========================================================================
   Global ADHD Conference — form pages
   Repo: ADHD-UK/globaladhd · public/gac-forms.css

   Loaded only on the register, donate and contact pages, immediately after
   gac-homepage.css (which supplies the tokens these rules use). Kept separate
   so form work can be deployed without touching the 78KB main stylesheet.

   Paired with gac-forms.js. Between them they style the Gravity Forms markup
   that is actually on the site, not idealised markup.
   ========================================================================== */

/* ==========================================================================
   20. FORM PAGES — rail + form card  (design block 5c, and 5a/5b to follow)

   Values are the canvas inline literals. The one deliberate departure is the
   "(optional)" marker: the mock has it at #8A7396 12px, which is 4.15:1 and
   fails WCAG AA, so it is darkened here in line with the earlier speaker-name
   fix.

   This styles the Gravity Forms markup that is actually on the site, not
   idealised markup - compound Name and Email fields with sub-labels below,
   which gac-forms.js and the rules here promote into real labels.
   ========================================================================== */

.gac-form-layout{
  display:grid; grid-template-columns:360px 1fr; gap:28px;
  align-items:start; max-width:1120px; margin:40px auto 0; text-align:left;
}
.gac-rail{ display:flex; flex-direction:column; gap:16px; }

.gac-rail-card{
  background:linear-gradient(180deg,#F0EDFA 0%,#FBF3E4 100%);
  border:1px solid var(--gac-bd-3); border-radius:20px; padding:26px;
}
.gac-rail-kicker{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--gac-lav-2);
}
.gac-rail-body{ font-size:15px; line-height:1.6; color:var(--gac-ink-2); margin-top:12px; }
.gac-rail-link{
  display:inline-block; margin-top:14px;
  font-size:14px; font-weight:700; color:var(--gac-purple); text-decoration:none;
}
.gac-rail-link:hover{ color:var(--gac-purple-dark); text-decoration:underline; }

.gac-rail-note{
  background:rgba(240,180,55,.13); border:1px solid rgba(224,160,40,.4);
  border-radius:16px; padding:18px 22px;
}
.gac-rail-note-title{ font-size:14px; font-weight:800; color:var(--gac-amber-text); }
.gac-rail-note-body{
  font-size:13.5px; line-height:1.55; color:var(--gac-name); margin-top:4px;
}
.gac-rail-note-body a{ font-weight:700; color:var(--gac-purple); text-decoration:none; }
.gac-rail-note-body a:hover{ color:var(--gac-purple-dark); text-decoration:underline; }

/* --- the card ---------------------------------------------------------- */
.gac-formcard{
  background:#fff; border:1px solid var(--gac-bd-2); border-radius:20px;
  padding:36px 40px; box-shadow:0 1px 2px rgba(36,27,46,.04);
}
/* Section 18 gives .gform_wrapper a card of its own; inside .gac-formcard the
   wrapper must be plain or the page shows a card within a card. */
body.gac-home .gac-formcard .gform_wrapper{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 !important; max-width:none !important;
  box-shadow:none !important;
}
body.gac-home .gac-formcard .gform_fields{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:22px 14px !important;
}
/* Phone and Message run the full width; the name and email pairs do not. */
body.gac-home .gac-formcard .gfield--width-full,
body.gac-home .gac-formcard .gfield--type-textarea,
body.gac-home .gac-formcard .gfield--type-phone{ grid-column:1 / -1 !important; }
body.gac-home .gac-formcard .gfield{ margin:0 !important; padding:0 !important; }

/* --- labels ------------------------------------------------------------ */
body.gac-home .gac-formcard .gfield_label{
  font-size:14px !important; font-weight:700 !important;
  color:var(--gac-ink) !important; margin:0 0 7px !important;
  padding:0 !important; display:block; line-height:1.3;
}
/* Compound fields are labelled by their sub-labels in this design, so the
   group legend ("Name", "Email") is hidden - but kept for screen readers. */
body.gac-home .gac-formcard .gfield_label_before_complex{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
body.gac-home .gac-formcard .gfield_required{
  color:var(--gac-amber-deep) !important; font-weight:700; margin-left:2px;
  text-decoration:none;
}
body.gac-home .gac-formcard .gac-optional{
  font-weight:500; font-size:12px; color:#6E5C7A; margin-left:4px;
}

/* Sub-label placement is a per-form setting. Where it is "below", the label
   follows the input in the DOM, so the column is reversed to lift it above
   without changing the order Gravity Forms expects. Where it is already
   "above" - as on the donate form - the reversal must NOT apply, or the
   labels end up under their own inputs. */
body.gac-home .gac-formcard .ginput_complex{
  display:grid !important; grid-template-columns:1fr 1fr; gap:14px;
  margin:0 !important;
}
body.gac-home .gac-formcard .ginput_complex > span{
  display:flex !important; flex-direction:column;
  padding:0 !important; max-width:none !important; width:auto !important;
}
body.gac-home .gac-formcard .field_sublabel_below .ginput_complex > span{
  flex-direction:column-reverse;
}
body.gac-home .gac-formcard .ginput_complex > span > label{
  font-size:14px !important; font-weight:700 !important;
  color:var(--gac-ink) !important; margin:0 0 7px !important; line-height:1.3;
}

/* --- inputs ------------------------------------------------------------ */
body.gac-home .gac-formcard input[type="text"],
body.gac-home .gac-formcard input[type="email"],
body.gac-home .gac-formcard input[type="tel"],
body.gac-home .gac-formcard input[type="number"],
body.gac-home .gac-formcard input[type="url"],
body.gac-home .gac-formcard select,
body.gac-home .gac-formcard textarea{
  height:48px; padding:0 16px; margin:0;
  border:1.5px solid #D8CCE0; border-radius:12px;
  font-family:"Archivo",system-ui,sans-serif; font-size:15px;
  color:var(--gac-ink); background:#fff; box-sizing:border-box;
  /* Gravity Forms sizes any control carrying its .small class to a quarter of
     the row (.gform-theme--foundation .gfield select.small), and that selector
     outweighs anything sensible here. Both the currency and Gift Aid selects
     carry it, which is why they came out stub-width. Checkboxes and radios are
     deliberately not in this list - they must stay 20px. */
  width:100% !important;
}
body.gac-home .gac-formcard textarea{
  height:auto; min-height:170px; padding:14px 16px;
  line-height:1.6; resize:vertical;
}
body.gac-home .gac-formcard input:focus,
body.gac-home .gac-formcard select:focus,
body.gac-home .gac-formcard textarea:focus{
  border-color:var(--gac-purple); outline:none;
  box-shadow:0 0 0 3px rgba(122,35,132,.12);
}
body.gac-home .gac-formcard ::placeholder{ color:#9A8CA6; }

/* --- submit ------------------------------------------------------------ */
body.gac-home .gac-formcard .gform_footer{
  margin:28px 0 0 !important; padding:0 !important; display:block !important;
}
/* Gravity Forms only stretches a submit button that carries its own
   gform-button--width-full class. Form 4 has it, form 6 does not - and the
   framework's .button rules are specific enough (five classes) to beat any
   reasonable selector, so the width has to be forced. */
body.gac-home .gac-formcard .gform_footer button,
body.gac-home .gac-formcard .gform_footer input[type="submit"]{
  display:block; width:100% !important; max-width:none !important;
  text-align:center;
  background:var(--gac-purple); color:#fff; border:0;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:16.5px; font-weight:700; padding:17px; border-radius:999px;
  cursor:pointer; height:auto; transition:background .15s ease;
}
body.gac-home .gac-formcard .gform_footer button:hover,
body.gac-home .gac-formcard .gform_footer input[type="submit"]:hover{
  background:var(--gac-purple-dark);
}

/* --- validation -------------------------------------------------------- */
body.gac-home .gac-formcard .gfield_error input,
body.gac-home .gac-formcard .gfield_error textarea{ border-color:#C0392B; }
body.gac-home .gac-formcard .gfield_validation_message,
body.gac-home .gac-formcard .validation_message{
  font-size:13px; color:#8E2B20; background:none; border:0;
  padding:6px 0 0; margin:0;
}
body.gac-home .gac-formcard .gform_validation_errors{
  border-radius:12px; font-size:14px;
}
body.gac-home .gac-formcard .gform_confirmation_message{
  font-size:16px; line-height:1.6; color:var(--gac-ink-2);
}

/* --- responsive -------------------------------------------------------- */
@media (max-width:1024px){
  /* The rail is context rather than instruction, so it can follow the form. */
  .gac-form-layout{ grid-template-columns:1fr; gap:20px; max-width:760px; }
  .gac-rail{ order:2; }
  .gac-formcard{ order:1; }
  /* Once stacked, the rail sits directly under the form card, so its coloured
     boxes must line up with the input boxes above them - which means insetting
     the rail by whatever horizontal padding the form card is carrying. */
  .gac-rail{ padding:0 40px; }
}
@media (max-width:768px){
  .gac-form-layout{ margin-top:28px; }
  .gac-formcard{ padding:24px 20px; border-radius:16px; }
  .gac-rail{ padding:0 20px; }   /* matches .gac-formcard padding above */
  .gac-rail-card{ padding:22px; border-radius:16px; }
  body.gac-home .gac-formcard .gform_fields{ grid-template-columns:1fr !important; }
  body.gac-home .gac-formcard .ginput_complex{ grid-template-columns:1fr !important; }
}

/* ==========================================================================
   21. DONATE PAGE  (design block 5b)

   The mock shows Currency / Amount / Gift Aid / Total. The live form also
   carries an Address section, because Gift Aid cannot be claimed without a
   UK address - so it is kept and styled to match rather than hidden.
   ========================================================================== */

/* --- rail: where your money goes --------------------------------------- */
.gac-rail-list{ list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.gac-rail-list li{
  position:relative; padding-left:20px;
  font-size:14.5px; line-height:1.55; color:var(--gac-ink-2);
}
.gac-rail-list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--gac-amber);
}
.gac-rail-pills{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;
  border-top:1px solid rgba(122,35,132,.12); padding-top:16px;
}
.gac-rail-pills span{
  background:var(--gac-purple); color:#fff;
  font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;
}

/* --- numbered step headers (injected by gac-forms.js) ------------------- */
.gac-step{ display:flex; align-items:center; gap:12px; }
/* The numeral sits dead centre only if the line box is taken out of the
   equation. Divi's inherited line-height of 1.7em made the 13px glyph sit in
   a 23.8px line box inside a 26px circle, which pushed it 1.8px high; grid
   centring alone still left 1px, because Archivo's digits sit slightly above
   the em-box centre. line-height:1 plus a 1px top pad measures 6.0px above and
   6.0px below the glyph box - balanced. */
.gac-step-n{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:#F5EFF8; color:var(--gac-purple);
  font-size:13px; font-weight:800; line-height:1;
  display:grid; place-items:center;
  box-sizing:border-box; padding-top:1px;
}
.gac-step-t{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--gac-lav-2);
}
/* The second step is separated by a rule, as in the mock. */
.gac-step--2{ margin-top:32px; border-top:1px solid #F1EBF4; padding-top:28px; }
body.gac-home .gac-formcard .gac-step{ grid-column:1 / -1; }

/* --- amount chips (injected by gac-forms.js) ---------------------------- */
.gac-chips{ display:flex; gap:8px; margin-bottom:10px; }
.gac-chip{
  flex:1; min-height:44px; text-align:center; cursor:pointer;
  background:none; border:1.5px solid #D8CCE0; color:var(--gac-ink-2);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:15px; font-weight:700; padding:12px 0; border-radius:999px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.gac-chip:hover{ border-color:var(--gac-purple); color:var(--gac-purple); }
.gac-chip:focus-visible{ outline:3px solid rgba(122,35,132,.35); outline-offset:2px; }
.gac-chip[aria-pressed="true"]{
  background:var(--gac-purple); border-color:var(--gac-purple); color:#fff;
}
.gac-chip-hint{ font-size:12.5px; color:#6E5C7A; margin-top:7px; }
@media (prefers-reduced-motion:reduce){ .gac-chip{ transition:none; } }

/* --- field descriptions ------------------------------------------------- */
body.gac-home .gac-formcard .gfield_description{
  font-size:13px; line-height:1.55; color:#6E5C7A;
  margin:-3px 0 8px; padding:0;
}

/* --- total panel -------------------------------------------------------- */
/* The padding needs !important because the reset a few rules up
   (.gac-formcard .gfield{padding:0 !important}) would otherwise flatten this
   panel to nothing - which is exactly what it did. */
body.gac-home .gac-formcard .gfield--type-total{
  background:#FAF7FC; border:1px solid var(--gac-bd-3); border-radius:16px;
  padding:20px 24px !important;
  display:grid !important; grid-template-columns:1fr auto; align-items:center;
  column-gap:14px; row-gap:3px;
}
body.gac-home .gac-formcard .gfield--type-total .gfield_label{
  grid-column:1; grid-row:1; margin:0 !important;
}
body.gac-home .gac-formcard .gfield--type-total .gfield_description{
  grid-column:1; grid-row:2; font-size:12.5px; margin:0;
}
body.gac-home .gac-formcard .gfield--type-total .ginput_container_total{
  grid-column:2; grid-row:1 / span 2; text-align:right;
}
/* This is a readonly <input>, and an input with width:auto sizes itself from
   its default character count - roughly 20 characters, which at 26px claimed
   about 300px and squeezed the description into two lines. 12ch holds
   "£ 100,000.00" and lets the description have the rest of the row. */
body.gac-home .gac-formcard .ginput_total{
  border:0 !important; background:none !important; padding:0 !important;
  height:auto !important; width:12ch !important; min-width:0;
  text-align:right;
  font-size:26px !important; font-weight:800 !important;
  color:var(--gac-purple) !important;
}

/* --- section breaks (Gift Aid declaration, Address, Total) --------------- */
body.gac-home .gac-formcard .gsection{
  grid-column:1 / -1; border:0; border-top:1px solid #F1EBF4;
  margin:10px 0 0 !important; padding:24px 0 0 !important;
}
body.gac-home .gac-formcard .gsection .gsection_title{
  font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gac-lav-2); margin:0;
}
/* A section break with no title still draws its rule, which is useful as a
   separator - but an empty heading should not take up a line. */
body.gac-home .gac-formcard .gsection .gsection_title:empty{ display:none; }

/* The Gift Aid declaration is a legal notice, so it is set as fine print:
   smaller, softer, generously led and held to a readable measure. Without a
   top margin it collided with its own heading. */
body.gac-home .gac-formcard .gsection_description{
  margin:12px 0 0 !important; padding:0 !important;
  font-size:13.5px; line-height:1.65; color:var(--gac-name);
  max-width:66ch;
}
body.gac-home .gac-formcard .ginput_complex.ginput_container_address{
  grid-template-columns:1fr 1fr;
}
body.gac-home .gac-formcard .ginput_container_address .address_line_1,
body.gac-home .gac-formcard .ginput_container_address .address_line_2{
  grid-column:1 / -1;
}

/* --- reassurance line under the button ---------------------------------- */
.gac-form-note{
  text-align:center; font-size:13px; color:#6E5C7A; margin-top:12px;
}

@media (max-width:768px){
  .gac-chips{ flex-wrap:wrap; }
  .gac-chip{ flex:1 1 calc(50% - 4px); }
  body.gac-home .gac-formcard .gfield--type-total{
    grid-template-columns:1fr; row-gap:8px; padding:18px 20px !important;
  }
  body.gac-home .gac-formcard .gfield--type-total .ginput_container_total{
    grid-column:1; grid-row:auto; text-align:left;
  }
  body.gac-home .gac-formcard .ginput_container_address{ grid-template-columns:1fr !important; }
}

/* ==========================================================================
   22. REGISTER PAGE  (design block 5a)

   The rail's countdown is the homepage [gac_countdown] shortcode restyled,
   not a second implementation - the target instant, the tick and the local
   start line all stay in gac-homepage.js with one source of truth. The mock
   shows days/hrs/min only, so the seconds card is hidden here rather than a
   new variant being added to the shortcode.
   ========================================================================== */

/* --- rail: countdown card ----------------------------------------------- */
.gac-rail-cd{ padding:26px 26px 24px; }
.gac-rail-cd .gac-cd-row{ display:block; margin:0; }
.gac-rail-cd .gac-cd-label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em;
  color:var(--gac-lav-2);
}
.gac-rail-cd .gac-cd{
  display:flex; align-items:baseline; gap:14px; margin-top:12px;
}
.gac-rail-cd .gac-cd-card{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; width:auto !important; min-width:0 !important;
  display:flex; align-items:baseline; gap:4px;
}
.gac-rail-cd .gac-cd-num{ font-size:36px !important; font-weight:800; }
.gac-rail-cd .gac-cd-unit{
  font-size:13px !important; letter-spacing:0 !important; text-transform:lowercase;
  color:var(--gac-lav-2) !important; margin:0 !important;
}
/* Days/hrs/min only, per the mock. */
.gac-rail-cd .gac-cd-card--sec{ display:none !important; }
/* The minutes figure is the amber one once seconds are gone. */
.gac-rail-cd .gac-cd-card:nth-of-type(3) .gac-cd-num{ color:var(--gac-amber-deep) !important; }

/* The local-start line becomes the rail's footer, above a hairline. */
.gac-rail-cd .gac-pill{
  display:flex; align-items:flex-start; gap:9px; margin-top:16px;
  padding:16px 0 0; background:none; border:0; border-radius:0;
  border-top:1px solid rgba(122,35,132,.12);
  font-size:13.5px; line-height:1.55; color:var(--gac-name);
}
.gac-rail-cd .gac-pill-dot{
  flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--gac-amber); margin-top:5px;
}
.gac-rail-cd .gac-pill strong{ color:var(--gac-amber-text); }

/* --- rail: what you get, and the live counter --------------------------- */
.gac-rail-plain{
  background:#fff; border:1px solid var(--gac-bd-2); border-radius:20px; padding:26px;
}
.gac-rail-count{
  background:#fff; border:1px solid var(--gac-bd-2); border-radius:16px;
  padding:18px 22px; display:flex; align-items:flex-start; gap:11px;
  font-size:13.5px; line-height:1.55;
}
.gac-rail-count .gac-pulse{ flex:none; margin-top:5px; }
.gac-rail-count-mid{ color:var(--gac-muted); }

/* --- form: the donation group ------------------------------------------- */
/* The mock puts currency, amount and total in ONE tinted card. Gravity Forms
   emits no wrapper to hang that on, so the tint is drawn across the three
   consecutive fields instead.

   The first attempt looked like three separate boxes, because .gform_fields
   is a grid with `gap: 22px 14px` and that row gap sits between every pair of
   fields. Tinting them individually cannot close it; each field needs to be
   pulled back up over the gap with a negative top margin.

   Scoped to #gform_wrapper_9. The donate form's total is a standalone panel
   by design (mock 5b), so it must not be swept into a card here. */
#gform_wrapper_9 .gfield--type-multicurrency,
#gform_wrapper_9 .gfield--type-product,
#gform_wrapper_9 .gfield--type-total{
  background:#FAF7FC !important;
  border:0 !important;
  border-left:1px solid var(--gac-bd-3) !important;
  border-right:1px solid var(--gac-bd-3) !important;
  border-radius:0 !important;
  padding:0 24px !important;
}
#gform_wrapper_9 .gfield--type-multicurrency{
  border-top:1px solid var(--gac-bd-3) !important;
  border-radius:16px 16px 0 0 !important;
  padding-top:22px !important;
}
/* -22px cancels the grid's row gap so the three read as one surface. */
#gform_wrapper_9 .gfield--type-product,
#gform_wrapper_9 .gfield--type-total{ margin-top:-22px !important; }
/* The negative margin above removes the grid gap entirely, so the field needs
   its own breathing room or "Donation Amount" sits hard against the currency
   box. 16px measured between the select's bottom edge and the label's top. */
#gform_wrapper_9 .gfield--type-product{
  padding-top:16px !important; padding-bottom:18px !important;
}
#gform_wrapper_9 .gfield--type-total{
  border-bottom:1px solid var(--gac-bd-3) !important;
  border-radius:0 0 16px 16px !important;
  padding:14px 24px 22px !important;
  box-shadow:inset 0 1px 0 var(--gac-bd-3);   /* hairline above the total */
}
/* Inside the card the label is a quiet caption, not a heading. */
#gform_wrapper_9 .gfield--type-total .gfield_label{
  font-size:13px !important; font-weight:500 !important;
  color:var(--gac-lav) !important;
}
#gform_wrapper_9 .gfield--type-total .ginput_total{ font-size:22px !important; }

/* --- form: choices ------------------------------------------------------ */
body.gac-home .gac-formcard .gchoice{
  background:#F7F3F9; border-radius:12px; padding:12px 16px;
  margin:0 0 8px; display:flex; align-items:center; gap:12px; min-height:44px;
}
body.gac-home .gac-formcard .gchoice input[type="checkbox"],
body.gac-home .gac-formcard .gchoice input[type="radio"]{
  width:20px !important; height:20px !important; flex:none;
  accent-color:var(--gac-purple); margin:0;
}
body.gac-home .gac-formcard .gchoice label{
  font-size:14.5px; font-weight:600; line-height:1.4;
  color:var(--gac-ink); margin:0; flex:1;
}
/* The certificate question is a two-up row in the mock. */
body.gac-home .gac-formcard .gfield--type-radio .gfield_radio{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
body.gac-home .gac-formcard .gfield--type-radio .gchoice{ margin:0; }
body.gac-home .gac-formcard .gfield--type-radio .gchoice label{ font-weight:500; }

/* --- form: "Select all" ghost pill (injected by gac-forms.js) ----------- */
.gac-selectall-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.gac-selectall{
  flex:none; background:none; cursor:pointer;
  border:1.5px solid #D8CCE0; color:var(--gac-ink-2);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px;
  min-height:44px;
}
.gac-selectall:hover{ border-color:var(--gac-purple); color:var(--gac-purple); }
.gac-selectall:focus-visible{ outline:3px solid rgba(122,35,132,.35); outline-offset:2px; }

@media (max-width:768px){
  .gac-rail-cd{ padding:22px; }
  .gac-rail-cd .gac-cd-num{ font-size:30px !important; }
  .gac-rail-plain{ padding:22px; border-radius:16px; }
  /* Must match the ID-scoped rules above, or they outrank this and the card
     keeps its 24px inset on a 335px screen. */
  #gform_wrapper_9 .gfield--type-multicurrency,
  #gform_wrapper_9 .gfield--type-product,
  #gform_wrapper_9 .gfield--type-total{ padding-left:16px !important; padding-right:16px !important; }
}

/* Gravity Forms prints a "* indicates required fields" summary above the
   first field. The mock has no such line, but removing it would leave the
   amber asterisks unexplained for anyone reading the form linearly, so it is
   kept and set as quiet fine print instead. */
body.gac-home .gac-formcard .gform_required_legend{
  grid-column:1 / -1;
  font-size:12.5px; color:#6E5C7A; margin:0 0 4px; padding:0;
}
body.gac-home .gac-formcard .gform_required_legend .gfield_required{
  font-size:12.5px;
}