/* Countwell — mobile layer. Link AFTER the page's main stylesheet on every page.
   Pages are laid out with inline styles, so these rules use attribute selectors
   and !important to override them below the breakpoints. Desktop is untouched. */

img, video, iframe, svg { max-width: 100%; }
body { overflow-x: clip; }

/* ---------- Tablet: ≤ 960px ---------- */
@media (max-width: 960px) {
  /* Two-column page layouts (content + sticky summary, text + image) stack. */
  main [style*="grid-template-columns:1."],
  main [style*="grid-template-columns: 1."],
  main [style*="grid-template-columns:0."],
  main [style*="grid-template-columns:2fr"],
  main [style*="grid-template-columns:3fr"] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }

  /* 3+ column card grids drop to two. */
  main [style*="repeat(3"], main [style*="repeat(4"], main [style*="repeat(5"], main [style*="repeat(6"],
  main [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Sticky side panels become normal flow once stacked. */
  main [style*="position:sticky"] { position: static !important; }

  h1 { font-size: clamp(40px, 7vw, 56px) !important; }
}

/* ---------- Phone: ≤ 680px ---------- */
@media (max-width: 680px) {
  body { font-size: 16px; }

  /* Every grid in the page body becomes one column. Opt out with class="keep-cols". */
  main [style*="grid-template-columns"]:not(.keep-cols):not(.site-row-grid),
  footer [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }

  /* Order builder / edit-order site rows: name on top, hours and remove
     side by side underneath — not stacked three deep. Excluded from the
     generic one-column collapse above so it gets this layout instead. */
  .site-row-grid { grid-template-columns: 1fr minmax(56px, auto) !important; grid-template-areas: "name name" "hours remove" !important; gap: 10px 12px !important; }
  .site-row-grid > :nth-child(1) { grid-area: name; }
  .site-row-grid > :nth-child(2) { grid-area: hours; }
  .site-row-grid > :nth-child(3) { grid-area: remove; align-self: center !important; min-width: 44px !important; }

  /* Side gutters and section padding. */
  [style*="max-width:1240px"], [style*="max-width:1400px"], [style*="max-width: 1240px"] { padding-left: 18px !important; padding-right: 18px !important; }
  main [style*="padding:76px"], main [style*="padding:72px"], main [style*="padding:64px"],
  main [style*="padding:56px"], main [style*="padding:48px"] { padding-top: 36px !important; padding-bottom: 40px !important; }
  .blueprint[style*="padding:32px"], .blueprint[style*="padding:28px"], .blueprint[style*="padding:44px"] { padding: 20px !important; }

  /* Type scale. */
  h1 { font-size: clamp(32px, 9.5vw, 42px) !important; line-height: 1.02 !important; max-width: none !important; }
  h2 { font-size: clamp(26px, 7.5vw, 34px) !important; }
  h3 { font-size: 22px !important; }
  [style*="font-size:46px"], [style*="font-size:48px"], [style*="font-size:52px"], [style*="font-size:56px"], [style*="font-size:64px"] { font-size: 36px !important; }
  p[style*="font-size:17px"], p[style*="font-size:18px"] { font-size: 16px !important; }

  /* Buttons: full-width in stacked rows, 44px targets, allowed to wrap. */
  .btn { min-height: 44px; max-width: 100%; white-space: nowrap; }
  main [style*="display:flex"][style*="gap:12px"] > .btn,
  main [style*="display:flex"][style*="gap:10px"] > .btn { flex: 1 1 100% !important; }

  /* Rows that were side-by-side label/value pairs keep that; other flex rows may wrap. */
  main [style*="display:flex"]:not([style*="justify-content:space-between"]):not([style*="flex-direction:column"]) { flex-wrap: wrap; }

  /* Inputs at 16px so iOS doesn't zoom on focus. */
  .input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* Short tables wrap their text; tables with 4+ columns scroll sideways inside their frame. */
  .table { width: 100%; }
  .table th, .table td { white-space: normal; }
  .table:has(th:nth-child(4)), .table:has(td:nth-child(4)) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table:has(th:nth-child(4)) th, .table:has(td:nth-child(4)) td { white-space: nowrap; }

  /* Column dividers become row dividers once cells stack. */
  main [style*="border-right:1px"], main [style*="border-left:1px"] { border-right: 0 !important; border-left: 0 !important; }

  /* Dialogs fit the screen. */
  .dialog { width: 100% !important; max-width: none !important; padding: 20px !important; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }

  /* Keep registration marks from causing sideways scroll at the screen edge. */
  .blueprint > .corner { display: none; }
  .blueprint.keep-marks > .corner { display: block; }
}

/* ---------- Header / menu (driven by _mobile.js) ---------- */
.cw-menu-btn { display: none; }
@media (max-width: 900px) {
  header .nav { flex-wrap: wrap; row-gap: 0; padding-left: 18px !important; padding-right: 18px !important; }
  header .nav > nav { display: none !important; order: 10; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 8px 0 12px; }
  header .nav > nav a { padding: 12px 2px; font-size: 16px; border-top: 1px solid var(--color-divider); }
  header.cw-open .nav > nav { display: flex !important; }
  header .nav > .btn { margin-left: 0 !important; order: 11; width: 100%; display: none; margin-bottom: 12px; min-height: 44px; }
  header.cw-open .nav > .btn { display: inline-flex; }
  .cw-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer; }
  .cw-menu-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .cw-menu-btn svg { width: 20px; height: 20px; }
  .nav-brand span + span { display: none; }
}