/* styles.css - Red & white Canadian-flag-inspired theme */
:root{
  --red: #ff0000;
  --white: #ffffff;
  --max-width: 1000px;
  --gap: 16px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; margin:0; color:#111; background:var(--white);}
.flag-header{display:flex; align-items:center; justify-content:center; background:var(--white); padding:6px 0; border-bottom:3px solid var(--red);}
.flag-left, .flag-right{width:10%; min-width:40px}
.flag-center{width:80%; display:flex; justify-content:center; align-items:center}
.maple-svg{height:80px; width:100%; max-width:420px}
.topnav{display:flex; justify-content:space-between; align-items:center; max-width:var(--max-width); margin:12px auto; padding:0 12px;}
.brand{font-weight:700; font-size:1.1rem; color:var(--red)}
.lang-switch button{border:1px solid var(--red); background:var(--white); color:var(--red); padding:6px 10px; margin-left:6px; cursor:pointer; border-radius:6px;}
.lang-switch button.active{background:var(--red); color:var(--white)}
main{max-width:var(--max-width); margin:18px auto; padding:0 12px 60px;}
.hero{background:linear-gradient(90deg, rgba(255,0,0,0.05), rgba(255,0,0,0.02)); padding:28px; border-radius:12px; text-align:center;}
.hero h1{margin:0 0 12px; color:var(--red)}
.cta{display:inline-block; margin-top:12px; padding:10px 18px; border-radius:8px; background:var(--red); color:var(--white); text-decoration:none; font-weight:600}
.about, .programs, .contact{margin-top:26px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap); margin-top:12px}
.card{border:1px solid rgba(0,0,0,0.06); padding:14px; border-radius:10px}
footer{background:var(--red); color:var(--white); text-align:center; padding:14px 6px; position:relative; bottom:0; margin-top:30px}
@media (max-width:600px){
  .maple-svg{height:56px}
  .brand{font-size:1rem}
}