/*
 * HIGH CONTRAST STYLESHEET
 * Standard: WCAG 2.1 AAA / EN 301 549 (EU Web Accessibility Directive)
 * Activated by: html.high-contrast  (toggled via JS + sessionStorage)
 *
 * Colour palette:
 *   Background  #000000
 *   Text        #ffffff
 *   Links       #ffff00
 *   Focus ring  #ffff00
 */

/* ================================================================
   Base
   ================================================================ */

html.high-contrast body {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
}

html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6 {
    color: #fff !important;
}

html.high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

html.high-contrast a:hover,
html.high-contrast a:focus {
    color: #000 !important;
    background-color: #ffff00 !important;
    text-decoration: underline !important;
}

html.high-contrast *:focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* ================================================================
   Header inner (hero image area)
   ================================================================ */

html.high-contrast .header-inner {
    background-image: none !important;
    background-color: #000 !important;
    border-bottom: 2px solid #fff;
}

html.high-contrast .top-bar {
    background: #000 !important;
    color: #fff !important;
    border-bottom: 1px solid #fff;
    font-size: 1.2rem !important;
}

html.high-contrast .top-bar span,
html.high-contrast .top-bar a {
    font-size: 1.2rem !important;
}

html.high-contrast .top-bar svg {
    width: 1.2em !important;
    height: 1.2em !important;
}

html.high-contrast .header-main {
    background: #000 !important;
}

html.high-contrast .site-title a,
html.high-contrast .site-tagline,
html.high-contrast .header-text,
html.high-contrast a.header-text {
    color: #fff !important;
}

html.high-contrast .site-title a:hover,
html.high-contrast .site-title a:focus,
html.high-contrast a.header-text:hover,
html.high-contrast a.header-text:focus {
    color: #000 !important;
    background-color: #ffff00 !important;
}

html.high-contrast .site-logo img {
    filter: brightness(0) invert(1);
}

/* Title/tagline box (inline-styled semi-transparent div) */
html.high-contrast .header-title-box {
    background-color: #000 !important;
    opacity: 1 !important;
    border: 1px solid #fff !important;
}

/* ================================================================
   Accessibility toolbar
   ================================================================ */

html.high-contrast .accessibility-toolbar {
    background: #000 !important;
    border-bottom: 2px solid #fff;
}

html.high-contrast .hc-toggle-btn {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #fff !important;
}

html.high-contrast .hc-toggle-btn svg {
    fill: #000 !important;
}

html.high-contrast .hc-toggle-btn:hover,
html.high-contrast .hc-toggle-btn:focus-visible {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
    outline: 2px solid #000 !important;
}

/* ================================================================
   Navigation
   ================================================================ */

html.high-contrast .site-navigation {
    background: #000 !important;
    border: 2px solid #fff !important;
}

html.high-contrast .main-menu > li > a {
    color: #fff !important;
}

html.high-contrast .main-menu > li > a:hover,
html.high-contrast .main-menu > li > a:focus {
    background: #ffff00 !important;
    color: #000 !important;
    text-decoration: none !important;
}

