/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/* ─── Mobile menu ─────────────────────────────────────────────────────────────
   Trigger button (in the header) + fullscreen overlay. On Next the overlay
   is conditionally rendered by MobileMenuTrigger.tsx; on WP it's permanently
   present in header.php and toggled by the [hidden] attribute. Both rely on
   the same class names and CSS — only the show/hide mechanism differs.

   Both renderings are display:none at ≥768px regardless of state, so the
   menu only ever appears on mobile/tablet viewports. ─────────────────── */

.mobile-menu__trigger,
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 100ms ease;
}
.mobile-menu__trigger:hover,
.mobile-menu__close:hover {
  color: var(--color-text-primary);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.mobile-menu[hidden] { display: none; }
@media (min-width: 768px) {
  /* Desktop never shows the overlay, even if WP markup keeps it in the tree
     or React state somehow opened it. */
  .mobile-menu { display: none; }
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.mobile-menu__nav a {
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 100ms ease;
}
.mobile-menu__nav a:hover { color: var(--color-accent); }

/* The CTA inside the overlay is a quote-cta--primary at large size; this
   modifier is only used here so it lives with the mobile-menu component. */
.mobile-menu__cta {
  margin-top: 1rem;
}