/* =====================================================================
   Accessibility fixes (2026-10-27, from the PageSpeed accessibility audit)
   Loaded last on every page by common/head.php. Nothing here changes how a
   page looks, except that the dots under the sliders sit a little further
   apart (each one is now a 24 x 24 px button; the dot drawn inside keeps its
   size and colour, and the row keeps its height).
   ===================================================================== */

/* Text for screen readers and search engines only (e.g. what a "Read More"
   link leads to). Not visible, takes no space. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Tap targets: slider dots at least 24 x 24 px ("Touch targets do not
   have sufficient size or spacing"). The button grows, the dot inside keeps
   its size; negative top/bottom margins keep the row's height unchanged. ---- */

/* footer badges, and the process slider (default Owl dots: a 10px dot in a 19px button) */
.certified-logos.owl-theme .owl-dots .owl-dot,
.team-model.owl-theme .owl-dots .owl-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -1px 0;            /* the row keeps its original line height */
    vertical-align: middle;
}
.certified-logos.owl-theme .owl-dots .owl-dot span,
.team-model.owl-theme .owl-dots .owl-dot span { margin: 0; }

/* case studies (an 8px dot, the active one a 32px bar; styles in common/blog-section.php) */
body #case-study-slider.owl-theme .owl-dots .owl-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 3px;
    margin: -8px 0;
    vertical-align: middle;
}

/* the dots over the "Industries" (Maintenance) and process (Startups) sliders */
body.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots,
body.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots { gap: 0; left: -8px; }
body.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots .owl-dot,
body.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots .owl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    margin: -8px 0;
}

/* the "Why choose" sliders (Swiper): the bullet becomes a 24px button, the dot is drawn inside it */
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination { margin-left: -8px; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    margin: -8px 0 !important;
    vertical-align: middle;
    background: transparent;
    opacity: 1;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    transform: translate(-50%, -50%);
    transition: width .3s ease, background-color .3s ease;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet-active { width: 46px; background: transparent; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet-active:before { width: 30px; background: var(--ai-lime); }
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet:before { transition: none; }
}