/* ============================================================
   Accessibility overrides for Affluenz Wealth Advisors
   Added 2026-04-23 for SEBI accessibility audit remediation
   (refs: RIA_Table-C3_INA200001231_012032026.xlsx)
   ============================================================ */

/* --- Skip to main content link (WCAG 2.4.1 Bypass Blocks) --- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #012068;
    color: #ffffff;
    padding: 10px 18px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom-right-radius: 4px;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffcc00;
    outline-offset: 0;
    color: #ffffff;
    text-decoration: underline;
}

/* --- Visually hidden utility (screen reader only) --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Ensure <main> does not announce a focus outline when reached via skip link --- */
main:focus {
    outline: none;
}

/* --- Visible focus indicator across interactive elements (WCAG 2.4.7) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
}

/* --- Keyboard-accessible dropdowns (WCAG 2.1.1 Keyboard) ---
   Main-menu dropdowns were previously hover-only. Mirror the :hover
   declarations on :focus-within so keyboard users can open the submenu
   by Tab-focusing its trigger link. We also re-assert the :hover
   behaviour with !important + display:block so later cascade rules
   (contrast overrides, responsive flex-wrap) cannot accidentally
   suppress the dropdown. */
.main-menu .navigation > li.dropdown:hover > ul,
.main-menu .navigation > li.dropdown:focus-within > ul,
.main-menu .navigation li.dropdown:hover > ul,
.main-menu .navigation li.dropdown:focus-within > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 100% !important;
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg) !important;
    pointer-events: auto !important;
    z-index: 1100;
}
.main-menu .navigation li > ul > li.dropdown:hover > ul,
.main-menu .navigation li > ul > li.dropdown:focus-within > ul {
    top: 0 !important;
}

/* Ensure the main header sits above the inerted sticky header layer
   and above any later page content that may overlay it. */
.main-header {
    position: relative;
    z-index: 1050;
}
.main-header .main-menu {
    position: relative;
    z-index: 1060;
}

/* Dropdown trigger should reveal a pointer cursor + be the positioning
   parent for the absolute <ul>. Theme already sets position:relative;
   this is a guard in case another rule clobbers it. */
.main-menu .navigation > li.dropdown {
    position: relative;
}

/* Sticky header is hidden from assistive tech (aria-hidden + inert in markup);
   also remove focusable children from tab order for pre-inert browsers. */
.sticky-header,
.sticky-header a,
.sticky-header button {
    /* visual styling unchanged; this rule only affects a11y tree */
}

/* --- Main slider pause/play toggle (WCAG 2.2.2 Pause, Stop, Hide) --- */
.slider-pause-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: rgba(1, 32, 104, 0.85);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.slider-pause-btn:hover,
.slider-pause-btn:focus-visible {
    background: #012068;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
}
.slider-pause-btn .slider-pause-icon {
    font-size: 16px;
    letter-spacing: -2px;
}

/* ============================================================
   Reflow at 200% zoom / responsive collision mitigation
   (WCAG 1.4.4 Resize Text, 1.4.10 Reflow)
   ============================================================ */

/* Any container that used inline-flex or flex without wrap can cause
   overlap when text grows. Allow wrapping on the common layout containers
   used by this theme. */
.page-wrapper,
.auto-container,
.inner-container,
.contact-page-section .inner-container,
.row.clearfix,
.call-to-action .auto-container,
.sec-title .clearfix,
.footer-bottom .row.clearfix,
.footer-bottom .copyright-column,
.feature-section .row,
.tab-btns {
    flex-wrap: wrap;
}

/* Sec-title split header/right cells were using pull-left/pull-right
   floats which collide at zoom. Force column stacking below 1000px
   (equivalent to ~200% zoom on a 1920px viewport). */
