/* css/site-header.css — the main app's header (index.html), for the tool pages.
   Markup comes from .github/scripts/lib/site-header.js. Every class is lh-
   prefixed so each tool page's own CSS (which styles header, .brand, .hdr …)
   cannot reach it; the page's call-to-action keeps its .hdr-cta class for
   analytics and is restyled here so it looks the same on every tool. */
.lh-site-hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#14181c;padding:14px 32px;
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid #dfe5e4;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  box-sizing:border-box;width:100%;
}
.lh-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
.lh-brand-mark{display:block;width:40px;height:40px;border-radius:8px;flex-shrink:0;overflow:hidden;box-shadow:0 4px 14px rgba(16,107,60,0.3)}
.lh-brand-mark svg{display:block;width:100%;height:100%}
.lh-brand-text{display:flex;flex-direction:column;line-height:1.15}
.lh-brand-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:20px;color:#14181c;letter-spacing:-0.005em}
.lh-brand-sub{font-size:10px;color:#6b767c;letter-spacing:0.16em;text-transform:uppercase;margin-top:1px;font-weight:500}
.lh-hdr-right{margin-left:auto;display:flex;align-items:center;gap:24px}
/* .lh-hdr-right is a <nav>. Older pages (the 404, the blog index) style the bare
   `nav` element as their whole bar — background, height, padding, border,
   sticky — so neutralise what this header does not set itself. */
nav.lh-hdr-right{background:none;height:auto;padding:0;border:0;position:static;box-shadow:none;justify-content:flex-end;width:auto;max-width:none}
.lh-hdr-link{font-size:14px;color:#4a565e;text-decoration:none;font-weight:500;transition:color .15s;white-space:nowrap}
.lh-hdr-link:hover{color:#106b3c}
.lh-site-hdr .hdr-cta{background:#106b3c;color:#fff;padding:8px 16px;border-radius:4px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;font-family:inherit}
.lh-site-hdr .hdr-cta:hover{background:#0d5730;color:#fff}
/* Same breakpoints as index.html: one row on a phone, sub-line and the first
   link dropped there (the page body carries both actions). */
@media(max-width:640px){
  .lh-site-hdr{gap:8px;padding:10px 14px}
  .lh-brand{gap:10px}
  .lh-brand-sub{display:none}
  .lh-brand-name{font-size:17px}
  .lh-brand-mark{width:30px;height:30px}
  .lh-hdr-right{gap:10px}
  .lh-hdr-right .lh-hdr-link:first-of-type{display:none}
  .lh-hdr-link{font-size:13px}
  .lh-site-hdr .hdr-cta{padding:7px 10px;font-size:12px}
}
@media(max-width:400px){
  .lh-hdr-right:not(.lh-nocta) .lh-hdr-link{display:none}
  .lh-site-hdr .hdr-cta{font-size:11.5px;padding:6px 9px}
}