/* ImpulseShield — canonical site header. ONE header used on every page (home,
 * locales, Resources, Pro, Family, Contact, articles). Mirrors the homepage
 * header exactly: full green wordmark lockup, same nav items/order, same
 * spacing. Bare element rules are scoped under `header` so they never leak onto
 * page content (breadcrumb <nav>, the page .wrap, etc.). Loaded AFTER site.css.
 */

/* Header shell — fixed 1040px inner width so the bar is identical regardless of
   each page's content .wrap. */
header{position:sticky;top:0;z-index:50;background:rgba(245,248,250,.82);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s ease}
header.scrolled{border-bottom-color:var(--line)}
header .wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:14px}

/* Logo lockup (full green wordmark image) */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);flex:none}
.logo-lockup{height:64px;width:auto;display:block}
@media(max-width:880px){.logo-lockup{height:48px}}

/* Primary links + CTA */
.navright{display:flex;align-items:center;gap:14px}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:15px;transition:color .15s ease}
.navlinks a:hover{color:var(--brand)}
.navlinks .nav-cta{background:var(--brand);color:#fff;padding:9px 16px;border-radius:11px;box-shadow:0 6px 16px rgba(14,124,123,.28)}
.navlinks .nav-cta:hover{color:#fff;background:var(--brand-deep)}

/* Hamburger (hidden on desktop) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;margin-left:auto}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle svg:last-child{display:none}
header.nav-open .nav-toggle{color:var(--brand);border-color:rgba(14,124,123,.45)}
header.nav-open .nav-toggle svg:first-child{display:none}
header.nav-open .nav-toggle svg:last-child{display:block}
@media(max-width:820px){
  header nav{position:relative}
  .nav-toggle{display:inline-flex}
  .navright{position:absolute;left:0;right:0;top:calc(100% + 12px);flex-direction:column;align-items:stretch;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px rgba(15,36,51,.16);padding:12px;display:none;z-index:120;max-height:calc(100vh - 90px);overflow:auto}
  header.nav-open .navright{display:flex}
  .navlinks{flex-direction:column;align-items:stretch;gap:2px;order:-1}
  .navlinks a{padding:13px 14px;font-size:16px;border-radius:10px}
  .navlinks a:hover{background:rgba(14,124,123,.07)}
  .navlinks .nav-cta{text-align:center;box-shadow:none;margin-top:4px}
  .nav-search-btn{justify-content:flex-start;padding:13px 14px}
  .nav-search-btn .nsb-label{display:inline}
  .langpick,.langpick details,.langpick summary{width:100%}
  .langpick summary{justify-content:space-between;padding:12px 14px}
  .langpick .langmenu{position:static;box-shadow:none;border:none;padding:4px 0 0;min-width:0;max-height:220px}
}

/* Language switcher */
.langpick details{position:relative}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-soft);padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;white-space:nowrap}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary svg{width:16px;height:16px;opacity:.85}
.langpick summary .car{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:1px;opacity:.55;margin-top:-3px}
.langpick .langmenu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:60;display:grid;gap:2px;max-height:64vh;overflow:auto}
.langpick .langmenu a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink);text-decoration:none}
.langpick .langmenu a:hover{background:var(--bg-tint)}
.langpick .langmenu a.cur{background:rgba(14,124,123,.1);color:var(--brand-deep);font-weight:600}

/* Whole-site search launcher + overlay */
.nav-search-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 14px 8px 12px;transition:border-color .15s ease,color .15s ease,box-shadow .15s ease}
.nav-search-btn svg{width:16px;height:16px}
.nav-search-btn:hover{color:var(--brand);border-color:rgba(14,124,123,.45);box-shadow:0 8px 24px rgba(15,36,51,.06)}
.nav-search{border-top:1px solid var(--line);background:rgba(245,248,250,.96);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);padding:16px 0 22px}
.ns-form{position:relative;display:flex;align-items:center}
.ns-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-soft);pointer-events:none;display:flex}
.ns-ic svg{width:20px;height:20px}
.ns-form input{width:100%;border:1px solid var(--line);border-radius:14px;padding:15px 52px 15px 46px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;box-shadow:0 8px 24px rgba(15,36,51,.06);transition:border-color .15s ease,box-shadow .15s ease}
.ns-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,124,123,.14)}
.ns-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ns-close svg{width:18px;height:18px}
.ns-close:hover{background:var(--bg-tint);color:var(--ink)}
.ns-results{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(15,36,51,.10);overflow:hidden}
.ns-results a{display:flex;align-items:center;gap:14px;padding:13px 18px;text-decoration:none;color:var(--ink);border-bottom:1px solid #eef3f5}
.ns-results a:last-child{border-bottom:none}
.ns-results a:hover,.ns-results a.active{background:var(--bg-tint)}
.ns-results .nr-body{min-width:0;flex:1}
.ns-results .nr-title{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.ns-results .nr-title mark{background:rgba(21,168,107,.22);color:inherit;border-radius:3px;padding:0 1px}
.ns-results .nr-meta{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-results .nr-tag{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-deep);background:rgba(14,124,123,.1);padding:4px 9px;border-radius:999px}
.ns-results .nr-empty{padding:16px 18px;color:var(--ink-soft);font-size:14.5px}
@media(max-width:880px) and (min-width:821px){.nav-search-btn .nsb-label{display:none}.nav-search-btn{padding:9px}}
