/* ============================================================
   Nelson Wire Rope — base
   Fonts, design tokens, reset, nav, mega menu, mobile menu, footer.
   Shared by every page. Page-specific rules live in site.css below this.
   ============================================================ */

@font-face {
  font-family: 'WorkSans';
  src: url('fonts/worksans-400.woff2') format('woff2'),
       url('fonts/worksans-400.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WorkSans';
  src: url('fonts/worksans-700.woff2') format('woff2'),
       url('fonts/worksans-700.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WorkSans';
  src: url('fonts/worksans-800.woff2') format('woff2'),
       url('fonts/worksans-800.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yellowtail';
  src: url('fonts/yellowtail-400.woff2') format('woff2'),
       url('fonts/yellowtail-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PosterGothic';
  src: url('fonts/postergothic-900.woff2') format('woff2'),
       url('fonts/postergothic-900.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #faf8f6;
  --black: #181818;
  --grey: #818181;
  --grey-light: #c0bdb6;
  --grey-sub: #9a958c;    /* list items under an off-white heading on dark */
  --grey-dark: #3a3a3a;
  --grey-mid: #2a2a2a;
  --grey-surface: #1e1e1e;
  --accent: #c5732d;      /* burnt orange — the one warm note in the palette */
  --nav-h: 80px;
  --pill: 999px;          /* buttons are pill shaped site-wide */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'WorkSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  font-size:17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* Skip link — keyboard users shouldn't have to tab the whole nav */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--white); color: var(--black);
  padding: 12px 20px; font-size:13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--grey-light); outline-offset: 2px; }

/* ── NAV ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  /* A LITERAL, not var(--nav-h). site.js measures this element and writes the
     result into --nav-h for the sticky bars below it; if the nav's own height
     also came from --nav-h, one tall measurement during a cold load (a webfont
     still swapping, a wrapped link row) would be written back as min-height and
     the nav would stay stuck at that height until the page was reloaded. */
  min-height: 80px;
  display: flex; align-items: center; gap: 24px;
  padding: 16px 48px;
  border-bottom: 1px solid var(--grey-mid);
}
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.nav-logo svg, .nav-logo img { width: 130px; height: auto; display: block; }
.nav-divider { width: 1px; height: 26px; background: #2a2a2a; }
.nav-tagline { font-size: 11px; color: var(--grey); letter-spacing: 0.08em; line-height: 1.5; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; flex-shrink: 0; }
.nav-links a { font-size:14px; color: var(--grey-light); text-decoration: none; letter-spacing: 0.04em; font-weight: 400; }
.nav-links a:visited { color: var(--grey-light); }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-cta {
  background: var(--black); color: var(--white);
  font-size:13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 9px 24px;
  text-decoration: none; border-radius: 999px; border: 1.5px solid #444;
  white-space: nowrap;
}
.nav-cta:hover { background: #222; border-color: #666; color: var(--white); }
.nav-cta:visited { color: var(--white); }

.nav-search {
  flex: 1 1 auto;          /* grow into the space up to the nav links, shrink with the window */
  min-width: 130px;        /* below this it gives up and hides (see the 560px query) */
  position: relative; display: flex; align-items: center;
}
.nav-search input {
  width: 100%; background: #1a1a1a; border: 1px solid #333;
  color: var(--grey-light); font-family: 'WorkSans', sans-serif;
  font-size:14px; padding: 8px 36px 8px 14px; border-radius: 999px;
  outline: none; transition: border-color .2s, background .2s;
}
.nav-search input::placeholder { color: #555; }
.nav-search input:focus { border-color: #555; background: #222; color: var(--white); }
.nav-search > svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .4; width: 14px; height: 14px; }
#nav-search-results {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  width: max(100%, 300px); max-width: calc(100vw - 32px);
  z-index: 9999; background: #111; border: 1px solid #333;
  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.5); padding: 8px 0;
  max-height: 60vh; overflow-y: auto;
}
#nav-search-results a { display: block; padding: 10px 16px; text-decoration: none; border-bottom: 1px solid #222; }
#nav-search-results a:last-child { border-bottom: 0; }
#nav-search-results a:hover, #nav-search-results a.is-active { background: #1c1c1c; }
#nav-search-results .sr-t { font-size:14.5px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
#nav-search-results .sr-d { font-size: 11px; color: #666; }
#nav-search-results .sr-empty { padding: 12px 16px; font-size:13px; color: #666; }

/* ── MEGA MENU ─────────────────────────────────────────── */
.nav-item { position: relative; display: flex; align-items: center; }
/* The twelve catalog sections, named and nothing else. The pictures live on the
   products page, where there is room to look at them. */
.mega-menu {
  display: none; position: fixed; left: 0; right: 0;
  background: #111; border-bottom: 1px solid var(--grey-mid);
  z-index: 200; padding: 26px 46px 8px;
}
.mega-menu.open { display: block; }
/* 12 sections, so column counts that divide evenly: no ragged last row */
.mega-sections {
  display: grid; grid-template-columns: repeat(6, 1fr);
  column-gap: 30px; row-gap: 4px;
}
@media (max-width: 1400px) { .mega-sections { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .mega-sections { grid-template-columns: repeat(3, 1fr); } }
/* a section heading with its sub-categories under it, the way the counter
   conversation goes: "chain slings" first, then which kind */
.mega-sec { padding: 0 0 20px; }
.mega-menu .mega-sec-name {
  display: block; font-size: 13px; font-weight: 700; color: var(--white);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid #262626;
}
.mega-menu .mega-sec-name:visited { color: var(--white); }
.mega-menu .mega-sec-name:hover,
.mega-menu .mega-sec-name:focus-visible { color: var(--accent); }
.mega-subs { display: flex; flex-direction: column; }
.mega-menu .mega-sub {
  font-size: 13.5px; color: var(--grey-sub); text-decoration: none;
  padding: 3px 0; line-height: 1.35; transition: color .12s;
}
.mega-menu .mega-sub:visited { color: var(--grey-sub); }
.mega-menu .mega-sub:hover,
.mega-menu .mega-sub:focus-visible { color: var(--white); }
/* shown when a section has more sub-categories than fit here */
.mega-menu .mega-more { font-size: 12.5px; color: var(--grey); margin-top: 2px; }
.mega-menu .mega-more:visited { color: var(--grey); }
.mega-more::after { content: ' \2192'; }
.mega-foot {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #262626;
}
.mega-foot a {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey-light); text-decoration: none;
}
.mega-foot a:hover { color: var(--white); }

/* phones list the same sections flat, one tap each */
.mobile-sections { display: flex; flex-direction: column; }
.mobile-sec {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 22px; color: var(--grey-light); text-decoration: none;
  border-bottom: 1px solid #222; font-size: 15.5px;
}
.mobile-sec:visited { color: var(--grey-light); }
.mobile-sec span { font-size: 11px; color: #5f5f5f; font-variant-numeric: tabular-nums; }

/* ── MOBILE MENU ───────────────────────────────────────── */
.nav-toggle {
  display: none; background: none; border: 1px solid #333;
  border-radius: 6px; padding: 8px 9px; cursor: pointer;
  margin-left: auto; flex-shrink: 0;
}
.nav-toggle:hover { border-color: #555; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--grey-light); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 300;
}
.mobile-scrim.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px); background: #111;
  border-left: 1px solid var(--grey-mid);
  z-index: 301; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid #222; position: sticky; top: 0; background: #111; z-index: 1;
}
.mobile-menu-head svg, .mobile-menu-head img { width: 104px; height: auto; display: block; }
.mobile-close { background: none; border: 0; color: var(--grey); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mobile-close:hover { color: var(--white); }
.mobile-menu-body { padding: 8px 0 24px; flex: 1; }
.mobile-menu-body > a {
  display: block; padding: 15px 22px; font-size:17px;
  color: var(--white); text-decoration: none; border-bottom: 1px solid #1c1c1c;
  letter-spacing: .01em;
}
.mobile-menu-body > a:hover { background: #181818; }
.mobile-group { border-bottom: 1px solid #1c1c1c; }
.mobile-group-title {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
  padding: 15px 22px; font-family: inherit; font-size:17px;
  color: var(--white); text-align: left; letter-spacing: .01em;
}
.mobile-group-title::after { content: '+'; font-size: 18px; color: var(--grey); line-height: 1; }
.mobile-group-title[aria-expanded="true"]::after { content: '\2212'; }
.mobile-group-panel { display: none; padding: 0 0 12px; background: #0e0e0e; }
.mobile-group-panel.open { display: block; }
.mobile-group-panel .mobile-sub-title {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #4a4a4a; padding: 14px 22px 6px; font-weight: 600;
}
.mobile-group-panel a { display: block; padding: 9px 22px; font-size:15.5px; color: var(--grey); text-decoration: none; }
.mobile-group-panel a:hover { color: var(--white); }
.mobile-menu-foot { padding: 20px 22px 28px; border-top: 1px solid #1c1c1c; }
.mobile-quote {
  display: block; text-align: center; background: var(--white); color: var(--black);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 20px; text-decoration: none; margin-bottom: 14px;
}
.mobile-quote:hover { background: var(--grey-light); }
.mobile-call {
  display: block; text-align: center; border: 1px solid #333; color: var(--grey-light);
  font-size:14.5px; font-weight: 600; letter-spacing: .06em;
  padding: 14px 20px; text-decoration: none;
}
.mobile-call:hover { border-color: #666; color: var(--white); }
body.menu-open { overflow: hidden; }

/* ── FOOTER ────────────────────────────────────────────── */
.footer {
  background: #111; padding: 48px 52px;
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto; gap: 40px 64px;
  border-top: 1px solid var(--grey-mid);
}
.footer-logo { margin-bottom: 20px; }
.footer-logo svg { width: 110px; height: auto; }
.footer-brand-name {
  font-family: 'PosterGothic', sans-serif; font-size:17px; font-weight: 900;
  text-transform: uppercase; color: var(--white); letter-spacing: .04em; margin-bottom: 12px;
}
.footer-info { font-size:14.5px; color: var(--grey); line-height: 1.9; }
.footer-info a { color: var(--grey); text-decoration: none; }
.footer-info a:hover { color: var(--grey-light); }
.footer-col h3, .footer-col h4 {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); margin-bottom: 16px; font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size:14.5px; color: var(--grey); text-decoration: none; }
.footer-col ul li a:visited { color: var(--grey); }
.footer-col ul li a:hover { color: var(--grey-light); }

/* Two columns, filled top to bottom then across — so the list still reads as a
   list rather than a grid you have to scan sideways. */
.footer-nav {
  column-count: 2; column-gap: 40px; max-width: 460px;
}
.footer-nav li { break-inside: avoid; margin-bottom: 13px; }
.footer-nav li a { font-size:16.5px; line-height: 1.4; }

/* The seal sits in the bottom corner, on its own. */
.footer-col-cert { display: flex; align-items: flex-end; justify-content: flex-end; }
.footer-bottom {
  background: #0d0d0d; padding: 16px 52px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #1a1a1a; gap: 12px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 11px; color: #5a5a5a; letter-spacing: .04em; }

/* ── RESPONSIVE CHROME ─────────────────────────────────── */
@media (min-width: 1081px) and (max-width: 1320px) {
  .nav { padding: 16px 28px; gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-cta { padding: 9px 18px; }
}

@media (max-width: 1080px) {
  .nav { padding: 12px 20px; gap: 14px; }
  .nav-logo svg, .nav-logo img { width: 108px; }
  .nav-links { display: none; }
  .nav-search { max-width: none; }
  .nav-toggle { display: block; }
  .mega-menu { display: none !important; }
  /* Below the three-column width the footer goes to two, not one: the brand
     block over the links on the left, the seal holding the right-hand corner
     down the full height. Collapsing to a single column left the whole right
     side empty and dropped the seal to the very bottom of the page; putting it
     level with the brand badge instead just read as two logos competing. */
  .footer {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 40px 28px; gap: 34px 30px;
  }
  .footer > :first-child { grid-column: 1; grid-row: 1; }
  .footer-col:not(.footer-col-cert) { grid-column: 1; grid-row: 2; }
  /* Spans both rows and sits on the baseline of the last one, so it lands in
     the bottom corner exactly as it does on desktop, and the tall empty strip
     to the right of the link list disappears.
     `span 2`, not `1 / -1`: these rows are implicit (only the columns are
     declared), and a negative line number only counts back from the end of the
     EXPLICIT grid — so `-1` resolved to line 1 and the seal quietly stayed in
     row one, floating halfway up beside the phone number. */
  .footer-col-cert { grid-column: 2; grid-row: 1 / span 2; align-items: flex-end; }
  /* Capped rather than free: with the links column now taking all the width the
     seal used to have, an uncapped list at 1000px+ pushes its two columns so far
     apart they stop reading as one list. 560px keeps them a pair, and at 700px
     and below there is less than that going spare anyway, so nothing changes. */
  .footer-nav { column-count: 2; column-gap: 34px; max-width: 560px; }
  .footer-bottom { padding: 16px 24px; flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 620px) {
  /* On a phone there is no room for a seal column beside two lists — squeezing
     the links into what is left wraps half of them onto three lines — and a
     single file of fifteen links makes the footer enormous. So the links take
     the full width and the seal gets a row of its own beneath them, still hard
     against the right edge. There is no dead space to fill at this width, so
     sitting low is fine; floating it up beside the badge just read as two
     competing logos. */
  .footer-col:not(.footer-col-cert) { grid-column: 1 / -1; grid-row: 2; }
  .footer-col-cert { grid-column: 1 / -1; grid-row: 3; align-items: flex-end; }
  .footer-nav { column-count: 2; column-gap: 20px; }
  .footer { gap: 26px 16px; }
}
@media (max-width: 560px) {
  .nav-search { display: none; }
  .footer { padding: 34px 20px; }
  .footer-awrf { width: 84px; }
  .footer-badge { width: 88px; margin-bottom: 14px; }
}
@media (min-width: 1081px) {
  .mobile-menu, .mobile-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* screen-reader-only helper */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A class-level display: wins over the UA [hidden] rule, so state it explicitly —
   otherwise the closed off-canvas panel still occupies layout and creates
   horizontal scroll on phones. */
.mobile-menu[hidden], .mobile-scrim[hidden] { display: none !important; }


/* ── BUTTONS ───────────────────────────────────────────
   One pill shape for every call to action on the site. Page stylesheets
   set each button's colour and padding; the radius is settled here. */
.nav-cta,
.hero-btn, .cta-btn, .catalog-btn, .quote-btn, .request-btn, .submit-btn,
.cat-dl-btn, .cfg-add-btn, .cfg-clear-btn, .cfg-submit-btn, .form-submit,
.back-btn, .section-nav-btn, .add-btn, .clear-btn,
.mobile-quote, .mobile-call, .nf-btn,
.prod-sidebar .cta-block a,
.tool-tab, .faq-q, .skip-link { border-radius: var(--pill); }

/* Pills need a little more side padding than square buttons to look right. */
.hero-btn, .cta-btn, .catalog-btn, .quote-btn, .request-btn, .submit-btn,
.cat-dl-btn, .cfg-submit-btn, .form-submit, .mobile-quote, .mobile-call, .nf-btn {
  padding-left: 34px; padding-right: 34px;
}
.back-btn, .section-nav-btn, .add-btn, .clear-btn { padding-left: 20px; padding-right: 20px; }

/* Tabs and accordion headers keep their own shape — a pill would read as a button. */
.tool-tab, .faq-q, .skip-link { border-radius: 0; }

/* Footer seals — the Nelson mark and the AWRF accreditation seal.
   Both are transparent PNGs whose artwork reads light, so they sit directly
   on the dark footer with no plate behind them. */
/* Nelson seal above the company name; AWRF seal alone in the bottom corner.
   Both are transparent PNGs with light artwork, so they sit straight
   on the dark footer. */
.footer-badge { width: 118px; height: auto; display: block; margin-bottom: 18px; }
.footer-awrf  { width: 112px; height: auto; display: block; margin-bottom: 0; }
@media (max-width: 1080px) {
  .footer-badge { width: 104px; margin-bottom: 16px; }
  .footer-awrf  { width: 96px; }
}

/* With a sticky header, anything linked to by id should stop below it. */
:target, section[id], [id="main"], .pl-group[id] { scroll-margin-top: calc(var(--nav-h) + var(--sub-h, 0px) + 16px); }