/*
Theme Name: SIF - Sustainability Innovation Forum
Theme URI: https://www.sif.ng/
Author: Toub Associates Ltd
Author URI: https://www.sif.ng/
Description: Custom one-page theme for the Sustainability Innovation Forum (SIF) — Nigeria's pan-African marketplace for green investment.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sif-theme
*/
:root{
  --forest:#0B4A2E; --forest2:#083A24; --lime:#8CC63F; --lime2:#6FA82E; --sage:#4C7A6B;
  --bg:#ffffff; --bg-alt:#F4F9F1; --text:#122318; --soft:#4C5F55; --border:#E3EEDE; --card:#ffffff;
  --r:16px; --maxw:1200px; --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0E1712; --bg-alt:#121F17; --text:#EAF3EC; --soft:#AFC3B7; --border:#22352A; --card:#152018; }
}
:root[data-theme="dark"]{ --bg:#0E1712; --bg-alt:#121F17; --text:#EAF3EC; --soft:#AFC3B7; --border:#22352A; --card:#152018; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:86px; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
body{font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden;}
img,svg{max-width:100%; display:block;}
h1,h2,h3{font-family:var(--serif); line-height:1.15; color:var(--text);}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem); margin-bottom:.6rem;}
.eyebrow{color:var(--lime2); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; margin-bottom:.5rem;}
p{color:var(--soft);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem;}
section{padding:5rem 0;}
.center{text-align:center; max-width:700px; margin:0 auto 3rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem; cursor:pointer; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-lime{background:var(--lime); color:var(--forest2); box-shadow:0 8px 22px -8px rgba(140,198,63,.6);}
.btn-outline{border-color:currentColor; color:inherit;}
.btn-forest{background:var(--forest); color:#fff;}
header{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top,0px); transition:box-shadow .2s;}
header.scrolled{box-shadow:0 4px 18px -10px rgba(0,0,0,.25);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:.55rem; font-family:var(--serif); font-weight:700; font-size:1.15rem;}
.logo-mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(145deg,var(--lime),var(--forest)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;}
nav ul{list-style:none; display:flex; gap:2rem;}
nav ul a{font-weight:600; font-size:.93rem; color:var(--text); position:relative;}
nav ul a:after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--lime); transition:width .2s;}
nav ul a:hover:after{width:100%;}
.nav-right{display:flex; align-items:center; gap:1rem;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;}
.burger span{width:24px; height:2px; background:var(--text);}
.mobile-nav{display:none; flex-direction:column; gap:0; border-top:1px solid var(--border); background:var(--bg);}
.mobile-nav a{padding:.9rem 1.5rem; border-bottom:1px solid var(--border); font-weight:600;}
header.open .mobile-nav{display:flex;}
.hero{background:radial-gradient(120% 100% at 100% 0%,var(--bg-alt),var(--bg) 60%); padding:4.5rem 0 5rem; overflow:hidden; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:1.1rem;}
.hero h1 span{color:var(--lime2);}
.hero p.lead{font-size:1.1rem; max-width:520px; margin-bottom:1.8rem;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}
.hero-art{position:relative; aspect-ratio:1/1; border-radius:28px; background:linear-gradient(160deg,var(--forest),var(--forest2)); overflow:hidden; box-shadow:0 30px 60px -25px rgba(11,74,46,.5);}
.hero-art:before{content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 25% 30%, rgba(140,198,63,.5), transparent 40%),
  radial-gradient(circle at 75% 75%, rgba(140,198,63,.35), transparent 45%);}
