/*
  The starter's Umbraco Forms theme "site" (Views/Partials/Forms/Themes/site/). Deliberately plain, like starter.css:
  a project restyles it with its design system's tokens. Uses only the starter's tokens (starter.css :root); mobile
  first. Errors have no colour of their own: they are bold text with a drawn "!" and the field gets a heavy border, so
  the state never depends on colour. Inputs and the button are at least 44 px tall.

  Section colours (MB-92): --starter-text is fixed once at :root, so a band (css/shared/themes.css) never changes it.
  The parts drawn in ink read these instead; outside a band and on light grounds they give the same colours as before.
  A site can set them on .site-form in its own CSS:
    --form-ink          errors, the invalid border, the summary and thank-you borders, the button, the ticks
                        (default: the section's text colour)
    --form-on-ink       the "!" and the button text, drawn on the ink (default: the page colour; on Dark and Darkest
                        sections the section's ground)
    --form-muted        help text and the "6 of 6 chosen" count (on Dark and Darkest: the section's text, softened)
    --form-error-badge  the "!" circle (default: the ink; on Dark and Darkest: the section's eyebrow colour)
    --form-focus        the focus ring on the button, file buttons, summary and thank-you boxes (default: the page's
                        focus blue; on Dark, Darkest and Bright the section's focus colour, as the fields get)
*/
.site-form {
  --form-ink: var(--color-text, var(--starter-text));
  --form-on-ink: var(--form-band-on-ink, var(--starter-background));
  --form-muted: var(--form-band-muted, var(--starter-muted));
  --form-error-badge: var(--form-band-badge, var(--form-ink));
  --form-focus: var(--form-band-focus, var(--starter-focus));
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 40rem;
}
/* Set on the section itself and cleared on every other one, so the nearest section wins (the side panel's light card
   inside a Darkest section keeps the light defaults). */
:where(.section-colour) { --form-band-on-ink: initial; --form-band-muted: initial; --form-band-badge: initial; --form-band-focus: initial; }
:where(.section-colour).band--dark, :where(.section-colour).band--deep {
  --form-band-on-ink: var(--band-bg);
  --form-band-muted: color-mix(in srgb, var(--band-text) 80%, var(--band-bg));
  --form-band-badge: var(--band-eyebrow);
}
/* Light sections keep the page's blue on these parts (UX-MB92 U1 asked for no change there). */
:where(.section-colour).band--dark, :where(.section-colour).band--deep, :where(.section-colour).band--accent { --form-band-focus: var(--band-focus); }

.site-form__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.site-form__fieldset-caption { padding: 0; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; }
.site-form__fields { display: flex; flex-direction: column; gap: 1.25rem; }

.site-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.site-form__group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.site-form__label { font-weight: 700; padding: 0; }
.site-form__required { font-weight: 400; }
.site-form__help { margin: 0; color: var(--form-muted); font-size: 0.9375rem; }

.site-form__control input[type="text"],
.site-form__control input[type="email"],
.site-form__control input[type="tel"],
.site-form__control input[type="number"],
.site-form__control input[type="url"],
.site-form__control input[type="date"],
.site-form__control select,
.site-form__control textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--starter-text);
  background: var(--starter-background);
  border: 1px solid var(--starter-muted);
  border-radius: 0.25rem;
}
.site-form__control textarea { min-height: 8rem; resize: vertical; }

/* Choices: each option at least 44 px tall. */
.site-form__control .radiobuttonlist,
.site-form__control .checkboxlist { display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__control .radiobuttonlist label,
.site-form__control .checkboxlist label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.site-form__control input[type="radio"],
.site-form__control input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--form-ink); }

/* Errors: next to the field, bold with a drawn "!" (never colour alone). */
.site-form__error:empty { display: none; }
.site-form__error,
.site-form .field-validation-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--form-ink);
}
.site-form__error:not(:empty)::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--form-error-badge);
  color: var(--form-on-ink);
  font-size: 0.8125rem;
  line-height: 1;
}
.site-form .input-validation-error { border-width: 3px; border-color: var(--form-ink); }

/* Text-only notes (e.g. the privacy note) and the privacy line. */
.site-form__note p { margin: 0; }
.site-form__note-title { font-weight: 700; }
.site-form__privacy { margin: 0; }

