/* ============================================================
   tabs.css — Tab switcher component (Programs + Locations)
   Depends on: variables.css
   ============================================================ */

/* ── Tab list container ─────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

/* Scrollable on very small screens */
@media (max-width: 479px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }
  .tabs::-webkit-scrollbar { display: none; }
}

/* Center-aligned tabs */
.tabs--center {
  justify-content: center;
}

/* ── Tab button ─────────────────────────────────────────── */
.tabs__btn {
  font-family: var(--font-family);
  font-size: var(--text-body-m);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: none;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-6);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
}

.tabs__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.tabs__btn--active,
.tabs__btn[aria-selected="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.tabs__btn--active:hover,
.tabs__btn[aria-selected="true"]:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}

/* ── Pill-style tabs (sub-tabs for age groups) ──────────── */
.tabs--pill .tabs__btn {
  border-radius: var(--radius-full);
  padding: 8px var(--space-4);
  font-size: var(--text-caption);
  min-height: 36px;
}

/* ── Tab panel ──────────────────────────────────────────── */
.tabs__panel {
  /* Panels are shown/hidden via `hidden` attribute (JS-toggled) */
  animation: tab-fade-in 0.25s ease;
}

.tabs__panel[hidden] {
  display: none;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Sub-tab group ──────────────────────────────────────── */
.tabs__sub {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}