﻿/*
 * WHO Blue - global-health edition.
 * Palette taken from the World Health Organization's actual production design tokens
 * (who.int), applied to CEMB's own brand, photography and content. Structured as a
 * direct parallel of stanford.css / home1.css - same selectors, same roles, different
 * palette:
 *   --cemb-deep     -> Dark surface L1   #274375 (WHO's own --d-l1-background token,
 *                                        also the client-supplied reference blue)
 *   --cemb-deep-2   -> Dark surface L2   #15336a (WHO's --d-l2-background)
 *   --cemb-green    -> Accent Fill Rest  #0078d4 (WHO's --accentFillRest / hover pair)
 *   --cemb-green-bright / glows -> Accent Selected (dark) #238ada
 *   --cemb-gold     -> White #ffffff, used as the clean secondary accent on WHO blue
 *                     surfaces, with pale blue reserved for supporting tints
 *   --cemb-ink      -> Neutral foreground on light surfaces #092862
 *   --cemb-border   -> Neutral outline (light)  #b3bdce
 *   darkest endpoints -> Dark surface L4 #03235e (WHO's --d-l4-background)
 * This file only loads when the CEMB theme shell is active, alongside home1.css and
 * stanford.css.
 */

.theme-who {
  --cemb-deep: #274375;
  --cemb-deep-2: #15336a;
  --cemb-green: #0078d4;
  --cemb-green-bright: #238ada;
  --cemb-gold: #fff;
  --cemb-gold-bright: #eaf6fd;
  --cemb-white: #fff;
  --cemb-ink: #092862;
  --cemb-ink-soft: #5a6b8c;
  --cemb-border: #b3bdce;
  --cemb-shadow: 0 22px 55px rgba(21, 51, 106, .15);
  --cemb-booklet-tint: #eaf3fb;
  --cemb-booklet-stage-glow: #238ada;
  --cemb-booklet-stage-mid: #274375;
  --cemb-booklet-stage-edge: #03235e;
  background: #fff;
}

.theme-who .cemb-ref-hero {
  background: #274375;
}

.theme-who .cemb-ref-hero__veil {
  background: linear-gradient(90deg, #274375 0%, rgba(39, 67, 117, .97) 35%, rgba(39, 67, 117, .72) 57%, rgba(39, 67, 117, .08) 84%), linear-gradient(0deg, rgba(21, 51, 106, .58), transparent 52%);
}

/* Header and navigation */
.theme-who .site-header {
  background: linear-gradient(180deg, rgba(21, 51, 106, .84), rgba(21, 51, 106, .34));
  border-bottom-color: rgba(255, 255, 255, .14);
}

.theme-who .site-header.is-scrolled,
.theme-who .site-header.is-mega-open {
  background: #274375;
}

.theme-who .primary-nav {
  background: transparent;
}

.theme-who .brand__copy small b,
.theme-who .cemb-mega__eyebrow,
.theme-who .cemb-mega__intro > a {
  color: #6cc0f5;
}

.theme-who .primary-nav > a:not(.nav-search):not(.cemb-apply-btn)::after,
.theme-who .nav-dropdown__label::after {
  background: #6cc0f5;
}

.theme-who .cemb-mega__panel {
  background: linear-gradient(135deg, rgba(39, 67, 117, .98), rgba(21, 51, 106, .99));
  box-shadow: 0 32px 80px rgba(9, 40, 98, .42), inset 0 1px rgba(255, 255, 255, .08);
}

.theme-who .cemb-mega__panel::before {
  background: radial-gradient(circle at 18% 0, rgba(35, 138, 218, .28), transparent 36%), linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 40%);
}

.theme-who .cemb-mega__feature::after {
  background: linear-gradient(180deg, transparent 30%, rgba(21, 51, 106, .9));
}

.theme-who .cemb-mega__links a svg {
  color: #6cc0f5;
}

.theme-who .cemb-btn--primary {
  background: #0078d4;
}

.theme-who .cemb-btn--primary:hover {
  background: #0c2b64;
}

.theme-who .cemb-btn--outline {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .72);
}

.theme-who .cemb-btn--outline:hover,
.theme-who .cemb-btn--outline:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

