/* ============================================================
   PDAHub — mobile refinement layer
   Loaded AFTER styles.css. Phone-first polish that keeps the
   brand calm and the hero orbital magical on small screens,
   and fixes layout breakages that only appear at narrow widths.
   Everything here is scoped to max-width media queries, so the
   desktop experience is untouched.
   ============================================================ */

/* ============================================================
   PHONES & SMALL TABLETS  (≤ 860px)
   ============================================================ */
@media (max-width: 860px) {
  /* Fixed-header anchor offset so section titles are not hidden under
     the mobile nav after tapping an in-page menu link. */
  section[id],
  header[id] {
    scroll-margin-top: 7.5rem;
  }

  /* ---- HERO ORBITAL -------------------------------------------
     On a phone the headline fills the screen, so a normal-sized
     orbital has no clear space around it — the bubbles end up faint
     and stuck to the edges. Instead we render a LARGE halo, bigger
     than the text: its sides clip gently off-screen (no edge-dots),
     while the top and bottom arcs drift through the clear zones
     above the eyebrow and below the buttons, where words can bloom. */
  .hero { padding: 6.4rem 0 3.4rem; }
  .hero-stage { aspect-ratio: auto; }

  .orbital {
    inset: auto;
    top: 50%; left: 50%;
    width: max(132vw, 560px);
    height: max(132vw, 560px);
    max-width: 680px; max-height: 680px;
    transform: translate(-50%, -50%);
  }
  .hero-copy {
    width: min(94%, 480px);
    padding: 1.2rem;
    gap: 1.25rem;
  }

  /* Make the bubbles clearly visible on the pale background:
     bigger, a saturated hue rim (its own colour) and a soft lift.
     The :not(.bloom) guard leaves the bloom glow untouched. */
  .hero .node .dot { width: 30px !important; height: 30px !important; }
  .hero .node:not(.bloom) .dot {
    box-shadow:
      0 4px 11px -3px rgba(43, 49, 73, 0.34),
      inset 0 0 0 2.5px var(--bloom-glow, rgba(143, 169, 224, 0.7));
  }

  /* Bloom word can render ABOVE the bubble (for top-arc dots that
     have clear sky above them, toward the nav). */
  .node.bloom-up .bloom-word {
    top: auto; bottom: calc(100% + 12px);
    transform: translate(-50%, 10px) scale(0.85);
  }
  .node.bloom-up.bloom .bloom-word { transform: translate(-50%, 0) scale(1); }

  /* Make the active mobile bloom read faster and more clearly on a small,
     short-attention viewport. */
  .hero .node.bloom .dot {
    transform: scale(2.18);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.52),
      0 24px 46px -18px rgba(43, 49, 73, 0.5),
      0 0 38px 6px var(--bloom-glow, rgba(240, 196, 123, 0.62)),
      inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  }
  .hero .node .bloom-word {
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
      0 20px 38px -18px rgba(43, 49, 73, 0.56),
      inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  }

  /* ---- HAMBURGER MENU -----------------------------------------
     Tighter rows so the whole menu (incl. the CTA) fits one screen. */
  .mobile-menu { padding: 0.6rem var(--mobpad, 4vw) 1.1rem; gap: 0; }
  .mobile-menu a { padding: 0.62rem 0.4rem; font-size: 1rem; }
  .mobile-menu .m-label { padding: 0.7rem 0.4rem 0.2rem; font-size: 0.68rem; }
  .mobile-menu .m-cta { margin-top: 0.8rem; padding: 0.85rem; font-size: 1rem; }

  /* ---- FAQ HELP-CENTRE ----------------------------------------
     The cramped horizontal stage rail is replaced by a compact
     two-column grid, so every stage is visible and tappable at
     once — no hidden sideways scrolling. */
  .faq2 { grid-template-columns: 1fr; }
  .faq2-nav-wrap { min-width: 0; }
  .faq2-main { min-width: 0; }
  .faq2-search { margin-bottom: 1rem; }
  .faq2-nav {
    position: static;
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row;
    gap: 0.5rem; overflow: visible;
    margin-inline: 0; padding: 0; padding-bottom: 0;
  }
  .faq2-tab {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    white-space: normal; min-height: 50px; align-items: center;
    padding: 0.6rem 0.7rem; gap: 0.55rem;
  }
  .faq2-tab .tname { font-size: 0.92rem; line-height: 1.2; }
  .faq2-tab .count { display: none; }

  .admin-token-row,
  .admin-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-token-row .btn,
  .admin-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .admin-stats { grid-template-columns: 1fr; }

  /* gentler vertical rhythm so sections don't feel cavernous */
  .band { padding: clamp(3.4rem, 9vw, 5rem) 0; }
  .section-head { margin-bottom: 2.4rem; }
}

/* ============================================================
   NARROW PHONES  (≤ 520px)
   ============================================================ */
@media (max-width: 520px) {
  /* stack the hero actions full-width for easy thumb reach */
  .hero-cta { width: 100%; flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .hero-cta .btn { width: 100%; justify-content: center; padding-block: 0.95em; }

  /* keep periodic bloom words tidy on tiny screens */
  .hero .node .bloom-word {
    font-size: 1.04rem;
    font-weight: 600;
    padding: 7px 15px;
  }

  /* comfortable reading measure + spacing for body copy */
  .hero-sub { max-width: 30em; }
  .section-head p { font-size: 1.04rem; }

  /* one stage per row only if names get tight — keep two by default */
}

/* ============================================================
   SHORT / LANDSCAPE PHONES
   keep the full-height hero from clipping its own content
   ============================================================ */
@media (max-width: 860px) and (max-height: 620px) {
  .hero { min-height: auto; padding: 6rem 0 3rem; }
  .hero-stage { min-height: 0; }
  .scroll-cue { display: none; }
}