/* Eddy's Plumbing Co. — responsive layer.
   The page markup uses inline styles from the design build, so these rules
   use !important to override them at smaller screen sizes. */

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

html { scroll-behavior: smooth; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #0B2E38;
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0F7A93;
  outline-offset: 2px;
}

/* Nav links get a visible hover state */
nav a:hover { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.3fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: 1.7fr 1fr"],
  [style*="grid-template-columns: 1.8fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  section[style*="padding: 88px"],
  section[style*="padding: 96px"],
  section[style*="padding: 80px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  /* Every multi-column grid collapses to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero images keep a sensible height instead of filling a split panel */
  section img[style*="min-height"] {
    min-height: 260px !important;
    height: 260px !important;
  }

  /* Generous desktop padding is far too much on a phone */
  [style*="padding: 100px 40px"],
  [style*="padding: 96px 40px"],
  [style*="padding: 88px 40px"],
  [style*="padding: 80px 40px"],
  [style*="padding: 76px 56px"],
  [style*="padding: 72px 56px"],
  [style*="padding: 88px 56px"],
  [style*="padding: 72px 40px"],
  [style*="padding: 64px 40px"],
  [style*="padding: 60px 40px"],
  [style*="padding: 56px 40px"],
  [style*="padding: 52px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  header[style*="padding: 16px 40px"],
  div[style*="padding: 10px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer[style*="padding: 60px 40px 26px"] {
    padding: 44px 16px 24px !important;
  }

  /* Header stacks and centres */
  header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  header nav {
    width: 100%;
    gap: 14px !important;
  }

  /* Type scales down so headlines don't overflow */
  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 17px !important; }
  p, li, span, a, label { word-break: break-word; }

  /* Full-width tap targets for the primary actions */
  a[style*="padding: 16px 30px"],
  a[style*="padding: 16px 28px"],
  a[style*="padding: 15px 26px"],
  a[style*="padding: 16px 32px"] {
    width: 100%;
    text-align: center;
  }

  /* Cards and panels lose their oversized inner padding */
  [style*="padding: 40px"], [style*="padding: 38px"], [style*="padding: 36px"],
  [style*="padding: 34px"], [style*="padding: 32px"] {
    padding: 22px !important;
  }

  /* Gallery and card images shorten */
  img[style*="height: 280px"], img[style*="height: 340px"],
  img[style*="height: 400px"] {
    height: 220px !important;
  }
}

/* ---------- Print ---------- */
@media print {
  header, footer, nav, .skip-link { display: none !important; }
  body { background: #fff !important; }
}

/* Radio card selection states on the booking form */
.choice { transition: border-color 0.12s ease, background-color 0.12s ease; }
.choice:hover { border-color: rgba(15,122,147,0.55) !important; }
.choice:has(input:checked) {
  border: 2px solid #0F7A93 !important;
  background: rgba(15,122,147,0.07) !important;
}
.pill:has(input:checked) { font-weight: 600 !important; }
.choice:focus-within { outline: 3px solid rgba(15,122,147,0.35); outline-offset: 2px; }