:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#222;
  --muted:#6a6a6a;
  --border:1px solid #e3e3e3;
  --pad:1.5rem;
  --gap:1rem;
  --radius:12px;
}

/* Reset */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:var(--bg);
}

/* Header */
.topbar {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:0.5rem 1.25rem;
  background:#fff;
  border-bottom:var(--border);
  position:sticky;top:0;z-index:10;
}
.logo {justify-self:start;}
.page-title {justify-self:center;font-weight:700;font-size:1.5rem;}
.icon {justify-self:end;}
.logo img,.icon img {display:block;}

/* Desktop defaults */
.logo img { width:153px; height:50px; }
.icon img { width:70px; height:70px; }

/* Mobile adjustments */
@media (max-width:768px){
  .logo img { width:150px; height:auto;}
  .icon { display:none; } /* hide right-side icon */
  .page-title { font-size:1.2rem; margin:10px; }
  
  /* Stack multi-column cards vertically on mobile */
  .card > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Add visual separation between stacked sections */
  .card > div[style*="grid-template-columns"] > div:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom: 1px solid #e3e3e3;
  }
}

/* Default (desktop/tablet) */
.logo.full-logo {
  width: 153px;
  height: 50px;
  display: inline-block;
}
.logo.acronym-logo {
  display: none;
}

/* Mobile */
@media (max-width:768px){
  .logo.full-logo { display: none; }
  .logo.acronym-logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right:10px;
  }
}

/* Wrapper */
.wrapper{max-width:1200px;margin:1rem auto 6rem;padding:0 1rem}


/* ========================================
   HOME PAGE STYLES
   ======================================== */

/* Home Hero Section */
.home-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
  margin-bottom: 2rem;
}

.home-hero-icon {
  width: 240px;
  height: 240px;
  margin-bottom: 1.5rem;
}

.home-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

/* Home Intro & Sections */
.home-intro {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.home-intro p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.home-intro p:last-child {
  margin-bottom: 0;
}

.home-intro a {
  color: #0078bf;
  text-decoration: underline;
}

.home-intro a:hover {
  color: #004f7a;
}

.home-section {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.home-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
}

.home-section p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

.home-section p:last-child {
  margin-bottom: 0;
}

.home-list {
  list-style-type: disc;
  padding-left: 2rem;
  margin: 1rem 0;
}

.home-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Home Priorities Section */
.home-priorities {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.home-priorities h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
  text-align: center;
}

.home-priorities-intro {
  text-align: center;
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.priority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.priority-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.priority-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.priority-card.achieving {
  border-color: #f48120;
}

.priority-card.achieving:hover {
  background: #fff8f3;
  border-color: #f48120;
}

.priority-card.believing {
  border-color: #0078bf;
}

.priority-card.believing:hover {
  background: #f0f8ff;
  border-color: #0078bf;
}

.priority-card.belonging {
  border-color: #95c11f;
}

.priority-card.belonging:hover {
  background: #f8fcf0;
  border-color: #95c11f;
}

.priority-card.becoming {
  border-color: #fbba00;
}

.priority-card.becoming:hover {
  background: #fffbf0;
  border-color: #fbba00;
}

.priority-card-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

.priority-card-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #111827;
}

.priority-card-content p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* Mobile Responsiveness for Home Page */
@media (max-width: 768px) {
  .home-hero {
    padding: 2rem 1rem 1.5rem;
  }
  
  .home-hero-icon {
    width: 160px;
    height: 160px;
  }
  
  .home-hero h1 {
    font-size: 1.75rem;
  }
  
  .home-intro,
  .home-section,
  .home-priorities {
    padding: 1.5rem;
  }
  
  .priority-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .priority-card {
    padding: 1.5rem 1rem;
  }
  
  .priority-card-icon {
    width: 70px;
    height: 70px;
  }
}


/* Strategic Priority Header */
.priority-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2.2rem 0;
}

.priority-icon {
  width: 90px; 
  height: 90px; 
  flex-shrink: 0;
}

.priority-text h2 {
  font-size: 2.4rem;
  margin: 0 0 0.2rem;
  font-weight: 900;
  color: #111827; /* dark navy/black */
}

.priority-text h3 {
  font-size: 1.5rem;
  font-weight: 200;
  margin: 0 0 .5rem;
}

