/* Mobile menu (template-parts/mobile-menu.php, assets/js/mobile-menu.js).
   Below 881 px the header navigation is hidden (style.css); this adds a toggle and a panel.
   Without JS the toggle stays hidden; the <noscript> rule in header.php shows the header navigation instead. */

.pdl-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--obsidian);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdl-menu-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.pdl-menu-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.pdl-menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdl-menu-toggle__bars span:nth-child(1) { top: 0; }
.pdl-menu-toggle__bars span:nth-child(2) { top: 6px; }
.pdl-menu-toggle__bars span:nth-child(3) { top: 12px; }
.pdl-menu-toggle[aria-expanded="true"] .pdl-menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.pdl-menu-toggle[aria-expanded="true"] .pdl-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.pdl-menu-toggle[aria-expanded="true"] .pdl-menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Panel: drops down from under the sticky header. */
.pdl-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 24px 40px -16px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdl-mobile-menu[hidden] { display: none; }
.pdl-mobile-menu.is-open {
  opacity: 1;
  transform: none;
}
.pdl-mobile-menu__inner {
  padding-top: 8px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.pdl-mobile-menu__nav,
.pdl-mobile-menu__guides {
  display: flex;
  flex-direction: column;
}
.pdl-mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--obsidian);
  border-bottom: 1px solid var(--slate-100);
}
.pdl-mobile-menu__label {
  margin: 22px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-700);
}
.pdl-mobile-menu__guide {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-600);
}
.pdl-mobile-menu__guide[aria-current="page"] { color: var(--emerald-700); }
.pdl-mobile-menu__link:hover,
.pdl-mobile-menu__guide:hover { color: var(--emerald-700); }
.pdl-mobile-menu__cta {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 20px;
  font-size: 15px;
}

/* Dims the page behind the open panel; sits under the sticky header (z-index 100). */
.pdl-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(9, 13, 22, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pdl-menu-backdrop[hidden] { display: none; }
.pdl-menu-backdrop.is-open { opacity: 1; }

html.pdl-menu-locked { overflow: hidden; }

/* The panel has its own WhatsApp button; the bottom bar would cover its end on short screens. */
html.pdl-menu-locked .mobile-sticky-bar {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 880px) {
  .site-header.pdl-menu-ready .pdl-menu-toggle { display: inline-flex; }
  .site-header.pdl-menu-ready .header-actions { gap: 8px; }
}
/* With the toggle in the row, "• Rawai" no longer fits next to the logo on the narrowest phones. */
@media (max-width: 370px) {
  .site-header.pdl-menu-ready .brand-sub__place { display: none; }
}
/* At 320 px the brand name wraps to two lines; with the subtitle the block is taller than the 64 px header and gets clipped. */
@media (max-width: 340px) {
  .site-header.pdl-menu-ready .brand-sub { display: none; }
}
@media (min-width: 881px) {
  .pdl-mobile-menu,
  .pdl-menu-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pdl-menu-toggle__bars span,
  .pdl-mobile-menu,
  .pdl-menu-backdrop { transition: none; }
}