.site-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.site-form__submit {
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--form-on-ink);
  background: var(--form-ink);
  border: 2px solid var(--form-ink);
  border-radius: 0.25rem;
  cursor: pointer;
}
.site-form__submit:focus-visible { outline: 3px solid var(--form-focus, var(--starter-focus)); outline-offset: 3px; }
.site-form__submit[aria-disabled="true"] { cursor: progress; }
.site-form__status { margin: 0; }

/* MB-139 (FCM-5, from FuelChief's contact strip, captured CSS): the form's "Two fields a row". From 992px short fields (short
   answers and drop-downs, site-form__field--half) sit two to a row 6px apart, labels kept above them; every other field
   takes the whole row. Below 992px one field a row, as without the switch. */
@media (min-width: 992px) {
  .site-form--two .site-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .site-form--two .site-form__fields > * { grid-column: 1 / -1; min-width: 0; }
  .site-form--two .site-form__fields > .site-form__field--half { grid-column: auto; }
}
/* MB-139: a label kept for screen readers only (the footer's one email box writes its words in the box). */
.site-form__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* FORMS-13: "6 of 6 chosen" under a Checkboxes field with At most, and the boxes left over once the limit is reached. */
.site-form__count { margin: 0; color: var(--form-muted); font-size: 0.9375rem; }
.site-form__option--off { opacity: 0.55; cursor: not-allowed; }

/* FORMS-13: the file field with script: an outline button like the inputs, then the chosen files with Remove buttons.
   Without script the browser's own input shows (the rule above never hides it). */
