/* header.css — shared header normalization
   Load AFTER /css/styles.css
   Purpose:
   - Ensure header aligns with top banner (same left edge as "Home")
   - Keep default layout: logo left, pitch right
   - Homepage stacking stays in index.css
*/

/* =========================
   Top banner tweaks (layout only)
========================= */
.top-banner .container { gap: 12px; }

.top-menu a.active,
.top-menu a[aria-current="page"] { font-weight: 700; }

/* =========================
   Logo header: IMPORTANT FIXES
========================= */

/* styles.css sets .logo-header { display:flex; } which can cause the inner
   .container to size like a flex item (misalignment vs top banner).
   Force it back to a normal block header. */
.logo-header {
  display: block !important;
  width: 100%;
}

/* Keep a consistent flex layout INSIDE the container */
.logo-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gutter);
  flex-wrap: wrap;
  width: 100%;
}

/* Stabilize logo block */
.logo-header .logo {
  flex: 0 0 auto;
  margin-right: 0;
}

/* Remove the left offset from styles.css (.elevator-pitch has margin-left) */
.logo-header .elevator-pitch,
.logo-header .hero-pitch {
  flex: 1 1 420px;
  min-width: 260px;
  margin: 0 !important;
}

/* Est. lockup (works whether div/span) */
.logo-header .established {
  display: block;
  margin: 6px 0 0 0 !important;
}

/* Mobile keeps your intent (centered stack) */
@media (max-width: 768px) {
  .logo-header .container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .logo-header .logo { align-items: center; }
}