.priority-text ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.priority-text li {
  margin-bottom: .4rem;
  font-size: 1rem;
  color: #444;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .priority-header {
    flex-direction: column;
    text-align: center;
  }
  .priority-icon {
    width: 80px;
    height: 80px;
  }
  .priority-text h2 {
    font-size: 1.5rem;
  }
  .priority-text h3 {
    font-size: 1.3rem;
  }
}


/* Grid + Card */
.grid{display:flex;flex-wrap:wrap;gap:var(--gap);margin-bottom:1.5rem;position:relative}
/* Remove the ::after pseudo-element that creates lines after every section */
.card{background:var(--card);border:var(--border);border-radius:var(--radius);padding:var(--pad);flex:1 1 320px;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.card.small{flex-basis:260px}
.card.wide{flex-basis:520px}
.card h3{margin:0 0 1.25rem;font-size:1rem}
.meta{color:var(--muted);font-size:.9rem}

/* KPI */
.kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.kpi .num{
  font-size:2rem;
  font-weight:800;
  line-height:1.2;
}
.kpi .label{
  color:var(--muted);
  font-size:.85rem; /* smaller label */
}

.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;justify-items:center;text-align:center}
.kpi-box .big{font-size:2rem;font-weight:800;line-height:1.2}
.kpi-box .sub{color:var(--muted);margin-top:.25rem;font-size:.85rem} /* smaller sub text */

/* Bars */

