/* ============================================================
   Accessibility Toolbar — INVESTech
   Unit 1: Toolbar widget + applied a11y state classes
   ============================================================ */

/* ---- CSS Custom Properties for text spacing (WCAG 1.4.12) ---- */
:root {
    --a11y-font-scale: 1;
    --a11y-line-height-factor: 1;
    --a11y-letter-spacing: 0px;
}

/* ---- Toolbar container ---- */
.a11y-toolbar {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    font-size: 14px;
    font-family: inherit;
}

.a11y-toolbar__toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #007bff;
    background: #007bff;
    color: #fff;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s;
    margin-left: auto;
}

.a11y-toolbar__toggle:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: scale(1.05);
}

.a11y-toolbar--dragging .a11y-toolbar__toggle {
    cursor: grabbing !important;
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.a11y-toolbar__toggle:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* ---- Panel ---- */
.a11y-toolbar__panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 1rem;
    margin-bottom: 0.5rem;
    width: 290px;
    display: none;
}

.a11y-toolbar__panel.is-open {
    display: block;
}

.a11y-toolbar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #333;
    font-size: 0.88rem;
}

.a11y-toolbar__close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0.25rem 0.35rem;
    line-height: 1;
    border-radius: 0.25rem;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a11y-toolbar__close:hover { color: #333; }

.a11y-toolbar__close:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 1px;
}

/* ---- Sections ---- */
.a11y-toolbar__section {
    margin-bottom: 0.6rem;
}

.a11y-toolbar__section-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.a11y-toolbar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* ---- Toggle buttons ---- */
.a11y-btn {
    background: #f0f4f8;
    border: 1px solid #dee2e6;
    border-radius: 0.4rem;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    min-height: 32px;
}

.a11y-btn:hover {
    background: #e2e8f0;
    border-color: #adb5bd;
}

.a11y-btn:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 1px;
}

.a11y-btn.is-active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* ---- Counter row ---- */
.a11y-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.a11y-toolbar__row-label {
    font-size: 0.76rem;
    color: #333;
    flex: 1;
}

.a11y-counter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.a11y-counter__btn {
    background: #f0f4f8;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    transition: background 0.15s;
    line-height: 1;
}

.a11y-counter__btn:hover { background: #e2e8f0; }

.a11y-counter__btn:focus-visible {
    outline: 2px solid #007bff;
}

.a11y-counter__val {
    font-size: 0.72rem;
    min-width: 2.8rem;
    text-align: center;
    color: #333;
}

/* ---- Reset button ---- */
.a11y-toolbar__reset {
    width: 100%;
    background: #dc3545;
    border: none;
    color: #fff;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.76rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.15s;
    min-height: 36px;
}

.a11y-toolbar__reset:hover { background: #b02a37; }

.a11y-toolbar__reset:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 1px;
}

/* ============================================================
   Applied accessibility state classes
   ============================================================ */

/* ---- Filter-mode overlay ----
   Using body::before with backdrop-filter instead of filter on body itself.
   When filter is on body it becomes the containing block for position:fixed children,
   which causes the toolbar (position:fixed) to reposition relative to the full page
   height rather than the viewport. backdrop-filter on a ::before overlay avoids this:
   the overlay sits at z-index 9999 (below the toolbar at 10000) so the toolbar is
   never inside the filter's containing block. */

body.a11y-invert::before,
body.a11y-mono::before,
body.a11y-high-saturation::before,
body.a11y-low-saturation::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* Invert colours */
body.a11y-invert::before      { backdrop-filter: invert(1); }

body.a11y-invert img,
body.a11y-invert video,
body.a11y-invert iframe {
    filter: invert(1);
}

/* Monochrome */
body.a11y-mono::before        { backdrop-filter: grayscale(1); }

/* Dark contrast
   background-image: none removes CSS gradients (including gradient text backgrounds).
   -webkit-text-fill-color: #fff overrides the transparent fill used in gradient-text tricks,
   preventing text from disappearing on a dark background. */
body.a11y-dark-contrast {
    background: #000 !important;
    color: #fff !important;
}

body.a11y-dark-contrast *:not(img):not(video):not(iframe) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #555 !important;
}

