/* ============================================================
   Buoy IT Solutions — responsive rules
   Added August 2026 (mobile optimization round 1).

   WHY THIS FILE EXISTS
   These rules used to live in an inline <style> block inside SiteHeader
   (home.jsx). That made site-wide layout behaviour a side-effect of one
   component: any page that rendered a different header lost the .two-col
   collapse silently. They live here now, linked from every content page.

   EVERY RULE IS INSIDE A max-width QUERY. Nothing here changes the desktop
   rendering. If you add a rule, keep it that way — desktop is signed off.
   ============================================================ */

/* ---- Navigation: inline nav → menu button ----
   Below 975px seven nav items can't fit alongside the CALL button, so they are
   replaced by a menu button — never hidden without a replacement. The phone
   number stays visible at every width; it is the primary action for a local
   services business.

   975, not 900: the breakpoint was set when the nav had six items. Adding
   "Reviews" as a seventh pushed the real minimum to ~980px, and between 901 and
   975 the links silently painted UNDERNEATH the CALL button — "Contact" was
   overlapped by 43px and unclickable. Re-measure this number whenever a nav item
   is added or renamed, and assert on the LAST LINK's right edge vs the button's
   left edge, not on the nav container's edge (see .site-nav below). */
@media (max-width: 975px) {
  .site-nav { display: none !important; }
  .site-burger { display: inline-flex !important; }
  .site-cta-label { display: none; }
}
@media (min-width: 976px) {
  .site-menu { display: none !important; }
}

/* ---- Two-column sections stack ----
   Any grid that should become one column on a phone carries .two-col. */
@media (max-width: 760px) {
  .two-col { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Phone-sized adjustments ---- */
@media (max-width: 640px) {
  /* Vertical rhythm. Section padding is written as var(--space-8)/9 inline
     throughout the site, so retuning the tokens here reaches every section
     at once — including inline styles, which a class could not override.
     Desktop values are untouched. */
  :root {
    --space-7: 2rem;    /* 48 → 32 */
    --space-8: 3rem;    /* 64 → 48 */
    --space-9: 3.5rem;  /* 96 → 56 */
  }

  .site-head-row { height: 70px !important; gap: 12px !important; }
  .site-logo img { height: 42px !important; }
  .site-logo span > span:first-child { font-size: 17px !important; }
  .site-logo span > span:last-child { font-size: 10.5px !important; }
}

/* ---- Tap targets (iOS/Android 44px minimum) ----
   Applied at touch widths only so desktop hit areas and spacing are unchanged. */
@media (max-width: 900px) {
  /* Header call button — the primary conversion action on a phone. */
  .site-call button { min-height: 44px !important; }

  /* Footer link lists: 18px text rows are not a target. */
  .foot-link {
    display: flex !important;
    align-items: center;
    min-height: 44px;
  }
  .foot-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot-social { width: 44px !important; height: 44px !important; }
}

/* ---- Testimonial rotator dots ----
   The button is the target; the <span> inside is the visible 9px dot, so the
   two can be sized independently. The first attempt inflated the button with a
   transparent border and pulled it back with a negative margin — that made the
   boxes OVERLAP by 26px at a 17px pitch, so later siblings won the hit test and
   only the last dot actually gained a target. Exclusive boxes only.

   Desktop keeps the original 9px dot / 8px gap exactly. */
.tst-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

@media (max-width: 900px) {
  /* 44px of exclusive width each. Gap goes to 0 because the box now carries the
     spacing itself — keeping the 8px gap would push the row 40px wider for nothing. */
  .tst-dot { width: 44px; height: 44px; }
  .tst-dots { gap: 0 !important; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Three-column card grids ----
   Six cards read as two even rows of three on a laptop. Carrying an explicit
   3-column track (rather than auto-fit) is what guarantees the rows stay even:
   auto-fit fits as many as will go, which is how the WiFi page ended up 3 + 1.
   Any grid that should step 3 -> 2 -> 1 carries .three-col. */
@media (max-width: 1040px) {
  .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .three-col { grid-template-columns: minmax(0, 1fr) !important; }
}