/* Hero */
.theme-who .cemb-hero {
  background: #15336a;
}

.theme-who .cemb-hero__veil {
  background: linear-gradient(90deg, rgba(21, 51, 106, .97) 0%, rgba(21, 51, 106, .79) 31%, rgba(21, 51, 106, .43) 55%, rgba(21, 51, 106, .14) 77%), linear-gradient(0deg, rgba(9, 40, 98, .56), transparent 48%);
}

.theme-who .cemb-highlight {
  color: #6cc0f5;
}

/* Interior page heroes (About, Research sub-pages, Board pages, Guest House, Search, Showcase). */
.theme-who .cemb-about-hero {
  background: #274375;
}

.theme-who .cemb-about-hero__veil {
  background: linear-gradient(90deg, #274375 0%, rgba(39, 67, 117, .97) 35%, rgba(39, 67, 117, .72) 57%, rgba(39, 67, 117, .08) 84%), linear-gradient(0deg, rgba(21, 51, 106, .58), transparent 52%);
}

/* Leadership-letter heroes (Founder's Message, Chairman/BOG Message, Director's Message to
   Students, Founder Director legacy) use their own bespoke veils rather than the shared
   .cemb-about-hero__veil, so each needs its own WHO-theme override. */
.theme-who .cemb-founder-message__hero-veil {
  background: linear-gradient(100deg, rgba(21, 51, 106, .99) 0%, rgba(21, 51, 106, .92) 53%, rgba(21, 51, 106, .65) 100%), linear-gradient(0deg, rgba(21, 51, 106, .75), transparent 55%);
}

.theme-who .cemb-founder-message__hero-veil::after {
  border-color: rgba(108, 192, 245, .16);
}

.theme-who .cemb-chairman-message__hero-veil {
  background: linear-gradient(100deg, rgba(21, 51, 106, .99) 0%, rgba(21, 51, 106, .93) 43%, rgba(21, 51, 106, .7) 72%, rgba(21, 51, 106, .6) 100%), linear-gradient(0deg, rgba(21, 51, 106, .72), transparent 62%);
}

.theme-who .cemb-chairman-message__hero-veil::after {
  background: linear-gradient(135deg, transparent 48%, rgba(108, 192, 245, .055) 48%, rgba(108, 192, 245, .055) 48.25%, transparent 48.25%), linear-gradient(45deg, transparent 68%, rgba(255, 255, 255, .04) 68%, rgba(255, 255, 255, .04) 68.25%, transparent 68.25%);
}

.theme-who .cemb-student-message__hero-photo::after {
  background: linear-gradient(90deg, var(--cemb-deep-2), transparent 42%), linear-gradient(0deg, rgba(21, 51, 106, .46), transparent 55%);
}

.theme-who .cemb-student-message__hero-veil {
  background: linear-gradient(90deg, rgba(21, 51, 106, 1) 0%, rgba(21, 51, 106, .98) 36%, rgba(21, 51, 106, .67) 55%, rgba(21, 51, 106, .08) 100%);
}

.theme-who .cemb-student-message__hero-veil::after {
  background: linear-gradient(transparent, rgba(108, 192, 245, .58));
}

.theme-who .cemb-legacy-hero__veil {
  background: radial-gradient(circle at 76% 42%, rgba(35, 138, 218, .17), transparent 28%), linear-gradient(105deg, rgba(21, 51, 106, .99) 0%, rgba(21, 51, 106, .94) 46%, rgba(21, 51, 106, .76) 100%);
}

.theme-who .cemb-search-hero__veil {
  background: linear-gradient(90deg, rgba(21, 51, 106, .94), rgba(21, 51, 106, .73) 48%, rgba(21, 51, 106, .45)), linear-gradient(0deg, rgba(9, 40, 98, .7), transparent 58%);
}

.theme-who .cemb-showcase-hero {
  background: radial-gradient(circle at 18% 22%, rgba(35, 138, 218, .3), transparent 42%),
              radial-gradient(circle at 82% 78%, rgba(108, 192, 245, .16), transparent 38%),
              linear-gradient(135deg, #15336a 0%, #274375 50%, #03235e 100%);
}

.theme-who .cemb-hero__badges {
  background: linear-gradient(135deg, rgba(0, 120, 212, .74), rgba(21, 51, 106, .92));
}

.theme-who .cemb-hero__badge-arrow {
  color: #6cc0f5;
  background: transparent;
}

.theme-who .cemb-hero__badge--announce {
  border-color: rgba(178, 224, 247, .34) !important;
  background: linear-gradient(100deg, rgba(108, 192, 245, .15), rgba(255, 255, 255, .035)) !important;
}

.theme-who .cemb-hero__badge-icon--notice {
  color: #fff;
  background: rgba(108, 192, 245, .14);
  border-color: rgba(178, 224, 247, .28);
}

.theme-who .cemb-hero__announce-label,
.theme-who .cemb-hero__updates-head span {
  color: #b2e0f7;
}

.theme-who .cemb-hero__slider-dots button[aria-current="true"] span,
.theme-who .cemb-hero__rail-thumb {
  background: #6cc0f5;
}

.theme-who .cemb-hero__slider-nav button,
.theme-who .cemb-hero__slider-dots,
.theme-who .cemb-hero__rail {
  background-color: rgba(21, 51, 106, .64);
}

.theme-who .cemb-hero__slider-arrow {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .68);
}

.theme-who .cemb-hero__slider-arrow:hover,
.theme-who .cemb-hero__slider-arrow:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

/* Statistics and feature bands */
.theme-who .cemb-stats {
  background: radial-gradient(circle at 50% 0, rgba(35, 138, 218, .34), transparent 58%), #0c2b64;
  border-top-color: rgba(178, 224, 247, .3);
}

.theme-who .cemb-stat__icon {
  filter: sepia(1) saturate(2.2) hue-rotate(165deg) brightness(1.05);
}

.theme-who .cemb-stat span {
  color: #fff;
}

.theme-who .cemb-campus-film__veil {
  background: linear-gradient(90deg, rgba(21, 51, 106, .9) 0%, rgba(21, 51, 106, .66) 39%, rgba(21, 51, 106, .22) 73%, rgba(9, 40, 98, .36) 100%), linear-gradient(0deg, rgba(9, 40, 98, .5), transparent 48%);
}

/* The legacy section is light: use WHO blue instead of the white dark-surface accent. */
.theme-who .cemb-milestones__header .cemb-eyebrow,
.theme-who .cemb-milestone-hero__label,
.theme-who .cemb-milestone-hero__cta,
.theme-who .cemb-milestone-hero__figure sup,
.theme-who .cemb-milestone-row--achievements .cemb-milestone-row__num,
.theme-who .cemb-milestone-row--achievements .cemb-milestone-row__sketch {
  color: #0067b8;
}

.theme-who .cemb-milestones__bg::after {
  background: radial-gradient(circle, rgba(108, 192, 245, .2) 0%, transparent 66%);
}

.theme-who .cemb-milestone-glass {
  border-color: #c8d7e5;
  background: radial-gradient(circle at 12% 6%, rgba(0, 120, 212, .1) 0%, transparent 46%), radial-gradient(circle at 92% 104%, rgba(108, 192, 245, .13) 0%, transparent 52%), rgba(255, 255, 255, .82);
}

.theme-who .cemb-milestone-glass:hover {
  border-color: rgba(0, 103, 184, .48);
}

/* Campus reels: keep the photography dominant and reserve blue for structure. */
.theme-who .cemb-reels__card {
  background: #101a2d;
  border-color: rgba(9, 40, 98, .18);
  box-shadow: 0 16px 40px rgba(9, 40, 98, .13);
}

.theme-who .cemb-reels__veil {
  background: linear-gradient(180deg, rgba(5, 10, 18, .05) 0%, rgba(5, 10, 18, .08) 46%, rgba(5, 10, 18, .88) 100%);
}

.theme-who .cemb-reels__play {
  color: #15336a;
  background: #fff;
  border: 1px solid rgba(21, 51, 106, .16);
  box-shadow: 0 10px 26px rgba(5, 16, 36, .38), 0 0 0 4px rgba(255, 255, 255, .22);
}

.theme-who .cemb-reels__card:hover .cemb-reels__play,
.theme-who .cemb-reels__card:focus-visible .cemb-reels__play {
  background: #eaf6fd;
}

.theme-who .cemb-reels__badge {
  color: #fff;
  background: #15336a;
  border: 1px solid rgba(255, 255, 255, .4);
}

.theme-who .cemb-reels__card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.theme-who .cemb-research {
  background: linear-gradient(180deg, #fff 0%, #f5f8fa 100%);
}

.theme-who .cemb-research-card {
  border-color: #dbe3ea;
  background: rgba(255, 255, 255, .9);
}

.theme-who .cemb-research-card__icon {
  color: #005ca3;
  background: #d4e8f8;
  border-color: #b6dbf4;
}

.theme-who .cemb-labs {
  background: radial-gradient(circle at 50% 0, rgba(35, 138, 218, .34), transparent 48%), #274375;
}

.theme-who .cemb-lab-card {
  background: #15336a;
}

.theme-who .cemb-why__play,
.theme-who .cemb-filter-tab.is-active {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-lightbox__explore-btn {
  color: #fff;
  background: transparent;
  border-color: #fff;
  box-shadow: none;
}

.theme-who .cemb-lightbox__explore-btn:hover,
.theme-who .cemb-lightbox__explore-btn:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.theme-who .cemb-carousel-btns button {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
}

.theme-who .cemb-carousel-btns button:hover,
.theme-who .cemb-carousel-btns button:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-why__media::after {
  background: linear-gradient(0deg, rgba(21, 51, 106, .74) 0%, rgba(21, 51, 106, .1) 42%, transparent 62%);
}

/* Outcomes */
.theme-who .cemb-brochures {
  background: radial-gradient(circle at 88% 13%, rgba(35, 138, 218, .3), transparent 30%), radial-gradient(circle at 9% 88%, rgba(108, 192, 245, .1), transparent 24%), #15336a;
}

.theme-who .cemb-outcome-row:hover {
  background: linear-gradient(135deg, rgba(0, 120, 212, .96), rgba(21, 51, 106, .99));
  border-left-color: #fff;
  border-bottom-color: rgba(255, 255, 255, .72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.theme-who .cemb-outcome-row:hover .cemb-outcome-row__thumb {
  border-color: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 255, 255, .16);
}

.theme-who .cemb-outcome-row:hover .cemb-outcome-row__index,
.theme-who .cemb-outcome-row:hover strong,
.theme-who .cemb-thumb-zoom-btn {
  color: #fff;
}

.theme-who .cemb-outcome-row:hover .cemb-outcome-row__badge {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-outcome-row:hover .cemb-outcome-row__arrow {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-outcome-row__arrow {
  color: #fff;
  border-color: #fff;
}

.theme-who .cemb-outcome-row__thumb,
.theme-who .cemb-outcome-row:hover .cemb-outcome-row__img,
.theme-who .cemb-lightbox__media {
  background: #092862;
}

.theme-who .cemb-outcome-row__thumb:hover .cemb-thumb-zoom-btn,
.theme-who .cemb-outcome-lightbox {
  background-color: rgba(9, 40, 98, .94);
}

.theme-who .cemb-lightbox__cta {
  background: linear-gradient(135deg, #274375, #15336a);
}

.theme-who .cemb-lightbox__close {
  padding: 0;
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.theme-who .cemb-lightbox__close span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.theme-who .cemb-lightbox__close:hover,
.theme-who .cemb-lightbox__close:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

/* Lower homepage sections */
.theme-who .cemb-gallery,
.theme-who .cemb-news {
  background-color: #f5f8fa;
}

.theme-who .cemb-news-card__tag--gold {
  color: #15336a;
  background: #fff;
  border: 1px solid rgba(21, 51, 106, .18);
}

.theme-who .cemb-booklet__cover-tag {
  color: #15336a;
  background: #fff;
  border: 1px solid rgba(21, 51, 106, .14);
}

.theme-who .cemb-gallery__item button::after,
.theme-who .cemb-news-card__image::after {
  background-color: rgba(39, 67, 117, .12);
}

.theme-who .cemb-footer {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, #274375 0%, #15336a 56%, #03235e 100%);
  border-top: 5px solid #0078d4;
}

.theme-who .cemb-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .08), transparent 30%);
}

.theme-who .cemb-footer__grid,
.theme-who .cemb-footer__bottom {
  position: relative;
  z-index: 1;
}

.theme-who .cemb-footer__col h2 {
  color: #fff;
}

.theme-who .cemb-footer__brand p,
.theme-who .cemb-footer__col ul a,
.theme-who .cemb-footer__contact a,
.theme-who .cemb-footer__newsletter p,
.theme-who .cemb-footer__bottom,
.theme-who .cemb-footer__bottom a {
  color: #fff;
}

.theme-who .cemb-footer__social a {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
}

.theme-who .cemb-newsletter-form input {
  color: #fff;
  background: rgba(21, 51, 106, .34);
  border-color: rgba(255, 255, 255, .24);
}

.theme-who .cemb-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, .82);
}

.theme-who .cemb-newsletter-form input:focus {
  border-color: #6cc0f5;
}

.theme-who .cemb-footer__bottom {
  border-top-color: rgba(255, 255, 255, .18);
}

.theme-who .cemb-newsletter-form button {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .72);
}

.theme-who .cemb-newsletter-form button:hover,
.theme-who .cemb-newsletter-form button:focus-visible {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-footer__social a:hover {
  color: #274375;
  background: #fff;
  border-color: #fff;
}

.theme-who .cemb-footer__col a:hover,
.theme-who .cemb-footer__bottom a:hover {
  color: #6cc0f5;
}

/* Keep keyboard focus unmistakable against both light and dark regions. */
.theme-who :focus-visible {
  outline-color: #0078d4;
}

@media (max-width: 1099px) {
  .theme-who .primary-nav {
    background: #274375;
  }
}

@media (max-width: 760px) {
  .theme-who .cemb-student-message__hero-photo::after {
    background: linear-gradient(0deg, var(--cemb-deep-2) 5%, rgba(21, 51, 106, .93) 44%, rgba(21, 51, 106, .2) 78%);
  }

  .theme-who .cemb-student-message__hero-veil {
    background: linear-gradient(0deg, rgba(21, 51, 106, .98) 6%, rgba(21, 51, 106, .75) 62%, rgba(21, 51, 106, .15));
  }
}


/* -----------------------------------------------------------------------------
 * CEMB Direct - "Connect with the right office"
 * The shared card styling accents everything with --cemb-gold, which is #fff in
 * this theme, so the eyebrow, "Call direct" label, icon tile, mail glyph and hover
 * border all collapsed into the body text on WHO blue. Remap them onto the WHO
 * accent (#238ada) with a lighter tint for small text on the dark surface.
 * ---------------------------------------------------------------------------*/
.theme-who .cemb-direct {
  background:
    radial-gradient(circle at 86% 4%, rgba(35, 138, 218, .40), transparent 44%),
    linear-gradient(140deg, #15336a 0%, #274375 56%, #1d3f7b 100%);
}
.theme-who .cemb-direct::before { border-color: rgba(122, 190, 245, .26); }
.theme-who .cemb-direct .cemb-eyebrow,
.theme-who .cemb-direct__intro a,
.theme-who .cemb-direct__phone span { color: #7abef5; }
.theme-who .cemb-direct__icon {
  color: #fff;
  background: linear-gradient(150deg, #238ada, #0078d4);
  box-shadow: 0 8px 20px rgba(3, 35, 94, .45);
}
.theme-who .cemb-direct__email svg { color: #7abef5; }
.theme-who .cemb-direct__number { color: rgba(163, 208, 245, .42); }
.theme-who .cemb-direct__card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(163, 208, 245, .24);
}
.theme-who .cemb-direct__card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(122, 190, 245, .66);
}
.theme-who .cemb-direct__details { border-top-color: rgba(163, 208, 245, .2); }
.theme-who .cemb-direct__email:hover,
.theme-who .cemb-direct__phone:hover { color: #9fd0f8; }
