/* --------- Base --------- */
:root{
  --blue-900:#002157;
  --blue-800:#003366;
  --blue-700:#00509E;
  --blue-600:#1e3c72;
  --blue-500:#2a5298;
  --blue-100:#eaf3ff;
  --ink-900:#1b1f24;
  --ink-700:#2d3436;
  --ink-500:#495057;
  --ink-300:#6c757d;
  --ink-100:#e9ecef;
  --bg:#ffffff;
  --card:#ffffff;
  --shadow:0 8px 20px rgba(0,0,0,.06);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink-700);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75rem 1.1rem;
  border-radius:999px;
  background:var(--blue-700);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-outline{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:999px;
  color:var(--blue-700);
  border:2px solid var(--blue-700);
  text-decoration:none;
  font-weight:600;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn-outline:hover{
  background:var(--blue-700);
  color:#fff;
  transform:translateY(-1px);
}
.btn-invert{
  background:#fff;
  color:var(--blue-700);
}
.btn-invert:hover{
  background:var(--ink-100);
}

/* Topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid #eee;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink-900);
}
.brand-logo{
  width:80px;  /* Adjust between 70px–100px for balance */
  height:auto;
  object-fit:contain;
}

.brand-name{
  font-weight:800;
  letter-spacing:.3px;
  color:var(--blue-800);
  font-size:clamp(1.1rem, 1vw + 0.9rem, 1.6rem); /* Auto scales with screen size */
  line-height:1.2;
}


/* Header / Nav */
.site-header{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500));
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
}
.nav-toggle{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:1rem; padding:1rem .4rem; cursor:pointer; display:none;
}
.nav-menu{
  display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0;
}
.nav-item > a, .nav-item > button{
  color:#fff; text-decoration:none; font-weight:600; padding:1rem .75rem; border-radius:10px; border:0; background:none; cursor:pointer;
}
.nav-item > a:hover, .nav-item > button:hover{ background-color:rgba(255,255,255,.1); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; color:var(--ink-700); border-radius:12px;
  box-shadow:var(--shadow); padding:.4rem; display:none;
}
.dropdown.open{ display:block; }
.dropdown a{
  display:block; padding:.65rem .8rem; border-radius:8px; color:var(--ink-700); text-decoration:none; font-weight:600;
}
.dropdown a:hover{ background:var(--ink-100); }

/* Mobile */
@media (max-width: 920px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; inset: 100% 0 auto 0; background:linear-gradient(180deg, var(--blue-600), var(--blue-500));
    flex-direction:column; gap:0; padding:.5rem; display:none;
  }
  .nav-menu.open{ display:flex; }
  .dropdown{ position:static; box-shadow:none; background:transparent; padding:0; }
  .dropdown a{ color:#fff; }
  .dropdown a:hover{ background:rgba(255,255,255,.12); }
}

/* Hero */
.hero{
  position:relative; min-height:56vh;
  background:url('https://www.irmac.ca/resources/Pictures/CN-Tower_GettyImages-615764386.jpg') center/cover no-repeat;
  display:grid; place-items:center; text-align:center; color:#fff;
}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,33,87,.55), rgba(0,33,87,.55));
}
.hero-content{ position:relative; z-index:1; }
.hero h1{
  font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem);
  line-height:1.15; margin:0 0 .6rem; font-weight:800;
}
.hero p{
  font-size:clamp(1rem, 1vw + .6rem, 1.25rem);
  opacity:.95; margin:0 0 1.2rem;
}
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Sections */
.section{ padding:3.5rem 0; }
.section-alt{ background:var(--blue-100); }
.section-header{ text-align:center; margin-bottom:1.8rem; }
.section-header h2{
  margin:0; font-size:clamp(1.4rem, .9vw + 1rem, 2rem); color:var(--blue-800);
}

/* Announcements */
.announcements{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1rem;
}
.announcement{
  background:var(--card); padding:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow);
  border-left:6px solid var(--blue-700);
}
.announcement h3{
  margin:.2rem 0 .4rem; color:var(--blue-800);
}
.announcement a{ color:var(--blue-700); font-weight:700; text-decoration:none; }
.announcement a:hover{ text-decoration:underline; }

/* Cards Grid */
.grid-4{
  display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid-4{ grid-template-columns: 1fr;} }

.card{
  background:var(--card); padding:1.25rem 1.25rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #eef2f6;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.08); }
.card h3{ margin-top:0; color:var(--blue-800); }
.card .list{ padding-left:1.1rem; margin:0; }
.card .list li{ margin:.35rem 0; }

/* CTA Band */
.cta-band{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500));
  color:#fff;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.6rem 0;
}
.cta-text h2{ margin:.2rem 0 .2rem; }
.cta-text p{ margin:0; opacity:.95; }
@media (max-width: 820px){
  .cta-inner{ flex-direction:column; text-align:center; }
}

/* Panels / Columns */
.grid-3{
  display:grid; gap:1rem; grid-template-columns: repeat(3,1fr);
}
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } }

.panel{
  background:var(--card); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
  border:1px solid #eef2f6;
}
.panel h3{ margin-top:0; color:var(--blue-800); }

/* Events List */
.events{ list-style:none; margin:0; padding:0; }
.events li{ padding:.6rem .2rem; border-bottom:1px dashed #e8eef6; }
.events li:last-child{ border-bottom:0; }
.event-title{ font-weight:700; text-decoration:none; color:var(--ink-700); }
.event-title:hover{ color:var(--blue-700); }
.event-meta{ color:var(--ink-300); font-size:.95rem; }

/* Links list */
.links{ list-style: none; padding:0; margin:0; }
.links li{ margin:.4rem 0; }
.links a{ text-decoration:none; color:var(--blue-700); font-weight:700; }
.links a:hover{ text-decoration:underline; }

/* Sponsors */
.sponsors{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center;
}
.sponsor-card{
  background:#0a76a8; border-radius:14px; padding:18px 24px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; min-width:220px; min-height:90px;
}
.sponsor-card img{ max-height:40px; width:auto; display:block; filter:brightness(1.1); }
.sponsor-card.sponsor-light{ background:#fff; }
.sponsor-card.sponsor-light img{ filter:none; }

/* Search + Social row */
.split{ display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap; }
.search{ display:flex; gap:.6rem; }
.search-input{
  border:1px solid #e2e8f0; padding:.7rem .9rem; border-radius:999px; min-width:260px;
}
.social{ display:flex; gap:.6rem; flex-wrap:wrap; }
.social-btn{
  text-decoration:none; font-weight:700; color:var(--blue-700); background:#fff; border:1px solid #e2e8f0;
  padding:.55rem .9rem; border-radius:999px;
}
.social-btn:hover{ background:var(--ink-100); }

/* Footer */
.site-footer{
  background:var(--blue-800); color:#dbe7ff;
}
.footer-inner{
  text-align:center; padding:1.6rem 0;
}
.footer-inner a{ color:#fff; font-weight:700; text-decoration:underline; }
.wa-credit{ opacity:.95; }


.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between logo and text */
}

.logo {
  width: 60px;  /* adjust size as needed */
  height: auto;
}