/* ==========================================================================
   Site header — bar, nav, account dropdown, mobile menu, toast
   Breakpoints from the design: desktop nav hides ≤1080px; account name + Sign up hide ≤560px.
   ========================================================================== */

/* Utility visibility (verbatim from the design) */
@media (max-width: 1080px) { .u-lg-hide { display: none !important; } }
@media (min-width: 1081px) { .u-lg-only { display: none !important; } }
@media (max-width: 560px)  { .u-sm-hide { display: none !important; } }

/* Respect the WordPress admin bar (32px desktop, 46px ≤782px). */
body.admin-bar { --hp-abar: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --hp-abar: 46px; }
  /* WP switches #wpadminbar to position:absolute ≤782px, so it scrolls away and
     leaves a gap above our position:fixed header. Keep it fixed so the header
     (top: var(--hp-abar)) stays flush below it at every scroll position. */
  #wpadminbar { position: fixed !important; }
}

.hp-header {
  position: fixed; top: var(--hp-abar, 0px); left: 0; right: 0; z-index: var(--hp-z-header, 500);
  transition: background .35s var(--hp-ease), box-shadow .35s var(--hp-ease), backdrop-filter .35s var(--hp-ease);
}
.hp-header--solid,
.hp-header.is-scrolled,
.hp-header.is-menu-open {
  background: rgba(243, 246, 247, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(14, 27, 36, .08), 0 10px 30px -22px rgba(14, 27, 36, .4);
}
.hp-header--overlay:not(.is-scrolled):not(.is-menu-open) {
  background: linear-gradient(180deg, rgba(243, 246, 247, .8), rgba(243, 246, 247, 0));
}

.hp-header__bar {
  max-width: 1360px; margin: 0 auto; padding: 12px clamp(14px, 3vw, 32px);
  display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); min-height: 68px;
}
.hp-header__logo { flex: 0 0 auto; display: flex; align-items: center; }
.hp-header__logo img { height: clamp(34px, 4vw, 44px); width: auto; }
/* On phones 4vw clamps to the 34px floor, leaving room under the 68px bar — bump the visible bar logo
   (scoped to .hp-header__bar so the mobile-menu-top logo is untouched). Header height is unchanged. */
@media (max-width: 560px) { .hp-header__bar .hp-header__logo img { height: 42px; } }
.hp-header__spring { flex: 1; }
.hp-header__spacer { height: var(--hp-hdr, 68px); }

/* Nav */
.hp-header__nav { display: flex; gap: 4px; margin-left: 8px; }
.hp-header__navlink {
  padding: 10px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 500;
  color: var(--hp-text-2); white-space: nowrap; text-decoration: none;
  transition: background var(--hp-t-fast), color var(--hp-t-fast);
}
.hp-header__navlink:hover { background: rgba(14, 27, 36, .06); color: var(--hp-ink); text-decoration: none; }
.hp-header__navlink.is-active { font-weight: 700; color: var(--hp-ink); background: rgba(255, 159, 28, .18); }

/* Avatar */
.hp-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: 50%; background: var(--hp-ink); color: var(--hp-saffron);
  font-family: var(--hp-font-display); font-weight: 700;
}
.hp-avatar--sm { width: 34px; height: 34px; font-size: 13px; }
.hp-avatar--md { width: 44px; height: 44px; font-size: 16px; }

/* Auth buttons (signed-out) */
.hp-header__auth { display: flex; gap: 6px; }
.hp-authbtn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1;
  transition: background var(--hp-t), color var(--hp-t), border-color var(--hp-t);
}
.hp-authbtn .hp-icon { width: 17px; height: 17px; }
.hp-authbtn--ghost { background: #fff; color: var(--hp-ink); border: 1px solid var(--hp-line-16); }
.hp-authbtn--ghost:hover { border-color: var(--hp-ink); }
.hp-authbtn--solid { background: var(--hp-ink); color: #fff; padding: 0 16px; border: 1px solid var(--hp-ink); }
.hp-authbtn--solid:hover { background: var(--hp-saffron); color: var(--hp-ink); border-color: var(--hp-saffron); }

/* Account pill + dropdown */
.hp-acct { position: relative; }
.hp-acct__toggle {
  display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; min-height: 44px;
  border-radius: 999px; border: 1px solid var(--hp-line-12); background: #fff;
  transition: border-color var(--hp-t);
}
.hp-acct__toggle:hover { border-color: var(--hp-ink); }
.hp-acct__name { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--hp-ink); }
.hp-acct__chev { display: inline-flex; transition: transform .2s var(--hp-ease); }
.hp-acct__chev .hp-icon { width: 14px; height: 14px; }
.hp-acct.is-open .hp-acct__chev { transform: rotate(180deg); }

.hp-acct__scrim { position: fixed; inset: 0; z-index: 590; }
.hp-acct__menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(310px, calc(100vw - 24px)); background: #fff; border-radius: 16px; padding: 8px;
  box-shadow: 0 0 0 1px rgba(14, 27, 36, .08), 0 30px 60px -24px rgba(14, 27, 36, .5);
  z-index: 600; animation: hp-drop .18s ease both;
}
.hp-acct__head {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px;
  border-bottom: 1px solid var(--hp-line-08); margin-bottom: 6px;
}
.hp-acct__id { min-width: 0; }
.hp-acct__idname { font-size: 15.5px; font-weight: 700; }
.hp-acct__idmail { font-size: 12.5px; color: var(--hp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-acct__item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--hp-ink); text-decoration: none; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.hp-acct__item:hover { background: var(--hp-bg); text-decoration: none; }
.hp-acct__ico {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--hp-bg); color: var(--hp-text-2); flex: 0 0 auto;
}
.hp-acct__ico .hp-icon { width: 18px; height: 18px; }
.hp-acct__lbl { flex: 1; }
.hp-acct__badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-saffron-tint); color: var(--hp-saffron-ink); font-size: 12px; font-weight: 700;
}
.hp-acct__div { height: 1px; background: var(--hp-line-08); margin: 6px 4px; }
.hp-acct__item--danger { color: var(--hp-danger-d); }
.hp-acct__item--danger .hp-acct__ico { background: var(--hp-danger-tint); color: var(--hp-danger-d); }
.hp-acct__item--danger:hover { background: var(--hp-danger-tint); }

