/*
Theme Name: Acacia International Institute
Theme URI: https://acaciainternational.ca/
Description: Custom responsive school website theme for Acacia International Institute.
Version: 1.0.0
Author: Acacia International Institute
Author URI: https://acaciainternational.ca/
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acacia-international-institute
*/

:root{
  --green:#064b2b;
  --green-dark:#03351e;
  --green-soft:#eaf2ed;
  --gold:#e5aa25;
  --gold-dark:#c88f0c;
  --text:#10251b;
  --muted:#5c6862;
  --line:#dfe6e1;
  --white:#fff;
  --bg:#f7f9f7;
  --shadow:0 8px 24px rgba(8,45,28,.10);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:auto}

/* HEADER */
.top-strip{
  background:var(--green-dark);
  color:#fff;
  text-align:center;
  font-size:13px;
  padding:7px 15px;
}
header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid #edf0ee;
}
.nav{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}
.logo{
  width: 3rem;
  height: auto;
  display: block;
  object-fit: contain;
}
.logo-img{
  width: 3rem;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .logo img {
    width: 11rem;
  }
}
.logo-leaf{
  color:#d92825;
  font-size:25px;
  transform:rotate(-8deg);
}
.logo-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:39px;
  line-height:.9;
  color:var(--green);
}
.logo-sub{
  font-size:9px;
  letter-spacing:2px;
  font-weight:bold;
  color:var(--green);
  margin-top:8px;
}
.logo-tag{
  font-size:8px;
  letter-spacing:1.7px;
  margin-top:3px;
  color:#777;
}
nav{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:14px;
  font-weight:600;
}
nav a{padding:32px 0 27px;position:relative}
nav a:hover,nav a.active{color:var(--green)}
nav a.active:after{
  content:"";
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  height:3px;
  background:var(--green);
}
.apply-btn{
  background:var(--green);
  color:#fff!important;
  padding:13px 20px!important;
  border-radius:5px;
  white-space:nowrap;
}
.apply-btn:hover{background:var(--green-dark)}
.mobile-menu{display:none}

/* HERO */
.hero{
  position:relative;
  min-height:465px;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,64,35,.98) 0%,rgba(0,64,35,.88) 36%,rgba(0,64,35,.20) 70%,rgba(0,0,0,.08)),
    url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1800&q=85") center/cover;
}
.hero-inner{
  min-height:465px;
  display:flex;
  align-items:center;
}
.hero-content{max-width:620px;padding:55px 0}
.eyebrow{
  color:#f3c34b;
  font-weight:800;
  letter-spacing:.5px;
  font-size:14px;
  margin-bottom:15px;
}
.eyebrow:before{
  content:"";
  display:inline-block;
  width:30px;
  height:2px;
  background:var(--gold);
  margin:0 10px 4px 0;
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,5vw,66px);
  line-height:1.03;
  margin-bottom:20px;
}
.hero p{
  font-size:16px;
  max-width:570px;
  color:#eef5f0;
  margin-bottom:28px;
}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:13px 20px;
  border-radius:5px;
  font-weight:800;
  font-size:14px;
  transition:.2s;
}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-dark)}
.btn-outline{border:1px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--green)}

/* PROGRAM CARDS */
.programs-wrap{
  margin-top:-32px;
  position:relative;
  z-index:5;
}
.program-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.program-card{
  background:#fff;
  border-radius:15px;
  padding:25px 22px 22px;
  min-height:210px;
  box-shadow:var(--shadow);
  border:1px solid #edf0ee;
}
.program-icon{
  width:53px;height:53px;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:25px;
  margin-bottom:15px;
}
.program-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  margin-bottom:7px;
}
.program-card p{
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  min-height:67px;
}
.learn{
  display:inline-block;
  margin-top:10px;
  color:var(--green);
  font-size:12px;
  font-weight:800;
}