/* Keep the toolbar readable in dark-contrast mode */
body.a11y-dark-contrast #a11y-toolbar .a11y-toolbar__panel {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
}
body.a11y-dark-contrast #a11y-toolbar .a11y-btn {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body.a11y-dark-contrast #a11y-toolbar .a11y-btn.is-active {
    background-color: #0056b3 !important;
}
body.a11y-dark-contrast #a11y-toolbar .a11y-counter__btn {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body.a11y-dark-contrast #a11y-toolbar .a11y-toolbar__toggle {
    background-color: #007bff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Light contrast — mirrors dark contrast with inverted colours */
body.a11y-light-contrast {
    background: #fff !important;
    color: #000 !important;
}

body.a11y-light-contrast *:not(img):not(video):not(iframe) {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: #ccc !important;
}

body.a11y-light-contrast #a11y-toolbar .a11y-toolbar__panel {
    background-color: #f5f5f5 !important;
}
body.a11y-light-contrast #a11y-toolbar .a11y-toolbar__toggle {
    background-color: #007bff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Saturation */
body.a11y-high-saturation::before { backdrop-filter: saturate(2.5); }
body.a11y-low-saturation::before  { backdrop-filter: saturate(0.4); }

/* Highlight links
   Targets <a> elements AND nav-link/dropdown-item (which may be <button> after a11y conversion).
   background-image: none removes gradient backgrounds on CTA buttons.
   -webkit-text-fill-color: #000 fixes gradient-text links where text would otherwise
   remain transparent (and invisible on the yellow highlight background).
   The child selector ensures icons and nested spans inside links are also visible. */
body.a11y-highlight-links a,
body.a11y-highlight-links .nav-link,
body.a11y-highlight-links .dropdown-item {
    background: #ffff00 !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-decoration: underline !important;
    outline: 2px solid #333 !important;
    outline-offset: 1px !important;
}

/* Make sure child elements (icons, spans) inside highlighted links are also visible */
body.a11y-highlight-links a *,
body.a11y-highlight-links .nav-link *,
body.a11y-highlight-links .dropdown-item * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background-image: none !important;
}

/* Logo / image-only links: the image covers the yellow background, so use a thick
   yellow outline + yellow border to make the highlight visible around the image. */
body.a11y-highlight-links .navbar-brand {
    outline: 4px solid #ffff00 !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    background: #ffff00 !important;
}

/* Breadcrumb links: the overflow:hidden on .enhanced-breadcrumb clips outlines,
   and the glass/gradient background makes yellow hard to read. Use border instead. */
body.a11y-highlight-links .breadcrumb-item a,
body.a11y-highlight-links .breadcrumb a {
    background: #ffff00 !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-decoration: underline !important;
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    padding: 0.1em 0.3em !important;
    outline: none !important;
}

/* Override the sidebar .hover-link:hover !important so highlighted links stay black
   even on hover. specificity must beat (0,2,0) = need at least (0,2,1) */
body.a11y-highlight-links a.hover-link:hover,
body.a11y-highlight-links a.hover-link:focus {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-decoration: underline !important;
    background: #ffff00 !important;
}

/* Highlight headings */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
    background: #ffff00 !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    padding: 0 0.2em !important;
}

body.a11y-highlight-headings h1 *,
body.a11y-highlight-headings h2 *,
body.a11y-highlight-headings h3 *,
body.a11y-highlight-headings h4 *,
body.a11y-highlight-headings h5 *,
body.a11y-highlight-headings h6 * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background-image: none !important;
}

/* Read / focus mode */
body.a11y-read-mode main {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    line-height: 1.85;
}

/* Enhanced focus rings for screen reader mode */
body.a11y-screen-reader *:focus {
    outline: 4px solid #ffdd00 !important;
    outline-offset: 2px !important;
}