/*
Theme Name: 10x Property Services
Theme URI: https://10xpropertyservices.com/
Author: 10x Property Services
Description: Custom theme for 10x Property Services (tenx) - Buffalo, NY lawn, landscaping, hardscape, tree and snow removal.
Version: 1.0
Text Domain: tenx-property
*/

html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
body { margin: 0; background: #eff4f3; color: #0b1f1d; font-family: 'Public Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #0f766e; text-decoration: none; }
a:hover { color: #134e4a; }
img { max-width: 100%; display: block; }
::selection { background: #99f6e4; }

.nav-desk { display: flex; }
.burger { display: none; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes blobFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -24px); } }
@keyframes emGlow { 0%, 100% { box-shadow: 0 0 42px -10px rgba(232, 163, 61, 0.4); } 50% { box-shadow: 0 0 110px -10px rgba(232, 163, 61, 0.85); } }
@keyframes emDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.4; } }
@keyframes svcProgress { from { width: 0%; } to { width: 100%; } }
@keyframes scrollNudge { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0.3; } }
@keyframes emRingPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes emShake { 0%, 100%, 60% { transform: translateX(0) rotate(0); } 65% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } 85% { transform: translateX(-2px) rotate(-1deg); } 95% { transform: translateX(1px) rotate(0); } }

/* Shared "24/7 EMERGENCY TREE SERVICE" band elements — badge gets an
   expanding pulse ring (::before, independent of any inline animation on
   the element itself), the CTA gets a periodic attention-shake layered on
   top of its glow. */
.em-badge { position: relative; animation: emGlow 3s ease-in-out infinite; }
.em-badge::before { content: ''; position: absolute; inset: -5px; border-radius: 14px; border: 1.5px solid rgba(232,163,61,0.55); animation: emRingPulse 2.4s ease-out infinite; pointer-events: none; }
.em-alert-icon { animation: emDot 1.6s ease-in-out infinite; }
.em-cta { animation: emGlow 3s ease-in-out infinite, emShake 5s ease-in-out infinite; }

/* Animate the WHOLE "24/7 EMERGENCY TREE SERVICE" section, not just the
   badge/CTA line: the photo gets a slow Ken-Burns drift, the corner cutout
   accents pulse, and the numbered response-step badges pulse in sequence. */
@keyframes emImageZoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes emCornerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes emStepPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,163,61,0.4); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(232,163,61,0); } }
.em-media img { animation: emImageZoom 9s ease-in-out infinite alternate; }
.em-corner { animation: emCornerPulse 3.4s ease-in-out infinite; }
.em-step-num { animation: emStepPulse 2.6s ease-in-out infinite; }

/* Auto-updating "latest blog post" band on service/location pages */
.blog-embed { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s; }
.blog-embed:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(11,31,29,0.28); }
@media (max-width: 640px) { .blog-embed { grid-template-columns: 1fr !important; } }

/* GHL lead-form embeds (home + contact). form_embed.js measures the real
   form content and sets the iframe's own inline height once it loads
   (confirmed: it correctly reports ~500px on a short form) — min-height
   is just a fallback for the instant before that script runs, so it must
   NOT use !important or it permanently overrides the script's real
   measurement and leaves a dead blank gap under a shorter form. */
.ghl-embed iframe { min-height: 400px; }

details { background: #ffffff; border-radius: 16px; margin-bottom: 12px; }
details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font: 700 17px 'Space Grotesk', sans-serif; color: #0b1f1d; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font: 400 26px 'Space Grotesk'; color: #0f766e; flex-shrink: 0; transition: transform 0.25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { font: 400 15px/1.7 'Public Sans', sans-serif; color: #35504b; margin: 0; padding: 0 26px 24px; max-width: 680px; }

/* scroll-reveal base state (JS adds .rv-in when visible) */
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-rv].rv-in { opacity: 1; transform: translateY(0); }

[data-hw] { display: inline-block; transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-hw].hw-in { transform: translateY(0); }

@media (max-width: 960px) {
  .nav-desk { display: none !important; }
  .burger { display: flex !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .split-2 { grid-template-columns: 1fr !important; }
  .pad-x { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-quote { display: none !important; }
  .hero-stats { gap: 28px !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
  .svc-media { height: 360px !important; }
  .em-grid { grid-template-columns: 1fr !important; }
  .em-media { height: 340px !important; }
}

#mobile-menu { position: fixed; inset: 0; z-index: 60; background: #0b1f1d; display: none; flex-direction: column; padding: 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
#mobile-menu.open { display: flex; }
body.menu-open { overflow: hidden; }

/* Desktop nav dropdowns (Services / Areas)
   .nav-drop-panel sits flush against the trigger (top:100%, no margin) and is
   itself transparent/padded — the visible white card is the nested
   .nav-drop-card. That keeps the :hover chain unbroken across the visual gap
   (a plain margin-top gap there is a classic bug: the cursor leaves both
   elements while crossing it and the menu closes before you reach it). */
.nav-drop { position: relative; }
.nav-drop-panel {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px; z-index: 55;
}
.nav-drop-panel.open,
.nav-drop:hover .nav-drop-panel { display: block; }
.nav-drop-card {
  min-width: 240px; background: #ffffff; border-radius: 14px;
  box-shadow: 0 20px 44px -14px rgba(11,31,29,0.32); padding: 10px;
}
.nav-drop-panel a {
  display: block; padding: 9px 10px; border-radius: 8px; color: #134e4a;
  font: 500 14px 'Space Grotesk', sans-serif; white-space: nowrap;
}
.nav-drop-panel a:hover { background: #eff4f3; color: #0f766e; }
.nav-drop-cta { margin-top: 6px; border-top: 1px solid #e4efec; padding-top: 12px !important; color: #0f766e !important; font-weight: 700 !important; }
.nav-drop-trigger svg { transition: transform 0.2s; }
.nav-drop:hover .nav-drop-trigger svg,
.nav-drop-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mobile nav accordion (Services / Areas) */
.mm-panel { display: none; flex-direction: column; gap: 2px; padding: 4px 0 8px 14px; font: 500 16px 'Public Sans', sans-serif; }
.mm-panel.open { display: flex; }
.mm-panel a { color: #9fb5b1; padding: 7px 0; }
.mm-toggle svg { transition: transform 0.2s; }
.mm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }