/* ==========================================================================
   accessibility.css - WCAG 2.1 AA remediation layer
   --------------------------------------------------------------------------
   Loaded LAST so it can override the vendor theme (default.css / styles-3.css)
   without those files being edited. Every rule here exists to satisfy a
   specific success criterion; the SC is named in the comment above it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Skip link - SC 2.4.1 Bypass Blocks
   First focusable element on every page. Off-screen until focused, then
   pinned to the top-left so it is visible when it receives keyboard focus.
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 100000;
    padding: 12px 22px;
    background: #ffffff;
    color: #17456b;
    border: 2px solid #17456b;
    border-radius: 0 0 4px 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-decoration: underline;
    transition: none;
}

.skip-link:focus {
    top: 0;
    color: #17456b;
    outline: 3px solid #17456b;
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. Visible focus indicator - SC 2.4.7 Focus Visible / SC 1.4.11 Non-text Contrast
   The theme removes outlines on several components. Restore a high-contrast
   indicator that clears 3:1 against both the light and dark backgrounds used
   on this site.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #005a8c;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* On the dark footer / header / overlay panels an inverted ring is needed to
   stay visible. */
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible,
.footer-bar a:focus-visible,
.ticker a:focus-visible,
.ticker button:focus-visible,
.page-title-section2 a:focus-visible,
.bg-theme a:focus-visible,
.parallax a:focus-visible,
.parallax button:focus-visible {
    outline: 3px solid #ffd24d;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #191919;
}

/* Browsers without :focus-visible still get an indicator. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus {
    outline-color: #005a8c;
}


/* --------------------------------------------------------------------------
   3. Visually-hidden helper - SC 3.3.2 Labels or Instructions
   Used for <label> elements that are announced by screen readers where the
   theme's design has no room for a visible label, and for extra link context.
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Same, but becomes visible on focus (for skip targets). */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   4. Visible form labels - SC 1.3.1 Info and Relationships / SC 3.3.2
   The theme relies on placeholders alone. Real <label> elements are now in the
   markup; these rules give them a consistent visible presentation.
   -------------------------------------------------------------------------- */
.field-label {
    display: block;
    margin-bottom: 6px;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.callback-box .field-label {
    color: #3f3f3f;
}

/*
   Labels that genuinely sit on a dark surface opt in explicitly.

   This used to be a descendant rule (`.parallax .field-label`, `.bg-theme
   .field-label`). That was wrong: the homepage contact form is a WHITE card
   (.contact-form-box.bg-white) nested inside <section class="parallax">, so the
   rule painted those four labels white on white - 1:1 contrast, completely
   invisible. Colour by what the element sits on, never by what section encloses
   it, because sections contain cards of the opposite colour.
*/
.field-label--on-dark {
    color: #ffffff;
}

/* Marks the "*" in a label as decorative punctuation while keeping the
   required state announced via the required attribute. */
.field-label .req {
    color: #b3261e;
    font-weight: 700;
}

.field-label--on-dark .req {
    color: #ffd24d;
}


/* --------------------------------------------------------------------------
   5. Text colour contrast - SC 1.4.3 Contrast (Minimum)
   The theme's #999 body greys measure 2.84:1 on white (needs 4.5:1).
   #6b6b6b measures 5.33:1 on #ffffff and 4.9:1 on the #f7f7f7 panels.
   -------------------------------------------------------------------------- */
.service-box p,
.case-block p,
.testmonial-box p,
.testmonial-style2 p,
.testmonial-single p,
.team-member-text p,
.blog-grid-text p,
.blog-grid-text ul li,
.blog-list-simple-text,
.blog-list-simple-text p,
.blog-list-simple-text ul li,
.contact-info-section p,
.contact-box span,
.partner-box:hover .partner-text span {
    color: #6b6b6b;
}

/* #aaa on white is 2.32:1 - used for the testimonial attribution line. */
.testmonial-single h6,
.data-box-grid h5,
.blog-grid .data-box-grid p {
    color: #6b6b6b;
}

/* The testimonial company line was an <h6> sitting under an <h3>, which both
   skipped a heading level and mis-described a citation as a section heading.
   It is now a <p><cite>, styled to match what the <h6> rendered as. */
.testmonial-single .testimonial-cite {
    margin: 0;
    color: #6b6b6b;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
}

.testmonial-single .testimonial-cite cite {
    font-style: normal;
}

/* Default body/link grey (#6f6f6f) is 4.85:1 on white but fails on the
   #f2f2f2 striped panels at 4.48:1. #5f5f5f gives 6.39:1 / 5.71:1. */
body {
    color: #5f5f5f;
}

.table-striped td,
.table-striped th,
.bg-very-light-gray,
.bg-light-gray {
    color: #5f5f5f;
}


/* --------------------------------------------------------------------------
   5b. Footer headings - SC 1.3.1
   The footer titles were <h3>, so on content-light pages (privacy policy,
   downloads) the first heading after the page <h1> was an h3 - a skipped
   level. They are <h2> now; this reproduces the theme's `footer h3` rules so
   the footer looks identical.
   -------------------------------------------------------------------------- */
footer h2 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1;
    position: relative;
}

