/* Layout fixes layered on top of the built stylesheet.
 * Kept in a separate file so the content-hashed Next.js CSS is untouched. */

/* ---------------------------------------------------------------------------
 * Horizontal overflow on small screens.
 * The hero's decorative SVGs (640px) and glow divs (1040/1100px) are absolutely
 * positioned with negative offsets, so at 375px they pushed scrollWidth to 483px
 * — 108px of sideways scroll on every phone.
 *
 * `clip` rather than `hidden`: the site header is `position: sticky`, and
 * `overflow: hidden` on an ancestor turns it into a scroll container, which
 * silently kills sticky positioning. `clip` crops without that side effect.
 * ------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  /* Older Safari: crop the decorative layers themselves rather than the
     document, so the sticky header keeps working. */
  section,
  header + div,
  main > div {
    overflow-x: hidden;
  }
}

/* Belt and braces: nothing decorative should be able to widen the page. */
[aria-hidden="true"] > svg,
.pointer-events-none {
  max-width: 100vw;
}

/* ---------------------------------------------------------------------------
 * Rotating headline.
 * The phrase swaps between three audiences; reserving inline-block metrics
 * stops the H1 reflowing (and the caret jumping) as the text changes length.
 * ------------------------------------------------------------------------- */
.rotate-word {
  display: inline-block;
  min-height: 1em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* the longest phrase would otherwise force a third line on small phones */
  .rotate-word {
    white-space: normal;
  }
}

/* Respect the OS "reduce motion" setting: no caret blink, no typing. */
@media (prefers-reduced-motion: reduce) {
  .caret-blink {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Small-screen header.
 *
 * The refreshed lockup is proportionally wider than the one it replaced (224px
 * vs 183px at h-8). At 375px that left the header needing ~410px: the CTA was
 * crushed to 101px and wrapped onto three lines, and the menu button was pushed
 * to x=394 — past the viewport edge, so it ended up cropped.
 *
 * Scale the mark down and drop the header CTA, which duplicates the primary
 * button sitting directly beneath it in the hero. Delete the second rule to
 * bring the header CTA back.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  header img[src*="lockup"] {
    height: 1.5rem;              /* h-6 — ~167px wide, frees ~57px */
    width: auto;
  }

  header a.btn-primary {
    display: none;
  }
}

/* NOTE: a touch-target rule previously lived here, forcing `display:inline-flex`
 * on header links/buttons. It overrode the CTA's own layout. Removed — the built
 * styles already size these adequately, and no measurement justified it. */

/* Long unbroken strings (wallet addresses, tickers) shouldn't force scroll. */
@media (max-width: 640px) {
  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * Solutions dropdown width.
 * The 3-column restructure applied Tailwind classes `w-[860px]`/`grid-cols-3`
 * in the layout chunk, but `w-[860px]` was never in the compiled CSS (Tailwind
 * only emits classes present at build time), so the panel had no width and its
 * columns collapsed on top of each other. `w-[860px]` is used by that panel
 * alone, so these rules are scoped by definition.
 * ------------------------------------------------------------------------- */
.w-\[860px\] {
  width: min(860px, 94vw);
}

/* On narrower desktops the left-anchored panel would run past the viewport
 * edge (and overflow-x:clip would crop it). The menu is click-toggled, so a
 * viewport-centred fixed panel is safe — no hover-out path to break. */
@media (max-width: 1150px) {
  .w-\[860px\] {
    position: fixed;
    left: 50vw;
    right: auto;
    top: 4.5rem;
    transform: translateX(-50%);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}