/*
 * CRAIC Forms — RFI form.
 *
 * THIS SENTENCE USED TO NAME TOKENS THE THEME DOES NOT HAVE. It said the form "inherits the
 * theme's design tokens (--ink, --red-ink, --octagon, --rule, fonts, spacing) with literal
 * fallbacks" — and of those, only the fonts existed. --ink, --red-ink, --octagon, --rule,
 * --rule-firm, --mist, --ink-soft, --radius, --space-N and --step-N are declared in no
 * stylesheet, no template and no inline style, here or in the theme, so the fallback was what
 * painted, every time, on every install. The form was never inheriting anything.
 *
 * What that cost: the required-field marker painted #c9231a and the error text #c9231a — a
 * SECOND RED at dE 12.6 from the brand #EE2E24, on the page this site exists to funnel people
 * to. Four competing reds is the defect the rebuild was commissioned to fix. The focus ring
 * painted #4c5993, a blue, on a site whose palette is red, white and black.
 *
 * Now: the colours are the tokens style.css really declares (--red, --stage, --paper,
 * --dim-ink, --line-ink, --line-firm), each with a fallback equal to that token's value so the
 * plugin still renders correctly under a theme that has none of them. The spacing, radius and
 * type-scale names are gone — nothing declared them, so the fallback WAS the value, and it is
 * written as the value.
 */

.rfi {
  margin-top: 5rem;
  padding-top: 3.25rem;
  border-top: 1px solid var(--line-ink, rgba(13,14,16,.14));
  max-width: 44rem;
  scroll-margin-top: 6rem;
}

.rfi__title {
  font-size: 1.7rem;
  margin-bottom: 2rem;
}

.rfi__field {
  margin-bottom: 1.25rem;
}

.rfi__field label {
  display: block;
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--stage, #0D0E10);
}

/* THE REQUIRED MARK, AT A SIZE THE RED IS LEGAL AT. Measured by S-CONTRAST-59 across 284
   pages: #EE2E24 on white at 14.72px/600 is 4.16:1, and normal-size text needs 4.5:1 — 18
   runs of it, the asterisk beside every required field on the form. The red cannot be
   darkened: #EE2E24 is the ONE red on this site and a second one is the exact defect this
   rebuild exists to correct. WCAG's large-text threshold is 3:1 and starts at 18.66px bold,
   so 19px/700 clears it at the same colour — the same floor this project already applies
   wherever it sets type in the brand red. It also makes the mark easier to see, which is the
   thing the ratio was standing in for. */
.rfi__req {
  color: var(--red, #EE2E24);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.rfi__field input,
.rfi__field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-firm, rgba(13,14,16,.22));
  border-radius: 2px;
  background: var(--paper, #fff);
  color: var(--stage, #0D0E10);
}

.rfi__field textarea { resize: vertical; min-height: 7rem; }

.rfi__field input:focus-visible,
.rfi__field textarea:focus-visible {
  outline: 2px solid var(--stage, #0D0E10);
  outline-offset: 1px;
  border-color: var(--stage, #0D0E10);
}

.rfi__field input[readonly] {
  background: var(--paper, #F4F4F5);
  color: var(--dim-ink, #585B63);
  cursor: default;
}

.rfi__field input[aria-invalid="true"],
.rfi__field textarea[aria-invalid="true"] {
  border-color: var(--red, #EE2E24);
}

/* THE RED IS THE RULE, NOT THE WORDS. This was 14px type in a second red (#c9231a), which
   measures 4.3:1 on white — under the 4.5:1 floor for body text — and the brand red itself is
   3.94:1, so there is no red on this site that can legally set a sentence this size. The site's
   own answer, stated in style.css above the button rules, is that red is a surface and a mark
   and near-black is the ink: white goes ON the red, and red as ink needs 19px/700. So the
   message is set in the ink every other sentence uses (18.9:1) and the red does the signalling
   as a 3px rule beside it, where the 3:1 non-text floor applies and #EE2E24 clears it. */
.rfi__err {
  margin: 0.4rem 0 0;
  padding-inline-start: 0.55rem;
  border-inline-start: 3px solid var(--red, #EE2E24);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--stage, #0D0E10);
}

.rfi__errors {
  border: 1px solid var(--red, #EE2E24);
  border-left-width: 3px;
  border-radius: 2px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  background: color-mix(in srgb, var(--red, #EE2E24) 5%, transparent);
}
.rfi__errors p { margin: 0 0 0.5rem; font-weight: 600; }
.rfi__errors ul { margin: 0; padding-left: 1.1rem; }
/* Same reason as .rfi__err: the panel's own red border carries the signal, the link carries the
   words, and a link in a red that cannot make 4.5:1 is a link somebody cannot read. */
.rfi__errors a { color: var(--stage, #0D0E10); }

.rfi__success {
  border-left: 3px solid var(--red, #EE2E24);
  padding-left: 1.25rem;
}
.rfi__success:focus-visible { outline: none; }

/* Honeypot: removed from the visual and a11y tree, still in the DOM for bots.
   This is a FALLBACK — the authoritative rule is inline on the element, because a honeypot whose
   only defence is an external stylesheet becomes a visible text box the moment that stylesheet
   fails to load, and a customer who types in it gets quarantined.
   display:none, not off-screen positioning: an off-screen field is still rendered and can be filled
   by a password manager's identity autofill. */
.rfi__hp {
  display: none !important;
}

/* The plugin reuses the theme's .btn/.eyebrow; provide a minimal fallback if absent. */
.rfi .btn:not([class*="btn--"]) {
  display: inline-block;
  font: 600 0.95rem var(--font-display, system-ui);
  background: var(--red, #EE2E24);
  color: #fff;
  padding: 0.75rem 1.3rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Form BESIDE content (contact page), rather than below it.
   The default rule + 5rem top margin exist to separate the form from content that precedes it in
   the flow. On the contact page the theme places the form in its own grid column, where that
   separator instead draws a line across the top of the column and pushes the form down.

   The form is the page's whole purpose, but as bare fields beside a tall column of contact detail it
   read as an afterthought floating top-right, with an L-shaped void beneath it. Give it a mist
   plate — the same panel treatment the CTA cards and figures use — so it reads as the deliberate,
   primary action and its column no longer looks empty.

   This lives here, not in the theme: craic-forms.css is unlayered, so a theme rule inside
   @layer content loses to it no matter how specific it is.
   ------------------------------------------------------------------------ */
.entry-content:has(> .rfi) > .rfi {
  margin: 0;
  border-top: 0;
  max-width: none;
  background: var(--paper, #F4F4F5);
  border-radius: 2px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-self: start;
}
/* the plate already supplies the paper contrast; keep field borders crisp against mist */
.entry-content:has(> .rfi) > .rfi .rfi__field input,
.entry-content:has(> .rfi) > .rfi .rfi__field textarea {
  background: var(--paper, #fff);
}

/* The "no web links" hint sits under the message box, quiet until the script has something to say. */
.rfi__hint {
  margin: .35rem 0 0;
  font-size: .875rem;
  opacity: .75;
}