/* ==========================================================================
   Sticky blue tab strip (.ai-sticky-wrapper / .ai-carousel) on every page
   template that has it — same behaviour as the Services page
   (temp-unified-services.php), without editing each template.

   Every template wraps the strip like this:
     <section class="d-none d-md-block">  (some: plain <section>)
       <div class="ai-sticky-wrapper"> ... </div>
     </section>
   The templates make .ai-sticky-wrapper sticky, which can't work: its
   parent <section> is only as tall as the bar. So the <section> itself is
   made sticky, right below the fixed site header.
   Loaded from functions.php (mastek_enqueue_sticky_strip).
   ========================================================================== */

section:has(> .ai-sticky-wrapper),
section.msk-sticky-strip {           /* class added by js/sticky-strip.js (fallback for browsers without :has) */
    position: sticky;
    top: var(--msk-header-h, 65px);  /* header height, measured by js/sticky-strip.js */
    z-index: 999;
}

/* overflow-x:hidden on <body> turns it into a scroll container, which stops
   sticky from working; clip hides horizontal overflow the same way without
   that side effect */
body:has(.ai-sticky-wrapper),
body.msk-has-sticky-strip {
    overflow-x: clip !important;
}

/* Show the strip on mobile too: the templates hide its <section> below 768px
   with Bootstrap's "d-none d-md-block" (d-none is display:none !important) */
section.d-none:has(> .ai-sticky-wrapper),
section.d-none.msk-sticky-strip,
section.d-none.ai-sticky-section {
    display: block !important;
}


@media(max-width:545px){
  .ai-menu-item {
    font-size: 10px !important;
  }
}
/* Keep both arrows on screen: let the tab carousel take only the space left
   between the prev/next buttons and shrink below its content width (Owl then
   slides the tabs). Templates that rely on clean.css lacked this, so the
   carousel pushed the right arrow off-screen. */
.ai-sticky .ai-carousel {
    flex: 1 1 0;
    min-width: 0;
}

/* Arrow hover colour. clean.css has a global "button:hover { color: unset !important }"
   (and "a:hover { color: var(--brand) !important }" for templates whose arrows are <a>),
   which turned the arrows black on hover. Keep them light instead; full opacity on hover
   so the change is visible (the arrows sit at 50% opacity by default). */
.ai-sticky .ai-nav-btn:hover,
.ai-sticky .ai-nav-btn:focus,
.ai-sticky .ai-nav-btn:hover i,
.ai-sticky .ai-nav-btn:focus i {
    color: #f1f1f1 !important;
}
.ai-sticky .ai-nav-btn:hover,
.ai-sticky .ai-nav-btn:focus-visible {
    opacity: 1;
}

/* Phones only: never show a tab name cut off at the edge of the strip.
   js/sticky-strip.js adds .msk-tab-cut to any tab that doesn't fully fit between the
   arrows; it is hidden but keeps its space, so the carousel positions don't change.
   The arrows are narrowed so more full tab names fit (they were ~56px wide each). */
@media (max-width: 767.98px) {
    .ai-sticky .owl-item.msk-tab-cut {
        visibility: hidden;
    }
    .ai-sticky .ai-nav-btn {
        flex: 0 0 32px;
        width: 32px !important;
        min-width: 32px;
        padding: 0 !important;
    }
    .ai-sticky .container {
        gap: 8px;
    }
}

.ai-sticky .ai-carousel.owl-carousel:not(.owl-loaded) {
    display: flex !important;
    gap: 15px;
    overflow: hidden;
    align-items: center;
}
.ai-sticky .ai-carousel:not(.owl-loaded) > .ai-menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
}