/* AccessFlow feature styles applied to via af-* classes. */
/*
FILTER ISOLATION STRATEGY
Visual filters (Contrast/Saturation) are now handled via JS
in accessflow-loader.js to allow for cumulative effects.
*/
/* 1. OVERLAY BASE */
#accessflow-overlay-root {
background: transparent;
}
/* 2. HIGHLIGHT LINKS */
html.af-highlight-links a,
html.af-highlight-links a:visited {
text-decoration: underline !important;
outline: 2px solid #1677ff !important;
outline-offset: 2px !important;
background-color: #e6f4ff !important;
color: #003eb3 !important;
padding: 1px 3px !important;
border-radius: 2px !important;
}
/* 3. BIGGER TEXT - Aggressive Scaling */
html[class*="af-bigger-text-"] body,
html[class*="af-bigger-text-"] p,
html[class*="af-bigger-text-"] div:not(#accessflow-widget-root),
html[class*="af-bigger-text-"] span,
html[class*="af-bigger-text-"] li,
html[class*="af-bigger-text-"] h1,
html[class*="af-bigger-text-"] h2,
html[class*="af-bigger-text-"] h3,
html[class*="af-bigger-text-"] h4,
html[class*="af-bigger-text-"] h5,
html[class*="af-bigger-text-"] h6,
html[class*="af-bigger-text-"] a,
html[class*="af-bigger-text-"] table,
html[class*="af-bigger-text-"] td,
html[class*="af-bigger-text-"] th,
html[class*="af-bigger-text-"] label,
html[class*="af-bigger-text-"] button,
html[class*="af-bigger-text-"] input,
html[class*="af-bigger-text-"] textarea {
transition: font-size 0.2s ease;
}
/* 3. BIGGER TEXT - Using Zoom with counter-zoom for the widget */
html.af-bigger-text-sm body {
zoom: 1.03 !important;
}
html.af-bigger-text-sm #accessflow-widget-root {
zoom: 0.97087 !important; /* 1 / 1.03 */
}
html.af-bigger-text-md body {
zoom: 1.06 !important;
}
html.af-bigger-text-md #accessflow-widget-root {
zoom: 0.94339 !important; /* 1 / 1.06 */
}
html.af-bigger-text-lg body {
zoom: 1.09 !important;
}
html.af-bigger-text-lg #accessflow-widget-root {
zoom: 0.91743 !important; /* 1 / 1.09 */
}
/* 4. TEXT SPACING */
html.af-text-spacing-md *,
html.af-text-spacing-md *::before,
html.af-text-spacing-md *::after {
letter-spacing: 0.1em !important;
word-spacing: 0.15em !important;
}
html.af-text-spacing-lg *,
html.af-text-spacing-lg *::before,
html.af-text-spacing-lg *::after {
letter-spacing: 0.2em !important;
word-spacing: 0.3em !important;
}
/* 5. PAUSE ANIMATIONS */
html.af-pause-animations *,
html.af-pause-animations *::before,
html.af-pause-animations *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* 6. HIDE IMAGES */
html.af-hide-images img,
html.af-hide-images picture,
html.af-hide-images figure,
html.af-hide-images [style*='background-image'] {
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. DYSLEXIA FONTS */
html.af-dyslexia body,
html.af-dyslexia p,
html.af-dyslexia li,
html.af-dyslexia h1,
html.af-dyslexia h2,
html.af-dyslexia h3,
html.af-dyslexia h4,
html.af-dyslexia span,
html.af-dyslexia td,
html.af-dyslexia label,
html.af-dyslexia input,
html.af-dyslexia textarea,
html.af-dyslexia button {
font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif !important;
}
html.af-dyslexia-accessible body,
html.af-dyslexia-accessible p,
html.af-dyslexia-accessible li,
html.af-dyslexia-accessible h1,
html.af-dyslexia-accessible h2,
html.af-dyslexia-accessible h3,
html.af-dyslexia-accessible h4,
html.af-dyslexia-accessible span,
html.af-dyslexia-accessible td,
html.af-dyslexia-accessible label,
html.af-dyslexia-accessible input,
html.af-dyslexia-accessible textarea,
html.af-dyslexia-accessible button {
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif !important;
letter-spacing: 0.02em !important;
}
/* 8. CURSOR */
html.af-large-cursor,
html.af-large-cursor * {
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='M8 4 L32 20 L22 23 L17 36 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.af-large-cursor-black,
html.af-large-cursor-black * {
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='M8 4 L32 20 L22 23 L17 36 Z' fill='black' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") 8 4, auto !important;
}
/* 9. LINE HEIGHT */
html.af-line-height-md p,
html.af-line-height-md li,
html.af-line-height-md span,
html.af-line-height-md td {
line-height: 1.6 !important;
}
html.af-line-height-lg p,
html.af-line-height-lg li,
html.af-line-height-lg span,
html.af-line-height-lg td {
line-height: 1.9 !important;
}
html.af-line-height-xl p,
html.af-line-height-xl li,
html.af-line-height-xl span,
html.af-line-height-xl td {
line-height: 2.2 !important;
}
/* 10. TEXT ALIGN */
html.af-text-align-left * { text-align: left !important; }
html.af-text-align-center * { text-align: center !important; }
html.af-text-align-right * { text-align: right !important; }
html.af-text-align-justify * { text-align: justify !important; }
/* 11. TOOLTIPS */
html.af-tooltips [aria-label]:not([aria-label='']):hover::after,
html.af-tooltips [title]:not([title='']):hover::after {
content: attr(aria-label) attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #111;
color: #fff;
font-size: 13px;
padding: 6px 12px;
border-radius: 6px;
white-space: nowrap;
z-index: 999990;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}