/* =================================================================
   Pickleheart — Site Header
   -----------------------------------------------------------------
   Hand-coded replacement for the (empty) Bricks "Header" template —
   loads on every front-end request via pickleheart_site_header_assets()
   in functions.php, rendered by header.php via pickleheart_site_header().

   Scoped under `.site-header` — deliberately its own local `--sh-*`
   palette (aliased to the shared tokens, not the .pkl-page component
   layer) rather than `.pkl-*` classes, since pickleheart-components.css
   is documented as page-template-only and explicitly not meant to
   reach the header. Same alias-not-redeclare pattern as .cb-shell /
   .community-admin-wrap / .community-request's own local blocks.
   ================================================================= */

.site-header {
  --sh-primary: var(--foreground-primary);
  --sh-primary-hover: var(--foreground-primary-hover);
  --sh-pink: var(--pkl-pink-200);
  --sh-border: var(--border-neutral-weak);
  --sh-text: var(--text-neutral-strong);
  --sh-text-muted: var(--text-neutral-weak);
  --sh-height: 76px;

  position: static;
  z-index: 500;
  background: var(--background-neutral);
  border-bottom: 1px solid var(--sh-border);
  font-family: var(--font-body);
}

.site-header,
.site-header *,
.site-header *::before,
.site-header *::after { box-sizing: border-box; }
.site-header a { text-decoration: none; color: inherit; }
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header button { font: inherit; }

/* Same 1100px column + 24px side padding as .community-public-subheader-inner
   (communities-public-style.css) and its park/event/capital-campaign
   equivalents, so the logo/nav edges line up with the subheader bar
   directly underneath on those pages instead of running wider/narrower.
   Shared with .site-header-mobile-list below so the mobile menu's edges
   always line up with the bar above it, by construction rather than by
   two rules happening to repeat the same numbers. */
.site-header-inner,
.site-header .site-header-mobile-list {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding-inline: 24px;
}
.site-header-inner {
  height: var(--sh-height);
  display: flex;
  align-items: center;
  gap: 32px;
}
@media (max-width: 620px) {
  .site-header { --sh-height: 64px; }
  .site-header-inner,
  .site-header .site-header-mobile-list { padding-inline: 20px; }
  .site-header-inner { gap: 16px; }
}

/* -----------------------------------------------------------------
   LOGO
   ----------------------------------------------------------------- */
.site-header-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* Two independent logo sources — Customizer → Main Header → Mobile logo,
   falling back to the desktop logo/mark when unset (see
   pickleheart_render_header_logo_mobile() in site-header.php) — swapped
   at the same 620px breakpoint the rest of the header compacts at. */
.site-header-logo-variant--mobile { display: none; }
@media (max-width: 620px) {
  .site-header-logo-variant--desktop { display: none; }
  .site-header-logo-variant--mobile { display: flex; align-items: center; }
}
.site-header-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header-logo img { display: block; max-height: 44px; max-width: 200px; width: auto; }

/* -----------------------------------------------------------------
   PRIMARY NAV — desktop only, hidden under the breakpoint where the
   mobile toggle takes over
   ----------------------------------------------------------------- */
.site-header-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.site-header-nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header-nav-list a {
  font-weight: 400;
  font-size: 17px;
  color: var(--sh-text);
  padding: 6px 2px;
  transition: color 130ms ease;
}
.site-header-nav-list a:hover {
  color: var(--pkl-coral-300);
}
.site-header-nav-list .current-menu-item > a {
  color: var(--pkl-coral-300);
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (max-width: 900px) {
  .site-header-nav { display: none; }
}

/* Play dropdown — the panel look of community-style.css's
   .cb-row-menu-panel. Opens on hover, or from the chevron for keyboards
   and touch; the ::before bridges the gap so the pointer can reach it. */
.site-header-nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
}
.site-header-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sh-text);
}
/* The brand's brushed arrow, as a mask so it takes the nav's text colour
   and hover state. */
.site-header-sub-toggle::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url(../../../../../../../../themes/bricks-child/template-assets/icons/arrow-down.png) center / contain no-repeat;
  mask: url(../../../../../../../../themes/bricks-child/template-assets/icons/arrow-down.png) center / contain no-repeat;
  transition: transform 130ms ease;
}
.site-header-sub-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.site-header-nav-list > li:hover > .site-header-sub-toggle { color: var(--pkl-coral-300); }
.site-header-sub-toggle:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; border-radius: 4px; }

.site-header-nav-list .site-header-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 600;
  display: none;
  min-width: 200px;
  padding: 6px;
  background: var(--background-neutral);
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  box-shadow: var(--elevation-popover);
}
.site-header-nav-list .site-header-sub::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}
.site-header-nav-list > li:hover > .site-header-sub,
.site-header-sub-toggle[aria-expanded="true"] + .site-header-sub { display: block; }
.site-header-nav-list .site-header-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.site-header-nav-list .site-header-sub a:hover { background: rgba(0, 0, 0, 0.05); }

/* Who Lead and Insiders are for — the same panel, on hover or keyboard
   focus. Hidden everywhere else, the mobile menu included. */
.site-header-nav-note { display: none; }
.site-header-nav-list a:hover .site-header-nav-note,
.site-header-nav-list a:focus-visible .site-header-nav-note {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 600;
  display: block;
  padding: 9px 14px;
  background: var(--background-neutral);
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  box-shadow: var(--elevation-popover);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--sh-text-muted);
}
/* The panel is part of the link, so a click on it goes to the page. This
   strip covers the 10px gap above it, so moving the mouse down to the
   panel doesn't end the hover and close it on the way. */
