/* ==========================================================================
   Header Section
   Styles for template-parts/sections/header.php or global header navigation
   ========================================================================== */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding-block: var(--space-6);
  /* 24px desktop */
  background-color: transparent;
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header__brand-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: rgba(46, 65, 46, 0.05);
  border: 1px solid rgba(46, 65, 46, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px var(--space-5) 6px 6px;
  box-shadow: var(--shadow-soft);
}

.site-branding {
  display: flex;
  align-items: center;
}

.site-branding__link {
  display: flex;
  align-items: center;
}

.site-logo {
  height: 36px;
  width: auto;
  display: block;
}

.site-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-green-dark);
}

.primary-navigation {
  display: flex;
  align-items: center;
}

.primary-navigation__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-navigation__link {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  /* 12px */
  font-weight: 600;
  color: var(--color-green-dark);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

.primary-navigation__link:hover {
  background-color: rgba(46, 65, 46, 0.05);
  color: var(--color-green-deep);
}

.header-cta-wrapper {
  display: flex;
  align-items: center;
}

.header-cta {
  transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.header-cta:hover {
  background-color: var(--color-green-dark) !important;
  color: #faf8f3 !important;
  transform: translateY(-1px);
}

.header-cta:active {
  transform: translateY(0);
}

/* Responsive Rules for Header Section */
@media (max-width: 1024px) {
  .site-header {
    padding-block: var(--space-4);
  }
}

@media (max-width: 768px) {
  .site-header {
    padding-block: var(--space-3);
  }

  .site-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .site-header__brand-nav {
    background-color: rgba(46, 65, 46, 0.05);
    border: 1px solid rgba(46, 65, 46, 0.08);
    box-shadow: var(--shadow-soft);
    padding: 4px 12px 4px 4px;
    gap: 8px;
  }

  .site-branding {
    display: flex;
    align-items: center;
  }

  .site-logo {
    height: 28px; /* slightly smaller logo */
  }

  .primary-navigation {
    display: flex !important;
  }

  .primary-navigation__link {
    font-size: 11px;
    padding: 4px 8px;
  }

  .header-cta {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
}