/* ============================================================
   service-nav.css  —  Universal sticky anchor nav
   Include in every service-detail page:
   <link href="assets/css/service-nav.css" rel="stylesheet">
   ============================================================ */

/* ── 1. NAV WRAPPER ───────────────────────────────────────── */
.sd-tab-nav {
  background  : #ffffff;
  position    : sticky;
  top         : 65px;          /* must match navbar height in style.css  */
  z-index     : 500;           /* below Bootstrap navbar (1030) but above page */
  overflow-x  : auto;
  overflow-y  : hidden;
  -ms-overflow-style : none;
  scrollbar-width    : none;

  /* flush shadow that "glues" it to the navbar bottom */
  box-shadow  : 0 2px 0 0 #e2e8f0,
                0 4px 16px rgba(15, 23, 42, 0.07);

  /* kill any gap that could appear between navbar and this bar */
  margin-top  : 0;
  border-top  : none;
}
.sd-tab-nav::-webkit-scrollbar { display: none; }

/* ── 2. INNER SCROLL TRACK ────────────────────────────────── */
.sd-tab-nav .inner {
  display        : flex;
  white-space    : nowrap;
  padding        : 0;
  min-width      : max-content;  /* allows scroll on small screens */
}

/* ── 3. INDIVIDUAL TAB BUTTONS ────────────────────────────── */
.sd-tab-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 0 22px;
  height         : 48px;               /* fixed height = no layout shift */
  font-size      : 13px;
  font-weight    : 600;
  color          : #64748b;
  text-decoration: none;
  cursor         : pointer;
  position       : relative;
  white-space    : nowrap;
  border         : none;
  background     : transparent;
  outline        : none;
  transition     : color 0.18s ease;

  /* active indicator bar rendered as ::after pseudo-element  */
}
.sd-tab-btn::after {
  content    : '';
  position   : absolute;
  bottom     : 0;
  left       : 0;
  right      : 0;
  height     : 2.5px;
  border-radius: 2px 2px 0 0;
  background : transparent;
  transition : background 0.18s ease;
}

/* hover state */
.sd-tab-btn:hover {
  color : #1e40af;
}
.sd-tab-btn:hover::after {
  background : #dbeafe;
}

/* active state */
.sd-tab-btn.active {
  color : #1e40af;
}
.sd-tab-btn.active::after {
  background : #1e40af;
}

/* ── 4. RESPONSIVE ────────────────────────────────────────── */

/* on desktop give a little horizontal padding to the track   */
@media (min-width: 992px) {
  .sd-tab-nav .inner {
    padding-left  : calc((100vw - 1320px) / 2);   /* mirrors container-xl */
    padding-right : calc((100vw - 1320px) / 2);
  }
}

/* on smaller desktops use a fixed pad */
@media (min-width: 768px) and (max-width: 1400px) {
  .sd-tab-nav .inner {
    padding-left  : 1.5rem;
    padding-right : 1.5rem;
  }
}

/* on mobile shrink padding and font slightly */
@media (max-width: 767px) {
  .sd-tab-nav {
    top : 56px;   /* Bootstrap navbar collapses to 56 px on mobile */
  }
  .sd-tab-nav .inner {
    padding-left  : 1rem;
    padding-right : 1rem;
  }
  .sd-tab-btn {
    padding   : 0 14px;
    height    : 44px;
    font-size : 12.5px;
  }
}