/* No media queries — all responsive rules in responsive.css.
   sidenav.css — IDF Kenya — Sidenav + mobile tab nav. */

/* =====================================================
   sidenav.css — Unified Side Navigation & Mobile Tabs
   BEM Architecture Component
   ===================================================== */

/* -----------------------------------------------------
   DESKTOP STICKY SIDENAV
----------------------------------------------------- */
.sidenav {
  position: sticky;
  top: 96px;
  width: var(--sidenav-width, 240px);
  flex-shrink: 0;
  align-self: flex-start;
  padding: 28px 0;
}

.sidenav__heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--idf-text-muted);
  margin-bottom: 16px;
  padding-left: 16px;
}

.sidenav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--idf-border);
}

.sidenav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--idf-text-muted);
  border-left: 2px solid transparent;
  margin-left: -2px; /* Overlaps the ul border smoothly */
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  line-height: 1.3;
  text-decoration: none;
}

.sidenav__icon {
  font-size: 0.78rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.sidenav__link:hover {
  color: var(--idf-blue);
  border-left-color: var(--idf-blue-light);
}

.sidenav__link:hover .sidenav__icon {
  opacity: 1;
}

.sidenav__link--active {
  color: var(--idf-blue);
  border-left-color: var(--idf-blue);
  font-weight: 600;
  background: var(--idf-blue-pale);
}

.sidenav__link--active .sidenav__icon {
  opacity: 1;
  color: var(--idf-blue);
}

/* -- Progress Bar Sub-Component -- */
.sidenav__progress {
  margin-top: 28px;
  padding-left: 16px;
}

.sidenav__progress-label {
  font-size: 0.68rem;
  color: var(--idf-text-muted);
  margin-bottom: 6px;
}

.sidenav__progress-bar {
  height: 3px;
  background: var(--idf-border);
  border-radius: 3px;
  overflow: hidden;
}

.sidenav__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--idf-blue), var(--idf-green));
  border-radius: 3px;
  transition: width 0.2s ease;
  width: 0%;
}

/* -- Search Sub-Component (e.g., Resources page) -- */
.sidenav__search {
  margin-top: 24px;
  padding: 0 4px;
}

.sidenav__search-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--idf-text-muted);
  display: block;
  margin-bottom: 8px;
}

.sidenav__search-wrap {
  position: relative;
}

.sidenav__search-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--idf-border);
  border-radius: var(--r-md, 10px);
  font-size: 0.82rem;
  color: var(--idf-text);
  background: var(--idf-cream);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.sidenav__search-input:focus {
  border-color: var(--idf-blue);
  box-shadow: 0 0 0 3px rgba(46,109,180,0.12);
}

.sidenav__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--idf-text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}

/* -----------------------------------------------------
   MOBILE HORIZONTAL TAB NAV
   Base state: hidden (display:none). Revealed by responsive.css
   at ≤1100px via display:block.

   position:sticky keeps it pinned below the navbar as the page
   scrolls. It already creates a containing block for ::after
   pseudo-elements — do NOT add position:relative, which would
   override sticky and break the pinning behaviour.
----------------------------------------------------- */
.mobile-tab-nav {
  display: none;
  position: sticky;
  top: var(--navbar-height, 80px);
  z-index: 200;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--idf-border);
  box-shadow: 0 2px 8px rgba(27, 46, 75, 0.07);
  width: 100%;
}

.mobile-tab-nav__inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge */
  padding: 0 16px;
  /* FIX: min-width: max-content was removed from here.
     It forced the container to expand to the full width of all its
     children, which prevented overflow-x: auto from ever triggering —
     the container WAS the content width, so nothing overflowed.
     With this line removed, the flex container is constrained by its
     parent's 100% width and children correctly overflow, enabling scroll. */
}

.mobile-tab-nav__inner::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.mobile-tab-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 14px;
  font-size: 0.8rem; /* Scaled down slightly to fit more tabs */
  font-weight: 500;
  color: var(--idf-text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}

.mobile-tab-nav__link i {
  font-size: 0.76rem;
  flex-shrink: 0;
}

.mobile-tab-nav__link:hover {
  color: var(--idf-blue);
}

.mobile-tab-nav__link--active {
  color: var(--idf-blue);
  border-bottom-color: var(--idf-blue);
  font-weight: 600;
}

/* -----------------------------------------------------
   MOBILE TAB NAV — SCROLL HINT
   A right-edge gradient fade signals that more tabs exist
   off-screen. It fades out once the user has scrolled to
   the end of the strip.

   The ::after pseudo-element is safe here because
   position:sticky on .mobile-tab-nav already acts as a
   containing block for absolutely positioned children —
   no position:relative is needed (and must not be added,
   as it would break the sticky behaviour).

   .is-scroll-end is toggled by initMobileTabScrollHint()
   in main.js once inner.scrollLeft reaches the far end.
----------------------------------------------------- */
.mobile-tab-nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.96));
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mobile-tab-nav.is-scroll-end::after {
  opacity: 0;
}