/* FocusOnNavigate focuses h1 after navigation; hide the programmatic focus ring. */
h1:focus {
    outline: none;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.language-switcher a {
    color: var(--surface-text-primary-normal, #1a1a1a);
    text-decoration: none;
}

.language-switcher a.active {
    font-weight: 700;
    text-decoration: underline;
}

.marriage-wizard h1,
.marriage-wizard h2,
.marriage-wizard h3 {
    color: var(--surface-text-primary-normal, #1a1a1a);
}

.marriage-wizard .form-label {
    font-weight: 600;
}

/*
 * Remap i3 ONE primary tokens to County:AccentColor (--county-accent).
 * Must live on html/:root so OneSelect dropdown menus/options (and other
 * portaled UI) inherit accent instead of default forest green.
 */
html {
    --primary-fgreen-50: color-mix(in srgb, var(--county-accent) 14%, #fff);
    --primary-fgreen-100: color-mix(in srgb, var(--county-accent) 22%, #fff);
    --primary-fgreen-200: color-mix(in srgb, var(--county-accent) 34%, #fff);
    --primary-fgreen-300: color-mix(in srgb, var(--county-accent) 48%, #fff);
    --primary-fgreen-400: color-mix(in srgb, var(--county-accent) 68%, #fff);
    --primary-fgreen-500: color-mix(in srgb, var(--county-accent) 88%, #fff);
    --primary-fgreen-600: var(--county-accent);
    --primary-fgreen-700: color-mix(in srgb, var(--county-accent) 82%, #000);
    --primary-fgreen-800: color-mix(in srgb, var(--county-accent) 68%, #000);
    --primary-fgreen-900: color-mix(in srgb, var(--county-accent) 52%, #000);
    --primary-fgreen-1000: color-mix(in srgb, var(--county-accent) 38%, #000);
    --primary-fgreen-a50: color-mix(in srgb, var(--county-accent) 9%, transparent);
    --primary-fgreen-a100: color-mix(in srgb, var(--county-accent) 18%, transparent);
    --primary-fgreen-a150: color-mix(in srgb, var(--county-accent) 24%, transparent);
    --primary-fgreen-a200: color-mix(in srgb, var(--county-accent) 32%, transparent);
}

.marriage-wizard .wizard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: 0.5rem;
}

.marriage-wizard .wizard-breadcrumb {
    flex: 1 1 100%;
    margin: 0 !important;
}

.marriage-wizard .wizard-errors {
    margin-bottom: 0.5rem;
}

/* Highlight required fields that failed validation */
.marriage-wizard .field-invalid .form-control,
.marriage-wizard .field-invalid .form-select,
.marriage-wizard .field-invalid select,
.marriage-wizard .field-invalid .select-input .form-select,
.marriage-wizard .field-invalid input,
.marriage-wizard .field-invalid .input-group {
    border-color: var(--interactive-border-negative-default, #b02a37) !important;
    border-width: 2px;
}

.marriage-wizard .field-invalid label,
.marriage-wizard .field-invalid .form-label {
    color: var(--feedback-text-negative-intense, #b02a37);
}

.marriage-wizard.applicant-compact {
    max-width: 1200px;
}

.marriage-wizard.applicant-compact .applicant-step-title {
    margin: 0 0 0.35rem;
}

.marriage-wizard.applicant-compact .applicant-form .row {
    margin-bottom: 0.35rem;
}

.marriage-wizard.applicant-compact .applicant-form label,
.marriage-wizard.applicant-compact .applicant-form .form-label {
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.marriage-wizard.applicant-compact .applicant-form .form-control,
.marriage-wizard.applicant-compact .applicant-form .form-select,
.marriage-wizard.applicant-compact .applicant-form input,
.marriage-wizard.applicant-compact .applicant-form select {
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

.marriage-wizard.applicant-compact .applicant-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.marriage-wizard.applicant-compact .applicant-group {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--county-accent) 35%, #ccc);
    border-radius: 0.25rem;
    background-color: #fff;
    min-inline-size: 0;
    /* Let OneDateTimeInput year/month menus escape the fieldset without clipping. */
    overflow: visible;
}

/* Desktop: nested year/month lists stay compact and above the calendar card. */
@media (min-width: 768px) {
    .one-datepicker-header .dropdown-menu,
    .monthpicker-header .dropdown-menu {
        z-index: 1060;
    }
}

.marriage-wizard.applicant-compact .applicant-group-title {
    float: none;
    width: auto;
    margin: 0 0 0.35rem;
    padding: 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--county-accent);
}

.marriage-wizard.review-compact {
    max-width: 1200px;
}

.marriage-wizard.review-compact .review-page-title {
    margin-bottom: 0.75rem;
}

.review-applicants {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: start;
}

.review-section {
    margin-bottom: 0.75rem;
    height: 100%;
}

.review-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.review-field {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) 1fr;
    gap: 0.25rem 0.65rem;
    align-items: baseline;
}

.review-field dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    color: #444;
}

.review-field dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    word-break: break-word;
}

.review-dl--inline {
    grid-template-columns: 1fr;
}

.wizard-actions,
.review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Inverted Back: white fill, accent text + outline */
.marriage-wizard .wizard-btn-back.btn,
.marriage-wizard a.wizard-btn-back.btn,
.marriage-wizard button.wizard-btn-back {
    --bs-btn-color: var(--county-accent);
    --bs-btn-border-color: var(--county-accent);
    --bs-btn-hover-color: var(--county-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--county-accent) 10%, #fff);
    --bs-btn-hover-border-color: var(--county-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--county-accent);
    --bs-btn-active-border-color: var(--county-accent);
    background-color: #fff !important;
    color: var(--county-accent) !important;
    border-color: var(--county-accent) !important;
}

.marriage-wizard .wizard-btn-back.btn:hover,
.marriage-wizard a.wizard-btn-back.btn:hover,
.marriage-wizard button.wizard-btn-back:hover {
    background-color: color-mix(in srgb, var(--county-accent) 10%, #fff) !important;
    color: var(--county-accent) !important;
    border-color: var(--county-accent) !important;
}

@media (min-width: 992px) {
    .review-applicants {
        grid-template-columns: 1fr 1fr;
    }

    .review-dl--inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .review-field--wide {
        grid-column: span 1;
    }
}

@media (min-width: 992px) {
    .marriage-wizard.applicant-compact .content,
    article.content:has(.applicant-compact) {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* County home — white split: copy left, courthouse photo right */
.county-hero {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1.75rem;
    min-height: calc(100vh - 3.5rem - clamp(7.5rem, 16vw, 11rem));
    min-height: calc(100dvh - 3.5rem - clamp(7.5rem, 16vw, 11rem));
    padding: 2rem 1.25rem 2.5rem;
    background-color: #fff;
    color: #1a1a1a;
}

.county-hero-copy {
    max-width: 34rem;
}

.county-hero-brand {
    margin: 0 0 0.35rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--county-accent);
}

.county-hero-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}

.county-hero-blurb {
    margin: 0 0 1.5rem;
    max-width: 28rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #444;
}

.county-hero-media {
    min-width: 0;
}

.county-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(28rem, 55vh);
    object-fit: cover;
    object-position: center;
}

@media (min-width: 900px) {
    .county-hero {
        grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 1.15fr);
        gap: 2.5rem;
        padding: 2.5rem 2rem 3rem;
    }

    .county-hero-photo {
        max-height: min(32rem, 62vh);
    }
}

@media print {
    .no-print,
    header,
    nav,
    footer,
    .language-switcher {
        display: none !important;
    }

    .marriage-confirmation {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .marriage-confirmation .review-applicants {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .marriage-confirmation .review-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}