/* =========================================================================
   BRIGHTSAM Project Website — National Institute for Medical Research (NIMR)
   Brand palette matches the main NIMR corporate site (see /source/nimr_colors.png)
   ========================================================================= */

:root {
  --nimr-navy:#14508C;
  --nimr-navy-dark:#0B3A66;
  --nimr-blue:#00AEED;
  --nimr-blue-deep:#00719F;
  --nimr-sky:#EAF6FD;
  --nimr-sky-mid:#D6EEFB;
  --nimr-bg:#F4F8FA;
  --nimr-gold:#F2A541;
  --nimr-gold-dark:#D98A25;
  --nimr-gray-900:#1F2937;
  --nimr-gray-700:#3D4552;
  --nimr-gray-600:#5B6472;
  --nimr-gray-300:#D7DCE2;
  --nimr-gray-100:#F4F6F8;
  --nimr-white:#FFFFFF;
  --nimr-page-bg:#E3EAF0;
  --nimr-radius:12px;
  --nimr-shadow:0 4px 18px rgba(20,80,140,.08);
  --nimr-shadow-lg:0 10px 30px rgba(20,80,140,.14);
  --nimr-boxed-width:1140px;
}

* , *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--nimr-gray-900);
  background:var(--nimr-page-bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* Header and footer bands run full-width (background stretches edge to edge);
   only the body content between them is boxed. */
.body-boxed {
  max-width:var(--nimr-boxed-width);
  margin:0 auto;
  background:var(--nimr-bg);
}
img { max-width:100%; display:block; }
a { color:var(--nimr-blue-deep); text-decoration:none; }
a:hover { color:var(--nimr-navy); text-decoration:underline; }
h1, h2, h3, h4 { color:var(--nimr-gray-900); font-weight:800; line-height:1.25; margin:0 0 14px; }
h3 { font-size:1.15rem; }
h4 { font-size:1rem; }
p { margin:0 0 16px; color:var(--nimr-gray-700); text-align:justify; text-justify:inter-word; }
ul, dl { margin:0; }

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  font-weight:700;
  color:var(--nimr-blue-deep);
  display:block;
  margin-bottom:5px;
  margin-top:25px;
}
.rule { width:48px; height:3px; background:var(--nimr-blue); border:none; margin:0 0 10px; border-radius:2px; }
.badge-gold { display:inline-block; background:var(--nimr-gold); color:var(--nimr-navy-dark); font-size:.7rem; font-weight:800; padding:4px 12px; border-radius:999px; letter-spacing:.03em; }

/* =========================================================================
   SITE HEADER — utility bar / identity band / primary nav (top menu nav)
   ========================================================================= */
