/* Mobile navigation drawer + language modal.
   ------------------------------------------------------------------
   Ported from src/components/common/MobileNavigation.astro (the
   full-screen drawer) and src/components/common/LanguageModal.astro +
   src/components/common/Modal.astro (the bottom-sheet language picker the
   drawer's language row -- and, at desktop, the header nav's language
   item -- opens on top of it).

   Both surfaces live in one stylesheet because they are one feature: the
   modal only ever appears over the drawer or from the header trigger, and
   the two share the deliberate z-index tie described below.

   Scoping: unlike header-footer.css (whose selectors hang off
   `header.wp-block-template-part`), these two surfaces are printed at the
   end of <body> by includes/navigation.php, NOT inside the header
   template part -- `header.wp-block-template-part` sets `z-index: 1000`
   on a `position: sticky` box, which creates a stacking context that
   would trap a nested overlay below the cookie banner (z-index 1300) no
   matter what z-index the overlay itself declared. Every selector here is
   therefore rooted at `.mobile-nav` / `.lang-modal` instead, which is
   also what keeps the generic class names inside them (`.nav-item`,
   `.logo`, `.language`, `.title`, ...) from leaking.

   Z-index (see audit-burger-menu.md's map): header 1000, lang-switch
   trigger 1001, cookie banner 1300, get-app modal 1400. The reference
   gives the drawer and the language modal the SAME z-index (1400) and
   resolves the tie by DOM order (Header.astro renders <MobileNavigation />
   before <LanguageModal />). This port replicates that ordering
   deliberately: includes/navigation.php prints the drawer at `wp_footer`
   priority 4 and the modal at priority 20, so the modal is always later
   in the DOM and always paints on top. */

/* ==================================================================
   Drawer -- MobileNavigation.astro
   ================================================================== */

.mobile-nav {
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-panel: cubic-bezier(0.77, 0, 0.175, 1);

  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100dvh;
  background: black;
  z-index: 1400;
  overflow: hidden;
  pointer-events: none;
  transition: left 0.85s var(--ease-panel);
}

.mobile-nav.active {
  left: 0;
  pointer-events: all;
}

/* Panel leaves only after the content has animated out. */
.mobile-nav.active.closing {
  left: 100%;
  pointer-events: none;
  transition-delay: 0.5s;
}

.mobile-nav-bg {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    #9f4884 0%,
    #a04a8a 4%,
    #a24b94 13%,
    #9f56a1 21%,
    #965baa 29%,
    #895eb0 38%,
    #7868b9 46%,
    #6870c0 54%,
    #4f79c5 63%,
    #347cc4 71%,
    #0a82c4 79%,
    #0e88c3 88%,
    #148ec2 100%
  );
  transition: left 0.85s var(--ease-panel);
}

.mobile-nav-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #33203d 0%,
    #32203f 4%,
    #301c3e 13%,
    #2d1b41 21%,
    #2c1d46 29%,
    #2a1f4b 38%,
    #28214d 46%,
    #24214e 54%,
    #20224f 63%,
    #1b224f 71%,
    #18224e 79%,
    #182350 88%,
    #1a2553 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.62) 50%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.62) 50%,
    rgba(0, 0, 0, 1) 100%
  );
}

.mobile-nav.active .mobile-nav-bg {
  left: 0;
}

.mobile-nav.active.closing .mobile-nav-bg {
  left: -100%;
  transition-delay: 0.5s;
}

.mobile-nav-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--monochrome-white);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color-tertiary-inverted);
  opacity: 0;
  transition: opacity 0.7s ease 0.25s;
}

.mobile-nav.active .mobile-nav-header {
  opacity: 1;
}

.mobile-nav.active.closing .mobile-nav-header {
  opacity: 0;
  transition-duration: 0.4s;
  transition-delay: 0s;
}

.mobile-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-nav .button-text {
  display: inline-block;
  translate: 0 1px;
}

/* Waitlist mode (the site's app switch): the drawer's CTA carries
   JOIN THE WAITLIST and the short WAITLIST (includes/navigation.php).
   The long one needs about 361px next to the logo and the close button,
   so narrower phones get the short one. */
.mobile-nav .cta-label-short {
  display: none;
}

@media (max-width: 374px) {
  .mobile-nav .cta-label-long {
    display: none;
  }

  .mobile-nav .cta-label-short {
    display: inline;
  }
}

.mobile-nav-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 48px 24px 56px;
}

.mobile-nav nav ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav .reveal {
  --enter-x: 100vw;

  position: relative;
}

.mobile-nav .reveal-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--border-color-secondary-inverted);
  opacity: 0;
  transition: opacity 0.85s ease var(--delay, 0s);
}

.mobile-nav.active .reveal-line {
  opacity: 1;
}

.mobile-nav.active.closing .reveal-line {
  opacity: 0;
  transition-duration: 0.45s;
}

.mobile-nav .reveal-text {
  display: block;
  transform: translateX(var(--enter-x));
  opacity: 0;
  transition:
    transform 1.15s var(--ease-reveal) var(--delay, 0s),
    opacity 0.8s ease var(--delay, 0s);
}

.mobile-nav.active .reveal-text {
  transform: translateX(0);
  opacity: 1;
}

/* Exit retraces the entry path. */
.mobile-nav.active.closing .reveal-text {
  transform: translateX(var(--enter-x));
  opacity: 0;
  transition-duration: 0.75s, 0.45s;
}

