/* ---------------------------------------------------------------------------
   The header, on its own.

   The eleven designed pages get their header styling from their own generated
   css/<page>.css. /cart/, /checkout/ and /my-account/ do not: they are Astra
   pages, and only their header is replaced (see php/_shell.php). This file is
   the header half of those page stylesheets, lifted out and made safe to load
   next to a theme that did not expect it.

   Two things differ from the generated copy:

   - Everything is scoped to .pe-header. Astra's own masthead also carries the
     class `site-header`, so a bare `.site-header { position: sticky }` would
     have described both headers. .pe-header.site-header (0,2,0) also outranks
     Astra's `.site-header` rules on our element, which is the point.
   - The resets the export did on bare `a`, `img` and `*` are scoped in here
     rather than global. On the designed pages nothing else exists to break;
     on a WooCommerce checkout, everything does.
   ------------------------------------------------------------------------ */

.pe-header,
.pe-header *,
.pe-mobile-nav,
.pe-mobile-nav * {
  box-sizing: border-box;
}

.pe-header.site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  /* Astra gives its masthead a shadow and its own body font. */
  box-shadow: none;
  font-family: var(--font-body);
}

.pe-header .bar {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pe-header a,
.pe-header a:hover,
.pe-header a:focus {
  text-decoration: none;
}

.pe-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pe-header .logo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

.pe-header .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pe-header .nav-desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pe-header .nav-desktop a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.pe-header .nav-desktop a:hover {
  color: var(--blue-600);
}

.pe-header .nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  background: var(--white);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-primary);
}

.pe-header .nav-burger svg {
  display: block;
}

/* Astra styles anything it recognises as a button, and the two header buttons
   are anchors carrying .btn. Let the design's own variants through. */
.pe-header .pe-cta-group a.btn {
  text-transform: none;
  line-height: 1.2;
}