footer h2:after {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    background: #0073ad;
    margin-top: 12px;
}

h2.footer-title-style5 {
    color: #fff;
}

h2.footer-title-style5:after {
    background: #fff;
}

/* The "Freezing / Blocking of Trading Accounts" title is body copy sized, not
   a footer column title, so it keeps its original look. */
footer h2.margin-25px-top:after {
    display: none;
}


/* --------------------------------------------------------------------------
   6. Footer bar links - SC 1.4.3 Contrast + SC 1.4.1 Use of Colour
   #6f6f6f on the #191919 footer bar is 3.49:1. #e8e8e8 gives 13.6:1, and the
   underline means the links are not signalled by colour alone.
   -------------------------------------------------------------------------- */
.footer-bar {
    color: #b9b9b9;
}

.footer-bar a,
.footer-bar a:active,
.footer-bar a:focus {
    color: #e8e8e8;
    text-decoration: underline;
}

.footer-bar a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   7. In-content links must not rely on colour alone - SC 1.4.1 Use of Colour
   Underline links that sit inside running prose. Navigation, buttons, cards
   and other components where the link is the only content are excluded,
   because there they are not embedded in surrounding text.
   -------------------------------------------------------------------------- */
main p > a,
main li > a:not(.butn),
main td > a,
main dd > a,
.privacy-content a,
.ticker a {
    text-decoration: underline;
}

main p > a:hover,
main li > a:not(.butn):hover,
main td > a:hover,
.ticker a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Language download list.
   Replaces the layout <table> on language.html - same five-across grid, but
   built from a real <ul> so the links are announced as a list. */
.language-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    background: #dee2e6;
    border: 1px solid #dee2e6;
}

.language-list li {
    background: #ffffff;
    padding: 12px 15px;
}

.language-list li:nth-child(odd) {
    background: #f9f9f9;
}

.language-list a {
    color: #17456b;
    text-decoration: underline;
}

.language-list a:hover,
.language-list a:focus {
    color: #0d2d47;
}

@media (max-width: 991px) {
    .language-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
    .language-list { grid-template-columns: repeat(2, 1fr); }
}


/* --------------------------------------------------------------------------
   8. Compliance ticker - SC 2.2.2 Pause, Stop, Hide
   Replaces the deprecated <marquee>. The text scrolls via CSS animation and
   an actual <button> pauses it. Users who prefer reduced motion get static,
   scrollable text and the animation never starts.
   -------------------------------------------------------------------------- */
.ticker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f4f4f4;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
}

.ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    /* Keeps the text reachable by keyboard/AT even while it scrolls. */
    -webkit-overflow-scrolling: touch;
}

