/* =====================================================================
   KA WCAG – clean, theme-safe accessibility styles (rebuilt 2026-06-03)
   - Dofin brand toggle (red #b8211c + white gear)
   - Contrast modes that DO NOT hide images / media
   - WCAG 2.1/2.2 spacing, focus, reduced motion, underline, reading mode
   - Font size is handled by the JS scaler (no destructive * font rules here)
   ===================================================================== */

:root{
    --wawcag-brand:#b8211c; --wawcag-brand-dark:#8e1a16;
    --wawcag-cc-bg:#222222; --wawcag-cc-fg:#ffff00; --wawcag-cc-link:#00aaff;
    --wawcag-lh:1.8; --wawcag-ls:0.06em; --wawcag-ws:0.16em; --wawcag-ps:2em;
}

/* ---------- Toggle button (Dofin red, white gear) ---------- */
#wa_wcag-toggle-accessibility-panel{
    position:fixed !important; z-index:9999 !important;
    background:var(--wawcag-brand) !important; color:#fff !important;
    border:none !important; border-radius:50% !important;
    width:54px !important; height:54px !important; min-width:54px !important; min-height:54px !important;
    cursor:pointer !important; box-shadow:0 3px 14px rgba(0,0,0,.35) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important; transition:background .25s ease, transform .25s ease !important;
}
#wa_wcag-toggle-accessibility-panel svg{ width:28px !important; height:28px !important; fill:#fff !important; }
#wa_wcag-toggle-accessibility-panel:hover{ background:var(--wawcag-brand-dark) !important; transform:scale(1.08) !important; }
#wa_wcag-toggle-accessibility-panel:focus{ outline:3px solid #fff !important; outline-offset:2px !important; box-shadow:0 0 0 5px var(--wawcag-brand) !important; }

/* ---------- Panel chrome (kept readable regardless of contrast) ---------- */
#wa_wcag-accessibility-panel{ width:300px !important; max-width:92vw !important; }
#wa_wcag-accessibility-panel .panel-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
#wa_wcag-accessibility-panel h4{ margin:0; font-size:16px; }
#wa_wcag-close-accessibility-panel{ background:none; border:0; font-size:18px; cursor:pointer; line-height:1; padding:4px; border-radius:4px; }
#wa_wcag-close-accessibility-panel:focus{ outline:2px solid var(--wawcag-brand); }
/* Option rows: label wraps on the LEFT, checkbox stays fixed on the RIGHT (long labels
   like "Reading mode (distraction-free)" no longer push the checkbox onto the next line). */
#wa_wcag-accessibility-panel .wa_wcag-checkbox-row{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; margin:9px 0 !important; }
#wa_wcag-accessibility-panel .wa_wcag-checkbox-row label{ flex:1 1 auto !important; order:0 !important; font-size:14px !important; line-height:1.35 !important; margin:0 !important; cursor:pointer !important; }
#wa_wcag-accessibility-panel .wa_wcag-checkbox-row input[type="checkbox"]{ flex:0 0 auto !important; order:1 !important; width:18px !important; height:18px !important; margin:2px 0 0 0 !important; }
#wa_wcag-accessibility-panel .wa_wcag-checkbox-row .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* Select rows (contrast / cursor): label above, full-width control */
#wa_wcag-accessibility-panel > div > label{ display:block; margin:10px 0 4px; font-size:14px; }
#wa_wcag-accessibility-panel select{ width:100% !important; box-sizing:border-box !important; padding:6px 8px !important; }

/* =====================================================================
   FONT FAMILY (simple / dyslexia-friendly sans-serif)
   ===================================================================== */
body.wa_wcag-accessible-font, body.wa_wcag-accessible-font *:not(#wa_wcag-toggle-accessibility-panel):not(#wa_wcag-toggle-accessibility-panel *){
    font-family:Arial, Verdana, "Helvetica Neue", sans-serif !important;
}

/* =====================================================================
   FOCUS VISIBLE
   ===================================================================== */
body.wa_wcag-focus-visible a:focus,
body.wa_wcag-focus-visible button:focus,
body.wa_wcag-focus-visible input:focus,
body.wa_wcag-focus-visible select:focus,
body.wa_wcag-focus-visible textarea:focus,
body.wa_wcag-focus-visible [tabindex]:focus,
body.wa_wcag-focus-visible [role="button"]:focus{
    outline:3px solid var(--wawcag-brand) !important; outline-offset:2px !important;
    box-shadow:0 0 0 5px rgba(184,33,28,.35) !important;
}

/* =====================================================================
   REDUCE MOTION (safe – only animation/transition, never hides anything)
   ===================================================================== */
body.wa_wcag-reduce-motion *,
body.wa_wcag-reduce-motion *::before,
body.wa_wcag-reduce-motion *::after{
    animation-duration:.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important; transition-delay:0s !important; scroll-behavior:auto !important;
}

