/* Authoritative high-contrast layer. Loaded last so component CSS cannot undo it. */
html[data-contrast="high"],
html[data-contrast="high"] body {
    color: #000 !important;
    background: #fff !important;
}

html[data-contrast="high"] body,
html[data-contrast="high"] main,
html[data-contrast="high"] .causes,
html[data-contrast="high"] .home-about,
html[data-contrast="high"] .home-actions,
html[data-contrast="high"] .service {
    color: #000 !important;
    background-color: #fff !important;
}

html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] h5,
html[data-contrast="high"] h6,
html[data-contrast="high"] p,
html[data-contrast="high"] li,
html[data-contrast="high"] label,
html[data-contrast="high"] small,
html[data-contrast="high"] strong,
html[data-contrast="high"] span {
    color: #000 !important;
}

html[data-contrast="high"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.account-toggle) {
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
}

html[data-contrast="high"] .top-bar,
html[data-contrast="high"] .navbar,
html[data-contrast="high"] .navbar.nav-sticky,
html[data-contrast="high"] .page .navbar,
html[data-contrast="high"] .page-header,
html[data-contrast="high"] .footer,
html[data-contrast="high"] .facts,
html[data-contrast="high"] .home-trust-grid,
html[data-contrast="high"] .home-cta-inner {
    color: #fff !important;
    background: #000 !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .top-bar *,
html[data-contrast="high"] .navbar-brand-copy *,
html[data-contrast="high"] .navbar .nav-link,
html[data-contrast="high"] .navbar .nav-link *,
html[data-contrast="high"] .page-header *,
html[data-contrast="high"] .footer *,
html[data-contrast="high"] .facts *,
html[data-contrast="high"] .home-trust-grid *,
html[data-contrast="high"] .home-cta-inner * {
    color: #fff !important;
}

html[data-contrast="high"] .top-bar a,
html[data-contrast="high"] .footer a,
html[data-contrast="high"] .page-header a {
    color: #fff !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
}

html[data-contrast="high"] .navbar-brand img {
    background: #fff !important;
    border: 2px solid #fff !important;
    filter: none !important;
}

html[data-contrast="high"] .navbar .nav-link:hover,
html[data-contrast="high"] .navbar .nav-link:focus,
html[data-contrast="high"] .navbar .nav-link.active,
html[data-contrast="high"] .navbar .nav-link[aria-current="page"] {
    color: #000 !important;
    background: #ff0 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
}

html[data-contrast="high"] .navbar .nav-link:hover *,
html[data-contrast="high"] .navbar .nav-link:focus *,
html[data-contrast="high"] .navbar .nav-link.active *,
html[data-contrast="high"] .navbar .nav-link[aria-current="page"] * {
    color: #000 !important;
}

/* Prevent component-level navy rules from making inactive links disappear. */
html[data-contrast="high"] body .navbar-dark .navbar-nav .nav-link:not(:hover):not(:focus):not(.active):not([aria-current="page"]),
html[data-contrast="high"] body .navbar-dark .navbar-nav .nav-link:not(:hover):not(:focus):not(.active):not([aria-current="page"]) * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-contrast="high"] body .navbar .navbar-brand-copy strong,
html[data-contrast="high"] body .navbar .navbar-brand-copy small {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-contrast="high"] .site-mega-navigation,
html[data-contrast="high"] .site-mega-menu,
html[data-contrast="high"] .account-dropdown,
html[data-contrast="high"] .accessibility-drawer,
html[data-contrast="high"] .home-hero-layout,
html[data-contrast="high"] .home-action-card,
html[data-contrast="high"] .service-item,
html[data-contrast="high"] .community-card,
html[data-contrast="high"] .update-card,
html[data-contrast="high"] .event-item,
html[data-contrast="high"] .journey-panel,
html[data-contrast="high"] .profile-card,
html[data-contrast="high"] .modal-content,
html[data-contrast="high"] .portal-card,
html[data-contrast="high"] .dashboard-panel,
html[data-contrast="high"] .booking-panel,
html[data-contrast="high"] .detail-info-grid section {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .site-mega-navigation *,
html[data-contrast="high"] .site-mega-menu *,
html[data-contrast="high"] .account-dropdown *,
html[data-contrast="high"] .accessibility-drawer *,
html[data-contrast="high"] .home-hero-layout *,
html[data-contrast="high"] .home-action-card *,
html[data-contrast="high"] .service-item *,
html[data-contrast="high"] .community-card *,
html[data-contrast="high"] .update-card *,
html[data-contrast="high"] .event-item *,
html[data-contrast="high"] .journey-panel *,
html[data-contrast="high"] .profile-card *,
html[data-contrast="high"] .modal-content * {
    color: #000 !important;
}

html[data-contrast="high"] .btn,
html[data-contrast="high"] button,
html[data-contrast="high"] .accessibility-toggle,
html[data-contrast="high"] .accessibility-option,
html[data-contrast="high"] .account-toggle,
html[data-contrast="high"] .nav-register-btn {
    color: #000 !important;
    background: #ff0 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .btn *,
html[data-contrast="high"] button *,
html[data-contrast="high"] .account-toggle * {
    color: #000 !important;
}

/* Keep utility controls calm; only the active contrast toggle is highlighted. */
html[data-contrast="high"] .a11y-toolbar button {
    color: #fff !important;
    background: #000 !important;
    border: 2px solid #fff !important;
}

html[data-contrast="high"] .a11y-toolbar button * {
    color: #fff !important;
}

html[data-contrast="high"] .a11y-toolbar button[data-a11y-action="contrast"][aria-pressed="true"] {
    color: #000 !important;
    background: #ff0 !important;
    border-color: #fff !important;
}

html[data-contrast="high"] .a11y-toolbar button[data-a11y-action="contrast"][aria-pressed="true"] * {
    color: #000 !important;
}

html[data-contrast="high"] .booking-review {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
}

html[data-contrast="high"] .booking-review-change,
html[data-contrast="high"] .booking-cancel-action {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    text-decoration: underline !important;
}

/* Unselected filters remain white, so selection is not conveyed by colour alone. */
html[data-contrast="high"] .filter-btn[aria-pressed="false"],
html[data-contrast="high"] .accessibility-option[aria-pressed="false"] {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
}

html[data-contrast="high"] .filter-btn[aria-pressed="true"],
html[data-contrast="high"] .accessibility-option[aria-pressed="true"] {
    color: #000 !important;
    background: #ff0 !important;
    border: 3px solid #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}

html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea,
html[data-contrast="high"] .form-control {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] input::placeholder,
html[data-contrast="high"] textarea::placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

/* Compound search controls use one perimeter, not two nested borders. */
html[data-contrast="high"] .listing-search,
html[data-contrast="high"] .support-search {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* The controls already have their own perimeters; the toolbar needs no second box. */
html[data-contrast="high"] .listing-toolbar {
    color: #000 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .listing-toolbar-sticky {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Footer contains semantic sections; keep them on the footer's black surface. */
html[data-contrast="high"] body .footer .footer-compact-section,
html[data-contrast="high"] body .footer .footer-compact-grid,
html[data-contrast="high"] body .footer .footer-link-grid,
html[data-contrast="high"] body .footer .footer-hours,
html[data-contrast="high"] body .footer .footer-compact-bottom {
    color: #fff !important;
    background: #000 !important;
    border-color: #fff !important;
}

html[data-contrast="high"] body .footer .footer-compact-section *,
html[data-contrast="high"] body .footer .footer-hours *,
html[data-contrast="high"] body .footer .footer-compact-bottom * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-contrast="high"] body .footer .footer-cookie-settings {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: #ff0 !important;
    border: 2px solid #fff !important;
    padding: 5px 8px !important;
    text-decoration: underline !important;
}

html[data-contrast="high"] .listing-search .form-control,
html[data-contrast="high"] .listing-search .form-control:focus,
html[data-contrast="high"] .support-search input,
html[data-contrast="high"] .support-search input:focus {
    color: #000 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .listing-search:focus-within,
html[data-contrast="high"] .support-search:focus-within {
    outline: 4px solid #ff0 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px #000, 0 0 0 8px #fff !important;
}

html[data-contrast="high"] a:focus-visible,
html[data-contrast="high"] button:focus-visible,
html[data-contrast="high"] input:focus-visible,
html[data-contrast="high"] select:focus-visible,
html[data-contrast="high"] textarea:focus-visible,
html[data-contrast="high"] [tabindex]:focus-visible {
    outline: 4px solid #ff0 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px #000, 0 0 0 8px #fff !important;
}

/* Focus belongs to the compound field shell, never its nested input. */
html[data-contrast="high"] .listing-search input:focus-visible,
html[data-contrast="high"] .listing-search .form-control:focus-visible,
html[data-contrast="high"] .support-search input:focus-visible,
html[data-contrast="high"] .support-search .form-control:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html[data-contrast="high"] ::selection {
    color: #000 !important;
    background: #ff0 !important;
}