/* =========================================================================
   Accessibility enhancements — WCAG 2.2 (Level A/AA)
   Added to remediate the IAAP audit findings. Loaded AFTER style.css /
   responsive.css so these rules take precedence.
   Covers audit points: 3 (contrast), 4 (reflow), 8 (skip link),
   9 (focus visible), 12 (target size).
   ========================================================================= */

/* ---- #8  Bypass Blocks: "Skip to main content" link (2.4.1) -------------
   Permanently visible, styled as a button in the top header (matching the
   SEBI-registered broker convention). It is a normal in-flow bar at the very
   top of the page (its own row above the navigation) — NOT floating/absolute —
   so it never overlaps the logo, menu or hamburger. */
.a11y-skip-bar {
    width: 100%;
    background: #03264c;
    border-bottom: 1px solid #062f5c;
}
.a11y-skip-bar .container {
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: right;
}
.skip-to-main {
    position: static;
    display: inline-block;
    background: #054d9a;
    color: #ffffff !important;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #2f74c0;
    border-radius: 4px;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}
.skip-to-main:hover {
    background: #1a6bc4;
    border-color: #1a6bc4;
    color: #ffffff !important;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
    background: #1a6bc4;
    border-color: #ffffff;
    color: #ffffff !important;
    outline: 3px solid #ffd54a;
    outline-offset: 2px;
}
@media (max-width: 767px) {
    .a11y-skip-bar .container {
        text-align: center;
    }
    .skip-to-main {
        padding: 6px 14px;
        font-size: 12px;
    }
}
/* The main landmark should not show an outline when focused programmatically
   via the skip link. */
#main-content:focus {
    outline: none;
}

/* ---- #9  Focus Visible: keyboard focus indicator (2.4.7) ---------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus,
.navbar-toggle:focus,
.panel-title a:focus,
.scrollToHome:focus {
    outline: 3px solid #0a58ca;
    outline-offset: 2px;
}
/* Where the browser supports :focus-visible, hide the ring for mouse users
   but keep it for keyboard users. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.navbar-toggle:focus:not(:focus-visible) {
    outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.navbar-toggle:focus-visible,
.panel-title a:focus-visible,
.scrollToHome:focus-visible {
    outline: 3px solid #0a58ca;
    outline-offset: 2px;
}
/* On dark backgrounds (footer, coloured panels) use a light-amber ring so it
   stays visible against the navy / dark surfaces. */
.ulockd-footer a:focus,
.ulockd-footer a:focus-visible,
.panel-body a:focus,
.panel-body a:focus-visible,
.scrollToHome:focus,
.scrollToHome:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 2px;
}

/* ---- #12  Target Size (Minimum) 24 x 24 CSS px (2.5.8) ------------------ */
.navbar-toggle {
    min-width: 44px;
    min-height: 44px;
}
.close {
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 10px;
}
.scrollToHome {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
}
.btn,
a.btn {
    min-height: 24px;
}
/* Breadcrumb links sit close together — give them a bit of height/padding. */
.ulockd-icd-sub-menu li a {
    display: inline-block;
    min-height: 24px;
    padding: 2px 6px;
}

/* ---- #3  Contrast (Minimum) 4.5:1 / 3:1 (1.4.3) ------------------------- */
/* Default body copy was #777 on #fff (~4.48:1 — just fails). Darken it. */
body {
    color: #595959;
}
/* Footer links inherited the global a-colour #555 on the navy #03264c
   footer, which fails badly. Force a light, high-contrast colour. */
.ulockd-footer a {
    color: #e8e8e8;
}
.ulockd-footer a:hover,
.ulockd-footer a:focus {
    color: #ffffff;
}
/* (The grey service boxes on the home page had #fff text on #6f6f6f — those
   are darkened to #4f4f4f directly in the page markup.) */

/* ---- #4  Reflow at 320 CSS px — no 2-D scrolling (1.4.10) ---------------- */
/* The on-load risk-disclosure pop-up used a fixed 750px width and absolute
   left offset, which forced horizontal scrolling on narrow screens. Make it
   fluid and vertically scrollable instead. */
#ac-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#popup {
    width: 90% !important;
    max-width: 750px;
    height: auto !important;
    left: 0 !important;
    top: 5% !important;
    margin: 0 auto 5% auto;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}
#popup .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
}
/* Safety nets so no element forces the page wider than the viewport. */
img,
iframe,
table {
    max-width: 100%;
}
iframe {
    border: 0;
}
/* Keep all horizontal overflow clipped so the page only ever scrolls
   vertically (single-dimension scrolling) — the core of 1.4.10. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}
.container,
.container-fluid {
    max-width: 100%;
}
/* animate.css entrance effects (fadeInRight / fadeInUp …) start the element
   translated off-canvas; on small screens that pushed content past the right
   edge and forced a second scroll axis. Neutralise the transforms there. */
@media (max-width: 600px) {
    .animated {
        -webkit-animation: none !important;
        animation: none !important;
    }
    .fadeInRight,
    .fadeInLeft,
    .fadeInUp,
    .fadeInDown,
    .animated.fadeInRight,
    .animated.fadeInLeft,
    .animated.fadeInUp,
    .animated.fadeInDown {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}
@media (max-width: 480px) {
    #popup {
        width: 94% !important;
        top: 2% !important;
        padding: 12px !important;
    }
    #popup h2 {
        font-size: 20px;
    }
    #popup h4 {
        font-size: 16px;
    }
}