/* ==========================================================================
   COMPONENT / STICKY ANCHOR NAV
   The pill tab bar that sticks under the header (e.g. "מידע כללי / למידה
   / כלים / מקרי בוחן"). Moved out of pages/_general-content.css (2026)
   because Category.html now reuses it too, and it has no dependency on
   anything else in that page's stylesheet. Any page using it must also
   set a real background image on .sticky-nav__bg (pattern-texture.jpg
   or similar) and wire up active-state + scroll behavior — see
   assets/js/components/jump-nav.js (initJumpNav), the generic "jump to
   section" scroll-spy component this markup's active/click behavior
   is driven by (see pages/category.js's initSubnav()).
   ========================================================================== */

/* ==========================================================================
   Sticky Anchor Navigation
   ========================================================================== */

.sticky-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 100;
  width: 100%;
  height: 164px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  isolation: isolate;
  direction: rtl;
}

/* רקע הטקסטורה והצללית לפי ה-Figma */
.sticky-nav__bg {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 0;
  opacity: 0.85; /* כוונון עדין לשילוב עם הבלור */
}

.sticky-nav__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  padding: 0 48px;
  display: flex;
  justify-content: center;
}

/* רשימת הטאבים */
.sticky-nav__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 64px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.sticky-nav__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* הקישור הבודד */
.sticky-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 12px;
  font-family: 'Fredoka', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  color: #183B51;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

/* מצבי Hover ו-Active */
.sticky-nav__link:hover {
  color: #C22DAF;
}

/* Driven by components/jump-nav.js, which keeps aria-current in sync
   (both on click and via scroll-spy) — a reliable single source of
   truth, same reasoning as [aria-selected] on .cat-filter-pill. */
.sticky-nav__link[aria-current="true"] {
  font-weight: 600;
  color: #183B51;
  border-bottom-color: #C22DAF;
}

@media (max-width: 768px) {
  .sticky-nav__container {
      padding: 0 20px;
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .sticky-nav {
    height: auto;
    padding: 16px 0;
  }

  .sticky-nav__list {
    gap: 32px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .sticky-nav__link {
    font-size: 20px;
  }
}

/* Header switches to its shorter 76px height at this same breakpoint
   (see layout/_header.css) — keep the sticky offset in sync so this
   nav sticks right under the header instead of under/over it. */
@media (max-width: 899px) {
  .sticky-nav {
    top: 76px;
  }
}

@media (max-width: 640px) {
  .sticky-nav__list {
    gap: 20px;
  }

  .sticky-nav__link {
    font-size: 18px;
    height: 40px;
  }
}