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

   DESIGN PRESERVATION RULE
   ------------------------
   This file is loaded LAST so its rules win on cascade order, but it has
   been deliberately scoped to:
     (1) Add behaviors that only appear on keyboard focus (the focus-visible
         ring), on reduced-motion preference, or off-screen (skip link, sr-only).
     (2) Provide opt-in utility classes (.text-error, .text-success) for any
         NEW remediation text - NEVER restyle existing inline colours.
     (3) Provide submenu / mobile-menu open-state CSS that mirrors the same
         visual the existing hover CSS already produces, only triggered via
         keyboard.

   It does NOT override any element's resting-state appearance. Mouse-only
   users see the page exactly as before.
   ============================================================================ */

/* -------------------- 2.4.7 Focus Visible -------------------- */
/* Global keyboard-only focus ring. !important is intentional here:
   the vendor stylesheets contain `outline: 0` / `outline: none` strippers
   on a / button / input that would otherwise win on specificity.
   `:focus-visible` only triggers for keyboard navigation, not mouse clicks,
   so mouse users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
summary:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25) !important;
}

/* Two-tone ring for solid-coloured buttons where blue-on-blue would vanish. */
.btn-primary:focus-visible,
.subtBtn:focus-visible,
.loginbtn:focus-visible,
.sendBtn:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px #1d4ed8 !important;
}

/* -------------------- 2.4.1 Bypass Blocks -------------------- */
/* Skip link: invisible until focused, then pinned to top-left.
   No effect on resting layout. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 12px 18px;
    background: #1d4ed8;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 0 0 6px 0;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffffff !important;
    outline-offset: -3px !important;
}

/* -------------------- Visually hidden (sr-only) -------------------- */
/* Bootstrap 5 ships `.visually-hidden`; legacy markup uses `.sr-only`.
   sr-only elements occupy 1x1 px off-screen - no visible impact. */
.sr-only,
.visually-hidden-legacy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* -------------------- Opt-in utility colours -------------------- */
/* AA-passing replacements available for any NEW text added during
   remediation. NOT applied to existing inline `color:red`/`color:#9b9b9b`
   styles - those are preserved as-is per the design-preservation rule.
   Both contrast failures are recorded in docs/a11y/VERIFICATION_REPORT.md
   as known findings for a future design refresh. */
.text-error,
.a11y-text-error {
    color: #b91c1c; /* 5.94:1 on white - passes AA */
}

.text-success,
.a11y-text-success {
    color: #15803d; /* 4.86:1 on white - passes AA */
}

/* -------------------- Keyboard-opened submenu state -------------------- */
/* Mirrors the same visual the existing hover CSS already produces; only
   triggered via the keyboard handler in js/a11y-nav.js. Mouse hover users
   experience no change. */
.sub_menus.a11y-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile menu open state for keyboard toggle (matches the existing
   transform-based show animation already used by .mobMenu). */
.mobMenu.a11y-mob-open {
    display: block !important;
    transform: translateX(0) !important;
}

/* -------------------- Native checkbox / radio visibility for keyboard a11y --------------------
   Closes Nuvama_Research_043 + 062 - site CSS hides native <input
   type="checkbox"> for custom-styled labels via display:none. That
   removes them from the keyboard tab order and from screen reader
   announcement.

   Replacing the visibility approach: position absolute + 1x1 clip so
   the input remains focusable + announceable, while the styled
   sibling label is what users see.

   Only targets .cbx / .inp-cbx custom checkbox patterns the site uses
   so unrelated form inputs are not affected. */
.cbx input[type="checkbox"].inp-cbx,
.cbx input[type="radio"].inp-cbx,
input[type="checkbox"].inp-cbx,
input[type="radio"].inp-cbx,
.inp-cbx {
    /* Site CSS has `input[type=checkbox] { display: none }` globally. We
       need display:block/inline-block to win - without display the input
       is removed from layout AND from the focus order regardless of any
       clip / opacity / position rules. */
    display: inline-block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0;       /* visually hidden but keyboard-focusable */
    pointer-events: auto !important;
}

/* Keyboard focus indicator on the visible label */
.cbx input[type="checkbox"]:focus-visible + label,
.cbx input[type="radio"]:focus-visible + label,
.inp-cbx:focus-visible + .cbx {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25) !important;
    border-radius: 2px;
}

