/* ============== Base reset ============== */
html, body { margin:0; padding:0; height:100%; }
ul, ol { margin:0; padding:0; list-style:none; }
li { margin:0; padding:0; }
*, *::before, *::after { box-sizing:border-box; }
body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6; color:var(--ink); background:#fff;
}
main { flex:1; }
.icon { width:20px; height:20px; display:inline-block; }

/* Layout container */
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* Tokens */
:root{
  --ink:#0b234c;
  --muted:#4b5563;
  --bg:#ffffff;
  --bg-alt:#f6f8fb;

  --green:#00713D;        
  --blue:#0080c9;         
  --blue2:#0080c9;

  --edgec:#e6e9ef;
  --edge:1px solid var(--edgec);
  --shadow:0 6px 20px rgba(17,24,39,.08);
  --panel-gap:10px;
  --maxw:1200px;
}

/* ============== Utility bar ============== */
.util{ background:var(--green); color:#fff; font:14px/1.4 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif; }
.util .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 20px; }
.util a{ color:#fff; opacity:.9; text-decoration:none; }
.util a:hover{ opacity:1; }
.util-links{ display:flex; gap:18px; flex-wrap:wrap; }

/* ============== Header ============== */
.site-header{
  position:sticky; top:0; background:#fff; border-bottom:2px solid var(--edgec); z-index:1100;
  /* keep megamenu on top of page content but under mobile drawer */
}
.site-header .header-inner{
  display:flex; align-items:center; gap:18px; padding:8px 20px; flex-wrap:wrap;
  min-height:64px;
}
.site-header, .site-header a, .site-header summary{
  font:600 14px/1.2 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo img{ height:56px; display:block; max-width:100%; }

/* Main nav */
nav[aria-label="Main"]{ flex:1; min-width:240px; }
.main-nav{
  display:flex; gap:18px; align-items:center; margin:0; padding:0;
  flex-wrap:wrap;
  overflow:visible; /* was hidden — this was blocking dropdowns */
}
.main-nav > li{ position:relative; }

.main-nav > li > a,
.main-nav > li > details > summary{
  display:inline-flex; align-items:center; gap:6px; padding:10px 0; text-decoration:none; cursor:pointer;
}
summary::-webkit-details-marker{ display:none; }
.main-nav details > summary::after{
  content:""; width:12px; height:12px; margin-left:4px; flex:0 0 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 12px; transition:transform .2s ease;
}
.main-nav details[open] > summary::after{ transform:rotate(180deg); }
.main-nav > li > a:hover,
.main-nav > li > details > summary:hover{
  background:linear-gradient(to right,var(--green),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Panels (desktop dropdowns) */
.main-nav details{ position:static; }
.main-nav details .panel{
  position:absolute; top:calc(100% + var(--panel-gap)); left:var(--panel-left, 0px);
  background:#fff; border:var(--edge); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; display:grid; grid-template-columns:1fr; gap:4px;
  width:max-content; max-width:var(--panel-max, 90vw);
  z-index:4000; pointer-events:auto; opacity:0; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}
details[open] .panel{ opacity:1; transform:translateY(0); }
.main-nav details.align-right .panel{ left:auto; right:var(--panel-right, 0px); }
.main-nav details.no-cap .panel{ width:max-content; max-width:calc(100vw - 24px); }
.main-nav details.no-cap .panel a{ white-space:normal; line-height:1.35; }
.main-nav details .panel a{
  white-space:nowrap; letter-spacing:.03em; font-weight:600; color:#111827; text-decoration:none;
  padding:10px 12px; border-radius:8px;
}
.main-nav details .panel a:hover, .main-nav details .panel a:focus{ background:#f3f4f6; outline:none; }

/* CTAs (right) */
.main-nav-right{ display:flex; gap:10px; align-items:center; position:relative; z-index:1200; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  border:1px solid #d1d5db; background:#fff; color:#111827; font-weight:700; cursor:pointer;
  transition:all .15s ease; text-decoration:none;
}
.btn.blue{ background:#003169; color:#fff; border-color:#003169; }
.btn.blue:hover{ filter:brightness(1.08); }
.btn.outline{ background:transparent; color:var(--green); border-color:var(--green); }
.btn.outline:hover{ background:var(--green); color:#fff; }

/* User menu */
.user-menu{ position:relative; }
.user-menu summary{
  list-style:none; cursor:pointer; border:1px solid #d1d5db; background:#fff; color:var(--ink);
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center; padding:0;
}
.user-menu summary::-webkit-details-marker{ display:none; }
.user-menu summary:focus-visible{ outline:3px solid #9ad1ff; outline-offset:2px; border-radius:999px; }
.user-menu .panel{
  position:absolute; right:0; top:calc(100% + 10px);
  background:#fff; border:1px solid var(--edgec); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; display:grid; gap:4px; min-width:220px; z-index:4000;
  opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
}
.user-menu[open] .panel{ opacity:1; transform:translateY(0); }
.user-menu .panel a{ text-decoration:none; color:#111827; padding:10px 12px; border-radius:8px; font-weight:600; display:flex; align-items:center; gap:8px; }
.user-menu .panel a:hover{ background:#f3f4f6; }
.user-menu .umeta{ padding:8px 10px; border-bottom:1px solid var(--edgec); color:#475569; font-weight:600; }
.user-menu .role{ text-transform:uppercase; font-size:12px; letter-spacing:.05em; color:var(--ink); font-weight:900; }

/* Hamburger button */
.nav-toggle{
  display:none;             
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:10px;
  width:44px; height:40px;
  padding:0;
  cursor:pointer;
  align-items:center; justify-content:center;
  line-height:0;             
  font-size:0;            
  position:relative;
  transition:transform .15s ease;
}
.nav-toggle:active{ transform:scale(.98); }
.nav-toggle:focus-visible{ outline:3px solid #9ad1ff; outline-offset:2px; border-radius:10px; }

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:"";
  display:block;
  width:22px; height:2px;
  background:#0b234c;
  border-radius:2px;
  position:relative;
}
.nav-toggle__bar::before,
.nav-toggle__bar::after{ position:absolute; left:0; }
.nav-toggle__bar::before{ top:-7px; }
.nav-toggle__bar::after{  top: 7px; }

/* Animate to “X” when open */
.nav-toggle.is-active .nav-toggle__bar{ background:transparent; }
.nav-toggle.is-active .nav-toggle__bar::before{ top:0; transform:rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar::after{  top:0; transform:rotate(-45deg); }

/* Mobile placement */
@media (max-width: 960px){
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  nav[aria-label="Main"]{ display:none; }  /* hide desktop nav; use drawer */
  .main-nav-right{ display:none; }         /* mirrored inside drawer */
  .site-header .header-inner{ justify-content:flex-start; }
}

/* Mobile drawer */
.mobile-nav[hidden]{ display:none !important; }
.mobile-nav{
  position:fixed; inset:0; z-index:1400;  /* above header & dropdowns */
}
.mobile-nav__backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.45);
  opacity:0; transition:opacity .18s ease;
}
.mobile-nav__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
  background:#fff; border-left:1px solid var(--edgec); box-shadow:0 10px 30px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-nav.is-open .mobile-nav__backdrop{ opacity:1; }
.mobile-nav.is-open .mobile-nav__panel{ transform:none; }
.mobile-nav__header{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--edgec);
  font:600 14px/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
}
.mobile-nav__close{ border:1px solid #d1d5db; background:#fff; border-radius:10px; width:40px; height:36px; cursor:pointer; }
.mobile-nav__body{ padding:8px 8px 16px; overflow:auto; -webkit-overflow-scrolling:touch; }
.mobile-nav__list{ display:grid; gap:4px; }
.mobile-nav__footer{ display:flex; gap:8px; padding:12px 8px calc(12px + env(safe-area-inset-bottom, 0)); border-top:1px solid var(--edgec); }

/* Mobile collapsibles */
.m-collapsible{ border-bottom:1px dashed var(--edgec); padding-bottom:4px; }
.m-collapsible__btn{
  width:100%; text-align:left; background:transparent; border:0; padding:12px;
  font:700 14px/1.2 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink); display:flex; justify-content:space-between; align-items:center;
}
.m-collapsible__btn:focus-visible{ outline:3px solid #9ad1ff; outline-offset:2px; border-radius:8px; }
.m-collapsible__panel{ display:none; padding:6px 8px 8px 16px; }
.m-collapsible[aria-expanded="true"] .m-collapsible__panel{ display:grid; gap:6px; }
.m-collapsible__panel a{ text-decoration:none; color:#111827; font-weight:600; padding:8px 6px; border-radius:8px; }
.m-collapsible__panel a:hover{ background:#f3f4f6; }

/* ============== Responsive Tweaks ============== */
@media (max-width: 1200px){
  .container{ padding:0 16px; }
}
@media (max-width: 1024px){
  .main-nav{ gap:20px; }
}
@media (max-width: 720px){
  .brand .logo img{ height:50px; }
}
@media (max-width: 600px){
  .brand .logo img{ height:48px; }
  .btn{ padding:8px 12px; border-radius:8px; }
  .util .container{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.m-collapsible .chev{
  display:inline-block; transition:transform .2s ease;
}
.m-collapsible[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

    .prog__header {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 28px 28px 20px;
      border-bottom: 1px solid #e2e8f0;
    }
    .prog__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: #003169;
      border-radius: 16px;
      color: white;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 49, 105, 0.15);
    }
    .prog__header h3 {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 800;
      color: #003169;
      line-height: 1.3;
      transition: all 0.3s ease;
      letter-spacing: -0.02em;
    }
    .prog__body {
      padding: 20px 28px 28px;
    }
    .prog__body p {
      margin: 0;
      color: #64748b;
      line-height: 1.7;
      font-size: 1rem;
    }
    .prog__card:hover .prog__icon {
      background: #0080c9;
      transform: translateY(-4px) scale(1.1);
      box-shadow: 0 12px 28px rgba(0, 128, 201, 0.25);
    }
    .prog__card:hover .prog__header h3 {
      color: #0080c9;
      transform: translateY(-2px);
    }
    .prog__card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      overflow: hidden;
      background: white;
      text-decoration: none;
      display: block;
      cursor: pointer;
      position: relative;
    }
    .prog__card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #003169;
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: left;
    }
    .prog__card:hover::before {
      transform: scaleX(1);
    }
    .prog__card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0, 49, 105, 0.18);
      border-color: #0080c9;
    }
    .prog__card:active {
      transform: translateY(-2px);
      transition-duration: 0.1s;
    }
    
    .why__card {
      display: block !important;
      text-decoration: none;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0, 49, 105, 0.06);
    }
    .why__card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 60px rgba(0, 49, 105, 0.15);
      border-color: #0080c9;
      text-decoration: none;
    }
    .why__image {
      position: relative;
      height: 220px;
      overflow: hidden;
    }
    .why__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      filter: brightness(1.1);
    }
    .why__card:hover .why__image img {
      transform: scale(1.08);
    }
    .why__overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 49, 105, 0.85) 0%, rgba(0, 128, 201, 0.75) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s ease;
    }
    .why__card:hover .why__overlay {
      opacity: 1;
    }
    .why__overlay .why__ico {
      background: rgba(255, 255, 255, 0.2) !important;
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.3);
      transform: scale(1.2);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1.2); }
      50% { transform: scale(1.3); }
    }
    .why__content {
      padding: 28px;
    }
    .why__header {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 20px;
    }
    .why__ico {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: #0080c9;
      border-radius: 20px;
      color: white;
      flex-shrink: 0;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 128, 201, 0.3);
    }
    .why__card:hover .why__content .why__ico {
      background: #003169;
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 8px 25px rgba(0, 49, 105, 0.4);
    }
    .why__header h3 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 800;
      color: #003169;
      line-height: 1.3;
      transition: all 0.3s ease;
      letter-spacing: -0.02em;
    }
    .why__card:hover .why__header h3 {
      color: #0080c9;
      transform: translateY(-2px);
    }
    .why__body {
      margin: 0;
    }
    .why__body p {
      margin: 0 0 16px 0;
      color: #64748b;
      line-height: 1.7;
      font-size: 1rem;
    }
    .why__link {
      display: inline-flex;
      align-items: center;
      font-weight: 700;
      color: #0080c9;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 2px solid transparent;
    }
    .why__card:hover .why__link {
      color: #003169;
      border-bottom-color: #003169;
      transform: translateX(4px);
    }
   
    .why__card:not(:has(.why__image)) .why__header {
      align-items: flex-start;
    }
    .why__card:not(:has(.why__image)) .why__ico {
      background: #00713D;
      box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    }
    .why__card:not(:has(.why__image)) .why__ico:hover {
      background: #003169;
      box-shadow: 0 8px 25px rgba(0, 49, 105, 0.4);
    }
    
    .why .sec__head h2 {
      font-size: 2.5rem;
      font-weight: 900;
      color: #003169;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .why .sec__kicker {
      font-size: 1.2rem;
      color: #64748b;
      font-weight: 400;
      line-height: 1.6;
    }
    
    /* Partners section highlighting */
    .partners {
      scroll-margin-top: 100px; 
      transition: all 0.5s ease;
    }
    .partners.highlighted {
      background: rgba(0, 128, 201, 0.02);
      box-shadow: 0 12px 40px rgba(0, 128, 201, 0.2);
    }

