/* ============================================================
   RoofScapes shared stylesheet
   ------------------------------------------------------------
   Pages are authored with inline styles for the desktop layout.
   This file holds the responsive overrides (phone <= 640px,
   tablet <= 900px), so they use !important to win over inline
   styles. Hooks are the rs-* classes on the page markup.
   ============================================================ */

:root {
  --rs-green: #003026;
  --rs-lime: #DBD407;
  --rs-lime-hover: #E9E425;
  --rs-bg: #FAFAF8;
  --rs-alt: #F3F3F0;
  --rs-slate: #70746F;
  --rs-ink: #141A17;
  --rs-font: 'Avenir Next', Avenir, 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
[data-edit-zone]:empty { display: none; }
body { overflow-x: hidden; }

/* review dots (mobile only) */
.rs-review-dots { display: none; gap: 2px; align-items: center; }
.rs-review-dots .rs-dot { width: 20px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rs-review-dots .rs-dot span { width: 8px; height: 8px; border-radius: 50%; background: #D9D9CB; transition: background .2s ease, transform .2s ease; }
.rs-review-dots .rs-dot.is-active span { background: #003026; transform: scale(1.3); }

/* ---------- tablet and down ---------- */
@media (max-width: 900px) {
  .rs-x { padding-left: 28px !important; padding-right: 28px !important; }
  .rs-pad { padding-top: 64px !important; padding-bottom: 72px !important; }
  .rs-hero-pad { padding-top: 128px !important; padding-bottom: 64px !important; }
  .rs-nav-inner { padding: 12px 24px !important; }
  .rs-burger { padding: 14px 11px !important; margin-right: -4px; }
  /* full-viewport menu that scrolls */
  .rs-mobile-menu { position: fixed !important; top: 68px; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none !important; padding: 6px 24px 40px !important; }
  .rs-mobile-menu > a { min-height: 48px; display: flex; align-items: center; padding: 0 !important; font-size: 18px !important; border: 0 !important; }
  .rs-mobile-menu > :nth-child(11) { margin-top: 6px; border-top: 1px solid rgba(250,250,248,.12) !important; padding-top: 6px !important; }
  .rs-mobile-menu > :nth-child(13) { border-bottom: 1px solid rgba(250,250,248,.12) !important; padding-bottom: 6px !important; }
  .rs-mobile-menu > :last-child { margin-top: 18px !important; }
  .rs-mobile-menu > :last-child a { padding: 14px 22px !important; line-height: 1.2; }
  .rs-mobile-menu > :last-child a[href^="tel:"] { padding: 14px 0 !important; }
  .rs-trust-sep { display: none !important; }
  .rs-footer-wrap { padding-top: 56px !important; }
  .rs-footer-cols { gap: 36px 48px !important; }
  .rs-footer-bottom { margin-top: 40px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  img { max-width: 100%; }
  .rs-x { padding-left: 20px !important; padding-right: 20px !important; }
  .rs-pad { padding-top: 56px !important; padding-bottom: 64px !important; }
  .rs-hero-pad { padding-top: 108px !important; padding-bottom: 56px !important; }
  .rs-b64 { padding-bottom: 64px !important; }

  /* type scale: fluid clamps, balanced wrapping so no orphaned last words */
  h1 { font-size: clamp(34px, 9.4vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -.015em !important; text-wrap: balance; }
  h2 { font-size: clamp(26px, 7.6vw, 30px) !important; line-height: 1.14 !important; text-wrap: balance; }
  h3 { font-size: clamp(20px, 5.6vw, 22px) !important; }
  p, .rs-faq-body, .rs-review-card p, [data-edit-list] span, [data-rs-checklist] span { font-size: 16px !important; line-height: 1.6; }
  .rs-quote-num { font-size: 30px !important; }
  .rs-pullquote { font-size: 26px !important; line-height: 1.25 !important; }
  .rs-contact-phone { font-size: 32px !important; }

  /* nav */
  .rs-nav-inner { padding: 10px 16px 10px 20px !important; }
  .rs-mobile-menu { top: 64px; padding: 6px 20px 40px !important; display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; }
  .rs-mobile-menu > :first-child, .rs-mobile-menu > :nth-child(n+11) { grid-column: 1 / -1; }

  /* homepage hero */
  .rs-home-hero { min-height: 600px !important; height: 100svh !important; }
  .rs-home-hero-inner { gap: 18px !important; padding: 84px 20px 96px !important; }
  .rs-home-hero .rs-logo { width: 232px !important; }
  .rs-home-hero .rs-cta { max-width: 320px; }

  /* primary buttons go full width */
  .rs-cta { display: block !important; width: 100%; box-sizing: border-box; text-align: center; padding-top: 16px !important; padding-bottom: 16px !important; }

  /* trust band: reviews line on top, the two shorter items side by side */
  .rs-trust { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 12px !important; padding: 18px 20px 20px !important; justify-items: center; }
  .rs-trust > div { font-size: 12.5px; }
  .rs-trust > div:first-of-type { grid-column: 1 / -1; }

  /* services icon grid: two columns, badges large enough to read the built-in labels */
  .rs-svc-grid { gap: 18px 20px !important; margin-top: 28px !important; }
  .rs-svc-grid > a { width: calc((100% - 20px) / 2) !important; max-width: 150px; }

  /* reviews: one card per view, native swipe, dots between the arrows */
  .rs-review-track { gap: 16px !important; scroll-padding-left: 0; }
  .rs-review-card { flex: 0 0 100% !important; padding: 22px !important; scroll-snap-stop: always; }
  .rs-review-nav { justify-content: center; gap: 14px !important; }
  .rs-review-dots { display: flex; }

  /* forms: single column, 16px inputs so iOS does not zoom */
  .rs-form-card { padding: 22px 18px !important; border-radius: 14px !important; }
  .rs-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .rs-form-grid input, .rs-form-grid select, .rs-form-grid textarea { font-size: 16px !important; min-height: 48px; }
  .rs-form-grid select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23003026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px !important; }
  .rs-form-grid textarea { min-height: 120px; }
  .rs-form-grid button { min-height: 52px; }

  /* two-column flex sections stack with a smaller gap */
  .rs-cols { gap: 32px !important; }
  .rs-why-list { gap: 20px !important; margin-top: 24px !important; }

  /* footer: brand, then Services + Company side by side, then Contact */
  .rs-footer-wrap { padding-top: 48px !important; }
  .rs-footer-cols { gap: 28px 24px !important; }
  .rs-footer-cols > div { flex: 1 1 40% !important; min-width: 0; }
  .rs-footer-cols > div:first-child { flex-basis: 100% !important; max-width: none !important; }
  .rs-footer-cols > div:first-child img { height: 60px !important; }
  .rs-footer-cols > div > div { gap: 0 !important; }
  .rs-footer-cols a { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px !important; }
  .rs-footer-bottom { margin-top: 28px !important; padding: 18px 0 24px !important; gap: 4px 16px !important; }
  .rs-footer-phone { font-size: 26px !important; }

  /* map */
  .rs-map-canvas { height: 360px !important; }
  .rs-map-note { margin-top: 10px !important; }
  .rs-card a, .rs-review-card a { min-height: 44px; display: inline-flex; align-items: center; }

  /* roofing page: single-column timeline, no connector line */
  .rs-timeline { gap: 14px !important; }
  .rs-timeline > div:first-child { width: 40px !important; }
  .rs-timeline > div:first-child > span:first-child { width: 40px !important; height: 40px !important; }
  .rs-timeline > div:first-child > span[aria-hidden] { display: none !important; }
  .rs-timeline-body { padding-bottom: 32px !important; }
  .rs-roof-hero-img { margin-bottom: -72px !important; }
  .rs-roof-after-hero { padding-top: 96px !important; padding-bottom: 40px !important; }

  /* service page hero photo below the text, not dominating the screen */
  .rs-svc-hero-img { margin-bottom: -40px !important; width: min(280px, 74vw) !important; }
  .rs-svc-scope { gap: 12px 24px !important; }

  /* about */
  .rs-about-photos { gap: 18px !important; margin-top: 32px !important; }
  .rs-about-photos figure { min-width: 0 !important; max-width: none !important; flex-basis: 100% !important; }
  .rs-about-closing { margin-top: 36px !important; }
  .rs-values-grid { gap: 26px !important; }

  /* quote CTA */
  .rs-quote-copy p { font-size: 16px !important; }
  .rs-quote-human { margin-top: 28px !important; }

  /* faq */
  .rs-faq-btn { padding: 16px 16px !important; gap: 12px !important; min-height: 56px; }
  .rs-faq-body { padding: 0 16px 18px !important; }

  /* section dividers: no hairline seams */
  svg[viewBox="0 0 1440 64"] { height: 40px !important; }
}

@media (max-width: 380px) {
  .rs-svc-grid > a { max-width: 132px; }
  .rs-trust > div { font-size: 12px; }
}