/* ─────────────────────────────────────────────────────────────────────
   mobile-tuning.css — site-wide responsive layer
   Loaded after the page's inline styles so these rules win.
   Owns: hero/CTA stacking, table responsiveness, grid collapse,
   tap targets, blog post nav wrap, form input sizing.
   Authored 2026-05-01 alongside the v2.30 release.
   ───────────────────────────────────────────────────────────────────── */

/* ====== Tap target floor (44px) for nav + FAQ chevrons + footer links ====== */
@media (max-width: 768px) {
  nav a,
  .nav-links a,
  .faq-question,
  footer a,
  .resource-link,
  .read-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Hamburger button — bigger hit area */
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 12px !important;
  }
}

/* ====== Hero & CTA stacking on mobile (≤768px) ======
   Uses block layout (not flex) for the hero CTAs so each button can be
   centered with the bulletproof `display:block; margin:0 auto;` pattern.
   Flex centering with align-self had cascade edge cases — switching to
   block removes those entirely. */
@media (max-width: 768px) {
  .hero-ctas {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .hero-ctas .btn,
  .hero-ctas a.btn,
  .hero-ctas a.btn-primary,
  .hero-ctas a.btn-outline {
    display: block !important;
    width: 280px !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 12px !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    float: none !important;
  }
  .hero-ctas .btn:last-child,
  .hero-ctas a.btn:last-child { margin-bottom: 0 !important; }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
  .hero .subtitle,
  .hero p.subtitle {
    font-size: 1rem !important;
  }
  /* Other column-stacking targets (forms, cta-box) keep flex-centered layout */
  .demo-form-wrap form,
  .cta-box {
    flex-direction: column !important;
    align-items: center !important;
  }
  .cta-btn,
  .demo-form-wrap form .btn-primary,
  .demo-form-wrap form .btn-outline {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
    align-self: center !important;
  }
}

/* ====== Responsive tables — wrap any <table> in a horizontal-scroll
       container with a subtle right-edge fade so users see "more →" ====== */
@media (max-width: 768px) {
  /* All raw tables: enable horizontal scroll without breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  /* But comparison-style tables on the homepage convert to stacked
     cards at < 640px (rows become cards with column labels inline).
     The table's first <thead> row is hidden; <tbody> rows render as
     cards. We use the data-mobile-card="true" attribute to opt in. */
  table[data-mobile-card="true"] thead {
    display: none;
  }
  table[data-mobile-card="true"] tr {
    display: block;
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--card-bg, #fff);
  }
  table[data-mobile-card="true"] td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    text-align: left;
    white-space: normal;
  }
  table[data-mobile-card="true"] td::before {
    content: attr(data-label) ":";
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin-right: 12px;
    flex-shrink: 0;
  }
}

/* ====== Multi-column grid sweep — force single column at < 640px ====== */
@media (max-width: 640px) {
  .features-grid,
  .pricing-grid,
  .blog-cards-grid,
  .resource-cards,
  .blog-grid,
  .blog-cards,
  .tier-comparison,
  .onprem-grid,
  .testimonials-grid,
  .steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Demo form box: info column above, form column below */
  .demo-box-content {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  /* Pros/cons grid in the listicle blog post */
  .pros-cons {
    grid-template-columns: 1fr !important;
  }
  /* Container padding tightens */
  .container,
  article,
  .agreement-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ====== Blog post nav — logo + back-link should wrap before crushing ====== */
@media (max-width: 600px) {
  /* Generic <nav> in blog posts */
  body > nav,
  article ~ nav {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 1rem 1.25rem !important;
  }
  body > nav .back-link {
    font-size: 0.85rem !important;
  }
}

/* ====== FAQ readability + chevron tap area ====== */
@media (max-width: 768px) {
  .faq-item {
    margin-bottom: 0.5rem;
  }
  .faq-question {
    padding: 14px 16px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  .faq-answer-inner {
    padding: 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
}

/* ====== Body text sizing (avoid iOS Safari zoom-on-focus + raise base) ====== */
@media (max-width: 640px) {
  body,
  article,
  article p,
  article li {
    font-size: 16px !important;
  }
  /* Inputs: 16px prevents iOS Safari from auto-zooming on focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }
  /* Stack form fields full-width */
  .demo-field input,
  form input,
  form button[type="submit"] {
    width: 100% !important;
  }
}

/* ====== Code blocks in docs/blog — wrap or scroll cleanly ====== */
@media (max-width: 768px) {
  pre, pre code {
    overflow-x: auto;
    white-space: pre;
    font-size: 0.85rem;
    -webkit-overflow-scrolling: touch;
  }
  code {
    word-break: break-word;
  }
}

/* ====== Pricing card on hero / pricing section — tighten on mobile ====== */
@media (max-width: 480px) {
  .pricing-card,
  .tier-card,
  .resource-card {
    padding: 1.25rem !important;
  }
  .pricing-card .price,
  .tier-price {
    font-size: 2rem !important;
  }
  .pricing-card ul li,
  .tier-card ul li {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }
}

/* ====== Comparison-table scroll-shadow indicator ====== */
@media (max-width: 768px) {
  table:not([data-mobile-card="true"]) {
    background-image:
      linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)) 100% 0,
      linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)),
      linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: #fff;
  }
}

/* ====== Footer responsive collapse ====== */
@media (max-width: 640px) {
  footer {
    text-align: center;
    padding: 1.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
  footer a {
    display: inline-block;
    padding: 6px 8px;
    min-height: 32px;
  }
}