/* ============================================
   accessibility.css
   JM Financial Research Portal
   WCAG 2.1 Level A + AA Compliance Fixes
   Generated: 2026-07-07
   Load AFTER all existing stylesheets. Uses existing
   project selectors only — no new classes added to markup
   except a11y helpers (.sr-only, .skip-link).
   ============================================ */

/* --- 1. Skip Navigation Link (WCAG 2.4.1) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: #1b2a6b;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
}

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

/* --- 2. Visible Focus Styles (WCAG 2.4.7 / issue #1) --- */
/* Applies to every interactive element; replaces any outline:none in the theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.headerSearch:focus-visible,
.advanceBox:focus-visible,
.advClose:focus-visible,
.searchClose:focus-visible,
.searchClose2:focus-visible,
.btnDownLink:focus-visible,
.acme-news-ticker-pause:focus-visible,
.dropdown-toggle:focus-visible,
.nav-menu a:focus-visible {
    outline: 3px solid #1b57c4 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Fallback for browsers without :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus {
    outline: 3px solid #1b57c4;
    outline-offset: 2px;
}

/* Keep focus visible against the dark header */
header a:focus-visible,
header [role="button"]:focus-visible,
.nav-menu a:focus-visible,
.proDrop .dropdown-toggle:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

/* --- 3. Colour Contrast Fixes (WCAG 1.4.3) --- */
/* Footer links: #96A5E2 on the dark footer falls below 4.5:1. Lighten to pass. */
#footercolor .footer-links,
#footercolor .footer-text a {
    color: #dfe6ff !important;
}
/* Muted helper text used across cards / filters (#96A5E2, #a0a0a0 etc.) */
.color_gray_light,
.turnover-note,
.smLine {
    color: #4a4a4a !important;
}

/* --- 4. Touch Target Sizes --- */
/* NOTE: WCAG 2.1 Level AA has NO minimum target-size requirement (that is a
   2.1 AAA / 2.2 AA criterion). To avoid altering the theme, all icon controls
   (search, close/clear, download, ticker, profile) keep their ORIGINAL size and
   position. Only the plain text Sort-by buttons get a slightly comfier hit area,
   which does not change any icon's appearance. */
.sortByBtn {
    min-height: 32px;
}

/* --- 5. Button reset for controls converted from <a> to <button> --- */
/* Keeps the visual design identical after semantic <a> -> <button> swaps. */
button.applyBtn,
button.resetBtn,
button.btn,
button.sortByBtn,
button.acme-news-ticker-pause {
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* Pill style for the Sort-by buttons — mirrors the theme's original
   `.sortBox a` look (style.css) now that these are <button> elements. */
button.sortByBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin-left: 6px;
    padding: 4px 10px;
    color: #2A3C86;
    background: #2A3C860F;
    border: 1px solid #2A3C864D;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
button.sortByBtn:hover,
button.sortByBtn:focus-visible {
    background: #2A3C86;
    color: #ffffff;
}

/* Advance Search Search/Reset: mirror the theme's original .filter_btns a look
   now that these are <button> elements (converted for issue #11). */
.filter_btns button {
    display: flex;
    width: 105px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: solid 1px #f66;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #808080;
    background-color: #fff;
}
.filter_btns button.applyBtn {
    box-shadow: transparent;
    background-color: #fff;
    border: solid 1px #ED3123;
    color: #ED3123;
    margin-top: 20px;
}
.filter_btns button.applyBtn:hover {
    background-color: #ED3123;
    color: #fff;
}
.filter_btns button.resetBtn {
    margin-top: 20px;
    border-color: #E2E2E2;
    color: #2A3C86;
}
.filter_btns button.resetBtn:hover {
    background-color: #ED3123;
    color: #fff;
    border: solid 1px #ED3123;
}
button.acme-news-ticker-pause {
    background-color: transparent;
    border: 0;
    padding: 0;
}

/* "View More reports": mirror the theme's original .commonBtn a look now that
   it is a <button> element (converted for issue #18). */
.commonBtn button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ED3123;
    font-size: 13px;
    font-weight: 600;
    border: solid 1px #ED3123;
    height: 44px;
    padding: 0 20px;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.commonBtn button:hover {
    background: #2A3C86;
    border: solid 1px #2A3C86;
    color: #fff;
}

/* --- 6. Fieldset/legend reset (issue #13) --- */
/* The grouping fieldset must not introduce a border or spacing that alters layout. */
.filterFieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* Spacing between Advance Search fields (per reference) */
.advanceBoxMain .filter_container ul.row > li {
    margin-bottom: 20px;
}

/* --- 7. Text Spacing & Resize (WCAG 1.4.4 / 1.4.12) ---
   The theme is designed at body line-height:1 with explicit per-element
   line-heights. WCAG 1.4.12 only requires that content not clip or overlap when
   a USER applies wider spacing (e.g. line-height 1.5) — it does NOT require the
   site to set 1.5 itself. Forcing it here inflated dense layouts (DashBoard
   turnover tables, Company.html divTables), so we keep the theme's original
   spacing and rely on the layout tolerating user-applied spacing instead. */

/* --- 7b. Featured Reports financial tables: restore the theme's compact
   spacing. The global line-height above inflates these dense tables; the
   theme originally rendered them at body line-height:1. WCAG 1.4.12 only
   requires no clipping when a USER applies wider spacing, so tightening the
   site's own default here is compliant. */
.turnover-table,
.turnover-table th,
.turnover-table td,
.turnover-note {
    line-height: 1.15;
}

/* --- 8. Motion & Animation Preferences (WCAG 2.2.2 / 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Stop the auto-scrolling ticker for users who prefer reduced motion */
    .acmeticker-wrap .my-news-ticker-2 {
        position: static !important;
        left: 0 !important;
    }
}

