/* Full Consolidation A1 — public enquiry forms.
 * Self-contained styling ported from out-sauce (brand-tokens.css + BrandLayout +
 * FieldRenderer + the form/thanks pages). Scoped to the three /enquiry pages via
 * the `enquiry` layout, so it carries its own --os-* / --batch tokens rather than
 * leaning on the portal's brand.css. No em dashes in any user-facing copy here;
 * this file is CSS only.
 */

:root {
  /* Batch colours (cycled by the layout's inline script) */
  --os-aqua: #00F5D4;
  --os-lilac: #C4A8FF;
  --os-peach: #FFBE98;
  --os-blue: #6B8CFF;
  --os-coral: #FF6B6B;
  --batch: var(--os-aqua);
  /* Batch colour as TEXT on white (the required *): 45% with black (PHONE-3a, D17) */
  --batch-ink: color-mix(in srgb, var(--batch) 45%, #000);

  /* Backgrounds */
  --os-dark: #0A0A0A;
  --os-white: #FFFFFF;

  /* Text */
  --os-body-text: #4A4E5A;
  --os-light-grey: #E5E7EB;
  --os-mid-grey: #9CA3AF;

  /* System UI */
  --os-success: #34D399;

  /* Typography */
  --os-font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --os-font-label: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --os-font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Motion */
  --os-transition: 0.5s ease;
}

.enquiry-body {
  margin: 0;
  min-height: 100vh;
  background: var(--os-dark);
  font-family: var(--os-font-body);
  color: var(--os-body-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  box-sizing: border-box;
}

.enquiry-body *,
.enquiry-body *::before,
.enquiry-body *::after {
  box-sizing: border-box;
}

.enquiry-page {
  background: var(--os-white);
  width: 100%;
  max-width: 794px;
  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.t {
  transition:
    background-color var(--os-transition),
    color var(--os-transition),
    border-color var(--os-transition);
}

.enquiry-body a { color: inherit; }

/* Hero — solid batch-colour block at the top of the white card (ported 1:1
   from out-sauce Hero.astro). Black text on the batch colour, with the OS
   monogram + wordmark; title and subtitle are both the big display headline. */
.hero {
  background: var(--batch);
  padding: 40px 48px 44px;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 24px;
}
.hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.os-monogram {
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--os-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--os-font-display);
  font-size: 16px;
  color: var(--os-dark);
  letter-spacing: 0.02em;
  line-height: 1;
}
.wordmark {
  font-family: var(--os-font-display);
  font-size: 15px;
  color: var(--os-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.hero-meta {
  font-family: var(--os-font-label);
  font-size: 11px;
  font-weight: 500;
  color: var(--os-dark);
  margin-bottom: 10px;
}
.hero-title {
  font-family: var(--os-font-display);
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--os-dark);
  text-transform: uppercase;
  margin: 0;
}

/* The white form/thanks body below the hero. */
.page-body {
  padding: 40px 48px;
}

/* Contact block — dark band below the body (ported from ContactBlock.astro). */
.contact-block {
  background: var(--os-dark);
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.contact-heading-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 6px;
}
.contact-heading {
  font-family: var(--os-font-display);
  font-size: 18px;
  color: var(--os-white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}
.contact-cta {
  font-family: var(--os-font-display);
  font-size: 14px;
  color: var(--batch);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
}
.contact-cta:hover,
.contact-cta:focus-visible {
  color: var(--os-white);
  outline: none;
}
.contact-line {
  font-family: var(--os-font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.contact-line:last-child { margin-bottom: 0; }
.contact-line a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--os-transition);
}
.contact-line a:hover { color: var(--batch); }
.contact-line .label {
  font-family: var(--os-font-label);
  font-size: 11px;
  font-weight: 500;
  color: var(--batch);
  margin-right: 8px;
}

/* Footer — white legal strip (ported from Footer.astro). */
.enquiry-footer {
  background: var(--os-white);
  padding: 18px 48px;
  border-top: 1px solid var(--os-light-grey);
}
.enquiry-footer-legal {
  font-family: var(--os-font-body);
  font-size: 11px;
  color: var(--os-mid-grey);
  text-align: center;
}
.enquiry-footer-links {
  margin-top: 6px;
  font-family: var(--os-font-body);
  font-size: 11px;
  color: var(--os-mid-grey);
  text-align: center;
}
.enquiry-footer-links a {
  color: var(--os-mid-grey);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enquiry-footer-links a:hover { color: var(--os-ink, #1A1F24); }

/* Top-of-form error summary + flash */
.form-error {
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 2px solid var(--os-coral);
  background: rgba(255, 107, 107, 0.08);
  font-family: var(--os-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--os-dark);
}
.form-error-heading { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.form-error-list { list-style: none; margin: 0; padding: 0; }
.form-error-list li {
  padding-left: 18px;
  position: relative;
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--os-dark);
}
.form-error-list li::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--os-coral);
  font-size: 13px;
}
.form-error-list strong { font-weight: 600; }
.form-error-msg { display: block; font-weight: 400; color: var(--os-body-text); margin-top: 2px; }

.form-pre-info {
  margin-bottom: 24px;
  font-family: var(--os-font-body);
  font-size: 13px;
  color: var(--os-mid-grey);
}
.form-pre-info a {
  color: var(--os-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Honeypot: off-screen, tab-skipped (03 §A3) */
.hp-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-footer { margin-top: 40px; }
.form-consent {
  margin: 0 0 18px;
  font-family: var(--os-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--os-mid-grey);
}
.turnstile-wrap { margin: 0 0 24px; }

.submit {
  display: block;
  width: 100%;
  font-family: var(--os-font-display);
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--os-dark);
  background: var(--batch);
  border: 2px solid var(--os-dark);
  padding: 24px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.submit:hover,
.submit:focus-visible { background: var(--os-dark); color: var(--batch); outline: none; }

/* ── Fields (ported from FieldRenderer.astro) ─────────────────────────────── */
.field { padding-top: 32px; }
.field + .field { border-top: 1px solid var(--os-light-grey); margin-top: 32px; }
.field:first-of-type { padding-top: 0; }
/* HIGHLIGHTS-31: a failed question marks its own control, all the way round, and says why
   underneath. No left bar and no hang into the margin (index D2, P17). These rules sit HERE, above
   the control rules, so :focus / :hover / :checked / .has-file below still win their ties. */
.field--error .field-meta { color: var(--os-coral); }
.field--error .input,
.field--error .tile-mark,
.field--error .multi-box,
.field--error .file-drop { border-color: var(--os-coral); }
.field-error-msg {
  margin: 10px 0 0;
  font-family: var(--os-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--os-dark);
}

.field-meta {
  font-family: var(--os-font-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--os-dark);
  margin-bottom: 10px;
}
.field-label {
  display: block;
  font-family: var(--os-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--os-dark);
  line-height: 1.4;
  margin-bottom: 4px;
}
.required { color: var(--batch-ink); margin-left: 4px; font-weight: 700; }

.field-desc {
  font-family: var(--os-font-body);
  font-size: 13.5px;
  color: var(--os-body-text);
  line-height: 1.6;
  margin-top: 4px;
}
.field-desc-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  font-family: var(--os-font-body);
  font-size: 13.5px;
  color: var(--os-body-text);
  line-height: 1.6;
}
.field-desc-bullets li { margin-bottom: 4px; font-weight: 600; color: var(--os-dark); }
.field-desc-bullets li:last-child { margin-bottom: 0; }
.field-desc--closer { margin-top: 10px; font-weight: 600; color: var(--os-dark); }

.input {
  width: 100%;
  font-family: var(--os-font-body);
  font-size: 14px;
  color: var(--os-dark);
  padding: 12px 14px;
  border: 2px solid var(--os-light-grey);
  outline: none;
  background: transparent;
  margin-top: 12px;
  border-radius: 0;
}
.input:focus { border-color: var(--batch); }
.input::placeholder { color: var(--os-mid-grey); }
.textarea { resize: vertical; min-height: 104px; line-height: 1.6; }

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--os-dark) 50%),
    linear-gradient(135deg, var(--os-dark) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

/* Tile choices (yes/no + dropdown-as-tiles) */
.tile-group { display: grid; gap: 12px; margin-top: 12px; }
.tile-group--2 { grid-template-columns: 1fr 1fr; }
.tile-group--3 { grid-template-columns: repeat(3, 1fr); }
.tile-group--4 { grid-template-columns: repeat(4, 1fr); }
.tile-group--5 { grid-template-columns: repeat(5, 1fr); }
.tile-group--10 { grid-template-columns: repeat(10, 1fr); gap: 6px; }
.tile-group--10 .tile-mark { padding: 10px 4px; min-height: 64px; font-size: 18px; }

.tile { position: relative; cursor: pointer; display: block; }
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.tile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
  min-height: 80px;
  border: 2px solid var(--os-light-grey);
  font-family: var(--os-font-display);
  font-size: 20px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--os-dark);
  letter-spacing: -0.02em;
  background: var(--os-white);
}
.tile-group--xl .tile-mark { min-height: 96px; font-size: 28px; }
.tile:hover .tile-mark { border-color: var(--batch); }
.tile input:checked ~ .tile-mark { background: var(--batch); border-color: var(--batch); }
.tile input:focus-visible ~ .tile-mark { box-shadow: inset 0 0 0 3px rgba(10, 10, 10, 0.12); }

/* Multi-choice checkboxes */
.multi { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.multi-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; cursor: pointer; position: relative; }
.multi-row:hover { background: var(--os-light-grey); }
.multi-row input { position: absolute; opacity: 0; pointer-events: none; }
.multi-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--os-light-grey);
  background: var(--os-white);
  display: inline-block;
  position: relative;
}
.multi-row:hover .multi-box { border-color: var(--batch); }
.multi-row input:checked ~ .multi-box { background: var(--batch); border-color: var(--batch); }
.multi-row input:checked ~ .multi-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 11px;
  border: solid var(--os-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.multi-row input:focus-visible ~ .multi-box { box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12); }
.multi-text { font-family: var(--os-font-body); font-size: 13.5px; color: var(--os-body-text); line-height: 1.5; }

/* File upload drop target */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 12px;
  padding: 28px 20px;
  min-height: 140px;
  border: 2px dashed var(--os-light-grey);
  background: var(--os-white);
  cursor: pointer;
  position: relative;
}
.file-drop:hover,
.file-drop.is-dragover { border-color: var(--batch); background: rgba(0, 0, 0, 0.015); }
.file-drop.has-file { border-style: solid; border-color: var(--batch); background: rgba(0, 0, 0, 0.02); }
.file-drop.has-error { border-style: solid; border-color: var(--os-coral); background: rgba(255, 107, 107, 0.04); }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.file-drop-empty,
.file-drop-picked { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.file-drop-empty[hidden],
.file-drop-picked[hidden] { display: none; }
.file-drop-headline {
  font-family: var(--os-font-display);
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--os-dark);
  letter-spacing: -0.02em;
}
.file-drop-headline--picked { margin-bottom: 6px; }
.file-drop-sub { font-family: var(--os-font-body); font-size: 13px; color: var(--os-body-text); }
.file-drop-name {
  font-family: var(--os-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--os-dark);
  word-break: break-all;
  max-width: 100%;
}
.file-drop-meta { font-family: var(--os-font-body); font-size: 12px; color: var(--os-mid-grey); }
.file-drop-replace {
  margin-top: 6px;
  font-family: var(--os-font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-dark);
  border-bottom: 2px solid var(--batch);
  padding-bottom: 2px;
}
.file-drop-error { font-family: var(--os-font-body); font-size: 13px; color: var(--os-coral); margin-top: 10px; pointer-events: none; }
/* H2 — sits UNDER the drop zone (outside the <label>, so it is not clickable
   chrome) on a form that came back with errors. Coral like .file-drop-error
   because it is telling the applicant something they have to act on. */