.site-utility-bar {
  background:var(--nimr-navy-dark);
  color:#fff;
  font-size:.8rem;
}
.site-utility-inner {
  max-width:var(--nimr-boxed-width); margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.site-utility-inner a { color:#fff; opacity:.9; }
.site-utility-inner a:hover { opacity:1; text-decoration:underline; }
.site-breadcrumb { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.site-breadcrumb .sep { opacity:.6; }

.site-identity {
  background:var(--nimr-white);
  border-bottom:1px solid var(--nimr-gray-300);
}
.site-identity-inner {
  max-width:var(--nimr-boxed-width); margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.site-brand { display:flex; align-items:center; gap:16px; text-decoration:none; }
.site-brand:hover { text-decoration:none; }
.site-brand img { width:64px; height:64px; flex-shrink:0; }
.site-brand-text .site-brand-title {
  display:block; margin:0; font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--nimr-navy);
  letter-spacing:.01em; font-weight:700;
}
.site-brand-text p {
  margin:2px 0 0; font-style:italic; color:var(--nimr-gray-600); font-size:.88rem; text-align:left;
}
.site-parent-link {
  font-size:.82rem; font-weight:600; color:var(--nimr-navy);
  border:1px solid var(--nimr-gray-300); border-radius:999px; padding:8px 16px;
  white-space:nowrap;
}
.site-parent-link:hover { background:var(--nimr-sky); text-decoration:none; }

.topnav { background:var(--nimr-blue); position:sticky; top:0; z-index:500; box-shadow:var(--nimr-shadow-lg); }
.topnav-inner { max-width:var(--nimr-boxed-width); margin:0 auto; padding:0 24px; display:flex; align-items:center; }
.topnav-toggle {
  display:none; align-items:center; gap:8px; background:none; border:none; color:#fff;
  font-weight:700; font-size:.95rem; padding:14px 4px; cursor:pointer; font-family:inherit;
}
.topnav-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.topnav-list li { list-style:none; border-left:1px solid rgba(255,255,255,.3); }
.topnav-list li:first-child { border-left:none; }
.topnav-link {
  display:block; padding:14px 18px; color:#fff; font-weight:700; font-size:.88rem;
  letter-spacing:.01em; border-bottom:3px solid transparent;
}
.topnav-link:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.topnav-link.is-active { border-bottom-color:var(--nimr-navy); background:rgba(11,58,102,.15); }

@media (max-width:900px) {
  .topnav-toggle { display:flex; }
  .topnav-list {
    display:none; flex-direction:column; width:100%;
    position:absolute; left:0; right:0; top:100%;
    background:var(--nimr-blue); box-shadow:var(--nimr-shadow-lg); z-index:40;
  }
  .topnav-inner { position:relative; flex-wrap:wrap; }
  .topnav-list.is-open { display:flex; }
  .topnav-list li { border-left:none; border-bottom:1px solid rgba(255,255,255,.25); }
  .topnav-list li:last-child { border-bottom:none; }
}

/* =========================================================================
   PAGE HEADING
   ========================================================================= */
.project-page-heading { width:100%; padding:28px 36px 0; }
.project-page-heading p { width:100%; margin:0; padding:0 0 12px; border-bottom:1px solid var(--nimr-sky-mid); color:#000; font-size:clamp(1.7rem,3vw,2rem); font-weight:700; line-height:1.25; text-align:left; }

/* Full-width single-column content shell (sidebar sub-menu removed) */
.shell { width:100%; padding:0px 24px 0; }

/* Main */
.main { width:100%; max-width:none; min-width:0; padding-bottom:50px; }

/* Hero (home page) */
.hero { padding:6px 0 8px; }
.hero h1 { margin-bottom:14px; }
.lede { font-size:1.06rem; font-weight:600; color:var(--nimr-gray-700); }
.hero-text { width:100%; max-width:none; }

/* Page header (subpages) */
.page-header { padding:4px 0 6px; }
.page-header p { width:100%; max-width:none; }
.partners-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:30px; align-items:center; }
.partners-intro-text { min-width:0; }
.partners-intro-image { width:100%; min-width:0; margin:0; }
.partners-intro-image img { width:100%; height:auto; border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); box-shadow:var(--nimr-shadow-lg); }

/* Buttons */
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.btn { display:inline-block; padding:12px 24px; border-radius:999px; font-weight:700; font-size:.9rem; cursor:pointer; border:2px solid transparent; text-decoration:none; font-family:inherit; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--nimr-blue); color:#fff; }
.btn-primary:hover { background:var(--nimr-blue-deep); color:#fff; }
.btn-outline { background:transparent; color:var(--nimr-navy); border-color:var(--nimr-navy); }
.btn-outline:hover { background:var(--nimr-sky); color:var(--nimr-navy); }

/* Sections */
.section { }
.section-alt { background:var(--nimr-white); border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); padding:20px 28px 20px; }
.section-head { width:100%; max-width:none; margin-bottom:20px; }
.section-cta { margin-top:18px; }

.objective-highlight { margin:16px 0 20px; padding:18px 20px; background:var(--nimr-sky); border-radius:var(--nimr-radius); color:var(--nimr-navy); font-size:1.05rem; line-height:1.6; }
.objective-highlight p { margin:0; color:var(--nimr-navy); }
.objective-highlight p + p { margin-top:8px; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.stats-4 { grid-template-columns:repeat(4,1fr); }
.stats-5 { grid-template-columns:repeat(5,1fr); }
.stat-card { text-align:center; background:var(--nimr-white); border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); padding:20px 14px; }
.stat-num { font-size:1.1rem; font-weight:800; color:var(--nimr-blue); display:block; }
.stat-label { font-size:.82rem; color:var(--nimr-gray-600); }

/* Steps / objectives */
.steps { display:flex; flex-direction:column; }
.step { display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--nimr-gray-300); }
.step:last-child { border-bottom:none; }
.step-num { flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:2px solid var(--nimr-blue); color:var(--nimr-blue); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.86rem; }
.step p { margin:0; }
.step h4 { margin-bottom:6px; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cards.cards-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--nimr-white); border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); padding:20px; }
.card h3, .card h4 { margin-bottom:8px; }
.card p:last-child { margin-bottom:0; }

