/* css/site-header.css — the main app's header (index.html), for every free tool page.
   Markup comes from .github/scripts/lib/site-header.js; test/site-header.test.js
   keeps tools/*.html on it. Scoped to .site-header so a page's own `nav`,
   `header` or `.brand` rules cannot leak in or out. Values copied from the
   HEADER block of index.html — change both together. */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(15,16,21,0.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;padding:14px 28px;
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid rgba(138,102,8,0.2);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  box-sizing:border-box;
}
.site-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0;font:inherit}
.site-header .brand-mark{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:url('/logo.png') center/cover, linear-gradient(135deg,#b3261e,#8f1e17);
  box-shadow:0 4px 14px rgba(138,102,8,0.3);
}
.site-header .brand-text{line-height:1.15}
.site-header .brand-name{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17px;color:#fff;letter-spacing:-0.01em;white-space:nowrap}
.site-header .brand-sub{font-size:11px;color:#83838e;letter-spacing:0.1em;text-transform:uppercase;margin-top:2px;font-weight:500}
.site-header .header-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.site-header .header-link{font-size:14px;color:rgba(255,255,255,0.7);text-decoration:none;font-weight:500;transition:color .15s;white-space:nowrap}
.site-header .header-link:hover{color:#c6910c}
.site-header .hl-short{display:none}
.site-header .nav-cta{
  background:linear-gradient(135deg,#b3261e,#8f1e17);color:#fff;text-decoration:none;
  padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;white-space:nowrap;
}
.site-header .nav-cta:hover{filter:brightness(1.08)}
@media(max-width:640px){
  .site-header{padding:12px 16px;gap:10px}
  .site-header .brand{gap:9px}
  .site-header .brand-mark{width:32px;height:32px;border-radius:8px}
  .site-header .brand-name{font-size:15px}
  .site-header .brand-sub{display:none}
  .site-header .header-right{gap:14px}
  .site-header .header-link{font-size:13px;padding:8px 0}
  .site-header .hl-full{display:none}
  .site-header .hl-short{display:inline}
  .site-header .nav-cta{padding:7px 12px;font-size:13px}
}
/* A phone has room for the brand and the call to action, not three links as
   well; the links stay in the page footer and breadcrumb. */
@media(max-width:480px){
  .site-header .header-link{display:none}
}
@media(max-width:360px){
  .site-header{padding:12px}
  .site-header .brand{gap:7px}
  .site-header .brand-mark{width:28px;height:28px;border-radius:7px}
  .site-header .brand-name{font-size:14px}
  .site-header .nav-cta{padding:6px 10px;font-size:12px}
}
@media print{.site-header{display:none !important}}