/* Brethren Intelligence — shared site header.
   Markup: templates/header.html, stamped into every page by tools/apply_header.py.
   Self-contained: every colour is defined here, so it renders identically on
   pages with different :root palettes. Bump ?v= in apply_header.py after editing. */

.masthead,.data-strip,.mob-nav,.mob-nav-overlay{
  --bi-navy:#0c1b2e;--bi-gold:#c8a84b;--bi-gold-hover:#d4b458;
  --bi-cream:#faf8f5;--bi-cream-mid:#f0ede8;--bi-cream-border:#ddd8d0;
  --bi-charcoal-2:#4a433b;--bi-font:'DM Sans','Inter',system-ui,sans-serif;
  box-sizing:border-box;
}
.masthead *,.data-strip *,.mob-nav *{box-sizing:border-box;}

/* ─── Navy bar ─── */
.masthead{background:var(--bi-navy);position:sticky;top:0;z-index:300;border-bottom:1px solid rgba(200,168,75,.55);overflow:hidden;margin:0;padding:0;}
.masthead-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.masthead-top{max-width:1300px;margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;gap:18px;position:relative;z-index:2;transition:height .18s ease;}
.masthead.compact .masthead-top{height:58px;}
.masthead-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;border:0;}
.masthead-logo{width:34px;height:34px;flex-shrink:0;transition:width .18s ease,height .18s ease;display:block;}
.masthead.compact .masthead-logo{width:28px;height:28px;}
.masthead-name{font-family:var(--bi-font);font-size:18px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1;white-space:nowrap;margin:0;}
.masthead-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.masthead-actions{display:flex;align-items:center;gap:8px;}
.masthead .bar-nav{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;min-width:0;}
.masthead .bar-nav::-webkit-scrollbar{display:none;}
.masthead .bar-nav a{font-family:var(--bi-font);font-size:12px;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;padding:8px 7px;border-radius:5px;white-space:nowrap;transition:color .15s,background .15s;border:0;}
.masthead .bar-nav a:hover{color:#fff;background:rgba(255,255,255,.08);}
.masthead .nav-user{font-family:var(--bi-font);font-size:11px;color:rgba(255,255,255,.5);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.masthead .nav-search-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.45);border-radius:6px;color:#fff;text-decoration:none;transition:all .15s;flex-shrink:0;font-family:var(--bi-font);font-size:12px;font-weight:600;letter-spacing:.2px;}
.masthead .nav-search-btn:hover{background:rgba(200,168,75,.22);border-color:var(--bi-gold);color:#fff;}
.masthead .nav-search-btn svg{color:var(--bi-gold);}
.masthead .nav-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);font-family:var(--bi-font);font-size:11.5px;font-weight:600;letter-spacing:.3px;padding:9px 13px;border-radius:4px;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block;line-height:1.2;}
.masthead .nav-btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff;}
.masthead .nav-btn-quiet{border-color:transparent;padding:9px 6px;color:rgba(255,255,255,.55);}
.masthead .nav-btn-quiet:hover{border-color:transparent;color:#fff;}
.masthead .nav-btn-gold{background:var(--bi-gold);color:var(--bi-navy);font-family:var(--bi-font);font-size:11.5px;font-weight:700;letter-spacing:.3px;padding:9px 16px;border-radius:4px;cursor:pointer;transition:background .15s;text-decoration:none;display:inline-block;border:0;line-height:1.2;}
.masthead .nav-btn-gold:hover{background:var(--bi-gold-hover);color:var(--bi-navy);}
.masthead .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:0 9px;cursor:pointer;flex-shrink:0;}
.masthead .hamburger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;}

/* ─── Cream database strip (scrolls away) ─── */
.data-strip{background:var(--bi-cream);border-bottom:1px solid var(--bi-cream-border);}
.data-strip-inner{max-width:1300px;margin:0 auto;padding:0 48px;height:44px;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;}
.data-strip-inner::-webkit-scrollbar{display:none;}
.data-strip a{font-family:var(--bi-font);font-size:12px;font-weight:500;color:var(--bi-charcoal-2);text-decoration:none;padding:6px 9px;border-radius:5px;white-space:nowrap;transition:color .15s,background .15s;border:0;}
.data-strip a:hover{color:var(--bi-navy);background:var(--bi-cream-mid);}
.data-strip .ds-search{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--bi-navy);border:1px solid var(--bi-cream-border);background:#fff;margin-right:6px;}
.data-strip .ds-search svg{color:var(--bi-gold);}
.data-strip .ds-search:hover{border-color:var(--bi-gold);}
.data-strip .ds-cta{margin-left:auto;background:var(--bi-gold);color:var(--bi-navy);font-weight:700;padding:6px 15px;border-radius:5px;}
.data-strip .ds-cta:hover{background:var(--bi-gold-hover);color:var(--bi-navy);}
.data-strip .lock{font-size:9px;opacity:.7;margin-left:2px;}
.data-strip .free-tag{font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--bi-gold);border:1px solid currentColor;border-radius:3px;padding:1px 4px;margin-left:5px;vertical-align:1px;opacity:.85;}

