/* V360 TECH Community Interest Form — dedicated, self-contained styles.
   Hand-written (not Tailwind utilities) so rendering does NOT depend on the
   site's pre-built/purged tailwind.min.css. Every rule is scoped under .v360.

   Design constraint: the people using this form are blind or have low vision.
   - All form text >= 7:1 contrast (WCAG AAA 1.4.6).
   - Touch/click targets >= 44px (WCAG 2.5.5).
   - Strong, always-visible focus indicator (WCAG 2.4.7 / 2.4.13).
   - Input/control borders >= 3:1 against white (WCAG 1.4.11).
   Palette: lions-navy #051362, lions-green #127521, lions-dark #1F211C,
   lions-light #F5F7FA. Error red #991b1b (8.2:1 on white = AAA). */

.v360 {
  color: #1F211C;                 /* lions-dark — ~15:1 on white */
  font-size: 1.0625rem;
  line-height: 1.6;
}

.v360 *:focus-visible {
  outline: 3px solid #051362;     /* lions-navy */
  outline-offset: 2px;
  border-radius: 4px;
}
/* Fallback for browsers without :focus-visible */
.v360 input:focus,
.v360 textarea:focus,
.v360 button:focus,
.v360 a:focus {
  outline: 3px solid #051362;
  outline-offset: 2px;
}

.v360-form {
  max-width: 44rem;
  margin: 0 auto;
}

/* ---- Sections ---- */
.v360-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #d7dbe2;
}
.v360-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.v360-section > h2 {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #051362;                 /* lions-navy ~13:1 */
  margin: 0 0 1.25rem;
}

/* ---- Field blocks ---- */
.v360-field { margin-bottom: 1.5rem; }

.v360-label,
.v360 legend {
  display: block;
  font-weight: 700;
  color: #051362;
  margin-bottom: 0.4rem;
  font-size: 1.0625rem;
}
.v360 fieldset {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  min-width: 0;
}
.v360 legend { padding: 0; }

.v360-hint {
  display: block;
  font-weight: 400;
  color: #3a3d42;                 /* ~9:1 on white */
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.v360-optional {
  font-weight: 400;
  color: #3a3d42;
  font-size: 0.95rem;
}

.v360-req {                       /* required asterisk */
  color: #991b1b;
  font-weight: 700;
  margin-left: 0.15rem;
}

/* ---- Text / tel / email / textarea inputs ---- */
.v360-input,
.v360-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  font-size: 1.0625rem;
  font-family: inherit;
  color: #1F211C;
  background: #fff;
  border: 2px solid #51545b;      /* ~6.4:1 on white */
  border-radius: 6px;
  box-sizing: border-box;
}
.v360-textarea { line-height: 1.5; resize: vertical; min-height: 7rem; }

.v360-input::placeholder,
.v360-textarea::placeholder { color: #5f636b; }   /* placeholders are decorative only */

.v360-input.v360-invalid,
.v360-textarea.v360-invalid {
  border-color: #991b1b;
  box-shadow: 0 0 0 1px #991b1b;
}

/* ---- DOB triple ---- */
.v360-dob { display: flex; gap: 1rem; flex-wrap: wrap; }
.v360-dob > div { display: flex; flex-direction: column; }
.v360-dob label { font-weight: 600; color: #051362; margin-bottom: 0.3rem; font-size: 1rem; }
.v360-dob .v360-input { width: auto; }
.v360-dob-mm, .v360-dob-dd { max-width: 5.5rem; }
.v360-dob-yyyy { max-width: 7.5rem; }

/* ---- Radio / checkbox groups ---- */
.v360-options { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem; }
.v360-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;               /* full-row target */
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}
.v360-option:hover { background: #eef1f6; }
.v360-option input[type="radio"],
.v360-option input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #127521;          /* lions-green */
  cursor: pointer;
}
.v360-option span { padding-top: 1px; color: #1F211C; }

/* The whole row shows focus when its control is focused */
.v360-option:has(input:focus-visible),
.v360-option:has(input:focus) {
  outline: 3px solid #051362;
  outline-offset: 1px;
}

/* group with an error gets a left rule */
.v360 fieldset.v360-invalid {
  border-left: 4px solid #991b1b;
  padding-left: 0.85rem;
  margin-left: -0.85rem;
}

/* ---- Other-reveal ---- */
.v360-reveal { margin: 0.5rem 0 0 2.1rem; }
.v360-reveal[hidden] { display: none; }

/* ---- Inline error text ---- */
.v360-error {
  color: #991b1b;                 /* 8.2:1 on white = AAA */
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.4rem 0 0;
}
.v360-error[hidden] { display: none; }
.v360-error::before { content: "\26A0\FE0F"; margin-right: 0.35rem; } /* ⚠️ */

/* ---- Error summary ---- */
.v360-summary {
  border: 2px solid #991b1b;
  background: #fdecec;
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.v360-summary[hidden] { display: none; }
.v360-summary h2 {
  color: #8a1717;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}
.v360-summary ul { margin: 0; padding-left: 1.2rem; }
.v360-summary li { margin: 0.3rem 0; }
.v360-summary a { color: #8a1717; font-weight: 700; text-decoration: underline; }

/* ---- Consent ---- */
.v360-consent {
  background: #F5F7FA;
  border: 2px solid #c7ccd6;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.v360-consent.v360-invalid { border-color: #991b1b; }
.v360-consent .v360-option { font-weight: 600; }

/* ---- Privacy note ---- */
.v360-privacy { color: #3a3d42; font-size: 0.95rem; margin: 1.5rem 0; }
.v360-privacy a { color: #0d4d18; font-weight: 600; text-decoration: underline; } /* dark green ~7:1 */

/* ---- Submit ---- */
.v360-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.8rem 2.2rem;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: 'Quicksand', system-ui, sans-serif;
  color: #fff;
  background: #0f5d1a;            /* slightly darkened lions-green for >=4.5:1 text */
  border: 2px solid #0f5d1a;
  border-radius: 8px;
  cursor: pointer;
}
.v360-submit:hover { background: #0b4914; border-color: #0b4914; }
.v360-submit:disabled { opacity: 0.7; cursor: progress; }

/* ---- Success / failure banners ---- */
.v360-success, .v360-formerror {
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  margin-top: 1rem;
}
.v360-success {
  border: 2px solid #127521;
  background: #eaf6ec;
}
.v360-success h2 {
  color: #0d4d18;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
}
.v360-success p { color: #1F211C; margin: 0.4rem 0; }
.v360-success a { color: #0d4d18; font-weight: 700; }
.v360-formerror {
  border: 2px solid #991b1b;
  background: #fdecec;
}
.v360-formerror h2 { color: #8a1717; font-size: 1.3rem; margin: 0 0 0.5rem; font-family: 'Quicksand', system-ui, sans-serif; }
.v360-formerror p { color: #1F211C; margin: 0.4rem 0; }
.v360-formerror a { color: #8a1717; font-weight: 700; }

/* Visually-hidden but screen-reader-available (sr-only helper text) */
.v360-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Honeypot — taken fully out of the a11y tree and tab order in the markup */
.v360-hp {
  position: absolute !important;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}