/* site.css — global responsive improvements for tdservicellc.com */
/* Loaded after page-level styles to apply mobile/spacing fixes   */

/* ── Prevent horizontal scroll everywhere ─────────────────────── */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
* { min-width: 0; }

/* ── Nav: keep it breathable on smaller desktops ──────────────── */
nav#main-nav { padding-left: 1.25rem; padding-right: 1.25rem; }
nav#main-nav .nav-links { gap: .65rem; }
nav#main-nav .nav-links a { font-size: .72rem; }

/* ── Mobile padding — the big fix ─────────────────────────────── */
@media (max-width: 767px) {
  section {
    padding-top:    2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left:   1.1rem !important;
    padding-right:  1.1rem !important;
  }
  .page-hero {
    padding-top:    5rem   !important;
    padding-bottom: 2.25rem !important;
    padding-left:   1.1rem !important;
    padding-right:  1.1rem !important;
  }
  .container { padding-left: 0; padding-right: 0; }
  /* Ticker stays full-width */
  .ticker-wrap { padding: .4rem 0; }
}

/* ── Hero headline scaling ─────────────────────────────────────── */
@media (max-width: 600px) {
  .page-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.8rem) !important; }
  .page-hero p  { font-size: .95rem !important; }
  .sec-title    { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
}

/* ── Two-column grids collapse to 1 col on small phones ────────── */
@media (max-width: 480px) {
  .size-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .color-row { gap: .65rem; }
}

/* ── Mobile menu overlay fix ───────────────────────────────────── */
.mob-nav a { font-size: 1.5rem !important; }
@media (max-width: 420px) {
  .mob-nav a { font-size: 1.25rem !important; gap: 1.75rem; }
  .mob-cta   { font-size: 1.1rem !important; padding: .65rem 2rem !important; }
}
.mob-nav { overflow-y: auto; padding: 2rem 1rem; gap: 1.5rem !important; }

/* ── Card grids — breathe on tablet ───────────────────────────── */
@media (max-width: 860px) {
  .bk-row, .inv-row {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 500px) {
  .bk-row, .inv-row { grid-template-columns: 1fr !important; }
}

/* ── Footer spacing fix ────────────────────────────────────────── */
@media (max-width: 767px) {
  footer, .site-footer { padding: 2rem 1.1rem !important; }
}

/* ── Form elements: full width on mobile ───────────────────────── */
@media (max-width: 640px) {
  .form-row, .form-grid, .ci-grid, .asf-grid {
    grid-template-columns: 1fr !important;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* ── Tab bars — horizontal scroll on mobile ────────────────────── */
.merch-tabs, .tab-bar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.merch-tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .merch-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: .5rem;
    gap: .5rem !important;
  }
  .merch-tab { flex-shrink: 0; padding: .55rem 1.1rem !important; font-size: .78rem !important; }
  .tab-bar   { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: .5rem; }
  .tab-btn   { flex-shrink: 0; font-size: .72rem !important; padding: .45rem .85rem !important; }
}

/* ── Booking / pricing grids ───────────────────────────────────── */
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── Printful showcase (existing merch page) ───────────────────── */
@media (max-width: 720px) {
  .pf-showcase { flex-direction: column !important; gap: 1.5rem !important; }
  .pf-photo    { max-width: 100% !important; }
}

/* ── Table overflow on mobile ──────────────────────────────────── */
@media (max-width: 767px) {
  .feed-section > div, .bk-list { overflow-x: auto; }
  table { min-width: 520px; }
}

/* ── Touch target minimum size ─────────────────────────────────── */
@media (max-width: 767px) {
  button, a.btn-gold, a.nav-phone, a.pf-order-btn,
  .process-btn, .lc-btn, .hdr-btn { min-height: 42px; }
}

/* ── Smooth spacing between sections ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1100px) {
  section { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}