/* ==========================================================================
   Mandot Securities — accessibility layer (WCAG 2.1 AA)
   Loaded after assets/style.css so these rules win.
   Added 2026-08-03. Companion file: assets/a11y.js
   ========================================================================== */

:root {
    /* Light theme — measured against the #ffffff page background */
    --a11y-brand: #5e1423;      /* 13.12:1 */
    --a11y-ink: #4f4f4f;        /*  8.19:1 */
    --a11y-strong: #333333;     /* 12.63:1 */
    --a11y-accent: #0056b3;     /*  7.04:1 */
    --a11y-focus: #0b5fff;
    --a11y-focus-offset: 2px;

    /* Text drawn ON a brand-coloured surface (skip link, pause button).
       This is a separate token on purpose: --a11y-brand flips to a light
       tint in dark mode, so white text on it would fail. */
    --a11y-on-brand: #ffffff;   /* 13.12:1 on #5e1423 */

    /* Menu surfaces */
    --a11y-menu-bg: #ffffff;
    --a11y-menu-fg: #5e1423;    /* 13.12:1 */
    --a11y-menu-border: rgba(0, 0, 0, 0.18);
    --a11y-menu-hover-bg: #5e1423;
    --a11y-menu-hover-fg: #ffffff;
}

/* Dark theme — same tokens, re-pointed at the #111111 page background.
   Every colour rule below uses these variables, so both themes are covered
   by one set of rules and neither can drift out of conformance. */
body.theme-dark {
    --a11y-brand: #ffc2cf;      /* 12.47:1 on #111 */
    --a11y-ink: #dcdcdc;        /* 13.77:1 */
    --a11y-strong: #f2f2f2;     /* 16.87:1 */
    --a11y-accent: #8fc2ff;     /* 10.19:1 */
    --a11y-focus: #ffd166;

    --a11y-on-brand: #2b0710;   /* 12.16:1 on #ffc2cf */

    --a11y-menu-bg: #1c1c1c;
    --a11y-menu-fg: #f4f4f4;    /* 15.49:1 */
    --a11y-menu-border: rgba(255, 255, 255, 0.42);
    --a11y-menu-hover-bg: #ffc2cf;
    --a11y-menu-hover-fg: #111111;   /* 12.47:1 */
}

/* --------------------------------------------------------------------------
   1. Colour contrast — SC 1.4.3
   The theme used the brand maroon with alpha suffixes (78 / 8c / 94 / 66),
   which dropped several elements to 2.4–3.8:1 in light mode; dark mode had
   its own uncovered gaps. `!important` is required because several of the
   original declarations sit in higher-specificity media-query blocks.
   -------------------------------------------------------------------------- */
.nav-link,
.navbar-expand-lg .navbar-nav .nav-link { color: var(--a11y-brand) !important; }
.user-box label               { color: var(--a11y-brand) !important; }
.box-heading h4,
.box-heading h3               { color: var(--a11y-brand) !important; }
.technology-section h4,
.technology-section h3        { color: var(--a11y-brand) !important; }
.career-table label           { color: var(--a11y-brand) !important; }
.text-ligher                  { color: var(--a11y-ink) !important; }
.btn-custom                   { color: var(--a11y-accent) !important; }

footer .list-unstyled li a,
footer .footer-col-heading    { color: var(--a11y-strong) !important; }

.footer-discription,
.footer-discription b,
.footer-discription p,
.footer-discription li,
.footer-discription a,
footer b,
footer small                  { color: var(--a11y-strong) !important; }

/* Dark-mode gaps that pre-dated this work: the button/banner text and the
   oversized banner headline were never given a dark-theme colour. */
body.theme-dark .mybutton,
body.theme-dark .mybutton1,
body.theme-dark .section.banner span,
body.theme-dark .section.banner h1,
body.theme-dark .highlight    { color: var(--a11y-strong) !important; }

/* --------------------------------------------------------------------------
   2. Links must not rely on colour alone — SC 1.4.1  (client requirement R2)
   Nav links and footer links are underlined by default.
   -------------------------------------------------------------------------- */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
footer a,
footer .list-unstyled li a,
.footer-discription a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus,
footer a:hover,
footer a:focus {
    text-decoration-thickness: 2px;
}

/* Dropdown menus: the theme never gave the menu surface a dark-mode colour, so
   items rendered near-invisible. Both themes are now stated explicitly. */
.navbar .dropdown-menu {
    background-color: var(--a11y-menu-bg) !important;
    border: 1px solid var(--a11y-menu-border) !important;
}
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item.dropdown-toggle {
    color: var(--a11y-menu-fg) !important;
    background-color: transparent !important;
    min-height: 24px;
    line-height: 1.5;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:focus-visible,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--a11y-menu-hover-bg) !important;
    color: var(--a11y-menu-hover-fg) !important;
}

/* The call-to-action button in the nav is a button in appearance — not underlined,
   and it is distinguishable by its filled background, so 1.4.1 is satisfied. */
