/* ==========================================================================
   Accessibility remediation (WCAG 2.1 AA)
   Added in response to the EnableUser audit. Loaded last in <head> so these
   rules win over the theme defaults without editing the vendor/theme CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SC 2.4.1 Bypass Blocks — "Skip to main content" link.
   Visually hidden until focused, then pinned to the top-left so keyboard
   users can jump straight to <main id="content">.
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--c-navy-2,#213A56);
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
}

/* --------------------------------------------------------------------------
   SC 2.4.7 Focus Visible + SC 1.4.11 — make keyboard focus obvious on every
   interactive element. The theme set `outline: 0` on links/buttons, which
   removed the only focus cue for keyboard users.
   Two-tone ring so it shows on every surface: a gold outline (6.2:1 on navy)
   between navy bands (10:1+ on the light page, paper and white). A single navy
   ring vanished on the navy top bar, hero, decks and contact panel (~1.3:1).
   -------------------------------------------------------------------------- */
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 var(--c-gold,#C6A75E) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 7px var(--c-navy,#1F2A44) !important;
}
/* For controls that fill an overflow:hidden box (e.g. a video card's play
   button), where an outside ring would be clipped: draw it inside instead. */
.focus-ring-inset:focus-visible {
    outline-offset: -5px !important;
    box-shadow: inset 0 0 0 7px var(--c-navy,#1F2A44) !important;
}

/* --------------------------------------------------------------------------
   SC 1.4.3 Contrast (Minimum) — default link colour.
   Theme default #0085BA gives only 4.15:1 on white; #0073A8 gives 5.23:1.
   -------------------------------------------------------------------------- */
a {
    color: #0073A8;
}
a:hover,
a:focus,
a:active {
    color: #14246f;
}

/* --------------------------------------------------------------------------
   SC 1.4.1 Use of Colour + SC 1.4.3 — in-content links must be
   distinguishable from surrounding text by more than colour alone, and must
   meet contrast. Underline links that sit inside running prose only (not
   nav bars, buttons, cards, footers or menus, which are identifiable by
   layout/position).
   -------------------------------------------------------------------------- */
.site-main p a:not(.no-underline),
.site-main li a:not(.page-link):not(.button-text):not(.button-round):not(.no-underline),
.single-post-section article a,
.about-page-section .team-inner a,
.entry-content p a,
.footer-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   SC 1.4.3 Contrast — the top header bar's contact/social text is near-white
   (#fcfcfc) but the bar is transparent, so over light inner-page banners it
   became invisible (measured 1.02:1 on /team). A solid dark bar guarantees
   contrast on every page.
   -------------------------------------------------------------------------- */
.top-header {
    background-color: #1d2144;
}

/* --------------------------------------------------------------------------
   SC 4.1.2 / 2.1.1 — these decorative elements (why-us cards, the belief
   number circles, the "how we buy" drop circles, and the logo-slider items)
   carry no click handler, but the theme gave them `cursor: pointer`, which
   wrongly signals they are interactive. Scanners then flag them as interactive
   elements missing a role / keyboard access. Restore the default cursor so
   they read as the non-interactive content they are.
   -------------------------------------------------------------------------- */
.home-service-box,
.investment-beliefs-section .circle,
.drop-circle-item,
.logo-slider .gallery-item {
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   SC 2.2.2 Pause, Stop, Hide — the decorative animated illustration
   (.faceMove / .earMove / .neckMove) auto-moves indefinitely with no pause
   control. It conveys no information, so make it static for all users.
   -------------------------------------------------------------------------- */
.faceMove,
.earMove,
.neckMove {
    animation: none !important;
}

/* --------------------------------------------------------------------------
   axe "region" — the copyright bar is now nested inside the <footer>
   contentinfo landmark so all page content is contained by a landmark. The
   footer has 20px side padding; negate it here so the bar stays full-bleed
   exactly as before.
   -------------------------------------------------------------------------- */
.footer-section > .copyright-sec {
    margin-left: -20px;
    margin-right: -20px;
}
/* The bar now sits inside .footer-section (color:#fff), but its background is
   light (#f0eff7). Restore dark text so the copyright line meets contrast. */
.footer-section > .copyright-sec,
.footer-section > .copyright-sec .copyright-line {
    color: #1d2144;
}

/* --------------------------------------------------------------------------
   SC 2.5.8 Target Size (Minimum) — the footer legal links sat on one line
   with almost no spacing, giving touch targets under 24x24 CSS px. Give them
   vertical padding and a guaranteed min-height without changing the layout.
   -------------------------------------------------------------------------- */
.foot-condition-link ul li a {
    display: inline-block;
    min-height: 24px;
    padding: 6px 4px;
    line-height: 1.4;
}
.foot-condition-link ul.d-flex {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
}

/* --------------------------------------------------------------------------
   SC 2.1.1 Keyboard + SC 4.1.2 Name, Role, Value — the floating contact /
   download / WhatsApp FABs are now real <button>s. Strip native button
   chrome so they look exactly as before while staying keyboard-operable.
   -------------------------------------------------------------------------- */
button.ba-we-love-subscribers-fab {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: inherit;
}

/* --------------------------------------------------------------------------
   SC 2.1.1 Keyboard / 1.4.13 / 4.1.2 — desktop dropdowns (DesktopNav in
   MobileNav.tsx). Parents without a page of their own are <button
   class="nav-toggle"> (disclosure pattern): Enter/Space toggle `.is-open`,
   Escape sets `.is-collapsed`, which also hides a hover-opened submenu.
   Hover still opens submenus through style.css. Without JS, `:focus-within`
   keeps them reachable from the keyboard.
   -------------------------------------------------------------------------- */
html:not(.js) .site-header-transparent .main-navigation ul > li.menu-item-has-children:focus-within > ul,
.site-header-transparent .main-navigation ul > li.menu-item-has-children.is-open > ul {
    display: block;
}
.site-header-transparent .main-navigation ul > li.menu-item-has-children.is-collapsed > ul {
    display: none !important;
}
.site-header-transparent .main-navigation ul > li.menu-item-has-children:focus-within > a,
.site-header-transparent .main-navigation ul > li.menu-item-has-children:hover > .nav-toggle,
.site-header-transparent .main-navigation ul > li.menu-item-has-children.is-open > .nav-toggle {
    color: var(--c-navy,#1F2A44);
}
/* The toggle button looks exactly like the legacy top-level link. */
.site-header-transparent .main-navigation ul > li > .nav-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 30px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #414141;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: inherit;
    line-height: 1.1;
    text-transform: uppercase;
    cursor: pointer;
}
@media (max-width: 1200px) {
    .site-header-transparent .main-navigation .navigation > ul > li > .nav-toggle {
        font-size: 14px;
    }
}
/* Caret: the same Font Awesome caret-down glyph the legacy `a:after` drew,
   now an inline SVG inside the button (no icon font needed). */
.site-header-transparent .main-navigation .nav-toggle .nav-caret {
    float: right;
    margin: 0.05em 0 0 8px;
    font-size: 14px;
    transition: transform 0.4s;
}
.site-header-transparent .main-navigation ul > li:hover > .nav-toggle .nav-caret,
.site-header-transparent .main-navigation ul > li.is-open > .nav-toggle .nav-caret {
    transform: rotate(180deg);
}
.site-header-transparent .main-navigation ul > li.is-collapsed > .nav-toggle .nav-caret {
    transform: none;
}
/* A parent that is also a page: its link, then a caret-only toggle button. */
.site-header-transparent .main-navigation ul > li.menu-item-has-children > a:after {
    content: none;
}
.site-header-transparent .main-navigation ul > li > .nav-toggle-icon {
    padding-left: 8px;
}
.site-header-transparent .main-navigation .nav-toggle-icon .nav-caret {
    float: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Mobile menu (MobileNav.tsx).
   SC 1.4.10 Reflow — the legacy `ul` margin/padding pushed the open panel
   12px right, off the screen; reset it and indent submenus instead.
   SC 2.5.5/2.5.8 Target Size — the hamburger was a 22x17px target; grow it to
   44x44 around the same icon (negative margins keep the icon in place).
   -------------------------------------------------------------------------- */
.mobile-menu .slicknav_nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mobile-menu .slicknav_menu .slicknav_nav ul li a {
    padding-left: 30px;
}
.mobile-menu .slicknav_menu .slicknav_btn {
    width: 44px;
    height: 44px;
    align-items: center;
    margin: 0 -11px 0 -1px !important;
}
/* Top-bar social icons were 13-23 x 27px targets: pad the links (the negative
   margin cancels it, so the icons stay exactly where they were and the target
   stays inside the bar). */
.top-header .social-links a {
    display: inline-block;
    padding: 3px 6px;
    margin: -3px -6px;
}
/* A parent without a page is one <button class="slicknav_row"> (label +
   arrow), styled like the legacy link + arrow pair it replaces. */
.mobile-menu .slicknav_menu .slicknav_nav button.slicknav_row {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mobile-menu .slicknav_menu .slicknav_row > .slicknav_label {
    width: calc(100% - 45px);
    padding: 10px 15px;
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: capitalize;
    transition: color 0.3s;
}
.mobile-menu .slicknav_menu .slicknav_row:hover > .slicknav_label,
.mobile-menu .slicknav_menu .slicknav_row:focus-visible > .slicknav_label {
    color: var(--c-navy-2,#213A56);
}
.mobile-menu .slicknav_menu .slicknav_row .slicknav_item button,
.mobile-menu .slicknav_menu button.slicknav_item {
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Inline SVG icons (Icon in Header.tsx) — sized and aligned like the Font
   Awesome glyphs they replace: 1em tall, sitting on the text baseline.
   -------------------------------------------------------------------------- */
.ico {
    display: inline-block;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
    fill: currentColor;
}
.header-contact-info ul li .ico {
    margin-right: 5px;
}

/* --------------------------------------------------------------------------
   SC 2.2.2 Pause, Stop, Hide — honour the user's reduced-motion preference
   by stopping the looping decorative SVG/marquee animations (e.g. the
   animated illustration: .faceMove / .earMove / .neckMove) and any
   CSS-driven auto-scrolling carousels.
   -------------------------------------------------------------------------- */
@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;
    }
    .faceMove,
    .earMove,
    .neckMove {
        animation: none !important;
    }
}