@media (max-width: 1000px), (min-resolution: 1.5dppx) {
    .sec-title .pull-left,
    .sec-title .pull-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-slider .content {
        max-width: 100% !important;
        padding-right: 1rem !important;
    }

    .slider-pause-btn {
        bottom: 10px;
        right: 10px;
    }

    /* Contact page: stop address/phone/email inline-bleeding */
    .contact-page-section .list-style-five li {
        display: block;
        margin-bottom: 1rem;
    }

    /* Service / principle cards stack full-width at heavy zoom */
    .services-block-two,
    .services-block-three,
    .gallery-block {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Main-slider hero text uses absolute sizing by default; cap it */
    .main-slider .content h1 {
        font-size: clamp(28px, 5vw, 72px);
    }

    /* Owl nav dots / autoplay button need to stay inside viewport */
    .owl-theme .owl-controls,
    .main-slider-carousel .owl-dots {
        max-width: 100%;
        overflow: visible;
    }
}

/* Buttons and links: ensure text can wrap inside fixed-width button shells
   rather than overflow. */
.theme-btn,
.btn,
.btn-style-one,
.btn-style-six,
.tab-btn {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Images inside content never exceed their container at zoom */
.about-section img,
.about-section-four img,
.gallery-block img,
.services-block-two img,
.video-box img,
.image-column img {
    max-width: 100%;
    height: auto;
}

/* Long tabular content on statusofcomplaints / annualcompliance:
   container-level horizontal scroll instead of overflowing the viewport. */
.feature-section table,
#monthly,
#annual,
#grievance-table {
    max-width: 100%;
}
.feature-section .col-lg-12,
.feature-section .col-md-12 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Contrast — darken a few very-light grays to hit AA 4.5:1
   (WCAG 1.4.3 Contrast Minimum)
   ============================================================ */

/* Theme body copy on light backgrounds was #999/#ababab in spots.
   Bump to a darker value on textual elements without touching
   branded/intentional color blocks. */
.main-footer .text,
.about-section .text,
.about-section-four .text,
.feature-section p,
.feature-section li,
.contact-page-section .text,
.copyright {
    color: #333333;
}

/* Footer has a dark background; the original theme uses white/gray
   text. Keep #ffffff / #d0d0d0 for body copy, force #ffffff for
   heading/list text so it meets AA on #051949-ish bg. */
.main-footer,
.main-footer h3,
.main-footer h4,
.main-footer .list-link a,
.main-footer .list-style-two a {
    color: #ffffff;
}
.main-footer .copyright,
.main-footer .copyright a {
    color: #e9e9e9;
}

/* ============================================================
   Contrast overrides (targeted after pa11y-ci run)
   Issues pa11y caught that the theme's default link/label
   colors don't satisfy WCAG AA 4.5:1.
   ============================================================ */

/* Main navigation links: lock color across default / :hover / :focus /
   .current so there's NO color change on interaction (user preference).
   Overrides the theme's .header-style-five.five-alternate teal-on-hover
   (#329797) as well as the theme's default #000/#cbcbcb. */
.main-menu .navigation > li > a,
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li > a:focus,
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
#navbarSupportedContent .navigation > li > a,
#navbarSupportedContent .navigation > li > a:hover,
#navbarSupportedContent .navigation > li > a:focus,
#navbarSupportedContent .navigation > li:hover > a,
#navbarSupportedContent .navigation > li.current > a {
    color: #0a1a4a !important;
}

/* Dropdown submenu item links — keep the same dark navy in all states. */
#navbarSupportedContent .navigation > li > ul > li > a,
#navbarSupportedContent .navigation > li > ul > li > a:hover,
#navbarSupportedContent .navigation > li > ul > li > a:focus,
#navbarSupportedContent .navigation > li > ul > li:hover > a {
    color: #0a1a4a !important;
}

/* Sticky-header variant: theme forces white text on dark bg. Keep
   white across all interaction states too. */
.sticky-header .main-menu .navigation > li > a,
.sticky-header .main-menu .navigation > li > a:hover,
.sticky-header .main-menu .navigation > li > a:focus,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a,
.sticky-header #navbarSupportedContent1 .navigation > li > a,
.sticky-header #navbarSupportedContent1 .navigation > li > a:hover,
.sticky-header #navbarSupportedContent1 .navigation > li > a:focus,
.sticky-header #navbarSupportedContent1 .navigation > li:hover > a,
.sticky-header #navbarSupportedContent1 .navigation > li.current > a {
    color: #ffffff !important;
}

/* Restore the theme's menu-item underline animation (teal bar that
   grows from 0 to 22px on :hover / .current). Re-asserted with
   !important so later cascade rules cannot suppress it. The color
   change lock above only applies to the <a> color; this rule targets
   the ::after pseudo-element's width + background. */
