/* Lattouf Co. — menu motion and the mobile navbar.

   Webflow's interaction opened the menu by animating the panel's width from
   5vw to 80vw on a linear curve. Width is a layout property, so every frame
   re-flowed the whole panel and the open felt stepped. Here the panel keeps its
   full width at all times and slides on transform instead, which the browser
   composites without layout. The Webflow interaction still runs (it drives the
   overlay fade and the hamburger arrow); the !important width simply outranks
   the inline width it writes.

   State comes from js/nav.js, which mirrors .nav_links.is-opened onto
   <html class="lc-nav-open">. */

:root {
  --lc-menu-w: 80vw;
  --lc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lc-menu-open: 760ms;
  --lc-menu-close: 520ms;
  --lc-bar-h: 78px;
}

@media screen and (max-width: 991px) {
  :root {
    --lc-menu-w: 100vw;
  }
}

/* --------------------------------------------------------------- the panel */
.nav_links_wrapper {
  width: var(--lc-menu-w) !important;
  max-width: none;
  transform: translate3d(calc(var(--lc-menu-w) - var(--navbar--width)), 0, 0);
  transition: transform var(--lc-menu-close) var(--lc-ease-in-out);
  will-change: transform;
}

.lc-nav-open .nav_links_wrapper {
  transform: translate3d(0, 0, 0);
  transition-duration: var(--lc-menu-open);
  transition-timing-function: var(--lc-ease-out);
}

/* the dimmed page behind the menu doubles as a close target */
.nav_background {
  cursor: pointer;
}

/* ---------------------------------------------------- staggered menu content
   Items trail the panel in, so the eye follows the slide rather than meeting a
   finished block. Closing drops the delays and everything leaves together. */
.nav_label,
.nav_link-menu,
.nav_footer {
  opacity: 0;
  transform: translate3d(32px, 0, 0);
  transition: opacity 320ms ease, transform 320ms var(--lc-ease-in-out);
}

.lc-nav-open .nav_label,
.lc-nav-open .nav_link-menu,
.lc-nav-open .nav_footer {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 560ms ease, transform 820ms var(--lc-ease-out);
}

.lc-nav-open .nav_label {
  transition-delay: 140ms;
}

.lc-nav-open .nav_link-menu:nth-of-type(1) {
  transition-delay: 200ms;
}

.lc-nav-open .nav_link-menu:nth-of-type(2) {
  transition-delay: 260ms;
}

.lc-nav-open .nav_link-menu:nth-of-type(3) {
  transition-delay: 320ms;
}

.lc-nav-open .nav_footer {
  transition-delay: 400ms;
}

/* the theme's display:inline-flex outranks the hidden attribute, so an empty
   cart still showed a "0" badge */
.nav_cart_badge[hidden] {
  display: none;
}

/* ------------------------------------------------------------ mobile toggle
   Only rendered under 768px, where it replaces the vertical side rail. */
.lc-nav-toggle {
  display: none;
}