/* VALUES */
.values{
  margin-top:22px;
  background:#f5f8f5;
  border-radius:15px;
  padding:26px 30px;
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.value{
  text-align:center;
  padding:4px 30px;
  border-right:1px solid #cdd8d0;
}
.value:last-child{border:0}
.value-icon{font-size:35px;color:var(--green);margin-bottom:5px}
.value h4{font-family:Georgia,serif;font-size:14px;margin-bottom:5px}
.value p{font-size:12px;color:var(--muted)}

/* ABOUT */
section{padding:70px 0}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
}
.about-label{
  color:var(--gold-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
}
.about-label:before{
  content:"";
  display:inline-block;
  width:27px;
  height:2px;
  background:var(--gold);
  margin:0 10px 4px 0;
}
.about h2{
  font-family:Georgia,serif;
  color:var(--green);
  font-size:31px;
  line-height:1.2;
  margin:9px 0 15px;
}
.about p{color:var(--muted);font-size:14px}
.photo{
  height:290px;
  border-radius:18px;
  overflow:hidden;
  background:#ddd;
}
.photo img{width:100%;height:100%;object-fit:cover}
.about-btn{margin-top:20px}

/* EVENTS / NEWS / CTA */
.info-section{background:#fff;padding-top:0}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr 1.25fr;
  gap:15px;
}
.panel{
  border:1px solid var(--line);
  border-radius:7px;
  padding:20px;
  background:#fff;
}
.panel h3{
  font-family:Georgia,serif;
  color:var(--green);
  font-size:17px;
  margin-bottom:12px;
}
.event{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #edf0ed;
}
.event:last-child{border:0}
.date{
  min-width:43px;
  height:43px;
  border-radius:5px;
  background:var(--green);
  color:#fff;
  text-align:center;
  font-size:10px;
  font-weight:bold;
  padding-top:5px;
}
.date strong{display:block;font-size:17px;line-height:18px}
.event b{font-size:12px}
.event p{font-size:11px;color:var(--muted)}
.news-item{
  display:flex;
  gap:11px;
  padding:9px 0;
  border-bottom:1px solid #edf0ed;
}
.news-item:last-child{border:0}
.news-img{
  width:62px;height:50px;border-radius:4px;object-fit:cover;
}
.news-item h4{font-size:11px;color:var(--green)}
.news-item p{font-size:10px;color:var(--muted);line-height:1.4}
.cta-card{
  background:var(--green);
  color:#fff;
  border-radius:7px;
  padding:30px 25px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cta-card .circle{
  width:55px;height:55px;border-radius:50%;
  background:#fff;color:var(--green);
  display:grid;place-items:center;
  margin:0 auto 12px;font-size:25px;
}
.cta-card h2{font-family:Georgia,serif;font-size:27px;line-height:1.15}
.cta-card p{font-size:12px;margin:10px 0 18px;color:#edf5f0}

/* FOOTER */
footer{
  background:#00452a;
  color:#fff;
  padding:24px 0 12px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;
  gap:25px;
  align-items:start;
}
.footer-item{
  display:flex;
  gap:10px;
  font-size:11px;
}
.footer-icon{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 34px;
}
.footer-item b{display:block;font-size:11px}
.footer-item span{color:#dcebe3}
.social a{
  display:inline-grid;
  place-items:center;
  width:29px;height:29px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  margin:5px 3px 0 0;
  font-size:12px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:20px;
  padding-top:10px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#d7e7df;
}

/* RESPONSIVE */
@media(max-width:1000px){
  nav{gap:13px;font-size:12px}
  .program-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .value:nth-child(2){border-right:0}
  .value:nth-child(-n+2){border-bottom:1px solid #cdd8d0;padding-bottom:15px;margin-bottom:15px}
  .info-grid{grid-template-columns:1fr 1fr}
  .cta-card{grid-column:1/-1}
}
@media(max-width:720px){
  .nav{min-height:72px}
  nav{display:none}
  .mobile-menu{display:block;background:none;border:0;font-size:26px;color:var(--green)}
  .logo-name{font-size:32px}
  .hero,.hero-inner{min-height:500px}
  .hero h1{font-size:44px}
  .about-grid{grid-template-columns:1fr}
  .about-grid .photo{order:-1}
  .info-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .program-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .value{border-right:0!important;border-bottom:1px solid #cdd8d0;padding:15px!important;margin:0!important}
  .value:last-child{border-bottom:0}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px}
}