/* The masthead shared by www.thestandardpress.com and the store (views/partials/masthead.ejs,
   public/masthead.js). Self-contained on purpose: its colours are its own --mh-* tokens and every
   rule is scoped to .topbar or .mh, so the store's style.css and the marketing sheet can sit
   beside it without either reaching in. The fonts are declared here too, so a store page gets
   them by loading this file alone. */

/* Museo 300 / 700 (exljbris free weights). The exljbris free-font licence allows @font-face only
   with the notice below beside the declarations -- keep it there. See public/fonts/README.md. */
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face { font-family: 'Museo'; font-style: normal; font-weight: 300; font-display: swap; src: url('/public/fonts/museo-300.woff2') format('woff2'); }
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face { font-family: 'Museo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/museo-700.woff2') format('woff2'); }
/* Open Sans: body text and the utility bar, as on the old Wix site. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/open-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/public/fonts/open-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/open-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/public/fonts/open-sans-800.woff2') format('woff2'); }

.topbar, .mh {
  --mh-brand: #BF2E1A;
  --mh-brand-dark: #9E2413;
  --mh-swirl: #800b0b url('/public/marketing/img/red-flow-title-1200.webp') 55% 95% / 700px auto no-repeat border-box;
  --mh-ink: #000;
  --mh-text: #4d4d4d;
  --mh-muted: #6c757d;
  --mh-line: #e9ecef;
  --mh-ground: #f8f9fa;
  --mh-display: 'Museo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mh-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  line-height: 1.5;
  text-align: left;
}
.topbar *, .mh * { box-sizing: border-box; }

/* ---------- Utility bar ---------- */
.topbar { position: relative; z-index: 950; background: #2b2d33; color: rgba(255, 255, 255, .7); font: 400 13px/1.5 var(--mh-font); }
.topbar-in { max-width: 1320px; margin: 0 auto; padding: 9px 24px; display: flex; gap: 24px; align-items: center; }
.topbar strong { color: #fff; font-weight: 400; }
.topbar a { color: #edd7d5; font-weight: 400; text-decoration: none; }
/* Phone and email in caps like the right-hand links, except the address itself. */
.topbar-in > span:not(.topbar-right) { text-transform: uppercase; letter-spacing: .04em; }
.topbar-email a { text-transform: none; letter-spacing: 0; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; gap: 0; align-items: center; }
/* A divider between the utility links: "PAY INVOICE  |  GET A QUOTE  |  SIGN IN". */
.topbar-right > * + *::before { content: '|'; display: inline-block; margin: 0 18px; color: rgba(255, 255, 255, .35); font-weight: 400; pointer-events: none; }
.topbar-right > a, .topbar .mh-acct > .mh-more-btn { color: #fff; }
/* The utility links in caps at regular weight. The signed-in email stays as typed. */
.topbar-right > a { font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
/* The signed-in account menu lives in the utility bar, on the dark. */
.topbar .mh-acct > .mh-more-btn { font: 700 13px/1.5 var(--mh-font); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .mh-acct .mh-more-menu { left: auto; right: -12px; top: calc(100% + 12px); width: 240px; }
.topbar .mh-acct .mh-more-menu::before { top: -14px; height: 14px; }
.mh-menu-h { display: block; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-muted); }
.topbar .mh-more-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--mh-line); }
.mh-menu-btn { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 700 14px var(--mh-font); color: var(--mh-brand); cursor: pointer; }
.mh-menu-btn:hover { background: var(--mh-ground); }

/* ---------- Header ----------
   At the top of the page the logo is large; once the page scrolls (masthead.js adds .is-scrolled)
   it shrinks and the header turns see-through, frosted so the nav stays readable over photos.
   On a desktop the nav lines up with the logo's lettering (see the rule after .mh-toggle).
   Padding, not a centred min-height, sets the height. */
.mh { position: sticky; top: 0; z-index: 900; display: block; margin: 0; background: #fff; color: var(--mh-ink); box-shadow: 0 2px 14px rgba(0, 0, 0, .06); font-family: var(--mh-font); transition: background-color .3s ease, box-shadow .3s ease; }
.mh-in { max-width: 1320px; margin: 0 auto; padding: 30px 24px; display: flex; align-items: baseline; gap: 28px; transition: padding .3s ease; }
.mh-logo { display: block; width: 340px; flex: none; transition: width .3s ease; }
.mh-logo img { display: block; width: 100%; height: auto; max-width: none; }
.mh.is-scrolled { background: rgba(255, 255, 255, .72); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.mh.is-scrolled .mh-in { padding-top: 14px; padding-bottom: 14px; }
.mh.is-scrolled .mh-logo { width: 190px; }

.mh-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; font: 700 16px/1.5 var(--mh-display); letter-spacing: 0; text-transform: none; }
.mh-nav > a, .mh-nav .mh-more-btn { color: var(--mh-ink); text-decoration: none; white-space: nowrap; }
.mh-nav > a:hover, .mh-nav .mh-more-btn:hover { color: var(--mh-brand); text-decoration: none; }
.mh-nav > a[aria-current="page"], .mh-nav .mh-more-btn.is-here { color: var(--mh-brand); }
.mh-nav > .mh-phone-only { display: none; }
.mh-toggle { display: none; }

/* Desktop: the buttons' bottoms and the menu text's baseline sit on the baseline of
   "STANDARD PRESS" in the logo, which is 42 of the image's 1870 px width above its bottom edge
   (the "div. of WICMA ltd." line hangs below it). --mh-logo-w tracks the logo's width at
   both sizes. */
@media (min-width: 1101px) {
  .mh { --mh-logo-w: 340px; }
  .mh.is-scrolled { --mh-logo-w: 190px; }
  .mh-in { align-items: flex-end; }
  .mh-nav { align-items: flex-end; margin-bottom: calc(var(--mh-logo-w) * 42 / 1870); transition: margin .3s ease; }
  .mh-ctas { align-items: flex-end; }
  /* -.2em drops the line box's descender space, so the text's baseline is what lines up. */
  .mh-nav > a, .mh-nav > .mh-more { line-height: 1; margin-bottom: -.2em; }
}

/* Buttons: the two ways into the store. */
.mh-ctas { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
.mh-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px;
  border-radius: 999px; border: 2px solid transparent; background: var(--mh-swirl); color: #fff;
  font: 700 12px/1 var(--mh-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, background-position .6s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mh-nav a.mh-btn { color: #fff; }
.mh-nav a.mh-btn:hover { background: var(--mh-swirl); background-position: 42% 80%; border-color: transparent; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(191, 46, 26, .25); }
.mh-nav a.mh-btn--line { background: transparent; border-color: var(--mh-brand); color: var(--mh-brand); }
.mh-nav a.mh-btn--line:hover { background: var(--mh-swirl); background-position: 42% 80%; border-color: transparent; color: #fff; }
.mh-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--mh-ink); text-decoration: none; }
.mh-cart:hover { background: var(--mh-ground); color: var(--mh-brand); }
.mh-cart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-cart-n { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mh-brand); color: #fff; font: 700 11px/18px var(--mh-font); text-align: center; }

/* Dropdowns: open on hover, on focus, or on a click (masthead.js), so they work on touch
   screens and from the keyboard as well as with a mouse. */
.mh-more { position: relative; }
.mh-more-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.mh-more-btn::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.mh-more-menu {
  display: none; position: absolute; left: -16px; top: calc(100% + 18px); z-index: 1000; width: 300px;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); padding: 8px;
  font: 400 14px/1.4 var(--mh-font); text-transform: none; letter-spacing: 0;
}
.mh-more-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.mh-more:hover .mh-more-menu, .mh-more:focus-within .mh-more-menu, .mh-more.is-open .mh-more-menu { display: block; }
.mh-more-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--mh-text); text-decoration: none; }
.mh-more-menu a strong { display: block; font-size: 14px; font-weight: 700; color: var(--mh-ink); }
.mh-more-menu a span { display: block; font-size: 13px; color: var(--mh-muted); }
.mh-more-menu a:hover, .mh-more-menu a[aria-current="page"] { background: var(--mh-ground); text-decoration: none; }
.mh-more-menu a:hover strong { color: var(--mh-brand); }

@media (prefers-reduced-motion: reduce) { .mh, .mh-in, .mh-logo, .mh-btn { transition: none; } }

/* ---------- Narrower screens ---------- */
@media (max-width: 1260px) {
  .mh-nav { gap: 18px; font-size: 14px; }
  .mh-logo { width: 280px; }
}
@media (max-width: 1100px) {
  .topbar-email { display: none; }
  /* Collapsed to the Menu button: centre the logo and button again. */
  .mh-in, .mh.is-scrolled .mh-in { padding-top: 0; padding-bottom: 0; align-items: center; min-height: 96px; flex-wrap: wrap; }
  .mh.is-scrolled .mh-in { min-height: 64px; }
  .mh.is-scrolled .mh-logo { width: 170px; }
  .mh.is-open { background: #fff; max-height: 100svh; overflow-y: auto; }
  .mh-toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: 8px; background: none; border: 0;
    color: var(--mh-ink); padding: 10px 4px; font: 700 13px/1 var(--mh-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  }
  .mh-toggle-bars, .mh-toggle-bars::before, .mh-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--mh-ink); position: relative; }
  .mh-toggle-bars::before, .mh-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .mh-toggle-bars::before { top: -6px; } .mh-toggle-bars::after { top: 6px; }
  .mh-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0 0 14px; }
  .mh.is-open .mh-nav { display: flex; }
  .mh-nav > .mh-phone-only { display: block; }
  .mh-nav > a, .mh-nav > .mh-more > .mh-more-btn, .mh-nav > form button { display: block; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--mh-line); background: none; text-align: left; font: inherit; color: var(--mh-ink); cursor: pointer; }
  .mh-nav > form { margin: 0; }
  .mh-ctas { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
  .mh-ctas:has(.mh-cart) { grid-template-columns: auto 1fr 1fr; }
  .mh-more-menu { position: static; width: auto; box-shadow: none; margin: 6px 0; background: var(--mh-ground); }
  .mh-more-menu::before { display: none; }
  .mh-more:hover .mh-more-menu { display: none; }
  .mh-more.is-open .mh-more-menu, .mh-more:focus-within .mh-more-menu { display: block; }
}
@media (max-width: 900px) {
  .topbar { display: none; }
  .mh-in { gap: 16px; padding-left: 20px; padding-right: 20px; }
  /* Leave room for the Menu button beside the logo on the narrowest phones. */
  .mh-logo { width: min(230px, calc(100vw - 160px)); }
  .mh.is-scrolled .mh-logo { width: min(160px, calc(100vw - 160px)); }
  .mh-ctas { gap: 8px; }
  .mh-btn { min-width: 0; padding: 0 10px; letter-spacing: .05em; }
}