/* ============================================
   WHO Africa 26 — Theme Styles
   Bootstrap is loaded into a low-priority "bootstrap"
   cascade layer (see who26.libraries.yml), so every rule
   in this file automatically wins against Bootstrap without
   having to chain selectors. The rules below are intentionally
   kept UNLAYERED so they also win against any unlayered CSS
   that Drupal core / contrib modules may inject (system,
   contextual links, toolbar, etc.).

   Colour and typography tokens follow the WHO Brand Guidance
   (July 2025). Pantone references and exact hex values are
   the authoritative source.

   Version 0.3 — April 2026 — WHO 2025 brand alignment
   ============================================ */

@layer bootstrap;

/* ---- WEBFONT — Noto Sans (WHO Brand 2025 primary typeface) ----
   Bundled locally to avoid any external CDN dependency. The variable
   font file covers all weights (100–900), so a single @font-face entry
   per weight pointing to the same source is sufficient.
   font-display: swap keeps initial render fast on slow networks. */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/noto-sans-latin.woff2') format('woff2');
}

/* ---- DESIGN TOKENS ---- */
:root {
  /* Primary brand colours (WHO 2025) */
  --who-navy: #00205C;            /* WHO Navy Blue, Pantone 281C */
  --who-navy-dark: #001740;       /* Darker navy for hovers/borders */
  --who-white: #FFFFFF;

  /* Secondary brand colours (WHO 2025) */
  --who-blue: #009ADE;            /* WHO Blue, Pantone 2925C */
  --who-blue-hover: #0083BD;      /* Darker blue for hovers */
  --who-blue-dark: #003B73;       /* Deep blue for headings/links (photo-story, contact) */
  --who-blue-mid: #3376CD;        /* Mid blue, internal use */
  --who-blue-65: #79B5E3;         /* WHO Blue tint 65% */
  --who-blue-25: #C9DDF3;         /* WHO Blue tint 25% */
  --who-blue-light: #DDEFF9;      /* WHO Blue tint 10% — large bg areas */
  --who-orange: #F26829;          /* WHO Orange, Pantone 165C */
  --who-yellow: #F4A81D;          /* WHO Yellow, Pantone 130C */
  --who-magenta: #A6228C;         /* WHO Magenta, Pantone 248C */
  --who-purple: #5B2C86;          /* WHO Purple, Pantone 2597C */
  --who-green: #80BC00;           /* WHO Green, Pantone 376C */

  /* Aliases kept for backwards compatibility — map to the official
     WHO 2025 secondary palette so legacy rules render on-brand. */
  --who-gold: var(--who-yellow);
  --who-gold-hover: #D89017;

  /* Emergency / warning */
  --who-red: #EF3842;             /* WHO Emergency Red, Pantone 032C */

  /* Neutral palette */
  --who-gray-50: #F8F9FA;
  --who-gray-100: #F0F2F5;
  --who-gray-200: #E4E7EB;
  --who-gray-300: #D1D5DB;
  --who-gray-400: #9CA3AF;
  --who-gray-500: #6B7280;
  --who-gray-600: #4B5563;
  --who-gray-700: #374151;
  --who-gray-800: #1F2937;

  --who-max-width: 1320px;
  --who-container-max: 1200px;    /* Narrower container for editorial pages (photo-story, contact) */
  --who-nav-height: 52px;

  --who-radius-sm: 4px;
  --who-radius-md: 8px;
  --who-radius-lg: 16px;
  --who-radius-pill: 100px;

  --who-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --who-shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --who-shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* White transparency — navigation, overlays, dark backgrounds */
  --who-white-90: rgba(255,255,255,.92);
  --who-white-70: rgba(255,255,255,.7);
  --who-white-50: rgba(255,255,255,.5);

  --who-transition: .2s ease;
}

/* ---- BASE ----
   Typography follows the WHO Brand Guidance (July 2025): Noto Sans is
   the primary typeface in Latin scripts. The system font stack is kept
   as a fallback while the @font-face for Noto Sans loads. */
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--who-gray-800);
  background: var(--who-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Clip horizontal overflow on the content area only — NOT on body/html.
   Keeping overflow-x off body lets .nav-mega (position:absolute inside
   the sticky .main-nav) paint to full viewport width without being clipped. */
main[role="main"] {
  overflow-x: clip;
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--who-blue); }
img { display: block; max-width: 100%; height: auto; }

