/* =========================================================================
   NAUA STEM Academy — Homepage styles
   Ported from the approved mockup, scoped under .naua-home so the global
   reset and generic selectors never leak into plugins or the admin bar.
   Loaded on the front page only.
   ========================================================================= */

:root {
	--green-deep:#1B5E20;
	--green:#2E7D32;
	--green-fresh:#4CAF50;
	--green-glow:#7CF08A;
	--amber:#F5A623;
	--white:#FFFFFF;
	--off:#F4F8F4;
	--ink:#212121;
	--muted:#5C6B5E;
	--line:#E2EBE3;
	--display:'Poppins','Montserrat',system-ui,sans-serif;
	--body:'Inter','Open Sans',system-ui,sans-serif;
	--wrap:1180px;
}

/* Neutralise the block theme's root padding / spacing on the home page */
body.home { padding-top:0 !important; }
.home .wp-site-blocks { padding:0 !important; margin:0 !important; }
.home .wp-site-blocks > * { margin-block:0 !important; }

/* ---------- Scoped base / reset ---------- */
.naua-home * { box-sizing:border-box; margin:0; padding:0; }
.naua-home {
	font-family:var(--body);
	color:var(--ink);
	background:var(--white);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	scroll-behavior:smooth;
	font-size:16px;
}
.naua-home a { color:inherit; text-decoration:none; }
.naua-home img { max-width:100%; height:auto; display:block; }
.naua-home h1, .naua-home h2, .naua-home h3 { font-family:var(--display); line-height:1.15; color:var(--green-deep); }
.naua-home .wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* Accessible skip link */
.naua-home .skip {
	position:absolute; left:-9999px; top:0;
	background:var(--green-deep); color:#fff; padding:10px 16px; z-index:2000; border-radius:0 0 8px 0;
}
.naua-home .skip:focus { left:0; }

/* Shared focus style */
.naua-home a:focus-visible, .naua-home button:focus-visible {
	outline:3px solid var(--green-fresh); outline-offset:2px; border-radius:4px;
}

