/*
Theme Name: Tree Value Calculator
Theme URI: https://treevaluecalculator.us
Author: Tree Value Calculator
Description: Custom informational theme for treevaluecalculator.us built around the CTLA tree value calculator, with content pages designed for AdSense readiness.
Version: 1.0
Requires PHP: 7.4
Text Domain: tree-value-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --forest-deep:#123924;
  --forest:#1B5E35;
  --growth:#3A9A65;
  --paper:#F6F3EA;
  --paper-card:#FCFAF4;
  --ink:#1A2E22;
  --ink-muted:#5B6E63;
  --rule:#D8D2C0;
  --amber:#C98A2E;
  --amber-ink:#7A5314;
  --radius:4px;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  font-size:16px;
}
a{color:var(--forest);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ── ACCESSIBILITY ── */
.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--forest-deep);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius) 0;font-size:14px;font-weight:600;z-index:100;
}
.skip-link:focus{left:0;top:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--forest);outline-offset:2px;
}

/* ── NAV ── */
.site-nav{
  border-bottom:1px solid var(--rule);
  background:var(--paper-card);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--forest-deep);}
.brand img{display:block;}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500;flex-wrap:wrap;}
.nav-links .nav-menu-inner{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.nav-links .nav-menu-inner li{list-style:none;}
.nav-links a{color:var(--ink);}
.nav-links a:hover{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);}
.nav-cta{background:var(--forest);color:#fff;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;white-space:nowrap;}
.nav-cta:hover{background:var(--forest-deep);text-decoration:none;color:#fff;}
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper-card);cursor:pointer;position:relative;flex-shrink:0;
}
.menu-icon{position:absolute;left:12px;right:12px;top:21px;height:2px;background:var(--ink);}
.menu-icon::before,.menu-icon::after{
  content:'';position:absolute;left:0;right:0;height:2px;background:var(--ink);
}
.menu-icon::before{top:-7px;}
.menu-icon::after{top:7px;}

/* ── HERO ── */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--rule);}
.hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--growth);margin-bottom:14px;display:block;}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.2vw,50px);line-height:1.08;color:var(--forest-deep);letter-spacing:-.01em;margin-bottom:18px;}
.hero p{font-size:17px;color:var(--ink-muted);max-width:46ch;margin-bottom:26px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:var(--forest);color:#fff;padding:13px 24px;border-radius:var(--radius);font-weight:600;font-size:15px;}
.btn-primary:hover{background:var(--forest-deep);color:#fff;text-decoration:none;}
.btn-secondary{border:1px solid var(--rule);color:var(--ink);padding:13px 24px;border-radius:var(--radius);font-weight:600;font-size:15px;}
.btn-secondary:hover{border-color:var(--forest);text-decoration:none;}

/* ── RING GRAPHIC (signature element) ── */
.ring-figure{position:relative;width:280px;height:280px;margin:0 auto;}
.ring-figure svg{width:100%;height:100%;}
.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.ring-value{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--forest-deep);}
.ring-label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-top:2px;}

/* ── AD SLOT ── */
.ad-slot{
  border:1px dashed var(--rule);
  background:var(--paper-card);
  color:var(--ink-muted);
  font-family:var(--mono);
  font-size:12px;
  text-align:center;
  padding:22px 12px;
  border-radius:var(--radius);
}
.ad-slot-live{text-align:center;overflow:hidden;}

/* ── INTERNAL LINKING ── */
.explore-links{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;margin:36px 0;
}
.explore-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);}
.explore-links a{font-size:14px;font-weight:600;color:var(--forest);}
.related-guides{padding:44px 0 8px;border-top:1px solid var(--rule);margin-top:12px;}
.related-guides h2{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--forest-deep);margin-bottom:20px;}

/* ── SECTIONS ── */
section{padding:52px 0;}
.section-head{max-width:60ch;margin-bottom:34px;}
.section-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--growth);display:block;margin-bottom:8px;}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--forest-deep);margin-bottom:10px;}
.section-head p{color:var(--ink-muted);font-size:15.5px;}

