/* Santa Clara Tree Pros — shared stylesheet
   Clean, modern contractor aesthetic: forest greens + earth tones.
   Mobile-first, responsive. No external assets. */

:root{
  --green-950:#0d2818;
  --green-900:#143d24;
  --green-800:#1a4f2e;
  --green-700:#22663a;
  --green-600:#2b7f47;
  --green-500:#35995a;
  --green-100:#dfece2;
  --green-50:#f0f6f1;
  --gold:#d9a441;
  --gold-dark:#b9862f;
  --cream:#faf8f2;
  --ink:#26302a;
  --muted:#5c6b60;
  --bark:#4a3a28;
  --white:#ffffff;
  --radius:12px;
  --shadow:0 6px 24px rgba(20,61,36,.10);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.68;font-size:17px}
img{max-width:100%}
a{color:var(--green-700)}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green-900);color:#fff;padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:0}

/* ---------- Header ---------- */
.site-header{background:var(--white);box-shadow:0 2px 12px rgba(20,61,36,.08);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem;position:relative}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--green-900);font-size:1.15rem}
.logo-mark{width:34px;height:34px;flex:none}
.logo-text strong{color:var(--green-700)}
.nav-check{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem}
.nav-burger span{display:block;width:26px;height:3px;background:var(--green-900);border-radius:2px}
.main-nav{display:flex;align-items:center;gap:1.1rem}
.main-nav>a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.98rem}
.main-nav>a:hover{color:var(--green-700)}
.nav-drop{position:relative}
.nav-drop-btn{cursor:pointer;font-weight:600;font-size:.98rem;color:var(--ink);user-select:none}
.nav-drop-btn:hover{color:var(--green-700)}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + .6rem);left:0;min-width:250px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;z-index:120}
.nav-drop-menu a{display:block;padding:.55rem .8rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.95rem}
.nav-drop-menu a:hover{background:var(--green-50);color:var(--green-800)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:999px;padding:.8rem 1.6rem;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:var(--green-950);box-shadow:0 4px 14px rgba(217,164,65,.4)}
.btn-primary:hover{background:#e3b155}
.btn-secondary{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-secondary:hover{background:rgba(255,255,255,.24)}
.btn-call{background:var(--green-700);color:#fff!important;font-size:.95rem;padding:.65rem 1.2rem;white-space:nowrap}
.btn-call:hover{background:var(--green-600)}
.btn-light{background:#fff;color:var(--green-900)}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.15)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--green-950) 0%,var(--green-800) 62%,var(--green-700) 100%);color:#fff;padding:4rem 0 3.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M110 18 L62 96 L86 96 L52 160 L168 160 L134 96 L158 96 Z'/%3E%3Crect x='103' y='160' width='14' height='26'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:2.4rem;line-height:1.2;margin-bottom:1rem;max-width:16em}
.lede{font-size:1.15rem;opacity:.94;max-width:38em;margin-bottom:1.6rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1.2rem}
.trust-row{font-size:.92rem;opacity:.85}

/* ---------- Sections ---------- */
.section{padding:3.5rem 0}
.section-alt{background:var(--green-50)}
.section h2{font-size:1.8rem;color:var(--green-900);margin-bottom:1rem;line-height:1.3}
.section h3{font-size:1.25rem;color:var(--green-800);margin:1.6rem 0 .6rem}
.section p{margin-bottom:1rem;max-width:44em}
.section ul,.section ol{margin:0 0 1.2rem 1.3rem;max-width:44em}
.section li{margin-bottom:.45rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem}
.card h3{margin-top:0}
.card h3 a{color:var(--green-800);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{font-size:.96rem;color:var(--muted)}
.card .card-link{font-weight:700;font-size:.95rem}

ul.check-list{list-style:none;margin-left:0}
ul.check-list li{position:relative;padding-left:1.9rem}
ul.check-list li::before{content:"✓";position:absolute;left:0;color:var(--green-600);font-weight:800}

.callout{background:#fff8e8;border-left:5px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.3rem;margin:1.5rem 0;max-width:44em}
.callout strong{color:var(--bark)}

.chip-list{list-style:none!important;margin-left:0!important;display:flex;flex-wrap:wrap;gap:.6rem}
.chip-list li{margin:0!important}
.chip-list a{display:inline-block;background:#fff;border:1.5px solid var(--green-100);color:var(--green-800);text-decoration:none;font-weight:600;font-size:.95rem;padding:.5rem 1rem;border-radius:999px}
.chip-list a:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:.8rem;overflow:hidden}
.faq summary{cursor:pointer;font-weight:700;color:var(--green-900);padding:1.1rem 1.3rem;list-style:none;position:relative;padding-right:2.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:1rem;font-size:1.4rem;color:var(--green-600);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details .faq-a{padding:0 1.3rem 1.2rem;color:var(--ink)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--green-900),var(--green-700));color:#fff;padding:3rem 0;margin-top:1rem}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-inner h2{color:#fff;margin-bottom:.4rem;font-size:1.7rem}
.cta-inner p{opacity:.9;margin:0}
.cta-btns{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-950);color:#dfe8df;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:3rem 1.25rem 2rem;max-width:1120px;margin:0 auto}
.footer-brand{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:.7rem}
.footer-col p{font-size:.95rem}
.footer-h{color:#fff;font-weight:700;margin-bottom:.8rem;font-size:1rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.45rem}
.footer-links a{color:#c4d4c4;text-decoration:none;font-size:.95rem}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-bar{border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0;font-size:.88rem;color:#a9bfa9}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:1rem 1.25rem 0;font-size:.9rem;color:var(--muted)}
.breadcrumb a{color:var(--green-700);text-decoration:none}
.breadcrumb span{margin:0 .4rem}

/* ---------- Forms ---------- */
.quote-form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;max-width:640px}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-weight:700;margin-bottom:.35rem;color:var(--green-900)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem .9rem;border:1.5px solid #d8ddd6;border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- Tables ---------- */
.cost-table{width:100%;border-collapse:collapse;margin:1.4rem 0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.97rem}
.cost-table th{background:var(--green-800);color:#fff;text-align:left;padding:.85rem 1rem}
.cost-table td{padding:.8rem 1rem;border-top:1px solid var(--green-100)}
.cost-table tr:nth-child(even) td{background:var(--green-50)}

/* ---------- Blog ---------- */
.post-meta{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem}
.post-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.8rem;display:flex;flex-direction:column}
.post-card h3{margin:0 0 .5rem}
.post-card h3 a{color:var(--green-900);text-decoration:none}
.post-card h3 a:hover{color:var(--green-600)}
.post-card p{color:var(--muted);font-size:.96rem;flex:1}

/* ---------- Sticky mobile call button ---------- */
.mobile-call{display:none}
@media(max-width:899px){
  body{padding-bottom:4.6rem}
  .mobile-call{display:flex;align-items:center;justify-content:center;gap:.5rem;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;background:var(--green-700);color:#fff!important;text-decoration:none;font-weight:800;font-size:1.1rem;padding:.95rem;border-radius:999px;box-shadow:0 8px 24px rgba(20,61,36,.35)}
  .mobile-call:hover{background:var(--green-600)}
}

/* ---------- Responsive ---------- */
@media(max-width:899px){
  .nav-burger{display:flex}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:1rem 1.25rem 1.4rem;box-shadow:0 12px 24px rgba(20,61,36,.12);gap:.2rem}
  #nav-toggle:checked ~ .main-nav{display:flex}
  .main-nav>a,.nav-drop-btn{display:block;padding:.7rem .2rem;border-bottom:1px solid var(--green-100)}
  .nav-drop-menu{position:static;box-shadow:none;padding:.2rem 0 .4rem 1rem;display:none}
  #nav-services:checked ~ .nav-drop-menu{display:block}
  .nav-drop-menu a{padding:.5rem .2rem}
  .main-nav .btn-call{margin-top:.8rem;text-align:center}
  .hero h1{font-size:1.9rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
}
@media(min-width:900px){
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu,
  #nav-services:checked ~ .nav-drop-menu{display:block}
  .nav-drop-btn{pointer-events:none}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  body{font-size:16px}
}