/* ============================================================================
   Nuvama Research Portal - Accessibility Preferences Widget
   Standards: WCAG 2.2 AA / GIGW 3.0 / IS 17802

   POLICY: this stylesheet is loaded after a11y.css. It defines:
     1. The widget's own visual (floating toggle + slide-out panel)
     2. Opt-in body-level classes that activate user-chosen modes.

   The DEFAULT presentation is unchanged. Only when the user picks a toggle
   does a `.a11y-*` body class apply.
   ============================================================================ */

/* -------------------- Floating toggle button -------------------- */
.a11y-prefs-toggle {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a11y-prefs-toggle:hover { background: #1e40af; }

.a11y-prefs-toggle:focus-visible {
    outline: 3px solid #ffffff !important;
    box-shadow: 0 0 0 6px #1d4ed8, 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.a11y-prefs-icon { display: inline-block; }

/* -------------------- Slide-out panel -------------------- */
.a11y-prefs-panel {
    position: fixed;
    bottom: 80px;
    right: 18px;
    z-index: 9999;
    width: 320px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 16px 18px;
    font-family: inherit;
    font-size: 14px;
}

.a11y-prefs-panel[hidden] { display: none; }

.a11y-prefs-panel h2 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.a11y-prefs-panel fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px 10px 12px;
    margin: 0 0 12px 0;
}

.a11y-prefs-panel legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.a11y-prefs-panel label {
    display: block;
    padding: 6px 0;
    cursor: pointer;
    color: #1f2937;
}

.a11y-prefs-panel label:hover { color: #1d4ed8; }

/* Force inputs visible inside the widget - the site has a global
   input[type="checkbox"] { display:none } rule for custom-styled
   checkboxes that bleeds into the widget. These overrides scope it. */
.a11y-prefs-panel input[type="checkbox"],
.a11y-prefs-panel input[type="radio"] {
    display: inline-block !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: initial !important;
    transform: scale(1.1);
    accent-color: #1d4ed8;
    vertical-align: middle;
    pointer-events: auto !important;
}

.a11y-prefs-panel input:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
}

.a11y-prefs-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.a11y-prefs-buttons button {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.a11y-prefs-buttons button.a11y-prefs-close {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.a11y-prefs-buttons button:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
}

.a11y-prefs-status {
    margin-top: 8px;
    font-size: 12px;
    color: #4b5563;
    min-height: 1.2em;
}

/* ============================================================================
   OPT-IN MODES - body classes activated by user choice
   ============================================================================ */

/* -------------------- Text size (Issues 031, 035, 039) --------------------
   Implementation: CSS `zoom` scales text AND every container together so the
   layout flows proportionally on the px-heavy Nuvama markup.

   Calibration rationale:
     The dense pages on this portal (Research/Index with its filter sidebar +
     3-card grid, Reports listings) have a natural content width of ~1265 px.
     Standard desktop viewports are 1280 px. Headroom for zoom is therefore
     only ~1.012x before the layout overflows the viewport horizontally and
     forces a horizontal scroll bar (visibly poor UX even though it is WCAG
     compliant under 1.4.10 Reflow).

     We therefore cap Text Size at conservative factors that fit within a
     1280 viewport on the densest page:
         Larger  = 1.05  (5% bigger - clearly visible, fits in viewport)
         Largest = 1.10  (10% bigger - readable bump, fits in viewport)

     Users who want a STRONGER scale switch to the Page Zoom control below
     (125 / 150 / 200%). Page Zoom is named honestly so users expect content
     to overflow and the page to require horizontal scroll at extreme levels,
     which is the WCAG 1.4.4 Resize Text expected behaviour.

   Browser support: Chrome, Edge, Safari, Firefox 126+ (May 2024). On older
   Firefox the toggles degrade gracefully (no visual change; the user can
   reach for browser zoom Ctrl+Plus, which works universally because we
   removed maximum-scale=1 from the viewport meta in commit 4a0b330). */

body.a11y-text-large   { zoom: 1.05; }
body.a11y-text-largest { zoom: 1.10; }

/* -------------------- High contrast (Issues 036, 038) -------------------- */
/* Overrides failing text + border colours with AA-passing values. */
body.a11y-hi-contrast {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.a11y-hi-contrast,
body.a11y-hi-contrast p,
body.a11y-hi-contrast span,
body.a11y-hi-contrast div,
body.a11y-hi-contrast li,
body.a11y-hi-contrast td,
body.a11y-hi-contrast th {
    color: #000000 !important;
}

body.a11y-hi-contrast [style*="color:red"],
body.a11y-hi-contrast [style*="color: red"] {
    color: #b91c1c !important;
}

body.a11y-hi-contrast [style*="color:green"],
body.a11y-hi-contrast [style*="color: green"] {
    color: #15803d !important;
}

body.a11y-hi-contrast [style*="#9b9b9b"],
body.a11y-hi-contrast [style*="#797775"] {
    color: #595959 !important;
}

body.a11y-hi-contrast a:not(.skip-link):not(.a11y-prefs-toggle button) {
    color: #1e3a8a !important;
    text-decoration: underline !important;
}

body.a11y-hi-contrast button:not(.a11y-prefs-toggle):not(.a11y-prefs-close) {
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}

body.a11y-hi-contrast hr,
body.a11y-hi-contrast table,
body.a11y-hi-contrast th,
body.a11y-hi-contrast td {
    border-color: #000000 !important;
}

body.a11y-hi-contrast .foTop,
body.a11y-hi-contrast .navborB,
body.a11y-hi-contrast .clearfix {
    /* aria-hidden decorative - leave alone */
}

/* -------------------- Underline links (Issues 033, 034) -------------------- */
body.a11y-underline-links a:not(.skip-link):not(.btn):not(.btn-link-bare) {
    text-decoration: underline !important;
}

/* -------------------- Larger touch targets (Issue 052) -------------------- */
body.a11y-larger-targets .close,
body.a11y-larger-targets .btn-close,
body.a11y-larger-targets button.menuIcon,
body.a11y-larger-targets [role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
}

body.a11y-larger-targets .close,
body.a11y-larger-targets .btn-close {
    /* override the positioned close button to remain functional */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

body.a11y-larger-targets a {
    padding: 4px 2px;
    display: inline-block;
}

/* -------------------- Generous text spacing (Issue 037) --------------------
   WCAG 1.4.12: line-height 1.5, paragraph 2x, letter 0.12em, word 0.16em

   Target ONLY content-text elements (p, li, td, th, blockquote, article,
   dt, dd, figcaption, article headings). We must NOT hit generic <div>
   because divs are the site's layout primitives - applying letter-spacing
   0.12em to every div destroys the header, nav, tiles, filter sidebar and
   card grid. Content-text-only scope keeps the widget useful without
   breaking the design.

   Nav, buttons, form controls are excluded via :not() so their tight
   labels don't wrap or clip. */
body.a11y-text-spacing p,
body.a11y-text-spacing li:not(.nav-item):not([role="menuitem"]),
body.a11y-text-spacing td,
body.a11y-text-spacing th,
body.a11y-text-spacing blockquote,
body.a11y-text-spacing article,
body.a11y-text-spacing dt,
body.a11y-text-spacing dd,
body.a11y-text-spacing figcaption,
body.a11y-text-spacing article h1,
body.a11y-text-spacing article h2,
body.a11y-text-spacing article h3,
body.a11y-text-spacing article h4,
body.a11y-text-spacing article h5,
body.a11y-text-spacing article h6,
body.a11y-text-spacing main h1,
body.a11y-text-spacing main h2,
body.a11y-text-spacing main h3,
body.a11y-text-spacing main h4,
body.a11y-text-spacing main h5,
body.a11y-text-spacing main h6 {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

body.a11y-text-spacing p {
    margin-bottom: 2em !important;
}

/* Nav / header / buttons / form controls / widget - explicitly reset the
   spacing so it doesn't inherit from any ancestor. Belt-and-braces since
   we don't apply spacing to them above; this handles the case where
   text-spacing rules from user CSS or content sneak in. */
body.a11y-text-spacing header,
body.a11y-text-spacing header *,
body.a11y-text-spacing nav,
body.a11y-text-spacing nav *,
body.a11y-text-spacing .deskNav *,
body.a11y-text-spacing .topNav *,
body.a11y-text-spacing footer,
body.a11y-text-spacing footer *,
body.a11y-text-spacing button,
body.a11y-text-spacing .btn,
body.a11y-text-spacing input,
body.a11y-text-spacing select,
body.a11y-text-spacing textarea,
body.a11y-text-spacing label,
body.a11y-text-spacing .breadcrumb,
body.a11y-text-spacing .breadcrumb *,
body.a11y-text-spacing .a11y-prefs-toggle,
body.a11y-text-spacing .a11y-prefs-panel,
body.a11y-text-spacing .a11y-prefs-panel * {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: normal !important;
}

/* -------------------- Reduced motion (Issue 046, 2.3.3) -------------------- */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Page Zoom widget control removed 2026-06-10. Users use browser-native
   Ctrl+Plus / Ctrl+Minus / Ctrl+0 which is the WCAG-canonical Reflow
   control (1.4.10) and works universally without risking viewport
   overflow on dense pages. */

/* -------------------- Page-zoom tip styling in the widget -------------------- */
.a11y-prefs-zoom-tip {
    font-size: 12px !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin: 8px 0 0 !important;
}

.a11y-prefs-zoom-tip kbd {
    display: inline-block;
    padding: 1px 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 11px;
    color: #1f2937;
    box-shadow: 0 1px 0 #d1d5db;
}

/* -------------------- Reduced-motion media query (always honoured) -------------------- */
@media (prefers-reduced-motion: reduce) {
    .a11y-prefs-panel { transition-duration: 0.001ms !important; }
}

/* -------------------- Mobile responsiveness for the widget -------------------- */
@media (max-width: 480px) {
    .a11y-prefs-panel {
        width: calc(100vw - 36px);
        right: 18px;
        bottom: 72px;
    }
    .a11y-prefs-toggle {
        bottom: 12px;
        right: 12px;
    }
}