/* Two column */
.two-col { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.two-col.reverse { grid-template-columns:.9fr 1.1fr; }
.two-col img { border-radius:var(--nimr-radius); box-shadow:var(--nimr-shadow-lg); }
.two-col.why-mwanza { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.study-map { width:100%; max-width:none; min-width:0; margin:0; justify-self:stretch; background:var(--nimr-white); border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); padding:8px; box-shadow:var(--nimr-shadow); }
.capacity-figure { margin:0; width:100%; }
.capacity-figure img { width:100%; height:auto; }
.capacity-figure figcaption { margin-top:10px; padding:0 4px; color:var(--nimr-gray-600); font-size:.82rem; font-style:italic; line-height:1.5; text-align:center; }

/* Partner list */
.partner-list { display:flex; flex-direction:column; }
.partner { display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--nimr-gray-300); }
.partner:last-child { border-bottom:none; }
.partner-badge {
  flex-shrink:0; width:110px; height:74px; border-radius:12px;
  background:#fff; border:1px solid var(--nimr-gray-300); padding:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--nimr-navy); font-weight:800; font-size:.8rem; text-align:center;
}
.partner-badge img { max-width:100%; max-height:100%; object-fit:contain; }
.partner h3 { margin-bottom:4px; }
.partner p { margin-bottom:0; }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-item { margin:0; }
.gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--nimr-radius); border:1px solid var(--nimr-gray-300); }
.gallery-caption { font-size:.85rem; color:var(--nimr-gray-600); margin-top:8px; }

/* Note / placeholder */
.note { border:2px dashed var(--nimr-gray-300); background:var(--nimr-gray-100); border-radius:var(--nimr-radius); padding:16px 18px; color:var(--nimr-gray-600); font-style:italic; font-size:.88rem; }
.note strong { font-style:normal; color:var(--nimr-navy); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:20px; align-items:stretch; }
.contact-card { background:var(--nimr-white); border:1px solid var(--nimr-gray-300); border-radius:var(--nimr-radius); padding:24px; min-height:190px; height:100%; }
.contact-card h3 { color:var(--nimr-navy); }
.contact-card a { color:var(--nimr-blue-deep); font-weight:600; }
.list-contact { list-style:none; padding:0; margin:0; }
.list-contact li { list-style:none; margin-bottom:.8em; }

/* =========================================================================
   SITE FOOTER (detailed)
   ========================================================================= */
