/* ==========================================================================
   Header — East Dallas Primary Care
   Sticky header with wordmark, nav, and phone CTA
   Mobile: abbreviated wordmark + call button + hamburger
   Desktop: full wordmark + nav links + phone pill
   ========================================================================== */

/* -----------------------------------------------------------------------
   Site Header — Base
   Fixed transparent header overlapping the hero/page-header gradient.
   Transitions to frosted dark glass on scroll.
   ----------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  transition: background-color 0.3s ease,
              box-shadow 0.3s ease,
              backdrop-filter 0.3s ease;
}

/* Scrolled state — frosted dark glass */
.site-header.is-scrolled {
  background-color: rgba(18, 39, 64, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------------------------------------
   Header Inner — Container with flexbox
   ----------------------------------------------------------------------- */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  min-height: 64px;
}

/* -----------------------------------------------------------------------
   Wordmark — Logo image
   ----------------------------------------------------------------------- */
.header__wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header__logo {
  height: 52px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* -----------------------------------------------------------------------
   Desktop Navigation
   Hidden on mobile, shown on desktop
   ----------------------------------------------------------------------- */
.header__nav {
  display: none;
}

.header__nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Override global li margin from typography.css */
.header__nav-list li {
  margin-bottom: 0;
}

.header__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.header__nav-link:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

/* Active page indicator */
.header__nav-link.is-active {
  color: var(--white);
}

/* -----------------------------------------------------------------------
   Phone CTA — Desktop (pill button)
   Hidden on mobile, shown on desktop
   ----------------------------------------------------------------------- */
.header__phone-desktop {
  display: none;
}

/* Outlined white phone pill — always on dark background */
.header__phone-desktop.btn {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.header__phone-desktop.btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
  color: var(--white);
}

/* -----------------------------------------------------------------------
   Phone CTA — Mobile (compact pill with "Call" text)
   Always visible on mobile, hidden on desktop
   ----------------------------------------------------------------------- */
.header__phone-mobile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--primary-blue);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  min-height: 44px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.header__phone-mobile:hover {
  background-color: var(--primary-blue-hover);
  color: var(--white);
  text-decoration: none;
}

.header__phone-mobile svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Hamburger Menu Button — Mobile only
   ----------------------------------------------------------------------- */
.header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.header__menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header__menu-btn svg {
  width: 24px;
  height: 24px;
}

/* -----------------------------------------------------------------------
   Mobile Actions — Phone + Hamburger grouped on right
   ----------------------------------------------------------------------- */
.header__actions-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* -----------------------------------------------------------------------
   Mobile Menu Overlay / Dropdown
   Hidden by default, shown when .is-open is added (via JS in Task 3)
   ----------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 64px; /* matches header min-height */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow),
              visibility var(--transition-slow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: none;
  }
}

/* Mobile menu inner padding */
.mobile-menu__inner {
  padding: var(--space-6) var(--container-padding);
}

/* Mobile menu nav list */
.mobile-menu__nav {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.mobile-menu__nav li {
  margin: 0;
  border-bottom: 1px solid var(--gray-300);
}

.mobile-menu__nav li:last-child {
  border-bottom: none;
}

.mobile-menu__link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
  text-decoration: none;
  padding: var(--space-4) 0;
  transition: color var(--transition-fast);
  min-height: 44px;
}

.mobile-menu__link:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

.mobile-menu__link.is-active {
  color: var(--primary-blue);
}

/* Mobile menu phone link (full number) */
.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--primary-blue);
  text-decoration: none;
  padding: var(--space-4) 0;
  transition: color var(--transition-fast);
}

.mobile-menu__phone:hover {
  color: var(--primary-blue-hover);
  text-decoration: none;
}

.mobile-menu__phone svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Desktop Breakpoint — 768px
   Switch from mobile to desktop header layout
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
  .header__inner {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    min-height: 72px;
  }

  /* Larger logo on desktop */
  .header__logo {
    height: 60px;
  }

  /* Show desktop nav */
  .header__nav {
    display: flex;
    align-items: center;
  }

  /* Show desktop phone CTA */
  .header__phone-desktop {
    display: inline-flex;
  }

  /* Hide mobile-only elements */
  .header__phone-mobile {
    display: none;
  }

  .header__menu-btn {
    display: none;
  }

  .header__actions-mobile {
    display: none;
  }

  /* Mobile menu is never visible on desktop */
  .mobile-menu {
    display: none;
  }
}

/* -----------------------------------------------------------------------
   Large Desktop — wider nav spacing
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .header__nav-list {
    gap: var(--space-8);
  }
}