/* ============================================================
   tctopnav.css

   Dedicated stylesheet for the top desktop/tablet navigation tab
   strip rendered by views/templates/header/navigation.tpl when
   header.tpl passes tabStrip=true (i.e. the default look when
   AllowNavImg=0 and CompactNavOnly=0).

   Every rule is scoped under .tc-topnav so adjustments here can
   never bleed into:
     - The Hut sub-page tabs (viewHutHeader.tpl — also uses
       .tc-tabs-scroll/.tc-tabs-table/.tc-tab)
     - The mobile bottom nav (tcbottomnav.css)
     - The hamburger drawer (tcmobilemenu.css)

   Base look (background, radius, active-tab shadow, etc.) still
   inherits from .tc-tabs-scroll/.tc-tabs-table/.tc-tab in
   tribecityv3.css — DO NOT redefine those primitives here. Add
   only top-nav-specific tweaks below.

   The .tc-topnav--sticky modifier pins the strip below the fixed
   header on scroll; it's added by navigation.tpl when header.tpl
   passes stickyTabStrip=true (DisableSlimBarOnScroll AND no slim
   bar, no custom icons). Body-content compensation lives in
   #header.sticky-topnav inside header.tpl's <style> block.
   ============================================================ */

.tc-topnav {
  width: 100%;
  margin: 0 auto;
  background-color:#ffffff !important;
  border-bottom: 1px solid #f0f0f0;
  padding: 5px;
}


/* FA icon spacing inside each tab. */
.tc-topnav .tc-tab .fa {
  margin-right: 3px;
  opacity: 0.85;
}

/* Per-tab unread badge (v3 tabs primitive doesn't ship one). */
.tc-topnav .tc-tab {
  position: relative;
  font-size: 13px;
  letter-spacing: -.3px;
  font-weight: 400;
  transition: 0.1s ease-in-out;
  border-radius: 4px;
}

.tc-topnav .tc-tab.active {
  box-shadow: #c7c7c7 0px 1px 2px;
}

.tc-topnav .tc-tab:hover {
  background-color: #f7f8f9;
  transition: 0.1s ease-in-out;
}

.tc-topnav .tc-tab-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ff6b35;
  color: #ffffff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.tc-topnav .tc-tabs-table {
  background-color: white;
}

/* Sticky mode: pin the strip just below the fixed dark header so it stays
   visible on scroll. Activated when the tribe enabled "Disable slim bar on
   scroll" with neither "Use custom icons" nor "Slim bar" on. Body content
   compensation lives on #header.sticky-topnav (header.tpl <style> block). */
.tc-topnav.tc-topnav--sticky {
  position: fixed;
  top: var(--header-h, 70px);
  left: 0;
  right: 0;
  z-index: 999;
  margin: 0;
}