.ticker__track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    color: #4a4a4a;
    animation: ticker-scroll 240s linear infinite;
}

.ticker__viewport:hover .ticker__track,
.ticker__viewport:focus-within .ticker__track {
    animation-play-state: paused;
}

.ticker.is-paused .ticker__track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.ticker__toggle {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 14px;
    background: #ffffff;
    color: #17456b;
    border: 2px solid #17456b;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.ticker__toggle:hover {
    background: #17456b;
    color: #ffffff;
}

/* When the ticker is stopped the text wraps and the region scrolls, so the
   full disclosure stays readable. */
.ticker.is-stopped .ticker__viewport {
    max-height: 7.5em;
    overflow-y: auto;
}

.ticker.is-stopped .ticker__track {
    display: block;
    white-space: normal;
    padding-left: 0;
    animation: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
        transform: none;
        display: block;
        white-space: normal;
        padding-left: 0;
    }

    .ticker__viewport {
        max-height: 7.5em;
        overflow-y: auto;
    }
}


/* --------------------------------------------------------------------------
   9. Carousel controls - SC 2.1.1 Keyboard / SC 4.1.2 Name, Role, Value
   The Owl Carousel arrows are bare <div>s. accessibility.js promotes them to
   role="button" + tabindex; these rules make the focus ring visible and give
   the hit area the 44x44 minimum.
   -------------------------------------------------------------------------- */
.owl-nav .owl-prev,
.owl-nav .owl-next {
    min-width: 44px;
    min-height: 44px;
}

.owl-nav .owl-prev:focus-visible,
.owl-nav .owl-next:focus-visible,
.owl-dots .owl-dot:focus-visible {
    outline: 3px solid #005a8c;
    outline-offset: 2px;
}

.owl-nav .owl-prev[aria-disabled="true"],
.owl-nav .owl-next[aria-disabled="true"] {
    cursor: default;
}


/* --------------------------------------------------------------------------
   10. Form control borders - SC 1.4.11 Non-text Contrast
   The theme's input border (#e4e4e4 on white, 1.3:1) does not meet the 3:1
   minimum for user-interface component boundaries.
   -------------------------------------------------------------------------- */
input.medium-input,
textarea.medium-textarea,
select.medium-input,
.callback-box-form input,
.footer-subscribe .form-control,
.contact-form input,
.contact-form textarea {
    border: 1px solid #767676;
}

input.medium-input:focus,
textarea.medium-textarea:focus,
select.medium-input:focus,
.callback-box-form input:focus,
.footer-subscribe .form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #005a8c;
}

/* Placeholders are supplemental now that real labels exist, but they still
   need to be legible: #767676 is 4.54:1 on white. */
