/* ================================================
   Prabhu Bank — Accessibility Styles
   WCAG 2.1 AA | prabhu-bank
   ================================================ */

/* Custom properties controlled by accessibility.js */
:root {
    --a11y-font-scale: 1;
    --a11y-mobile-panel-top: 105px; /* clears red bar (~55px) + search row (~50px) */
}

/* Font scaling — html drives rem; body must use rem so it inherits the scale */
html {
    font-size: calc(16px * var(--a11y-font-scale));
}
body {
    font-size: 1rem !important;
}

/* When scale is active (html.a11y-font-scaled), re-express main.css px values as rem
   equivalents so they track html font-size. Values are identical at scale=1,
   so default layout is unchanged. Applied only when scale > 1 to avoid any risk
   of overriding context-specific font-size rules at default state. */
html.a11y-font-scaled p,
html.a11y-font-scaled ul li,
html.a11y-font-scaled ol li       { font-size: 1rem !important; }      /* 16px */

/* Navigation — px values from main.css / megamenu.css bypass rem scaling;
   re-express as rem so they track html font-size when the scale is active. */
html.a11y-font-scaled li.first-main-nav a       { font-size: 0.9375rem !important; } /* 15px */
html.a11y-font-scaled li.first-main-nav a span  { font-size: 0.75rem !important;   } /* 12px */
html.a11y-font-scaled .mega-left h6 a           { font-size: 1rem !important;       } /* 16px */
html.a11y-font-scaled .headertopright a         { font-size: 0.875rem !important;   } /* 14px */

html.a11y-font-scaled h1,
html.a11y-font-scaled .h1         { font-size: 2.25rem !important; }   /* 36px */
html.a11y-font-scaled h2,
html.a11y-font-scaled .h2         { font-size: 1.875rem !important; }  /* 30px */
html.a11y-font-scaled h3,
html.a11y-font-scaled .h3         { font-size: 1.625rem !important; }  /* 26px */
html.a11y-font-scaled h4,
html.a11y-font-scaled .h4         { font-size: 1.25rem !important; }   /* 20px */
html.a11y-font-scaled h5,
html.a11y-font-scaled .h5         { font-size: 1.125rem !important; }  /* 18px */
html.a11y-font-scaled h6,
html.a11y-font-scaled .h6         { font-size: 1rem !important; }      /* 16px */

@media (min-width: 1024px) {
    html.a11y-font-scaled h1,
    html.a11y-font-scaled .h1     { font-size: 2.625rem !important; }  /* 42px */
    html.a11y-font-scaled h2,
    html.a11y-font-scaled .h2     { font-size: 2.25rem !important; }   /* 36px */
    html.a11y-font-scaled h3,
    html.a11y-font-scaled .h3     { font-size: 1.875rem !important; }  /* 30px */
    html.a11y-font-scaled h4,
    html.a11y-font-scaled .h4     { font-size: 1.5rem !important; }    /* 24px */
    html.a11y-font-scaled h5,
    html.a11y-font-scaled .h5     { font-size: 1.25rem !important; }   /* 20px */
}

/* Saturation + greyscale — applied to body content children, NOT body itself.
   Applying filter to body creates a stacking context that breaks position:fixed.
   Widget and overlay are excluded so they stay anchored to the viewport. */
html.a11y-body-filtered body > *:not(#a11y-widget):not(#a11y-tint-overlay) {
    filter: var(--a11y-body-filter, none);
}

/* -----------------------------------------------
   Skip to main content — WCAG 2.4.1
   ----------------------------------------------- */
.a11y-skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #cd171f;
    color: #fff;
    padding: 10px 20px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-bottom-right-radius: 4px;
    transition: top 0.2s ease;
}
.a11y-skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* -----------------------------------------------
   Colour tint overlay (injected div by JS)
   ----------------------------------------------- */
#a11y-tint-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    background-color: transparent;
    opacity: 0;
    transition: background-color 0.2s, opacity 0.2s;
}

/* -----------------------------------------------
   High Contrast mode — WCAG 1.4.3
   ----------------------------------------------- */