/* HOMEPAGE */
main, .hero, .quick, .why, .spotlight, .programs, .partners, .news, .cta{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
}

.container{max-width:var(--maxw);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons (keeps your header .btn intact) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;border:2px solid transparent;transition:filter .12s ease,background .12s ease,color .12s ease,border-color .12s ease}
.btn--solid{background:var(--green);color:#fff;border-color:var(--green)}
.btn--solid:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:#fff;border-color:#ffffffb3}
.btn--ghost:hover{background:#ffffff14;border-color:#fff}
.btn--outline-blue{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--outline-blue:hover{background:#eef2ff}

/* ============== HERO ============== */
.hero{position:relative;color:#fff;overflow:hidden;min-height:clamp(480px,64vh,720px);background:#0a204b}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03)}
.hero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero__inner{position:relative;z-index:2;min-height:inherit;display:flex;align-items:center}
.hero__eyebrow{display:inline-block;background:#e8f5ee;border:1px solid #d6e9df;color:#0b234c;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.05em}
.hero__title{margin:10px 0 8px;font-weight:900;font-size:clamp(32px,5vw,62px);line-height:1.05;letter-spacing:.01em}
.hero__subtitle{margin:0 0 18px;font-size:clamp(16px,2.2vw,20px);opacity:.95;max-width:60ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============== QUICK ACTIONS ============== */
.quick{background:#fff;border-block:1px solid var(--edgec)}
.quick__grid{list-style:none;margin:0;padding:14px 0;display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}
.quick__card{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:#f5f7fb;border:1px solid var(--edgec);border-radius:12px;text-decoration:none;color:#0e234a;font-weight:800;letter-spacing:.02em;text-transform:uppercase;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.quick__card:hover{transform:translateY(-1px);background:#eef3fb;border-color:#d8e2f5}
.quick__ico{color:var(--blue)}
@media (max-width:980px){ .quick__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .quick__grid{grid-template-columns:repeat(2,1fr)} }

/* ============== WHY ============== */
.why{background:#fff}
.sec__head{padding:clamp(28px,5vw,48px) 0 10px}
.sec__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sec__head h2{margin:0;font-weight:900;font-size:clamp(22px,3.2vw,34px);color:#0b234c}
.sec__kicker{margin:6px 0 0;color:var(--muted)}
.why__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);padding:10px 0 clamp(24px,5vw,48px)}
.why__card{display:grid;gap:10px;background:#fff;border:1px solid var(--edgec);border-radius:16px;padding:18px;transition:box-shadow .12s ease,transform .12s ease}
.why__card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.why__ico{color:var(--green)}
.why__card h3{margin:4px 0;font-size:18px;font-weight:900;color:#0b234c}
.why__card p{margin:0 0 4px;color:#475569}
.link{font-weight:800;color:var(--blue2);text-decoration:none}
.link:hover{text-decoration:underline}
@media (max-width:940px){ .why__grid{grid-template-columns:1fr} }

/* ============== SPOTLIGHT ============== */
.spotlight{background:var(--bg-alt);border-top:1px solid var(--edgec)}
.spotlight__inner{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:center;padding:clamp(24px,5vw,48px) 0}
.spotlight__media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--edgec);
  background:#0f1f3a;
  aspect-ratio:16/9; /* keep a consistent video frame */
}
/* Fill the frame with any media type */
.spotlight__media iframe.spotlight__video,
.spotlight__media video,
.spotlight__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  object-fit:cover;
}
/* Optional: nicer placeholder alignment */
.spotlight__placeholder{
  position:absolute; inset:0; display:grid; place-items:center; color:#e5e7eb;
  background:linear-gradient(180deg, #0f1f3a, #0b234c);
  text-align:center; padding:1rem;
}

.spotlight__play{position:absolute;right:16px;bottom:16px;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;border:2px solid #fff;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.spotlight__play:hover{background:rgba(255,255,255,.2)}
.eyebrow{display:inline-block;background:#e8f5ee;color:#0b234c;border:1px solid #d6e9df;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.spotlight__copy h3{margin:10px 0 8px;font-size:clamp(20px,3vw,28px);font-weight:900;color:#0b234c}
.spotlight__copy p{margin:0 0 16px;color:#475569}
.spotlight__actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){ .spotlight__inner{grid-template-columns:1fr} }

/* ============== PROGRAMS ============== */
.programs{background:#fff}
.prog__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);padding:10px 0 clamp(24px,5vw,48px)}
.prog__card{display:grid;background:#fff;border:1px solid var(--edgec);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .12s ease,transform .12s ease}
.prog__card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.prog__media{aspect-ratio:16/9;background:#0f1f3a;overflow:hidden}
.prog__media img{width:100%;height:100%;object-fit:cover;display:block}
.prog__body{padding:14px 16px}
.prog__body h3{margin:0 0 6px;font-size:18px;font-weight:900;color:#0b234c}
.prog__body p{margin:0;color:#475569}
@media (max-width:940px){ .prog__grid{grid-template-columns:1fr} }

/* ============== PARTNERS — CAROUSEL (matches your HTML) ============== */
.partners{background:#fff;border-top:1px solid var(--edgec)}
.partners__head{padding:clamp(24px,4vw,36px) 0 6px}
.partners__head h2{margin:0 0 4px;font-size:clamp(20px,3vw,28px);font-weight:900;color:#0b234c}
.partners__note{margin:0;color:#6b7280}

.partners-carousel{position:relative;max-width:var(--maxw);margin:8px auto 16px;padding:0 50px}
.pc__viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  cursor:grab;border:1px solid var(--edgec);border-radius:14px;background:#fff;scroll-padding-inline:16px
}
.pc__viewport:active{cursor:grabbing}
.pc__viewport::-webkit-scrollbar{display:none}
.pc__viewport{scrollbar-width:none}

.pc__track{display:flex;gap:24px;padding:16px;margin:0;list-style:none;align-items:stretch}
.pc__item{flex:0 0 auto;width:180px}
.pc__frame{
  width:100%;display:grid;grid-template-rows:98px auto;align-items:center;justify-items:center;gap:8px;
  border:1px solid var(--edgec);border-radius:12px;background:#fff;padding:12px 10px 10px;
  transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease
}
.pc__frame:hover{border-color:#d8dde8;box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.pc__frame.is-selected{border-color:var(--blue2);box-shadow:0 0 0 2px rgba(0,128,201,.15)}
.pc__logo{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.pc__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pc__caption{
  width:100%;text-align:center;font:800 13px/1.25 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.02em;text-transform:uppercase;color:#0b234c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.pc__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--edgec);border-radius:999px;background:#fff;color:#0b234c;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease
}
.pc__btn--prev{left:6px}
.pc__btn--next{right:6px}
.pc__btn:hover{transform:translateY(-50%) scale(1.05)}
.pc__btn[disabled]{opacity:.45;cursor:not-allowed}

.pc__details{border-top:1px solid var(--edgec);background:#f6f8fb}
.pcd__inner{display:flex;gap:14px;align-items:flex-start;padding:14px 20px}
.pcd__title{margin:2px 0 0;font-weight:900;color:#0b234c;font-size:16px}
.pcd__desc{margin:2px 0 0;color:#475569}
.pcd__link{margin-left:auto;align-self:center;font-weight:800;color:var(--blue2);text-decoration:none}
.pcd__link:hover{text-decoration:underline}

.pc__frame:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;border-radius:12px}

@media (max-width:820px){
  .pc__item{width:160px}
  .pc__frame{grid-template-rows:90px auto}
}
@media (max-width:640px){
  .partners-carousel{padding:0 44px}
  .pc__item{width:140px}
  .pc__frame{grid-template-rows:82px auto;padding:10px 8px}
  .pc__caption{font-size:12px}
  .pcd__inner{flex-direction:column;gap:6px}
  .pcd__link{margin-left:0}
}

/* ========================================================================= */
/* ============== UNIFIED FILTER BAR (nbar) - FINAL VERSION ============== */
/* ========================================================================= */

.nbar {
    /* Soft, neutral background */
    background: #fdfdfd;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: 16px 0; 
}

.nbar__inner {
    padding: 0 20px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.nbar__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex-grow: 1;
}

/* --- Category Pills (ncats) and Year Select (nyear) --- */

.pill {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #4b5563;
    border-radius: 4px; 
    padding: 8px 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    height: 40px; 
    display: flex;
    align-items: center;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 14px;
}

.pill:hover {
    background: #e5e7eb;
    transform: none;
}

.pill.is-active {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
    box-shadow: 0 1px 3px rgba(0,128,201,0.2);
}

.nyear select {
    /* Professional select styling */
    height: 40px; 
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0 30px 0 14px;
    background: #fff;
    color: #374151;
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    appearance: none;
    /* Clean SVG Arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%234B5563" d="M3.293 4.293a1 1 0 0 1 1.414 0L6 5.586l1.293-1.293a1 1 0 1 1 1.414 1.414l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 0-1.414z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.nyear select:focus {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(0,128,201,0.2);
    border-color: var(--blue);
}


/* --- Search Bar (nsearch) --- */

.nsearch {
    min-width: 200px;
    max-width: 320px; 
    display: flex;
    align-items: center;
    height: 40px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-left: auto; 
    flex-grow: 1;
}

.nsearch:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0,128,201,0.2);
}

.nsearch input[type="search"] {
    flex-grow: 1;
    min-width: 0;
    padding: 0 12px;
    font-size: 14px;
    line-height: 40px; 
    border: none;
    background: #fff;
    color: #1f2937;
    outline: none;
    height: 100%;
    border-radius: 6px 6px;
}

.nsearch button {
    height: 40px;
    width: 40px;
    padding: 0;
    background: var(--blue);
    color: white; /* Sets the color context for the SVG stroke */
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0 6px 6px 0;
}

.nsearch button:hover {
    background: #006BA6;
}

/* === CRUCIAL SVG STYLES for visibility and scaling === */
.nsearch svg {
    height: 18px; /* Slightly larger icon */
    width: 18px;
    /* The SVG is an outline. Fill must be none, stroke must be currentColor (white) */
    stroke: currentColor; 
    fill: none; 
    stroke-width: 2.2; /* Controls the thickness of the lines */
    /* Ensures the SVG doesn't attempt to render as block element if inherited oddly */
    display: block; 
}
/* === END CRUCIAL SVG STYLES === */


/* ==================== RESPONSIVE OVERRIDES =============================== */

@media (max-width: 900px) {
    /* Stacking filter bar elements */
    .nbar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .nbar__left {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Search bar takes full width of the container on smaller screens */
    .nsearch {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%; 
        width: 100%; 
        align-self: auto;
    }
}

/* ============== NEWS & EVENTS ============== */
.news{background:#fff}
.news .sec__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.news__grid{display:grid;gap:18px;grid-template-columns:2fr 1fr;padding:10px 0 clamp(24px,5vw,48px)}
.news__card{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--edgec);border-radius:16px;overflow:hidden;transition:box-shadow .12s ease,transform .12s ease}
.news__card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.news__media{position:relative;display:block;aspect-ratio:16/9;background:#0f1f3a;overflow:hidden}
.news__media img{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;left:12px;top:12px;background:#0b234c;color:#fff;border:2px solid #0b234c;border-radius:6px;padding:6px 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;box-shadow: 0 2px 8px rgba(11,35,76,0.3);}
.chip--blue{background:var(--blue2);border-color:var(--blue2);box-shadow: 0 2px 8px rgba(59,130,246,0.3);}
.chip--green{background:var(--green);border-color:var(--green);box-shadow: 0 2px 8px rgba(34,197,94,0.3);}
.news__body{padding:12px 14px}
.news__body h3{margin:0 0 6px;font-size:16px;font-weight:900;color:#0b234c}
.news__body a{text-decoration:none;color:inherit}
.news__body p{margin:0;color:#475569;font-size:14px}

/* events sidebar */
.events{background:#fff;color:#0b234c;border-radius:16px;padding:14px;border:1px solid var(--edgec)}
.events__title{margin:4px 6px 10px;font-size:16px;font-weight:900;color:#0b234c}
.events__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.event{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#f8fafc;border:1px solid var(--edgec)}
.event__date{display:grid;place-items:center;width:56px;aspect-ratio:1/1;border-radius:10px;background:#eef2ff;color:#0b234c;line-height:1;font-weight:900;border:1px solid #d8dcef}
.event__date span{display:block;font-size:18px}
.event__body a{color:var(--blue);font-weight:900;text-decoration:none}
.event__body a:hover{text-decoration:underline}
.event__body small{display:block;color:#475569}
@media (max-width:1050px){ .news__grid{grid-template-columns:1fr} }

/* ============== FINAL CTA ============== */
.cta{background:var(--bg-alt);border-top:1px solid var(--edgec);border-bottom:1px solid var(--edgec)}
.cta__inner{padding:clamp(28px,6vw,56px) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta__inner h2{margin:0 0 6px;font-size:clamp(20px,3vw,28px);font-weight:900;color:#0b234c}
.cta__inner p{margin:0;color:#4b5563}

/* focus style */
a:focus-visible, button:focus-visible{outline:3px solid #9ad1ff;outline-offset:2px;border-radius:8px}

/* ============== ANIMATIONS ============== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.sec__head {
  position: relative;
  padding: clamp(32px,6vw,48px) 0 16px;
}

.sec__head h2 {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: clamp(24px,4vw,32px);
  color: #0b234c;
  position: relative;
}

.sec__kicker {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
}

/* ============== ABOUT — HISTORY ============== */
/* Uses global Inter font + buttons + container from your existing CSS.
   IMPORTANT: Borders use --edgec (the homepage edge color), not --edge. */

/* SUB-HERO */
.subhero{position:relative;color:#fff;background:#0a204b;min-height:380px;overflow:hidden}
.subhero__media{position:absolute;inset:0;overflow:hidden}
.subhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.subhero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.subhero__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:inherit;padding:48px 0}
.subhero__title{margin:10px 0 8px;font-weight:900;font-size:clamp(32px,5.2vw,48px);line-height:1.08}
.subhero__lead{margin:0;opacity:.95;max-width:70ch;font-size:clamp(16px,2vw,18px);font-weight:400;line-height:1.6}

/* LOCAL SUBNAV (pills) */
.subnav{background:#fff;border-bottom:1px solid var(--edgec)}
.subnav .container{margin:0 auto;max-width:var(--maxw)} /* Force exact same container as main content */
.subnav__list{margin:0;padding:10px 0;padding-left:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.subnav__list li{margin:0;padding:0;list-style:none} /* Ensure no default li spacing */
.subnav__list a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
  font:600 13px/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.03em;color:#0b234c;text-decoration:none;border:1px solid transparent
}
.subnav__list a:hover{background:#f5f7fb;border-color:#e3e8f2}
.subnav__list .is-active a,
.subnav__list a[aria-current="page"]{background:var(--green);color:#fff;border-color:var(--green)}

/* INTRO */
.content{background:#fff}
.content__grid{display:grid;gap:18px;grid-template-columns:1.3fr .7fr;padding:clamp(24px,5vw,48px) 0}
.content__main .h2{margin: 0 0 8px;font-size:clamp(20px,3.2vw,28px);color:#0b234c}
.lead{font-size:18px;color:#374151;margin:0}
.fact{border:1px solid var(--edgec);border-radius:14px;padding:14px;background:#f8fafc}
.fact h3{margin:0 0 8px;font-size:16px;color:#0b234c}
.fact ul{margin:0;padding-left:18px;color:#475569}

/* Optional image slot */
.content__photo{margin:12px 0 0;border:1px solid var(--edgec);border-radius:14px;overflow:hidden;background:#fff}
.content__photo img{width:100%;height:220px;object-fit:cover;display:block}
.content__photo figcaption{padding:10px 12px;border-top:1px solid var(--edgec);font:600 13px/1.35 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;color:#0b234c;background:#fff}

@media (max-width:960px){
  .content__grid{grid-template-columns:1fr}
  .content__photo img{height:240px}
}

/* ORIGIN BOX */
.origin{background:#fff;border-top:1px solid var(--edgec)}
.origin__box{border:1px solid var(--edgec);border-radius:14px;padding:16px;background:#fff}
.origin .h2{margin:0 0 8px;font-size:clamp(20px,3.2vw,28px);color:#0b234c}
.origin p{margin:0 0 10px;color:#374151}

/* MILESTONES / TIMELINE */
.milestones{background:linear-gradient(180deg, #fff 0%, #f8fafc 100%);border-top:1px solid var(--edgec);position:relative}
.milestones::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);border-radius:2px}
.milestones .sec__head{padding:clamp(32px,6vw,48px) 0 12px;text-align:center}
.milestones .sec__head h2{margin:0;font-weight:900;font-size:clamp(24px,4vw,32px);color:#0b234c}
.milestones .sec__kicker{margin:8px 0 0;color:#6b7280;font-size:16px}
.timeline{list-style:none;margin:0;padding:16px 0 clamp(32px,6vw,56px);position:relative;max-width:800px;margin-left:auto;margin-right:auto}
.timeline::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:3px;background:linear-gradient(180deg, var(--green) 0%, var(--blue) 100%);border-radius:2px}
.tl__item{position:relative;padding-left:50px;margin:0 0 28px;opacity:0;animation:slideInLeft 0.6s ease-out forwards}
.tl__item:nth-child(2){animation-delay:0.2s}
.tl__item:nth-child(3){animation-delay:0.4s}
.tl__item:nth-child(4){animation-delay:0.6s}
.tl__dot{position:absolute;left:14px;top:1em;width:16px;height:16px;border-radius:999px;background:#fff;border:3px solid var(--green);box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(34,197,94,0.1);transition:all 0.3s ease}
.tl__item:hover .tl__dot{transform:scale(1.2);box-shadow:0 0 0 4px #fff, 0 0 0 12px rgba(34,197,94,0.2)}
.tl__card{border:1px solid var(--edgec);border-radius:16px;padding:20px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.08);transition:all 0.3s ease;position:relative}
.tl__card::before{content:'';position:absolute;left:-12px;top:20px;width:0;height:0;border-style:solid;border-width:8px 12px 8px 0;border-color:transparent #fff transparent transparent}
.tl__item:hover .tl__card{transform:translateX(4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.tl__date{display:inline-block;font-weight:800;color:var(--green);margin-bottom:6px;font-size:14px;text-transform:uppercase;letter-spacing:0.5px}
.tl__title{margin:0 0 8px;font-size:20px;color:#0b234c;font-weight:900;line-height:1.3}
.tl__meta{margin:0 0 8px;color:#6b7280;font-style:italic}
.tl__text{margin:0;color:#374151;line-height:1.6}

/* LEADERSHIP */
.leaders{background:#fff;border-top:1px solid var(--edgec)}
.leaders__grid{display:grid;gap:16px;grid-template-columns:1fr 1fr;padding:clamp(20px,4vw,36px) 0}
.leaders__col{border:1px solid var(--edgec);border-radius:14px;padding:16px;background:#fff}
.h2,.h3{margin:0 0 8px;color:#0b234c}
.leaders__list{margin:0;padding-left:18px;color:#374151}
@media (max-width:900px){ .leaders__grid{grid-template-columns:1fr} }

/* IDENTITY & VALUES */
.identity{background:#fff;border-top:1px solid var(--edgec)}
.id__wrap{padding:clamp(20px,4vw,36px) 0}
.id__grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.id__grid li{border:1px solid var(--edgec);border-radius:14px;padding:14px;background:#fff}
.id__grid h4{margin:0 0 6px;color:#0b234c}
.id__grid p{margin:0;color:#475569}
@media (max-width:1000px){ .id__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .id__grid{grid-template-columns:1fr} }

/* CTA (reuses global .btn/.btn--solid) */
.cta{background:linear-gradient(135deg, var(--bg-alt) 0%, #e2e8f0 100%);border-top:1px solid var(--edgec);border-bottom:1px solid var(--edgec);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.6s ease}
.cta .btn--solid{padding:14px 28px;font-size:16px;border-radius:12px;transition:all 0.3s ease;position:relative;overflow:hidden}
.cta .btn--solid::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.6s ease}
.cta .btn--solid:hover::before{left:100%}
.cta .btn--solid:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(34,197,94,0.3)}

.subhero .eyebrow,
.hero__eyebrow{
  align-self: flex-start;    
  width: fit-content;       
  max-width: 100%;           
}

/* ============== ABOUT — VISION & MISSION (extends existing About styles) ============== */

/* CCIT Mission & Vision section */
.mv{background:#fff;padding:clamp(32px,6vw,64px) 0}
.mv .sec__head{padding:0 0 24px}
.mv__grid{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.card{border:1px solid var(--edgec);border-radius:16px;padding:24px;background:#fff;transition:all 0.2s ease;position:relative;overflow:hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.04);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);transform:scaleX(0);transition:transform 0.3s ease;transform-origin:left}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.card:hover::before{transform:scaleX(1)}
.card__title{margin:0 0 12px;font-weight:900;color:#0b234c;font-size:20px;line-height:1.3}
.card__sub{margin:16px 0 10px;color:#0b234c;font-weight:700}
.bullets{margin:0;padding-left:20px;color:#374151;line-height:1.6}
.bullets li{margin:8px 0;position:relative}
.bullets li::marker{color:var(--green)}
@media (max-width:900px){ .mv__grid{grid-template-columns:1fr} }

/* Departments */
.depts{background:#fff;border-top:1px solid var(--edgec)}
.depts .sec__head{padding:clamp(24px,5vw,36px) 0 10px}
.depts__grid{display:grid;gap:16px;grid-template-columns:1fr 1fr;padding-bottom:clamp(24px,5vw,48px)}
/* articles already have .card; only add department-specific bits */
.dept .badge{
  display:inline-block;background:#eef2ff;border:1px solid #d8dcef;color:#0b234c;
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:10px
}
.dept__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dept__title{margin:0;font-size:18px;font-weight:900;color:#0b234c}
.dept__tag{
  margin-left:auto;background:#e8f5ee;border:1px solid #d6e9df;color:#0b234c;
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800
}
.dept__body h4{margin:10px 0 6px;color:#0b234c}
.cs__grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.cs__grid h5{margin:4px 0;color:#0b234c}
.dept__foot{margin-top:12px;display:flex;justify-content:flex-end}

@media (max-width:1000px){ .depts__grid{grid-template-columns:1fr} }
@media (max-width:800px){ .cs__grid{grid-template-columns:1fr} }

/* ============ PROFESSIONAL ABOUT PAGES - CLEAN THEME ============ */

/* Card styling to match homepage programs */
.card {
  background: #fff;
  border: 1px solid var(--edgec);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 18px;
  transition: box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 900;
  color: #0b234c;
}

.timeline-wrapper {
  position: relative;
  margin-top: 16px;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid var(--edgec);
  border-radius: 12px;
  border-left: 4px solid var(--green);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.timeline-item:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.timeline-year {
  color: var(--blue);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  background: #eef2ff;
  border: 1px solid #d8dcef;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-block;
}

.timeline-content h4 {
  margin: 0 0 8px 0;
  color: #0b234c;
  font-size: 18px;
  font-weight: 900;
}

.timeline-content p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

/* Leadership grid matching homepage card style */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.leadership-group {
  padding: 18px;
  background: #f8fafc;
  border: 1px solid var(--edgec);
  border-radius: 12px;
}

.leadership-group h4 {
  color: #0b234c;
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Vision/Mission cards with professional styling */
.vision-card, .mission-card {
  position: relative;
}

.vision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--blue);
  border-radius: 2px 0 0 2px;
}

.mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--green);
  border-radius: 2px 0 0 2px;
}

.vision-text, .mission-text {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

/* Department cards matching homepage program cards */
.department {
  margin-bottom: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--edgec);
  border-radius: 12px;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.department:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.department h4 {
  color: #0b234c;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 900;
}

.dept-section {
  margin-bottom: 16px;
}

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

.dept-section h5 {
  color: var(--blue);
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dept-section p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

/* Responsive design */
@media (max-width: 768px) {
  .leadership-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .timeline-item {
    padding: 16px;
  }
  
  .card {
    padding: 18px;
  }
}


/* CTA at bottom (reuses global .btn/.btn--solid) */
.cta{background:var(--bg-alt);border-top:1px solid var(--edgec);border-bottom:1px solid var(--edgec)}
.cta__inner{padding:clamp(28px,6vw,56px) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta__inner h2{margin:0 0 6px;font-size:clamp(20px,3vw,28px);font-weight:900;color:#0b234c}
.cta__inner p{margin:0;color:#4b5563}

/* ==================== UNIFIED NEWS, EVENTS & ANNOUNCEMENTS STYLING ==================== */

/* News/Events/Announcements list styling */

.nlist{
  background: #fff;
  padding-top: 8px;
  min-height: 60vh;
}
.nlist .container {
  padding: 16px 20px 0;
}

.ncount{
  display: none;
}

/* Hide Add Article button */
.content .btn[href*="admin_manage_news"] {
  display: none;
}

.cards{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3,1fr);
  padding: 16px 0 clamp(32px,6vw,56px);
}
@media (max-width: 960px){ .cards{grid-template-columns: 1fr 1fr; gap: 14px;} }
@media (max-width: 580px){ .cards{grid-template-columns: 1fr; gap: 12px;} }


/* Unified card styling for all grids */
.cards .card,
.nlist .card,
article.n,
article.e {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--edgec) !important;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.cards .card:hover,
.nlist .card:hover,
article.n:hover,
article.e:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  border-color: var(--blue2) !important;
}
.cards .card:hover::before,
.nlist .card:hover::before,
article.n:hover::before,
article.e:hover::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue2) 0%, var(--green) 100%);
  z-index: 1;
}
.card__media, .n__media, .e__media {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: #0f1f3a;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}
.card__media img, .n__media img, .e__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.card:hover .card__media img,
.card:hover .n__media img,
.card:hover .e__media img {
  transform: scale(1.05);
}
.card__body, .n__body, .e__body {
  padding: 20px 24px 24px;
  background: #fff;
  border-radius: 0 0 10px 10px;
}
.card__title, .n__title, .e__title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  color: #0b234c;
  line-height: 1.4;
  border-left: 3px solid var(--blue2);
  padding-left: 12px;
}
.card__title a, .n__title a, .e__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}
.card__title a:hover, .n__title a:hover, .e__title a:hover {
  color: var(--blue2);
}
.card__excerpt, .n__excerpt, .e__excerpt {
  margin: 0 0 16px;
  color: #475569;
  line-height: 1.6;
  font-size: 15px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}
.card__meta, .n__meta, .e__meta {
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 8px;
}
.chip--gray{background:#64748b;border-color:#64748b;font-weight: 700;}
.chip--blue{background:var(--blue2);border-color:var(--blue2);font-weight: 700;}
.chip--green{background:var(--green);border-color:var(--green);font-weight: 700;}

/* Enhanced pagination */
.pager{
  display:flex;gap:12px;align-items:center;justify-content:center;
  padding:20px 0 32px;border-top:2px solid var(--edgec, #e6e9ef);
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}
.pg{
  border:1px solid var(--edgec, #e6e9ef);background:#fff;padding:10px 16px;
  border-radius:12px;font-weight:700;transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pg:hover{background: var(--blue2);color: white;transform: translateY(-1px);}
.pg:disabled{opacity:.45;cursor:not-allowed}
.pg__status{color:#6b7280;font-weight: 600;}

/* ======================= ADMISSIONS – Freshman ======================= */

/* small vertical stack header */
.stack > * + * { margin-top: 6px; }

/* CTA row under "How to Apply" */
.btn-row { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 2px; }

/* Solid blue CTA (keeps your button font/shape) */
.btn--solid-blue{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn--solid-blue:hover{ filter:brightness(1.06); }

/* Cards & lists (use if not already defined by other pages) */
.card{ border:1px solid var(--edge); border-radius:14px; padding:16px; background:#fff; margin:16px 0; }
.card h3{ margin:0 0 8px; color:#0b234c; }

.list{ margin:0; padding-left:18px; color:#374151; }
.steps{ margin:0; padding-left:18px; color:#374151; }
.steps li + li{ margin-top:6px; }

/* Info notes */
.note{
  margin-top:12px; padding:12px;
  border:1px solid #d9e3f7; border-radius:12px;
  background:#eef3ff; color:#0b234c;
}
.disclaimer{ margin-top:12px; color:#6b7280; font-size:13px; }

/* Sidebar spacing fallback */
.content__aside .fact + .fact,
.content__aside .fact + .content__photo{ margin-top:14px; }


  /* ===================== UNDERGRADUATE PROGRAMS ===================== */

  /* Page tokens */
  .page-programs{
    --pg-gap:16px;
    --pg-radius:14px;
    --pg-pad:16px;
    --pg-shadow:0 10px 30px rgba(0,0,0,.08);
    --pg-ring:0 0 0 2px rgba(0,128,201,.18);
    --pg-chip-fz:11px;
    --pg-chip-pad:6px 10px;
  }

  .page-programs .content{ background:#fff }

  /* Grid */
  .page-programs .prog__grid{
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3,1fr);
    padding: 16px 0 clamp(32px,6vw,56px);
  }

  /* Card */
  .page-programs .prog__card{
    position:relative;
    display: grid; 
    grid-template-rows: auto 1fr;
    background: #fff;
    border: 1px solid var(--edgec);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
    margin: 0;
    padding: 0;
  }
  .page-programs .prog__card::before{
    content:""; position:absolute; left:0; right:0; top:0; height:4px;
    background:linear-gradient(90deg,var(--blue2),var(--green));
    opacity:0; transition:opacity .16s ease; z-index: 1;
  }
  .page-programs .prog__card:hover{
    transform:translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: var(--blue2);
  }
  .page-programs .prog__card:hover::before,
  .page-programs .prog__card:focus-within::before{ opacity:1 }
  .page-programs .prog__card:focus-within{ outline:2px solid transparent; box-shadow:var(--pg-ring) }

  /* Header */
  .page-programs .prog__head{ 
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding: 20px 24px 12px;
  }
  .page-programs .badge{
    display:inline-block; padding:var(--pg-chip-pad); border-radius:999px;
    background:#f8fafc; border:1px solid var(--edgec); color:#0b234c;
    font:800 var(--pg-chip-fz)/1 "Inter",system-ui; letter-spacing:.05em; text-transform:uppercase;
  }
  .page-programs .prog__title{
    margin:0; color:#0b234c; font-weight:900;
    font-size:clamp(17px,1.7vw,19px); line-height:1.25; overflow-wrap:anywhere;
    text-wrap:balance; /* progressive enhancement */
  }
  .page-programs .prog__muted{ font-weight:700; color:#6b7280 }

  /* Summary */
  .page-programs .prog__summary{ 
    margin:0 0 12px; color:#374151; line-height:1.55;
    padding: 0 24px;
  }

  /* Pillbox (specializations/tracks) */
  .page-programs .pillbox{
    border:1px solid #dbe5fb; background:#f6f9ff; border-radius:12px;
    padding:12px; display:flex; flex-direction:column; gap:8px;
    margin: 0 24px 16px;
  }
  .page-programs .pillbox__title{
    margin:0; color:#0b234c; text-transform:uppercase; letter-spacing:.06em;
    font:900 11px/1 "Inter",system-ui;
  }
  .page-programs .pills{
    margin:0; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .page-programs .pills li{
    padding:var(--pg-chip-pad);
    border:1px solid var(--edgec);
    border-radius:999px;
    background:#fff; color:#0b234c;
    font:700 var(--pg-chip-fz)/1 "Inter",system-ui;
  }

  /* Footer (CTA + mini links) */
  .page-programs .prog__footer{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between;
    gap:12px; row-gap:8px; flex-wrap:wrap; padding: 12px 24px 24px; border-top:1px solid var(--edgec);
  }
  .page-programs .mini-links{ display:flex; flex-wrap:wrap; gap:10px }
  .page-programs .mini-links a{
    font:700 12px/1 "Inter",system-ui; color:#0b234c; text-decoration:none; opacity:.9;
  }
  .page-programs .mini-links a:hover{ text-decoration:underline; opacity:1 }
  .page-programs .mini-links a + a::before{ content:"•"; margin:0 6px; color:#9aa3b2 }
  .page-programs .ext::after{ content:"↗"; font-weight:900; margin-left:.35em; opacity:.7 }

  /* Content section spacing (keeps CTA snug) */
  .page-programs .content > .container{
    padding: 16px 20px clamp(24px,5vw,48px);
  }

  /* Responsive refinements */
  @media (max-width:960px){
    .page-programs .prog__grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  }
  @media (max-width:580px){
    .page-programs .prog__grid{ grid-template-columns: 1fr; gap: 12px; }
  }
  @media (max-width:640px){
    .subnav + .content > .container{ padding-top:16px }
    .page-programs .prog__title{ font-size:18px }
    .page-programs .prog__card{ gap:10px }
  }

  /* Motion preference */
  @media (prefers-reduced-motion:reduce){
    .page-programs .prog__card{ transition:none }
    .page-programs .prog__card:hover{ transform:none; box-shadow:none }
  }

    /* ==================== STUDENT — ORGANIZATIONS ==================== */
    .content > .container { 
      padding: 16px 20px clamp(24px,5vw,48px); 
    }
    
    /* Professional grid layout */
    .prog__grid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(3,1fr);
      padding: 20px 0 clamp(32px,6vw,56px);
    }
    
    @media (max-width:960px) {
      .prog__grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
    }
    
    @media (max-width:580px) {
      .prog__grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
    
    /* Enhanced card styling */
    .prog__card {
      border: 1px solid var(--edgec);
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .prog__card:hover {
      box-shadow: 0 12px 32px rgba(0,0,0,0.12);
      transform: translateY(-4px);
      border-color: #d1d5db;
    }
    
    /* Card header */
    .prog__head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 24px 24px 16px;
      border-bottom: 1px solid #f3f4f6;
    }
    
    .prog__title {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      color: #0b234c;
      line-height: 1.3;
    }
    
    /* Organization type badges */
    .org__type {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 20px;
      font: 700 11px/1 "Inter",system-ui;
      letter-spacing: .05em;
      text-transform: uppercase;
      border: 1px solid var(--edgec);
      background: #f8fafc;
      color: #0b234c;
      white-space: nowrap;
    }
    
    .org__type--academic {
      background: #dcfce7;
      border-color: #bbf7d0;
      color: #15803d;
    }
    
    .org__type--co {
      background: #dbeafe;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }
    
    /* Organization logo */
    .org__logo {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      height: 100px;
      display: grid;
      place-items: center;
      padding: 16px;
      margin: 16px 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .org__logo img {
      max-width: 100%;
      max-height: 80px;
      object-fit: contain;
      display: block;
    }
    
    /* Card content */
    .prog__summary { 
      padding: 0 24px 16px; 
      margin: 0;
      color: #374151;
      line-height: 1.6;
    }
    
    .pillbox { 
      margin: 0 24px 16px;
      padding: 16px;
      background: #f9fafb;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
    }
    
    .pillbox__title {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 700;
      color: #374151;
      text-transform: uppercase;
      letter-spacing: 0.025em;
    }
    
    /* Card footer */
    .prog__footer { 
      padding: 16px 24px 24px;
      border-top: 1px solid #f3f4f6;
      background: #fafbfc;
    }
    
    .org__meta {
      margin: 0 0 16px;
      color: #6b7280;
      font-size: 13px;
      padding: 0 24px;
      font-weight: 500;
    }
    
    /* External link styling */
    .ext::after {
      content: "↗";
      font-weight: 900;
      margin-left: .5em;
      opacity: .7;
      transition: opacity 0.2s ease;
    }
    
    .ext:hover::after {
      opacity: 1;
    }

/* ==================== STUDENT — SCHOLARSHIPS ==================== */
.page-sch{
  --sch-gap:16px;
  --sch-radius:14px;
  --sch-pad:16px;
  --sch-shadow:0 10px 28px rgba(17,24,39,.08);
  --sch-ring:0 0 0 3px rgba(0,128,201,.16);
}

/* layout: scholarships use full-width rows by default (user requested rows instead of 3 columns) */
.page-sch .content{background:#fff}
.page-sch .prog__grid{
  display:grid;
  /* single column rows on desktop to match Organizations layout but stacked */
  grid-template-columns: 1fr;
  gap:var(--sch-gap);
  align-items:stretch;
}

/* card */
.page-sch .prog__card{
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--edgec);border-radius:var(--sch-radius);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
  will-change:transform;
}
.page-sch .prog__card:hover{border-color:#dbe3ef;box-shadow:var(--sch-shadow);transform:translateY(-1px)}
.page-sch .prog__card:focus-within{border-color:var(--blue2);box-shadow:var(--sch-ring)}

/* header */
.page-sch .prog__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-sch .prog__title{
  margin:0;color:#0b234c;font-weight:900;
  font-size:18px;line-height:1.25;text-wrap:balance;
}

/* category badges (Freshmen / University / External) */
.page-sch .sch__type{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  font:800 11px/1 "Inter",system-ui;letter-spacing:.05em;text-transform:uppercase;color:#0b234c;
  border:1px solid var(--edgec);background:#f8fafc;
}
.page-sch .sch__type--fresh{background:#e8f5ee;border-color:#d6e9df}   /* green tint */
.page-sch .sch__type--univ{background:#eef2ff;border-color:#d8dcef}    /* blue tint */
.page-sch .sch__type--ext{background:#fffbea;border-color:#fde68a}     /* amber tint */

/* body */
.page-sch .prog__summary{margin:0;color:#374151}

/* info boxes */
.page-sch .pillbox{
  border:1px solid #dbe5fb;background:#f6f9ff;border-radius:12px;
  padding:12px;display:flex;flex-direction:column;gap:6px
}
.page-sch .pillbox__title{
  margin:0;font:900 11px/1 "Inter",system-ui;letter-spacing:.06em;
  text-transform:uppercase;color:#0b234c
}

/* lists — clean custom bullets */
.page-sch .bullets{margin:0;padding-left:0;list-style:none;color:#374151}
.page-sch .bullets li{position:relative;padding-left:16px;margin:4px 0}
.page-sch .bullets li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--blue2)
}

/* footer */
.page-sch .prog__footer{
  margin-top:auto;display:flex;justify-content:flex-end;align-items:center;
  gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--edgec)
}

/* external icon hint (keeps your pattern) */
.page-sch .ext::after{content:"↗";font-weight:900;margin-left:.35em;opacity:.7}

/* note */
.page-sch .sch__note{
  margin-top:14px;padding:12px;border:1px solid #d9e3f7;border-radius:12px;
  background:#eef3ff;color:#0b234c
}

/* responsive micro-adjustments */
@media (max-width:640px){
  .page-sch .prog__title{font-size:17px}
  .page-sch .prog__grid{gap:14px}
}

/* motion respect */
@media (prefers-reduced-motion:reduce){
  .page-sch .prog__card{transition:none}
  .page-sch .prog__card:hover{transform:none;box-shadow:none}
}

/* ======================= STUDENTS — RESEARCH ======================= */

.rbar{background:#fff;border-bottom:1px solid var(--edgec)}
.rbar__inner{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap}
.rbar__left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ryear select{border:1px solid var(--edgec);border-radius:10px;padding:8px 12px;background:#fff;font:inherit}
.rsearch{display:flex;gap:8px;align-items:center}
.rsearch input{min-width:260px;border:1px solid var(--edgec);border-radius:10px;padding:10px 12px;font:inherit}
.rsearch input:focus{outline:2px solid #9ad1ff;outline-offset:2px}

/* List */
.rlist{background:#fff}
.rcount{color:#6b7280;padding:16px 0 6px}

/* Cards (mirror News, slightly denser body) */
.r{
  display:grid;grid-template-rows:auto 1fr;background:#fff;
  border:1px solid var(--edgec);border-radius:16px;overflow:hidden;
  transition:box-shadow .12s ease, transform .12s ease
}
.r:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}

.r__media{position:relative;display:block;aspect-ratio:16/9;background:#0f1f3a;overflow:hidden}
.r__media img{width:100%;height:100%;object-fit:cover;display:block}

.r__body{padding:12px 14px}
.r__title{margin:0 0 6px;font-size:18px;font-weight:900;color:#0b234c}
.r__title a{text-decoration:none;color:inherit}
.r__meta{margin:0 0 10px;color:#6b7280;font-size:.95em}
.r__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Responsive grid reuse */
@media (max-width: 960px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width: 580px){ .cards{grid-template-columns:1fr} }


/* ================= STUDENT — TESTIMONIALS ================= */

.prog__card{ display:flex; flex-direction:column; }

/* Header: image + meta align nicely inside existing .prog__head padding */
.prog__head{ gap:14px; }
.t__avatar{
  width:64px; height:64px; border-radius:999px; object-fit:cover; flex:0 0 64px;
  border:1px solid var(--edgec,#e6e9ef); background:#f8fafc;
}
.t__avatar--ph{
  display:grid; place-items:center; font-weight:900; color:#0b234c;
  background:#eef2ff; border:1px solid #d8dcef;
}
.t__meta{ display:grid; gap:4px; min-width:0; }
.t__name{ margin:0; font-weight:900; color:#0b234c; font-size:18px; }
.t__row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:#475569; }
.t__sep{ color:#9aa3b2; }

/* Program/year tag reuses the badge visual language */
.ttag{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font:800 11px/1 "Inter",system-ui; letter-spacing:.05em; text-transform:uppercase;
  background:#e8f5ee; border:1px solid #d6e9df; color:#0b234c;
}

/* Body wrapper = consistent spacing with orgs */
.prog__body{ display:grid; gap:12px; padding:16px 24px 20px; }

/* Quote styling */
.t__quote{
  margin:0; color:#374151; position:relative; padding-left:16px; line-height:1.7;
}
.t__quote::before{
  content:"“"; position:absolute; left:0; top:-4px; color:#94a3b8; font-size:26px; line-height:1;
}

/* Pager polish */
.pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:8px; }
.pg{
  padding:8px 12px; border-radius:10px; border:1px solid var(--edgec);
  background:#fff; color:#0b234c; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
}
.pg[disabled]{ opacity:.5; cursor:not-allowed }
.pg__status{ color:#64748b; font-weight:700; }

/* =================== TESTIMONIALS CARD =================== */
.tcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* centered header section */
.tcard__head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.tcard__avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--edgec, #e6e9ef);
  background: #f8fafc;
}

.tcard__avatar--ph {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #0b234c;
  background: #eef2ff;
  border: 1px solid #d8dcef;
}

.tcard__name {
  margin: 0;
  font-weight: 900;
  color: #0b234c;
  font-size: 18px;
}

/* center tag + role under name */
.tcard__meta {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.tcard__tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font: 800 11px/1 "Inter", system-ui;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #e8f5ee;
  border: 1px solid #d6e9df;
  color: #0b234c;
}

.tcard__role {
  font-weight: 600;
  color: #475569;
}

/* body + quote styling */
.tcard__body {
  display: grid;
  gap: 12px;
  padding: 16px 24px 20px;
  justify-items: center;
  text-align: center;
}

.tcard__quote {
  margin: 0;
  text-align: left;
  color: #374151;
  line-height: 1.7;
  position: relative;
  max-width: 60ch;
  padding-left: 16px;
}

.tcard__quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -4px;
  color: #94a3b8;
  font-size: 26px;
  line-height: 1;
}

/* responsiveness */
@media (max-width: 560px) {
  .tcard__avatar {
    width: 64px;
    height: 64px;
  }
  .tcard__name {
    font-size: 17px;
  }
}


/* ================= CCIT — FACULTY PROFILE (fixed & aligned) =================
------------------------------------------------------------------------- */

.page-faculty{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  --radius:14px;
  --ring:0 0 0 3px rgba(0,128,201,.14);
  --shadow:0 8px 22px rgba(17,24,39,.07);
}

/* section spacing + subtle separators */
.page-faculty .content{ background:#fff; }
.page-faculty .content > .container{ padding-block:clamp(22px,4.5vw,44px); }
.section-sep{ background:#fff; border-top:1px solid var(--edgec); }

/* ---------- FILTER BAR (mirrors .nbar) ---------- */
.fbar{ background:#fff; border-bottom:1px solid var(--edgec); }
.fbar__inner{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:12px 0; flex-wrap:wrap;
}
.fbar__left{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
/* pills come from global .pill; reuse as-is */

.frole select{
  border:1px solid var(--edgec); border-radius:10px; padding:8px 12px; background:#fff; font:inherit;
}

.fsearch{ display:flex; gap:8px; align-items:center; }
.fsearch input{
  min-width:220px; border:1px solid var(--edgec); border-radius:10px; padding:10px 12px; font:inherit;
}
.fsearch input:focus{outline:2px solid #9ad1ff;outline-offset:2px;}

/* ---------- COUNT LINE ---------- */
.flist{ background:#fff; }
.fcount{ color:#6b7280; padding:16px 0 6px; }

/* ---------- GRID ---------- */
.fgrid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  padding:0 0 clamp(24px,5vw,48px);
}
@media (min-width:1280px){ .fgrid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:960px){ .fgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:580px){ .fgrid{ grid-template-columns:1fr; } }

/* ---------- CARD ---------- */
.f{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  border:1px solid var(--edgec); border-radius:var(--radius); background:#fff; overflow:hidden;
  padding:14px; transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.f:hover{ box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px); border-color:#d8dde8; }
.f:focus-within{ box-shadow:var(--ring); }

/* avatar (photo or initials) */
.f__avatar{
  width:64px; height:64px; border-radius:999px; object-fit:cover; display:block;
  border:1px solid var(--edgec); background:#f8fafc;
}
.f__avatar--ph{
  display:grid; place-items:center; width:64px; height:64px; border-radius:999px;
  font-weight:900; color:#0b234c;
  background:linear-gradient(180deg,#eef2ff,#f7f9ff); border:1px solid #d8dcef;
}

/* text */
.f__body{ display:grid; gap:4px; min-width:0; }
.f__name{ margin:0; color:#0b234c; font-weight:900; font-size:16px; line-height:1.25; text-wrap:balance; overflow-wrap:anywhere; }
.f__title{ margin:0; color:#475569; }

/* badges */
.fbadges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.fbadge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font:800 12px/1 "Inter",system-ui; letter-spacing:.03em; text-transform:uppercase;
  background:#f8fafc; border:1px solid var(--edgec); color:#0b234c;
}
.fbadge--dept{ background:#e8f5ee; border-color:#d6e9df; }  /* dept tint */

/* empty state */
.fempty{
  margin:8px 0 28px; padding:14px;
  border:1px dashed var(--edgec); border-radius:12px;
  background:#fafbfd; color:#6b7280; text-align:center;
}

/* pager (uses global .pager) */
.pager{ margin-top:4px; }

/* focus & reduced motion */
.f:focus-visible{ outline:3px solid #9ad1ff; outline-offset:2px; border-radius:var(--radius); }
@media (prefers-reduced-motion:reduce){
  .f{ transition:none; }
  .f:hover{ transform:none; }
}

/* ---------- Filter bar alignment & responsiveness ---------- */
.fbar__inner{ align-items:center; }             /* keep everything centered on one line */
@media (max-width: 820px){
  .fbar__inner{ align-items:flex-start; }       /* allow neat wrapping on small screens */
}

/* keep pills consistent with your global .pill; just ensure tight vertical rhythm */
.fpills .pill{ line-height:1; padding:8px 12px; }

/* make select and input heights match pills nicely */
.frole select{ height:38px; }
.fsearch input{ height:40px; }

/* optional: tone down the Search button so it doesn't overpower the bar */
.fsearch .btn{ padding:10px 14px; }

/* ===== News announcement bar ===== */
.announcement {
  background: #fffbe6;               
  border: 1px solid #ffe58f;
  border-radius: 10px;
  margin: 16px 0 24px;
}

.announcement .container {
  padding: 12px 16px;
}

.announcement__content {
  font-size: 0.95rem;
  line-height: 1.5;
}

.announcement__content a {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .announcement .container {
    padding: 14px 18px;
  }
}



/* ======================= FACULTY — RESEARCH (one-up cards) ======================= */


/* one card per row */
.research-publications{
  display:grid;
  grid-template-columns: 1fr;   /* always one-up */
  gap:16px;
  padding: 12px 0 clamp(20px,4vw,36px);
}

/* card shell — same as prog__card theme */
.research-item{
  display:flex; flex-direction:column;
  padding: 24px 28px;
  border:1px solid var(--edgec);
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.research-item:hover{
  transform:translateY(-3px);
  border-color:#d1d5db;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* title */
.research-title{ margin:0 0 6px; font:900 18px/1.3 "Inter",system-ui; color:#0b234c; }
.research-title a{ color:inherit; text-decoration:none; }
.research-title a:hover{ text-decoration:underline; }

/* authors + meta rows */
.research-authors{
  margin:0 0 8px 0;
  color:#475569;
  line-height:1.6;
}

.research-meta{
  display:flex; gap:10px 12px; flex-wrap:wrap;
  align-items:center;
  margin:0 0 10px 0;
  color:#475569;
}
.research-meta > span strong{ color:#334155; }

/* type badge (Conference / Journal) */
.research-type{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:9999px;
  font:800 11px/1 "Inter",system-ui;
  letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--edgec); background:#f8fafc; color:#0b234c;
}
.research-type.badge{ /* keep compatibility with your class */
  border:1px solid var(--edgec);
}

/* color accents by type */
.research-type:is(.badge){ /* default neutral */
  background:#eef2ff; border-color:#e5e7ff; color:#1e3a8a;
}
.research-type:where(.badge):after{ content:""; } /* no icon, just pill */

.research-type[data-kind="Conference"],
.research-type:where(.badge).conference{
  background:#dcfce7; border-color:#bbf7d0; color:#166534;
}
.research-type[data-kind="Journal"],
.research-type:where(.badge).journal{
  background:#e0f2fe; border-color:#bae6fd; color:#075985;
}

/* DOI row */
.research-doi{
  margin:0 0 12px 0; color:#475569;
}
.research-doi a{ color:var(--blue2); font-weight:700; text-decoration:none; }
.research-doi a:hover{ text-decoration:underline; }

/* actions aligned to the right, wrap on small screens */
.research-actions{
  margin-top:auto; /* push to bottom for equal-feel cards */
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-end;
  border-top:1px solid #f3f4f6;
  padding-top:12px;
}

/* link buttons that match theme */
.btn-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  border:1px solid var(--edgec); background:#fff; color:#0b234c;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn-link:hover{ background:#f8fafc; border-color:#d8dde8; transform:translateY(-1px); }
.btn-link.secondary{ background:#f9fafb; }

/* pagination (compact, on-brand) */
.pagination-wrapper{ display:flex; justify-content:center; margin-top:16px; }
.pagination{ display:flex; gap:6px; padding:0; margin:0; list-style:none; }
.page-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; min-width:36px;
  border:1px solid var(--edgec); border-radius:10px;
  background:#fff; color:#0b234c; font-weight:800; text-decoration:none;
}
.page-item.active .page-link{ background:#eef2ff; border-color:#e5e7ff; color:#1e3a8a; }
.page-link:hover{ background:#f8fafc; }

/* responsive niceties */
@media (max-width:720px){
  .research-item{ padding:16px; }
  .nsearch input[type="search"]{ width:100%; }
  .research-actions{ justify-content:flex-start; }
}

/* ================= FACULTY — CERTIFICATIONS (one row per year) ================= */

/* =========================================
   FACULTY CERTIFICATIONS — Unified Look
   ========================================= */

/* Optional extra padding for the count line on this page */
.rcount--pad { margin-top: 4px; margin-bottom: 18px; }

/* Wrapper holding all year cards */
.fcards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  padding: 8px 0 28px;
}
@media (max-width: 1024px) {
  .fcards { grid-template-columns: 1fr; }
}

/* Year card */
.fcard {
  border: 1px solid var(--edgec, #e5e7eb);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.fcard:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
  border-color: #d1d5db;
}

/* Year card header */
.fcard__head {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafbfc;
}
.fcard__title {
  margin: 0;
  font: 800 18px/1.35 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b234c;
}

/* Year card body */
.fcard__body {
  padding: 10px 14px 14px;
  display: grid;
  gap: 16px;
}

/* Issuer block */
.issuer {
  border: 1px solid #eef2f7;
  border-radius: 12px;
  overflow: hidden;
}

/* Issuer header */
.issuer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}
.issuer__name {
  font: 700 14px/1.2 "Inter", system-ui;
  color: #0b234c;
}
.issuer__count {
  font: 700 12px/1 "Inter", system-ui;
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  padding: 4px 8px;
  border-radius: 9999px;
}

/* Issuer list of certifications */
.issuer__list {
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
}

/* Single certification row */
.cert {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.cert:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Certification title + status chip */
.cert__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1.3 "Inter", system-ui;
  color: #0b234c;
  margin-bottom: 6px;
}

/* Status chips */
.cert__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 9999px;
  font: 700 11px/1 "Inter", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid #e5e7eb;
}
.cert__status--expired {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}
.cert__status--revoked {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

/* Faculty list under a cert */
.cert__faculty {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cert__faculty li {
  font: 600 12px/1.2 "Inter", system-ui;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  border-radius: 8px;
}

/* Page container rhythm (matches other pages) */
.page-faculty .content > .container { 
  padding: 16px 20px clamp(24px,5vw,48px); 
}

/* Empty state (reuse) */
.page-faculty .nempty {
  padding: 24px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
  text-align: center;
}

/* Subtle focus states for accessibility */
.issuer__head:focus-within,
.cert:focus-within {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Tighten spacing on small screens */
@media (max-width: 640px) {
  .issuer__name { font-size: 13px; }
  .cert__title { font-size: 13px; }
  .cert__faculty li { font-size: 11.5px; }
}


/* issuer pills row */
.ncats{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  font:800 12px/1 "Inter",system-ui; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid var(--edgec); background:#fff; color:#0b234c; text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.pill:hover{ background:#f8fafc; border-color:#d8dde8; transform:translateY(-1px); }
.pill.is-active{ background:#eef2ff; border-color:#e5e7ff; color:#1e3a8a; }

/* Empty state */
.nempty{
  margin:16px 0 0; padding:60px 20px;
  border:1px dashed var(--edgec); border-radius:12px;
  background:#fafbfd; color:#6b7280; text-align:center;
}

/* Responsive niceties */
@media (max-width:720px){
  .fcard__head{ padding:20px 20px 14px; }
  .fcard__body{ padding:16px 20px 20px; }
  .issuer{ padding:14px; }
  .cert{ padding:10px; }
}

/* ===================== LOGIN ===================== */
.page-login{
  padding: clamp(24px,4vw,48px) 20px;
  background:#f9fafb;
}

.login-shell{ max-width:980px; margin-inline:auto; }

.login-split{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* image | form */
  gap:0;
  background:#fff;
  border:1px solid var(--edgec, #e5e7eb);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* ---------- Media (left) ---------- */
.login-media{
  position:relative;
  background:#0b234c;
  min-height:420px;
}
.login-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(145deg, rgba(0,18,45,.35), rgba(0,113,61,.28));
}
.login-media__inner{
  position:relative; z-index:1; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; padding:28px;
}
.login-media__title{
  margin:0 0 4px; font-weight:800; font-size: clamp(18px,2.2vw,22px); line-height:1.25;
}
.login-media__sub{ margin:0; color:#e6eef7; font-size:.95rem; }

/* ---------- Form (right) ---------- */
.login-card{
  padding: clamp(28px,4vw,44px);
  display:flex; flex-direction:column; justify-content:center;
}
.login-header{ margin-bottom:24px; }
.login-title{ font-size:28px; font-weight:700; color:#1f2937; margin:0 0 6px; line-height:1.2; }
.login-subtitle{ color:#6b7280; font-size:15px; margin:0; }

/* Controls */
.error-message{
  background:#fef2f2; color:#dc2626; padding:12px 16px; border-radius:6px;
  margin-bottom:20px; border:1px solid #fecaca; font-size:14px;
}
.form-group{ margin-bottom:20px; }
.form-label{ display:block; margin-bottom:6px; font-weight:500; color:#374151; font-size:14px; }
.form-control{
  width:100%; padding:12px 16px; border:1px solid #d1d5db; border-radius:6px;
  font-size:16px; background:#fff; color:#374151; transition:border-color .2s, box-shadow .2s;
}
.form-control:hover{ border-color:#9ca3af; }
.form-control:focus{ outline:none; border-color:#00713D; box-shadow:0 0 0 3px rgba(0,113,61,.12); }

.remember-me{ display:flex; align-items:center; gap:8px; margin: 6px 0 20px; color:#6b7280; font-size:14px; }

.btn-login{
  width:100%; background:#00713D; color:#fff; border:0; padding:12px 16px; border-radius:6px;
  font-size:16px; font-weight:600; cursor:pointer; transition: background .2s;
}
.btn-login:hover{ background:#005A2F; }
.btn-login:active{ background:#004225; }

/* Help box */
.password-help{
  text-align:center; margin-top:20px; padding:16px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px;
}
.help-text{ color:#495057; font-size:13px; line-height:1.5; margin:0; }
.help-text i{ color:#00713D; margin-right:6px; }
.help-text a{ color:#00713D; text-decoration:none; font-weight:500; }
.help-text a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 820px){
  .login-split{ grid-template-columns:1fr; }
  .login-media{ min-height:220px; }
  .login-card{ padding:24px; }
  .login-title{ font-size:24px; }
}

/* ======================= EVENT MODAL ======================= */
.event-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s ease;
}

.event-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.event-modal-content {
  position: relative;
  background: white;
  margin: 5% auto;
  padding: 0;
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease;
}

.event-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.event-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1e40af;
}

.event-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.event-modal-close:hover {
  background: #f3f4f6;
}

.event-modal-body {
  padding: 1.5rem;
}

.event-date-time {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
}

.event-date {
  text-align: center;
  color: white;
  padding: 0.5rem;
  border-radius: 8px;
  min-width: 60px;
}

.event-day {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.event-month {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-time {
  flex: 1;
}

.event-description {
  margin-top: 1rem;
}

.event-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  text-align: right;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-50px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .event-modal-content {
    margin: 5% auto;
    width: 95%;
    max-height: 95vh;
  }
  .event-date-time {
    flex-direction: column;
    text-align: center;
  }
}
/* ================= CAREER PATHWAY GENERATOR PAGE ================= */
    .page-career .content > .container{padding-block:clamp(22px,4vw,44px)}

    /* card + question spacing from original */
    .q{border:1px solid var(--edgec);border-radius:14px;background:#fff;padding:16px}
    .q + .q{margin-top:14px}
    .q h3{margin:0 0 8px;color:#0b234c;font-weight:900}
    .q p{margin:0 0 10px;color:#475569}
    .opts{display:grid;gap:10px}
    .opts.cols-2{grid-template-columns:1fr 1fr}
    .opts.cols-3{grid-template-columns:1fr 1fr 1fr}
    @media (max-width:860px){ .opts.cols-3{grid-template-columns:1fr 1fr} }
    @media (max-width:580px){ .opts.cols-2,.opts.cols-3{grid-template-columns:1fr} }
    .opt{
      display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid var(--edgec);
      padding:10px;border-radius:12px;cursor:pointer
    }
    .opt:hover{border-color:#d8dde8}
    .opt input{margin-top:3px}
    .q .helper{color:#6b7280;font-size:13px;margin-top:6px}
    .pillhint{font:800 11px/1 "Inter",system-ui;text-transform:uppercase;letter-spacing:.05em;color:#475569}
    .note-inline{margin-top:10px;border:1px dashed var(--edgec);background:#fafbfd;color:#6b7280;border-radius:12px;padding:10px}

    /* stepper container — match original feel (no extra margins), keep bottom padding for sticky nav */


    /* show one step, no extra outer margins */
    .step{display:none}
    .step.is-active{display:block;animation:fade .25s ease}
    @keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}

    /* progress — trimmed spacing to match original compact rhythm */
    .progress{
      margin:0 0 14px; /* same block gap (14px) */
      background:#fff;border:1px solid var(--edgec);border-radius:12px;padding:12px 14px;
      display:flex;align-items:center;gap:12px
    }
    .progress__text{font-weight:800;color:#0b234c}
    .progress__bar{flex:1;height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
    .progress__fill{height:100%;width:0;background:#0080c9;border-radius:999px;transition:width .3s ease}

    /* nav — keep compact spacing (12px) like original actions row, no extra gradients pushing space */
    .nav{
      display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;
      position:sticky;bottom:0;background:#ffffff; /* flat to avoid “extra margin” look */
      padding-top:10px;border-top:1px solid var(--edgec)
    }
    .nav .left, .nav .right{display:flex;gap:10px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:10px 14px;font-weight:800;border:1px solid #cfd6e2;background:#fff;color:#0b234c}
    .btn--solid{background:#00713D;border-color:#00713D;color:#fff}
    .btn--solid:hover{background:#005A2F;border-color:#005A2F}
    .btn[disabled]{opacity:.5;cursor:not-allowed}
    .btn--ghost{background:transparent;color:#fff}

    /* (unchanged result helpers you already had) */
    .results{display:none}
    .res__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
    @media (max-width:960px){ .res__grid{grid-template-columns:1fr 1fr} }
    @media (max-width:640px){ .res__grid{grid-template-columns:1fr} }
    .res{border:1px solid var(--edgec);border-radius:14px;background:#fff;padding:16px}
    .res__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
    .score{margin-left:auto;background:#eef2ff;border:1px solid #d8dcef;border-radius:999px;padding:6px 10px;font-weight:800;color:#0b234c}
    .mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .mini .chip{position:static;background:#f8fafc;border:1px solid var(--edgec);color:#0b234c}
    .muted{color:#6b7280}
    .hr{height:1px;background:var(--edgec);margin:10px 0}

    /* make results visible on the results page */
.page-results .results { display: block; }

/* =========================================
   UNIFIED MODAL (News / Events / Announcements)
   ========================================= */
/* Works with any of these classes: .modal, .event-modal, .announcement-modal */

.modal,
.event-modal,
.announcement-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;                 /* shown via JS */
  animation: fadeIn .25s ease;
}
.modal--open { display: block; }

.modal-content,
.event-modal-content,
.announcement-modal-content {
  position: relative;
  background: #fff;
  margin: 2% auto;
  width: min(90%, 700px);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  overflow: hidden;
  animation: slideIn .25s ease;
  display: flex;
  flex-direction: column;
}

.modal-header,
.event-modal-header,
.announcement-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb; background: #f8fafc;
}
.modal-header-info,
.event-header-info,
.announcement-header-info {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.modal-body,
.event-modal-body,
.announcement-modal-body {
  padding: 16px 20px; overflow-y: auto; max-height: 60vh;
}

.modal-footer,
.event-modal-footer,
.announcement-modal-footer {
  padding: 12px 20px; border-top: 1px solid #e5e7eb; background: #f8fafc; text-align: right;
}

/* Close button */
.modal-close,
.event-modal-close,
.announcement-modal-close {
  background:#f8fafc; padding:1rem; border-radius:8px; border-left:4px solid #1e40af; margin:1rem 0; color:#374151; font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-content,
  .event-modal-content,
  .announcement-modal-content {
    margin: 5% auto;
    width: 95%;
    max-height: 95vh;
  }
  .modal-header-info,
  .event-header-info,
  .announcement-header-info {
    flex-direction: column; align-items: flex-start;
  }
}

/* Animations */
@keyframes fadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-40px) scale(.97) }
  to   { opacity: 1; transform: translateY(0)     scale(1) }
}

/* ===================== CCIT Chatbot (Light Mode Polished) ===================== */
#ccit-chat-root {
  --ccit-primary: #0b5fff;
  --ccit-primary-600: #0a52e0;
  --ccit-primary-700: #0847c5;
  --ccit-bg: #ffffff;
  --ccit-panel: #ffffff;
  --ccit-muted: #6b7280;
  --ccit-border: #e5e7eb;
  --ccit-shadow: 0 10px 30px rgba(0,0,0,0.15);
  --ccit-radius: 16px;
  --ccit-radius-pill: 999px;
  --ccit-text: #0f172a;
  --ccit-bot-bg: #ffffff;
  --ccit-bot-text: #1f2937;
  --ccit-user-bg: var(--ccit-primary);
  --ccit-user-text: #ffffff;
  --ccit-ease: cubic-bezier(.22,.75,.25,1);
  --ccit-dur: .25s;
}

/* General reset */
#ccit-chat-root * {
  box-sizing: border-box;
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
#chatbot-box[hidden] { display: none !important; }

/* Floating Toggle Button */
#chatbot-toggle {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border: none; border-radius: 50%;
  background: var(--ccit-primary);
  color: #fff; font-size: 22px;
  display: grid; place-items: center;
  cursor: pointer; z-index: 2147483646;
  box-shadow: var(--ccit-shadow);
  transition: transform var(--ccit-dur) var(--ccit-ease), background var(--ccit-dur) var(--ccit-ease);
}
#chatbot-toggle:hover { transform: translateY(-2px); background: var(--ccit-primary-600); }
#chatbot-toggle:active { transform: translateY(0); background: var(--ccit-primary-700); }

/* Chat Box */
#chatbot-box {
  position: fixed;
  right: 20px; bottom: 88px;
  width: 360px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  background: var(--ccit-panel);
  border: 1px solid var(--ccit-border);
  border-radius: var(--ccit-radius);
  box-shadow: var(--ccit-shadow);
  z-index: 2147483647;
  overflow: hidden;
  animation: chatbot-pop var(--ccit-dur) var(--ccit-ease);
}
@keyframes chatbot-pop {
  from { transform: scale(0.98); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Header */
#chatbot-box .header {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 48px;
  background: linear-gradient(180deg, var(--ccit-primary), var(--ccit-primary-600));
  color: #fff; font-weight: 700; letter-spacing: 0.3px;
}
#chatbot-box .header span::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}

/* Close Button */
#chatbot-close {
  position: absolute; right: 6px; top: 4px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent; border: none;
  color: #fff; font-size: 22px;
  cursor: pointer; border-radius: 8px;
  transition: background var(--ccit-dur) var(--ccit-ease);
}
#chatbot-close:hover { background: rgba(255,255,255,0.15); }

/* Chat Output */
.chat-output {
  height: 340px;
  overflow-y: auto;
  background: #f9fafb;
  padding: 14px 12px 18px;
  scroll-behavior: smooth;
}
.chat-output::-webkit-scrollbar { width: 8px; }
.chat-output::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 6px;
}

/* Messages */
.bot-msg, .user-msg {
  max-width: 82%;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.bot-msg {
  background: var(--ccit-bot-bg);
  border: 1px solid var(--ccit-border);
  color: var(--ccit-bot-text);
}
.user-msg {
  margin-left: auto;
  background: var(--ccit-user-bg);
  color: var(--ccit-user-text);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Form Area */
#chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ccit-border);
  background: var(--ccit-panel);
}
#chat-input {
  flex: 1;
  border: 1px solid var(--ccit-border);
  border-radius: var(--ccit-radius-pill);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ccit-text);
  background: var(--ccit-bg);
  transition: border-color var(--ccit-dur) var(--ccit-ease), box-shadow var(--ccit-dur) var(--ccit-ease);
}
#chat-input:focus {
  outline: none;
  border-color: var(--ccit-primary);
  box-shadow: 0 0 0 3px rgba(11,95,255,0.2);
}
#chat-send {
  border: none;
  border-radius: var(--ccit-radius-pill);
  padding: 10px 16px;
  background: var(--ccit-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--ccit-dur) var(--ccit-ease), background var(--ccit-dur) var(--ccit-ease);
}
#chat-send:hover { background: var(--ccit-primary-600); transform: translateY(-1px); }
#chat-send:active { background: var(--ccit-primary-700); transform: translateY(0); }

/* Layout safety: footer never overlaps */
footer, .ccit-footer, .ccit-legal { position: relative; z-index: auto; }

/* Responsive */
@media (max-width: 420px) {
  #chatbot-box {
    right: 12px; bottom: 84px;
    width: calc(100vw - 24px);
  }
  .chat-output { height: 320px; }
}

    /* =====================================================================
       COMPARE PROGRAMS PAGE 
       ===================================================================== */

.page-compare {
  --cmp-primary: #003169;       /* Deep Blue (Left Column Primary) */
  --cmp-accent: #0080c9;        /* Light Blue (Left Header Gradient Start) */
  --cmp-blue-stop: #0096e0;     /* Light Blue (Left Header Gradient End) */
  
  --cmp-primary-green: #005F33; /* Deep Green (New: Right Column Primary) */
  --cmp-green-start: #00713D;   /* Brighter Green (Right Header Gradient Start) */
  --cmp-green-stop: #00884a;    /* Darker Green (Right Header Gradient End) */
  
  --cmp-text: #0b234c;
      --cmp-muted: #475569;
      --cmp-bg: #ffffff;
      --cmp-card-bg: #f8fafc;
      --cmp-border: #e6e9ef;
      --cmp-label-bg: #f3f4f6;
      --cmp-radius: 16px;
      --cmp-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    /* ----- Program Selector Bar ----- */
    .compare-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      background: var(--cmp-bg);
      border: 1px solid var(--cmp-border);
      border-radius: var(--cmp-radius);
      padding: 18px;
      margin-bottom: 24px;
      box-shadow: var(--cmp-shadow);
    }

    .compare-bar .picker {
      display: flex;
      flex-direction: column;
    }

    .compare-bar .picker label {
      display: block;
      font-weight: 700;
      font-size: 15px;
      color: var(--cmp-primary);
      margin-bottom: 6px;
      letter-spacing: 0.01em;
    }

    .compare-bar .picker select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #cfd6e2;
      border-radius: 12px;
      background: var(--cmp-card-bg);
      color: var(--cmp-text);
      font: 700 16px/1.2 Inter, system-ui;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      cursor: pointer;
    }

    .compare-bar .picker select:hover {
      border-color: var(--cmp-accent);
    }

    .compare-bar .picker select:focus {
      border-color: var(--cmp-accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(0,128,201,0.12);
    }

    /* ----- Comparison Table Container ----- */
    .programs-summary-grid {
      background: var(--cmp-bg);
      border: 1px solid var(--cmp-border);
      border-radius: var(--cmp-radius);
      overflow: hidden;
      box-shadow: var(--cmp-shadow);
      margin-bottom: 36px;
    }

    /* ----- Two Column Table ----- */
    .comparison-table {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    /* ----- Program Headers ----- */
    .program-column {
      display: flex;
      flex-direction: column;
    }

    .program-header {
      background: linear-gradient(135deg, var(--cmp-accent) 0%, var(--cmp-blue-stop) 100%);
      color: white;
      padding: 20px;
      font-weight: 900;
      font-size: 18px;
      text-align: center;
      line-height: 1.3;
      border-right: 1px solid rgba(255,255,255,0.2);
    }

    .program-header--green {
      background: linear-gradient(135deg, var(--cmp-green-start) 0%, var(--cmp-green-stop) 100%);
      color: white;
    }

    .program-column:last-child .program-header {
      border-right: none;
    }

/* ----- Section Headers ----- */
.section-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--cmp-border);
  overflow: hidden;
}

.section-row::before,
.section-row::after {
  content: attr(data-title);
  padding: 12px 20px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: center;
}

.section-row::before {
  background: var(--cmp-primary);
}

.section-row::after {
  background: var(--cmp-primary-green);
}

/* ----- Data Rows ----- */
    .data-row {
      display: contents;
    }

    .data-item {
      padding: 16px 20px;
      border-top: 1px solid var(--cmp-border);
      background: var(--cmp-bg);
      color: var(--cmp-text);
      font-size: 15px;
      line-height: 1.6;
      transition: background 0.15s ease;
      border-right: 1px solid var(--cmp-border);
    }

    .data-item:last-child {
      border-right: none;
    }

    .data-row:hover .data-item {
      background: #f0f7ff;
    }

    /* ----- Row Labels (inline within cells) ----- */
    .data-label {
      display: block;
      font-weight: 800;
      font-size: 13px;
      color: var(--cmp-accent);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* ----- List Styling ----- */
    .data-item ul {
      margin: 0;
      padding-left: 18px;
      list-style: none;
    }

    .data-item li {
      margin-bottom: 6px;
      position: relative;
      padding-left: 12px;
    }

    .data-item li::before {
      content: '▸';
      position: absolute;
      left: 0;
      color: var(--cmp-accent);
      font-weight: bold;
    }

    /* ----- Focus Cell ----- */
    .focus-item {
      font-style: italic;
      background: #fafbfc;
      border-left: 3px solid var(--cmp-accent);
      padding-left: 17px;
    }

    /* ----- Empty State ----- */
    .empty-cell {
      color: var(--cmp-muted);
      font-style: italic;
    }

    /* ----- Responsive Design ----- */
    @media (max-width: 900px) {
      .compare-bar {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .comparison-table {
        grid-template-columns: 1fr;
      }

      .program-header {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }

      .program-column:last-child .program-header {
        border-bottom: none;
      }

      .data-item {
        border-right: none;
      }
    }

    @media (max-width: 600px) {
      .compare-bar {
        padding: 14px;
      }

      .compare-bar .picker label {
        font-size: 14px;
      }

      .compare-bar .picker select {
        font-size: 15px;
        padding: 10px 12px;
      }

      .data-item {
        font-size: 14px;
        padding: 14px 16px;
      }
    }

    /* ----- Print Styles ----- */
    @media print {
      .compare-bar {
        page-break-after: avoid;
      }

      .programs-summary-grid {
        box-shadow: none;
        page-break-inside: avoid;
      }

      .section-row {
        background: #003169 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .program-header {
        background: #0080c9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }

    /* ----- Accessibility ----- */
    .comparison-table:focus-within {
      outline: 3px solid var(--cmp-accent);
      outline-offset: 2px;
      border-radius: var(--cmp-radius);
    }

    /* ----- Reduced Motion ----- */
    @media (prefers-reduced-motion: reduce) {
      .data-item,
      .compare-bar .picker select {
        transition: none;
      }
    }