/* =============================================================================
   MOBILE MENU — full-screen panel with SLIDE-OVER child panels.

   ⚠ Not an accordion. The source slides a child panel over the root list
   (proof in template-parts/mobile-menu.php). The accordion this replaced
   grew the panel to 1537px, which scrolled the close button off the top of
   the screen at y=-677 and left no way out of the menu.
   ============================================================================= */
.th-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* ⚠ The PANEL must not scroll — the bar lives in it and has to stay on
     screen. Scrolling belongs to .th-mobile__stage, below the bar. */
  overflow: hidden;
}
.th-mobile[hidden] { display: none; }

body.th-menu-open { overflow: hidden; }

/* magenta bar with the logo and close */
.th-mobile__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 72px;
  padding: 12px 56px;
  background: var(--th-btn-bg);
}
/* The mobile logo is a TRANSPARENT PNG, so tinting it white affects only the
   mark. Doing this to the opaque header logo produced a solid white block. */
.th-mobile__logo img { width: 128px; height: auto; display: block; filter: brightness(0) invert(1); }
.th-mobile__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #fff;
}

/* -----------------------------------------------------------------------
   The sliding stage: the root panel and one child panel per expandable row,
   stacked in the same box. Only the active one is on screen.
   ----------------------------------------------------------------------- */
.th-mobile__stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
.th-mobile__panel {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* A panel taller than the screen scrolls on its own, so the bar stays. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  transition: transform var(--th-speed, .25s) ease;
}
.th-mobile__panel[hidden] { display: none; }
.th-mobile__panel--root { transform: translateX(0); }
.th-mobile__panel--sub  { transform: translateX(100%); gap: 0; }
.th-mobile__panel--sub.is-active  { transform: translateX(0); }
.th-mobile__panel--root.is-pushed { transform: translateX(-100%); }

/* ⚠ Someone who has asked for reduced motion gets the same panels without
   the slide — the transition is decoration, the navigation is not. */
@media (prefers-reduced-motion: reduce) {
  .th-mobile__panel { transition: none; }
}

/* "‹ BACK" — the source's own child-panel heading. */
.th-mobile__back {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--th-border);
  background: none;
  font-family: var(--th-font);
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--th-heading);
  cursor: pointer;
}
.th-mobile__back-chev {
  width: 11px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* search */
.th-mobile__search { position: relative; display: flex; align-items: center; }
.th-mobile__search-icon {
  position: absolute;
  left: 14px;
  display: flex;
  color: var(--th-muted);
  pointer-events: none;
}
.th-mobile__search input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px 12px 46px;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
}

/* the two CTAs */
.th-mobile__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.th-mobile__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 10px;
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-bold);
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}
.th-mobile__cta--dark  { background: #000; color: #fff; }
.th-mobile__cta--brand { background: var(--th-btn-bg); color: #fff; }
.th-mobile__cta:hover { text-decoration: none; opacity: .9; }

/* nav rows */
.th-mobile__nav { display: flex; flex-direction: column; }

/* A row is a LABEL LINK plus a CHEVRON BUTTON — two separate targets,
   because the source navigates on the label and opens the child on the
   chevron. */
.th-mobile__row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--th-border);
}
/* ⚠ 50px rows, not 64. The source's rows measure h=50 with a 51px pitch
   (tools/_mmprobe2.mjs). 18px of padding on a ~28px line box gives 64, which
   compounded down the list and pushed every row out of place. */
.th-mobile__rowlink {
  flex: 1 1 auto;
  padding: 11px 2px;
  line-height: 1.4;
  font-size: 2rem;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  text-decoration: none;
}
.th-mobile__rowlink:hover { text-decoration: none; color: var(--th-btn-bg); }

/* ⚠ 44px of height so the chevron is a real thumb target. The arrow itself
   is 10px; tapping a 10px box on a phone is a miss. */
.th-mobile__chev {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--th-heading);
  cursor: pointer;
}
.th-mobile__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.th-mobile__sub { list-style: none; margin: 0; padding: 0; display: block; }
.th-mobile__sub li { border-bottom: 1px solid var(--th-border); }
.th-mobile__sub a {
  display: block;
  padding: 11px 2px;
  line-height: 1.4;
  font-size: 2rem;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
}
.th-mobile__sub a:hover { text-decoration: none; color: var(--th-btn-bg); }

.th-mobile__flat {
  display: block;
  padding: 11px 2px;
  line-height: 1.4;
  border-bottom: 1px solid var(--th-border);
  font-size: 2rem;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
}
.th-mobile__flat:hover { text-decoration: none; color: var(--th-btn-bg); }

.th-mobile__login {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 2px 32px;
  font-size: var(--th-fs-base);
  color: var(--th-text);
}

/* The panel is mobile-only; the desktop nav takes over above the breakpoint. */
@media (min-width: 992px) {
  .th-mobile { display: none; }
}