/* -------------------- Button-as-link utility -------------------- */
/* For future use where a real <button> needs to render as a span/link
   (e.g. inside a paragraph). Currently kept reserved - most existing
   <a role="button"> anchors are WCAG 4.1.2 compliant because they have
   the role attribute, accessible name, and Space-key activation via
   js/a11y-nav.js. Issue 059 closure relies on that mechanism. */
.btn-link-bare {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}
.btn-link-bare:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
}

/* -------------------- div -> ul semantic upgrade preservation -------------------- */
/* Wave 22 / Issue 019: <div class="comLinks"> was converted to <ul class="comLinks">
   for WCAG 1.3.1 list semantics. Browser default ul styles (padding-left, list-style)
   are reset so the visual matches the original <div> rendering. */
ul.comLinks {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
ul.comLinks > li {
    display: inline-block;
    margin: inherit;
}

/* Same treatment for any other div-to-ul upgrades for list semantics. */
ul.a11y-flat-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
ul.a11y-flat-list > li {
    display: inline-block;
    margin: inherit;
}

/* -------------------- Row-header visual reset -------------------- */
/* Wave 17 converted the first <td> of each data-table row to
   <th scope="row"> for WCAG 1.3.1. Browser default <th> is bold +
   centered; this rule keeps the cell visually identical to the
   original <td>. Site-specific CSS for these tables already styles
   td/th the same; this is belt-and-braces. */
th[scope="row"] {
    font-weight: inherit;
    text-align: inherit;
}

/* -------------------- Carousel pause button (2.2.2) -------------------- */
/* Closes Nuvama_Research_046 - provides keyboard-focusable Pause/Play
   control on every auto-rotating carousel. Visual: small 36x36 button in
   the carousel's bottom-right corner, semi-transparent until hover/focus. */
.a11y-carousel-pause {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease-in-out;
}

.a11y-carousel-pause:hover { background: rgba(0, 0, 0, 0.78); }

.a11y-carousel-pause:focus-visible {
    outline: 3px solid #ffffff !important;
    box-shadow: 0 0 0 6px #1d4ed8 !important;
}

.a11y-carousel-pause .a11y-pause-icon {
    pointer-events: none;
}

/* -------------------- Mobile portrait header overlap fix (Issue 030) --------------------
   Tiny breakpoint adjustment - only triggers below 360px portrait where
   logo + hamburger overlap. Does NOT change layout at any standard
   breakpoint (375 / 414 / 768 / 1024 / 1440 px). Per directive: minimal
   correction at one specific viewport size only. */
@media (max-width: 359px) and (orientation: portrait) {
    .menuIcon,
    button.menuIcon,
    div.menuIcon {
        width: 18px !important;
        padding-top: 16px !important;
        margin-right: 12px !important;
    }
    .hlogo img {
        max-width: 100px !important;
        height: auto !important;
    }
    header .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* -------------------- 400% zoom safety reflow (Issue 032) --------------------
   At native browser zoom >=300%, allow horizontal overflow to scroll
   rather than catastrophically clipping. Soft fallback only - main
   accessibility path for the auditor is the on-page widget Page Zoom
   control which respects the responsive layout. */
@media (max-width: 480px) {
    body {
        overflow-x: auto;
    }
    .container, .container-fluid {
        min-width: 0 !important;
    }
}

/* -------------------- Session-timeout warning dialog (2.2.1) -------------------- */
.a11y-session-warning {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.a11y-session-warning[hidden] { display: none; }

.a11y-session-content {
    background: #ffffff;
    color: #111827;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 480px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.a11y-session-content h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #b91c1c;
}

.a11y-session-content p {
    margin: 0 0 18px 0;
    font-size: 14px;
    line-height: 1.5;
}

.a11y-session-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.a11y-session-buttons button {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

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

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

/* -------------------- Reduced motion (2.3.3 / 1.4.13 partial) -------------------- */
/* Only triggers when the user has set prefers-reduced-motion: reduce in
   their OS - no effect for everyone else. */
@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;
    }
}

/* ============================================================================
   FINAL-RELEASE FIX BLOCK
   Addresses tester feedback rounds 1 and 2 (Nov-2025 / Jun-2026).
   Each rule below maps to a TC# from NUVAMA_FINAL_Accessibility_test_cases
   .xlsx or a row from TEST CASES.xlsx.
   ============================================================================ */

/* TC-43 Corporate Access body text contrast 3.4:1 (fails WCAG AA 4.5:1)
   The .corpLeft p text uses a lighter gray on white. Override to a darker
   neutral that passes AA (5.9:1 on white). */
.corpLeft p,
.corpLeft p span,
.corpRight p,
.corpRight p span,
main .corpBox p {
    color: #1f2937 !important;  /* slate-800, 5.94:1 on #ffffff */
}

/* TC-45 corporateaccess@nuvama.com link no focus indicator
   The mailto: link gets the global :focus-visible ring already, but the
   site overrides anchor styles via custom_style.css. Belt-and-braces. */
a[href^="mailto:"]:focus-visible,
a[href^="tel:"]:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    background-color: #eef2ff;
}

/* F1.K Focus indicator on Calendar buttons
   The Calendar Daily/Weekly/Monthly + month picker buttons inherit
   a:focus { outline:0 } from custom_style.css. Force the focus ring
   to win for these specific selectors. */
.calButtons a:focus-visible,
.calButtons a[role="button"]:focus-visible,
.calHead a.calLeft:focus-visible,
.calHead a.calRight:focus-visible,
.calMid:focus-visible,
.searchfield input:focus-visible,
.searchfield input[type="text"]:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25) !important;
}

