/* ---------------------------------------------------------------------------
   Runtime styles for behaviours that were React/Framer-Motion in the original.
   Kept separate from the compiled Tailwind sheet (theme.css).
--------------------------------------------------------------------------- */

/* The `hidden` attribute must beat Tailwind display utilities (.flex, .grid,
   .inline-flex) on elements we toggle from JS (error boxes, spinners, wizard
   steps, success cards, submit buttons). */
[hidden] {
  display: none !important;
}

/* Font variables (the Next app injected these via next/font; we load the same
   two families from Google Fonts and expose the same CSS variables). */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Reveal / stagger (Framer whileInView) ---- */
[data-mml='reveal'],
[data-mml='stagger-item'] {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-mml='reveal'].mml-in,
[data-mml='stagger-item'].mml-in {
  opacity: 1 !important;
  transform: none !important;
}

/* If JavaScript is unavailable, never hide content. */
.no-js [data-mml='reveal'],
.no-js [data-mml='stagger-item'],
.no-js [data-mml='hero-in'] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Hero typing cursor ---- */
[data-mml='typing']::after {
  content: '|';
  margin-left: 1px;
  font-weight: 400;
  animation: mml-caret 1s step-end infinite;
}
@keyframes mml-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Mobile menu (Framer slide-over) ---- */
.mml-menu-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mml-menu-panel {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.mml-menu-open .mml-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.mml-menu-open .mml-menu-panel {
  transform: translateX(0);
}
/* Lock scroll while the drawer is open */
body.mml-menu-open {
  overflow: hidden;
}

/* ---- Mobile menu sub-accordion ---- */
.mml-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mml-acc-panel > div {
  overflow: hidden;
  min-height: 0;
}
[data-mml='m-acc'].mml-open .mml-acc-panel {
  grid-template-rows: 1fr;
}
[data-mml='m-acc'].mml-open [data-mml='m-acc-btn'] svg {
  transform: rotate(180deg);
}

/* ---- FAQ accordion (Radix) ----
   Override the Tailwind animate-accordion-up/down utilities (they don't hold
   their end state, so a closed panel would spring back open) and drive the
   open/close purely with a collapsing grid row. */
[data-mml='acc-content'] {
  max-height: 0;
  overflow: hidden;
  animation: none !important;
  transition: max-height 0.28s ease-out;
}
[data-mml='acc-content'][data-state='open'] {
  max-height: 500px;
}

/* On desktop the header dropdowns use pure CSS :hover (already in Tailwind);
   nothing extra needed here. */