/* ==========================================================================
   Header / Navigation — Edge Pharma
   Global site navigation: logo, primary links, CTA, and the mobile drawer.
   Markup is identical and reused, unchanged, on every page.

   Per spec, ALL navigation styling (including breakpoint handling) is
   self-contained in this file rather than split across layout/grid.css
   or responsive.css.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Header shell
   --------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: 88px;
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}

/* Added by navigation.js once the page scrolls past 20px.
   Height never changes — only the surface treatment does. */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
}

/* Offsets page content for the fixed header above. */
.main {
  padding-top: 88px;
}

/* ---------------------------------------------------------------------
   Home page — transparent header over the hero
   Only the home page's hero bleeds up behind the fixed header, so only
   the home page removes the main's offset and lets the header sit
   see-through (white logo/links) until the user scrolls, at which point
   the normal opaque "is-scrolled" surface (and color logo) takes over.
   --------------------------------------------------------------------- */

body.page-home .main {
  padding-top: 0;
}

body.page-home .site-header:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
}

body.page-home .site-header:not(.is-scrolled) .navbar__logo--color {
  display: none;
}

body.page-home .site-header:not(.is-scrolled) .navbar__logo--white {
  display: block;
}

body.page-home .site-header:not(.is-scrolled) .navbar__link {
  color: var(--color-white);
}

body.page-home .site-header:not(.is-scrolled) .navbar__toggle-bar {
  background-color: var(--color-white);
}

/* ---------------------------------------------------------------------
   Navbar row
   --------------------------------------------------------------------- */

.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container-max-width);
  height: 100%;
  margin-inline: auto;
  padding-inline: 32px;
}

/* ---------------------------------------------------------------------
   Logo
   Two logo images are stacked in the markup (color + white); CSS shows
   only one at a time. Every page shows the color logo by default. The
   home page swaps to the white logo while the header is transparent
   (see "Home page — transparent header" below).
   --------------------------------------------------------------------- */

.navbar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo {
  height: 40px;
  width: auto;
  display: block;
}

.navbar__logo--white {
  display: none;
}

/* ---------------------------------------------------------------------
   Navigation links
   --------------------------------------------------------------------- */

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  padding-block: var(--space-2);
  transition: color 250ms var(--ease-default);
}

/* Underline animates in from the center on hover / active */
.navbar__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width 250ms var(--ease-default);
}

.navbar__link:hover {
  color: var(--color-primary);
}

.navbar__link:hover::after {
  width: 100%;
}

.navbar__link.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

.navbar__link.is-active::after {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Layout spacing — logo / nav / CTA
   --------------------------------------------------------------------- */

.navbar__list {
  display: flex;
  align-items: center;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-9); /* 48px — Navigation → CTA spacing */
}

/* Below 992px, .navbar__menu is position:fixed (see the mobile drawer
   rules further down) and drops out of the flex flow. That leaves only
   the brand and .navbar__actions in flow, both flex-start by default,
   which stacks the logo and the hamburger toggle on top of each other.
   This is a latent gap in the shared layout math (present in the static
   reference too, not a WP-only regression) — push actions to the far
   edge so they never overlap the logo, at any mobile width. Desktop is
   untouched — .navbar__menu's own margin-left: auto already positions
   things correctly there. */
@media (max-width: 991px) {
  .navbar__actions {
    margin-left: auto;
  }
}

/* Compound selectors (.btn.navbar__cta--*) beat buttons.css's plain .btn
   display rule on specificity, regardless of stylesheet load order. */
.btn.navbar__cta--desktop {
  display: none;
}

/* Nav CTA is a teal button, distinct in color from the primary .btn used
   elsewhere (hero CTAs, etc.) — same sharp radius as every other button. */
.btn.navbar__cta {
  background-color: var(--color-secondary);
  border-radius: var(--radius-sharp);
}

.btn.navbar__cta:hover {
  background-color: #0f9c8d;
}

/* ---------------------------------------------------------------------
   Hamburger toggle (mobile)
   --------------------------------------------------------------------- */

.navbar__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.navbar__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: transform var(--duration-base) var(--ease-default),
              opacity var(--duration-base) var(--ease-default);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Mobile menu (drawer) — slides in from the right, <992px
   --------------------------------------------------------------------- */

.navbar__menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background-color: var(--color-white);
  box-shadow: var(--shadow-xl);
  padding: var(--space-9) var(--space-7);
  margin-left: auto; /* Logo → Navigation spacing, once un-drawered at desktop */
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-default);
}

.navbar__menu.is-open {
  transform: translateX(0);
}

.navbar__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 44px;
  height: 44px;
}

.navbar__close-bar {
  display: block;
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
}

.navbar__close-bar:first-child {
  transform: rotate(45deg);
}

.navbar__close-bar:last-child {
  transform: rotate(-45deg);
}

.navbar__cta--mobile {
  width: 100%;
  justify-content: center;
}

/* Backdrop behind the mobile drawer */
.navbar__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background-color: rgba(16, 24, 32, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.navbar__overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile-first: the drawer's own nav list is a centered column */
.navbar__menu .navbar__list {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7); /* 32px */
}

/* ---------------------------------------------------------------------
   Desktop (≥992px) — collapse the drawer back into an inline row
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .navbar__toggle,
  .navbar__close,
  .navbar__overlay {
    display: none;
  }

  .btn.navbar__cta--mobile {
    display: none;
  }

  .btn.navbar__cta--desktop {
    display: inline-flex;
  }

  .navbar__menu {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    transform: none;
    transition: none;
  }

  .navbar__menu .navbar__list {
    flex-direction: row;
    gap: var(--space-8); /* 40px — Navigation Gap */
  }
}

/* ---------------------------------------------------------------------
   Focus states (keyboard accessibility)
   --------------------------------------------------------------------- */

.navbar__link:focus-visible,
.navbar__brand:focus-visible,
.navbar__toggle:focus-visible,
.navbar__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}