/* ═══════════════════════════════════════════════════════════════════════
   Public forms - the three listing requests and the contact enquiry.

   ACF ships a stylesheet for front-end forms that is built for the admin: a
   grey table of hairline-separated rows, admin blue focus rings, 13px labels.
   Dropped into this site it reads as a plugin bolted onto a page. Everything
   here is either an override of that or the part ACF does not style at all,
   and all of it is in site.css tokens so the forms move when the brand does.

   Loaded only on the four pages that carry a form, after acf-input, by
   goic_form_enqueue() in inc/forms.php.
   ═══════════════════════════════════════════════════════════════════ */

/* A form is a column of text to read and answer, so it is measured like one.
   The register forms are long and the contact form sits in a grid cell that is
   already narrow, hence the two widths. */
.wrap--narrow { max-width: 780px; }

/* The listing requests and the Center's submissions are long forms of mostly
   short answers, and 780px spent one field per row made them read as an
   interrogation: a column of half-empty boxes with the submit button a long
   scroll away. They get the page measure instead, and the field grid below
   uses the extra width to pair the short answers up rather than stretching
   every box across it. Login and the portal's reading views keep --narrow,
   where a single card at 780px is the right shape. */
.wrap--form { max-width: var(--maxw); }

.pagehead__back { margin-top: 1.4rem; font-size: 0.9rem; }
.pagehead__back a { color: var(--gold-300); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent); padding-bottom: 2px; }
.pagehead__back a:hover { color: #fff; border-bottom-color: #fff; }

/* ── the sheet ─────────────────────────────────────────────────────────── */

.goic-formwrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--corner-box);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}

/* On the contact page the form shares a row with the details card, which
   already carries a box of its own. A second identical box beside it reads as
   a duplicate, so this one keeps the padding and loses the frame. */
.goic-formwrap--inline { border: 0; padding: 0; background: transparent; }

.goic-formwrap__note {
  margin: 0 0 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ── ACF's own scaffolding, undone ─────────────────────────────────────── */

.goic-form { margin: 0; }
.goic-form .acf-fields,
.goic-form .acf-fields > .acf-field {
  border: 0;
  background: none;
}
.goic-form .acf-fields > .acf-field {
  padding: 0;
  margin: 0;
}

/* The field list was spaced with padding-bottom on every row, which meant the
   gap belonged to the field above it: a field that sets its own padding, or
   one hidden by a conditional rule, took its share of the spacing with it and
   the column lost its rhythm. Spacing is the grid's job now, so each field
   owns nothing but itself and can be hidden or reordered without leaving a
   hole. */
.goic-form .acf-form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  align-items: start;
}

/* Two columns once there is room for a label and its answer side by side.
   Every field spans both by default - a text answer, a textarea or a choice
   list wants the full measure - and only the ones marked short opt out. */
@media (min-width: 760px) {
  .goic-form .acf-form-fields { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }
  .goic-form .acf-form-fields > .acf-field { grid-column: 1 / -1; }
  .goic-form .acf-form-fields > .goic-field--half { grid-column: span 1; }
}

.goic-form .acf-field .acf-label { margin-bottom: 0.4rem; padding: 0; }

.goic-form .acf-field .acf-label label {
  display: block;
  margin: 0;
  font-weight: 550;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}

.goic-form .acf-required { color: var(--gold-700); margin-left: 0.15rem; }

.goic-form .acf-field .acf-label p.description {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-3);
  font-style: normal;
}

.goic-form .acf-field .acf-input { margin: 0; }
.goic-form .acf-field .acf-input > p.description { margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-3); }

/* ── controls ──────────────────────────────────────────────────────────── */

.goic-form input[type="text"],
.goic-form input[type="email"],
.goic-form input[type="url"],
.goic-form input[type="number"],
.goic-form input[type="tel"],
.goic-form input[type="date"],
.goic-form textarea,
.goic-form select {
  width: 100%;
  max-width: 100%;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--corner-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.45;
  box-shadow: none;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.goic-form textarea { min-height: 8.5rem; resize: vertical; }

/* The native select arrow is drawn per-platform and none of the platforms draw
   it in the brand blue, so appearance is off above and this is the arrow. */
.goic-form select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23094A75' stroke-width='1.8'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.05rem;
}