/* growth-ring numbered steps: order matters (measure -> assess -> calculate) */
.rings-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ring-step{border:1px solid var(--rule);background:var(--paper-card);border-radius:var(--radius);padding:22px;}
.ring-num{font-family:var(--mono);font-size:12px;color:var(--growth);margin-bottom:10px;}
.ring-step h3{font-family:var(--serif);font-size:18px;color:var(--forest-deep);margin-bottom:8px;}
.ring-step p{font-size:14px;color:var(--ink-muted);}

/* article cards */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.article-card{border:1px solid var(--rule);background:var(--paper-card);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.article-card .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--amber-ink);background:#F3E4C4;display:inline-block;padding:3px 9px;border-radius:2px;margin:16px 16px 0;width:fit-content;}
.article-card h3{font-family:var(--serif);font-size:17px;color:var(--forest-deep);margin:12px 16px 6px;}
.article-card p{font-size:13.5px;color:var(--ink-muted);margin:0 16px 16px;flex:1;}
.article-card .read{font-size:13px;font-weight:600;margin:0 16px 16px;color:var(--forest);}

/* tool embed panel */
.tool-panel{background:var(--forest-deep);color:#fff;border-radius:8px;padding:44px 40px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;}
.tool-panel h2{font-family:var(--serif);font-weight:600;font-size:26px;margin-bottom:10px;}
.tool-panel p{color:rgba(255,255,255,.72);font-size:14.5px;max-width:44ch;}
.tool-panel .btn-primary{background:var(--amber);}
.tool-panel .btn-primary:hover{background:#B47A26;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--rule);padding:18px 0;}
.faq-item h3{font-family:var(--serif);font-size:16px;color:var(--forest-deep);margin-bottom:6px;}
.faq-item p{font-size:14px;color:var(--ink-muted);}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--rule);background:var(--paper-card);padding:40px 0 24px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:28px;}
.footer-col h4{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:12px;}
.footer-col a{display:block;font-size:14px;color:var(--ink);margin-bottom:8px;}
.footer-col .footer-menu-inner{list-style:none;margin:0;padding:0;}
.footer-col .footer-menu-inner li{list-style:none;}
.footer-col p{font-size:13.5px;color:var(--ink-muted);max-width:34ch;}
.footer-bottom{border-top:1px solid var(--rule);padding-top:18px;font-size:12.5px;color:var(--ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ── SIMPLE PAGE (about/contact/legal) ── */
.page-hero{padding:48px 0 32px;border-bottom:1px solid var(--rule);}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:38px;color:var(--forest-deep);}
.page-hero p{color:var(--ink-muted);margin-top:10px;font-size:15.5px;}
.prose{max-width:70ch;padding:40px 0;}
.prose h2{font-family:var(--serif);font-size:22px;color:var(--forest-deep);margin:28px 0 12px;}
.prose p{margin-bottom:14px;color:var(--ink);}
.prose ul{margin:0 0 14px 20px;}
.prose li{margin-bottom:6px;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0;}
.contact-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid var(--rule);border-radius:var(--radius);padding:11px 12px;
  font-family:var(--sans);font-size:14px;background:#fff;margin-bottom:16px;color:var(--ink);
}
.contact-form textarea{min-height:120px;resize:vertical;}
.contact-info h3{font-family:var(--serif);font-size:18px;color:var(--forest-deep);margin-bottom:8px;}
.contact-info p{font-size:14px;color:var(--ink-muted);margin-bottom:18px;}

@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr;}
  .ring-figure{width:200px;height:200px;}
  .rings-steps,.article-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .tool-panel{grid-template-columns:1fr;text-align:center;}
  .nav-toggle{display:block;}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper-card);border-bottom:1px solid var(--rule);
    flex-direction:column;padding:8px 24px 16px;gap:0;z-index:50;
  }
  .nav-links.open{display:flex;}
  .nav-links .nav-menu-inner{flex-direction:column;gap:0;width:100%;}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--rule);display:block;}
  .nav-cta{display:none;}
  .site-nav .wrap{position:relative;}
}