/* =========================================
   HEADER: make subpages match homepage
   (no HTML changes)
   ========================================= */

/* If fonts aren't already loaded on this page, this will grab them */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --padX: 60px;
  --padY: 24px;
  --gap: 18px;
}

/* 1) The bar itself */
header,
.ac-header,
.nav-container {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;

  display: flex !important;
  flex-wrap: nowrap !important;          /* ✅ keep brand + menu on ONE line */
  align-items: center !important;
  justify-content: flex-start !important;

  padding: var(--padY) var(--padX) !important;
  margin: 0 !important;
  width: 100% !important;

  background: rgba(0, 0, 0, 0.25) !important;  /* same as homepage bar */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Nuke inner wrappers that try to center/squeeze it */
header .container,
.ac-header .container,
.nav-container .container,
header .bar,
.ac-header .bar {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* 2) Brand (left) – same as homepage */
header .brand,
.ac-header .brand,
.nav-container .brand,
header h1.brand,
.ac-header h1.brand,
.nav-container h1.brand {
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;

  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
}

header .brand a,
.ac-header .brand a,
.nav-container .brand a {
  color: #fff !important;
  text-decoration: none !important;
}

/* 3) Nav container itself – push it to the RIGHT */
header nav,
.ac-header nav,
.ac-header .site-nav,
.nav-container nav {
  margin-left: auto !important;          /* ✅ moves menu to the right */
  flex: 0 1 auto !important;
}

/* 4) Nav list – horizontal with gap */
header nav ul,
.ac-header nav ul,
.ac-header .site-nav ul,
.nav-container nav ul {
  list-style: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

header nav li,
.ac-header nav li,
.ac-header .site-nav li,
.nav-container nav li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Links – force exact homepage font + pills */
header nav a,
.ac-header nav a,
.ac-header .site-nav a,
.nav-container nav a {
  display: inline-block !important;

  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.1 !important;

  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  padding: 6px 10px !important;
  border-radius: 8px !important;

  transition: background 0.3s ease, color 0.3s ease !important;
}

header nav a:hover,
.ac-header nav a:hover,
.ac-header .site-nav a:hover,
.nav-container nav a:hover,
header nav a.active,
.ac-header nav a.active,
.ac-header .site-nav a.active,
.nav-container nav a.active,
header nav a[aria-current="page"],
.ac-header .site-nav a[aria-current="page"],
.nav-container nav a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 6) Remove legacy header bits */
.topbar,
.rainbow,
header hr {
  display: none !important;
}

/* 7) Responsive tweaks */
@media (max-width: 1000px) {
  :root { --padX: 30px; }
}

@media (max-width: 600px) {
  header .brand,
  .ac-header .brand,
  .nav-container .brand {
    font-size: 22px !important;
  }
}
/* --- FINAL OVERRIDE: make subpage header = homepage --- */

header,
.ac-header,
.nav-container {
  padding: 24px 60px !important;   /* same as homepage .nav-container */
}

/* match homepage pill size + text size */
header nav a,
.ac-header nav a,
.ac-header .site-nav a,
.nav-container nav a {
  font-size: 16px !important;      /* bump from 14.5 → 16 like home */
  line-height: 1.2 !important;     /* a bit taller, like default text */
  padding: 6px 10px !important;    /* same as homepage */
}
/* ===== HARD LOCK: make subpage header same thickness as home ===== */

/* 1. Fix the bar height explicitly */
header,
.ac-header,
.nav-container {
  height: 87px !important;          /* <- tweak 76–84 until it looks EXACTLY like home */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Vertically center everything inside the bar */
header .container,
.ac-header .container,
.nav-container .container,
header .brand,
.ac-header .brand,
.nav-container .brand,
header nav,
.ac-header nav,
.ac-header .site-nav,
.nav-container nav {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* 3. Force nav text size so it can't be smaller than home */
header nav a,
.ac-header nav a,
.ac-header .site-nav a,
.nav-container nav a {
  font-size: 16px !important;       /* bump this up/down if you want */
  line-height: 1.2 !important;
  padding: 6px 10px !important;     /* keep pill height consistent */
}