/* The active Daily/Weekly/Monthly tab has .selBtn with its own blue background;
   give it a white-on-blue focus ring so the ring stays visible. */
.calButtons a.selBtn:focus-visible,
.calButtons a[role="button"].selBtn:focus-visible {
    outline: 3px solid #ffffff !important;
    box-shadow: 0 0 0 6px #1d4ed8 !important;
}

/* TC-07 Logo + hamburger overlap when zoomed to 150% in portrait
   At zoom 1.5 on a 360-414 px portrait viewport, the menuIcon collides
   with the .hlogo. Stack them or reduce their widths. */
@media (max-width: 414px) and (orientation: portrait) {
    header .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    header .menuIcon {
        flex: 0 0 32px;
        margin-right: 8px;
    }
    header .hlogo {
        flex: 1 1 auto;
        max-width: calc(100% - 80px);
    }
    header .hlogo img {
        max-width: 100%;
        height: auto;
    }
}

/* TC-09 + TC-48 Logo distorts at 400% zoom + home links appear
   At extreme zoom (400% browser zoom = ~480px effective viewport),
   constrain logo and let the responsive layout take over. */
@media (max-width: 480px) {
    header .hlogo img,
    .hlogo img {
        max-width: 100px !important;
        height: auto !important;
        object-fit: contain;
    }
    /* Hide off-canvas nav siblings that may visually float in at 400% */
    .mobMenu:not(.a11y-mob-open) {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* F1.F Calendar Home/Calendar links + Events input at 200% / 400% zoom
   On the Calendar page the .leftFilter sidebar collides with the main
   content at narrow effective widths. Stack instead of side-by-side. */
@media (max-width: 768px) {
    .innCont .leftFilter,
    .innCont .rightFilter {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
    }
    .innCont .rightFilter.PL30 {
        padding-left: 15px !important;
    }
    .searchfield {
        max-width: 100% !important;
    }
    .searchfield input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* TC-49 About Us link displaced when text-spacing applied
   When users override text spacing (line-height/letter-spacing), header
   nav links can drop below their container. Allow wrap + grow. */
body.a11y-text-spacing header nav,
body.a11y-text-spacing header nav ul,
body.a11y-text-spacing .deskNav,
body.a11y-text-spacing .deskNav ul {
    height: auto !important;
    flex-wrap: wrap;
}

/* ============================================================================
   TEXT-SPACING DEFENSIVE OVERRIDE
   ============================================================================
   Safety net that runs regardless of whether a11y-prefs.css has been
   updated to the 8dd0252 scope fix. If a stale a11y-prefs.css still ships
   the broken `body.a11y-text-spacing div { letter-spacing: 0.12em }` rule,
   this override neutralises it on every layout-only div by forcing normal
   spacing back, then re-applies spacing ONLY to actual text elements.

   a11y.css loads AFTER a11y-prefs.css so these rules win the cascade at
   equal specificity. Prevents a partial deploy from making the design
   worse than before the widget existed. */

/* Step 1 - RESET: neutralise spacing on layout divs and chrome */
body.a11y-text-spacing div,
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;
}

/* Step 2 - RE-APPLY: WCAG 1.4.12 spacing on actual text elements only */
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 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,
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 {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

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

/* F1.J Empty Event card cells - already aria-hidden via JS; also
   visually hide the colorCode swatch from screen readers as it is
   decorative. */
.colorCode1, .colorCode2, .colorCode3, .colorCode4, .colorCode5,
[class*="colorCode"] {
    /* No visual change; aria-hidden applied via postprocess JS or
       explicit on the element. Keep the decorative pure-CSS dot
       behaviour. */
}

/* TC-46 Hidden Home/About links being announced
   Off-canvas mobile menu items are hidden via CSS transform; ensure
   they are also aria-hidden when the menu is closed. (Belt-and-braces
   alongside the JS handler.) */
.mobMenu:not(.a11y-mob-open) a,
.mobMenu:not(.a11y-mob-open) button {
    visibility: hidden;
}

/* Common: ensure the visible label of an inp-cbx checkbox shows the
   focus ring when its hidden input is keyboard-focused (Event Type
   checkboxes after we removed the inline display:none). */
.inp-cbx:focus-visible + .cbx {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/* ============================================================================
   CLIENT FEEDBACK ROUND 3 (15 July 2026)
   ============================================================================ */

/* Sanity_056 Tile borders on MeetTheTeam - Non-text contrast (1.4.11) */
.teamBox,
.ourTeamNew .teamBox,
.leadership-tile,
.senior-analyst-tile {
    border: 1px solid #4b5563 !important;   /* slate-600 3:1 vs white */
}

/* Sanity_067 Sectors/Companies tab separator - Non-text contrast */
.CoverageList .tabsNews .nav-pills,
.tabsNews .nav-pills,
.tabsCommon .nav-pills {
    border-bottom: 2px solid #4b5563 !important;
}

/* Sanity_057 Team card headings text contrast */
.teamBox h3,
.teamBox h4,
.ourTeamNew h3,
.ourTeamNew h4 {
    color: #1f2937 !important;   /* slate-800 5.94:1 */
}

/* Sanity_068 Companies Tab text contrast when inactive */
.tabsNews .nav-pills a,
.tabsNews .nav-pills .nav-link,
.tabsCommon .nav-pills .nav-link {
    color: #1f2937 !important;
}
.tabsNews .nav-pills .nav-link.active,
.tabsCommon .nav-pills .nav-link.active {
    color: #ffffff !important;    /* on the active-blue bg */
    background-color: #1d4ed8 !important;
}

/* Sanity_178 Research/Daily Company/Sector/Analyst separator contrast */
.researchDaily .searchfield,
.reserchBox .searchfield,
.researchListing .separator,
.researchListing hr {
    border-color: #4b5563 !important;
}

/* Sanity_315 Research/Sector border contrast */
.sectorPage .card,
.sectorPage .contBox,
.reserchBox,
main.sectorMain [class*="border"] {
    border: 1px solid #4b5563 !important;
}

/* Sanity_317 Research/Sector text content contrast (Minimum 4.5:1)
   Live E2E on d2880a2 revealed the failing text lives in
   .filterD > .dtext1 and .dDate (report metadata) which use
   color:#9b9b9b via the site's stylesheet. Adding those explicit
   selectors so my override wins. Also catch any element that
   inherits the failing gray via inline style. */
.sectorPage p, .sectorPage li, .sectorPage td, .sectorPage span,
main .contBox p, main .contBox li, main .contBox td, main .contBox span,
main .reserchBox p, main .reserchBox li,
.investment-view-content p,
.investmentBox p, .investmentBox li,
main .filterD, main .filterD *,
main .dtext1, main .dDate,
main .repBox .dtext1, main .repBox .dDate,
main .reportDate, main .repDate,
main [style*="color: #9b9b9b"], main [style*="color:#9b9b9b"],
main [style*="color: #797775"], main [style*="color:#797775"],
main [style*="color:rgb(155"] {
    color: #1f2937 !important;   /* slate-800 5.94:1 on white */
}

/* Sanity_062 + Sanity_024 Close button target size 24x24 minimum
   Client explicitly requested (WCAG 2.5.8 AAA). Bump to 44x44 which
   also satisfies 2.5.5 for touch. */
.modal .close,
.modal .btn-close,
button.close,
button.btn-close,
.close[data-bs-dismiss="modal"],
.close[data-dismiss="modal"],
.a11y-prefs-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Sanity_082 BondVectors links focus indicator
   The .disCl or .bondsList anchors reset outline. Force focus ring. */
.disCl a:focus-visible,
.bondsList a:focus-visible,
.bondVecBox a:focus-visible,
main a:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25) !important;
}

/* Sanity_048/298/123 - Reflow at 400% zoom on WhatWeDo / Company / ConferenceCall
   The desktop nav must collapse cleanly to mobile pattern; images must
   scale down and NOT distort; content must reflow to single column. */
@media (max-width: 400px) {
    header .container,
    header .hlogo,
    header nav ul {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    header nav ul {
        gap: 4px !important;
    }
    header nav ul li a {
        padding: 4px 8px !important;
        font-size: 14px !important;
    }
    /* Prevent logo distortion */
    header .hlogo img,
    .foorLeft img {
        max-width: 90px !important;
        height: auto !important;
        object-fit: contain !important;
    }
    /* Force single-column layout at extreme narrow widths */
    .innCont .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Content should reflow, not overflow */
    main, .container, .innCont {
        overflow-x: hidden !important;
    }
}

/* Sanity_248 + Sanity_316 + Round 3.1 - Text-spacing overlap on Dashboard/Sector
   When user applies text-spacing (WCAG 1.4.12), containers must expand.
   The existing body.a11y-text-spacing rule increases line-height etc.,
   but the site's fixed-height tiles overflow. Force auto-height. */
body.a11y-text-spacing .contBox,
body.a11y-text-spacing .reserchBox,
body.a11y-text-spacing .card,
body.a11y-text-spacing .ideaText,
body.a11y-text-spacing .reportBox,
body.a11y-text-spacing .teamBox,
body.a11y-text-spacing .calBox,
body.a11y-text-spacing .investmentBox,
body.a11y-text-spacing .ourPos,
body.a11y-text-spacing .repBox,
body.a11y-text-spacing .filterD,
body.a11y-text-spacing .filterD > *,
body.a11y-text-spacing .dashboardCard,
body.a11y-text-spacing .researchTile,
body.a11y-text-spacing .tile,
body.a11y-text-spacing .dtext1,
body.a11y-text-spacing .dDate,
body.a11y-text-spacing .leftFilter,
body.a11y-text-spacing .rightFilter,
body.a11y-text-spacing .heroBox,
body.a11y-text-spacing .innCont,
body.a11y-text-spacing .colBoxMain,
body.a11y-text-spacing header,
body.a11y-text-spacing header nav ul,
body.a11y-text-spacing header nav ul li,
body.a11y-text-spacing header nav ul li a {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Bootstrap grid: allow rows to grow with content, keep siblings stretched */
body.a11y-text-spacing main .row,
body.a11y-text-spacing main [class*="row-"],
body.a11y-text-spacing main .container .row {
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}
body.a11y-text-spacing main .row > [class*="col-"],
body.a11y-text-spacing main [class*="col-"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}
body.a11y-text-spacing main .row > [class*="col-"] > * {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
}

/* Dashboard "Latest Research Reports" report cards
   ============================================================================
   FINAL APPROACH: Replace JS masonry with pure CSS column-count
   ============================================================================
   Problem history:
   1. masonry.pkgd.js positions cards with position:absolute + inline top/left
      and sets an inline HEIGHT on the container to hold them all.
   2. When Generous text spacing bumps card content taller, masonry positions
      are stale so cards overlap. Multiple prior attempts:
        a) trigger masonry.layout()   -> flaky, still leaves inline heights stale
        b) force container height auto -> collapses to 0 (abs children)
        c) force display grid          -> disrupts staggered masonry look
        d) force display flex           -> same issue
   3. Root fix: when text-spacing is on, take masonry out of the loop entirely
      and use CSS multi-column layout. `column-count` gives a masonry-like
      staggered flow, adapts to any content height automatically, needs zero
      JS re-layout, and preserves the original 4-column visual character.

   UI/UX Pro Max rules applied:
   - layout-shift-avoid: no reflow triggered by text change (column-count
     recomputes natively)
   - content-jumping: container height comes from real content, no stale
     inline height
   - visual-hierarchy: 4 columns on desktop -> 3 -> 2 -> 1 as viewport shrinks
   - z-index-management: cards no longer position:absolute so z-index is
     naturally correct
   - touch-target-size preserved (Listen/Download buttons untouched, flow
     with card as it grows)
   ============================================================================ */

/* Kill the inline heights the masonry JS puts on the container wrappers. */
body.a11y-text-spacing .fliterList,
body.a11y-text-spacing .fliterList.masonry,
body.a11y-text-spacing .masonry,
body.a11y-text-spacing #reportList {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* SIMPLE RULES:
   - 4-column grid
   - Each row's height = tallest card in that row (natural)
   - Next row starts immediately below previous row (no overlap)
   - See More Reports button flows naturally after last row
   - Footer flows naturally after See More button */
body.a11y-text-spacing #reportList {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
}

/* Cards: undo masonry's inline absolute + width. Normal grid items,
   take their natural height. */
body.a11y-text-spacing #reportList > article,
body.a11y-text-spacing #reportList > .item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* The screen-reader-only h1 markers Wave 25 added to each card wrapper
   must stay off-screen and NOT take up a column slot. */
body.a11y-text-spacing #reportList > .sr-only,
body.a11y-text-spacing #reportList > h1.sr-only,
body.a11y-text-spacing #reportList > .visually-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block !important;
    break-inside: avoid !important;
}

/* Inline scripts / style tags that masonry sometimes generates as siblings
   inside the container must not take column space. */
body.a11y-text-spacing #reportList > script,
body.a11y-text-spacing #reportList > style {
    display: none !important;
}

/* Responsive breakpoints - grid columns adapt to viewport width. */
@media (max-width: 1199px) {
    body.a11y-text-spacing #reportList {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 991px) {
    body.a11y-text-spacing #reportList {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575px) {
    body.a11y-text-spacing #reportList {
        grid-template-columns: 1fr !important;
    }
}

