/* Strength Gear Guide, shared site-wide styles.
   Loaded on EVERY page via site-sync (see tools/site-sync/). This is the single
   home for CSS that applies across the whole site. Keep page-specific design in
   each page's own <style> block; only put genuinely universal rules here.

   Design reference for the chrome: menshealth.com. White newsstand masthead over
   a black category band, one hot red accent, condensed uppercase link type.

   Every chrome class is prefixed sgg- on purpose. Each page still carries its own
   hand written .nav / .footer rules from before the chrome was centralised, so a
   prefixed namespace guarantees no page can restyle the canonical header/footer.
   This file is injected last in <head>, after each page's inline <style>. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

/* Outbound Kensui product CTA hook.
   Every kensui.com/products link carries class="kensui-cta" as a stable
   GTM/analytics selector. Intentionally NO visual override here so each page
   keeps styling its own button. */
.kensui-cta { /* analytics selector only, no visual styling on purpose */ }

/* Height of the sticky chrome (white masthead + black category band).
   The nav sticks to the top of the viewport, so anything else on a page that
   sticks (a product rail, an in page nav) has to start below it or it gets
   clipped under the red rule. Pages read this variable instead of hardcoding a
   number, so changing the chrome height can never orphan a rail again. */
:root { --sgg-chrome-h: 142px; }
@media (max-width: 768px) { :root { --sgg-chrome-h: 68px; } }

/* =====================================================================
   CANONICAL NAV. site-sync stamps the markup from
   tools/site-sync/partials/strengthgearguide/header.html into every page;
   this styles it. Colours are hardcoded (not CSS vars) so the chrome renders
   identically no matter what palette a page declares. Edit the header look
   ONLY here.
   ===================================================================== */

.sgg-nav {
  position: sticky; top: 0; z-index: 500;
  background: #fff;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sgg-masthead { border-bottom: 1px solid #e2e2e2; }

.sgg-masthead-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 14px 24px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.sgg-nav-logo { display: inline-flex; flex: 0 0 auto; }
.sgg-nav-logo img { height: 42px; width: auto; display: block; }

.sgg-nav-cta {
  flex: 0 0 auto;
  display: inline-block;
  font-family: 'Oswald', 'Archivo', sans-serif;
  font-size: .78rem; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .12em;
  color: #fff; background: #ed250a;
  padding: 12px 18px; border: 0; border-radius: 0;
  text-decoration: none; white-space: nowrap;
  transition: background .18s;
}
.sgg-nav-cta:hover, .sgg-nav-cta:focus { background: #101a20; color: #fff; text-decoration: none; }

.sgg-masthead-tagline {
  max-width: 1180px; margin: 0 auto; padding: 0 24px 10px;
  font-family: 'Archivo', sans-serif;
  font-size: .68rem; font-weight: 500; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .16em;
  color: #767676;
}

/* Hamburger. Drawn in CSS, never an icon font: not every page loads Font Awesome. */
.sgg-nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin-left: -10px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.sgg-nav-toggle-bars,
.sgg-nav-toggle-bars::before,
.sgg-nav-toggle-bars::after {
  display: block; width: 22px; height: 2px;
  background: #101a20; border-radius: 1px;
}
.sgg-nav-toggle-bars { position: relative; }
.sgg-nav-toggle-bars::before, .sgg-nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.sgg-nav-toggle-bars::before { top: -7px; }
.sgg-nav-toggle-bars::after { top: 7px; }

/* Black category band. The single most recognisable piece of the reference. */
.sgg-catbar { background: #101a20; border-bottom: 3px solid #ed250a; }

.sgg-nav-links {
  max-width: 1180px; margin: 0 auto; padding: 0 14px;
  display: flex; align-items: stretch; gap: 0;
  list-style: none;
}
.sgg-nav-links li { list-style: none; margin: 0; padding: 0; }
.sgg-nav-links a {
  display: block;
  font-family: 'Oswald', 'Archivo', sans-serif;
  font-size: .85rem; font-weight: 500; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .11em;
  color: #fff; background: none;
  padding: 15px 16px;
  text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  transition: background .18s, color .18s;
}
.sgg-nav-links a:hover, .sgg-nav-links a:focus { color: #fff; background: #1e2c35; text-decoration: none; }
.sgg-nav-links a.active { color: #ed250a; border-bottom-color: #ed250a; }

/* =====================================================================
   CANONICAL FOOTER.
   ===================================================================== */

.sgg-footer {
  background: #101a20;
  border-top: 4px solid #ed250a;
  padding: 44px 24px 0;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sgg-footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px;
}

.sgg-footer-brand { max-width: 340px; }
/* The wordmark PNG ships on an opaque white background, so it sits on a white
   plate here rather than being colour inverted into a solid block. */
.sgg-footer-logo { display: inline-block; background: #fff; padding: 10px 14px; }
.sgg-footer-logo img { height: 30px; width: auto; display: block; }

.sgg-footer-tagline {
  margin: 16px 0 0;
  font-size: .72rem; font-weight: 500; line-height: 1.6;
  text-transform: uppercase; letter-spacing: .14em;
  color: #8a949b;
}

.sgg-footer-head {
  margin: 0 0 14px;
  font-family: 'Oswald', 'Archivo', sans-serif;
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .14em;
  color: #fff;
}

.sgg-footer-links { list-style: none; margin: 0; padding: 0; }
.sgg-footer-links li { list-style: none; margin: 0 0 9px; padding: 0; }
.sgg-footer-links a {
  font-size: .84rem; font-weight: 400; line-height: 1.4;
  color: #98a2a9; text-decoration: none;
  transition: color .18s;
}
.sgg-footer-links a:hover, .sgg-footer-links a:focus { color: #fff; text-decoration: none; }

.sgg-footer-legal {
  max-width: 1180px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 0 26px;
}
.sgg-footer-copy { font-size: .72rem; color: #6d777e; letter-spacing: .04em; }

/* =====================================================================
   MOBILE. The category band collapses into a toggle driven panel so the page
   never scrolls sideways, and every link keeps a 44px tap target.
   ===================================================================== */

@media (max-width: 768px) {
  .sgg-masthead-inner { padding: 10px 16px; gap: 12px; }
  .sgg-nav-toggle { display: flex; }
  .sgg-nav-logo { flex: 1 1 auto; justify-content: center; }
  .sgg-nav-logo img { height: 32px; }
  .sgg-nav-cta { font-size: .7rem; letter-spacing: .1em; padding: 11px 12px; }
  .sgg-masthead-tagline { display: none; }

  .sgg-nav-links { display: none; flex-direction: column; padding: 0; }
  .sgg-nav-links.open { display: flex; }
  .sgg-nav-links a {
    padding: 15px 20px; font-size: .95rem;
    border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 0;
  }
  .sgg-nav-links li:last-child a { border-bottom: 0; }
  .sgg-catbar { border-bottom-width: 3px; }

  .sgg-footer { padding: 36px 20px 0; }
  .sgg-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sgg-footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 480px) {
  .sgg-nav-logo img { height: 28px; }
  .sgg-nav-cta { font-size: .64rem; padding: 10px 10px; }
  .sgg-footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .sgg-footer-tagline { font-size: .68rem; }
}
