/* ===== kalispellseptic.com mobile overrides ===== */
@media (max-width: 768px) {
  /* ---- kill horizontal overflow globally ---- */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img, video, iframe, table, form, input, textarea, select { max-width: 100% !important; }
  /* ---- any inline 3-col grid collapses to 1 col ---- */
  div[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* watch/video grids */
  .watch-grid { grid-template-columns: 1fr !important; }
  article > div { grid-template-columns: 1fr !important; }
  /* ---- inline flex rows wrap ---- */
  div[style*="display:flex"] { flex-wrap: wrap !important; }
  div[style*="display:inline-flex"] { flex-wrap: wrap !important; }
  /* ---- nav: force mobile menu pattern ---- */
  .nav .container { flex-wrap: wrap !important; }
  .nav-links { display: none !important; }
  .nav-links.show { display: flex !important; position: absolute; top: 100%; left: 12px; right: 12px;
    flex-direction: column !important; background: #1e293b; padding: 10px 12px; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 1000; max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav-links li, .nav-links a { width: 100% !important; }
  .nav-toggle { display: block !important; }
  .nav-dropdown-content { position: static !important; display: none !important; background: #334155 !important;
    box-shadow: none !important; padding: 4px 0 4px 14px !important; width: 100% !important; max-height: none !important; }
  .nav-dropdown-content.show { display: block !important; }
  .nav-dropdown > a::after { float: right; }
  /* ---- hero + section spacing tighten ---- */
  .hero { padding: 30px 14px !important; }
  .hero h1 { font-size: 1.35rem !important; line-height: 1.3 !important; }
  .hero .container > div { padding: 20px 18px !important; }
  .section, .section-alt { padding: 28px 14px !important; }
  .container { padding: 0 14px !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .card { flex-direction: row !important; align-items: flex-start !important; }
  .card img { width: 64px !important; height: 64px !important; }
  /* ---- content width + tables ---- */
  .content { max-width: 100% !important; padding: 22px 16px !important; }
  table { display: block; overflow-x: auto; white-space: normal !important; }
  /* ---- footer ---- */
  .footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .footer-bottom p { font-size: 12px !important; }
  /* ---- tools page: keep the horizontal-scroll menu BUT constrain panes ---- */
  .tlwrap { padding: 12px !important; }
  .tlmenu { position: static !important; }
  #tool-pane { padding: 16px 12px !important; }
  #tool-pane h2 { font-size: 1.25rem !important; word-wrap: break-word !important; }
  /* ---- blog body type ---- */
  article h1 { font-size: 1.4rem !important; word-wrap: break-word !important; }
  article h2 { font-size: 1.2rem !important; }
  article figure { overflow-x: auto !important; }
}
/* chat widget squeeze */
@media (max-width: 480px) {
  #cw-panel { width: calc(100vw - 20px) !important; right: 10px !important; }
  #cw-fab { width: 50px !important; height: 50px !important; font-size: 22px !important; right: 14px !important; }
}