/*
 * Accessibility and mobile layer (website optimisation, phase 5).
 *
 * Loaded from head.php after the other stylesheets. Everything here is additive: it adds keyboard focus
 * indicators, reduced-motion handling, a skip link and a few contrast / target-size / reflow corrections,
 * and it deliberately leaves css/style.css, css/sports-academy.css and the page designs untouched.
 * Colours are the ones the site already uses (brand blue #1E59FF, navy #000033, #b8c1ec).
 * The "CONTRAST" block near the end is self-contained, so it can be reverted on its own.
 */

/* ---------------------------------------------------------------------------------------------
   1. Skip link and the main landmark
   --------------------------------------------------------------------------------------------- */
.egs-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 30000;
    padding: 10px 16px;
    background: #000033;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 6px;
    transform: translateY(-250%);
}

.egs-skip-link:focus,
.egs-skip-link:focus-visible {
    transform: none;
    color: #ffffff;
}

#main-content:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------------------------
   2. Keyboard focus: one visible indicator for everything that can be focused.
      Brand-blue ring with a white halo, so it reads on white, on the dark navy header and on coloured
      buttons. Text fields keep their existing border/glow focus style (they match :focus-visible on click).
   --------------------------------------------------------------------------------------------- */
/* the pseudo-class is written twice on purpose: it raises the specificity above existing "outline: none !important" rules */
a[href]:focus-visible:focus-visible,
button:focus-visible:focus-visible,
summary:focus-visible:focus-visible,
iframe:focus-visible:focus-visible,
[role="button"]:focus-visible:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible:focus-visible,
input[type="checkbox"]:focus-visible:focus-visible,
input[type="radio"]:focus-visible:focus-visible,
input[type="button"]:focus-visible:focus-visible,
input[type="submit"]:focus-visible:focus-visible,
.btn:focus-visible:focus-visible,
.ma5menu__toggle:focus-visible:focus-visible {
    outline: 3px solid #1E59FF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff;
}

