/* ================================================
   tabs-overline.css
   Apply .tabs-overline to the wrapper div and
   all styling below is handled automatically.
   Depends on: Bootstrap 5.3, Montserrat variable font
   ================================================ */

/* ── Component tokens — mapped to brand palette ── */
:root {
  --tabs-bg:           var(--secondary-100);  /* panel + active tab background */
  --tabs-inactive-bg:  var(--secondary-300);  /* inactive tab background */
  --tabs-border:       var(--secondary-300);  /* all dividing lines */
  --tabs-col:          var(--primary-900);    /* headings, active tab, meta values */
  --tabs-muted:        var(--secondary-700);  /* body text */
  --tabs-inactive:     var(--secondary-800);  /* inactive tab labels */
  --tabs-hover:        var(--primary-500);    /* tab hover state */
  --tabs-meta:         var(--secondary-400);  /* meta row labels */
}

/* ── Letter-spacing ─────────────────────────────── */
.ls-wide   { letter-spacing: 0.15em; }
.ls-widest { letter-spacing: 0.25em; }

/* ── Wrapper ────────────────────────────────────── */
.tabs-overline {
  background: var(--tabs-bg);
  border: 1px solid var(--tabs-border);
}

/* ── Nav strip ──────────────────────────────────── */
.tabs-overline .nav {
  border-color: var(--tabs-border) !important;
}

.tabs-overline .nav-item {
  border-right: 1px solid var(--secondary-400);
}

.tabs-overline .nav-item:last-child {
  border-right: none;
}

.tabs-overline .nav-link {
  border: none;
  border-radius: 0;
  background: var(--tabs-inactive-bg);
  color: var(--tabs-inactive);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: .75rem 1rem;
  position: relative;
  transition: color 0.25s;
}


.tabs-overline .nav-link:hover:not(.active) {
  color: var(--tabs-hover);
  background-color: var(--secondary-200);
}

.tabs-overline .nav-link.active {
  background: var(--tabs-bg);
  color: var(--tabs-col);
}

/* ── Active indicator — 4px overline ───────────── */
.tabs-overline .nav-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bs-primary);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs-overline .nav-link.active::after {
  transform: scaleX(1);
}

/* ── Panel ──────────────────────────────────────── */
.tabs-overline .tab-pane {
  padding: 2.5rem 3rem;
}

.tabs-overline .tab-pane.show {
  animation: tabFadeUp 0.35s ease both;
}

@keyframes tabFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel content elements ─────────────────────── */
.tabs-overline .tab-eyebrow {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--bs-primary);
  margin-bottom: 1rem;
}

.tabs-overline .tab-title {
  line-height: 1.15;
  color: var(--tabs-col);
  max-width: 580px;
  margin-bottom: 1.25rem;
}

.tabs-overline .tab-body {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--tabs-muted);
  max-width: 620px;
}

/* ── Meta row ───────────────────────────────────── */
.tabs-overline .tab-meta {
  display: flex;
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--tabs-border);
}

.tabs-overline .tab-meta-label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tabs-meta);
  margin-bottom: .375rem;
}

.tabs-overline .tab-meta-value {
  font-size: .875rem;
  font-weight: 500;
  color: var(--tabs-col);
  margin-bottom: 0;
}

/* ── Mobile — stack tabs ────────────────────────── */
@media (max-width: 575.98px) {

  .tabs-overline .nav {
    flex-direction: column;
  }

  .tabs-overline .nav-link {
    border-right: none !important;
    border-bottom: 1px solid var(--tabs-border) !important;
    text-align: left;
    padding: 14px 24px;
  }

  .tabs-overline .nav-link:last-child {
    border-bottom: none !important;
  }

  /* Flip indicator to vertical left bar on mobile */
  .tabs-overline .nav-link::after {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 4px;
    height: 100%;
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tabs-overline .nav-link.active::after {
    transform: scaleY(1);
  }

  .tabs-overline .tab-pane {
    padding: 2rem 1.5rem;
  }

  .tabs-overline .tab-title {
    font-size: 1.5rem;
  }

}

/*******************
For tabs-fullwidth style:
&wrapperCss=`container tabs-fullwidth my-4`
&navCss=`nav tabs-fullwidth-nav`
*******************/
.tabs-fullwidth {
  margin-top: 0px;
}

.tabs-fullwidth .tabs-fullwidth-nav {
  display: table;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs-fullwidth .tabs-fullwidth-nav > li {
  display: table-cell;
}

.tabs-fullwidth .tabs-fullwidth-nav > li .nav-link {
  display: block;
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0;
  text-align: center;
  padding: 15px 10px;
  background: #343a40;
  color: white;
}

.tabs-fullwidth .tabs-fullwidth-nav > li .nav-link:hover {
  background-color: #000;
  color: white;
}

.tabs-fullwidth .tabs-fullwidth-nav > li .nav-link.active {
  border-bottom-color: transparent;
  background: white;
  color: #343a40;
}

.tabs-fullwidth .tab-pane {
  padding: 20px;
  background: white;
}

@media (max-width: 768px) {
  .tabs-fullwidth .tabs-fullwidth-nav {
    display: block;
  }
  .tabs-fullwidth .tabs-fullwidth-nav > li {
    display: block;
  }
  .tabs-fullwidth .tabs-fullwidth-nav > li .nav-link {
    display: block;
  }
}