/* Kills the negative block margins base.css gives `.text-copy-md`, the
   same way MobileNavigation.astro's own `.nav-item { margin: 0 }` does. */
.mobile-nav .nav-item {
  margin: 0;
}

.mobile-nav .nav-item:first-child .reveal-line {
  display: none;
}

.mobile-nav .nav-item a {
  display: block;
  width: 100%;
  height: 48px;
  padding-top: 12px;
  color: var(--monochrome-white);
}

.mobile-nav .language {
  padding-top: 16px;
}

/* Declared after `.reveal-text` so the flex row wins over its
   `display: block`, exactly as in the source component's rule order. */
.mobile-nav .language-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--monochrome-white);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.mobile-nav .language-button span {
  flex: 1;
  margin: 0;
  text-align: left;
}

.mobile-nav .language-button svg {
  flex-shrink: 0;
}

.mobile-nav .close-button,
.mobile-nav .logo a {
  display: flex;
  align-items: center;
}

.mobile-nav .close-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--monochrome-white);
  cursor: pointer;
}

/* Button.astro's `variant="primaryInverted" size="xsmall"` -- the drawer's
   inert GET STARTED pill. Ported scoped to this component the way
   hero-fireworks/closing-cta scope their own variant subsets, since
   header-footer.css only ports `.primary`. */
.mobile-nav .button {
  font-family: 'PPObjectSans-Medium';
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  text-transform: uppercase;
  font-size: var(--text-button-lg);
  line-height: 100%;
  letter-spacing: 1.92px;
  height: 44px;
  border-radius: var(--radius-md);
  text-wrap: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    border 0.1s,
    background-color 0.2s ease,
    transform 0.15s ease;
}

.mobile-nav .button.primaryInverted {
  background-color: var(--background-secondary);
  color: var(--text-primary);
  padding: 0 16px;
}

.mobile-nav .button.primaryInverted:hover:not(:disabled) {
  transform: scaleY(0.99) scaleX(1.005);
  opacity: 0.9;
}

.mobile-nav .button.primaryInverted:active:not(:disabled) {
  transform: scaleY(0.97) scaleX(1.005);
  opacity: 0.95;
}

.mobile-nav .button.xsmall {
  height: 24px;
  padding: 0 8px;
  gap: 2px;
  font-size: var(--text-button-sm);
  letter-spacing: 1.2px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-bg,
  .mobile-nav-header,
  .mobile-nav .reveal-line,
  .mobile-nav .reveal-text {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

/* ==================================================================
   Language modal -- LanguageModal.astro inside Modal.astro's shell.
   Class names are prefixed `lang-modal-` (the way the get-app modal
   prefixes its own shell `gam-`) so this global stylesheet can't collide
   with core/plugin markup over names as generic as `.modal-dialog`.
   ================================================================== */

.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s;
}

.lang-modal.active {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.lang-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background-color 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

.lang-modal.active .lang-modal-backdrop {
  background-color: var(--overlay-modal);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}

.lang-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.35s ease;
}

.lang-modal-dialog::-webkit-scrollbar {
  display: none;
}

.lang-modal.active .lang-modal-dialog {
  opacity: 1;
  transform: translateY(0);
}

.lang-modal-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0 16px;
}

.lang-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 48px;
  background-color: var(--background-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

.lang-modal-card {
  width: 100%;
  padding-top: 32px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--background-default);
}

.lang-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 16px 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.lang-modal-title {
  margin: -7px 0 -8px;
  font-family: var(--font-bold);
  font-size: var(--text-headline-md);
  line-height: var(--linehight-headline-md);
  text-align: center;
}

.lang-modal-list {
  width: 100%;
  padding: 4px 16px;
  border-radius: var(--radius-md);
  background-color: var(--background-secondary);
  list-style: none;
}

.lang-modal-item + .lang-modal-item .lang-modal-link {
  border-top: 1px solid var(--border-color-secondary);
}

.lang-modal-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  color: var(--text-primary);
  text-decoration: none;
}

.lang-modal-flag {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.lang-modal-text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lang-modal-name {
  color: var(--text-color-secondary);
}

.lang-modal-check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-primary);
}

.lang-modal-check svg {
  display: block;
  width: 24px;
  height: 24px;
}

@media (min-width: 600px) {
  .lang-modal {
    align-items: center;
    padding: 16px;
  }

  .lang-modal-dialog {
    max-width: var(--modal-max-width, none);
    transform: translateY(16px) scale(0.96);
  }

  .lang-modal.active .lang-modal-dialog {
    transform: translateY(0) scale(1);
  }

  .lang-modal-card {
    padding: 32px 0;
    border-radius: var(--radius-xl);
  }

  .lang-modal-container {
    padding: 0 32px;
  }

  .lang-modal-title {
    margin: -4px 0 -6px;
    font-size: var(--text-headline-sm);
    line-height: var(--linehight-headline-sm);
  }
}

@media (min-width: 1024px) {
  .lang-modal-title {
    font-size: 16px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-modal,
  .lang-modal.active,
  .lang-modal-backdrop {
    transition: none;
  }

  .lang-modal-dialog,
  .lang-modal.active .lang-modal-dialog {
    transform: none;
    transition: none;
  }
}