.hbars{display:grid;gap:.5rem;margin-top:1.5rem}
.hbar{position:relative;height:12px;background:#f1f1f1;border-radius:999px;overflow:hidden}
.hbar > span{position:absolute;left:0;top:0;bottom:0;border-radius:999px}

.label{font-size:.85rem;color:#555;margin:.15rem 0 .6rem}
.label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color:#555;
  margin:.15rem 0 .6rem;
}

.label .program-left {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.label .info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: opacity .2s;
}

.label .info-icon:hover {
  opacity: 1;
}

.label .program-value {
  font-weight: 600;
}


.group-bars{display:flex;align-items:flex-end;gap:2.75rem;min-height:200px;padding:1rem 0 0;margin-top:1rem}
.col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.35rem;height:100%}
.col > .num{font-size:.85rem;color:#555;font-weight:600;margin-bottom:.4rem;order:-1}
.vbar{width:28px;height:100%;background:#f1f1f1;border-radius:8px 8px 0 0;position:relative;overflow:hidden}
.vbar > span{position:absolute;bottom:0;left:0;right:0;border-radius:8px 8px 0 0;height:0%;opacity:0;min-height:25%}
.xlabel{margin-top:.35rem;color:#666;font-size:.9rem;text-align:center;min-height:2.5em;cursor:default !important;}

.rowbars{display:grid;gap:.6rem;margin:.25rem 0}

.rowbars .row{display:grid;gap:.5rem;align-items:center}
.rowbars .glabel{color:#555;font-size:0.75em; font-weight:700}
.rowbars .triple{display:flex;gap:.5rem}
.rowbars .hb{flex:1;min-width:90px;height:12px;background:#f1f1f1;border-radius:999px;position:relative;overflow:hidden}
.rowbars .hb .fill{position:absolute;left:0;top:0;bottom:0}
.rowbars .hb .pct{position:absolute;right:.35rem;top:-1.35rem;font-size:.75rem;color:#555}

.rowbars-with-labels{padding-bottom:2rem;gap:1.5rem}
.rowbars-with-labels .hb{overflow:visible !important}
.rowbars-with-labels .hb .pct{position:absolute !important;left:50% !important;transform:translateX(-50%) !important;top:100% !important;margin-top:0.25rem;font-size:.75rem;color:#555;font-weight:600;right:auto !important}
.rowbars .hb .pct{position:absolute;right:.35rem;top:-1.35rem;font-size:.75rem;color:#555}

/* Colors */
.c-red{background:#e96f5d}
.c-light-blue{background:#5fb9eb}
.c-yellow{background:#f1db6f}
.c-green{background:#66cb84}
.c-blue{background:#2ca3df}
.c-teal{background:#35d2c2}
.c-purple{background:#a74dd5}
.c-aqua{background:#4dd5a0}
.c-orange{background:#ea9850}
.c-pink{background:#e6558b}

/* Blue Family - Subtle variations */
.c-blue-1{background:#4db5eb}  /* Lightest */
.c-blue-2{background:#3daae3}
.c-blue-3{background:#2ca3df}  /* Original blue */
.c-blue-4{background:#2591cb}
.c-blue-5{background:#1e7fb7}
.c-blue-6{background:#176da3}  /* Darkest */

/* Green Family - Subtle variations */
.c-green-1{background:#85dca4}  /* Lightest */
.c-green-2{background:#75d494}
.c-green-3{background:#66cb84}  /* Original green */
.c-green-4{background:#59bf78}
.c-green-5{background:#4cb36c}
.c-green-6{background:#3fa760}  /* Darkest */

/* Teal Family - Subtle variations */
.c-teal-1{background:#5fe4d7}   /* Lightest */
.c-teal-2{background:#4addd0}
.c-teal-3{background:#35d2c2}   /* Original teal */
.c-teal-4{background:#2ec5b5}
.c-teal-5{background:#27b8a9}
.c-teal-6{background:#20ab9d}   /* Darkest */

/* Orange Family - Subtle variations */
.c-orange-1{background:#f5b070} /* Lightest */
.c-orange-2{background:#f0a460}
.c-orange-3{background:#ea9850} /* Original orange */
.c-orange-4{background:#e28c47}
.c-orange-5{background:#da803e}
.c-orange-6{background:#d27435} /* Darkest */

/* Red Family - Subtle variations */
.c-red-1{background:#f28f7d}    /* Lightest */
.c-red-2{background:#ed7f6d}
.c-red-3{background:#e96f5d}    /* Original red */
.c-red-4{background:#e16654}
.c-red-5{background:#d95d4b}
.c-red-6{background:#d15442}    /* Darkest */

/* Aqua Family - Subtle variations */
.c-aqua-1{background:#6de7c0}   /* Lightest */
.c-aqua-2{background:#5ddfb0}
.c-aqua-3{background:#4dd5a0}   /* Original aqua */
.c-aqua-4{background:#46cb96}
.c-aqua-5{background:#3fc18c}
.c-aqua-6{background:#38b782}   /* Darkest */

/* Yellow Family - Subtle variations */
.c-yellow-1{background:#fae98f} /* Lightest */
.c-yellow-2{background:#f7e37f}
.c-yellow-3{background:#f1db6f} /* Original yellow */
.c-yellow-4{background:#edd768}
.c-yellow-5{background:#e9d360}
.c-yellow-6{background:#e5cf58} /* Darkest */

/* Purple Family - Subtle variations */
.c-purple-1{background:#c76df5} /* Lightest */
.c-purple-2{background:#b75de5}
.c-purple-3{background:#a74dd5} /* Original purple */
.c-purple-4{background:#9d46c7}
.c-purple-5{background:#933fb9}
.c-purple-6{background:#8938ab} /* Darkest */

/* Light Blue Family - Subtle variations */
.c-light-blue-1{background:#8fcff7} /* Lightest */
.c-light-blue-2{background:#7fc5f1}
.c-light-blue-3{background:#5fb9eb} /* Original light-blue */
.c-light-blue-4{background:#57ace1}
.c-light-blue-5{background:#4f9fd7}
.c-light-blue-6{background:#4792cd} /* Darkest */

/* Pink Family - Subtle variations */
.c-pink-1{background:#f575ab}   /* Lightest */
.c-pink-2{background:#ec659b}
.c-pink-3{background:#e6558b}   /* Original pink */
.c-pink-4{background:#dd4e81}
.c-pink-5{background:#d44777}
.c-pink-6{background:#cb406d}   /* Darkest */

/* Legend */
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.35rem}
.circle{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.35rem;vertical-align:middle}

/* Pills */
.badge{
  display:inline-block;
  font-size:.8rem; /* slightly smaller */
  padding:.25rem .5rem;
  border-radius:999px;
  border:var(--border);
  background:#fcfcfc;
  white-space:nowrap;
}

/* Row titles - Add border before each objective */
.row-title{
  font-weight:700;
  font-size:1.1rem;
  margin:2rem 0 1rem;
  color:#333;
  padding-top:2rem;
  border-top:1px solid #ddd;
}

/* Remove border from the first objective title */
.row-title:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Footer Tabs */
.tabs {
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:5;
  background: linear-gradient(90deg,#043551, #115a70 );
  display:flex;
  gap:.5rem;
  justify-content:center;
  padding:1rem;
}

/* Default tab style (desktop) */
.tab {
  display: flex;
  align-items: center;
  gap: .5rem;
  appearance: none;
  background: #fff;              /* inactive = white */
  padding: .2rem 1.8rem .2rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  color: #333;
  cursor: default;
  font-size: 1.05rem;
  text-decoration: none;
}
.tab img {
  height: 42px;
  width: 42px;
}
.tab-label {
  display: inline;
}

/* Active colors & icon swap (AODA-compliant text colors) */
.tab.is-active { color: #fff; }  /* default; overridden per tab where needed */

.tab.is-active[data-tab="achieving"] {
  background: #f48120;           /* Orange */
  color: #fff;
}
.tab.is-active[data-tab="believing"] {
  background: #0078bf;           /* Blue */
  color: #fff;
}
.tab.is-active[data-tab="belonging"] {
  background: #95c11f;           /* Green */
  color: #fff;
}
.tab.is-active[data-tab="becoming"] {
  background: #fbba00;           /* Yellow */
  color: #fff;
}

/* Swap inactive → active icons via CSS */
.tab.is-active[data-tab="achieving"] img { content: url("images/achieving-active.png"); }
.tab.is-active[data-tab="believing"] img { content: url("images/believing-active.png"); }
.tab.is-active[data-tab="belonging"] img { content: url("images/belonging-active.png"); }
.tab.is-active[data-tab="becoming"] img { content: url("images/becoming-active.png"); }

/* Mobile: icon-only circles */
@media (max-width: 768px){
  .tabs { justify-content: space-around; } /* spread evenly */
  .tab {
    width: 56px;                /* slightly smaller circle */
    height: 56px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: #fff;           /* inactive = white */
    border: 1px solid #fff;     /* keep white ring on mobile too */
  }
  .tab img {
    width: 44px;                /* larger icon inside smaller circle */
    height: 44px;
  }
  .tab-label { display: none; }

  /* Active states still override background color */
  .tab.is-active[data-tab="achieving"]  { background: #f48120; color:#fff; }
  .tab.is-active[data-tab="believing"]  { background: #0078bf; color:#fff; }
  .tab.is-active[data-tab="belonging"]  { background: #95c11f; color:#fff; }
  .tab.is-active[data-tab="becoming"]   { background: #fbba00; color:#000; }
}


/* Basic Micromodal styles */
.modal { 
  display: none; 
}
.modal.is-open { 
  display: block; 
}
.modal__overlay {
  background: rgba(0,0,0,0.6);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal__container {
  background:#fff;
  border-radius:8px;
  max-width:600px;
  max-height:80vh;
  overflow-y:auto;
  padding:2rem;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  position: relative;  /* REQUIRED for absolute positioning */
}

/* Modal header */
.modal__header {
  margin-bottom: 1rem;
  padding: 0;              /* remove default padding */
}
.modal__header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-link {
  color: #0078bf;        /* HCDSB blue */
  cursor: pointer;
}
.modal-link:hover {
  color: #004f7a;        /* darker hover */
  text-decoration: underline;
}


/* Close button (true top-right corner) */
.modal__close {
  position: absolute;
  top: 1rem;               /* distance from container top */
  right: 1rem;             /* distance from container right */
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.modal__close:hover {
  color: #000;
}

/* Modal content */
.modal__content {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}
.modal__content p {
  margin: 0 0 1rem;
}
.modal__content a {
  color: #0078bf;
  text-decoration: underline;
}
.modal__content a:hover {
  color: #004f7a;
}

/* Micromodal slide/fade animations */
.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0,0,.2,1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0,0,.2,1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .2s cubic-bezier(.4,0,1,1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .2s cubic-bezier(.4,0,1,1);
}

@keyframes mmfadeIn { from {opacity:0} to {opacity:1} }
@keyframes mmfadeOut { from {opacity:1} to {opacity:0} }
@keyframes mmslideIn { from {transform:translateY(15%)} to {transform:translateY(0)} }
@keyframes mmslideOut { from {transform:translateY(0)} to {transform:translateY(15%)} }