/* Step 1: black background on every element except media elements.
   Widget exclusion is handled in Step 10 — using IDs inside :not() inflates
   specificity to 2,1,x which would prevent later targeted overrides from working. */
html.a11y-high-contrast *:not(img):not(video):not(iframe):not(canvas) {
    background-color: #000 !important;
    border-color: #555 !important;
}

/* Step 2: white text — body establishes the inherited default */
html.a11y-high-contrast body {
    color: #fff !important;
}

/* Step 3: force white on elements that carry explicit color rules in the site CSS.
   NOTE: <a> is intentionally omitted here so links get yellow below. */
html.a11y-high-contrast p,
html.a11y-high-contrast div,
html.a11y-high-contrast span,
html.a11y-high-contrast h1, html.a11y-high-contrast h2, html.a11y-high-contrast h3,
html.a11y-high-contrast h4, html.a11y-high-contrast h5, html.a11y-high-contrast h6,
html.a11y-high-contrast li,
html.a11y-high-contrast td, html.a11y-high-contrast th,
html.a11y-high-contrast label,
html.a11y-high-contrast button,
html.a11y-high-contrast input,
html.a11y-high-contrast select,
html.a11y-high-contrast textarea,
html.a11y-high-contrast header,
html.a11y-high-contrast nav,
html.a11y-high-contrast footer,
html.a11y-high-contrast section,
html.a11y-high-contrast article,
html.a11y-high-contrast main,
html.a11y-high-contrast strong,
html.a11y-high-contrast em,
html.a11y-high-contrast small,
html.a11y-high-contrast caption,
html.a11y-high-contrast blockquote,
html.a11y-high-contrast i {
    color: #fff !important;
}

/* Step 4: links — yellow. Same specificity as Step 3 rules; comes later so wins. */
html.a11y-high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}
html.a11y-high-contrast a:visited {
    color: #ff9900 !important;
}

/* Step 5: form control visible borders */
html.a11y-high-contrast input,
html.a11y-high-contrast select,
html.a11y-high-contrast textarea {
    border: 2px solid #fff !important;
}
html.a11y-high-contrast button {
    border: 2px solid #fff !important;
}

/* Step 6: SVG icon fills */
html.a11y-high-contrast svg:not(#a11y-widget *) {
    fill: #fff !important;
}

/* Step 7: image boost */
html.a11y-high-contrast img {
    filter: brightness(0.85) contrast(1.2);
}

/* Step 8: CTA card overlay links — Step 1 sets background:black on every element,
   which makes the full-card <a> overlay (z-index:2, position:absolute, 100%×100%)
   opaque and hides all card content behind it. Restore transparency here. */
html.a11y-high-contrast .cta-card > a {
    background-color: transparent !important;
}

/* Step 9: icon font pseudo-elements (Font Awesome ::before glyphs inherit parent
   color, but explicit background on ::before can still block them) */
html.a11y-high-contrast *::before,
html.a11y-high-contrast *::after {
    background-color: transparent !important;
}

/* Step 10: restore accessibility widget — ID selectors (specificity 1,x,x) beat
   Step 1 (0,1,5) so the widget keeps its own branding in high contrast mode. */
html.a11y-high-contrast #a11y-widget,
html.a11y-high-contrast #a11y-widget * {
    background-color: transparent !important;
    border-color: unset !important;
    color: unset !important;
}
html.a11y-high-contrast #a11y-toggle,
html.a11y-high-contrast #a11y-nav-toggle {
    background-color: #cd171f !important;
    color: #fff !important;
    border-color: #fff !important;
}
html.a11y-high-contrast #a11y-panel {
    background-color: #fff !important;
    border-color: #e0e0e0 !important;
    border-top-color: #cd171f !important;
    color: #333 !important;
}
html.a11y-high-contrast #a11y-panel .a11y-btn {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
}
html.a11y-high-contrast #a11y-panel .a11y-btn.a11y-active {
    background-color: #cd171f !important;
    color: #fff !important;
    border-color: #cd171f !important;
}
html.a11y-high-contrast #a11y-reset {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
}

