/**
 * Global Energy Flow — Shared Title-Section CSS
 * ==============================================
 * Single source of truth for the page-title block on every content page.
 *
 * Loaded next to gef-header.css. Defines:
 *   .title-v2                 outer wrapper (replaces .gef-title-bar)
 *   .title-v2 .title-row      flex row (title + tabs)
 *   .title-v2 .title-text     left side
 *   .title-v2 .eyebrow        small uppercase context label
 *   .title-v2 h1              page title
 *   .title-v2 .subtitle       descriptive line
 *   .title-v2 .tabs           Linear-style underline tabs
 *
 * Linear-inspired type scale — restrained, tight, no marketing-hero sizes.
 * Vertical rhythm aligned to the header above (same 24px horizontal padding).
 *
 * Old `.gef-title-bar` / `.gef-tab*` rules in gef.css remain in place and
 * harmlessly match nothing on migrated pages.
 */

/* Kill the 56px top padding on .gef-main left over from when the header
   was fixed-positioned. The new header is in flow, so this band is dead
   space (visible in the screenshots between header and page title).
   Since gef-title.css is loaded only on migrated pages and loads AFTER
   gef.css, this override wins on equal specificity. */
.gef-main {
  padding-top: 0;
}

/* Title-v2 outer wrapper */
.title-v2 {
  padding: 28px 24px 24px;
  border-bottom: 1px solid var(--gh-border, rgba(255,255,255,0.05));
  background: var(--gh-bg, #08090A);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.title-v2 .title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.title-v2 .title-text {
  min-width: 0;
  flex: 1;
}

/* Eyebrow — small uppercase context label */
.title-v2 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gh-text-3, #62666D);
  margin-bottom: 10px;
}
.title-v2 .eyebrow .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #50535A;          /* --text-4 equivalent — slightly dimmer than eyebrow text */
  display: inline-block;
}

/* H1 — restrained, no marketing-hero size */
.title-v2 h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -0.015em;
  color: var(--gh-text, #F7F8F8);
  line-height: 1.3;
}

/* Subtitle — readable dim, not invisible */
.title-v2 .subtitle {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gh-text-2, #8A8F98);
  line-height: 1.55;
  max-width: 760px;
}

/* Linear-style tabs — minimal underline on active, no purple pill */
.title-v2 .tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  margin-bottom: -24px;        /* tabs sit on the title-bar's bottom border */
  align-self: flex-end;
}
.title-v2 .tabs .tab {
  padding: 8px 14px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gh-text-3, #62666D);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
}
.title-v2 .tabs .tab:hover {
  color: var(--gh-text-2, #8A8F98);
}
.title-v2 .tabs .tab.active {
  color: var(--gh-text, #F7F8F8);
  border-bottom-color: var(--gh-accent, #5E6AD2);
}

@media (max-width: 768px) {
  .title-v2 {
    padding: 20px 16px 18px;
  }
  .title-v2 h1 {
    font-size: 18px;
  }
  .title-v2 .title-row {
    flex-direction: column;
    align-items: stretch;
  }
  .title-v2 .tabs {
    margin-bottom: -18px;
    margin-top: 4px;
  }
}