/* Site-wide fixes for the live site */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary > span[aria-hidden="true"] { transform: rotate(45deg); display: inline-block; }

/* About Us dropdown */
.hdr-dd { display: none !important; z-index: 50; }
.dd.open .hdr-dd { display: flex !important; }
.hdr-dd a:hover { background: #F4F4F4; }

/* Process steps number themselves, so hidden steps never leave a gap */
.steps { counter-reset: st; }
.steps > li { counter-increment: st; }
.steps .pn { font-size: 0 !important; }
.steps .pn::before { content: counter(st, decimal-leading-zero); font-size: 28px; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  body::after { content: ""; display: block; height: 84px; background: #111111; }

  /* Headings sized for a phone */
  h2[style*="font-size: 4"] { font-size: 32px !important; line-height: 1.1 !important; }
  h2[style*="font-size: 36px"] { font-size: 30px !important; }
  h2[style*="font-size: 32px"] { font-size: 26px !important; }
  h2 strong[style*="font-size: 40px"] { font-size: 30px !important; }

  /* Tighter section spacing */
  [style*="padding: 96px 24px"], [style*="padding: 88px 24px"], [style*="padding: 84px 24px"], [style*="padding: 80px 24px"] {
    padding: 52px 18px !important;
  }
  [style*="padding: 72px 24px"], [style*="padding: 64px 24px"] { padding: 44px 18px !important; }
  [style*="gap: 56px"], [style*="gap: 48px"] { gap: 32px !important; }
  [style*="gap: 40px"] { gap: 28px !important; }

  /* Eyebrow labels: less tracking so they don't break awkwardly */
  span[style*="letter-spacing: 0.2em"] { letter-spacing: 0.1em !important; }

  /* Hero checklist reads cleanly when lines wrap */
  .ph-checks { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; }
  .ph-checks li { text-align: left; align-items: flex-start !important; }
  .ph-checks li svg { flex: none; margin-top: 2px; }

  /* Reviews */
  .rv-badge { width: 100%; box-sizing: border-box; flex-wrap: wrap; gap: 12px !important; padding: 14px 16px !important; }
  .rv-div { display: none !important; }
  [data-track] > figure { flex: 0 0 86% !important; box-sizing: border-box; padding: 20px !important; }

  /* Cards and form */
  li[style*="padding: 26px"], li[style*="padding: 24px"], li[style*="padding: 22px"] { padding: 20px !important; }
  form[name="walkthrough"] { padding: 22px 18px !important; }

  /* Floating Book / Call buttons: compact on phones */
  .float-cta { right: 12px !important; bottom: 12px !important; }
  .float-cta a:first-child { height: 50px !important; padding: 0 18px !important; font-size: 14.5px !important; }
  .float-cta a:last-child { width: 50px !important; height: 50px !important; }
}

/* ---------- Header stays pinned on every page, every screen ---------- */
.hdr-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; z-index: 999 !important; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.hdr-spacer { display: block !important; }
.hdr-fixed .hdr-logo img { transition: height .2s ease; }
@media (min-width: 761px) {
  .hdr-scrolled .hdr-top { display: none !important; }
  .hdr-scrolled .hdr-row { padding-top: 6px !important; padding-bottom: 6px !important; gap: 4px !important; }
  .hdr-scrolled .hdr-logo img { height: 44px !important; }
  .dd:hover .hdr-dd, .dd:focus-within .hdr-dd { display: flex !important; }
}

/* ---------- Bottom contact form: wide, centered, two columns ---------- */
.form-wide .fc { container-type: inline-size; }
@container (min-width: 640px) {
  .form-wide form[name="walkthrough"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 16px !important; padding: 36px !important; }
  .form-wide form[name="walkthrough"] > * { grid-column: 1 / -1; }
  .form-wide form[name="walkthrough"] > label:has(select),
  .form-wide form[name="walkthrough"] > label:has(input[type="text"]),
  .form-wide form[name="walkthrough"] > label:has(input[type="tel"]),
  .form-wide form[name="walkthrough"] > fieldset { grid-column: auto; }
  .form-wide form[name="walkthrough"] > h3, .form-wide form[name="walkthrough"] > h3 + p { text-align: center; }
}

/* Reviews page: hide the 'Read all reviews' link on the page itself */
.rv-grid a[href="/reviews/"] { display: none !important; }

/* ---------- Address suggestions ---------- */
.addr-wrap { position: relative; }
.addr-list { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; background: #ffffff; color: #111111; border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.25); z-index: 60; font-size: 15px; font-weight: 500; text-align: left; }
.addr-list li { padding: 11px 12px; border-radius: 6px; cursor: pointer; line-height: 1.35; }
.addr-list li[aria-selected="true"], .addr-list li:hover { background: #F4F4F4; }
.addr-list .addr-note { padding: 6px 12px 2px; font-size: 11px; color: #777777; cursor: default; }

/* ---------- Booking calendar (LeadConnector) ----------
   Same rules as the Parish Outdoor Builders /book page: no lazy loading,
   scrolling allowed, an 820px floor on desktop and 1180px on phones so the
   mobile calendar is never clipped, and a direct link if the frame fails. */
.bookframe { max-width: 920px; margin: 0 auto; box-sizing: border-box; background: #ffffff; border: 1px solid #E4E4E4; border-radius: 14px; padding: 8px; overflow: hidden; box-shadow: 0 14px 38px rgba(9, 18, 32, 0.10); }
.bookframe iframe { display: block !important; width: 100% !important; max-width: 100% !important; border: 0 !important; min-height: 820px; border-radius: 10px; }
.bookalt { max-width: 640px; margin: 0 auto 14px; font-size: 13.5px; color: #6B6B6B; text-align: center; }
.bookalt a { color: #111111; font-weight: 700; text-decoration: underline; }
@media (max-width: 760px) {
  .bookframe { padding: 6px; }
  .bookframe iframe { min-height: 1180px; }
}

/* ---------- Desktop header: logo left, menu right (like parishoutdoorbuilders.com) ---------- */
@media (min-width: 1025px) {
  header .hdr-row { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; max-width: 1280px; margin: 0 auto; padding: 14px 40px !important; gap: 32px !important; }
  header .hdr-nav { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .hdr-scrolled header .hdr-row, header.hdr-scrolled .hdr-row { padding-top: 6px !important; padding-bottom: 6px !important; }
}