/**
 * @file
 * EP Tabs — single source of truth for page-level tab navigation.
 *
 * Visual pattern:
 * - Tab bar centered on the page
 * - Underline on the active tab only (list-divider ::after)
 *
 * Markup patterns supported:
 * - BEM: .ep-tabs > .ep-tabs__list > .ep-tabs__link
 * - Legacy: .ep-contacts-tabs, .ep-checklist-tabs, .ep-guests-tabs
 * - Events/branding: .events-page-header .page-tabs > .tab-navigation > .tab-link
 * - My Account: .ep-user-account-page .account-navigation .nav-tabs > .nav-tab
 * - Signup plan picker: .ep-billing-signup-plan-picker__billing-nav .nav-tabs > .nav-tab
 */

/* ========================================
   TAB CONTAINERS — centered site-wide
   ======================================== */

.ep-tabs,
.ep-contacts-tabs,
.ep-checklist-tabs,
.ep-guests-tabs,
.ep-user-account-page .account-navigation,
.ep-billing-signup-plan-picker__billing-nav.account-navigation,
.events-page-header .page-tabs,
.page-tabs:not(.ep-tabs) {
  margin-bottom: var(--ep-spacing-lg);
  text-align: center;
}

.ep-checklist-tabs {
  position: relative;
  z-index: 2;
}

.ep-user-account-page .account-navigation {
  margin-bottom: var(--ep-spacing-2xl);
}

.ep-billing-signup-plan-picker__billing-nav.account-navigation {
  margin-bottom: 0;
}

/* Events / branding: centered tab bar; optional actions on the right, same row */
.events-page-header .page-tabs,
.page-tabs:not(.ep-tabs) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
}

.events-page-header .page-tabs::after,
.page-tabs:not(.ep-tabs)::after {
  display: none !important;
  content: none !important;
}

.events-page-header .page-tabs .view-options,
.events-page-header .page-tabs .ep-events-view-options,
.page-tabs:not(.ep-tabs) .view-options,
.page-tabs:not(.ep-tabs) .ep-events-view-options {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* ========================================
   TAB ROW
   ======================================== */

.ep-tabs__list,
.ep-contacts-tabs ul,
.ep-checklist-tabs ul,
.ep-guests-tabs ul,
.events-page-header .page-tabs .tab-navigation,
.page-tabs .tab-navigation,
.ep-user-account-page .account-navigation .nav-tabs,
.ep-billing-signup-plan-picker__billing-nav .nav-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ep-spacing-lg);
  border-bottom: none;
}

/* Bootstrap .nav-tabs on account page — no row border */
.ep-user-account-page .account-navigation .nav-tabs,
.ep-billing-signup-plan-picker__billing-nav .nav-tabs {
  border: none !important;
}

/* ========================================
   TAB LINKS
   ======================================== */

.ep-tabs__link,
.ep-contacts-tab,
.ep-checklist-tab,
.ep-guests-tab,
.events-page-header .tab-link,
.page-tabs .tab-link,
.ep-user-account-page .account-navigation .nav-tab,
.ep-billing-signup-plan-picker__billing-nav .nav-tab,
.events-page-header .view-options-trigger,
.page-tabs .view-options-trigger {
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ep-color-text-secondary);
  padding: 0 0 var(--ep-spacing-sm);
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-weight: var(--ep-font-weight-normal);
  border: none;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  line-height: 1.2;
  transition: color var(--ep-transition-base);
}

.ep-tabs__link:hover,
.ep-tabs__link:focus,
.ep-contacts-tab:hover,
.ep-contacts-tab:focus,
.ep-checklist-tab:hover,
.ep-checklist-tab:focus,
.ep-guests-tab:hover,
.ep-guests-tab:focus,
.events-page-header .tab-link:hover,
.events-page-header .tab-link:focus,
.page-tabs .tab-link:hover,
.page-tabs .tab-link:focus,
.ep-user-account-page .account-navigation .nav-tab:hover,
.ep-user-account-page .account-navigation .nav-tab:focus,
.ep-billing-signup-plan-picker__billing-nav .nav-tab:hover,
.ep-billing-signup-plan-picker__billing-nav .nav-tab:focus {
  color: var(--ep-color-text-primary);
  text-decoration: none;
  background: transparent;
}

.ep-tabs__link.is-active,
.ep-tabs__link.active,
.ep-contacts-tab.is-active,
.ep-checklist-tab.is-active,
.ep-guests-tab.is-active,
.events-page-header .tab-link.active,
.page-tabs .tab-link.active,
.ep-user-account-page .account-navigation .nav-tab.active,
.ep-billing-signup-plan-picker__billing-nav .nav-tab.active {
  color: var(--ep-color-text-primary);
  font-weight: var(--ep-font-weight-semibold);
}

.ep-tabs__link.is-active::after,
.ep-tabs__link.active::after,
.ep-contacts-tab.is-active::after,
.ep-checklist-tab.is-active::after,
.ep-guests-tab.is-active::after,
.events-page-header .tab-link.active::after,
.page-tabs .tab-link.active::after,
.ep-user-account-page .account-navigation .nav-tab.active::after,
.ep-billing-signup-plan-picker__billing-nav .nav-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ep-list-divider-width);
  background-color: var(--ep-color-list-divider);
}