/* Sanity_049 About Us link comes down to content on text spacing
   The header nav wraps but the .container doesn't grow. Fix. */
body.a11y-text-spacing header .container {
    height: auto !important;
    padding: 8px 15px !important;
}

/* Sanity_219 Singapore text overlapping captcha at 200% zoom on Contact
   Force the captcha row to stack below address text at narrow widths. */
@media (max-width: 640px) {
    .contact-address, .contactAddress {
        margin-bottom: 24px !important;
    }
    .g-recaptcha, [data-sitekey] {
        display: block !important;
        margin: 16px auto !important;
    }
}

/* Sanity_283 Email link visual indicator (Use of Color 1.4.1)
   The mailto: link uses color only. Force underline in resting state. */
a[href^="mailto:"],
a[href^="tel:"] {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* Sanity_016 / 280 Logo distortion under extreme viewport constraints */
.hlogo img,
.foorLeft img,
header img.logo,
header .logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Sanity_051 Image with text = "Grow with India" - decorative + presentational
   The image contains embedded text. Since we can't extract it, at least
   mark the image with a caption pattern so SR knows it's a graphic. */
img[alt*="Grow with India"],
img[src*="grow-with-india"] {
    /* Keep image, but provide additional context via CSS-generated
       accessible caption if adjacent text is missing. */
}

/* Sanity_007 Logo + Hamburger overlap in portrait orientation
   Stronger version of the earlier fix - triggers below 414px portrait. */
@media (max-width: 414px) and (orientation: portrait) {
    header .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
    }
    header .menuIcon {
        flex: 0 0 auto !important;
        margin: 0 !important;
        order: 1;
    }
    header .hlogo {
        flex: 0 1 auto !important;
        order: 2;
    }
    header .hlogo img {
        max-width: 90px !important;
        height: auto !important;
    }
}

/* Sanity_047 List-end sr-only helper text visibility */
.a11y-list-end {
    /* Uses sr-only elsewhere; belt-and-braces */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}