.site-footer { background:var(--nimr-navy-dark); color:#fff; padding-top:40px; margin-top:30px; }
.site-footer-grid {
  max-width:var(--nimr-boxed-width); margin:0 auto; padding:0 24px 32px;
  display:grid; grid-template-columns:1.1fr 0.9fr 1.7fr 1fr; gap:32px;
}
.site-footer-col h3 {
  color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.2);
}
.site-footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.site-footer-brand img { width:48px; height:48px; flex-shrink:0; background:#fff; border-radius:50%; padding:4px; box-sizing:border-box; }
.site-footer-brand strong { display:block; color:#fff; font-size:1.05rem; }
.site-footer-brand span { display:block; color:rgba(255,255,255,.7); font-size:.78rem; }
.site-footer-col p { color:rgba(255,255,255,.75); font-size:.86rem; text-align:left; margin:0 0 14px; }
.site-footer-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.site-footer-list li { list-style:none; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; }
.site-footer-list li:last-child { border-bottom:none; padding-bottom:0; }
.site-footer-list a { color:rgba(255,255,255,.85); font-size:.86rem; }
.site-footer-list a:hover { color:#fff; text-decoration:underline; }
.site-footer-partners {
  list-style:none; margin:0; padding:0;
  column-width:150px; column-count:2; column-gap:24px;
}
.site-footer-partners li { list-style:none; color:rgba(255,255,255,.75); font-size:.84rem; border-bottom:1px solid rgba(255,255,255,.08); padding:0 0 10px; margin-bottom:10px; break-inside:avoid; }
.site-footer-partners li:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.site-footer-partners strong { display:block; color:#fff; font-size:.88rem; margin-bottom:2px; }
.site-footer-contact { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.site-footer-contact li { list-style:none; color:rgba(255,255,255,.75); font-size:.84rem; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:12px; }
.site-footer-contact li:last-child { border-bottom:none; padding-bottom:0; }
.site-footer-contact strong { display:block; color:#fff; font-size:.88rem; margin-bottom:2px; }
.site-footer-contact a { color:#fff; font-weight:600; }
.site-footer-bottom {
  border-top:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.15);
  padding:16px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.site-footer-bottom-inner { max-width:var(--nimr-boxed-width); margin:0 auto; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.site-footer-bottom p { margin:0; font-size:.8rem; color:rgba(255,255,255,.7); text-align:left; }
.site-footer-bottom-links { list-style:none; display:flex; gap:16px; padding:0; margin:0; flex-wrap:wrap; }
.site-footer-bottom-links a { color:rgba(255,255,255,.8); font-size:.8rem; }
.site-footer-bottom-links a:hover { color:#fff; text-decoration:underline; }

/* Responsive */
@media (max-width:1024px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .two-col { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .site-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .site-identity-inner { padding:16px 18px; flex-direction:column; justify-content:center; text-align:center; }
  .site-brand { flex-direction:column; text-align:center; }
  .site-brand-text p { text-align:center; }
  .project-page-heading { padding:22px 18px 0; }
  .shell { padding-top:14px; }
  .partners-intro { grid-template-columns:minmax(0,1fr); gap:18px; }
  .contact-grid { grid-template-columns:1fr; }
  .site-footer-grid { grid-template-columns:1fr 1fr; }
  .site-footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px) {
  .site-footer-grid { grid-template-columns:1fr; }
  .site-footer-partners { column-count:1; }
}
@media (max-width:560px) {
  .cards, .stats, .gallery { grid-template-columns:1fr; }
}

/* =========================================================================
   Click-to-zoom lightbox for content images
   ========================================================================= */
.zoom-enabled img { cursor:zoom-in; }
.lightbox[hidden] { display:none; }
.lightbox {
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,52px);
  background:rgba(4,18,32,.94);
  backdrop-filter:blur(5px);
}
.lightbox-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; }
.lightbox-image { display:block; width:auto; height:auto; max-width:94vw; max-height:84vh; object-fit:contain; cursor:zoom-out; border-radius:6px; background:#fff; box-shadow:0 22px 70px rgba(0,0,0,.5); }
.lightbox-caption { max-width:900px; margin:12px 0 0; color:#fff; font:600 .88rem/1.5 "Segoe UI",sans-serif; text-align:center; }
.lightbox-close {
  position:absolute; top:14px; right:18px; z-index:2;
  width:44px; height:44px; padding:0;
  border:1px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff;
  font:300 32px/40px sans-serif; text-align:center;
  cursor:pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible {
  background:var(--nimr-blue); border-color:var(--nimr-blue);
  outline:3px solid #fff; outline-offset:2px;
}
.lightbox-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; padding:0;
  border:1px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff;
  font-size:20px; text-align:center; line-height:1;
  cursor:pointer;
}
.lightbox-arrow:hover, .lightbox-arrow:focus-visible {
  background:var(--nimr-blue); border-color:var(--nimr-blue);
  outline:3px solid #fff; outline-offset:2px;
}
.lightbox-prev { left:14px; }
.lightbox-next { right:14px; }
.lightbox-counter { margin:8px 0 0; color:rgba(255,255,255,.8); font:600 .8rem/1.4 "Segoe UI",sans-serif; text-align:center; }
@media (max-width:600px) {
  .lightbox { padding:64px 12px 20px; }
  .lightbox-image { max-width:96vw; max-height:78vh; }
  .lightbox-arrow { width:42px; height:42px; font-size:16px; }
  .lightbox-prev { left:6px; }
  .lightbox-next { right:6px; }
}