@media screen and (max-width: 767px) {
  /* the side rail goes; the page gets its full width back */
  body {
    padding-right: 0;
  }

  .nav_links {
    display: none;
  }

  .nav_links_wrapper {
    transform: translate3d(100%, 0, 0);
  }

  .nav_content,
  .nav_container {
    width: 100vw;
  }

  .nav_column {
    padding-top: calc(var(--lc-bar-h) + 28px);
  }

  .nav_label {
    margin-top: 0;
    margin-bottom: 28px;
  }

  .nav_link-menu {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: clamp(34px, 11vw, 44px);
    border-bottom: 1px solid #10161c14;
    align-self: stretch;
  }

  .nav_footer {
    width: 100%;
    gap: 24px;
    justify-content: flex-start;
  }

  .nav_link_column {
    min-width: 40%;
  }

  /* one solid bar across the top: logo, region, cart, menu */
  .nav-secondary {
    z-index: 110;
    margin-right: 0;
    padding-right: var(--lc-nav-inset);
    background-color: #f0f0f0e6;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 #10161c12;
    pointer-events: auto;
    transition: background-color 400ms ease, box-shadow 400ms ease;
  }

  .lc-nav-open .nav-secondary {
    background-color: #fbfbfb;
    box-shadow: 0 1px 0 #10161c00;
  }

  /* the bar is always light now, so the white "negative" variants would vanish */
  .nav-secondary #region-switch.is-negative,
  .nav-secondary .nav_cart.is-negative {
    color: var(--color--accent);
  }

  .nav-secondary #region-switch.is-negative:hover,
  .nav-secondary .nav_cart.is-negative:hover {
    color: var(--color--neutral-light);
    background-color: var(--color--accent);
  }

  /* "Contact" lives in the menu on phones; the bar keeps only what is used often */
  .nav-secondary .button.is-fixed {
    display: none;
  }

  .nav-secondary .nav_cart {
    height: 36px;
    padding: 0 12px;
  }

  .lc-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    margin-left: 8px;
    padding: 0 14px 0 13px;
    font-family: var(--font--tertiary), sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color--neutral-light);
    background-color: var(--color--accent);
    border: 1px solid var(--color--accent);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms ease, background-color 300ms ease,
      color 300ms ease;
  }

  .lc-nav-toggle:active {
    transform: scale(0.96);
  }

  .lc-nav-toggle:focus-visible {
    outline: 2px solid var(--color--accent);
    outline-offset: 3px;
  }

  .lc-nav-open .lc-nav-toggle {
    color: var(--color--accent);
    background-color: transparent;
  }

  .lc-nav-toggle_box {
    position: relative;
    width: 16px;
    height: 8px;
  }

  .lc-nav-toggle_box span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 460ms var(--lc-ease-out);
  }

  .lc-nav-toggle_box span:first-child {
    top: 0;
  }

  .lc-nav-toggle_box span:last-child {
    bottom: 0;
  }

  .lc-nav-open .lc-nav-toggle_box span:first-child {
    transform: translate3d(0, 3.25px, 0) rotate(45deg);
  }

  .lc-nav-open .lc-nav-toggle_box span:last-child {
    transform: translate3d(0, -3.25px, 0) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav_links_wrapper,
  .nav_label,
  .nav_link-menu,
  .nav_footer,
  .lc-nav-toggle_box span {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

@media screen and (max-width: 767px) {
  /* the trailing dash sits at the row's end so each link reads as a full-width row */
  .nav_link-menu .nav_line_mask-01 {
    margin-left: auto;
  }
}

/* --------------------------------------------- menu: contact column
   This column used to show a photo on link hover. It now carries the
   current region's contact details (filled in by js/region.js). */
.lc-nav-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 50px;
  padding: 32px 0 0 32px;
  border-left: 1px solid #10161c14;
  font-family: var(--font--primary), sans-serif;
  opacity: 0;
  transform: translate3d(32px, 0, 0);
  transition: opacity 320ms ease, transform 320ms var(--lc-ease-in-out);
}

.lc-nav-open .lc-nav-contact {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 560ms ease 360ms, transform 820ms var(--lc-ease-out) 360ms;
}

.lc-nav-contact_label {
  margin: 0;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color--text-body);
}

.lc-nav-contact_address {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #10161c;
}

.lc-nav-contact_tel {
  font-family: var(--font--secondary), sans-serif;
  font-size: 26px;
  color: var(--color--accent);
  text-decoration: none;
}

.lc-nav-contact_cta {
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 20px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color--neutral-light);
  background-color: var(--color--accent);
  border-radius: 999px;
  transition: transform 160ms ease, background-color 300ms ease;
}

.lc-nav-contact_cta:hover {
  background-color: #222270;
}

.lc-nav-contact_cta:active {
  transform: scale(0.97);
}

/* ------------------------------------------------------- bar on page load
   On the homepage, Webflow's intro (page-start interaction) sets the bar to
   opacity 0 and only restores it in its final step, after the 3D scene and the
   1950 counter have played. On a slow load the bar stayed hidden until the
   visitor scrolled. The bar is now always shown, and its controls fade in
   on their own shortly after load. "backwards" fill keeps the animation from
   holding a transform afterwards, so hover effects are untouched. */
.nav-secondary {
  opacity: 1 !important;
}

.nav-secondary > * {
  animation: lc-bar-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms backwards;
}

@keyframes lc-bar-in {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-secondary > * {
    animation: none;
  }
}