.site-header-nav-list a:hover .site-header-nav-note::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}
.site-header-nav-list a:hover .site-header-nav-note { cursor: pointer; }
.site-header-nav-list a:hover .site-header-nav-note:hover { color: var(--sh-text); }

/* -----------------------------------------------------------------
   ACTIONS — account + cart icons, mobile toggle
   ----------------------------------------------------------------- */
.site-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.site-header-icon-btn {
  --sh-icon-size: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max(40px, calc(var(--sh-icon-size) + 18px));
  height: max(40px, calc(var(--sh-icon-size) + 18px));
  border-radius: var(--radius-full, 999px);
  color: var(--sh-text);
}
/* Icon + visible title — grows into a pill instead of staying a fixed circle. */
.site-header-icon-btn.has-title {
  width: auto;
  height: auto;
  min-height: max(40px, calc(var(--sh-icon-size) + 18px));
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill, 999px);
}
/* Account menu (signed in): the person's avatar, as in the app. */
/* Flex, so line height doesn't push the avatar off the cart icon's centre line. */
.site-header-account { position: relative; display: flex; align-items: center; }
.site-header-account-btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.site-header-account-btn:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 4px; }

/* Avatars as the app draws them (Avatar.tsx): a white disc wearing the
   brand's brush ring. Stock avatars sit inset (16% a side) and whole,
   photos fill the disc, and no avatar shows the heart at half size. */
.site-header-avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 36px;
  height: 36px;
}
.site-header-avatar--lg { width: 44px; height: 44px; }
.site-header-avatar-disc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}
.site-header-avatar-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-header-avatar.is-preset .site-header-avatar-disc img { width: 68%; height: 68%; object-fit: contain; }
.site-header-avatar.is-empty .site-header-avatar-disc img { width: 50%; height: 50%; object-fit: contain; }
/* The ring's ink covers ~84.8% of its canvas, so the frame box is scaled
   up (1 / 0.848) and centred for the stroke to land on the disc's edge. */
.site-header-avatar::after {
  content: "";
  position: absolute;
  inset: -8.96%;
  background: var(--wpr-bg-eb293d1e-c69c-4164-9c23-aced1b3e89d7) center / contain no-repeat;
  pointer-events: none;
}
.site-header-account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 600;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--background-neutral, #fff);
  border: 1px solid var(--sh-border);
  border-radius: 16px;
  box-shadow: var(--elevation-popover, 0 12px 32px rgba(0, 0, 0, 0.12));
}
.site-header-account-panel:not([hidden]) { display: flex; flex-direction: column; }
.site-header-account-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; }
.site-header-account-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.site-header-account-name,
.site-header-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header-account-name { font-size: 15px; font-weight: 700; color: var(--sh-text); }
.site-header-account-email { font-size: 13px; color: var(--sh-text-muted); }
.site-header-account-divider { height: 1px; margin: 0 -6px 6px; background: var(--sh-border); }
.site-header-account-divider--mid { margin-top: 6px; }
.site-header-account-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-primary);
}
.site-header a.site-header-account-link { color: var(--sh-primary); }
.site-header-account-link:hover { background: var(--background-neutral-weak, #f2efea); }

.site-header-custom-icon { width: var(--sh-icon-size); height: var(--sh-icon-size); display: block; flex: 0 0 auto; object-fit: contain; }
.site-header-icon-title { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Hamburger — three bars that morph into an X while the panel is open. */
.site-header-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sh-text);
}
.site-header-toggle-bars {
  position: relative;
  width: 20px;
  height: 14px;
}
.site-header-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
}
.site-header-toggle-bars span:nth-child(1) { top: 0; }
.site-header-toggle-bars span:nth-child(2) { top: 6px; }
.site-header-toggle-bars span:nth-child(3) { top: 12px; }
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .site-header-toggle { display: inline-flex; }
}

/* -----------------------------------------------------------------
   MOBILE PANEL — [hidden] must win over the flex display below, same
   convention used across the site's other dropdown/menu panels (see
   community-style.css's .cb-row-menu-panel).
   ----------------------------------------------------------------- */
.site-header-mobile {
  border-top: 1px solid var(--sh-border);
  background: var(--background-neutral);
}
.site-header-mobile:not([hidden]) { display: block; }
.site-header-mobile[hidden] { display: none; }
.site-header .site-header-mobile-list {
  padding-block: 8px 20px;
  display: flex;
  flex-direction: column;
}
.site-header-mobile-list a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--sh-border);
  font-weight: 700;
  font-size: 16px;
  color: var(--sh-text);
}
.site-header-mobile-list li:last-child a { border-bottom: 0; }
.site-header-mobile-list .current-menu-item > a { color: var(--sh-primary); }
/* Play's links sit open under it here, so there's no chevron to press. */
.site-header-mobile-list .site-header-sub-toggle { display: none; }
.site-header-mobile-list .site-header-sub { border-bottom: 1px solid var(--sh-border); }
.site-header-mobile-list .site-header-sub a {
  padding: 10px 0 10px 16px;
  border-bottom: 0;
  font-weight: 400;
}

@media (min-width: 901px) {
  /* The mobile panel only ever renders when JS has wired up the toggle
     (see site-header-script.js) — belt-and-braces against a flash of
     the panel on desktop if [hidden] were ever dropped from the markup. */
  .site-header-mobile { display: none !important; }
}