/* Compatibility & graceful degradation layer
   Keeps core design while softening reliance on newer features.
   Loaded after main styles so these act as overrides/fallbacks.
*/

/* --- Requested visual tuning overrides (size adjustments) --- */
/* 1. Hero heading +10% */
.hc-head { font-size: calc(1.1 * clamp(2.07rem,5.76vw,3.10rem)); }

/* 2. Phone mock width +10% (clamp components scaled) */
.phone-mock { width: calc(1.1 * clamp(250px, 32vw, 300px)); }

/* 3. Chat text +10% (applies to message body) */
.phone-mock .hc-msg .msg-content { font-size: 110%; }

/* 4. Primary CTA text +10% */
.hero-cluster .hc-cta-row .cta-primary .cta-text { font-size: calc(1.1 * 0.95rem); }

/* 5. Testimonials (feedback) text -10% */
.testimonial-card { font-size: 90%; }

/* New adjustments */
/* A. Benefits & Launch offer section titles larger */
.benefits-grid-section h2,
.pricing-offer h2,
#benefits-title,
.pricing-offer .pricing-title { font-size: 1.18em; }

/* B. Extra 10% vertical gap between hero text and header (increase top padding) */
.hero-cluster { padding-top: calc((var(--nav-h) + 60px) * 1.1); }

/* C. Launch offer final CTA button text +20% */
.pricing-offer .cta-primary .cta-text { font-size: 120%; }

/* D. Contractor feedback italic */
.testimonial-card { font-style: italic; }

/* Strengthen italic application in case nested elements or resets override it */
.testimonial-card * { font-style: inherit; }

/* Performance hint for Safari / Chrome compositor (benefit cards) */
.benefit-card { will-change: transform, opacity; }

/* If JS totally fails (no .revealed ever added), force visibility after a grace period via a helper class we can toggle in JS later if desired */
@keyframes benefitForceVisible { to { opacity:1; transform:none; } }
html:not(.js) .benefit-card { opacity:1 !important; transform:none !important; }

/* Higher contrast phone shell */
.phone-mock {
  background:#15181c; /* off-black dark grey for contrast */
  box-shadow:0 0 0 1px rgba(255,255,255,0.05), 0 6px 18px -6px rgba(0,0,0,0.55);
}
body.theme-light .phone-mock { background:#1b1e22; }


/* Desktop override: ensure side menu is available (original core CSS hides it >=900px) */
@media (min-width:900px){
  .side-menu { display:block; }
}

/* --- Desktop-only layout refinements (preserve mobile) --- */
@media (min-width: 992px) {
  /* 1. Hero spacing: reduce excessive top padding on large screens */
  .hero-cluster { padding-top: calc(var(--nav-h) + 28px); min-height: 88vh; }

  /* 2. Center benefits grid within a slightly wider frame but keep cards compact */
  .benefits-grid-section { display:flex; flex-direction:column; align-items:center; }
  .benefits-grid { max-width: 760px; margin-left:auto; margin-right:auto; }
  .benefits-grid-section .benefits-heading { letter-spacing:.18em; }

  /* 3. Launch offer width constraint + centering */
  .pricing-section { display:flex; flex-direction:column; align-items:center; }
  .pricing-wrapper { width:100%; display:flex; justify-content:center; }
  .pricing-offer { max-width: 880px; width:100%; }

  /* 4. Testimonial proportions: constrain line length & add vertical breathing */
  .testimonials-section { display:flex; flex-direction:column; align-items:center; }
  .testimonials-wrap { max-width: 1000px; width:100%; }
  .testimonial-card { max-width: 620px; margin-left:auto; margin-right:auto; padding:34px 34px 40px; line-height:1.4; }
  .testimonial-card .testimonial-quote { font-size: 1.05em; }

  /* 5. Footer horizontal layout tidy */
  .site-footer.simple .footer-inner { display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; text-align:left; }
  .site-footer.simple .footer-inner > * { flex:1 1 auto; }
  .site-footer.simple .privacy-note { max-width:520px; }
}

/* Clickable benefit cards (anchor) keep card look */
.benefits-grid .benefit-card[href] { display:block; color:inherit; text-decoration:none; }
.benefits-grid .benefit-card[href]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }


/* 1. Gradient text fallback (Firefox without proper background-clip behavior) */
.hc-head,
.hero-tagline,
.pricing-title {
  /* Provide a readable color before we intentionally make it transparent for supporting browsers */
  color: var(--text);
}

/* Re-apply the intended effect only when supported */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hc-head,
  .hero-tagline,
  .pricing-title {
    background: linear-gradient(120deg,var(--text) 0%, var(--primary) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 2. Backdrop blur fallback tightening (only adjust when blur works) */
.site-header,
.navbar {
  background: rgba(10,14,19,0.9); /* strong base */
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .site-header,
  .navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(10,14,19,0.72);
  }
  .side-menu[aria-hidden="false"] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}

/* 3. Aspect-ratio fallback (only if unsupported) */
@supports not (aspect-ratio: 1 / 1) {
  .phone-mock { height: 540px; } /* approximate proportional height */
}

/* 4. No-JS baseline visibility (if class stays on <html>) */
html.no-js .benefit-card,
html.no-js .hc-chat .hc-msg { opacity: 1 !important; transform: none !important; }

/* 5. Reduced motion override (manual opt-in via body.reduce-motion) */
body.reduce-motion .benefit-card,
body.reduce-motion .hc-chat .hc-msg { transition: none !important; opacity: 1 !important; transform: none !important; }

/* 6. Minor Firefox smoothing for gradient text fallback when transparent not applied */
@-moz-document url-prefix() {
  .hc-head,
  .hero-tagline,
  .pricing-title { text-shadow: 0 0 0 currentColor; }
}