.site-form__file-button,
.site-form__file-remove {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--starter-text);
  background: var(--starter-background);
  border: 1px solid var(--starter-muted);
  border-radius: 0.25rem;
  cursor: pointer;
  align-self: flex-start;
}
.site-form__file-button { font-weight: 700; border-width: 2px; border-color: var(--starter-text); }
.site-form__file-button:focus-visible,
.site-form__file-remove:focus-visible { outline: 3px solid var(--form-focus, var(--starter-focus)); outline-offset: 3px; }
.site-form__control input[type="file"][aria-invalid="true"] + .site-form__file-button { border-width: 3px; }
.site-form__files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__files[hidden] { display: none; }
.site-form__file { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.site-form__file-name { overflow-wrap: anywhere; }
.site-form__control:has(.site-form__file-button) { display: flex; flex-direction: column; }
.site-form__status:empty { display: none; }

.site-form .umbraco-forms-hidden,
.umbraco-forms-hidden { display: none; }
.site-form .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The message shown after sending (Forms' "message on submit"). */
.umbraco-forms-submitmessage { display: block; padding: 1rem; border: 2px solid var(--form-ink, var(--color-text, var(--starter-text))); border-radius: 0.25rem; }

/* Forms built in Content (FORMS-1, Views/Partials/SiteForms/Form.cshtml): the error summary, the thank-you, the trap field. */
.site-form__summary { padding: 1rem; border: 3px solid var(--form-ink); border-radius: 0.25rem; }
.site-form__summary:focus-visible { outline: 3px solid var(--form-focus, var(--starter-focus)); outline-offset: 3px; }
.site-form__summary-title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.site-form__summary ul { margin: 0; padding-left: 1.25rem; }
.site-form__summary a { color: inherit; font-weight: 700; }
.site-form__options { display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.site-form__option input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--form-ink); }
.site-form__thanks { padding: 1rem; border: 2px solid var(--form-ink, var(--color-text, var(--starter-text))); border-radius: 0.25rem; }
.site-form__thanks:focus-visible { outline: 3px solid var(--form-focus, var(--form-band-focus, var(--starter-focus))); outline-offset: 3px; }
.site-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/*
  Form section, Layout "Side panel" (MB-14; contract umbraco/blocks/siteFormBlock.md; markup SiteForms/FormSidePanel.cshtml).
  Mobile first: panel, then the form card; from 1024 px two equal columns, the panel's buttons at the bottom of its
  column. Edge to edge like the Hero. Over a photo the view uses the Darkest section colour and a dark layer.
  A site restyles it through these variables in its own tokens:
    --form-panel-overlay    the layer over the photo (default: the Darkest colour at 70 %)
    --form-panel-highlight  the colour of the highlighted words (default: the section's eyebrow colour)
    --form-panel-card-bg    the form card's ground (default: the Page colour's ground)
  "Form only" (.form-block without --panel) has no styles here: it is unchanged.
  Scoped (MB-24): every part rule sits under :where(.form-block--panel), so a site's own forms that reuse names like
  .form-block__inner are never restyled; :where() keeps each rule's specificity as it was.
*/
.form-block--panel {
  --form-panel-overlay: color-mix(in srgb, var(--theme-deep-bg) 70%, transparent);
  --form-panel-highlight: var(--color-eyebrow);
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
body:has(.form-block--panel) { overflow-x: clip; }
:where(.form-block--panel) .form-block__media { position: absolute; inset: 0; z-index: -1; }
:where(.form-block--panel) .form-block__media picture,
:where(.form-block--panel) .form-block__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-block--on-media .form-block__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--form-panel-overlay);
}
:where(.form-block--panel) .form-block__inner {
  display: grid;
  gap: var(--space-10);
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--page-gutter);
}
:where(.form-block--panel) .form-block__panel { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
:where(.form-block--panel) .form-block__heading {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}
:where(.form-block--panel) .form-block__eyebrow + .form-block__heading { margin-top: var(--space-4); }
:where(.form-block--panel) .form-block__highlight { color: var(--form-panel-highlight); }
:where(.form-block--panel) .form-block__text p { margin: var(--space-5) 0 0; line-height: var(--lh-body); }
:where(.form-block--panel) .form-block__buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
:where(.form-block--panel) .form-block__card {
  --form-panel-card-bg: var(--band-bg);
  min-width: 0;
  background: var(--form-panel-card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
:where(.form-block--panel) .form-block__card .form-block__intro { margin: 0 0 var(--space-6); line-height: var(--lh-body); }
:where(.form-block--panel) .form-block__card .site-form { max-width: none; }

@media (min-width: 1024px) {
  :where(.form-block--panel) .form-block__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    align-items: stretch;
    padding-block: calc(var(--section-space) * 2);
  }
  :where(.form-block--panel) .form-block__panel { justify-content: space-between; }
  :where(.form-block--panel) .form-block__card { padding: var(--space-10); }
}

/*
  Side panel with "Contact details beside the form" (MB-134, FuelChief's contact strip; .form-block--contacts). As the
  original: the heading across the top (the panel takes the left column), then the contact list on the left and the form
  card on the right from 768 px; the list in two columns from 1200 px. Phones: heading, form, then the list (order), the
  heading centred below 992 px. Each item: a small upper-case label over a rule, then the value with a 20 px icon in the
  link colour. Gaps from the original (100/50/25 px between columns, 75/50 px under the heading, 50/25 px between items,
  30/10 px under a label) on the nearest tokens.
*/
:where(.form-block--contacts) .form-block__contacts {
  display: grid;
  gap: var(--space-6);
  order: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: start;
  min-width: 0;
}
:where(.form-block--contacts) .form-block__contact { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
:where(.form-block--contacts) .form-block__contact-label {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-heading);
}
:where(.form-block--contacts) .form-block__contact-value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
:where(.form-block--contacts) a.form-block__contact-value { color: var(--color-link); text-decoration: none; }
:where(.form-block--contacts) a.form-block__contact-value:hover { text-decoration: underline; }
:where(.form-block--contacts) .form-block__contact-address { align-items: flex-start; color: var(--color-text); }
:where(.form-block--contacts) .form-block__contact-icon { flex: none; width: 20px; height: 20px; color: var(--color-link); }
@media (max-width: 991.98px) {
  :where(.form-block--contacts) .form-block__copy { text-align: center; }
}
@media (min-width: 768px) {
  :where(.form-block--contacts) .form-block__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "panel ." "contacts card";
    gap: var(--space-12);
    align-items: start;
  }
  :where(.form-block--contacts) .form-block__panel { grid-area: panel; }
  :where(.form-block--contacts) .form-block__contacts { grid-area: contacts; }
  :where(.form-block--contacts) .form-block__card { grid-area: card; }
}
@media (min-width: 1200px) {
  :where(.form-block--contacts) .form-block__contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.form-block--contacts) .form-block__contact { gap: var(--space-8); }
  :where(.form-block--contacts) .form-block__contact-label { font-size: var(--fs-body); }
}
@media (min-width: 1400px) {
  :where(.form-block--contacts) .form-block__inner { gap: var(--space-20) var(--space-24); }
  :where(.form-block--contacts) .form-block__contacts { gap: var(--space-12); }
}

