/*
Theme Name: KidPort
Theme URI: https://kidport.app
Author: Gregorio Tech
Author URI: https://kidport.app
Description: Landing page theme for KidPort — child development tracking and childcare cost lookup for Vermont families. Matches the current KidPort brand (teal/gold/coral/mint) and the latest approved landing page copy.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kidport
*/

:root{
  --teal:#4BB3BF;
  --teal-deep:#3A8F99;
  --gold:#F6C863;
  --gold-deep:#E8B23F;
  --coral:#F0928C;
  --coral-deep:#DE6E67;
  --mint:#E8F4F3;
  --mint-deep:#D6EAE8;
  --white:#FFFFFF;
  --ink:#22343A;
  --ink-soft:#4E6068;
  --line: rgba(34,52,58,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--mint);
  color:var(--ink);
  font-family:'Nunito Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3{font-family:'Baloo 2', sans-serif; font-weight:700; letter-spacing:-0.01em; color:var(--teal);}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
.screen-reader-text{position:absolute; left:-9999px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; font-weight:700; font-size:14px; text-decoration:none;
  padding:12px 22px; border:none; cursor:pointer; transition:transform .12s, background .15s;
}
.btn:hover{transform:translateY(-1px);}
.btn-coral{background:var(--coral); color:#fff;}
.btn-coral:hover{background:var(--coral-deep);}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-deep);}

/* mobile menu */
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:1px solid var(--line); cursor:pointer; border-radius:10px; flex-shrink:0;}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--teal); margin:0 auto; transition:transform .2s, opacity .2s;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; position:relative;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.logo .mark{width:34px; height:34px; flex-shrink:0;}
.logo .word{font-family:'Baloo 2', sans-serif; font-weight:700; font-size:22px; color:var(--teal); white-space:nowrap;}
.navlinks{display:flex; gap:30px; font-size:15px; font-weight:700; list-style:none;}
.navlinks a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--teal);}

@media (max-width:840px){
  .nav .navlinks{
    display:flex; flex-direction:column; gap:0; width:100%;
    position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav.menu-open .navlinks{max-height:300px;}
  .navlinks a{display:block; padding:16px 20px; border-bottom:1px solid var(--line);}
  .navlinks a:hover{background:var(--mint);}
  .menu-toggle{display:flex;}
  .nav .btn-coral{display:none;}
}

.hero{background:var(--mint); padding:72px 0 88px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; top:-80px; right:-80px; width:280px; height:280px; border-radius:50%;
  background:var(--gold); opacity:.35; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-100px; left:-60px; width:220px; height:220px; border-radius:50%;
  background:var(--coral); opacity:.25; pointer-events:none;
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; min-width:0;}
.hero-inner > *{min-width:0;}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--coral-deep); margin-bottom:16px;
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--coral); flex-shrink:0;}
.hero h1{font-size:clamp(32px,4.4vw,50px); line-height:1.15; color:var(--teal); margin-bottom:18px; max-width:16ch; overflow-wrap:break-word;}
.hero h1 .accent{color:var(--coral-deep);}
.hero p.lede{font-size:17px; color:var(--ink-soft); max-width:46ch; margin-bottom:28px;}

