/* ============================================================
   Seoly.io — Responsive polish (mobile + tablet)
   Loaded LAST so it can refine the base breakpoints.
   ============================================================ */

/* never allow sideways scroll on small screens */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video, table, pre { max-width: 100%; }
.out-box, pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px){
  .container { padding: 0 22px; }
  .section { padding: calc(72px * var(--density)) 0; }
  .section-sm { padding: calc(48px * var(--density)) 0; }
}

/* ---------- Small tablet / large phone (≤ 768px) ---------- */
@media (max-width: 768px){
  .nav { height: 62px; gap: 14px; }
  .brand { font-size: 18px; gap: 9px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-mark svg { width: 19px; height: 19px; }

  /* keep header actions tidy: hide the standalone search button (search lives in mobile menu + hero) */
  .nav-actions .btn-primary { padding: 10px 14px; font-size: 14px; }

  .section { padding: 52px 0; }
  .section-sm { padding: 40px 0; }
  .container { padding: 0 18px; }

  .display { font-size: clamp(32px, 9vw, 46px); }
  .h-sec { font-size: clamp(26px, 6.5vw, 34px); }
  .lead { font-size: 16px; }

  /* section header rows stack */
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-head-row .btn { align-self: stretch; justify-content: center; }

  /* hero */
  .hero { padding: 44px 0 52px; }
  .hero-inner { gap: 44px; }
  .hero-search { width: 100%; font-size: 14.5px; padding: 14px; }
  .hero-search kbd { display: none; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .hv-float { display: none; } /* floating chips crowd small screens */

  /* stats band: 2-up instead of 4 */
  .stats-band { padding: 44px 0; }
  .stats-band .grid.g-4 { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }

  /* sticky filter bar sits under the shorter header */
  .filter-bar { top: 62px; }
  .filter-scroll { padding: 12px 0; }

  /* footer */
  .site-footer { padding: 48px 0 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* tool pages */
  .tool-head { gap: 14px; }
  .tool-head .ico { width: 50px; height: 50px; border-radius: 14px; }
  .tool-head .ico svg { width: 26px; height: 26px; }
  .tool-shell { padding: 18px; }
  .tool-aside { position: static; } /* don't stick the sidebar on mobile */
  .tool-content { gap: 36px; }

  /* mega menu never shows on mobile (nav-links hidden), nothing to do */
}

/* ---------- Phone (≤ 560px) ---------- */
@media (max-width: 560px){
  .container { padding: 0 16px; }
  .display { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.08; }
  .lead { font-size: 15.5px; }

  /* buttons & tap targets: comfortable thumb sizes */
  .btn { padding: 13px 18px; }
  .btn-lg { padding: 15px 22px; }
  .icon-btn { width: 42px; height: 42px; }

  /* CTA / newsletter form stacks full-width */
  .cta-form { flex-direction: column; }
  .cta-form .field, .cta-form .btn { width: 100%; }
  .cta-band { padding: 32px 22px; border-radius: var(--radius); }

  /* segmented controls wrap cleanly and stay tappable */
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; text-align: center; padding: 10px 12px; }

  /* stat chips: 2 across, larger touch area */
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* result numbers shouldn't overflow */
  .result-big { font-size: clamp(34px, 12vw, 52px); word-break: break-word; }

  /* tool action rows wrap and go full width */
  .tool-actions { gap: 8px; }
  .tool-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* contact + 2-col helper grids collapse */
  .contact-row { grid-template-columns: 1fr; }

  /* tables (decision matrix, etc.) scroll instead of squashing */
  .tool-shell table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* search overlay: more room, easier to tap results */
  .search-overlay { padding: 8vh 14px 0; }
  .search-input-row { padding: 15px 16px; }
  .search-results a { padding: 13px 12px; }

  /* faq question padding tighter */
  .faq-q { padding: 16px 18px; font-size: 15.5px; }
  .faq-a { padding: 0 18px 18px; }

  /* stats band single emphasis still 2-up but tighter */
  .stats-band .grid.g-4 { gap: 26px 14px; }

  /* hero trust row centers */
  .hero-trust { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Tiny phones (≤ 380px) ---------- */
@media (max-width: 380px){
  .brand-dot, .brand-word { font-size: 17px; }
  .nav-actions .btn-primary span, .nav-actions .btn-primary { font-size: 13.5px; }
  .stat-row { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Touch devices: remove hover-only lift, keep tap feedback ---------- */
@media (hover: none){
  .card:hover { transform: none; }
  .card:active { transform: scale(0.99); }
  .btn:active { transform: scale(0.97); }
}