/**
 * Universal Plywood — Figma overlay menu hierarchy
 * Version 1.1.60
 *
 * Final source of truth for the overlay accordion behaviour.  The Products
 * submenu exposes only the three primary product categories and all top-level
 * submenus animate smoothly instead of snapping between display:none/grid.
 */

/* The first-level submenu remains in layout so max-height can animate. */
html body .up-menu-list > li.menu-item-has-children > .sub-menu {
  display: grid !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition:
    max-height .34s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease,
    transform .34s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .34s !important;
  will-change: max-height, opacity, transform;
}

/* Only an explicit open state reveals a submenu. Hover changes colour only. */
html body .up-menu-list > li.menu-item-has-children.is-open > .sub-menu {
  max-height: 460px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}

/* Products = the three Figma categories, one vertical list — no second level. */
html body .up-menu-item--products > .sub-menu {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 22px !important;
  padding: 2px 0 0 !important;
}
html body .up-menu-item--products > .sub-menu > li {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .up-menu-item--products > .sub-menu > li > a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #9d988e !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: color .2s ease !important;
}
html body .up-menu-item--products > .sub-menu > li:first-child > a,
html body .up-menu-item--products > .sub-menu > li > a:hover,
html body .up-menu-item--products > .sub-menu > li > a:focus-visible,
html body .up-menu-item--products > .sub-menu > li.current-menu-item > a,
html body .up-menu-item--products > .sub-menu > li > a.is-current {
  color: var(--up-green, #62A744) !important;
}

/* The Products menu must never expose a second nested menu in the overlay. */
html body .up-menu-item--products > .sub-menu > li > .sub-menu {
  display: none !important;
}


/* Brands and Projects use exactly the same submenu typography scale as the
   three Products category links. This intentionally overrides older generic
   overlay-menu rules so all secondary menu labels stay visually consistent. */
html body .up-menu-item--brands > .sub-menu,
html body .up-menu-item--projects > .sub-menu {
  align-content: start !important;
}
html body .up-menu-item--brands > .sub-menu > li > a,
html body .up-menu-item--projects > .sub-menu > li > a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #9d988e !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: color .2s ease !important;
}
html body .up-menu-item--brands > .sub-menu > li > a:hover,
html body .up-menu-item--brands > .sub-menu > li > a:focus-visible,
html body .up-menu-item--brands > .sub-menu > li.current-menu-item > a,
html body .up-menu-item--brands > .sub-menu > li > a.is-current,
html body .up-menu-item--projects > .sub-menu > li > a:hover,
html body .up-menu-item--projects > .sub-menu > li > a:focus-visible,
html body .up-menu-item--projects > .sub-menu > li.current-menu-item > a,
html body .up-menu-item--projects > .sub-menu > li > a.is-current {
  color: var(--up-green, #62A744) !important;
}

/* Figma-style + to − transition. The button keeps a generous hit area while
   its visible strokes remain light and compact. */
html body .up-menu-sub-toggle {
  position: relative !important;
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  color: #2D2A26 !important;
  transition: color .2s ease !important;
}
html body .up-menu-sub-toggle > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
html body .up-menu-sub-toggle::before,
html body .up-menu-sub-toggle::after {
  content: '' !important;
  position: absolute !important;
  left: 7px !important;
  top: 13px !important;
  width: 18px !important;
  height: 1.5px !important;
  background: currentColor !important;
  transform-origin: center !important;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease !important;
}
html body .up-menu-sub-toggle::after {
  transform: rotate(90deg) !important;
}
html body .up-menu-list > li.is-open > .up-menu-sub-toggle,
html body .up-menu-list > li > .up-menu-sub-toggle:hover,
html body .up-menu-list > li > .up-menu-sub-toggle:focus-visible {
  color: var(--up-green, #62A744) !important;
}
html body .up-menu-list > li.is-open > .up-menu-sub-toggle::after {
  transform: rotate(90deg) scaleX(0) !important;
  opacity: 0 !important;
}

/* Do not let legacy current/hover rules reveal the submenu without is-open. */
html body .up-menu-list > li.menu-item-has-children:not(.is-open) > .sub-menu,
html body .up-menu-list > li.menu-item-has-children.current-menu-item:not(.is-open) > .sub-menu,
html body .up-menu-list > li.menu-item-has-children.current-menu-parent:not(.is-open) > .sub-menu,
html body .up-menu-list > li.menu-item-has-children.current-menu-ancestor:not(.is-open) > .sub-menu,
html body .up-menu-list > li.menu-item-has-children:hover:not(.is-open) > .sub-menu {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
}

@media (min-width: 1201px) {
  html body .up-menu-item--products > .sub-menu > li > a,
  html body .up-menu-item--brands > .sub-menu > li > a,
html body .up-menu-item--projects > .sub-menu > li > a {
    font-size: 14px !important;
    line-height: 18px !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  html body .up-menu-item--products > .sub-menu {
    gap: 16px !important;
  }
  html body .up-menu-item--products > .sub-menu > li > a,
  html body .up-menu-item--brands > .sub-menu > li > a,
html body .up-menu-item--projects > .sub-menu > li > a {
    font-size: 12px !important;
    line-height: 16px !important;
  }
  html body .up-menu-sub-toggle {
    width: 34px !important;
    height: 34px !important;
  }
  html body .up-menu-sub-toggle::before,
  html body .up-menu-sub-toggle::after {
    left: 5px !important;
    top: 11px !important;
    width: 16px !important;
  }
}

@media (max-width: 767px) {
  html body .up-menu-list > li.menu-item-has-children > .sub-menu {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  html body .up-menu-item--products > .sub-menu {
    gap: 13px !important;
  }
  html body .up-menu-item--products > .sub-menu > li > a,
  html body .up-menu-item--brands > .sub-menu > li > a,
html body .up-menu-item--projects > .sub-menu > li > a {
    font-size: 11px !important;
    line-height: 15px !important;
  }
  html body .up-menu-sub-toggle {
    width: 32px !important;
    height: 32px !important;
  }
  html body .up-menu-sub-toggle::before,
  html body .up-menu-sub-toggle::after {
    left: 4px !important;
    top: 10px !important;
    width: 15px !important;
  }
}


/* v1.1.57 — exact Figma desktop top-level menu typography.
   Figma spec: Inter Regular / 32px / 100% line-height / 0 tracking.
   +/- remains a separate control component and is intentionally not affected. */
@media (min-width: 1201px) {
  html body .up-menu-list > li > a,
  html body .up-menu-list > li.menu-item-has-children > a {
    font-family: Inter, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 32px !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .up-menu-list > li.menu-item-has-children > .sub-menu,
  html body .up-menu-sub-toggle::before,
  html body .up-menu-sub-toggle::after {
    transition-duration: .01ms !important;
  }
}

/* v1.1.85 — exact desktop Figma menu frame geometry.
   Reference frame: 457px × 368px, 5 × 48px rows with 32px vertical gap.
   Main label: Inter 400 / 32px / 32px / 0 tracking.
   Secondary labels: Inter 400 / 18px / 22px.
   This is intentionally desktop-only; tablet/mobile retain their responsive rules. */
@media (min-width: 1201px) {
  html body .up-menu-nav {
    width: min(1180px, 100%) !important;
  }

  html body .up-menu-list {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 457px !important;
    grid-auto-rows: 48px !important;
    gap: 32px !important;
    width: 100% !important;
    height: 368px !important;
    min-height: 368px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .up-menu-list > li,
  html body .up-menu-list > li.menu-item-has-children {
    position: static !important;
    display: grid !important;
    grid-template-columns: 48px 64px 345px !important;
    grid-template-rows: 48px !important;
    align-items: center !important;
    width: 457px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    row-gap: 0 !important;
  }

  /* Legacy generated +/- is disabled; the real button remains the only control. */
  html body .up-menu-list > li::before {
    content: none !important;
    display: none !important;
  }

  html body .up-menu-sub-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body .up-menu-sub-toggle::before,
  html body .up-menu-sub-toggle::after {
    left: 8px !important;
    top: 23px !important;
    width: 22px !important;
    height: 1.5px !important;
  }

  html body .up-menu-list > li > a,
  html body .up-menu-list > li.menu-item-has-children > a {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 345px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
  }

  /* In the Figma the expanded secondary column begins at the top of the
     457px × 368px menu frame, not alongside the Products row itself. */
  html body .up-menu-list > li.menu-item-has-children > .sub-menu {
    position: absolute !important;
    left: 489px !important; /* 457px main frame + 32px column gap */
    top: 13px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: min(390px, calc(100% - 489px)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 32px !important;
    align-content: start !important;
    z-index: 2 !important;
  }

  html body .up-menu-item--products > .sub-menu,
  html body .up-menu-item--brands > .sub-menu,
  html body .up-menu-item--projects > .sub-menu {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 0 !important;
  }

  html body .up-menu-item--products > .sub-menu > li,
  html body .up-menu-item--brands > .sub-menu > li,
  html body .up-menu-item--projects > .sub-menu > li {
    display: block !important;
    min-height: 22px !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .up-menu-item--products > .sub-menu > li > a,
  html body .up-menu-item--brands > .sub-menu > li > a,
  html body .up-menu-item--projects > .sub-menu > li > a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
  }

  /* Products stays strictly one level deep in the overlay. */
  html body .up-menu-item--products > .sub-menu > li > .sub-menu {
    display: none !important;
  }

  /* Smooth reveal without shifting the 457px primary frame. */
  html body .up-menu-list > li.menu-item-has-children > .sub-menu {
    transform: translateY(-6px) !important;
    transition:
      max-height .46s cubic-bezier(.22,1,.36,1),
      opacity .30s ease,
      transform .46s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .46s !important;
  }
  html body .up-menu-list > li.menu-item-has-children.is-open > .sub-menu {
    transform: translateY(0) !important;
    transition-delay: 0s !important;
  }
}

/* v1.1.86 — Figma row-axis correction.
   Older theme CSS forced non-expandable rows (Our Company / Contact) back into
   grid column 2, while expandable rows used column 3. This caused the 64px
   horizontal jump visible in the live overlay. All five rows now share the
   same 48px marker + 64px spacer + 345px label geometry from the Figma frame. */
@media (min-width: 1201px) {
  html body .up-menu-list > li:not(.menu-item-has-children) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px 64px 345px !important;
    grid-template-rows: 48px !important;
    align-items: center !important;
    width: 457px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Override the older, more-specific rule:
     .up-menu-list>li:not(.menu-item-has-children)>a { grid-column:2!important; } */
  html body .up-menu-list > li:not(.menu-item-has-children) > a {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 345px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
  }

  /* Figma shows the same plus marker column on all five rows. For static links
     it is decorative, while expandable rows keep the real interactive button. */
  html body .up-menu-list > li:not(.menu-item-has-children)::before,
  html body .up-menu-list > li:not(.menu-item-has-children)::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    top: 23px !important;
    width: 22px !important;
    height: 1.5px !important;
    background: #2D2A26 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  html body .up-menu-list > li:not(.menu-item-has-children)::after {
    transform: rotate(90deg) !important;
    transform-origin: center !important;
  }
}