/* ==========================================================================
   Spectrum IT Hub — form fields and validation
   --------------------------------------------------------------------------
   Layout of a row (label left, control right) lives in responsive.css. This
   file is the surface treatment and the validation state.

   WHY ERRORS ARE A data-* ATTRIBUTE AND A ::after
   The message cannot be a node appended by script: these pages are
   React-rendered and any element the renderer did not create is liable to be
   removed on the next re-render (opening the menu is enough). A data attribute
   survives, because React leaves data-* it did not render alone — so the
   message is written into `data-err` and drawn by CSS.
   ========================================================================== */

.frm-field {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  /* A warm edge, not a white one: at 16% white the fields read as grey boxes
     on a grey card and all but vanish. Same accent as the tiles, held low so
     a column of eight does not look like a row of warnings. */
  border: 1px solid rgba(232, 181, 71, 0.30);
  color: #F7F6F3;
  padding: 15px 16px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  transition: border-color 220ms ease, background 220ms ease;
}

.frm-field::placeholder { color: #7E8492; }

/* ONE ring on focus, not three.
   A focused field drew its own gold border, a 3px halo from here, AND a 2px
   outline at 1px offset from a11y.css — border, halo, gap, outline. That reads
   as a thick triple line and does not belong on a site this square-cornered.
   The halo is gone: the border brightens, the surface lifts, and keyboard
   focus adds a single crisp outline flush to the edge. */
.frm-field:focus {
  outline: none;
  background: rgba(232, 181, 71, 0.07);
  border-color: #E8B547;
}

/* --- Selects and the file input ------------------------------------------
   Native controls look wrong on a dark square-cornered form, and a native
   select on a dark page renders black-on-white in most browsers. The chevron
   is drawn with background gradients rather than an element, so there is
   nothing for the renderer to wipe (HANDOFF 6.7). */
select.frm-field {
  appearance: none;
  -webkit-appearance: none;
  /* Belt and braces alongside the :root declaration in a11y.css. The option
     list is drawn by the OS and CSS cannot reach into it; this is what makes it
     open dark instead of inheriting a light-mode system theme. */
  color-scheme: dark;
  background-image: linear-gradient(45deg, transparent 50%, #E8B547 50%),
                    linear-gradient(135deg, #E8B547 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

/* Honoured by Firefox and by Chrome on Windows and Linux; macOS draws its own
   popup and ignores them. Harmless where unsupported, correct where it is. */
select.frm-field option { background: #12141A; color: #F7F6F3; }
select.frm-field option:checked { background: #E8B547; color: #07080B; }
select.frm-field option:disabled { color: #7E8492; }

/* The closed box, which we do control: gold warms on hover the way the tiles
   do, so a dropdown reads as the same material as everything else. */
select.frm-field:hover { border-color: rgba(232, 181, 71, 0.55); }
select.frm-field:hover { background-color: rgba(232, 181, 71, 0.05); }

input[type="file"].frm-field { padding: 12px 16px; cursor: pointer; font-size: 14px; }

input[type="file"].frm-field::file-selector-button {
  margin-right: 14px;
  background: rgba(232, 181, 71, 0.14);
  border: 1px solid rgba(232, 181, 71, 0.40);
  color: #E8B547;
  padding: 8px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Invalid --------------------------------------------------------------
   Only ever set after a field has been left, so nothing is marked wrong while
   it is still being typed into. */
/* Any control in a row that failed, not only .frm-field — the newsletter's
   email input is styled inline and carries no class, and it was showing the
   error text with no highlight on the box itself. */
.frm-row[data-err] .frm-field,
.frm-row[data-err] input,
.frm-row[data-err] textarea,
.frm-row[data-err] select {
  border-color: #D32027 !important;
  background-color: rgba(211, 32, 39, 0.06) !important;
}

/* Same for a consent tick, which has no box to outline. */
.frm-row[data-err] input[type="checkbox"],
.frm-indent[data-err] input[type="checkbox"] {
  outline: 2px solid #D32027;
  outline-offset: 2px;
}

.frm-row[data-err]::after,
.frm-indent[data-err]::after {
  content: attr(data-err);
  grid-column: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #E4767B;
  margin-top: -2px;
}

/* --- Submit ---------------------------------------------------------------
   THE BUTTON IS NEVER DISABLED, and that is deliberate.

   It used to dim to 42% and take `pointer-events: none` until every required
   field was filled. Two problems with that. A greyed-out button does not tell
   you WHY it is greyed out — you are left hunting for the field you missed.
   And because pointer-events was off, clicking it did literally nothing: no
   error, no highlight, no movement. The validation code that marks every field
   and writes the messages was sitting right there and could never run, because
   the click never reached it.

   Now the button always looks and behaves like a button. Pressing it on an
   incomplete form marks every missing field red, writes the reason under each
   one, and jumps to the first of them. */
[data-submit] { cursor: pointer; }

[data-submit][data-busy] { opacity: 0.5; pointer-events: none; }

[data-submit] { transition: opacity 220ms ease, background 220ms ease, color 220ms ease; }

/* --- Two-column layout ----------------------------------------------------
   The forms were one row per line, which made Contact 2808px — over three
   screens — for eleven fields. Rows now pair up. The card was widened from
   860px to 1140px first: at 860 a pair leaves about 234px per input once the
   150px label column is taken out, which is too narrow for an email or a
   street address. At 1140 each input gets roughly 390px and the label column
   is untouched, so the label-left look is exactly as it was.

   1140 is deliberate — it is already one of the container widths listed in
   responsive.css's page-gutter rules, so the card keeps its 28/20/16px gutters
   at every breakpoint instead of silently keeping the desktop 40px. */
.frm-grid { align-items: start; }

/* Anything that reads badly at half width: the message, the street address,
   the consent tick and the submit. */
.frm-wide { grid-column: 1 / -1; }

/* The consent label is a flex row, so the message needs its own line. */
.frm-indent[data-err] { flex-wrap: wrap; }
.frm-indent[data-err]::after { flex-basis: 100%; margin-left: 26px; }

@media (max-width: 760px) {
  .frm-row[data-err]::after { grid-column: 1; }
}

/* --- The reply the form gives you ----------------------------------------
   Same reasoning as the field errors above: written into a data-* attribute
   and drawn with ::after, never appended as a node, because the renderer will
   remove anything it did not create. */
[data-form][data-note]::after {
  content: attr(data-note);
  grid-column: 1 / -1;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 13px 15px;
  border-left: 2px solid currentColor;
}

[data-form][data-note-state="ok"]::after   { color: #7FC08B; background: rgba(127, 192, 139, 0.08); }
[data-form][data-note-state="warn"]::after { color: #E8B547; background: rgba(232, 181, 71, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .frm-field, [data-submit] { transition: none; }
}

/* Contact method cards and Register's three steps stack before they squash. */
@media (max-width: 900px) {
  .ct-cards, .reg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .ct-cards, .reg-steps { grid-template-columns: 1fr !important; }
}