.field-desc--reattach { margin-top: 10px; font-weight: 600; color: var(--os-coral); }

/* ── Thanks page ──────────────────────────────────────────────────────────── */
.thanks { max-width: 560px; }
.thanks-label { font-family: var(--os-font-body); font-size: 12px; font-weight: 600; color: var(--os-dark); margin-bottom: 12px; }
.thanks-body { font-family: var(--os-font-body); font-size: 16px; color: var(--os-body-text); line-height: 1.55; margin-bottom: 28px; }
.thanks-list { list-style: none; padding: 0; margin: 0; }
.thanks-list li {
  font-family: var(--os-font-body);
  font-size: 14px;
  color: var(--os-body-text);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.thanks-list li::before { content: '★'; position: absolute; left: 0; top: 0; color: var(--batch); font-size: 14px; }
.thanks-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--os-font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--os-dark);
  background: var(--batch);
  border: 2px solid var(--os-dark);
  padding: 18px 28px;
  text-decoration: none;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.thanks-cta:hover,
.thanks-cta:focus-visible { background: var(--os-dark); color: var(--batch); outline: none; }

/* Success notice (carried over from the A0 layout) */
.enquiry-notice {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(52, 211, 153, 0.15);
  border: 2px solid var(--os-success);
  padding: 12px 24px;
  color: var(--os-dark);
  font-weight: 600;
}

@media (max-width: 640px) {
  .enquiry-body { padding: 20px 12px; }
  .hero { padding: 28px 24px 32px; }
  .hero-title { font-size: 36px; }
  .page-body { padding: 28px 24px; }
  .contact-block { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .enquiry-footer { padding: 14px 24px; }
  .enquiry-footer-legal { text-align: left; }
  .tile-group--3,
  .tile-group--4,
  .tile-group--5 { grid-template-columns: 1fr 1fr; }
  .tile-group--10 { grid-template-columns: repeat(5, 1fr); }
  .tile-mark { min-height: 64px; font-size: 16px; }
  .tile-group--xl .tile-mark { min-height: 80px; font-size: 24px; }
  .file-drop { min-height: 120px; padding: 22px 16px; }
  .file-drop-headline { font-size: 20px; }
  .submit { font-size: 20px; padding: 20px 18px; }
  .thanks-cta { font-size: 18px; padding: 16px 22px; }
}