/* PA header overlay — header-top, header-bottom (sticky), 5-item nav with dropdown panels,
   mobile 2-row layout, mobile bottom nav, cart-zero hiding.
   Source of truth: /home/abc/projects/uk-pa/header_staging/pa-header.css
   Deployed to: /home/pa/web/staging.power-anabolic.com/public_html/themes/hummingbird/assets/css/pa-header.css
   Loaded via head.tpl <link>. */

/* ============================================================
   Tokens (subset of design plan §2 palette)
   ============================================================ */
:root {
  --pa-navy: #1B2A3B;
  --pa-amber: #D28A2D;
  --pa-amber-hover: #B7741E;
  --pa-bg-soft: #F7F6F3;
  --pa-text: #1A1A1A;
  --pa-muted: #6B7280;
  --pa-border: #E6E4DF;
  --pa-shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
  --pa-shadow-lg: 0 8px 28px rgba(15, 23, 42, .12);
}

/* ============================================================
   Header-top (desktop only) — navy bar, email + (optional) rating
   ============================================================ */
.pa-header-top {
  background: var(--pa-navy);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pa-header-top a { color: inherit; text-decoration: none; }
.pa-header-top a:hover { color: #fff; }
.pa-header-top .row { min-height: 36px; }

.pa-header-top__left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pa-header-top__email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.pa-header-top__email:hover { color: #fff; }
.pa-header-top__icon { opacity: .85; flex-shrink: 0; }

.pa-header-top__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: 18px;
}
.pa-header-top__stars {
  color: var(--pa-amber);
  letter-spacing: 1px;
  font-size: 12px;
}

.pa-header-top__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
/* Drop currency selector entirely — UK-only / GBP-only shop */
.pa-header-top #_desktop_ps_currencyselector,
.pa-header-top .ps-currencyselector { display: none !important; }
/* Make signin + cart blend into the navy bar */
.pa-header-top .header-block { background: transparent; }
.pa-header-top .header-block__action-btn,
.pa-header-top .header-block__action-btn:hover {
  color: rgba(255,255,255,.92);
  background: transparent;
  padding: 6px 10px;
}
.pa-header-top .header-block__title { color: inherit; font-weight: 500; }
.pa-header-top .header-block__icon { color: rgba(255,255,255,.92); font-size: 18px; }
.pa-header-top .header-block__badge {
  background: var(--pa-amber);
  color: #fff;
  border: 0;
  font-weight: 700;
}
/* Hide the "0" badge — script adds .pa-badge-zero when count=0 */
.pa-header-top .header-block__badge.pa-badge-zero { display: none !important; }

/* ============================================================
   Header-bottom — visual styling only.
   Sticky behaviour is provided by stock <.header> (z-index 1021).
   We deliberately do NOT add another `position: sticky` here:
   nested sticky stacking contexts break panel hit-testing in the
   "neither is stuck" state at top of page (clicks fell through to
   the hero overlay underneath).
   ============================================================ */
.pa-header-bottom {
  background: #fff;
  border-bottom: 1px solid var(--pa-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.pa-header-bottom.is-stuck { box-shadow: var(--pa-shadow-md); }

.header-bottom__row { padding: 10px 0; min-height: 64px; }
@media (min-width: 992px) {
  .header-bottom__row { padding: 14px 0; min-height: 72px; }
}

/* Logo bump-up: 200px wide on tablet+, 220 on desktop */
.pa-header-bottom .logo,
.pa-header-bottom .navbar-brand img {
  max-height: 56px;
  width: auto;
  height: auto;
}
@media (min-width: 768px) { .pa-header-bottom .logo { max-height: 60px; } }
@media (min-width: 1200px){ .pa-header-bottom .logo { max-height: 64px; } }

/* ============================================================
   5-item desktop nav — Shop ▾ / Brands ▾ / Guides / Delivery / Contact
   Visible at lg+ (was xl in stock Hummingbird)
   ============================================================ */
.pa-nav { padding: 0; }

/* Cascade flex so <li> fills the entire .pa-header-bottom row height.
   Without this, the <li> is only ~24px tall but the dropdown panel anchors
   at top:100% of the ~72px row → ~24px dead-zone breaks hover continuity
   when moving mouse from "Shop" button down to the panel content. */
.pa-nav-wrap {
  display: flex;
  align-items: stretch;
}
.pa-nav {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 100%;
}
.pa-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}
.pa-nav__item {
  position: static;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.pa-nav__wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.pa-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pa-text);
  text-decoration: none;
  letter-spacing: .01em;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.pa-nav__link:hover,
.pa-nav__item.is-open .pa-nav__link {
  color: var(--pa-amber);
  border-bottom-color: var(--pa-amber);
}
.pa-nav__toggle {
  background: transparent;
  border: 0;
  padding: 8px 6px 8px 0;
  cursor: pointer;
  color: var(--pa-muted);
  display: inline-flex;
  align-items: center;
}
.pa-nav__toggle svg { transition: transform .14s ease; }
.pa-nav__item.is-open .pa-nav__toggle svg { transform: rotate(180deg); }

/* Dropdown panel.
   margin-top: -1px guarantees a 1px overlap with the <li> bottom so
   sub-pixel rendering can't introduce a hover gap.
   Hide-visibility delay is 200ms — comfortably longer than the typical
   mouse traversal time across the panel's top edge. */
.pa-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -1px;
  background: #fff;
  border-top: 1px solid var(--pa-border);
  box-shadow: var(--pa-shadow-lg);
  padding: 22px 0 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s .25s linear;
  z-index: 1100;            /* above any sibling absolute element under header */
  pointer-events: none;     /* explicit: ignore hit-testing while hidden */
}
.pa-nav__item.is-open .pa-nav__panel,
.pa-nav__item.is-hovering .pa-nav__panel,
.pa-nav__item:hover .pa-nav__panel {
  pointer-events: auto;
}
.pa-nav__item.is-open .pa-nav__panel,
.pa-nav__item.is-hovering .pa-nav__panel,
.pa-nav__item:hover .pa-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear;
}
.pa-nav__panel-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-muted);
  margin: 0 0 10px;
}
.pa-nav__panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px 24px;
}
@media (min-width: 1200px) { .pa-nav__panel-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.pa-nav__panel-grid--brands { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pa-nav__panel-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--pa-text);
  font-weight: 500;
  font-size: 14.5px;
  transition: background .1s ease;
}
.pa-nav__panel-link:hover {
  background: var(--pa-bg-soft);
  color: var(--pa-amber);
}
.pa-nav__panel-name { line-height: 1.3; }
.pa-nav__panel-count {
  font-size: 12px;
  color: var(--pa-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pa-nav__panel-all {
  display: inline-block;
  margin-top: 14px;
  margin-left: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pa-amber);
  text-decoration: none;
}
.pa-nav__panel-all:hover { color: var(--pa-amber-hover); text-decoration: underline; }

.pa-nav__panel--narrow .pa-nav__panel-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ============================================================
   Search bar — slightly tighter, prettier
   ============================================================ */
.pa-header-bottom .ps-searchbar { width: 100%; max-width: 360px; }
@media (min-width: 1200px) {
  .pa-header-bottom .ps-searchbar { max-width: 420px; }
}
.pa-header-bottom .ps-searchbar__input {
  border-radius: 999px;
  border-color: var(--pa-border);
  padding-left: 38px;
  height: 40px;
  font-size: 14px;
  background: var(--pa-bg-soft);
  transition: background .12s ease, border-color .12s ease;
}
.pa-header-bottom .ps-searchbar__input:focus {
  background: #fff;
  border-color: var(--pa-amber);
  box-shadow: 0 0 0 3px rgba(210,138,45,.18);
}

/* ============================================================
   Cart "0" hide / cart subtotal shown on desktop
   ============================================================ */
.cart-preview .header-block__badge.pa-badge-zero,
.pa-header-bottom .header-block__badge.pa-badge-zero {
  display: none !important;
}

/* ============================================================
   MOBILE: tightening of header-bottom row, keep stock mobile
   search icon (offcanvas pattern). Search also appears in
   the fixed bottom nav so users have two discovery paths.
   ============================================================ */
@media (max-width: 767.98px) {
  .pa-header-bottom .header-bottom__row {
    gap: 4px;
    min-height: 60px;
  }
  /* Don't let the logo h1 push other icons off-row */
  .pa-header-bottom .navbar-brand img,
  .pa-header-bottom .logo {
    max-height: 44px;
  }
  /* Slightly larger touch targets on the icon-only buttons */
  .pa-header-bottom .header-block__action-btn {
    padding: 10px 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   MOBILE BOTTOM NAV — fixed, 56px tall, 4 cells
   ============================================================ */
.pa-mobnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--pa-border);
  box-shadow: 0 -2px 12px rgba(15,23,42,.06);
  display: none;  /* hidden by default; shown <md below */
  z-index: 1040;
  padding: 4px 4px env(safe-area-inset-bottom, 4px);
}
@media (max-width: 767.98px) {
  .pa-mobnav { display: flex; }
  body { padding-bottom: 56px; }  /* leave room for the bar */
  body.modal-open { padding-bottom: 0; }
}
.pa-mobnav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--pa-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 6px 4px;
  border-radius: 8px;
  position: relative;
  transition: color .12s ease, background .12s ease;
}
.pa-mobnav__link:hover,
.pa-mobnav__link:focus { color: var(--pa-text); background: var(--pa-bg-soft); }
.pa-mobnav__link[aria-current="page"] { color: var(--pa-amber); }
.pa-mobnav__icon { stroke-width: 1.6; }
.pa-mobnav__label { line-height: 1; }
.pa-mobnav__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--pa-amber);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pa-mobnav__badge[hidden] { display: none; }

/* ============================================================
   Hide stock material-icon hamburger inside ps_mainmenu when
   our 5-item nav is showing (lg+); show on smaller screens.
   ============================================================ */
@media (min-width: 992px) {
  .pa-nav-wrap .ps-mainmenu__mobile-toggle { display: none !important; }
}

/* ============================================================
   Sticky shadow when scrolled (set by inline JS in header.tpl) — see is-stuck
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pa-header-bottom { transition: none; }
  .pa-nav__toggle svg, .pa-nav__panel { transition: none !important; }
}