:root {
  --font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --nav-height: 80px;

  /* Spacing from screen edges */
  --edge-left: 0rem;
  --edge-right: 2rem;

  /* Banner */
  --logo-h: 64px;

  /* Colors */
  --accent: rgba(193, 164, 81, 1); /* gold accent */
  --cta-bg: #fff;
  --cta-bg-hover: rgba(193, 164, 81, 1);
  --cta-fg: #000;

  --cta-active-bg: #000;
  --cta-active-bg-hover: var(--accent);
  --cta-active-fg: #fff;

  /* Glass header */
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-blur: 8px;
  --glass-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* ---------- Header container (fixed) */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-height);
  font-family: var(--font-family);
}

/* ---------- Inner row: banner | cta */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--edge-left) var(--edge-right);
  background: transparent;
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    backdrop-filter var(--t-base) var(--ease);
}

/* Activate "glass" ONLY when .is-active is on <header> (no hover activation) */
header.is-active .header-inner {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

/* ---------- Banner (logo swap) */
.header-banner .banner {
  display: inline-block;
  height: var(--logo-h);
  line-height: 0;
  position: relative;
}

/* Two stacked images; fade between them */
.banner-img {
  height: 100%;
  width: auto;
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--t-base) var(--ease);
}

/* Default: transparent header uses WHITE banner */
.banner-img-white { opacity: 1; }
.banner-img-black { opacity: 0; }

/* When active (scrolled on home, or any non-home/mobile via JS), show BLACK */
header.is-active .banner-img-white { opacity: 0; }
header.is-active .banner-img-black { opacity: 1; }

/* ---------- CTA Button */
.btn-header {
  appearance: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 15px;
  color: var(--cta-fg);
  background: var(--cta-bg);
  transition:
    transform var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.btn-header:hover {
  background: var(--cta-bg-hover);
}

/* Active palette when header is active */
header.is-active .btn-header {
  background: var(--cta-active-bg);
  color: var(--cta-active-fg);
}
header.is-active .btn-header:hover {
  background: var(--cta-active-bg-hover);
}