/* ------------------------------------------------------------------ *
 * Mobile stopgap fixes for the static Framer-capture pages
 * (Home, Extension, T&C, Privacy, vs/raindrop).
 *
 * These pages are frozen Framer HTML captures whose responsive
 * breakpoint variants don't switch, so at phone widths the desktop
 * navbar overflows and decorative stickers overlap the hero. This file
 * condenses the header and hides/right-sizes the messy decorations on
 * small screens. It is intentionally surgical — the real fix is the
 * planned rebuild of these pages as Astro on the shared BaseLayout +
 * ResponsiveNavbar (which already gives Pricing/Blog a proper hamburger).
 *
 * Selectors are either page-agnostic (data-framer-name, navbar-scoped)
 * or page-specific (harmless where they don't match), so one shared file
 * can be linked from every static page.
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
  /* --- Shared header: condense the overflowing desktop navbar --------
     Hide the cramped inline nav links, let the row fit the viewport, and
     collapse the fixed-width CTA so the logo + auth buttons sit cleanly.
     Scoped to the navbar so footer menus are untouched. */
  [data-framer-name="Components / Navbar"] [data-framer-name="Menu"] {
    display: none !important;
  }
  [data-framer-name="Components / Navbar"] [data-framer-name^="Desktop /"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-framer-name="Components / Navbar"] [data-framer-name="CTA"] {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  /* --- Home: hide draggable emoji/folder stickers + brain that overlap
     the hero text and the "Get Started for Free" button. */
  .framer-1tcvu7,
  [data-framer-name="🧠"] {
    display: none !important;
  }

  /* --- Extension: hide the floating browser-logo cluster that overlaps
     the hero title, and shrink the oversized hero headings. */
  [data-framer-name="Hero Icons"] {
    display: none !important;
  }
  .framer-q9ldkz,
  .framer-q9ldkz * {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
  .framer-1vwn2dw,
  .framer-1vwn2dw * {
    font-size: 42px !important;
    line-height: 1.05 !important;
  }

  /* --- Mobile nav menu (hamburger). The button + dropdown are injected by
     mobile-menu.js and reuse the page's real nav links so every page is
     reachable on mobile. */
  .mobile-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .mobile-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #111;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  body.mobile-menu-open .mobile-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mobile-menu-open .mobile-hamburger span:nth-child(2) { opacity: 0; }
  body.mobile-menu-open .mobile-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
  }
  .mobile-menu-panel {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    flex-direction: column;
    padding: 8px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 16px;
    box-shadow: 0 14px 44px rgba(20, 12, 48, 0.18);
    z-index: 9999;
  }
  body.mobile-menu-open .mobile-menu-backdrop { display: block; }
  body.mobile-menu-open .mobile-menu-panel { display: flex; }
  .mobile-menu-panel a {
    padding: 13px 14px;
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1a1226;
    text-decoration: none;
  }
  .mobile-menu-panel a[aria-current="page"],
  .mobile-menu-panel a:active {
    background: #f4f4f7;
  }
}

/* Never show the injected hamburger on desktop. */
@media (min-width: 601px) {
  .mobile-hamburger,
  .mobile-menu-panel,
  .mobile-menu-backdrop { display: none !important; }
}