/* -----------------------------------------------
   Inverted mode
   ----------------------------------------------- */
html.a11y-inverted {
    filter: invert(1) hue-rotate(180deg);
}
html.a11y-inverted img,
html.a11y-inverted video,
html.a11y-inverted iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* -----------------------------------------------
   Focus outlines — WCAG 2.4.7
   ----------------------------------------------- */
:focus-visible {
    outline: 3px solid #cd171f !important;
    outline-offset: 2px !important;
}

/* -----------------------------------------------
   Accessibility Widget
   ----------------------------------------------- */
#a11y-widget {
    position: fixed;
    bottom: 135px;
    left: 25px;
    z-index: 9999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

#a11y-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #cd171f;
    color: #fff;
    border: 3px solid #fff;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* White border + dark shadow ensures visibility against any background colour,
       including the red sections on this page */
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 0 4px #fff, 0 0 0 6px rgba(0,0,0,0.2);
    transition: background 0.2s;
}
#a11y-toggle:hover  { background: #b3171e; }
#a11y-toggle:focus  { outline: 3px solid #cd171f; outline-offset: 3px; }

#a11y-panel {
    display: none;
    position: fixed;
    bottom: 200px;          /* sits above toggle (bottom:135px + 52px height + 13px gap) */
    left: 25px;
    width: 295px;
    max-width: calc(100vw - 50px);    /* responsive: never clips on narrow screens */
    max-height: calc(100vh - 220px);  /* bottom:200px + 20px top clearance keeps panel fully within viewport */
    overflow-y: auto;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 3px solid #cd171f;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
#a11y-panel.a11y-open { display: block; }

.a11y-section { margin-bottom: 14px; }
.a11y-section:last-of-type { margin-bottom: 0; }

.a11y-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
}

.a11y-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 2-column layout for 4-button groups (e.g. contrast) */
.a11y-btn-group-2col .a11y-btn {
    flex: 0 0 calc(50% - 2px);
}

.a11y-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 13px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    transition: all 0.15s;
    font-weight: 500;
}
.a11y-btn:hover   { background: #e8e8e8; }
.a11y-btn.a11y-active {
    background: #cd171f;
    color: #fff;
    border-color: #cd171f;
    font-weight: 700;
}
.a11y-btn:focus   { outline: 3px solid #cd171f; outline-offset: 1px; }

.a11y-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.a11y-control-row:last-child { margin-bottom: 0; }

.a11y-control-row label {
    font-size: 12px;
    color: #555;
    min-width: 70px;
    flex-shrink: 0;
}

.a11y-slider {
    flex: 1;
    height: 4px;
    cursor: pointer;
    accent-color: #cd171f;
}

#a11y-tint-color {
    width: 36px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
}

#a11y-reset {
    display: block;
    width: 100%;
    padding: 8px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    margin-top: 12px;
    text-align: center;
    font-family: inherit;
}
#a11y-reset:hover { background: #e8e8e8; }
#a11y-reset:focus { outline: 3px solid #cd171f; outline-offset: 1px; }

.a11y-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}



/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------
   Mobile nav accessibility button (#a11y-nav-toggle)
   ----------------------------------------------- */
#a11y-nav-toggle {
    /* .top-right-wrapper button in main.css sets position:absolute/left:0/top:50%/transform
       for the search submit button — override all of that so this button stays in flex flow */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cd171f;
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 15px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    padding: 0;
    margin-left: 8px;
    transition: background 0.2s;
}
#a11y-nav-toggle:hover { background: #b3171e; }
#a11y-nav-toggle:focus { outline: 3px solid #cd171f; outline-offset: 3px; }

/* Mobile (≤1023px): show nav button, hide floating button, panel opens from top */
@media (max-width: 1023px) {
    #a11y-nav-toggle { display: flex; }
    #a11y-toggle     { display: none; }

    #a11y-panel {
        bottom: auto;
        top: var(--a11y-mobile-panel-top);
        /* Use 100vw (viewport-relative) so this works even when #a11y-widget
           acts as containing block on some browsers (Chrome DevTools, etc.) */
        left: max(10px, calc(100vw - 305px));
        right: auto;
        width: 295px;
        max-width: calc(100vw - 20px);
        /* top:105px + 20px bottom clearance keeps panel within viewport on mobile */
        max-height: calc(100vh - 125px);
        border-radius: 8px;
        padding: 16px;
    }
}

