/* W02: keyboard focus remains visible in both the default and contrast themes. */
body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
body button:focus,
.faq .faq-item .faq-q:focus-visible,
.cSection .cSectionTitle:focus-visible,
.bootstrap-select .dropdown-toggle:focus-visible,
.bootstrap-select .dropdown-menu > .inner:focus-visible,
.locator-filter-select-field .bootstrap-select .bs-donebutton :is(.btn, .locator-select-reset):focus-visible {
    outline: 3px solid #111111 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

/* W02: the News card clips outward outlines because the rounded wrapper uses overflow:hidden. */
.card-wrapper.news > a {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.card-wrapper.news > a:focus-visible {
    outline-offset: -6px !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* W23: colour overrides apply only after selecting Accessibility Colours. */
:root[data-theme="contrast"] body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
:root[data-theme="contrast"] .faq .faq-item .faq-q:focus-visible,
:root[data-theme="contrast"] .cSection .cSectionTitle:focus-visible,
:root[data-theme="contrast"] .bootstrap-select .dropdown-toggle:focus-visible,
:root[data-theme="contrast"] .bootstrap-select .dropdown-menu > .inner:focus-visible,
:root[data-theme="contrast"] .locator-filter-select-field .bootstrap-select .bs-donebutton :is(.btn, .locator-select-reset):focus-visible {
    outline: 3px solid #111111 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

/* Keep the complete News-card indicator inside the clipped card in contrast mode too. */
:root[data-theme="contrast"] .card-wrapper.news > a:focus-visible {
    outline-offset: -6px !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

#content {
    scroll-margin-top: 7rem;
}

:where(button.swiper-button-next, button.swiper-button-prev) {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.swiper-autoplay-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0 4px 0 0;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    color: var(--text-base);
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.swiper-pagination-with-autoplay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-pagination-bullets-group {
    display: inline-flex;
    align-items: center;
}

.swiper-autoplay-toggle svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    pointer-events: none;
}

.backToTop .scrollToTop {
    /* W10: reset native button chrome in both themes; keep the original colours. */
    border: 0;
    cursor: pointer;
}

:root[data-theme="contrast"] .backToTop .scrollToTop {
    background: var(--Secondary);
}

:root[data-theme="contrast"] .backToTop .scrollToTop:is(:hover, :focus) {
    background: var(--Tertiary);
}

:root[data-theme="contrast"] .btn-secondary:hover,
:root[data-theme="contrast"] .btn-secondary:focus,
:root[data-theme="contrast"] .btn-secondary.focus {
    background-color: #285800;
    border-color: #285800;
    color: #ffffff;
}

:root[data-theme="contrast"] .btn-secondary:focus,
:root[data-theme="contrast"] .btn-secondary.focus {
    outline: 3px solid #111111 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

:root[data-theme="contrast"] #filter-toggler.has-active-filters {
    background-color: var(--Secondary);
    border-color: var(--Secondary);
    color: #ffffff;
}

:root[data-theme="contrast"] .btn-rice1,
:root[data-theme="contrast"] .btn-lightBrown {
    background-color: var(--Rice2);
    color: #ffffff;
}

/* W23: component-specific colour fixes reported during contrast-mode review. */
:root[data-theme="contrast"] .card-with-icon-top .card-body-detail.bg-sp-Secondary {
    background: var(--Secondary);
}

:root[data-theme="contrast"] .card-with-icon-top .card-body-detail.bg-sp-green {
    background: #285800;
}

:root[data-theme="contrast"] .card-with-icon-top .card-body-detail.bg-sp-ter {
    background: var(--Tertiary);
}

:root[data-theme="contrast"] .breadcrumb-item.active {
    color: var(--text-dark);
}

:root[data-theme="contrast"] .view-more-toggle.btn-rice1 {
    background-color: var(--Rice3);
    border-color: var(--Rice3);
    color: #ffffff;
}

:root[data-theme="contrast"] .view-more-toggle.btn-rice1:is(:hover, :focus) {
    background-color: #5f462e;
    border-color: #5f462e;
}

:root[data-theme="contrast"] .btn-donate .ball {
    background-color: var(--Rice3);
}

:root[data-theme="contrast"] .tab-publications .tab-item .tab-link {
    color: var(--Secondary);
}

:root[data-theme="contrast"] .tab-publications .tab-item .tab-link:is(:hover, .active) {
    color: #ffffff;
}

.accessibility-statement {
    color: var(--text-dark);
    background: #ffffff;
}

.accessibility-statement a {
    color: var(--Primary);
    text-decoration: underline;
}

@media (forced-colors: active) {
  body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
  body button:focus,
  .faq .faq-item .faq-q:focus-visible,
    .cSection .cSectionTitle:focus-visible,
    .bootstrap-select .dropdown-toggle:focus-visible,
    .bootstrap-select .dropdown-menu > .inner:focus-visible,
    .locator-filter-select-field .bootstrap-select .bs-donebutton :is(.btn, .locator-select-reset):focus-visible,
    :root[data-theme="contrast"] body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
    :root[data-theme="contrast"] .faq .faq-item .faq-q:focus-visible,
    :root[data-theme="contrast"] .cSection .cSectionTitle:focus-visible,
    :root[data-theme="contrast"] .bootstrap-select .dropdown-toggle:focus-visible,
    :root[data-theme="contrast"] .bootstrap-select .dropdown-menu > .inner:focus-visible,
    :root[data-theme="contrast"] .locator-filter-select-field .bootstrap-select .bs-donebutton :is(.btn, .locator-select-reset):focus-visible {
        outline-color: Highlight !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

    .swiper-wrapper {
        transition-duration: 0.01ms !important;
    }
}