/* Component: MobileNav ----------------------------------------------------- */
@layer components {
  .tp-mobile-nav {
    display: none;
    overflow: hidden;
    background: var(--tp-color-drawer-bg);
    border-bottom: 1px solid transparent;
    max-height: 0;
    opacity: 0;
    transition:
      max-height var(--tp-dur-drawer) ease,
      opacity 0.25s ease,
      border-color var(--tp-dur-drawer) ease;
  }

  .tp-mobile-nav.is-open {
    max-height: 640px;
    opacity: 1;
    border-bottom-color: var(--tp-color-line-drawer);
  }

  .tp-mobile-nav__link {
    display: block;
    padding: 15px 18px;
    border-bottom: var(--tp-border-soft);
    font-size: var(--tp-size-nav-mobile);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-text);
  }

  .tp-mobile-nav__link.is-active {
    color: var(--tp-color-ink);
  }

  .tp-mobile-nav__sublink {
    display: block;
    padding: 9px 18px 9px 32px;
    font-size: var(--tp-size-nav-mobile);
    font-style: italic;
    color: var(--tp-color-text-body);
  }

  .tp-mobile-nav__sublink--emphasis {
    color: var(--tp-color-ink);
  }

  .tp-mobile-nav__nav > :last-child {
    border-bottom: 0;
  }

  /* ---- Expanded mode (Salon, LOCKED values) ---------------------------- */
  .tp-mobile-nav--expanded .tp-mobile-nav__link--parent {
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .tp-mobile-nav--expanded .tp-mobile-nav__sublink--last {
    padding-bottom: 15px;
    border-bottom: var(--tp-border-soft);
  }

  /* ---- Accordion mode (default / Collection) --------------------------- */
  .tp-mobile-nav__row {
    display: flex;
    align-items: stretch;
    border-bottom: var(--tp-border-soft);
  }

  .tp-mobile-nav__row .tp-mobile-nav__link {
    flex: 1 1 auto;
    border-bottom: 0;
  }

  .tp-mobile-nav__toggle {
    flex: none;
    width: var(--tp-tap-target);
    min-height: var(--tp-tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-left: var(--tp-border-soft);
    color: var(--tp-color-brass-text);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-meta);
    line-height: 1;
    cursor: pointer;
  }

  .tp-mobile-nav__toggle-glyph {
    display: block;
    transition: transform var(--tp-dur-fast) ease;
  }

  .tp-mobile-nav__toggle[aria-expanded="true"] .tp-mobile-nav__toggle-glyph {
    transform: rotate(45deg);
  }

  .tp-mobile-nav__children {
    padding-bottom: 6px;
    border-bottom: var(--tp-border-soft);
  }

  .tp-mobile-nav__children[hidden] {
    display: none;
  }

  @media (max-width: 699px) {
    .tp-mobile-nav {
      display: block;
    }
  }

  /* Nested level: Reflections beneath On Procuring, one indent further. */
  .tp-mobile-nav__sublink--nested {
    padding-left: 46px;
    font-size: var(--tp-size-label-l);
  }
}

@layer components {
  /* The drawer is a sibling of .tp-header, not a child of it, and was
     position: static. The header is sticky, so it floats to the top of the
     viewport while the drawer stayed at its document position (y=49). Opened
     from halfway down a page it landed ~2000px above the screen and the user
     had to scroll back to the top to see it.

     No transformed ancestor was involved -- the containing block was never the
     problem; the drawer simply was not viewport-positioned. It is now a true
     fixed overlay, pinned directly under the visible header. --tp-mobile-nav-top
     is written by MobileNav.js from the header's measured bottom edge, so the
     drawer sits flush beneath it whatever the header's height is on that
     template (49px on the narrative pages, 57px on Collection). */
  @media (max-width: 699px) {
    .tp-mobile-nav {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--tp-mobile-nav-top, 49px);
      /* clears the header (60) and its dropdown (900) */
      z-index: 1000;
    }

    .tp-mobile-nav.is-open {
      /* dvh, so the drawer is not cut off by mobile browser chrome */
      max-height: calc(100dvh - var(--tp-mobile-nav-top, 49px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
  }

  /* The page behind the drawer must not scroll under it.

     Deliberately NOT overflow: hidden -- that changes the scrolling box and
     stops the sticky header sticking, so the header scrolled away while the
     drawer stayed pinned. touch-action blocks the gesture without touching the
     scroll container, so sticky keeps working and the scroll position is kept.
     The drawer itself opts back in so a long menu can still be scrolled. */
  html.tp-mobile-nav-locked {
    touch-action: none;
    overscroll-behavior: none;
  }

  html.tp-mobile-nav-locked .tp-mobile-nav {
    touch-action: pan-y;
  }
}