/* =============================================================
   EZ ONE Header Component
   ============================================================= */

.ez-site-header,
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--ez-z-sticky);
  background-color: var(--ez-color-white);
  border-bottom: 1px solid var(--ez-color-border);
  transition: box-shadow var(--ez-transition-normal);
}
.ez-site-header.is-scrolled,
.site-header.is-scrolled { box-shadow: var(--ez-shadow-md); }

/* ── Branding ────────────────────────────────────────────────── */
.ez-site-branding { line-height: 0; }
.ez-site-branding .custom-logo,
.ez-site-branding img { max-height: 56px; width: auto; }

/* ── Primary nav (desktop) ───────────────────────────────────── */
.ez-primary-nav { display: none; }
@media (min-width: 1024px) { .ez-primary-nav { display: block; } }

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

.ez-primary-nav-list a {
  font-size: var(--ez-font-size-sm);
  font-weight: var(--ez-font-weight-medium);
  color: var(--ez-color-text);
  text-decoration: none;
  transition: color var(--ez-transition-fast);
}
.ez-primary-nav-list a:hover { color: var(--ez-color-primary); }

/* ── Header CTA ──────────────────────────────────────────────── */
.ez-header-cta {
  background-color: var(--ez-color-primary);
  color: var(--ez-color-white);
  padding: var(--ez-space-2) var(--ez-space-6);
  border-radius: var(--ez-radius-pill);
  font-size: var(--ez-font-size-sm);
  font-weight: var(--ez-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ez-transition-fast);
}
.ez-header-cta:hover {
  background-color: var(--ez-color-secondary);
  color: var(--ez-color-white);
}

/* ── Mobile menu toggle ──────────────────────────────────────── */
.ez-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ez-space-2);
}
@media (min-width: 1024px) { .ez-menu-toggle { display: none; } }

.ez-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--ez-color-text);
  border-radius: 2px;
  transition: transform var(--ez-transition-fast), opacity var(--ez-transition-fast);
}

.ez-menu-open .ez-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ez-menu-open .ez-menu-toggle span:nth-child(2) { opacity: 0; }
.ez-menu-open .ez-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav panel ────────────────────────────────────────── */
.ez-primary-nav.is-open {
  display: block;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ez-color-white);
  padding: var(--ez-space-8) var(--ez-space-sm);
  z-index: var(--ez-z-dropdown);
  overflow-y: auto;
}
.ez-primary-nav.is-open .ez-primary-nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.ez-primary-nav.is-open .ez-primary-nav-list a {
  font-size: var(--ez-font-size-lg);
  padding-block: var(--ez-space-4);
  display: block;
  border-bottom: 1px solid var(--ez-color-border);
  width: 100%;
}