/* Desktop (≥1024px): hide nav button, floating button handled by base styles */
@media (min-width: 1024px) {
    #a11y-nav-toggle { display: none; }
}

/* -----------------------------------------------
   Category headers (Content Adjustment / Tools)
   ----------------------------------------------- */
.a11y-cat-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #cd171f;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 16px 0 9px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(205, 23, 31, 0.2);
}
.a11y-cat-header i {
    font-size: 11px;
}

/* -----------------------------------------------
   OpenDyslexic — used by Dyslexia Font control
   ----------------------------------------------- */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../../fonts/open-dyslexic/OpenDyslexic-Regular.woff2') format('woff2'),
         url('../../fonts/open-dyslexic/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../../fonts/open-dyslexic/OpenDyslexic-Bold.woff2') format('woff2'),
         url('../../fonts/open-dyslexic/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* -----------------------------------------------
   Content Adjustment controls
   ----------------------------------------------- */

/* Highlight Titles */
html.a11y-highlight-titles h1,
html.a11y-highlight-titles h2,
html.a11y-highlight-titles h3,
html.a11y-highlight-titles h4,
html.a11y-highlight-titles h5,
html.a11y-highlight-titles h6 {
    border-left: 4px solid #cd171f !important;
    padding-left: 8px !important;
    background: rgba(205, 23, 31, 0.05) !important;
}

/* Highlight Links — widget links excluded */
html.a11y-highlight-links a:not(#a11y-widget *) {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Dyslexia Font */
html.a11y-dyslexia-font body,
html.a11y-dyslexia-font p,
html.a11y-dyslexia-font li,
html.a11y-dyslexia-font td,
html.a11y-dyslexia-font th,
html.a11y-dyslexia-font label,
html.a11y-dyslexia-font input,
html.a11y-dyslexia-font textarea,
html.a11y-dyslexia-font button {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Letter Spacing */
html.a11y-letter-spacing body,
html.a11y-letter-spacing p,
html.a11y-letter-spacing li,
html.a11y-letter-spacing td,
html.a11y-letter-spacing th,
html.a11y-letter-spacing label {
    letter-spacing: 0.12em !important;
}

/* Line Height */
html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height td,
html.a11y-line-height th,
html.a11y-line-height label {
    line-height: 1.9 !important;
}

/* Bold Text */
html.a11y-font-weight body,
html.a11y-font-weight p,
html.a11y-font-weight li,
html.a11y-font-weight td,
html.a11y-font-weight th,
html.a11y-font-weight label,
html.a11y-font-weight span,
html.a11y-font-weight div {
    font-weight: 700 !important;
}

/* -----------------------------------------------
   Tools controls
   ----------------------------------------------- */

/* Reading Guide — horizontal band following cursor */
#a11y-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    height: 2.2em;
    pointer-events: none;
    z-index: 9997;
    background: rgba(205, 23, 31, 0.1);
    border-top: 1px solid rgba(205, 23, 31, 0.25);
    border-bottom: 1px solid rgba(205, 23, 31, 0.25);
    display: none;
    transform: translateY(-50%);
}
html.a11y-reading-guide-active #a11y-reading-guide {
    display: block;
}

/* Stop Animations — kills all CSS animation and transition */
html.a11y-stop-animations *,
html.a11y-stop-animations *::before,
html.a11y-stop-animations *::after {
    animation: none !important;
    transition: none !important;
}

/* Big Cursor — hides system cursor, shows JS-driven arrow overlay */
html.a11y-big-cursor,
html.a11y-big-cursor * {
    cursor: none !important;
}
#a11y-big-cursor-el {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 99999;
    display: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpolygon points='0,0 0,28 7,21 12,34 17,32 12,19 21,19' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat top left / contain;
}
html.a11y-big-cursor #a11y-big-cursor-el {
    display: block;
}