/* full-width bar buttons sit on the screen edge, so the ring is drawn inside them */
.mobile-fixed-buttons a:focus-visible {
    outline-offset: -6px !important;
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* text fields: make the existing focus border strong enough (the contact form used a pale #4db5ff) */
.contact-us-form-input:focus {
    border-color: #1E59FF;
}

/* ---------------------------------------------------------------------------------------------
   3. Keyboard access to the header menus
   --------------------------------------------------------------------------------------------- */
/* the off-canvas menu is not reachable (or announced) while it is closed; the slide animation is kept */
.custom-sidebar:not(.active) {
    visibility: hidden;
}

@media (min-width: 768px) {
    /* the Features / Solutions panels open for keyboard focus and for the JS toggle, not only on hover */
    .navbar-expand-md .navbar-nav li:has(:focus-visible) .submenu-wrapper {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .navbar-expand-md .navbar-nav li.egs-open .submenu-wrapper {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Escape dismisses a panel that hover or focus is holding open (WCAG 1.4.13) */
    .navbar-expand-md .navbar-nav li.egs-dismissed .submenu-wrapper {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ---------------------------------------------------------------------------------------------
   4. Reduced motion: honour the visitor's operating-system setting. Animations are shortened to one
      instant pass (not removed), so content that fades in still ends up visible.
   --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* this rule was declared with "animation: ... infinite !important", which the generic rule above cannot override */
@media (prefers-reduced-motion: reduce) {
    .easy-ai-table-classname-col-green {
        animation: none !important;
    }
}

/* the marquees and tickers already pause on hover; keyboard focus pauses them too */
.client-review-marquee:focus-within .client-review-track,
.mobile-brand-ticker:focus-within .ticker-track,
.shorts-ticker-wrapper:focus-within .shorts-ticker,
.feature-ticker-wrapper:focus-within .feature-ticker-inner {
    animation-play-state: paused;
}

/* ---------------------------------------------------------------------------------------------
   5. Mobile and reflow
   --------------------------------------------------------------------------------------------- */
/* a focused link must not end up hidden under the fixed bottom bar (WCAG 2.4.11) */
@media (max-width: 767px) {
    html {
        scroll-padding-bottom: 64px;
    }
}

/* the page title on the AI pages sat above the menu, the modal and the bottom bar (z-index 1000000000) */
.easy-ai-title {
    z-index: 1 !important;
}

/* long typed titles were clipped between 769px and 1024px; use the wrapping treatment already used below 768px */
@media (min-width: 769px) and (max-width: 1024px) {
    .animate-title {
        white-space: normal;
        animation: fadeSlideUp 1s ease-out forwards;
        border-right: none;
    }
}

/* answers were cut off by a fixed max-height when text wraps or is zoomed */
.easy-ai-accordian-item.active .easy-ai-accordian-answer {
    max-height: 1400px;
}

.submenu-item.open .feature-desc {
    max-height: 480px;
}

/* carousel dots: 24 x 24px touch target around the unchanged 10px dot */
.owl-carousel .owl-dots button.owl-dot {
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* footer link lists: a 24px tall target (the links were 22px); the negative margin keeps the layout unchanged */
.footer-links ul li a {
    padding-block: 1px;
    margin-block: -1px;
}

/* the links inside FAQ answers were told apart from the text by colour alone */
.easy-ai-accordian-answer-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
   6. CONTRAST (revertible as one block): colours that were below WCAG AA, moved to the nearest passing
      shade of the same colour family.
   --------------------------------------------------------------------------------------------- */
/* "Book Free Demo" bar: white text on #26d0ce was 1.9:1; the middle stop is now #0f7f86 (4.8:1 with white) */
.mobile-fixed-buttons a:first-child {
    background-image: linear-gradient(90deg, #1a2980, #0f7f86, #1a2980);
}

/* footer entries that are not links (countries without a page yet) inherited black text on the dark footer (about 1.2:1);
   they now use the same colour as the footer links */
.footer-links ul li {
    color: #b8c1ec;
}

/* footer headings: gradient text was 2.0 - 2.7:1 on the dark footer; same purple-blue hue, lighter (5.9 - 6.3:1) */
.footer-links h6 {
    background-image: linear-gradient(90deg, #a5b4ff 0%, #c4a5f0 100%);
}

/* demo modal fields: the pale border (1.2:1) is now a 3.3:1 border, the focus and error colours stay stronger */
#ModalTogglesix .custom-form-input,
#ModalTogglesix .country-code-select {
    border-color: #7f89ad !important;
}

#ModalTogglesix .custom-form-input:focus,
#ModalTogglesix .country-code-select:focus {
    border-color: #0066ff !important;
}

#ModalTogglesix [aria-invalid="true"],
#ModalTogglesix [aria-invalid="true"]:focus,
.contact-us-form-input[aria-invalid="true"] {
    border-color: #b3261e !important;
}

/* page-level text colours that measured below 4.5:1 (3:1 for the large figure); each is the closest shade of the same colour */
.bg-light p a:not([class]),
.blog-single-section p a:not([class]) {
    color: #0b5ed7;                     /* Bootstrap link blue #0d6efd was 4.3:1 on the light grey sections */
}

body .blog-design-classname-author-role {
    color: #a5b4fc;                     /* #4f46e5 on the navy author card was 3.2:1 */
}

body .blog-design-classname-related-item-date,
body .hsg-bar-labels span {
    color: #64748b;                     /* #94a3b8 on white was 2.6:1 */
}

.reviews-badge > span {
    color: #b45309;                     /* #d97706 on the pale amber badge was 3.0:1 */
}

.testimonial-author .author-info {
    color: #4b5563;                     /* #6b7280 on the pastel cards was 4.4:1 */
}

.hsg-card .hsg-value.green {
    color: #059669;                     /* #10b981 on white was 2.5:1 (large text needs 3:1) */
}