/**
 * D102 Contact Form Styles
 * Uses GOV.UK Frontend classes for form structure and accessibility,
 * overriding where needed to align with the EIC design system.
 *
 * Specificity strategy:
 *   GOV.UK targets single classes (0,1,0). Prefixing with the wrapper
 *   class gives us (0,2,0), which wins without needing !important.
 *
 * Colour strategy:
 *   GOV.UK's near-black (#0b0c0c) is replaced with --eic-main-navy-950.
 *   Setting color on the wrapper handles inherited elements automatically.
 *   Elements GOV.UK sets color on explicitly need their own override.
 *   The focus box-shadow (inset 0 0 0 2px) and checkbox ::before border
 *   both use currentColor — they pick up navy automatically once color is set.
 */

/* ─── Wrapper ──────────────────────────────────────────────────────────────
   Sets the base font and colour for the whole form in one place.
   Constrains width to match .eic-width-restrict (44 rem).
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap {
    max-width: 44rem;
    font-family: var(--font-stack-body, 'Source Sans 3', system-ui, sans-serif);
    color: var(--eic-main-navy-950);
    margin-top: 2rem;
}

/* ─── Font overrides ───────────────────────────────────────────────────────
   GOV.UK sets font-family explicitly on these elements, so inheritance
   from the wrapper alone won't reach them.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap .govuk-label,
.d102-contact-form-wrap .govuk-hint,
.d102-contact-form-wrap .govuk-error-message,
.d102-contact-form-wrap .govuk-input,
.d102-contact-form-wrap .govuk-select,
.d102-contact-form-wrap .govuk-textarea,
.d102-contact-form-wrap .govuk-checkboxes__label,
.d102-contact-form-wrap .govuk-error-summary,
.d102-contact-form-wrap .govuk-error-summary__title,
.d102-contact-form-wrap .govuk-error-summary__list a {
    font-family: var(--font-stack-body, 'Source Sans 3', system-ui, sans-serif);
}

/* ─── Colour overrides ─────────────────────────────────────────────────────
   These elements have color: #0b0c0c set explicitly in GOV.UK, so they
   need an explicit override rather than relying on inheritance.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap .govuk-label,
.d102-contact-form-wrap .govuk-select,
.d102-contact-form-wrap .govuk-error-summary {
    color: var(--eic-main-navy-950);
}

/* ─── Input / Select / Textarea borders ────────────────────────────────────
   Replace GOV.UK near-black borders with EIC navy.
   The --error:focus variant in GOV.UK resets the border back to #0b0c0c
   once the field is valid and focused — override it to stay navy.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap .govuk-input,
.d102-contact-form-wrap .govuk-select,
.d102-contact-form-wrap .govuk-textarea {
    border-color: var(--eic-main-navy-950);
}

.d102-contact-form-wrap .govuk-input--error:focus,
.d102-contact-form-wrap .govuk-select--error:focus,
.d102-contact-form-wrap .govuk-textarea--error:focus {
    border-color: var(--eic-main-navy-950);
}

/* ─── Checkbox grid override ───────────────────────────────────────────────
   The EIC theme applies display:grid to .govuk-checkboxes for filter panels.
   A single privacy checkbox needs the standard block layout instead.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap .govuk-checkboxes {
    display: block;
    margin-bottom: 0;
}

/* ─── Form heading ─────────────────────────────────────────────────────────*/
.d102-contact-form-wrap .d102-form-heading {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* ─── Submit button ────────────────────────────────────────────────────────
   Styling is handled entirely by .eic-button in the theme. This rule only
   adds top margin to match the spacing GOV.UK uses for its own button.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-form-wrap .eic-button[type="submit"] {
    margin-top: 1.25rem;
}

/* ─── Success notification ─────────────────────────────────────────────────
   EIC teal palette for a calm, on-brand confirmation message.
   ───────────────────────────────────────────────────────────────────────── */
.d102-contact-success {
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    border-left: 5px solid var(--eic-teal-500);
    background-color: var(--eic-teal-50);
    color: var(--eic-teal-950);
}

.d102-contact-success p {
    margin: 0;
    font-size: 1.1875rem;
}