.goic-form input:focus,
.goic-form textarea:focus,
.goic-form select:focus,
.goic-form input[type="file"]:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 18%, transparent);
}

.goic-form input::placeholder,
.goic-form textarea::placeholder { color: color-mix(in srgb, var(--ink-3) 70%, transparent); }

/* A number is answered with two or three digits, and a full-width box invites
   a sentence - so the box is capped, but only while the field still has the
   whole row to itself. Once it is sharing a row as a .goic-field--half the
   column is already the cap, and a second limit inside it just leaves the
   control floating in white space beside its neighbour. */
.goic-form .acf-field-number .acf-input input[type="number"] { max-width: 11rem; }
@media (min-width: 760px) {
  .goic-form .goic-field--half .acf-input input[type="number"] { max-width: 100%; }
}

/* ── radios and checkboxes ─────────────────────────────────────────────── */

.goic-form .acf-radio-list,
.goic-form .acf-checkbox-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

/* ACF's own clearfix, from acf-global.min.css:

     .acf-bl:before, .acf-bl:after { content: ""; display: block; line-height: 0 }

   and ACF puts .acf-bl on every one of these lists. It is a clearfix for items
   that float, which these stopped doing the moment the rule above made the list
   a grid - and in a grid a generated ::before is not a clearfix, it is a grid
   item. It took the first cell, so every option moved one place along: the
   first choice sat alone in the right-hand column with a hole beside it, and
   the last choice fell onto a row of its own. ::after left a second empty cell
   at the end. Reported 2026-09-17, on the assessor form, as the "Certified
   Assessor For" boxes falling instead of sitting side by side.

   Turned off rather than reshaped, because there is nothing to clear. */
.goic-form .acf-radio-list::before,
.goic-form .acf-radio-list::after,
.goic-form .acf-checkbox-list::before,
.goic-form .acf-checkbox-list::after { content: none; }

/* Choice lists get long. Two columns from the width where a label still fits
   on one line.

   This used to name only the checkbox lists, so a radio list of the same
   twenty options stacked in one tall column right beside a checkbox list that
   had split into two - the two controls look identical and behaved
   differently for no reason a reader could see. Both are listed now.

   The exception is a list sitting in a half-width field: it has half the room,
   so it stays in one column and the rule below puts it back. */
.goic-form .acf-radio-list,
.goic-form .acf-checkbox-list { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .goic-form .acf-field-taxonomy .acf-checkbox-list,
  .goic-form .acf-field-checkbox .acf-checkbox-list,
  .goic-form .acf-field-taxonomy .acf-radio-list,
  .goic-form .acf-field-radio .acf-radio-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .goic-form .goic-field--half .acf-radio-list,
  .goic-form .goic-field--half .acf-checkbox-list { grid-template-columns: 1fr; }
}

/* A list you can only give one answer to is not a scroller.

   ACF wraps a taxonomy field's terms in .categorychecklist-holder and caps it
   at 200px with overflow:auto. That is right for the 24 technology domains,
   which is why the cap is kept below - it is what keeps that field short enough
   for the .goic-chosen summary to sit beside. It is wrong for six countries: in
   one column six options are 310px, so half of them sat under the fold of an
   inner scroll area that has no edge, no shadow and nothing else to say it is
   scrollable. Found 2026-09-17 while cutting the country list to the GCC, which
   on its own would not have fixed it.

   Keyed on the role ACF writes on the <ul>: radiogroup where the field takes
   one answer, group where it takes several. So the country and ISIC sector
   lists show every option and the domains list keeps its cap. */
.goic-form .categorychecklist-holder:has(> ul[role="radiogroup"]) {
  max-height: none;
  overflow: visible;
}

.goic-form .acf-radio-list li,
.goic-form .acf-checkbox-list li { margin: 0; }

