/* Header nav: visibility filter + stable layout while loading */

.tabs {
  min-height: 48px;
  transition: opacity 0.15s ease;
}

.tabs.tabs--loading {
  opacity: 0.92;
}

.tabs.tabs--ready {
  opacity: 1;
}

.tabs [data-nav-page][hidden] {
  display: none !important;
}

/* Active tab on light nav bar */
.tabs:not(.tabs--on-dark) .tab-btn.active,
.tabs:not(.tabs--on-dark) button.tab-btn.active,
.tabs:not(.tabs--on-dark) a.tab-btn.tab-link.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.tabs:not(.tabs--on-dark) .tab-btn.active:hover,
.tabs:not(.tabs--on-dark) button.tab-btn.active:hover,
.tabs:not(.tabs--on-dark) a.tab-btn.tab-link.active:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.tabs a.tab-btn.tab-link:not(.active) {
  color: #334155;
  text-decoration: none;
}

.tabs a.tab-btn.tab-link:not(.active):hover {
  color: #0f172a;
}

.tabs .tab-btn {
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .tabs .tab-btn.active {
    box-shadow: 0 2px 8px rgba(11, 61, 46, 0.25);
  }
}