/**
* HBM AccessiGuard - Accessibility Modes
*
* CSS classes applied to element when accessibility features are enabled
*
* @package AccessiGuard
*/
/* ============================================
HIGH CONTRAST MODE
============================================ */
html.ag-high-contrast {
filter: contrast(1.25);
}
html.ag-high-contrast body {
background: #ffffff !important;
color: #000000 !important;
}
html.ag-high-contrast *:not(img):not(video):not(iframe):not(svg):not(canvas) {
background-color: #ffffff !important;
color: #000000 !important;
border-color: #000000 !important;
}
html.ag-high-contrast a {
color: #0000EE !important;
text-decoration: underline !important;
}
html.ag-high-contrast a:visited {
color: #551A8B !important;
}
html.ag-high-contrast a:hover,
html.ag-high-contrast a:focus {
color: #0000EE !important;
background-color: #FFFF00 !important;
}
html.ag-high-contrast button,
html.ag-high-contrast input[type="submit"],
html.ag-high-contrast input[type="button"],
html.ag-high-contrast .button,
html.ag-high-contrast [role="button"] {
background-color: #000000 !important;
color: #ffffff !important;
border: 2px solid #000000 !important;
}
html.ag-high-contrast button:hover,
html.ag-high-contrast button:focus,
html.ag-high-contrast input[type="submit"]:hover,
html.ag-high-contrast input[type="submit"]:focus {
background-color: #ffffff !important;
color: #000000 !important;
}
html.ag-high-contrast input,
html.ag-high-contrast textarea,
html.ag-high-contrast select {
border: 2px solid #000000 !important;
background-color: #ffffff !important;
color: #000000 !important;
}
html.ag-high-contrast img {
border: 2px solid #000000;
}
/* Don't affect toolbar */
html.ag-high-contrast #accessiguard-toolbar-root,
html.ag-high-contrast #accessiguard-toolbar-root * {
filter: none !important;
background-color: initial !important;
color: initial !important;
border-color: initial !important;
}
/* ============================================
DARK MODE
============================================ */
html.ag-dark-mode {
filter: invert(1) hue-rotate(180deg);
}
html.ag-dark-mode img,
html.ag-dark-mode video,
html.ag-dark-mode iframe,
html.ag-dark-mode svg,
html.ag-dark-mode canvas,
html.ag-dark-mode [style*="background-image"],
html.ag-dark-mode picture,
html.ag-dark-mode .wp-block-image {
filter: invert(1) hue-rotate(180deg);
}
/* Don't affect toolbar */
html.ag-dark-mode #accessiguard-toolbar-root {
filter: invert(1) hue-rotate(180deg);
}
/* ============================================
INVERT COLORS
============================================ */
html.ag-invert {
filter: invert(1);
}
html.ag-invert img,
html.ag-invert video,
html.ag-invert iframe,
html.ag-invert svg:not(.accessiguard-icon),
html.ag-invert canvas {
filter: invert(1);
}
/* Don't affect toolbar */
html.ag-invert #accessiguard-toolbar-root {
filter: invert(1);
}
/* ============================================
HIGHLIGHT LINKS
============================================ */
html.ag-highlight-links a {
background-color: #FFFF00 !important;
color: #000000 !important;
text-decoration: underline !important;
outline: 2px solid #000000;
outline-offset: 2px;
padding: 2px 4px;
}
html.ag-highlight-links a:hover,
html.ag-highlight-links a:focus {
background-color: #04B6B6 !important;
color: #ffffff !important;
}
html.ag-highlight-links #accessiguard-toolbar-root a {
background-color: transparent !important;
color: inherit !important;
text-decoration: none !important;
outline: none;
padding: 0;
}
/* ============================================
READABLE FONT
============================================ */
html.ag-readable-font,
html.ag-readable-font * {
font-family: Arial, Helvetica, sans-serif !important;
letter-spacing: 0.02em;
word-spacing: 0.1em;
}
html.ag-readable-font p,
html.ag-readable-font li,
html.ag-readable-font td,
html.ag-readable-font th,
html.ag-readable-font span,
html.ag-readable-font div {
line-height: 1.8 !important;
}
/* Don't affect toolbar typography */
html.ag-readable-font #accessiguard-toolbar-root,
html.ag-readable-font #accessiguard-toolbar-root * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
letter-spacing: normal;
word-spacing: normal;
}
/* ============================================
PAUSE ANIMATIONS
============================================ */
html.ag-pause-animations *,
html.ag-pause-animations *::before,
html.ag-pause-animations *::after {
animation-play-state: paused !important;
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition: none !important;
scroll-behavior: auto !important;
}
html.ag-pause-animations video,
html.ag-pause-animations [class*="slider"],
html.ag-pause-animations [class*="carousel"],
html.ag-pause-animations [class*="marquee"] {
animation: none !important;
}
/* Allow toolbar animations */
html.ag-pause-animations #accessiguard-toolbar-root *,
html.ag-pause-animations #accessiguard-toolbar-root *::before,
html.ag-pause-animations #accessiguard-toolbar-root *::after {
animation-play-state: running !important;
animation-duration: 0.3s !important;
transition: all 0.2s ease !important;
}
/* ============================================
BIG CURSOR
============================================ */
html.ag-big-cursor,
html.ag-big-cursor * {
cursor: url('data:image/svg+xml,') 6 6, auto !important;
}
html.ag-big-cursor a,
html.ag-big-cursor button,
html.ag-big-cursor [role="button"],
html.ag-big-cursor input[type="submit"],
html.ag-big-cursor input[type="button"],
html.ag-big-cursor label,
html.ag-big-cursor select {
cursor: url('data:image/svg+xml,') 20 20, pointer !important;
}
/* ============================================
READING GUIDE
============================================ */
html.ag-reading-guide {
cursor: crosshair;
}
/* ============================================
HIDE IMAGES
============================================ */
html.ag-hide-images img:not([alt=""]):not([role="presentation"]) {
position: relative;
visibility: visible;
}
html.ag-hide-images img:not([alt=""]):not([role="presentation"])::before {
content: attr(alt);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
text-align: center;
font-size: 14px;
color: #333;
border: 2px dashed #999;
}
html.ag-hide-images img[alt=""],
html.ag-hide-images img[role="presentation"] {
display: none !important;
}
html.ag-hide-images svg:not(.accessiguard-icon),
html.ag-hide-images [class*="icon"]:not(#accessiguard-toolbar-root *),
html.ag-hide-images .wp-block-image {
opacity: 0.1;
}
/* Don't hide toolbar images */
html.ag-hide-images #accessiguard-toolbar-root img,
html.ag-hide-images #accessiguard-toolbar-root svg {
visibility: visible !important;
display: initial !important;
opacity: 1 !important;
}
/* ============================================
LINE HEIGHT
============================================ */
html.ag-line-height p,
html.ag-line-height li,
html.ag-line-height td,
html.ag-line-height th,
html.ag-line-height dd,
html.ag-line-height dt,
html.ag-line-height span:not(.accessiguard-toggle-icon),
html.ag-line-height div:not(#accessiguard-toolbar-root):not(#accessiguard-toolbar-root *) {
line-height: 2 !important;
}
/* ============================================
LETTER SPACING
============================================ */
html.ag-letter-spacing,
html.ag-letter-spacing * {
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
html.ag-letter-spacing #accessiguard-toolbar-root,
html.ag-letter-spacing #accessiguard-toolbar-root * {
letter-spacing: normal !important;
word-spacing: normal !important;
}
/* ============================================
TEXT ALIGN LEFT
============================================ */
html.ag-text-align-left p,
html.ag-text-align-left li,
html.ag-text-align-left td,
html.ag-text-align-left th,
html.ag-text-align-left h1,
html.ag-text-align-left h2,
html.ag-text-align-left h3,
html.ag-text-align-left h4,
html.ag-text-align-left h5,
html.ag-text-align-left h6,
html.ag-text-align-left div:not(#accessiguard-toolbar-root):not(#accessiguard-toolbar-root *) {
text-align: left !important;
}
/* ============================================
FOCUS MODE (Enhanced Focus)
============================================ */
html.ag-focus-mode *:focus {
outline: 4px solid #04B6B6 !important;
outline-offset: 4px !important;
box-shadow: 0 0 0 8px rgba(4, 182, 182, 0.3) !important;
}
html.ag-focus-mode a:focus,
html.ag-focus-mode button:focus,
html.ag-focus-mode input:focus,
html.ag-focus-mode select:focus,
html.ag-focus-mode textarea:focus {
background-color: rgba(4, 182, 182, 0.1) !important;
}
/* ============================================
FONT SIZE ADJUSTMENTS
Applied via inline style on
Base: font-size: XXX%
============================================ */
/* Ensure rem-based sizing works */
html[style*="font-size"] body {
font-size: 1rem;
}
/* ============================================
COMBINATION HELPERS
============================================ */
/* When multiple modes are active */
html.ag-high-contrast.ag-big-cursor {
/* Both modes active - adjust cursor colors */
}
html.ag-dark-mode.ag-highlight-links a {
background-color: #00008B !important;
color: #FFFF00 !important;
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
html.ag-high-contrast,
html.ag-dark-mode,
html.ag-invert {
filter: none !important;
}
html.ag-high-contrast *,
html.ag-dark-mode *,
html.ag-invert * {
filter: none !important;
background: white !important;
color: black !important;
}
}