.goic-form .acf-radio-list label,
.goic-form .acf-checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--corner-chip);
  background: var(--surface-2);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.goic-form .acf-radio-list label:hover,
.goic-form .acf-checkbox-list label:hover { border-color: var(--blue-500); color: var(--ink); }

.goic-form .acf-radio-list label.selected,
.goic-form .acf-checkbox-list label.selected {
  border-color: var(--blue-600);
  background: color-mix(in srgb, var(--blue-600) 7%, var(--surface));
  color: var(--ink);
}

.goic-form input[type="radio"],
.goic-form input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.16rem 0 0;
  accent-color: var(--blue-700);
}

/* ── the running selection summary ─────────────────────────────────────── */

/* js/forms.js mirrors a multi-answer field's ticked labels in here, above the
   list. It needs no sticky: ACF's taxonomy list scrolls inside its own 200px
   .categorychecklist-holder rather than down the page, so the field is short
   and the summary sits beside the slot the terms scroll through. */
.goic-form .goic-chosen {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--corner-chip);
  /* Opaque: the checkboxes pass underneath it. */
  background: var(--surface);
}

.goic-form .goic-chosen__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.goic-form .goic-chosen__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.goic-form .goic-chosen__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.goic-form .goic-chosen__list li {
  margin: 0;
  padding: 0.22rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--blue-600) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-600) 9%, var(--surface));
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.goic-form .goic-chosen__none {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* ── the consent box ───────────────────────────────────────────────────── */

/* The declaration is the one control on the page that carries legal weight, so
   it is the one that does not look like the others: gold-edged, on a tint,
   sized for reading rather than for scanning. */
.goic-form .acf-field-true-false {
  border: 1px solid color-mix(in srgb, var(--gold-500) 42%, transparent);
  background: var(--gold-100);
  border-radius: var(--corner-box);
  margin-top: 0.8rem !important;
  padding: 1.1rem 1.2rem !important;
}
.goic-form .acf-field-true-false .acf-label { margin-bottom: 0.6rem; }
.goic-form .acf-field-true-false .acf-label label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.goic-form .acf-true-false { display: block; }
.goic-form .acf-true-false label,
.goic-form .acf-true-false .message {
  display: block;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.goic-form .acf-true-false input[type="checkbox"] { float: left; margin: 0.28rem 0.65rem 0 0; }

/* ── file and image fields ─────────────────────────────────────────────── */

.goic-form input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--blue-600) 38%, transparent);
  border-radius: var(--corner-btn);
  background: var(--surface-2);
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-2);
  cursor: pointer;
}
.goic-form input[type="file"]::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.42rem 0.9rem;
  border: 0;
  border-radius: var(--corner-chip);
  background: var(--blue-700);
  color: #fff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
}
.goic-form input[type="file"]:hover::file-selector-button { background: var(--blue-800); }

/* ── section headings ──────────────────────────────────────────────────── */

/* The message fields from group_goic_submit. They are the reason a form of
   thirty controls reads as five short forms instead of one long one. */
.goic-form .goic-formsection { padding-bottom: 0.9rem !important; }
.goic-form .goic-formsection .acf-label { display: none; }
.goic-form .goic-formsection h3 {
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-700);
}
/* No rule above the first one: it would draw a line immediately under the
   note that already ends in one. */
.goic-form .acf-fields > .goic-formsection:first-child h3 { padding-top: 0; border-top: 0; }