.main-menu .navigation > li > a::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 25px !important;
    width: 0 !important;
    height: 3px !important;
    background-color: #329797 !important;
    transition: width 500ms ease !important;
    display: block !important;
    opacity: 1 !important;
}
.main-menu .navigation > li:hover > a::after,
.main-menu .navigation > li.current > a::after,
.main-menu .navigation > li > a:focus::after {
    width: 22px !important;
}

/* Sticky-header variant of the same underline (theme sets display:none
   on sticky's ::after). Keep it hidden to preserve theme look; if the
   client later wants underline in sticky too, flip this to display:block. */
.sticky-header .main-menu .navigation > li > a::after {
    display: none !important;
}

/* Body-copy links (mailto:, tel:, internal) default to theme blue that
   fails on light backgrounds. Force a dark navy link color that meets
   AA against #ffffff (11.6:1) and #f4f4f4 (10.8:1). */
.feature-section a,
.about-section a,
.about-section-four a,
.contact-page-section a,
.main-footer .list-style-two a,
.copyright a {
    color: #0a1a4a;
}
.feature-section a:hover,
.about-section a:hover,
.about-section-four a:hover,
.contact-page-section a:hover,
.copyright a:hover {
    color: #012068;
    text-decoration: underline;
}

/* Explicit dark color on inline <strong> wrapping email addresses
   (theme renders them slightly too light). */
.feature-section p strong,
.feature-section li strong,
.about-section-four p strong,
.about-section-four li strong {
    color: #0a1a4a;
}

/* Address blocks across compliance pages */
address {
    color: #1a1a1a;
}

/* Form labels on contact page — force dark text, never rely on theme. */
.contact-form label,
#contact-form label {
    color: #1a1a1a;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

/* jQuery-UI selectmenu rendered text: theme leaves it at a washed-out
   gray which flunks AA. Force dark. */
.ui-selectmenu-button .ui-selectmenu-text,
.ui-selectmenu-text,
.custom-select-box {
    color: #1a1a1a !important;
}

/* DataTables pagination Previous / Next (theme default is a low-contrast
   gray on a light-gray button). */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a {
    color: #0a1a4a !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #ffffff !important;
    background: #012068 !important;
    border-color: #012068 !important;
}

/* Footnote-marker links inside table headers (^, *, #).
   Bootstrap's default <th> has a transparent background, so text sits
   on white. Force a dark link color with underline for AA contrast. */
table thead th a,
#stausModal thead th a,
#monthly thead th a,
#annual thead th a,
.feature-section table thead th a {
    color: #0a1a4a !important;
    background: #ffffff;
    padding: 0 2px;
    text-decoration: underline !important;
    font-weight: 700;
}

/* Footer "list-style-two" contact items (phone/email/address):
   theme sets li color to #afd3f3 which fails AA on the navy footer bg.
   Override with !important + full-chain selectors to beat theme cascade. */
.main-footer .list-style-two,
.main-footer .list-style-two li,
.main-footer .list-style-two li a,
.main-footer .list-style-two li a span,
.main-footer .list-style-two a {
    color: #ffffff !important;
}
.main-footer .list-style-two li .icon {
    color: #ffffff !important;
}

/* DataTables pagination. DataTables renders buttons as either:
     <a class="paginate_button current" ...>1</a>    (newer builds)
     <span class="paginate_button current"><a ...>1</a></span>  (older)
   so target both patterns, including the <a> descendant of a .current
   span (the theme bleeds a low-contrast color onto the inner <a>). */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate span.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate a[data-dt-idx] {
    color: #0a1a4a !important;
    background: #ffffff !important;
    border: 1px solid #0a1a4a !important;
    text-decoration: underline !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate span.paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus a {
    color: #ffffff !important;
    background: #012068 !important;
    border: 1px solid #012068 !important;
    text-decoration: underline !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
    color: #606060 !important;
    background: #e9e9e9 !important;
    border: 1px solid #aaaaaa !important;
}

/* Contact enquiry sub-heading (styled via inline color that fails AA) */
#enquiry-heading {
    color: #012068 !important;
}