/* ---------- NAV ---------- */
.naua-home header.nav {
	position:sticky; top:0; z-index:50;
	background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line);
}
.naua-home .nav-inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.naua-home .brand { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; color:var(--green-deep); letter-spacing:.01em; }
.naua-home .brand svg { flex:0 0 auto; }
.naua-home .brand-logo { flex:0 0 auto; height:54px; width:auto; display:block; }
.naua-home .brand .sub { display:block; font-size:13px; letter-spacing:.30em; font-weight:600; color:var(--green); margin-top:0; }
.naua-home .brand .name { font-size:19px; line-height:1; }
.naua-home nav.menu { display:flex; align-items:center; gap:30px; }
.naua-home nav.menu a { font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:6px 0; }
.naua-home nav.menu a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green-fresh); transition:width .22s ease; }
.naua-home nav.menu a:hover::after, .naua-home nav.menu a:focus-visible::after { width:100%; }
.naua-home .btn { display:inline-block; font-family:var(--display); font-weight:600; font-size:15px; padding:11px 22px; border-radius:8px; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease; border:2px solid transparent; }
.naua-home .btn-donate { background:var(--amber); color:#3a2a00; box-shadow:0 2px 0 rgba(0,0,0,.06); }
.naua-home .btn-donate:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,166,35,.35); }
.naua-home .hamburger { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.naua-home .hamburger span { display:block; width:24px; height:2px; background:var(--green-deep); margin:5px 0; border-radius:2px; }

/* ---------- HERO ---------- */
.naua-home .hero { position:relative; background:radial-gradient(120% 80% at 50% 0%,var(--off) 0%,#fff 62%); padding:12px 0 44px; overflow:hidden; }
.naua-home .eyebrow { text-align:center; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
.naua-home .tree-stage { text-align:center; margin:2px auto 4px; }
.naua-home .tree-hint { margin:10px auto 0; font-size:13px; color:var(--muted); }
@media(hover:none){ .naua-home .tree-hint::after{ content:""; } }
.naua-home .hero h1 { text-align:center; font-size:clamp(23px,5vw,54px); font-weight:700; margin:8px auto 14px; max-width:none; text-wrap:balance; }
.naua-home .hero .lede { text-align:center; font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:60ch; margin:0 auto 30px; }
.naua-home .hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.naua-home .btn-primary { background:var(--green); color:#fff; }
.naua-home .btn-primary:hover { background:var(--green-deep); transform:translateY(-1px); box-shadow:0 8px 20px rgba(27,94,32,.25); }
.naua-home .btn-ghost { background:#fff; color:var(--green-deep); border-color:var(--green); }
.naua-home .btn-ghost:hover { background:var(--off); transform:translateY(-1px); }

/* ---------- SECTION SHELL ---------- */
.naua-home .section { padding:74px 0; }
.naua-home .section-head { text-align:center; max-width:60ch; margin:0 auto 44px; }
.naua-home .section-head h2 { font-size:clamp(24px,3.4vw,34px); font-weight:700; margin-bottom:12px; }
.naua-home .section-head p { color:var(--muted); font-size:17px; }

/* ---------- CARDS ---------- */
.naua-home .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.naua-home .card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 28px; text-align:center; transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease; }
.naua-home .card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(27,94,32,.10); border-color:#cfe3d2; }
.naua-home .card .ic { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin:0 auto 18px; background:var(--off); }
.naua-home .card .ic svg { width:28px; height:28px; stroke:var(--green); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.naua-home .card h3 { font-size:20px; font-weight:600; margin-bottom:9px; }
.naua-home .card p { color:var(--muted); font-size:15px; }

/* ---------- EVENTS ---------- */
.naua-home .events { background:var(--off); }
.naua-home .ev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.naua-home .ev { background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; }
.naua-home .ev-top { height:6px; background:linear-gradient(90deg,var(--green-fresh),var(--green)); }
.naua-home .ev-body { padding:26px 24px; display:flex; flex-direction:column; flex:1; }
.naua-home .ev .date { font-family:var(--display); font-weight:600; font-size:13px; color:var(--green); letter-spacing:.02em; margin-bottom:10px; }
.naua-home .ev h3 { font-size:18px; font-weight:600; margin-bottom:10px; line-height:1.3; }
.naua-home .ev p { color:var(--muted); font-size:14.5px; flex:1; margin-bottom:18px; }
.naua-home .ev .reg { align-self:flex-start; background:var(--green); color:#fff; font-family:var(--display); font-weight:600; font-size:14px; padding:9px 18px; border-radius:8px; transition:background .18s ease; }
.naua-home .ev .reg:hover { background:var(--green-deep); }
.naua-home .ev-all { text-align:center; margin-top:36px; }
.naua-home .ev-all a { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; color:var(--green-deep); }
.naua-home .ev-all a:hover { color:var(--green); }
.naua-home .ev-empty { text-align:center; color:var(--muted); }

/* ---------- 2050 BANNER ---------- */
.naua-home .initiative { background:linear-gradient(120deg,var(--green-deep),#164019); color:#fff; position:relative; overflow:hidden; }
.naua-home .initiative::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 88% 20%,rgba(124,240,138,.18),transparent 60%); pointer-events:none; }
.naua-home .init-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:52px 0; position:relative; z-index:1; flex-wrap:wrap; }
.naua-home .init-inner .txt { max-width:62ch; }
.naua-home .init-inner .tag { font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--green-glow); margin-bottom:10px; }
.naua-home .init-inner h2 { color:#fff; font-size:clamp(24px,3.4vw,34px); margin-bottom:12px; }
.naua-home .init-inner p { color:#d7ecd9; font-size:16px; }
.naua-home .init-link { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--green-deep); font-family:var(--display); font-weight:600; font-size:15px; padding:13px 24px; border-radius:9px; white-space:nowrap; transition:transform .12s ease, box-shadow .2s ease; }
.naua-home .init-link:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); }

/* ---------- FOOTER ---------- */
.naua-home footer.site { background:#123314; color:#cfe0d1; padding:60px 0 0; }
.naua-home .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; }
.naua-home footer.site h4 { font-family:var(--display); color:#fff; font-size:15px; letter-spacing:.02em; margin-bottom:16px; }
.naua-home footer.site ul { list-style:none; }
.naua-home footer.site li { margin-bottom:10px; }
.naua-home footer.site a { color:#bcd2be; font-size:14.5px; transition:color .15s ease; }
.naua-home footer.site a:hover { color:#fff; }
.naua-home .foot-brand p { font-size:14.5px; color:#a9c2ab; max-width:36ch; margin-top:12px; }
.naua-home .socials { display:flex; gap:12px; margin-top:18px; }
.naua-home .socials a { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .18s ease; }
.naua-home .socials a:hover { background:var(--green); }
.naua-home .socials svg { width:18px; height:18px; fill:#dfeae0; }
.naua-home .foot-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#9db69f; }
.naua-home .foot-bottom .legal { display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
	.naua-home nav.menu { display:none; }
	.naua-home nav.menu.is-open {
		display:flex; position:absolute; left:0; right:0; top:74px; flex-direction:column; align-items:stretch; gap:0;
		background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(0,0,0,.08); padding:8px 24px 16px;
	}
	.naua-home nav.menu.is-open a { padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px; }
	.naua-home nav.menu.is-open a:last-child { border-bottom:0; }
	.naua-home .hamburger { display:block; }
	.naua-home .cards, .naua-home .ev-grid { grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
	.naua-home .foot-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
	.naua-home .foot-grid { grid-template-columns:1fr; }
	.naua-home .init-inner { flex-direction:column; align-items:flex-start; }
}

/* ---------- INTERACTIVE STEM TREE ---------- */
.naua-home .naua-tree { position:relative; display:inline-block; vertical-align:top; line-height:0; max-width:100%; }
.naua-home .naua-tree-img { display:block; height:min(80vh,880px); width:auto; max-width:92vw; -webkit-user-drag:none; user-select:none; }

/* rising energy pulse: a slow, bright light band sweeps up the tree, masked to
   the image's own green tree + circuit traces so it glows along those paths */
.naua-home .naua-tree-pulse {
	position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;
	mix-blend-mode:screen;
	-webkit-mask-image:url(/wp-content/uploads/naua-hero-mask.png);
	        mask-image:url(/wp-content/uploads/naua-hero-mask.png);
	-webkit-mask-size:100% 100%; mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.naua-home .naua-tree-pulse::before {
	content:""; position:absolute; left:-10%; right:-10%; height:34%; top:100%;
	background:linear-gradient(to top,
		rgba(120,255,140,0) 0%, rgba(150,255,170,.55) 30%,
		rgba(212,255,218,1) 50%, rgba(150,255,170,.55) 70%, rgba(120,255,140,0) 100%);
	filter:blur(1.5px);
}
@media(prefers-reduced-motion:no-preference){
	.naua-home .naua-tree-pulse::before { animation:naua-pulse-rise 15s cubic-bezier(.45,0,.55,1) infinite; }
}
@keyframes naua-pulse-rise {
	0%   { top:100%; opacity:0; }
	6%   { opacity:1; }
	94%  { opacity:1; }
	100% { top:-34%; opacity:0; }
}

/* discipline chips: a glowing dot + name, sitting on the leaves. cx/cy places
   the dot; the pill grows away from it (is-r reverses so text reads inward). */
.naua-home .naua-tree-chips { position:absolute; inset:0; pointer-events:none; z-index:3; }
.naua-home .naua-chip {
	position:absolute; transform:translate(-14.5px,-50%);
	display:inline-flex; align-items:center; gap:7px; white-space:nowrap; margin:0;
	padding:5px 9px; border-radius:999px;
	background:rgba(255,255,255,.9); border:1px solid rgba(76,175,80,.5);
	box-shadow:0 3px 10px rgba(20,60,25,.16);
	font-family:var(--display); font-weight:600; font-size:clamp(11px,1.05vw,13.5px); line-height:1;
	color:var(--green-deep); cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent;
	transition:box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.naua-home .naua-chip.is-r { transform:translate(calc(-100% + 14.5px),-50%); flex-direction:row-reverse; }
.naua-home .naua-chip-dot {
	width:11px; height:11px; border-radius:50%; flex:0 0 auto; transform-origin:center;
	background:radial-gradient(circle at 50% 42%, #eafff0 0%, #7dff98 42%, #23c247 78%);
	box-shadow:0 0 6px 2px rgba(90,255,120,.7);
}
@media(prefers-reduced-motion:no-preference){
	.naua-home .naua-chip-dot { animation:naua-dot 3.8s ease-in-out infinite; animation-delay:var(--d,0s); }
}
@keyframes naua-dot {
	0%,100% { box-shadow:0 0 5px 1px rgba(90,255,120,.5); transform:scale(1); }
	50%     { box-shadow:0 0 11px 4px rgba(130,255,160,.95); transform:scale(1.18); }
}
.naua-home .naua-chip:hover,
.naua-home .naua-chip.is-active { background:#fff; border-color:var(--green-fresh); box-shadow:0 8px 20px rgba(20,60,25,.24); }
.naua-home .naua-chip:focus-visible { outline:2px solid #1B5E20; outline-offset:3px; }
.naua-home .naua-chip.is-big { color:#fff; background:var(--green); border-color:var(--green); }
.naua-home .naua-chip.is-big .naua-chip-dot { background:radial-gradient(circle at 50% 42%,#fff 0%,#a6ffb8 50%,#39d24a 82%); }
.naua-home .naua-chip.is-big:hover,
.naua-home .naua-chip.is-big.is-active { background:var(--green-deep); border-color:var(--green-deep); }

/* phones: the chips ride on the canopy, so they scale with the image; just
   shrink the tree a touch and tighten the chips */
@media (max-width:760px){
	.naua-home .naua-tree-img { height:auto; width:min(94vw,440px); }
	.naua-home .naua-chip { font-size:10.5px; padding:4px 7px; gap:5px; }
	.naua-home .naua-chip-dot { width:9px; height:9px; }
}

/* tooltip */
.naua-home .naua-tip {
	position:absolute; z-index:6; left:0; top:0; width:230px; max-width:74vw;
	background:#fff; border:1px solid rgba(27,94,32,.14); border-radius:14px;
	box-shadow:0 12px 30px rgba(20,60,25,.16), 0 2px 8px rgba(20,60,25,.08);
	padding:12px 15px; text-align:left; line-height:normal; pointer-events:none;
	opacity:0; transition:opacity .16s ease; transform:translate(-50%,0);
}
.naua-home .naua-tip.above { transform:translate(-50%,-100%); }
.naua-home .naua-tip.is-shown { opacity:1; }
.naua-home .naua-tip .t { display:block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--green); margin-bottom:4px; }
.naua-home .naua-tip .d { display:block; font-size:13px; line-height:1.5; color:var(--muted); }
.naua-home .naua-tip::after {
	content:""; position:absolute; left:var(--ax,50%); width:12px; height:12px; background:#fff;
	transform:translateX(-50%) rotate(45deg);
}
.naua-home .naua-tip.above::after { bottom:-6px; border-right:1px solid rgba(27,94,32,.14); border-bottom:1px solid rgba(27,94,32,.14); }
.naua-home .naua-tip.below::after { top:-6px; border-left:1px solid rgba(27,94,32,.14); border-top:1px solid rgba(27,94,32,.14); }