/* --- 9. Keyboard-opened nav dropdowns (mirror the theme's :hover state) --- */
/* accessibility.js adds .a11y-open when a dropdown is opened via keyboard. */
.nav-menu .drop-down.a11y-open > ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* --- Multi-select options: whole-row focus highlight for keyboard users (issue #10) --- */
.ms-options-wrap > .ms-options > ul label:focus-within {
    background-color: #dbe4ff;
    outline: 2px solid #1b57c4;
    outline-offset: -2px;
}

/* --- 10. JS-added carousel controls (issue #21) --- */
.a11y-carousel-controls {
    display: none;
    gap: 8px;
    justify-content: center;
    margin: 8px 0 16px;
}
.a11y-carousel-btn {
    font: inherit;
    min-height: 36px;
    min-width: 64px;
    padding: 6px 14px;
    border: 1px solid #1b2a6b;
    border-radius: 4px;
    background: #ffffff;
    color: #1b2a6b;
    cursor: pointer;
}
.a11y-carousel-btn:hover {
    background: #1b2a6b;
    color: #ffffff;
}

/* --- 10b. Download control converted from <a> to real <button> (issue #16) ---
   Strip the default button chrome and present a comfortable, padded circular
   download button (the icon itself is the background-image from .btnDownLink in
   style.css; only the box/padding is added here). */
button.btnDownLink {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #2A3C860F;
    background-clip: padding-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font: inherit;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s ease;
}
button.btnDownLink:hover,
button.btnDownLink:focus-visible {
    background-color: #2A3C861A;
}

/* --- 10c. Trending Reports & Events panels: always equal height on web ---
   Both panels use .h344 (fixed 344px). Relax to a floor and let the flex row
   stretch them together so they stay level even if content grows. */
@media (min-width: 769px) {
    .sep2Box { align-items: stretch; }
    .sep2BoxLeft,
    .sep2BoxRight { display: flex; }
    .sep2BoxLeft > .commonBox,
    .sep2BoxRight > .commonBox { width: 100%; }
    .sep2BoxLeft > .commonBox.h344,
    .sep2BoxRight > .commonBox.h344 {
        height: auto;
        min-height: 344px;
    }
}

/* --- 11. High Contrast / Forced Colors Support (WCAG 1.4.11) --- */
@media (forced-colors: active) {
    .skip-link:focus,
    a:focus,
    button:focus,
    [role="button"]:focus,
    [tabindex]:focus {
        outline: 3px solid CanvasText !important;
    }
    .btnDownLink,
    .acme-news-ticker-pause {
        forced-color-adjust: auto;
    }
}