/*
  Form, Layout "Form with details beside it" (MB-38, from Boyd's Form side panel; Views/Partials/SiteForms/FormDetails.cshtml).
  Mobile first: heading, intro, form, then the panel. From 1024 px the form takes 8 of 12 columns and the panel the other 4,
  staying in view while the form scrolls. The panel is a calm card in the quiet surface colour. Scoped under
  :where(.form-block--details) like the side panel (MB-24). Site hook: --form-details-sticky-top.
*/
:where(.form-block--details) .form-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--page-gutter);
}
:where(.form-block--details) .form-block__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
:where(.form-block--details) .form-block__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
:where(.form-block--details) .form-block__intro { margin: 0; line-height: var(--lh-body); }
:where(.form-block--details) .form-block__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-card, var(--radius-media));
  background: var(--color-surface-quiet);
  color: var(--color-text);
}
:where(.form-block--details) .form-block__details-heading { margin: 0; font-size: var(--fs-h4, 1.25rem); line-height: var(--lh-heading); }
:where(.form-block--details) .form-block__office-card { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.form-block--details) .form-block__office-card + .form-block__office-card { padding-top: var(--space-4); border-top: var(--border-width) solid color-mix(in srgb, currentColor 20%, transparent); }
:where(.form-block--details) .form-block__office { display: flex; flex-direction: column; gap: var(--space-1); font-style: normal; }
:where(.form-block--details) .form-block__office-name { font-weight: var(--fw-bold); }
:where(.form-block--details) .form-block__phone { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap-min); }
:where(.form-block--details) .form-block__office-card .office-directions { align-self: flex-start; padding: 0; }
:where(.form-block--details) .form-block__office-card .office-map { margin-top: 0; }
:where(.form-block--details) .form-block__reply { margin: 0; font-weight: var(--fw-bold); }
:where(.form-block--details) .form-block__steps { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); line-height: var(--lh-body); }
:where(.form-block--details) .form-block__steps li::marker { font-weight: var(--fw-bold); }
:where(.form-block--details) .form-block__details-text { margin: 0; line-height: var(--lh-body); }
@media (min-width: 600px) { :where(.form-block--details) .form-block__details { padding: var(--space-10) var(--space-8); } }
@media (min-width: 1024px) {
  :where(.form-block--details:not(.form-block--details-no-panel)) .form-block__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); }
  :where(.form-block--details:not(.form-block--details-no-panel)) .form-block__main { grid-column: 1 / span 8; }
  :where(.form-block--details) .form-block__details { grid-column: 9 / span 4; position: sticky; top: var(--form-details-sticky-top, var(--space-24)); }
}

/*
  Form tabs (MB-38, from Boyd's Contact tabs; markup in Views/Partials/blocklist/default.cshtml, js/blocks/formTabs.js).
  Without script: a row of pill links that jump to each form. With script: the open tab is a filled pill and only its
  panel shows. Pills 44 px high, wrapping on phones.
*/
.form-tabs__nav {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--page-gutter) 0;
}
.form-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.form-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.form-tabs__tab:hover { text-decoration: underline; }
.form-tabs__tab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.form-tabs--enhanced .form-tabs__tab[aria-selected="true"] { border-color: var(--btn-1-bg, #1f3a5f); background: var(--btn-1-bg, #1f3a5f); color: var(--btn-1-fg, #ffffff); }
.form-tabs__panel[hidden] { display: none; }
.form-tabs__panel { scroll-margin-top: var(--space-24); }
.form-tabs__panel:focus { outline: none; }
.form-tabs__panel > .form-block:not(.form-block--panel) { margin-top: 0; }