/* ==========================================================================
   Mobile menu overlay (≤ 991px): same language as the rest of the site:
   paper header band + checker edge, ink "blackboard" with big hand-cut links,
   dashed dividers, teal accents and the chalk strip along the bottom.
   The overlay itself (.navbar_links) is opened/closed by the template's
   Webflow interaction on the hamburger; this file only styles it.
   ========================================================================== */

.nav-m_extra { display: none; }

/* no rubber-band / pull-to-refresh bounce at the ends of the page, no sideways drag */
html, body { overscroll-behavior: none; }
body { overflow-x: clip; }
/* while the mobile menu is open the page behind it must not scroll */
/* (on the root only: locking <body> too would turn it into the scroll box and un-stick the header) */
html.nav-open { overflow: hidden; }

@media screen and (max-width: 991px) {
  /* the header follows the page while scrolling */
  .navbars {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--paper);
    transition: box-shadow 0.2s ease;
  }
  .navbars.is-stuck { box-shadow: 0 2px 0 var(--ink); }

  /* open state: the template only slides the two lines together; turn them into an X */
  .navbar_hamburger-line { transition: transform 0.25s ease; }
  html.nav-open .navbar_hamburger-line._1 { transform: translate3d(0, 4px, 0) rotate(45deg) !important; }
  html.nav-open .navbar_hamburger-line._2 { transform: translate3d(0, -4px, 0) rotate(-45deg) !important; }

  .navbar_links {
    --nav-h: 5.5rem;
    background-color: var(--ink);
    justify-content: flex-start;
    align-items: stretch;
    grid-row-gap: 0;
    --navm-pad: max(1.75rem, calc((100vw - 34rem) / 2));   /* keeps the list a comfortable width on tablets */
    padding: calc(var(--nav-h) + 1.5rem + 1.75rem) var(--navm-pad) 9.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    counter-reset: navm;
  }

  /* paper band behind the logo / close icon, ending in the checker edge (like header → hero) */
  .navbar_links::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--nav-h) + 1.5rem);
    background:
      url(../img/ui/checker-black.svg?v=17a81cab55) 0 100% / 1.5rem 1.5rem repeat-x,
      linear-gradient(var(--paper), var(--paper));
    z-index: 2;
    pointer-events: none;
  }

  /* chalk strip pinned to the bottom, fading the list out underneath it */
  .navbar_links::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 8.5rem;
    background:
      url(../img/ui/chalk-strip.png?v=ad0a6068a4) 35% 100% / auto 7rem repeat-x,
      linear-gradient(to bottom, rgba(22, 21, 21, 0), var(--ink) 38%);
    z-index: 2;
    pointer-events: none;
  }

  .navbar_link {
    counter-increment: navm;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0 0.55rem;
    justify-content: flex-start;
    align-items: baseline;
    grid-column-gap: 0.9rem;
    color: #fff;
    font-size: clamp(2.5rem, 11.5vw, 4rem);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
    animation: navm-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .navbar_link:nth-child(1) { animation-delay: 0.04s; }
  .navbar_link:nth-child(2) { animation-delay: 0.09s; }
  .navbar_link:nth-child(3) { animation-delay: 0.14s; }
  .navbar_link:nth-child(4) { animation-delay: 0.19s; }
  .navbar_link:nth-child(5) { animation-delay: 0.24s; }

  /* hand-written index: 01, 02 … */
  .navbar_link::before {
    content: "0" counter(navm);
    flex: none;
    width: 1.9rem;
    font-family: var(--_typography---font-family--detail);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    text-transform: none;
    transform: rotate(-6deg) translateY(-0.55em);
  }
  .navbar_link::after {
    content: "";
    flex: none;
    width: 0.62rem; height: 0.62rem;
    margin-left: auto;
    margin-right: 0.4rem;
    border-top: 3px solid var(--brand);
    border-right: 3px solid var(--brand);
    transform: rotate(45deg) translateY(-0.5rem);
    opacity: 0.9;
  }
  .navbar_link .navbar_text { filter: url(#sl-rough-sm); }
  .navbar_link .navbar_line { display: none !important; }
  .navbar_link.w--current { color: var(--brand); }
  .navbar_link.w--current::after { border-color: #fff; }
  .navbar_link:active { color: var(--brand); }

  .nav-m_extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 1.1rem;
    margin-top: 1.9rem;
    animation: navm-in 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .nav-m_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.6rem 0.75rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0.3rem 0.3rem 0 #fff;
    color: var(--ink);
    font-family: var(--_typography---font-family--primary);
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
  }
  .nav-m_cta:active { transform: translate(0.2rem, 0.2rem); box-shadow: 0.1rem 0.1rem 0 #fff; }
  .nav-m_shops {
    display: inline-flex;
    align-items: center;
    grid-column-gap: 0.55rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-m_shops img { width: 0.8rem; height: auto; }
  .nav-m_social { display: flex; flex-wrap: wrap; grid-column-gap: 1.25rem; grid-row-gap: 0.4rem; }
  .nav-m_social a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    text-decoration: underline dashed rgba(255, 255, 255, 0.35);
    text-underline-offset: 0.3em;
  }
}

@media screen and (max-width: 479px) {
  .navbar_links { --nav-h: 5rem; --navm-pad: 1.25rem; }
}

/* landscape phones / very short screens: tighter list, smaller strip */
@media screen and (max-width: 991px) and (max-height: 720px) {
  .navbar_links { padding-top: calc(var(--nav-h) + 1.5rem + 1rem); padding-bottom: 5.5rem; }
  .navbar_links::after { height: 5rem; background-size: auto 4rem, auto; }
  .navbar_link { font-size: clamp(1.9rem, 6.2vh, 2.75rem); padding: 0.5rem 0 0.35rem; }
  .nav-m_extra { margin-top: 1.1rem; grid-row-gap: 0.8rem; }
  .nav-m_cta { font-size: 1.3rem; padding: 0.8rem 1.4rem 0.6rem; }
}

@keyframes navm-in {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar_link, .nav-m_extra { animation: none; }
}