.goic-form .goic-formsection p {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── errors ────────────────────────────────────────────────────────────── */

.goic-form .acf-notice,
.goic-form .acf-error-message {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid color-mix(in srgb, #b3261e 34%, transparent);
  border-inline-start-width: 2px;
  border-radius: var(--corner-chip);
  background: color-mix(in srgb, #b3261e 6%, var(--surface));
  color: #8c1d18;
  font-size: 0.88rem;
  line-height: 1.55;
  text-shadow: none;
  box-shadow: none;
}
.goic-form .acf-notice p, .goic-form .acf-error-message p { margin: 0; }
.goic-form .acf-notice ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.goic-form .acf-notice .acf-notice-dismiss { display: none; }

.goic-form .acf-field.acf-error input[type="text"],
.goic-form .acf-field.acf-error input[type="email"],
.goic-form .acf-field.acf-error input[type="url"],
.goic-form .acf-field.acf-error textarea,
.goic-form .acf-field.acf-error select { border-color: #b3261e; }

.goic-form .acf-field .acf-error-message {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
}
.goic-form .acf-field .acf-error-message .acf-arrow { display: none; }

/* ── "add another" ─────────────────────────────────────────────────────── */

/* Sits in the field grid where the spare slot it reveals would have been, so
   it takes the full measure like the file fields above it rather than half a
   row. Quiet on purpose: it is an offer, not a step in the form. */
.goic-form .goic-form__more {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.5rem 0.95rem;
  border: 1px dashed var(--line);
  border-radius: var(--corner-btn);
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.goic-form .goic-form__more:hover,
.goic-form .goic-form__more:focus-visible {
  border-style: solid;
  color: var(--ink);
}

/* ── submit ────────────────────────────────────────────────────────────── */

.goic-form .acf-form-submit {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.goic-form .goic-form__submit { border: 0; }
.goic-form .goic-form__submit[disabled] { opacity: 0.55; cursor: progress; }

.goic-form .acf-spinner { display: none; }
.goic-form .acf-spinner.is-active,
.goic-form .acf-form-submit .acf-spinner[style*="visible"] { display: inline-block; }

/* ── the panels around the form ────────────────────────────────────────── */

.goic-done {
  border: 1px solid color-mix(in srgb, var(--blue-600) 26%, transparent);
  border-radius: var(--corner-box);
  background: color-mix(in srgb, var(--blue-600) 5%, var(--surface));
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}
.goic-done__mark { width: 2.4rem; height: 2.4rem; color: var(--blue-700); display: block; margin-bottom: 0.9rem; }
.goic-done h3 { margin: 0 0 0.55rem; font-size: 1.25rem; color: var(--ink); }
.goic-done p { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.7; }
.goic-done__actions { margin-top: 1.5rem !important; }

.goic-note {
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--gold-500);
  border-radius: var(--corner-chip);
  background: var(--gold-100);
  padding: 0.95rem 1.15rem;
  margin-bottom: 1.5rem;
}
.goic-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.goic-note a { color: var(--blue-700); }

/* Rejected submission. Read in a hurry by someone who has just been told their
   form did not go through, so it is louder than the warn note: a red rule, the
   count of problems in bold at the top, and the list itself indented under it.
   Deliberately not a colour-only signal - the lead line says what happened. */
.goic-note--error {
  border-left-color: #b3261e;
  background: #fdf3f2;
}
.goic-note--error:focus { outline: 2px solid #b3261e; outline-offset: 3px; }
.goic-note__lead {
  font-weight: 600 !important;
  color: #8c1d18 !important;
  font-size: 0.95rem !important;
}
.goic-note--error ul {
  margin: 0.6rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
}
.goic-note--error li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.goic-note__foot {
  margin-top: 0.7rem !important;
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}

/* The honeypot. Also hidden inline on the element itself, because a form that
   depends on a stylesheet loading to stay uncompromised is not much of a
   defence - this rule is the belt to that brace. Keep the two in step: the
   inline copy wins on specificity, so changing only this one changes nothing.

   Clipped, not displaced. This used to hide the field at left:-10000px, which
   is free in LTR because overflow to the left of the origin is not scrollable
   - but under direction:rtl the inline axis is mirrored, so those same ten
   thousand pixels land on the scrollable side and become real page width.
   Every Arabic form page scrolled sideways by about 9,000px (scrollWidth
   11287 against clientWidth 2056), and no English one did, which is why it
   went unnoticed. Clipping to nothing in place costs no layout in either
   direction. The field stays a real, rendered, submitted input - display:none
   would be simpler and would also tell a bot to skip it. */
.goic-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  .goic-form input,
  .goic-form textarea,
  .goic-form select,
  .goic-form .acf-radio-list label,
  .goic-form .acf-checkbox-list label { transition: none; }
}