/* Hamburger */
.hp-burger {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--hp-line-16); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto;
}
.hp-burger span { width: 18px; height: 2px; background: var(--hp-ink); border-radius: 2px; }
.hp-burger span:last-child { width: 12px; margin-left: 6px; }

/* Mobile full-screen menu */
.hp-mmenu {
  position: fixed; inset: var(--hp-abar, 0px) 0 0 0; z-index: 900; background: var(--hp-bg);
  display: flex; flex-direction: column; overflow: auto; padding: 14px clamp(16px, 5vw, 26px) 0;
  animation: hp-sheet .3s var(--hp-ease);
}
.hp-mmenu[hidden] { display: none; }
.hp-mmenu__top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; }
.hp-mmenu__close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--hp-line-16); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hp-mmenu__close .hp-icon { width: 22px; height: 22px; }
.hp-mmenu__nav { display: flex; flex-direction: column; margin-top: 8px; }
.hp-mmenu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 2px; border-bottom: 1px solid rgba(14, 27, 36, .1);
  font-family: var(--hp-font-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em;
  color: var(--hp-ink); text-decoration: none;
}
.hp-mmenu__link .hp-icon { width: 18px; height: 18px; color: var(--hp-saffron-ink-2); }
.hp-mmenu__card { background: #fff; border-radius: 16px; padding: 14px; margin-top: 18px; box-shadow: var(--hp-shadow-sm); }
.hp-mmenu__acct { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hp-line-08); }
.hp-mmenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-mmenu__gi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 10px; background: var(--hp-bg); font-size: 14px; font-weight: 600; color: var(--hp-ink); text-decoration: none; min-height: 48px; }
.hp-mmenu__logout { margin-top: 12px; color: #8A1C1C; border-color: rgba(138,28,28,.25); }
.hp-mmenu__gtitle { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.hp-mmenu__gsub { font-size: 13.5px; color: #5A6872; margin: 0 0 14px; }
.hp-mmenu__gbtns { display: grid; gap: 8px; }
.hp-mmenu__find { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--hp-link); }
/* Symmetric padding so the button never looks lopsided; the home-indicator clearance lives on the
   sheet's actual bottom element (the pattu band) instead. */
.hp-mmenu__wa { margin-top: auto; border-radius: 12px; padding: 16px 22px; }
.hp-mmenu .hp-pattu { margin-inline: calc(clamp(16px, 5vw, 26px) * -1); margin-bottom: env(safe-area-inset-bottom, 0px); }

/* Toast */
.hp-toast {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--hp-abar, 0px) + var(--hp-hdr, 68px) + 12px);
  z-index: 990; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--hp-ink); color: #fff; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: var(--hp-shadow-pop); animation: hp-drop .25s ease both; max-width: calc(100vw - 24px);
}
.hp-toast[hidden] { display: none; }
.hp-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-green-l); flex: 0 0 auto; }

/* Keyframes */
@keyframes hp-sheet { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes hp-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hp-header, .hp-acct__menu, .hp-mmenu, .hp-toast { animation: none !important; transition: none !important; }
}

/* ==== Responsive audit fixes ==== */
@media (min-width: 561px) { .u-sm-only { display: none !important; } }
@media (max-width: 820px) { .u-md-hide { display: none !important; } }
@media (min-width: 821px) { .u-md-only { display: none !important; } }
@media (max-width: 560px) {
  .hp-acct__menu { position: fixed; left: 12px; right: 12px; width: auto; top: calc(var(--hp-abar, 0px) + var(--hp-hdr, 68px) + 8px); }
}
@media (max-width: 400px) { .hp-wx { display: none; } } /* keep the top bar from overflowing on tiny phones */