::-webkit-input-placeholder { color: #767676; opacity: 1; }
::-moz-placeholder          { color: #767676; opacity: 1; }
:-ms-input-placeholder      { color: #767676; opacity: 1; }
::placeholder               { color: #767676; opacity: 1; }


/* --------------------------------------------------------------------------
   11. Dropdown menus - SC 2.4.7 Focus Visible / SC 2.1.1 Keyboard
   --------------------------------------------------------------------------
   The theme only ever reveals a submenu on :hover (nav-menu.css lines 32/35/36).
   Its resting position is `left: -9999px; opacity: 0`, but the links inside stay
   in the tab order - so a keyboard user tabbing past "Services" sent focus to a
   link roughly 9,800px off the left of the screen and the focus ring simply
   vanished. accessibility.js was already setting aria-expanded="true" on focus,
   which made it worse: assistive tech was told the menu was open while it was
   visually nowhere.

   These mirror the vendor :hover rules exactly, adding :focus-within so keyboard
   focus reveals the submenu the same way the mouse does.

   Desktop only: below 992px nav-menu.css resets submenus to
   `position: relative; left: 0` and toggles them with display, so the off-screen
   problem does not exist there and a focus-within rule would fight the toggle.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* mirrors: .navbar-nav li:hover > ul */
    .navbar-nav li:focus-within > ul {
        left: auto;
    }

    /* mirrors: .navbar-nav > li.has-sub:hover > ul */
    .navbar-nav > li.has-sub:focus-within > ul {
        margin-top: 0;
        opacity: 1;
    }

    /* mirrors: .navbar-nav > li.has-sub:last-child:hover ul
       (keeps the last dropdown right-aligned so it cannot overflow the viewport) */
    .navbar-nav > li.has-sub:last-child:focus-within ul {
        left: inherit;
        right: 0;
    }
}

/* accessibility.js keeps aria-expanded in sync; this makes the open state
   visible to sighted users too rather than relying on hover alone. */
#nav a[aria-expanded="true"] {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   11b. Heading levels promoted for structure - SC 1.3.1 Info and Relationships
   Several pages jumped straight from <h1> to <h4>/<h5>, because the heading
   tag was being chosen for its font size rather than its rank. The tags are
   now the correct rank and carry one of these classes, which reproduces the
   theme's original size for that rank at every breakpoint - so the outline is
   fixed with no visual change at all.

   Mirrors the h1-h6 scale in default.css (lines 81-86, 1635, 2831, 4050).
   -------------------------------------------------------------------------- */
.h-size-3 { font-size: 32px; }
.h-size-4 { font-size: 30px; }
.h-size-5 { font-size: 26px; }
.h-size-6 { font-size: 22px; }

@media (max-width: 1199px) {
    .h-size-3 { font-size: 30px; }
    .h-size-4 { font-size: 28px; }
    .h-size-5 { font-size: 24px; }
    .h-size-6 { font-size: 20px; }
}

@media (max-width: 991px) {
    .h-size-3 { font-size: 28px; }
    .h-size-4 { font-size: 26px; }
    .h-size-5 { font-size: 22px; }
    .h-size-6 { font-size: 18px; }
}

@media (max-width: 767px) {
    .h-size-3 { font-size: 26px; }
    .h-size-4 { font-size: 24px; }
    .h-size-5 { font-size: 20px; }
    .h-size-6 { font-size: 16px; }
}


/* --------------------------------------------------------------------------
   12. UPI payment panel - SC 1.4.5 Images of Text
   The QR graphic carried its instructions as baked-in pixels. The instructions
   are now real text; this lays the panel out beside the code.
   -------------------------------------------------------------------------- */
.upi-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}

.upi-panel__code {
    flex: 0 1 440px;
    max-width: 100%;
}

.upi-panel__code img {
    max-width: 100%;
    height: auto;
}

.upi-panel__detail {
    flex: 1 1 280px;
    min-width: 260px;
}

.upi-panel__detail ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.upi-panel__detail li {
    margin-bottom: 6px;
}


/* --------------------------------------------------------------------------
   13. Empty-state table row - SC 1.3.1
   Header-only tables have no cells for the headers to describe. The empty
   state row supplies them.
   -------------------------------------------------------------------------- */
.table .empty-state {
    padding: 18px;
    color: #5f5f5f;
    font-style: italic;
    text-align: center;
}

/* Bootstrap sets `caption-side: bottom`, which rendered these captions
   underneath their tables - correct semantically, but it reads as a stray line
   of text. Put them back above the table they name. */
.table caption {
    caption-side: top;
    padding-bottom: 12px;
    color: #5f5f5f;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   13b. Skip-link target - SC 2.4.1 Bypass Blocks
   <main> carries tabindex="-1" so activating the skip link moves real focus
   into it. Chrome would move the sequential-focus starting point from the
   fragment on its own, but Safari and older browsers do not - there the skip
   link scrolled while focus stayed at the top of the page. Focusing a container
   programmatically should not paint a ring around the whole page.
   -------------------------------------------------------------------------- */
main[tabindex="-1"]:focus {
    outline: none;
}


/* --------------------------------------------------------------------------
   14. Reduced motion - SC 2.3.3 Animation from Interactions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}