/* ============================================================
   Mobile responsiveness — preserves desktop above 900px.
   Two breakpoints:
     - tablet:  ≤ 900px  (collapse big multi-column grids)
     - mobile:  ≤ 640px  (single column, hamburger nav)
   ============================================================ */

/* ── Hamburger button (hidden on desktop) ───────────────────── */
.topbar .hamburger {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
.topbar .hamburger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.topbar .hamburger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.topbar .hamburger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.topbar.menu-open .hamburger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.topbar.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.topbar.menu-open .hamburger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.cart-pill .cart-pill-short { display: none; }

/* ============================================================
   TABLET ≤ 900px: collapse most multi-column layouts.
   ============================================================ */
@media (max-width: 900px) {
  /* Override hardcoded inline grids inside the SiteApp */
  .site [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  /* Topbar tightening */
  .site .topbar { padding: 16px 24px !important; }
  .site .brand { font-size: 19px; }
  .site .nav { gap: 18px; font-size: 10.5px; }

  /* Hide some nav items on tablet to avoid wrapping */
  .site .nav { flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
}

/* ============================================================
   MOBILE ≤ 640px: single-column, hamburger nav, fluid type.
   ============================================================ */
@media (max-width: 640px) {
  /* Tighten container padding */
  .site .container,
  .site .topbar,
  .site .foot {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Topbar: brand + tools only; nav becomes a drawer */
  .site .topbar {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    flex-wrap: nowrap;
  }
  .site .topbar .nav {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--rule-strong);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 24px;
    max-width: none;
    z-index: 50;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
    box-shadow: 0 14px 28px rgba(24,20,16,0.10);
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  .site .topbar.menu-open .nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site .topbar .nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .site .topbar .nav a:last-child { border-bottom: none; }
  .site .topbar .nav a.active::after { display: none; }
  .site .topbar .nav a.active { color: var(--coral-deep); }
  .site .topbar .hamburger { display: block; }

  /* Brand shorter */
  .site .brand { font-size: 17px; }
  .site .brand .mark { width: 18px; height: 18px; top: 3px; }

  /* Cart pill: switch to compact label */
  .site .cart-pill { padding: 7px 10px; gap: 6px; font-size: 10.5px; }
  .site .cart-pill .cart-pill-label { display: none; }
  .site .cart-pill .cart-pill-short { display: inline; }

  /* Single-column for ALL inline grids */
  .site [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Section spacing — original uses inline marginTop:96 */
  .site [style*="margin-top: 96px"],
  .site section[style*="marginTop"] { margin-top: 56px !important; }
  .site [style*="padding: 64px 56px"] { padding: 36px 24px !important; }

  /* Hero / large headings — tame leading */
  .site .hero { gap: 24px !important; padding: 32px 0 !important; }
  .site h1 { line-height: 1.05; }
  .site h2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.05; }

  /* Marquee & big inline serif text */
  .site [style*="font-size: 28"] { font-size: 22px !important; }
  .site [style*="font-size: 56"] { font-size: 42px !important; }

  /* Footer: stack everything */
  .site .foot { padding: 40px 20px 24px !important; }
  .site .foot .grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Course-card inner padding */
  .site .course-card { font-size: 14px; }

  /* Cart drawer / toast — full width */
  .site .toast {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
  }

  /* Buttons — wrap nicely */
  .site .btn { font-size: 12px; padding: 12px 16px; }

  /* Tables-as-grids (e.g. 60px 240px 1fr) — stack rows */
  .site [style*="60px"][style*="240px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ============================================================
   Avoid horizontal scroll regardless of breakpoint.
   ============================================================ */
.site, body { overflow-x: hidden; }

/* Watermark on small screens — shrink so it doesn't dominate */
@media (max-width: 640px) {
  .acm-watermark {
    bottom: 12px; right: 12px;
    padding: 6px 11px;
    font-size: 9.5px; letter-spacing: 0.14em;
  }
  .back-to-chooser {
    bottom: 12px; left: 12px;
    padding: 7px 11px;
    font-size: 9.5px;
  }
  .acm-watermark-bg::after { font-size: 36px; }
}