/*
 * CRAIC Forms — RFI form. Inherits the theme's design tokens (--ink, --red-ink, --octagon,
 * --rule, fonts, spacing) with literal fallbacks so the plugin also renders sanely if used
 * under a different theme.
 */

.rfi {
  margin-top: var(--space-6, 5rem);
  padding-top: var(--space-5, 3.25rem);
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  max-width: 44rem;
  scroll-margin-top: 6rem;
}

.rfi__title {
  font-size: var(--step-2, 1.7rem);
  margin-bottom: var(--space-4, 2rem);
}

.rfi__field {
  margin-bottom: var(--space-3, 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(--ink, #14161b);
}

.rfi__req { color: var(--red-ink, #c9231a); }

.rfi__field input,
.rfi__field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-firm, rgba(0, 0, 0, 0.22));
  border-radius: var(--radius, 2px);
  background: var(--paper, #fff);
  color: var(--ink, #14161b);
}

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

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

.rfi__field input[readonly] {
  background: var(--mist, #f2f3f6);
  color: var(--ink-soft, #555);
  cursor: default;
}

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

.rfi__err {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--red-ink, #c9231a);
}

.rfi__errors {
  border: 1px solid var(--red-ink, #c9231a);
  border-left-width: 3px;
  border-radius: var(--radius, 2px);
  padding: var(--space-3, 1.25rem);
  margin-bottom: var(--space-4, 2rem);
  background: color-mix(in srgb, var(--red-ink, #c9231a) 5%, transparent);
}
.rfi__errors p { margin: 0 0 0.5rem; font-weight: 600; }
.rfi__errors ul { margin: 0; padding-left: 1.1rem; }
.rfi__errors a { color: var(--red-ink, #c9231a); }

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

/* Honeypot: removed from the visual and a11y tree, still in the DOM for bots. */
.rfi__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 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-ink, #c9231a);
  color: #fff;
  padding: 0.75rem 1.3rem;
  border: 0;
  border-radius: var(--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(--mist, #f2f3f6);
  border-radius: var(--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);
}