/* ============================================================
   EssayScribez — Mobile optimization layer
   Append AFTER scribez/styles.css (do not replace).
   Targets ≤720px (tablet portrait) and ≤480px (phones).
   ============================================================ */

/* ---------- 1. Safety: kill horizontal scroll ---------- */
html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Injected by mobile-nav.js — hidden on desktop, revealed ≤720px below */
.mobile-burger, .mobile-drawer { display: none; }

/* ---------- 2. Tablet portrait & below ---------- */
@media (max-width: 720px) {
  .container { padding: 0 20px; }

  /* NAV — replace hidden link row with a working hamburger */
  .nav-inner { padding: 12px 0; gap: 12px; flex-wrap: nowrap; }
  .logo { font-size: 18px; gap: 8px; }
  .logo-mark { width: 30px; height: 30px; font-size: 18px; box-shadow: 2px 2px 0 var(--ink); }
  .nav-links { display: none; }
  .nav-cta { gap: 8px; margin-left: auto; }
  .nav-cta .btn--ghost { display: none; }           /* hide "Log in" — surface in mobile menu */
  .nav-cta .btn { padding: 10px 14px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
  .nav-cta .btn:hover { transform: none; box-shadow: 3px 3px 0 var(--ink); }

  /* Hamburger button injected by mobile-nav.js */
  .mobile-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px;
    background: var(--paper); border: 2.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer; padding: 0;
  }
  .mobile-burger span {
    display: block; width: 20px; height: 2.5px; background: var(--ink);
    position: relative;
  }
  .mobile-burger span::before, .mobile-burger span::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2.5px; background: var(--ink);
  }
  .mobile-burger span::before { top: -7px; }
  .mobile-burger span::after  { top:  7px; }

  /* Fullscreen menu drawer */
  .mobile-drawer {
    position: fixed; inset: 0; z-index: 100;
    background: var(--paper);
    padding: 80px 24px 32px;
    display: none; flex-direction: column; gap: 4px;
    overflow-y: auto;
  }
  .mobile-drawer.open { display: flex; }
  .mobile-drawer a {
    display: block; padding: 16px 0;
    font-family: "Archivo Black", sans-serif;
    font-size: 28px; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    border-bottom: 2.5px solid var(--ink);
  }
  .mobile-drawer .btn { margin-top: 24px; align-self: flex-start; }
  .mobile-drawer-close {
    position: absolute; top: 16px; right: 20px;
    width: 44px; height: 44px;
    background: var(--red); color: var(--paper);
    border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    font-family: "Archivo Black", sans-serif; font-size: 22px;
    cursor: pointer; line-height: 1;
  }

  /* HERO */
  .hero { padding: 36px 0 24px; }
  .hero-grid { gap: 36px; }
  .hero h1 { font-size: clamp(48px, 14vw, 84px); margin: 16px 0 18px; }
  .hero h1 .stamped { box-shadow: 4px 4px 0 var(--ink); border-width: 3px; padding: 0 10px 4px; }
  .hero p.lede { font-size: 17px; margin-bottom: 22px; }
  .hero-actions { gap: 12px; }
  .hero-trust { margin-top: 24px; gap: 10px; flex-wrap: wrap; }
  .hero-trust .mono { font-size: 12px; }
  .btn--xl { padding: 16px 22px; font-size: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .btn--xl:hover { box-shadow: 4px 4px 0 var(--ink); }

  /* Paper-mock card: remove rotation + outsized shadow that cause overflow */
  .paper-mock { transform: rotate(0); box-shadow: 6px 6px 0 var(--ink); padding: 22px 22px 24px; }
  .paper-mock .doc-title { font-size: 18px; }
  .floaty-1, .floaty-2 { display: none; }

  /* MARQUEE */
  .marquee { padding: 14px 0; }
  .marquee-track { font-size: 24px; gap: 36px; }
  .marquee-track span { gap: 36px; }

  /* SECTION HEADERS */
  section { padding: 60px 0; }
  .section-title { font-size: clamp(40px, 11vw, 64px); }
  .section-sub { font-size: 17px; margin-bottom: 36px; }

  /* STEPS — single column */
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 22px 20px; box-shadow: 4px 4px 0 var(--ink); }
  .step:hover { transform: none; }
  .step h3 { font-size: 19px; }

  /* CALCULATOR */
  .calc-wrap { border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-form { padding: 28px 22px 26px; }
  .calc-form h2 { font-size: 36px; margin: 12px 0 22px; }
  .pill { padding: 12px 16px; font-size: 14px; min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .stepper .val { min-width: 64px; font-size: 20px; }
  .calc-pricetag { padding: 32px 22px; border-left: none; border-top: 3px solid var(--ink); }
  .price-num { font-size: 72px; }
  .price-breakdown { font-size: 12px; }

  /* SUBJECTS */
  .subj { font-size: 14px; padding: 8px 14px; box-shadow: 2px 2px 0 var(--ink); }
  .subj:hover { transform: none; }

  /* WRITERS — 1 col on phones, 2 on tablet */
  .writers { grid-template-columns: 1fr 1fr; gap: 14px; }
  .writer { padding: 14px; box-shadow: 4px 4px 0 var(--ink); transform: none !important; }
  .writer h4 { font-size: 17px; }
  .writer .stats { gap: 6px; font-size: 11px; }
  .writer .stats span { padding: 3px 6px; }

  /* TESTIMONIALS */
  .testimonials { grid-template-columns: 1fr; gap: 28px; }
  .note { padding: 22px 20px 18px; transform: none !important; margin-top: 0 !important; box-shadow: 6px 6px 0 rgba(0,0,0,0.18); }
  .note p { font-size: 17px; }

  /* GUARANTEES */
  .guarantees { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grnt { padding: 20px 14px; box-shadow: 3px 3px 0 var(--ink); }
  .grnt h4 { font-size: 15px; }
  .grnt p { font-size: 13px; }

  /* FAQ */
  .faq-item { padding: 18px 0; }
  .faq-q { font-size: 17px; gap: 12px; }
  .faq-q .plus { width: 28px; height: 28px; flex-shrink: 0; }
  .faq-a p { font-size: 15px; }

  /* FINAL CTA */
  .final-cta { padding: 72px 0 80px; }
  .final-cta h2 { font-size: clamp(56px, 16vw, 92px); }
  .final-cta .underline { text-decoration-thickness: 6px; text-underline-offset: 8px; }
  .final-cta p { font-size: 17px; margin-bottom: 28px; }

  /* FOOTER */
  footer { padding: 44px 0 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-logo { font-size: 22px; }
  .foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* SUB-PAGE EXTRAS */
  .page-hero { padding: 44px 0 36px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero h1 { font-size: clamp(44px, 13vw, 72px); margin: 12px 0 16px; }
  .page-hero h1 .stamped { box-shadow: 4px 4px 0 var(--ink); border-width: 3px; padding: 0 8px 3px; }
  .page-hero .lede { font-size: 17px; }
  .page-hero-art { padding: 22px; box-shadow: 6px 6px 0 var(--ink); }

  .prose { font-size: 16px; }
  .prose h2 { font-size: 28px; margin: 40px 0 14px; }
  .prose h3 { font-size: 19px; margin: 28px 0 10px; }
  .prose blockquote { font-size: 18px; padding: 14px 16px; }

  .tabs { gap: 4px; }
  .tab { padding: 10px 14px; font-size: 12px; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 20px 16px; box-shadow: 3px 3px 0 var(--ink); }
  .stat .n { font-size: 40px; }
  .stat .l { font-size: 11px; }

  .sample-grid { grid-template-columns: 1fr; gap: 18px; }
  .sample { padding: 20px; box-shadow: 4px 4px 0 var(--ink); transform: none !important; }
  .sample h3 { font-size: 19px; }

  .policy-page { padding: 48px 0 64px; }
  .policy-grid { grid-template-columns: 1fr; gap: 24px; }
  .policy-nav {
    display: flex; flex-wrap: wrap; gap: 6px;
    position: static; top: auto;
  }
  .policy-nav a { padding: 8px 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }

  .filter-bar { gap: 6px; margin-bottom: 24px; }
  .filter { padding: 8px 12px; font-size: 13px; min-height: 40px; }

  /* Forms */
  .form-grid { gap: 14px; }
  .field input, .field textarea, .field select { padding: 12px 14px; font-size: 16px; box-shadow: 2px 2px 0 var(--ink); }
}

/* ---------- 3. Small phones (≤480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .writers { grid-template-columns: 1fr; }
  .guarantees { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .section-title { font-size: clamp(36px, 11vw, 56px); }
  .final-cta h2 { font-size: clamp(48px, 15vw, 72px); }
  .price-num { font-size: 60px; }
  .calc-form h2 { font-size: 30px; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- 4. Touch hover suppression ---------- */
@media (hover: none) {
  .step:hover, .writer:hover, .sample:hover, .subj:hover { transform: none; }
}

/* ============================================================
   5. Subpage clipping fixes (added 2026-05-24)
   Subpages set grid columns via inline style="" and per-page <style>
   blocks that never collapsed on phones, so multi-column content ran
   off the right edge and the root overflow-x:hidden clipped it.
   Collapse those inline grids to one column. Selectors are anchored to
   "grid-template-columns: " so icon/label rows (32px/60px/64px/100px 1fr)
   and the live pricing matrix (1.5fr repeat(...)) are intentionally NOT
   matched. !important is required to beat the inline style attributes and
   the per-page <style> blocks that load after this file.
   ============================================================ */
@media (max-width: 720px) {
  body { overflow-wrap: break-word; }            /* long emails/words wrap instead of overflowing */

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 80px 1fr 2fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .form-row { grid-template-columns: 1fr !important; }          /* name/email stack */
  [style*="position: sticky"] { position: static !important; }  /* unstick FAQ category rail */
  [style*="padding: 64px;"],
  [style*="padding: 50px;"] { padding: 28px !important; }        /* trim oversized feature-card padding */

  /* Keep inline-grid columns proportional so header cells line up with the
     price rows below them (default grid min-width:auto let long header labels
     widen their columns, knocking the header out of sync with the rows and
     pushing the last/PhD column off). */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* Live pricing matrix -> swipe horizontally within its own box */
  .price-table { overflow-x: auto !important; }
  .price-table-head, .price-row { min-width: 600px; }
  .price-table-head { font-size: 10px !important; }

  /* Writer / team cards: drop rotation so they don't overflow (photos already square) */
  .writer { transform: none !important; }
}