/* Unified Nav Pills (Single Global Source of Truth)
   Spec:
   - Inactive: transparent background, gold border, gold icon/text
   - Active: filled gold (gradient) with dark text
   - Mobile (<=576px): icon only (hide text label span.pill-label)
   - Desktop: icon + text
   All previous per-page / variant pill styles removed to eliminate cascade conflicts.
*/

:root {
  --pill-gold: #ffd700;
  --pill-gold-alt: #ffed4a;
  --pill-gold-text-active: #153746;
  --pill-radius: 28px;
  --pill-transition: all .25s ease;
}

/* Base pills */
.nav-pills .nav-link {
  color: var(--pill-gold) !important;
  border: 2px solid var(--pill-gold) !important;
  border-radius: var(--pill-radius) !important;
  font-weight:600;
  letter-spacing:.25px;
  padding:0.55rem 1rem !important;
  margin: 0.25rem; /* global breathing room so pills don't touch */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  position:relative;
  line-height:1.05;
  transition: var(--pill-transition);
  box-shadow:none !important;
}

/* Non-active state explicitly transparent */
.nav-pills .nav-link:not(.active) {
  background: transparent !important;
}
.nav-pills .nav-link i { font-size:.95rem; line-height:1; transform:translateY(-1px); }

.nav-pills .nav-link:hover:not(.active) {
  background: rgba(255,215,0,0.10) !important;
  text-decoration:none;
}

/* Active state */
.nav-pills .nav-link.active {
  background: linear-gradient(135deg,var(--pill-gold) 0%, var(--pill-gold-alt) 100%) !important;
  color: var(--pill-gold-text-active) !important;
  box-shadow: 0 4px 12px rgba(255,215,0,0.35);
}
.nav-pills .nav-link.active i { color: var(--pill-gold-text-active) !important; }

/* Responsive: desktop shows icon + text; mobile = circular icon only */
.nav-pills-responsive .nav-link .pill-label { display:inline; }
@media (max-width: 576px) {
  .nav-pills-responsive .nav-link {
    width:50px; height:50px; min-width:0; padding:0 !important;
    border-radius:50% !important; display:flex; align-items:center; justify-content:center;
  }
  .nav-pills-responsive .nav-link .pill-label { display:none !important; }
  .nav-pills-responsive .nav-link i { margin-right:0; transform:none; font-size:1.15rem; }
  /* Suppress short code overlays – requirement: icon only */
  .nav-pills-responsive .nav-link[data-short]::after { content:none !important; }
}

/* Universal mobile circular enforcement (covers legacy markup lacking .nav-pills-responsive) */
@media (max-width: 576px) {
  .section-nav.nav-pills .nav-link:not(.no-circular),
  .section-nav .nav-link:not(.no-circular) {
    width:50px; height:50px; padding:0 !important; border-radius:50% !important;
    display:flex; align-items:center; justify-content:center; flex:0 0 50px; gap:0 !important;
  }
  .section-nav.nav-pills .nav-link:not(.no-circular) .pill-label,
  .section-nav .nav-link:not(.no-circular) .pill-label { display:none !important; }
  .section-nav.nav-pills .nav-link:not(.no-circular) i,
  .section-nav .nav-link:not(.no-circular) i { margin-right:0 !important; transform:none !important; font-size:1.15rem; }
  /* Allow wrap to form second row automatically */
  .section-nav { flex-wrap:wrap; }
}

/* Section navigation wrapper utility */
.section-nav { display:flex; flex-wrap:wrap; gap:0.55rem; justify-content:center; }

/* Optional glass container wrapper */
.pill-glass { background:rgba(21,55,70,0.50); border:1px solid rgba(255,215,0,0.25); border-radius:24px; padding:0.55rem 0.85rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
/* Lighter variant used in Weekly Check-in */
.pill-glass-faint { background:rgba(21,55,70,0.30) !important; border-color: rgba(255,215,0,0.20) !important; }

/* Hide label but show short code via data-short on very small screens (optional) */
/* (Short code variant removed per new spec: mobile circle = icon only) */

/* Utility: icon-only group (if used anywhere) simply reuse base; ensure circular if needed */
.nav-pills-icon .nav-link { border-radius:50% !important; width:54px; height:54px; padding:0.55rem !important; }
@media (max-width:576px){ .nav-pills-icon .nav-link { width:50px; height:50px; } }

/* NEW: Force circular icon pills across all breakpoints when container has .nav-pills-circular */
.nav-pills-circular .nav-link {
  width:56px; height:56px; padding:0 !important; border-radius:50% !important;
  display:flex; align-items:center; justify-content:center; gap:0 !important; min-width:0 !important;
}
.nav-pills-circular .nav-link i { margin:0 !important; font-size:1.15rem; transform:none; }
.nav-pills-circular .nav-link .pill-label { display:none !important; }
@media (max-width:576px){ .nav-pills-circular .nav-link { width:50px; height:50px; } }

/* Accessibility focus */
.nav-pills .nav-link:focus-visible { outline:2px solid #ffec80; outline-offset:2px; }

/* Data marker (retained) */
.pill-has-data::after { content:""; position:absolute; top:4px; right:4px; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#35e07c,#7affb7); box-shadow:0 0 0 1px rgba(0,0,0,0.4); }

/* Unified visibility toggle states (if JS adds these) */
.nav-section-btn.section-visible,
.section-nav.nav-pills .nav-link.section-visible,
.section-nav .nav-link.section-visible,
.daily-nav-pills .nav-link.section-visible {
  /* Visually identical to .nav-pills .nav-link.active */
  outline: none;
  background: linear-gradient(135deg,var(--pill-gold) 0%, var(--pill-gold-alt) 100%) !important;
  color: var(--pill-gold-text-active) !important;
}
.nav-section-btn.section-visible i,
.section-nav.nav-pills .nav-link.section-visible i,
.section-nav .nav-link.section-visible i,
.daily-nav-pills .nav-link.section-visible i { color: var(--pill-gold-text-active) !important; }
.nav-section-btn.section-hidden { opacity:.55; }

/* Prevent per-page width forcing */
.section-nav .nav-link { width:auto; }

/* Fluid nav pill groups (shared utility for top nav sections) */
.pill-nav-group { display:flex; flex-wrap: wrap; gap: 0.25rem; }
.pill-nav-bar { justify-content: center; }

/* Nutrition top tabs spacing (shared placement rule) */
#mainTabs { margin-top: 25px; }
@media (min-width: 992px) {
  #mainTabs { margin-top: 40px; }
}

/* Weekly nav: reinforce active gold fill against any page-level overrides */
.weekly-nav-pills .nav-link.active {
  background: linear-gradient(135deg,var(--pill-gold) 0%, var(--pill-gold-alt) 100%) !important;
  color: var(--pill-gold-text-active) !important;
}

/* Daily nav: reinforce active gold fill (guard against legacy cascade) */
.daily-nav-pills .nav-link.active {
  background: linear-gradient(135deg,var(--pill-gold) 0%, var(--pill-gold-alt) 100%) !important;
  color: var(--pill-gold-text-active) !important;
}
.daily-nav-pills .nav-link.active i { color: var(--pill-gold-text-active) !important; }

/* Failsafe: Any section pill that is NOT explicitly hidden should appear filled */
.section-nav .nav-section-btn:not(.section-hidden) {
  background: linear-gradient(135deg,var(--pill-gold) 0%, var(--pill-gold-alt) 100%) !important;
  color: var(--pill-gold-text-active) !important;
}
.section-nav .nav-section-btn:not(.section-hidden) i {
  color: var(--pill-gold-text-active) !important;
}