/* ==========================================================================
   SKILLFUL NAV — single source of truth for all pages.
   Load in <head> AFTER assets/webflow.css.
   Replaces, on every page: the body .mega-menu <style>, both mega-menu
   <script> blocks, the @media(max-width:991px) .nav-menu <style>,
   and the .w-nav-button <script>.
   ========================================================================== */

:root { --sp-nav-h: 48px; }

/* ---------- 1. Nav-bar geometry: declared, not observed ---------- */
.desktop-nav-copy {
  height: var(--sp-nav-h) !important;
  min-height: var(--sp-nav-h) !important;
  box-sizing: border-box;
}

/* Fixed logo block. It had no `top` (so it drifted with document flow)
   and no width (so it collapsed to 0 until the CDN image landed). */
.div-block-4-logo {
  top: 0 !important;
  left: 54px !important;
  margin: 0 !important;
  height: var(--sp-nav-h) !important;
  min-width: 110px;
  align-items: center !important;
}
.div-block-4-logo .brand { display: flex; align-items: center; height: 100%; }
.div-block-4-logo .image-3 {
  width: auto !important;
  max-width: none !important;
  height: 21px !important;     /* compact bar: lockup at 21px */
  object-fit: contain;
  object-position: left center;
}
.div-block-4 {
  top: 0 !important;
  margin-top: 0 !important;
  height: var(--sp-nav-h) !important;
  align-items: center !important;
}

/* company.html sticky sub-nav — was hard-coded 59px against a 59.2px nav */
.sp-subnav { top: var(--sp-nav-h) !important; }

/* Fragment links must clear the fixed chrome */
[id] { scroll-margin-top: calc(var(--sp-nav-h) + 12px); }
body:has(.sp-subnav) [id] { scroll-margin-top: calc(var(--sp-nav-h) + 46px); }

/* ---------- 1b. Compact type in the bar (desktop only: on phones these !important sizes made the panel's links
   tiny and cramped, 2026-10-27) ---------- */
@media screen and (min-width: 992px) {
  .desktop-nav-copy .nav-menu > a,
  .desktop-nav-copy .w-dropdown-toggle .text-block { font-size: 11.5px !important; letter-spacing: .02em; padding-top: 0 !important; padding-bottom: 0 !important; }
  /* One weight and colour for every menu link: Home carries Webflow's .nav-link (weight 400) while the others carry
     .nav-link-4 (500), so Home looked lighter on every page but the home page (Jason 2026-10-27). */
  .desktop-nav-copy .nav-menu > a,
  .desktop-nav-copy .w-dropdown-toggle .text-block { font-weight: 500 !important; color: #1a1a1a; }
}
.desktop-nav-copy .nav-menu { align-items: center; }
/* phone-panel extras built by nav.js: never on desktop */
.sp-mgroups, .sp-mfoot, .sp-burger { display: none; }
.div-block-4 .login, .div-block-4 .button { font-size: 11px !important; padding: 6px 12px !important; line-height: 1.2 !important; }

/* ---------- 2. Focus visibility (webflow.css sets outline:0) ---------- */
.w-dropdown-toggle { cursor: pointer; }
.desktop-nav-copy a:focus-visible,
.desktop-nav-copy .w-dropdown-toggle:focus-visible,
.desktop-nav-copy .w-nav-button:focus-visible,
.div-block-4 a:focus-visible,
.div-block-4-logo a:focus-visible,
.mega-menu a:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Current-page nav link — Webflow's default w--current is blue, which is
   not in the brand palette (black / white / greys only). Same weight as the
   other links (Jason 2026-10-27: "Home should match the others"). */
.desktop-nav-copy .nav-menu a.w--current,
.desktop-nav-copy .nav-menu a.w-nav-link.w--current {
  color: #1a1a1a !important;
  font-weight: 500 !important;
}

/* ---------- 3. Desktop mega-menu ---------- */
.mega-menu {
  position: fixed !important;
  top: var(--sp-nav-h) !important;    /* welded to the nav: no seam, no overlap */
  left: 0 !important;
  right: 0 !important;
  width: auto !important;             /* kills webflow.css width:560px */
  min-width: 0 !important;            /* kills .w-dropdown-list min-width:100% */
  max-width: none !important;
  margin: 0 !important;               /* kills webflow.css margin-top:-6px */
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.10) !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  padding: 32px 5vw !important;
  max-height: calc(100vh - var(--sp-nav-h)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 1 !important;

  /* CLOSED — `visibility` is the load-bearing part: it is not interpolated,
     so a torn/frozen transition can never leave a half-open panel, and it
     removes the links from the tab order and the a11y tree. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: none;                   /* nothing to animate at parse time */
}
.mega-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  z-index: 2 !important;
}

