/*
 * MacFleek mobile responsive overrides — v2
 * ─────────────────────────────────────────
 * Prototype was desktop-only (>=1280px). These media queries make it
 * survive phones and tablets. More aggressive than v1: collapse every
 * multi-column grid, hide oversized desktop-only chrome, simplify the
 * comparison table.
 */

/* ============================================================
 * TABLET (≤ 1024px)
 * ============================================================ */
@media (max-width: 1024px) {
  section[style*="padding: 70px 40px"],
  section[style*="padding: 80px 40px"] {
    padding: 50px 20px !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
 * PHONE (≤ 720px)
 * ============================================================ */
@media (max-width: 720px) {

  /* ─── Universal: kill horizontal overflow ─── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * {
    max-width: 100% !important;
  }

  /* ─── NAVBAR ─── */
  header nav {
    display: none !important;
  }
  header a[href*="github"] {
    display: none !important;
  }
  header > div {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  header a[href="/buy/"] {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* ─── SECTIONS: reduce padding ─── */
  section {
    padding: 28px 16px !important;
  }
  section[style*="padding: 70px 40px"],
  section[style*="padding: 80px 40px"],
  section[style*="padding: 100px 40px"],
  section[style*="60px 40px"] {
    padding: 32px 16px !important;
  }

  /* ─── HERO TITLE ─── */
  h1, h1[style*="font-size"] {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  h2, h2[style*="font-size"], h2[style*="clamp"] {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  /* ─── HERO MAC WINDOW MOCKUP — completely hide on phone ─── */
  /* It has Sidebar + content grid 240px+1fr which doesn't fit phones */
  div[style*="height: 620px"],
  div[style*="height:620px"] {
    display: none !important;
  }
  /* Also kill the floating menu-bar popover demo overlay inside hero */
  div[style*="grid-template-columns: 240px 1fr"] {
    display: none !important;
  }

  /* ─── ALL multi-column grids → 1 column ─── */
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns: 1fr 220px"],
  div[style*="grid-template-columns: 1fr 280px"],
  div[style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── DEMO CARDS — let internal content shrink ─── */
  .surface {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .surface[style*="height: 280"],
  .surface[style*="height: 320"],
  .surface[style*="height: 360"] {
    height: auto !important;
    min-height: 360px !important;
  }

  /* ─── DEMO CARDS — fix absolute-positioned demo content escaping ─── */
  /* Each demo card has an inner div with `position: absolute; inset: 0`
     that holds the treemap blocks, gauge circle, menubar mockup, or
     duplicate-pass cards. On mobile this content overlaps the title.
     Force the inner content area to grow naturally from a static
     position so it doesn't escape its parent. */
  .surface > div[style*="position: relative"] > div[style*="position: absolute"][style*="inset"] {
    position: relative !important;
    inset: auto !important;
    margin-top: 16px;
  }
  /* If the inner has explicit height set, keep it but make it static */
  .surface > div[style*="position: relative"][style*="height"] {
    min-height: 240px;
  }
  /* Duplicate Finder Pass cards — they use absolute, force them static */
  .surface > div > div[style*="position: absolute"] {
    position: static !important;
    inset: auto !important;
  }
  /* Force the demo card visual content to stack below the title */
  .surface > div[style*="margin-top: 16"][style*="height"],
  .surface[style*="position: relative"] > div:nth-child(3) {
    position: relative !important;
    margin-top: 12px !important;
  }

  /* ─── TREEMAP blocks — smaller labels for mobile ─── */
  /* The squarified treemap shrinks blocks too much on phones; reduce
     label font size and padding so labels don't truncate. */
  .surface div[style*="grid-area"] {
    padding: 6px !important;
  }
  .surface div[style*="grid-area"] span:first-child,
  .surface div[style*="background: oklch"] span:first-child {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .surface div[style*="grid-area"] span:last-child,
  .surface div[style*="background: oklch"] span:last-child {
    font-size: 9px !important;
    opacity: 0.85;
  }

  /* ─── GAUGE — recenter text inside SVG ─── */
  /* DiskGauge uses position: absolute, inset: 0 wrapper with flex column.
     Make sure the wrapper takes the full SVG size and centers properly. */
  .anim-gauge,
  div[style*="width: 170"][style*="height: 170"],
  div[style*="width: 148"][style*="height: 148"] {
    margin: 0 auto !important;
  }

  /* ─── COMPARISON TABLE — simplify dramatically ─── */
  /* Strategy: shrink everything, make first column sticky so user
     never loses the feature name when scrolling horizontally */
  table {
    font-size: 12px !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100%;
  }
  table th, table td {
    padding: 10px 8px !important;
    white-space: normal !important;
    word-break: normal !important;
  }
  table th:first-child, table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface-1) !important;
    z-index: 2;
    border-right: 1px solid var(--hairline);
    min-width: 130px;
  }
  /* Wrap the table in a scrollable container */
  .surface:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── PRICING (2-col → 1-col already covered above) ─── */
  /* Pricing cards — reduce inner padding */
  div[style*="padding: 40px"] {
    padding: 24px 18px !important;
  }

  /* ─── FAQ accordion ─── */
  details[style*="padding"] {
    padding: 14px 16px !important;
  }
  details summary {
    font-size: 14px !important;
  }

  /* ─── BUTTONS — wrap on narrow ─── */
  div[style*="display: flex"][style*="gap"][style*="justifyContent"] {
    flex-wrap: wrap !important;
  }
  a[style*="padding: 14px"],
  a[style*="padding: 16px"],
  button[style*="padding: 14px"] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  /* ─── DECORATIVE chrome → hide ─── */
  /* Floating particles, glow blobs behind hero */
  div[style*="position: absolute"][style*="filter: blur"],
  div[style*="position: absolute"][style*="opacity: 0.3"],
  div[style*="position: absolute"][style*="opacity: 0.4"],
  div[style*="position: absolute"][style*="opacity: 0.5"] {
    display: none !important;
  }
  /* Witch silhouette in hero behind window */
  section svg[viewBox="0 0 386 383"] {
    max-width: 200px !important;
    max-height: 200px !important;
  }
  /* Stars behind witch */
  g[opacity="0.85"], g[opacity="0.6"] {
    opacity: 0.3 !important;
  }

  /* ─── FOOTER — vertical stack ─── */
  footer > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left;
  }
  footer span[style*="margin-left: auto"] {
    margin-left: 0 !important;
  }

  /* ─── LEGAL PAGES (Privacy/Terms) ─── */
  .legal-toc,
  aside[class*="toc"] {
    display: none !important;
  }
  .legal-content {
    padding: 16px !important;
    max-width: 100% !important;
  }
  .legal-meta {
    font-size: 11px !important;
  }
  .legal-title {
    font-size: 28px !important;
  }

  /* ─── CHECKOUT page ─── */
  /* Payment method tiles stack instead of grid */
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
 * VERY SMALL (≤ 380px) — iPhone SE etc
 * ============================================================ */
@media (max-width: 380px) {
  header span {
    font-size: 14px !important;
  }
  header button[aria-label="Toggle theme"] span:not(:first-child) {
    display: none !important;
  }
  header a[href="/buy/"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}