/* =====================================================================
   HealthBuzz header v2 — search left · big logo centre (with live date
   under its left edge) · E-Paper / Plus right; menu bar carries the
   side-canvas button, alerts, theme switch and sign-in.
   Logo sizes come from Settings › Theme & Layout (CSS variables).
   ===================================================================== */
:root{--logo-h:72px;--logo-h-m:40px;--logo-h-sticky:32px;--logo-h-footer:46px;--logo-h-mini:28px}

/* ---------- masthead ---------- */
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"search brand cta";align-items:center;gap:24px;height:auto;min-height:calc(var(--logo-h) + 34px);padding-top:14px;padding-bottom:14px}
.mast .burger{display:none}
.mast .search{grid-area:search;justify-self:start;width:100%;max-width:240px;margin:0;flex:none}
.mast .search input{font-size:.84rem;padding:.55em 2.7em .55em 1.05em}
.mast .search button{width:30px;height:30px;font-size:.78rem;right:4px}
.mast .search .suggest{min-width:380px}
.mast .mast__cta{grid-area:cta;justify-self:end}

.brand{grid-area:brand;position:relative;justify-self:center;line-height:0}
.brand .logo{display:block}
.brand .logo img{height:var(--logo-h);width:auto;max-width:70vw;image-rendering:auto;-webkit-font-smoothing:antialiased}
/* date sits in the free space under "Health", on the same line as the tagline */
.brand__date{position:absolute;left:1px;bottom:0;line-height:1;white-space:nowrap;
  font:600 max(11px,calc(var(--logo-h) * .135))/1 var(--fb);color:#3a3a3a;letter-spacing:.01em;pointer-events:none}
.brand__date .t{color:var(--brand);font-weight:700}
.brand__date .short{display:none}
[data-theme="dark"] .brand__date{color:#cfcfcf}

/* ---------- menu bar tools (canvas ☰, alerts, theme, sign in) ---------- */
.nav .wrap{align-items:stretch}
.nav__tools{display:flex;align-items:center;gap:2px;flex:none;margin-left:6px;padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.nav__tool{position:relative;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.98rem;transition:background .2s,color .2s}
.nav__tool:hover,.nav__tool:focus-visible{background:rgba(255,255,255,.12);color:var(--brand)}
.nav__tool .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--dark)}
.nav__canvas-btn{background:var(--brand);color:#fff;border-radius:10px;width:38px;margin-right:4px}
.nav__canvas-btn:hover,.nav__canvas-btn:focus-visible{background:#fff;color:var(--brand)}
.nav__signin{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:.5em .95em;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);color:#fff;font:700 .78rem/1 var(--fh);white-space:nowrap;transition:border-color .2s,background .2s}
.nav__signin:hover{border-color:var(--brand);background:var(--brand);color:#fff}
.nav__mini-logo img{height:var(--logo-h-mini)}

/* ---------- side canvas ---------- */
.canvas{width:min(380px,90vw)}
.canvas__head img{height:34px;width:auto}
.canvas__head .logo--dark{display:none}
[data-theme="dark"] .canvas__head .logo--light{display:none}[data-theme="dark"] .canvas__head .logo--dark{display:block}
.canvas__body{display:flex;flex-direction:column;gap:18px;padding-top:6px}
.canvas__links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 4px;border-bottom:1px solid var(--line);font:800 .92rem/1.2 var(--fh);text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.canvas__links a i{font-size:.75rem;color:var(--muted);transition:transform .2s,color .2s}
.canvas__links a:hover{color:var(--brand)}
.canvas__links a:hover i{transform:translateX(4px);color:var(--brand)}
.canvas__links a.hl{color:var(--brand)}
.canvas__links a img{display:none}
.canvas__cta{display:flex;gap:10px;flex-wrap:wrap}
.canvas__cta a{border-bottom:0!important;padding:.6em 1.1em!important}
.canvas__social small{display:block;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;margin-bottom:8px}
.canvas__social .social{display:flex;gap:8px}
.canvas__social .social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--text);border:0;padding:0}
.canvas__social .social a:hover{background:var(--brand);color:#fff}

/* ---------- sticky / footer logos follow the size settings ---------- */
.hb-sticky__logo img{height:var(--logo-h-sticky)!important;max-width:none!important}
.footer__logo img{height:var(--logo-h-footer)}

/* ---------- tablet & phone ---------- */
@media (max-width:1180px){.mast .search{max-width:200px}}
@media (max-width:980px){
  .mast .wrap{grid-template-columns:auto 1fr auto;grid-template-areas:"burger brand cta";min-height:0;padding-top:8px;padding-bottom:8px;gap:10px}
  .mast .burger{display:block;grid-area:burger}
  .mast .search{display:none}
  .brand{justify-self:start}
  .brand .logo img{height:var(--logo-h-m)}
  .brand__date{font-size:9px;bottom:-1px}
  .brand__date .long{display:none}.brand__date .short{display:inline}
}
@media (max-width:380px){.brand__date{display:none}}