/* Transitions switch on only after the closed state has painted
   (nav.js adds .sp-nav-ready after two rAFs). */
html.sp-nav-ready .mega-menu {
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
html.sp-nav-ready .mega-menu.is-open {
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  html.sp-nav-ready .mega-menu,
  html.sp-nav-ready .mega-menu.is-open { transition: none; }
}

/* ---------- 4. Collapsed nav (<= 991px) ----------
   .desktop-nav-copy becomes the mobile nav on ALL pages.
   .mobile-nav-2 (index only, all links href="#") is retired. */
@media screen and (max-width: 991px) {

  .mobile-nav-2 { display: none !important; }

  .desktop-nav-copy {
    display: flex !important;                 /* webflow.css hides it here */
    max-width: none !important;
    justify-content: space-between !important;
    height: var(--sp-nav-h) !important;
  }
  .desktop-nav-copy .container.w-container {
    width: 100% !important;                   /* webflow.css sets 50% */
    max-width: none !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding-right: 4px;
  }
  .desktop-nav-copy .w-nav-button {
    display: block !important;
    float: none !important;
    padding: 18px;
    line-height: 1;
  }

  /* Login / Register / Quote are display:none at this width -> empty fixed box */
  .div-block-4 { display: none !important; }

  /* THE PANEL. (0,3,0) + !important beats
     .w-nav[data-collapse="medium"] .w-nav-menu {display:none} */
  .desktop-nav-copy .nav-menu { display: none !important; }
  .desktop-nav-copy .nav-menu.nav-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: fixed !important;
    top: var(--sp-nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;               /* kills webflow.css 650px */
    max-height: calc(100vh - var(--sp-nav-h)) !important;
    max-height: calc(100dvh - var(--sp-nav-h)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.14) !important;
    padding: 4px 24px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    z-index: 1002 !important;                 /* above .div-block-4-logo (1001) */
  }
  /* Option A "clean list" (Jason 2026-10-27): even, left-aligned rows; Products opens a grouped text list; the
     panel ends with language, Login / Register and Contact Us. */
  .desktop-nav-copy .nav-menu.nav-open { padding: 0 20px !important; }
  .desktop-nav-copy .nav-menu.nav-open > a,
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 54px;
    margin: 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    text-align: left !important;
    background: none !important;
    border-bottom: 1px solid #eeece8 !important;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown-toggle .text-block {
    font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; padding: 0 !important; color: #1a1a1a !important;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-icon-dropdown-toggle { display: none !important; }
  .desktop-nav-copy .nav-menu.nav-open .sp-nav-grid { display: none !important; }
  .desktop-nav-copy .nav-menu.nav-open .sp-mgroups { display: flex; flex-direction: column; gap: 18px; width: 100%; }
  .sp-mgroup-h { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6b6862; }
  .sp-mgroup-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .sp-mgroup-l a { display: flex; align-items: center; min-height: 40px; font-size: 14px; line-height: 1.3; color: #333; text-decoration: none; }
  .sp-mgroup-l a:active, .sp-mfoot-acct a:active { color: #000; }
  .desktop-nav-copy .nav-menu.nav-open .sp-mfoot {
    display: flex; flex-direction: column; gap: 14px;
    margin: 0 -20px; padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    background: #f7f6f3;
  }
  .sp-mfoot-acct { display: flex; gap: 22px; }
  .sp-mfoot-acct a { padding: 8px 0; font-size: 14px; color: #555; text-decoration: none; }
  .sp-mfoot-cta {
    display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 100px;
    background: #1a1a1a; color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none;
  }
  /* the menu button: plain icon that becomes an X (Webflow's grey open box and icon font removed) */
  .desktop-nav-copy .w-nav-button, .desktop-nav-copy .w-nav-button.w--open {
    background: transparent !important; color: #1a1a1a !important; padding: 13px !important;
  }
  .desktop-nav-copy .w-nav-button .w-icon-nav-menu { display: none !important; }
  .desktop-nav-copy .w-nav-button .sp-burger-o { display: block; width: 22px; height: 22px; }
  .desktop-nav-copy .w-nav-button.w--open .sp-burger-o { display: none; }
  .desktop-nav-copy .w-nav-button.w--open .sp-burger-x { display: block; width: 22px; height: 22px; }
  /* the page behind the open panel is dimmed; a tap on it closes the menu (nav.js) */
  html.sp-nav-locked body::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--sp-nav-h);
    background: rgba(20, 20, 20, .45); z-index: 990;
  }

  /* Company / Products become in-flow accordions */
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown {
    display: block !important;
    position: static !important;
    width: 100%;
    margin: 0;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 2px !important;
    font-size: 15px;
    border-bottom: 1px solid #eee;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown-toggle::after {
    content: "";
    width: 8px; height: 8px;
    margin-right: 6px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown.is-expanded .w-dropdown-toggle::after {
    transform: rotate(-135deg);
  }
  .desktop-nav-copy .nav-menu.nav-open .mega-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column !important;
    padding: 8px 0 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown.is-expanded .mega-menu {
    display: flex !important;
  }
  .desktop-nav-copy .nav-menu.nav-open .mega-menu .link {
    display: block;
    padding: 11px 0 11px 14px;
    font-size: 14px;
  }
  .desktop-nav-copy .nav-menu.nav-open .w-dropdown.is-expanded .mega-menu { padding: 14px 2px 18px !important; border-bottom: 1px solid #eeece8 !important; }

  /* scroll lock + keep the fixed chat bar out of the panel */
  html.sp-nav-locked, body.sp-nav-locked { overflow: hidden !important; }
  body.sp-nav-locked .sp-chat-bar { display: none !important; }
}

/* wider phones held sideways and tablets: the panel is a sheet on the right instead of the full width */
@media screen and (min-width: 600px) and (max-width: 991px) {
  .desktop-nav-copy .nav-menu.nav-open { left: auto !important; width: min(420px, 100%) !important; }
}

/* Quote page hidden for now (Jason 2026-10-26 "hide ... Quote for now"): the menu's Quote button and link.
   Delete this rule to bring it back. The page itself still works at /quote.html. */
a.w-button[href="/quote.html"],a.w-nav-link[href="/quote.html"],a.w-button[href="/quote"],a.w-nav-link[href="/quote"]{display:none!important}   /* Netlify serves the link as /quote */

/* Bottom bar on phones (2026-10-26): the chat pill's 260px minimum plus Contact Us is wider than a phone, so both ends
   ran off the screen (English too; longer in other languages). On narrow screens the pill shrinks to fit instead. */
@media screen and (max-width: 479px) {
  .sp-chat-bar { padding: 10px 12px !important; gap: 8px !important; }
  .sp-chat-pill { min-width: 0 !important; padding: 10px 14px !important; overflow: hidden; }
  .sp-chat-pill .sp-chat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-schedule-btn { padding: 11px 16px !important; flex: none; }
}

/* "Request a sample" hidden everywhere for now (Jason 2026-10-27): the marked links/buttons (data-sample-req: home,
   company, news) and the pattern viewer's "Request a sample with this pattern". Delete this rule to bring them back. */
[data-sample-req], .pl-req { display: none !important; }

/* Products menu hover = option A (Jason 2026-10-27, "A please"): a soft emboss on the picture only. The picture rises 3 px
   with a soft shadow under it; no ring around the card and the name stays still. Replaces the blind emboss on the whole
   card that every page carries in its own menu <style> (2026-10-20). Keyboard focus keeps the outline from section 2. */
.sp-nav-card, .sp-nav-card:hover, .sp-nav-card:focus-visible { transform: none !important; box-shadow: none !important; }
.sp-nav-card { overflow: visible !important; border-radius: 0 !important; }   /* the old card clipped the raised picture's top edge */
.sp-nav-card::before, .sp-nav-card::after { display: none !important; }
.sp-nav-card-media { transition: transform .25s ease-out, box-shadow .25s ease-out; }
@media (hover: hover) {
  .sp-nav-card:hover .sp-nav-card-media {
    transform: translateY(-3px);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.8), inset -1px -1px 0 rgba(72,62,52,.07), 0 12px 20px -14px rgba(72,62,52,.5);
  }
}
.sp-nav-card:focus-visible .sp-nav-card-media {
  transform: translateY(-3px);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.8), inset -1px -1px 0 rgba(72,62,52,.07), 0 12px 20px -14px rgba(72,62,52,.5);
}
@media (prefers-reduced-motion: reduce) { .sp-nav-card-media { transition: none; } }