/* ─── Mobile drawer ─── */
.mob-nav{position:fixed;top:0;left:-300px;width:300px;height:100vh;height:100dvh;background:var(--bi-navy);z-index:2000;overflow-y:auto;transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom,60px);font-family:var(--bi-font);}
.mob-nav.open{left:0;}
.mob-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1999;}
.mob-nav-overlay.show{display:block;}
.mob-nav-top{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
.mob-nav-top span{font-size:12px;font-weight:700;color:#fff;letter-spacing:1.5px;text-transform:uppercase;}
.mob-nav-top button{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;line-height:1;width:40px;height:40px;margin:-10px -12px -10px 0;}
.mob-user{padding:10px 20px;font-size:12px;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.08);overflow-wrap:anywhere;}
.mob-nav-top button:hover{color:#fff;}
.mob-section{padding:8px 0;}
.mob-section-label{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--bi-gold);padding:12px 20px 5px;opacity:.75;}
.mob-section a{display:flex;align-items:center;min-height:42px;padding:10px 20px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s,color .15s;}
.mob-section a:hover{background:rgba(255,255,255,.06);color:#fff;}
.mob-paid{border-top:1px solid rgba(255,255,255,.08);}
.mob-paid a{color:rgba(200,168,75,.85);}
.mob-section-label .mob-free{display:inline-block;font-size:8px;letter-spacing:.8px;border:1px solid currentColor;border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:1px;opacity:.9;}
.mob-section a.mob-why{font-weight:700;background:var(--bi-gold);color:var(--bi-navy);border-radius:4px;margin:8px 0 4px;}
.mob-nav-cta{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
.mob-nav-cta a{display:block;text-align:center;background:var(--bi-gold);color:var(--bi-navy);font-size:13px;font-weight:700;padding:13px;border-radius:4px;text-decoration:none;}
.mob-nav-cta-search{border-top:none;padding-top:0;}
.mob-nav-cta-search a{background:rgba(200,168,75,.12);color:var(--bi-gold);border:1px solid rgba(200,168,75,.25);display:flex;align-items:center;gap:8px;justify-content:center;}

/* ─── Responsive ─── */
@media (max-width:1340px){
  .masthead-top{padding:0 28px;gap:14px;}
  .masthead .bar-nav a{font-size:12px;padding:8px 7px;}
  .data-strip-inner{padding:0 28px;}
  .data-strip .ds-cta{display:none;} /* drawer and sidebar carry Why Subscribe; keeps search + eight tools on screen */
}
@media (max-width:1240px){
  .masthead .bar-nav{display:none;} /* nine sections no longer fit beside the actions; the drawer takes over */
}
@media (max-width:768px){
  .masthead-top{padding:0 16px;height:60px;gap:12px;}
  .masthead .nav-btn-ghost{display:none;}
  .masthead .nav-user{display:none!important;} /* the drawer shows who is signed in; in the bar it pushed the menu button off-screen */
  .masthead-name{font-size:16px;}
  .masthead .nav-btn-gold{font-size:11px;padding:10px 12px;} /* 34px tall: a thumb target */
  .masthead .nav-search-btn{height:36px;}
  .masthead .hamburger{width:40px;height:40px;}
  .data-strip{position:relative;}
  .data-strip::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40px;background:linear-gradient(90deg,rgba(250,248,245,0),var(--bi-cream) 70%);pointer-events:none;} /* says: this scrolls */
  .data-strip-inner{padding:0 40px 0 16px;height:46px;}
  .data-strip a{padding:9px 10px;}
}
@media (max-width:480px){
  .masthead-top{height:64px;gap:10px;}
  .masthead-name{font-size:14.5px;}
  .masthead-right{gap:8px;}
  .masthead-actions{gap:6px;}
  .masthead .nav-search-label{display:none;}
  .masthead .nav-search-btn{width:36px;padding:0;}
  .masthead .nav-btn-gold{padding:10px 10px;}
}
@media (max-width:400px){
  .masthead .nav-search-btn{display:none;} /* the strip's Search everything sits directly beneath; brand + Subscribe + menu is all the bar can hold */
}
@media (max-width:340px){
  .masthead #nav-subscribe-btn,.masthead #nav-right .nav-btn-gold{display:none;} /* the drawer carries the CTA */
}