/*
Theme Name: EarthConnect VR Pilot
Theme URI: https://earthconnectvr.com/
Author: EduGrow Learning
Description: A focused block theme for the EarthConnect VR school proof of concept.
Version: 1.0.0
Text Domain: earthconnect-vr
*/

:root {
  --ec-forest: #5eae2d;
  --ec-river: #559af2;
  --ec-navy: #176fd1;
  --ec-sun: #ffbf18;
  --ec-paper: #f5f7f2;
  --ec-ink: #17354a;
  --ec-mist: #eaf4f7;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.ec-shell { max-width: 1180px; margin-inline: auto; padding-inline: 28px; }
.ec-topbar { border-bottom: 1px solid rgba(23,53,74,.10); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); position:relative; z-index:10; }
.ec-brand-lockup { gap:12px !important; }
.ec-brand-logo { width:54px; height:54px; object-fit:contain; border-radius:14px; }
.ec-brand-name { font-size:1.12rem; font-weight:800; letter-spacing:-.025em; color:var(--ec-ink); }
.ec-nav { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.ec-nav a { color:var(--ec-ink); text-decoration:none; font-weight:650; font-size:.95rem; }
.ec-nav a:hover { color:var(--ec-navy); }
.ec-eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 750; color: var(--ec-forest); }
.ec-hero { position: relative; isolation: isolate; padding: 108px 0 92px; background: radial-gradient(circle at 85% 10%, rgba(255,191,24,.20), transparent 27%), linear-gradient(135deg, #edf7f2 0%, #fbfaf5 62%, #eaf4ff 100%); overflow: hidden; }
.ec-hero:after { content:""; position:absolute; z-index:-1; right:-10%; bottom:-210px; width:680px; height:380px; border:68px solid rgba(8,124,184,.10); border-radius:50%; transform:rotate(-9deg); }
.ec-hero h1 { max-width: 850px; font-size: clamp(3.25rem, 7vw, 6.4rem); line-height: .96; letter-spacing: -.055em; margin: 18px 0 28px; }
.ec-hero p { max-width: 680px; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.65; color: #355249; }
.ec-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ec-button a { border-radius:999px !important; padding:15px 24px !important; font-weight:750; }
.ec-button-primary a { background:var(--ec-forest) !important; }
.ec-button-secondary a { background:transparent !important; color:var(--ec-ink) !important; border:1px solid rgba(23,49,42,.3); }
.ec-proof-strip { margin-top:-34px; position:relative; z-index:2; }
.ec-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); background:var(--ec-navy); color:#fff; border-radius:22px; box-shadow:0 22px 60px rgba(8,59,102,.18); overflow:hidden; }
.ec-proof { padding:26px; border-right:1px solid rgba(255,255,255,.14); }
.ec-proof:last-child { border-right:0; }
.ec-proof strong { display:block; font-size:1.05rem; margin-bottom:5px; }
.ec-proof span { color:#cce3ef; font-size:.92rem; line-height:1.45; }
.ec-section { padding:96px 0; }
.ec-section-soft { background:var(--ec-paper); }
.ec-section h2 { font-size:clamp(2.25rem,4vw,4rem); letter-spacing:-.04em; line-height:1.04; max-width:760px; margin:10px 0 22px; }
.ec-lede { max-width:720px; color:#486159; font-size:1.12rem; line-height:1.7; }
.ec-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.ec-card { background:#fff; border:1px solid rgba(23,49,42,.10); border-radius:20px; padding:30px; box-shadow:0 12px 34px rgba(23,49,42,.06); }
.ec-card-number { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#fff; background:var(--ec-river); font-weight:800; }
.ec-card h3 { font-size:1.35rem; margin:22px 0 10px; }
.ec-card p { color:#536b63; line-height:1.62; }
.ec-experience { display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; margin-top:42px; padding:42px; border-radius:28px; background:var(--ec-ink); color:#fff; }
.ec-experience-visual { aspect-ratio:16/10; border-radius:20px; background:linear-gradient(145deg, rgba(242,165,26,.72), transparent 43%), linear-gradient(20deg, var(--ec-navy), var(--ec-river) 52%, var(--ec-forest)); display:grid; place-items:center; }
.ec-360 { width:146px; height:146px; border:2px solid rgba(255,255,255,.8); border-radius:50%; display:grid; place-items:center; font-size:2.2rem; font-weight:800; }
.ec-meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.ec-pill { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 11px; font-size:.82rem; color:#dbe9e4; }
.ec-school-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:58px; align-items:start; }
.ec-checklist { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.ec-checklist li { position:relative; padding:17px 18px 17px 52px; border-radius:14px; background:#fff; border:1px solid rgba(23,49,42,.10); }
.ec-checklist li:before { content:"✓"; position:absolute; left:18px; top:16px; color:var(--ec-forest); font-weight:900; }
.ec-status { margin-top:38px; padding:24px; border-left:5px solid var(--ec-sun); background:#fff8e6; border-radius:0 14px 14px 0; }
.ec-footer { background:#112f43; color:#dcebf3; padding:48px 0; }
.ec-footer a { color:#fff; }
.ec-page-hero { padding:76px 0 40px; background:linear-gradient(135deg,#eff8f3,#f4f8ff); }
.ec-page-content { padding:56px 0 88px; }
.ec-library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:42px; }
.ec-library-card { border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(23,53,74,.10); box-shadow:0 12px 36px rgba(23,53,74,.07); }
.ec-library-card img, .ec-library-placeholder { width:100%; aspect-ratio:16/10; object-fit:cover; }
.ec-library-placeholder { display:grid; place-items:center; background:linear-gradient(145deg,var(--ec-river),var(--ec-navy)); color:#fff; font-weight:850; font-size:1.6rem; }
.ec-library-body { padding:24px; }
.ec-library-body h2, .ec-library-body h3 { margin:0 0 10px; }
.ec-library-body h2 a, .ec-library-body h3 a { color:var(--ec-ink); text-decoration:none; }
.ec-library-meta { color:#607381; font-size:.9rem; margin-bottom:12px; }
.ec-empty { padding:32px; background:var(--ec-paper); border-radius:18px; margin-top:32px; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { width:auto; height:auto; clip:auto; margin:12px; padding:12px 18px; background:#fff; z-index:100; }

@media (max-width: 800px) {
  .ec-hero { padding-top:78px; }
  .ec-proof-grid, .ec-cards, .ec-experience, .ec-school-grid, .ec-library-grid { grid-template-columns:1fr; }
  .ec-proof { border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .ec-experience { padding:24px; }
  .ec-nav { gap:12px; font-size:.86rem; }
}