/* =====================================================================
   UNDERLINE LINKS
   ===================================================================== */
body.wa_wcag-underline-links a:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    text-decoration:underline !important; text-underline-offset:2px !important;
}

/* =====================================================================
   SPACING (WCAG 2.1 SC 1.4.12 Text Spacing) – text elements only
   ===================================================================== */
body.wa_wcag-extra-spacing :is(p,li,dd,dt,blockquote,figcaption,td,th):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    line-height:1.6 !important; letter-spacing:.04em !important; word-spacing:.1em !important;
}
body.wa_wcag-extra-spacing p:not(#wa_wcag-accessibility-panel *){ margin-bottom:1.6em !important; }

body.wa_wcag-custom-spacing :is(p,li,dd,dt,blockquote,figcaption,td,th,a,span):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    line-height:var(--wawcag-lh) !important; letter-spacing:var(--wawcag-ls) !important; word-spacing:var(--wawcag-ws) !important;
}
body.wa_wcag-custom-spacing p:not(#wa_wcag-accessibility-panel *){ margin-bottom:var(--wawcag-ps) !important; }

/* =====================================================================
   LARGER UI – enlarge interactive targets (>=44px) without breaking layout
   ===================================================================== */
body.wa_wcag-large-ui :is(button,a.btn,.btn,input[type="submit"],input[type="button"],select,.button):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    min-height:44px !important; padding-top:12px !important; padding-bottom:12px !important;
}
body.wa_wcag-large-ui :is(a,button):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ line-height:1.5 !important; }

/* =====================================================================
   When text is enlarged, let the header / primary nav WRAP instead of
   overflowing the page width (nav text scales, layout reflows to extra rows).
   ===================================================================== */
body[class*="wa_wcag-font-"] :is(.header-main__inner,.header-main,.primary-nav__list,.primary-nav,.site-header__inner){
    flex-wrap:wrap !important; row-gap:6px !important; max-width:100% !important;
}
body[class*="wa_wcag-font-"] .site-header{ height:auto !important; }

/* =====================================================================
   READING MODE – hide distractions, focus the main content
   ===================================================================== */
/* Distraction-free = hide CHROME only (header, nav, footer, sidebar, drawer, cookie bar).
   Do NOT hide content sections and do NOT force a max-width (that squashed the full-width
   marketing layout). Keeps the page intact, just removes navigation distractions. */
body.wa_wcag-reading-mode :is(.site-header,header.site-header,.site-nav,.main-nav,.primary-nav,.navbar,.mobile-drawer,.site-footer,aside.sidebar,.sidebar,.widget-area,.cookie-bar):not(#wa_wcag-accessibility-panel):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    display:none !important;
}

/* =====================================================================
   CONTRAST MODES  –  media (images/video/svg) ALWAYS stay visible
   ===================================================================== */
body[class*="wa_wcag-contrast-"] :is(img,picture,video,canvas,iframe,embed,object,svg):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    background:transparent !important; background-color:transparent !important;
    filter:none !important; opacity:1 !important; visibility:visible !important; display:revert !important;
}
/* Remove DECORATIVE full-bleed background photos on hero/banner sections only (so light text
   becomes readable on the solid contrast background). Content tiles/cards/products keep theirs. */
body[class*="wa_wcag-contrast-"] :is(.page-hero,[class*="hero"],[class*="banner"],[class*="jumbotron"]):not([class*="card"]):not([class*="product"]):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    background-image:none !important;
}

