/* One top menu bar for every page. Linked last in each page's <head> so it wins over the page's own header styles. */
header.bar{position:sticky;top:0;z-index:20;background:rgba(10,15,11,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.bar .wrap{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:60px}
header.bar .brand{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:2px;text-decoration:none}
header.bar .brand b{color:var(--amber)}header.bar .brand span{color:var(--green)}
header.bar .brand-mark{height:34px;width:auto;margin-right:9px;display:inline-block;vertical-align:middle}
header.bar .nav{display:flex;gap:26px;font-size:14px;font-weight:600}
header.bar .nav a{color:var(--dim);text-decoration:none}
header.bar .nav a:hover,header.bar .nav a.on{color:var(--ink)}
header.bar .bar-right{display:flex;align-items:center;gap:16px}
header.bar .bar-social{display:flex;gap:12px;align-items:center}
header.bar .bar-social a{color:var(--dim);display:inline-flex}
header.bar .bar-social a:hover{color:var(--amber)}
header.bar .btn-buy{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:9px 18px;border-radius:7px;border:1px solid transparent;background:var(--amber);color:#1a1200;text-decoration:none;line-height:1.6}
header.bar .btn-buy:hover{filter:brightness(1.08);text-decoration:none}
header.bar .navtoggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px;line-height:0}
@media(max-width:820px){
  header.bar .navtoggle{display:inline-flex;align-items:center}
  header.bar .nav{position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 14px 30px #0008;padding:4px 0;display:none}
  header.bar .nav.open{display:flex}
  header.bar .nav a{padding:14px 22px;border-top:1px solid var(--line)}
}
@media(max-width:520px){header.bar .bar-social{display:none}}
/* Footer social icons, same on every page */
footer .social{display:flex;gap:14px;margin-top:12px}
footer .social a{color:var(--dim);display:inline-flex}
footer .social a:hover{color:var(--amber)}

/* "Free templates" menu item, with a NEW tag for the first weeks (free templates, 2026-11). */
header.bar .nav a.navnew i{font-style:normal;font-family:var(--mono,monospace);font-size:10px;letter-spacing:1px;background:var(--green);color:#0a0f0b;border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:2px}
/* Seven menu items: keep each on one line, tighten the gaps on mid-size screens, and switch to the
   menu button below 960 px (was 820 px) so nothing wraps. */
header.bar .brand,header.bar .nav a{white-space:nowrap}
@media(max-width:1180px){header.bar .nav{gap:16px}}
@media(max-width:1100px){header.bar .nav a.navnew i{display:none}}
@media(max-width:960px){
  header.bar .navtoggle{display:inline-flex;align-items:center}
  header.bar .nav{position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 14px 30px #0008;padding:4px 0;display:none}
  header.bar .nav.open{display:flex}
  header.bar .nav a{padding:14px 22px;border-top:1px solid var(--line)}
  header.bar .nav a.navnew i{display:inline}
}
/* Four social icons (Pinterest added 2026-11-07): tighter gaps just above the menu-button width so the
   logo, menu and icons never touch. */
@media(max-width:1060px){header.bar .wrap{gap:14px}header.bar .nav{gap:12px}header.bar .bar-right{gap:12px}header.bar .bar-social{gap:9px}}