.lookup-card{background:var(--white); border-radius:24px; padding:30px; box-shadow:0 20px 50px rgba(34,52,58,0.14);}
.lookup-card h3{font-size:20px; margin-bottom:4px; color:var(--teal);}
.lookup-card .sub{font-size:13px; color:var(--ink-soft); margin-bottom:20px; font-family:'Nunito Sans';}
.zip-row{display:flex; gap:10px; margin-bottom:8px;}
.zip-row input{
  flex:1; min-width:0; padding:13px 16px; border:2px solid var(--mint-deep); border-radius:999px;
  font-family:'Nunito Sans'; font-weight:700; font-size:16px; background:var(--mint);
}
.zip-row input:focus{outline:none; border-color:var(--teal);}
.zip-row button{border-radius:999px; padding:0 22px; background:var(--coral); color:#fff; border:none; font-weight:700; font-size:14px; cursor:pointer; flex-shrink:0;}
.zip-row button:hover{background:var(--coral-deep);}
.zip-hint{font-size:12px; color:var(--ink-soft); margin-bottom:16px;}
.zip-hint button.chip{
  background:var(--mint); border:none; color:var(--teal-deep); font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:999px; cursor:pointer; margin-right:6px; margin-top:8px;
}
.zip-hint button.chip:hover{background:var(--mint-deep);}
.zip-result{display:none; border-top:2px dashed var(--mint-deep); padding-top:18px; margin-top:6px;}
.zip-result.show{display:block;}
.zip-result .place{font-family:'Baloo 2', sans-serif; font-size:18px; margin-bottom:10px; color:var(--ink);}
.zip-result .figures{display:flex; gap:24px; margin-bottom:12px; flex-wrap:wrap;}
.figures .fig b{display:block; font-family:'Baloo 2', sans-serif; font-size:26px; color:var(--coral-deep);}
.figures .fig span{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.zip-result .note{font-size:12px; color:var(--ink-soft); line-height:1.5;}

section{padding:76px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:12px;}
.tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.section-head h2{font-size:clamp(24px,3vw,34px); margin-bottom:12px; color:var(--teal);}
.section-head p{color:var(--ink-soft); font-size:16px; max-width:52ch;}

.news-strip{background:var(--teal);}
.news-strip .section-head h2{color:#fff;}
.news-strip .tag{color:var(--gold);}
.news-strip .tag::before{background:#fff;}
.news-strip .section-head p{color:rgba(255,255,255,0.8);}
.news-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:760px){ .news-grid{grid-template-columns:1fr;} }
.news-card{background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); border-radius:18px; padding:24px; color:#fff;}
.news-card .date{font-size:11px; font-weight:800; color:var(--gold); letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px;}
.news-card h4{font-family:'Baloo 2', sans-serif; font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.3; color:#fff;}
.news-card p{font-size:14px; color:rgba(255,255,255,0.85); margin-bottom:10px;}
.news-card .src{font-size:12px; color:rgba(255,255,255,0.65);}

.why-inner{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
@media (max-width:900px){ .why-inner{grid-template-columns:1fr;} }
.ring-wrap{display:flex; justify-content:center;}
.domain-legend{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:20px;}
.domain-legend .item{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); font-weight:700;}
.domain-legend .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.why-copy p{color:var(--ink-soft); font-size:15.5px; margin-bottom:16px; max-width:56ch;}
.why-copy .callout{
  background:var(--mint); border-radius:16px; padding:18px 22px; margin:24px 0;
  font-family:'Baloo 2', sans-serif; font-size:17px; font-style:italic; color:var(--teal-deep); font-weight:600;
}
.why-copy .refs{font-size:11.5px; color:var(--ink-soft); margin-top:18px; line-height:1.7;}

.app-section{background:linear-gradient(180deg, var(--white) 0%, var(--mint) 100%);}
.app-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){ .app-inner{grid-template-columns:1fr;} }
.app-copy h2{font-size:clamp(24px,3.2vw,36px); margin-bottom:16px; color:var(--teal);}
.app-copy p{color:var(--ink-soft); font-size:16px; margin-bottom:26px; max-width:48ch;}
.coming-soon-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--teal-deep);
  border:2px solid var(--mint-deep); border-radius:999px; padding:9px 18px 9px 14px;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14px; margin-bottom:22px;
}
.coming-soon-badge .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.waitlist{display:flex; gap:10px; max-width:420px; flex-wrap:wrap;}
.waitlist input{flex:1; min-width:200px; padding:12px 16px; border:2px solid var(--mint-deep); border-radius:999px; font-size:14px; background:var(--white); font-weight:700;}
.waitlist input:focus{outline:none; border-color:var(--teal);}
.waitlist button{background:var(--coral); color:#fff; border:none; padding:0 20px; border-radius:999px; font-weight:700; font-size:14px; cursor:pointer;}
.waitlist button:hover{background:var(--coral-deep);}
.form-note{font-size:12px; color:var(--ink-soft); margin-top:8px;}
.waitlist-msg{font-size:12px; color:var(--teal-deep); font-weight:700; margin-top:8px; display:none;}
.phone-mock{background:var(--teal); border-radius:36px; padding:14px; max-width:260px; margin:0 auto; box-shadow:0 30px 60px rgba(34,52,58,0.25);}
.phone-screen-img{width:100%; border-radius:24px; display:block;}

footer.site-footer{background:var(--teal); color:rgba(255,255,255,0.85); padding:32px 0; font-size:13px;}
.foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.foot-inner .logo .word{color:#fff;}