.hero-art .ring{position:absolute; border:2px solid rgba(255,255,255,.18); border-radius:50%;}
.hero-art .r1{width:70%; height:70%; top:15%; left:15%;}
.hero-art .r2{width:45%; height:45%; top:27.5%; left:27.5%; border-color:rgba(140,198,63,.5);}
.hero-art .leaf{position:absolute; bottom:8%; left:8%; color:var(--lime); font-size:2.6rem;}
.hero-stat{position:absolute; top:8%; right:8%; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border-radius:14px; padding:.7rem 1rem; color:#fff; font-size:.82rem; font-weight:600;}
.trust{padding:1.6rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.trust p{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.9rem; text-align:center;}
.trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;}
.pill{border:1px solid var(--border); border-radius:999px; padding:.4rem 1rem; font-size:.82rem; font-weight:600; color:var(--soft);}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.8rem; height:100%;}
.icon{width:48px; height:48px; border-radius:12px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; color:var(--forest);}
.card h3{font-size:1.05rem; margin-bottom:.5rem;}
.card p{font-size:.92rem;}
.bg-alt{background:var(--bg-alt);}
.quote{font-family:var(--serif); font-size:1.05rem; margin-bottom:1rem; color:var(--text);}
.who{font-size:.85rem; font-weight:600; color:var(--lime2);}
.cta-banner{background:linear-gradient(120deg,var(--forest),var(--forest2)); color:#fff; border-radius:28px; padding:3.2rem 2rem; text-align:center;}
.cta-banner h2{color:#fff;}
.cta-banner p{color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 1.6rem;}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
.diff-list{list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:1rem;}
.diff-list li{display:flex; gap:.8rem; align-items:flex-start; font-size:.95rem; color:var(--soft);}
.diff-list b{color:var(--forest);}
.check{color:var(--lime2); font-weight:800; flex-shrink:0;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step;}
.step{text-align:center;}
.step .num{width:42px; height:42px; border-radius:50%; background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto .8rem; font-family:var(--serif);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:1.1rem 0; font-weight:700; font-size:1rem; color:var(--text); display:flex; justify-content:space-between; cursor:pointer; font-family:var(--sans);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-bottom:1.1rem; font-size:.92rem;}
.faq-item.open .faq-a{max-height:200px;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-q span{transition:transform .2s; font-size:1.3rem; color:var(--lime2);}
.sif-hero{background:var(--forest); color:#fff; border-radius:28px; padding:2.4rem; margin-bottom:2.5rem;}
.sif-hero .eyebrow{color:var(--lime);}
.sif-hero h2{color:#fff;}
.sif-hero p{color:rgba(255,255,255,.82);}
.agenda{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.6rem;}
.agenda .card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);}
.agenda .card h3{color:#fff;} .agenda .card p{color:rgba(255,255,255,.75);}
.reg-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
form{display:flex; flex-direction:column; gap:1rem;}
label{font-size:.85rem; font-weight:600; margin-bottom:.3rem; display:block;}
input,select,textarea{width:100%; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--border); font-family:var(--sans); font-size:.95rem; background:var(--card); color:var(--text);}
textarea{resize:vertical; min-height:110px;}
.form-msg{font-size:.85rem; color:var(--lime2); font-weight:600; display:none;}
.form-msg.show{display:block;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
.info-row{display:flex; gap:.8rem; margin-bottom:1.1rem; font-size:.92rem;}
.info-row .icon{width:36px;height:36px;margin:0;font-size:1.1rem;}
.map{aspect-ratio:16/10; border-radius:var(--r); background:linear-gradient(160deg,var(--bg-alt),var(--border)); position:relative; overflow:hidden; margin-top:1.4rem; border:1px solid var(--border);}
.map svg{position:absolute; inset:0; width:100%; height:100%;}
.map .pin{position:absolute; top:44%; left:52%; transform:translate(-50%,-100%); font-size:2rem;}
.map .loc{position:absolute; bottom:10px; left:10px; background:var(--card); padding:.4rem .8rem; border-radius:8px; font-size:.78rem; font-weight:700; border:1px solid var(--border);}
.socials{display:flex; gap:.7rem; margin-top:1.2rem;}
.socials a{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
footer{background:var(--forest2); color:rgba(255,255,255,.75); padding:3.5rem 0 1.5rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem;}
footer .logo{color:#fff;}
footer h4{color:#fff; font-size:.9rem; margin-bottom:.9rem;}
footer ul{list-style:none;}
footer li{margin-bottom:.55rem; font-size:.9rem;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:1.4rem; text-align:center; font-size:.8rem;}
@media (max-width:860px){
  nav ul{display:none;} .burger{display:flex;}
  .hero-grid,.about-grid,.reg-grid,.contact-grid{grid-template-columns:1fr;}
  .grid3,.grid4,.steps,.agenda,.foot-grid{grid-template-columns:1fr 1fr;}
  .hero-art{max-width:340px; margin:0 auto;}
}
@media (max-width:560px){
  .grid3,.grid4,.steps,.agenda,.foot-grid{grid-template-columns:1fr;}
  section{padding:3.2rem 0;}
  .hero-ctas .btn{width:100%;}
}