html.high-contrast li.menu-item {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

html.high-contrast .main-menu .sub-menu {
    background: #000 !important;
    border: 2px solid #fff !important;
    border-top: 2px solid #ffff00 !important;
    box-shadow: none !important;
}

html.high-contrast .main-menu .sub-menu a {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.high-contrast .main-menu .sub-menu a:hover,
html.high-contrast .main-menu .sub-menu a:focus {
    background: #ffff00 !important;
    color: #000 !important;
    padding-left: 20px !important;
}

html.high-contrast .main-menu .sub-menu .sub-menu {
    border-left: 2px solid #ffff00 !important;
    border-top: 2px solid #fff !important;
}

/* ================================================================
   Hero carousel
   ================================================================ */

html.high-contrast .hero-carousel {
    border: 2px solid #fff;
}

html.high-contrast .carousel-slide::before {
    background: rgba(0, 0, 0, 0.88) !important;
}

html.high-contrast .hero-content h1 {
    color: #fff !important;
}

html.high-contrast .hero-content p {
    color: #fff !important;
}

html.high-contrast .carousel-btn {
    background: #000 !important;
    border: 2px solid #fff !important;
    color: #fff !important;
    top: 5% !important;
}

html.high-contrast .carousel-btn:hover {
    background: #ffff00 !important;
    color: #000 !important;
}

html.high-contrast .carousel-dot {
    border-color: #fff !important;
    background: transparent !important;
}

html.high-contrast .carousel-dot.active,
html.high-contrast .carousel-dot:hover {
    background: #fff !important;
}

/* ================================================================
   Buttons
   ================================================================ */

html.high-contrast .button,
html.high-contrast .wp-block-button__link {
    background: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

html.high-contrast .button:hover,
html.high-contrast .wp-block-button__link:hover {
    background: #ffff00 !important;
    color: #000 !important;
}

/* ================================================================
   Content containers
   ================================================================ */

html.high-contrast .content-container {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
}

html.high-contrast .page-body,
html.high-contrast .page-body p {
    color: #fff !important;
}

html.high-contrast .page-title {
    color: #fff !important;
}

/* ================================================================
   Cards
   ================================================================ */

html.high-contrast .featured-card,
html.high-contrast .submenu-card {
    background: #000 !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
    color: #fff !important;
}

html.high-contrast .submenu-card__body h3,
html.high-contrast .card-content h3 {
    color: #fff !important;
}

html.high-contrast .submenu-card__body p {
    color: #fff !important;
}

html.high-contrast .submenu-card:hover {
    background: #ffff00 !important;
    box-shadow: 0 0 0 3px #ffff00 !important;
    transform: none !important;
}

html.high-contrast .submenu-card:hover .submenu-card__body h3,
html.high-contrast .submenu-card:hover .submenu-card__body p,
html.high-contrast .submenu-card:hover .card-content h3,
html.high-contrast .submenu-card:hover * {
    color: #000 !important;
}

html.high-contrast .submenu-card__img {
    filter: grayscale(100%) contrast(1.3);
}

html.high-contrast .submenu-card__img--default {
    background-image: none !important;
    background-color: #222 !important;
}

/* ================================================================
   Footer
   ================================================================ */

html.high-contrast .site-footer {
    background: #000 !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}

html.high-contrast .site-footer a {
    color: #ffff00 !important;
    background-color: transparent !important;
    text-decoration: underline !important;
}

html.high-contrast .site-footer a:hover,
html.high-contrast .site-footer a:focus {
    color: #000 !important;
    background-color: #ffff00 !important;
    text-decoration: underline !important;
}

html.high-contrast .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    color: #fff !important;
}

/* ================================================================
   Forms
   ================================================================ */

html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select,
html.high-contrast button:not(.hc-toggle-btn):not(.carousel-btn) {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

html.high-contrast input::placeholder,
html.high-contrast textarea::placeholder {
    color: #aaa !important;
}

/* ================================================================
   Images
   ================================================================ */

html.high-contrast img {
    filter: grayscale(100%) contrast(1.2);
}

/* ================================================================
   Typography scale
   ================================================================ */

html.high-contrast body {
    font-size: 1.25rem !important;
    line-height: 1.75 !important;
}

html.high-contrast h1 { font-size: 2.8rem !important; }
html.high-contrast h2 { font-size: 2.3rem !important; }
html.high-contrast h3 { font-size: 1.9rem !important; }
html.high-contrast h4 { font-size: 1.6rem !important; }
html.high-contrast h5,
html.high-contrast h6 { font-size: 1.35rem !important; }

html.high-contrast p,
html.high-contrast li,
html.high-contrast td,
html.high-contrast th,
html.high-contrast label,
html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select {
    font-size: 1.2rem !important;
}

/* ================================================================
   Navigation font scale
   ================================================================ */

html.high-contrast .main-menu > li > a {
    font-size: 1.3rem !important;
    letter-spacing: 0.03em !important;
}

html.high-contrast .main-menu .sub-menu a {
    font-size: 1.2rem !important;
}

/* ================================================================
   Large cursor
   ================================================================ */

html.high-contrast,
html.high-contrast * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 2 L5 32 L12 25 L18 38 L24 35 L18 22 L28 22 Z' fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2, auto !important;
}