/* --- configurable theme vars --- */
:root{
  --tab-accent: #0d6efd;                /* primary accent (change to brand color) */
  --tab-accent-dark: #0b5ed7;
  --tab-bg: #ffffff;
  --tab-muted: #6b7280;
  --tab-radius: 12px;
  --tab-padding-y: 0.6rem;
  --tab-padding-x: 0.85rem;
  --tab-font-size: 0.95rem;
}

/* make sure nav uses system fonts (fast) */
#socialTabsNav,
#socialTabsNav .nav-link {
  border-bottom: 0;
}

/* container tweaks to keep pills consistent */
#socialTabsNav .nav-item {
  margin: 0 6px; /* small breathing room */
}

/* base link appearance */
#socialTabsNav .nav-link {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  padding: var(--tab-padding-y) var(--tab-padding-x);
  border-radius: var(--tab-radius);
  border: 0;
  background: transparent;
  color: #132028; /* good default contrast */
  font-size: var(--tab-font-size);
  font-weight: 600;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  -webkit-font-smoothing:antialiased;
  text-decoration: none;
  line-height: 1;
  box-shadow: none;
   box-shadow: 0 6px 18px rgba(20,24,40,0.06);
}

/* icon size + vertical alignment */
#socialTabsNav .nav-link .fa {
  font-size: 1.15rem;
  line-height: 1;
}

/* subtle hover for pointer feedback (not changing layout) */
#socialTabsNav .nav-link:hover,
#socialTabsNav .nav-link:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20,24,40,0.06);
  text-decoration: none;
}

/* Active tab — clear visual contrast and small gradient */
#socialTabsNav .nav-link.active,
#socialTabsNav .nav-link[aria-selected="true"] {
  background: #f3f3f3;
  color: #003366 !important;
  transform: translateY(-1px);
 
}

/* make icon color invert on active */
#socialTabsNav .nav-link.active .fa,
#socialTabsNav .nav-link[aria-selected="true"] .fa {
  
}

/* small text (hidden on xs normally) should be readable */
#socialTabsNav .nav-link span {
  display: inline-block;
  white-space: nowrap;
}

/* focus-visible for keyboard accessibility (Lighthouse-friendly) */
#socialTabsNav .nav-link:focus-visible {
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 3px;
  box-shadow: 0 6px 18px rgba(13,110,253,0.12);
  border-radius: calc(var(--tab-radius) + 2px);
}

/* reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #socialTabsNav .nav-link,
  #socialTabsNav .nav-link:hover,
  #socialTabsNav .nav-link:active {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}

/* responsive adjustments: tighter for small screens */
@media (max-width: 575.98px) {
  :root { --tab-radius: 10px; --tab-padding-x: 0.6rem; --tab-padding-y: 0.45rem; }
  #socialTabsNav .nav-link { font-size: 0.88rem; gap: .4rem; }
  #socialTabsNav .nav-link .fa { font-size: 1rem; }
}