/* =============================================================================
   Site Header & Navbar
   -----------------------------------------------------------------------------
   .site-header
   .site-header--home     — gives the header the same colour as hero image
   .site-header--pages    — white with blur backdrop on non-home pages
     .navbar
       .logo-name            — logo image + wordmark
       .nav-group            — primary nav pill container
         .nav-group--home    — home page: white-tint background
         .nav-group--page    — other pages: callout border
         .nav-active         — currently active nav link
       .nav-secondary        — About / Contact links
       .nav-toggle           — mobile hamburger (hidden on desktop)
   ============================================================================= */

/* =============================================================================
   SITE HEADER
   ============================================================================= */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
}

/* Hero blue bleeds into the header on the home page */
.site-header--home {
  background-color: rgb(from var(--colour-primary-20) r g b / 0.8);
  border-bottom: 1px solid var(--colour-primary-30);
  backdrop-filter: blur(8px);
    position: fixed;
    z-index: 50;
}

/* blur background on pages */
.site-header--pages {
  background-color: rgb(from var(--colour-neutral-3) r g b / 0.8);
  border-bottom: 1px solid var(--colour-neutral-10);
  backdrop-filter: blur(8px);
  z-index: 50;
}


/* =============================================================================
   NAVBAR
   ============================================================================= */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-s) var(--spacing-page-margins) var(--spacing-s);
}

/* =============================================================================
   LOGO + WORDMARK
   ============================================================================= */
.logo-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);   /* 12px */
  text-decoration: none;
  flex-shrink: 0;
}

.logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: left;
}

.site-name {
  font-family: var(--font-family);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);   /* #0a2567 */
  white-space: nowrap;
}

/* =============================================================================
   PRIMARY NAV GROUP (pill container)
   ============================================================================= */
.nav-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);        /* 8px */
  padding: var(--spacing-xxs);   /* 4px */
  border-radius: var(--corner-round);
  border: var(--weight-xxs) solid transparent;
}

/* Home page — subtle white tint container, white-pressed active item */
.nav-group--home {
  background-color: var(--colour-white-30);  /* rgba(255,255,255,0.3) */
  border-color: transparent;
}
.nav-group--home .nav-active {
  background-color: var(--button-transparent-pressed);  /* rgba(255,255,255,0.9) */
  color: var(--button-transparent-on-transparent);
}

/* Other pages — callout border container, primary blue active item */
.nav-group--page {
  background-color: transparent;
  border-color: var(--surface-callout-border);   /* #cbddf7 */
}
.nav-group--page .nav-active {
  background-color: var(--button-primary-enabled);  /* #244fcc */
  color: var(--button-primary-on-primary);           /* #f7f7f7 */
}

/* =============================================================================
   SECONDARY NAV (About / Contact)
   ============================================================================= */
.nav-secondary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);         /* 8px */
  padding: 4px var(--spacing-xxs);
  border-radius: var(--corner-round);
  flex-shrink: 0;
}

/* Active state for secondary nav links (About / Contact pages) */
.nav-secondary .nav-active {
  background-color: var(--button-primary-enabled);
  color: var(--button-primary-on-primary);
}

/* =============================================================================
   MOBILE HAMBURGER
   ============================================================================= */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animated X when open */
.navbar.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.navbar.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================================
   RESPONSIVE — 900px breakpoint
   ============================================================================= */
@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    align-items: center;
    padding: var(--spacing-s) var(--spacing-l);
    /* 12px top/bottom | 24px sides — compact bar */
    gap: var(--spacing-m);
  }

  /* Smaller logo + wordmark keep the collapsed bar short */
  .logo {
    width: 40px;
    height: 40px;
  }

  .site-name {
    font-size: 28px;
  }

  .nav-group,
  .nav-secondary {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    order: 3;
    border-radius: var(--corner-m-radius);
    padding: var(--spacing-xs);
    border-color: var(--surface-callout-border);
  }

  .navbar.is-open .nav-group,
  .navbar.is-open .nav-secondary {
    display: flex;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
    order: 2;
  }

  .logo-name {
    order: 1;
  }

  /* Full-width nav links on mobile */
  .nav-group .btn,
  .nav-secondary .btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--corner-s-radius);
  }
}