.navbar-nav .nav-cta,
.navbar-nav .nav-cta:hover,
.navbar-nav .nav-cta:focus { text-decoration: none; }

/* Social icon links are images, not text — no underline needed */
.footer-meadia a,
footer .d-flex a[aria-label] { text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Visible keyboard focus — SC 2.4.7 / 2.4.11  (client requirement R5)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--a11y-focus);
    outline-offset: var(--a11y-focus-offset);
    border-radius: 2px;
}

/* Never remove focus rings on dark surfaces — swap colour instead */
body.theme-dark a:focus-visible,
body.theme-dark button:focus-visible,
body.theme-dark input:focus-visible,
body.theme-dark select:focus-visible,
body.theme-dark textarea:focus-visible,
body.theme-dark [tabindex]:focus-visible {
    outline-color: #ffd166;
}

/* The programmatic target of the skip link must not show a ring on click */
#main-content:focus { outline: none; }
#main-content:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   4. Skip link — SC 2.4.1  (client requirement R1)
   Visually hidden until focused, then pinned top-left.
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10000;
    display: inline-block;
    padding: 12px 20px;
    background: var(--a11y-brand);
    color: var(--a11y-on-brand);
    border: 2px solid var(--a11y-on-brand);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: underline;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: top 0.18s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    background: var(--a11y-brand);
    color: var(--a11y-on-brand);
    outline: 3px solid var(--a11y-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Pause / play control for auto-moving content — SC 2.2.2 (requirement R3)
   Icon-only button, bottom-right of its section, no visible text label.
   -------------------------------------------------------------------------- */
.a11y-motion-region { position: relative; }

.a11y-motion-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    width: 44px;                 /* 44×44 target — SC 2.5.5 / 2.5.8 */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--a11y-on-brand);
    border-radius: 50%;
    background: var(--a11y-brand);
    color: var(--a11y-on-brand);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, background 0.15s ease;
}
.a11y-motion-toggle:hover { transform: scale(1.06); }
.a11y-motion-toggle svg   { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.a11y-motion-toggle .a11y-icon-play  { display: none; }
.a11y-motion-toggle[aria-pressed="true"] .a11y-icon-play  { display: block; }
.a11y-motion-toggle[aria-pressed="true"] .a11y-icon-pause { display: none; }

/* Marquee sits in a short strip — keep the button inside it */
.marquee-container .a11y-motion-toggle { right: 8px; bottom: 50%; transform: translateY(50%); }
.marquee-container .a11y-motion-toggle:hover { transform: translateY(50%) scale(1.06); }

/* Paused states */
.marquee-text.a11y-paused { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   6. Reduced motion — SC 2.3.3
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .marquee-text { animation-play-state: paused !important; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* --------------------------------------------------------------------------
   8. Target size — SC 2.5.8 (min 24×24 CSS px)
   Footer links were 19 px tall and the inline links inside the disclaimer
   text were 14 px tall.
   -------------------------------------------------------------------------- */
.blog-slide .blog-overlay { min-width: 44px; min-height: 44px; }
.btn-close { min-width: 44px; min-height: 44px; }

/* Close (×) control on the risk-disclosure dialog. Drawn as a real glyph so it
   works in both themes without relying on a background image. */
.risk-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 1;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--a11y-strong);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.risk-modal-close::before { content: "\00d7"; font-weight: 700; }
.risk-modal-close:hover {
    background: var(--a11y-brand);
    color: var(--a11y-on-brand);
    border-color: var(--a11y-brand);
}
.modal-content { position: relative; }

footer .list-unstyled li a,
.footer-discription a,
footer small a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}
footer .list-unstyled li { padding: 2px 0; }

/* Icon links keep their own box but must still reach 24 px */
.footer-meadia a,
footer .d-flex a[aria-label] {
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    min-height: 24px;
}

/* --------------------------------------------------------------------------
   9. Heading levels were corrected for sequential order (SC 1.3.1).
   These rules keep the *visual* size unchanged after the tag change:
   footer column headings h5 → h3, technology cards h4 → h3.
   -------------------------------------------------------------------------- */
footer .footer-col-heading {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.technology-section .tech-card-heading,
.tech-card-heading {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* Headings whose *level* changed for sequential order keep their original
   visual weight via these classes, so nothing on screen shifts. */
h1.a11y-vis-h2, h2.a11y-vis-h2 { font-size: 2rem; }
h1.a11y-vis-h3, h3.a11y-vis-h3 { font-size: 1.75rem; }
h2.a11y-vis-h4, h3.a11y-vis-h4 { font-size: 1.5rem; }
h3.a11y-vis-h5, h2.a11y-vis-h5 { font-size: 1.25rem; }

/* Dialog titles were promoted h5 → h2; .modal-title keeps their size */
.modal-title,
h2.modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Carousel controls — see a11y.js §7.
   Cards inside an auto-rotating carousel are removed from the tab order so
   keyboard users reach the prev / next / pause controls directly.
   -------------------------------------------------------------------------- */
.a11y-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    min-width: 44px;
    min-height: 44px;
}