/* ---- DARK / HIGH contrast (dark bg, light text, yellow links) ---- */
body.wa_wcag-contrast-dark, body.wa_wcag-contrast-high{ background:#000 !important; color:#fff !important; }
body:is(.wa_wcag-contrast-dark,.wa_wcag-contrast-high) :is(section,header,footer,article,aside,nav,main,.container,[class*="section"],[class*="hero"],[class*="banner"],[class*="card"],[class*="block"]):not(#wa_wcag-accessibility-panel):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    background-color:#000 !important;
}
body:is(.wa_wcag-contrast-dark,.wa_wcag-contrast-high) :is(p,h1,h2,h3,h4,h5,h6,li,span,strong,em,small,td,th,dt,dd,blockquote,figcaption,label,button):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    color:#fff !important; border-color:#fff !important; background-color:transparent !important;
}
body:is(.wa_wcag-contrast-dark,.wa_wcag-contrast-high) a:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ color:#ffd24d !important; }
body:is(.wa_wcag-contrast-dark,.wa_wcag-contrast-high) :is(input,select,textarea):not(#wa_wcag-accessibility-panel *){ background:#111 !important; color:#fff !important; border:1px solid #fff !important; }

/* ---- LIGHT contrast (white bg, black text) ---- */
body.wa_wcag-contrast-light{ background:#fff !important; color:#000 !important; }
body.wa_wcag-contrast-light :is(section,header,footer,article,aside,nav,main,.container,[class*="section"],[class*="hero"],[class*="banner"],[class*="card"],[class*="block"]):not(#wa_wcag-accessibility-panel):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    background-color:#fff !important;
}
body.wa_wcag-contrast-light :is(p,h1,h2,h3,h4,h5,h6,li,span,strong,em,small,td,th,dt,dd,blockquote,figcaption,label,button):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    color:#000 !important; border-color:#000 !important; background-color:transparent !important;
}
body.wa_wcag-contrast-light a:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ color:#8e1a16 !important; }

/* ---- CUSTOM contrast (admin colours via CSS vars) ---- */
body.wa_wcag-contrast-custom{ background:var(--wawcag-cc-bg) !important; color:var(--wawcag-cc-fg) !important; }
body.wa_wcag-contrast-custom :is(section,header,footer,article,aside,nav,main,.container,[class*="section"],[class*="hero"],[class*="banner"],[class*="card"],[class*="block"]):not(#wa_wcag-accessibility-panel):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    background-color:var(--wawcag-cc-bg) !important;
}
body.wa_wcag-contrast-custom :is(p,h1,h2,h3,h4,h5,h6,li,span,strong,em,small,td,th,dt,dd,blockquote,figcaption,label,button):not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){
    color:var(--wawcag-cc-fg) !important; border-color:var(--wawcag-cc-fg) !important; background-color:transparent !important;
}
body.wa_wcag-contrast-custom a:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ color:var(--wawcag-cc-link) !important; }

/* =====================================================================
   CURSORS
   ===================================================================== */
body.wa_wcag-cursor-large *:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ cursor:url('data:image/svg+xml;utf8,<svg height="48" width="48" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 0,48 12,36 24,48 48,0" fill="black"/></svg>') 0 0, auto !important; }
body.wa_wcag-cursor-white *:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ cursor:url('data:image/svg+xml;utf8,<svg height="48" width="48" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 0,48 12,36 24,48 48,0" fill="white" stroke="black" stroke-width="2"/></svg>') 0 0, auto !important; }
body.wa_wcag-cursor-invert *:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ cursor:url('data:image/svg+xml;utf8,<svg height="64" width="64" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 0,64 16,48 32,64 64,0" fill="white" stroke="black" stroke-width="3"/></svg>') 0 0, auto !important; }

/* =====================================================================
   Keep the panel + toggle always readable, above any contrast mode
   ===================================================================== */
/* The panel is the SETTINGS UI — it must look identical regardless of the chosen
   contrast/font/etc. mode. ID-scoped rules beat the body.contrast-* rules on specificity. */
#wa_wcag-accessibility-panel, #wa_wcag-accessibility-panel *{ filter:none !important; }
#wa_wcag-accessibility-panel{ background:#ffffff !important; color:#1a1a1a !important; border:1px solid #ccc !important; }
#wa_wcag-accessibility-panel :is(p,span,label,h4,h5,h6,strong,em,small,div,li,td,th,legend,fieldset){
    color:#1a1a1a !important; background-color:transparent !important; border-color:#d0d0d0 !important; text-decoration:none !important;
}
#wa_wcag-accessibility-panel a{ color:#b8211c !important; text-decoration:underline !important; }
#wa_wcag-accessibility-panel :is(input,select,textarea){
    background:#ffffff !important; color:#1a1a1a !important; border:1px solid #bbbbbb !important;
}
/* panel buttons (A+/A++/A+++, reset, close) – consistent light look + brand accent */
#wa_wcag-accessibility-panel button, #wa_wcag-accessibility-panel .wa_wcag-font-btn{
    background:#f4f4f4 !important; color:#1a1a1a !important; border:1px solid #cfcfcf !important;
    border-radius:6px !important; padding:7px 12px !important; margin:3px !important; cursor:pointer !important; font-size:14px !important;
}
#wa_wcag-accessibility-panel button:hover, #wa_wcag-accessibility-panel .wa_wcag-font-btn:hover{ background:#e9e9e9 !important; }
#wa_wcag-accessibility-panel .wa_wcag-font-btn.active{ background:#b8211c !important; color:#fff !important; border-color:#b8211c !important; }
#wa_wcag-accessibility-panel #wa_wcag-close-accessibility-panel{ background:none !important; border:0 !important; font-size:18px !important; padding:4px !important; }
#wa_wcag-accessibility-panel #wa_wcag-reset{ width:100% !important; margin-top:8px !important; }

/* Keep CSS background-image content (tiles/hero/thumbnails) visible in every contrast mode */
body[class*="wa_wcag-contrast-"] [style*="background-image"]:not(#wa_wcag-accessibility-panel *):not(#wa_wcag-toggle-accessibility-panel){ background-image:inherit; }