/* Fixed-width container, overrides BS5 responsive container. */
.container {
  max-width: var(--who-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Drop list bullets for navigation-style lists placed in our custom regions. */
.top-bar ul,
.main-nav ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Contextual edit buttons — nudge margins, never touch position (already absolute via
   Drupal's contextual.theme.css) or z-index (already 500). Higher specificity (0,2,0)
   beats Drupal's .contextual (0,1,0) so top/right are overridden without layout impact. */
.contextual-region .contextual {
  top: 8px;
  right: 12px;
}

/* Hero front slider — the Bootstrap carousel is full-width and has no room for
   any block-level sibling in its flow. Force the contextual placeholder to be
   absolute from the very first paint (before contextual.js adds .contextual),
   so the edit pencil floats over the slide without pushing it. */
/* Hero slider wrapper — must be transparent to height so Bootstrap's
   height:100% chain (.carousel → .carousel-inner → .carousel-item) still
   resolves against .hero-slider's 715px. Contextual placeholder is forced
   absolute so it never displaces the carousel regardless of DOM order. */
.hero-front-block {
  position: relative;
  display: contents; /* no box of its own — behaves as if the wrapper weren't there */
}
.hero-front-block > [data-contextual-id] {
  /* display:contents means we need to re-establish a positioned ancestor.
     Use fixed positioning relative to viewport instead. */
  position: fixed;
  top: 52px; /* below Drupal admin toolbar (~39px) + small gap */
  right: 12px;
  z-index: 600;
}

/* ── Admin local tasks (Edit / Translate / Revisions tabs) ────────────── */
/* ---- Admin utilities (logged-in only) ----
   Both blocks share WHO26 tokens for a cohesive admin feel
   without altering page layout. */

/* Local tasks bar (Drupal Edit/Translate/Revisions tabs) */
.admin-local-tasks {
  background: var(--who-gray-50);
  border-bottom: 1px solid var(--who-gray-200);
  font-size: .75rem;
  letter-spacing: .01em;
}
.admin-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  max-width: var(--who-max-width);
  margin-inline: auto;
}
.admin-tab-item a {
  display: block;
  padding: 8px 16px;
  color: var(--who-gray-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--who-transition), border-color var(--who-transition);
}
.admin-tab-item a:hover {
  color: var(--who-navy);
  border-bottom-color: var(--who-navy);
}
.admin-tab-item.is-active a {
  color: var(--who-navy);
  font-weight: 600;
  border-bottom-color: var(--who-blue);
}




/* ============================================================
   Bootstrap 3 → Bootstrap 5 compatibility layer
   DXPR Builder content was authored under Bootstrap 3 and
   uses visibility/utility classes that no longer exist in BS5.
   ============================================================ */

/* Responsive show helpers (visible-{bp}-block) */
.visible-xs-block,
.visible-sm-block,
.visible-md-block,
.visible-lg-block { display: none !important; }

@media (max-width: 767px) {
  .visible-xs-block { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block { display: block !important; }
}
@media (min-width: 1200px) {
  .visible-lg-block { display: block !important; }
}

/* Responsive hide helpers (hidden-{bp}) */
@media (max-width: 767px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }

/* Float utilities (renamed in BS4/5) */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* Centre-block (renamed in BS4/5) */
.center-block { display: block !important; margin-right: auto !important; margin-left: auto !important; }

/* Panel component (removed in BS4/5) */
.panel { background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .375rem; margin-bottom: .5rem; }
.panel-default { border-color: rgba(0,0,0,.125); }
.panel-heading { padding: .75rem 1rem; background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,.125); border-radius: .375rem .375rem 0 0; }
.panel-title { margin: 0; font-size: 1rem; font-weight: 500; }
.panel-title > a { display: block; color: inherit; text-decoration: none; }
.panel-body { padding: 1rem; }
.panel-collapse.collapse:not(.show) { display: none; }
.panel-collapse.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

/* Embed-responsive (removed in BS5 → use ratio) */
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before  { padding-top: 75%; }
.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Bootstrap 3 carousel controls */
.carousel-control.left,
.carousel-control.right { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; color: #fff; opacity: .5; transition: opacity .15s; }
.carousel-control.left  { left: 0; }
.carousel-control.right { right: 0; }
.carousel-control.left:hover,
.carousel-control.right:hover { opacity: .9; }

/* Bootstrap 3 tabs (nav-tabs / tab-content / tabbable) — used by DXPR az_tabs */
.tabbable { position: relative; }
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs > li { display: block; margin-bottom: -1px; }
.nav-tabs > li > a {
  display: block;
  padding: .5rem 1rem;
  color: var(--who-navy);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: .25rem .25rem 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus { background: #f8f9fa; border-color: #e9ecef #e9ecef #dee2e6; }
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs > li > a[aria-expanded="true"] {
  color: var(--who-blue);
  background: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
  font-weight: 600;
}
.tab-content { padding-top: 1rem; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active { display: block; }

/* DXPR vertical tabs (tabs-left / tabs-right) */
.tabbable.tabs-left,
.tabbable.tabs-right { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.tabbable.tabs-left > .nav-tabs,
.tabbable.tabs-right > .nav-tabs {
  flex: 0 0 30%;
  flex-direction: column;
  border-bottom: 0;
}
.tabbable.tabs-left > .nav-tabs { border-right: 1px solid #dee2e6; padding-right: 0; }
.tabbable.tabs-right > .nav-tabs { order: 2; border-left: 1px solid #dee2e6; padding-left: 0; }
.tabbable.tabs-left > .nav-tabs > li,
.tabbable.tabs-right > .nav-tabs > li { margin-bottom: 0; }
.tabbable.tabs-left > .nav-tabs > li > a {
  border-radius: .25rem 0 0 .25rem;
  border: 1px solid transparent;
  border-right: 0;
  margin-right: -1px;
}
.tabbable.tabs-left > .nav-tabs > li.active > a,
.tabbable.tabs-left > .nav-tabs > li > a.active,
.tabbable.tabs-left > .nav-tabs > li > a[aria-expanded="true"] {
  border-color: #dee2e6;
  border-right-color: #fff;
  background: #fff;
}
.tabbable.tabs-left > .tab-content,
.tabbable.tabs-right > .tab-content { flex: 1; padding-top: 0; }

@media (max-width: 767.98px) {
  .tabbable.tabs-left,
  .tabbable.tabs-right { flex-direction: column; }
  .tabbable.tabs-left > .nav-tabs,
  .tabbable.tabs-right > .nav-tabs { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; border: 0; border-bottom: 1px solid #dee2e6; }
}