/*
 * base.css
 * Neuroimmunology Matters — PeerVoice Hub & Curriculum
 *
 * Shared design token foundation for both sites.
 * Contains ONLY: color primitives, typography primitives, spacing/size tokens,
 * utility classes, and the responsive container/animation system.
 * Do NOT add component or layout styles here — those belong in hub.css / curriculum.css.
 *
 * Version : 1.6
 * Updated : 2026-05-21
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap');

/* ============================================================
   COLOR PRIMITIVES
   Raw color scale for all brand and neutral palettes.
   Consume these via semantic aliases wherever possible.
   Named: --color-{palette}-{step}  (higher step = darker)
   Brand callouts:
     -primary-brand     → main UI background / headings
     -secondary-brand   → interactive / accent
     -highlight-brand   → attention / badge
   ============================================================ */
:root {
  --color-blue-100: #E6F5FBFF;
  --color-blue-200: #A6DCF5FF;
  --color-blue-300: #7AC2EDFF;
  --color-blue-400: #4DA6D9FF;
  --color-blue-500-secondary-brand: #1F8CCDFF;
  --color-blue-600: #2290C0FF;
  --color-blue-700-secondary-brand: #284DA1FF;
  --color-blue-800: #254EA0FF;
  --color-blue-900: #1E3B88FF;
  --color-blue-1000-primary-brand: #262260FF;
  --color-teal-100: #EAF9F8FF;
  --color-teal-200: #D0F2F0FF;
  --color-teal-300: #B4E7E4FF;
  --color-teal-400: #98DBD6FF;
  --color-teal-500: #7DCEC9FF;
  --color-teal-600: #62C1BCFF;
  --color-teal-700-primary-brand: #46B3AEFF;
  --color-teal-800: #2F827CFF;
  --color-teal-900: #1F5F5BFF;
  --color-teal-1000: #0F3D3AFF;
  --color-cherry-100: #F9F5F8FF;
  --color-cherry-200: #E6DFE4FF;
  --color-cherry-300: #D4BDCAFF;
  --color-cherry-400: #C29BB1FF;
  --color-cherry-500: #B07A97FF;
  --color-cherry-600: #9F5A7DFF;
  --color-cherry-700-secondary-brand: #89365EFF;
  --color-cherry-800: #7A2E51FF;
  --color-cherry-900: #65273FFF;
  --color-cherry-1000: #4C1F38FF;
  --color-sun-100: #FFF8F2FF;
  --color-sun-200: #FDECE9FF;
  --color-sun-300: #FCDCC2FF;
  --color-sun-400: #FBCD9CFF;
  --color-sun-500: #FAC874FF;
  --color-sun-600: #F9B94DFF;
  --color-sun-700-highlight-brand: #F7A327FF;
  --color-sun-800: #C88700FF;
  --color-sun-900: #A06A00FF;
  --color-sun-1000: #7A4F00FF;
  --color-slate-100: #FAFAFAFF;
  --color-slate-200: #F4F4F4FF;
  --color-slate-300: #EAEAEAFF;
  --color-slate-400: #E0E0E0FF;
  --color-slate-500: #D6D6D6FF;
  --color-slate-600-secondary-brand: #CBCBCBFF;
  --color-slate-700: #808080FF;
  --color-slate-800: #666666FF;
  --color-slate-900: #4D4D4DFF;
  --color-slate-1000: #333333FF;
  --color-blush-100: #FFF1F5FF;
  --color-blush-200: #FBDDEAFF;
  --color-blush-300: #F9C7D6FF;
  --color-blush-400: #F7ACC0FF;
  --color-blush-500: #F590A2FF;
  --color-blush-600: #F3748EFF;
  --color-blush-700-highlight-brand: #F05779FF;
  --color-blush-800: #C63B65FF;
  --color-blush-900: #A02951FF;
  --color-blush-1000: #7A1E3AFF;
  --color-green-100: #ECF9F1FF;
  --color-green-200: #C7EAD8FF;
  --color-green-300: #A3D9BFFF;
  --color-green-400: #80C096FF;
  --color-green-500: #5CB36BFF;
  --color-green-600: #3B9A45FF;
  --color-green-700: #106F1BFF;
  --color-green-800: #0B6A16FF;
  --color-green-900: #075D13FF;
  --color-green-1000: #05420FFF;
  --color-red-100: #FBEAEAFF;
  --color-red-200: #F1BCBAFF;
  --color-red-300: #E8998AFF;
  --color-red-400: #DD7576FF;
  --color-red-500: #D0504DFF;
  --color-red-600: #B73533FF;
  --color-red-700: #9F1A1DFF;
  --color-red-800: #801619FF;
  --color-red-900: #661214FF;
  --color-red-1000: #4C0D0FFF;
  --color-black-100: #0C0C0D0D;
  --color-black-200: #0C0C0D1A;
  --color-black-300: #0C0C0D33;
  --color-black-400: #0C0C0D66;
  --color-black-500: #0C0C0DB2;
  --color-black-600: #0C0C0DCC;
  --color-black-700: #0C0C0DD9;
  --color-black-800: #0C0C0DE5;
  --color-black-900: #0C0C0DF2;
  --color-black-1000: #0C0C0DFF;
  --color-white-100: #FEFEFE0D;
  --color-white-200: #FEFEFE1A;
  --color-white-300: #FEFEFE33;
  --color-white-400: #FEFEFE66;
  --color-white-500: #FEFEFEB2;
  --color-white-600: #FEFEFECC;
  --color-white-700: #FEFEFED9;
  --color-white-800: #FEFEFEE5;
  --color-white-900: #FEFEFEF2;
  --color-white-1000: #FEFEFEFF;
}

/* ============================================================
   BRAND COLOR RGB CHANNELS
   Used for rgba() opacity variants: rgba(var(--color-*-rgb), 0.N)
   ============================================================ */
:root {
  --color-blue-1000-rgb: 38, 34, 96;
  --color-blue-700-rgb:  40, 77, 161;
  --color-teal-700-rgb:  70, 179, 174;
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   Font families, a linear size scale (00–10), and weight aliases.
   Use the scale variables (--typography-scale-XX) in text utility
   classes below rather than hardcoding px values in components.
   ============================================================ */
:root {
  --typography-family-sans: "DM Sans", sans-serif;
  --typography-family-serif: "DM Serif Display", serif;
  --typography-family-mono: "DM Mono", monospace;
  --typography-scale-00: 10px;
  --typography-scale-01: 12px;
  --typography-scale-02: 14px;
  --typography-scale-03: 16px;
  --typography-scale-04: 18px;
  --typography-scale-05: 20px;
  --typography-scale-06: 24px;
  --typography-scale-07: 28px;
  --typography-scale-08: 32px;
  --typography-scale-09: 40px;
  --typography-scale-10: 48px;
  --typography-weight-thin: 100;
  --typography-weight-extra-light: 200;
  --typography-weight-light: 300;
  --typography-weight-regular: 400;
  --typography-weight-medium: 500;
  --typography-weight-semibold: 600;
  --typography-weight-bold: 700;
  --typography-weight-extra-bold: 800;
  --typography-weight-black: 900;
  --typography-italic: italic;
}

/* ============================================================
   SIZE & SPACING PRIMITIVES
   --size-space-*   : positive/negative layout spacing (margin, padding, gap)
   --size-radius-*  : border-radius steps
   --size-blur-*    : backdrop/filter blur values
   --size-depth-*   : positive/negative values for box-shadow offsets
   --size-stroke-*  : border and focus-ring widths
   --size-icon-*    : standard icon container sizes
   ============================================================ */
:root {
  --size-space-0: 0px;
  --size-space-050: 2px;
  --size-space-100: 4px;
  --size-space-150: 6px;
  --size-space-200: 8px;
  --size-space-300: 12px;
  --size-space-400: 16px;
  --size-space-600: 24px;
  --size-space-800: 32px;
  --size-space-1200: 48px;
  --size-space-1600: 64px;
  --size-space-2400: 96px;
  --size-space-4000: 160px;
  --size-space-negative-100: -4px;
  --size-space-negative-200: -8px;
  --size-space-negative-300: -12px;
  --size-space-negative-400: -16px;
  --size-space-negative-600: -24px;
  --size-space-negative-800: -32px;
  --size-space-negative-1000: -40px;
  --size-radius-0: 0px;
  --size-radius-100: 4px;
  --size-radius-200: 8px;
  --size-radius-400: 16px;
  --size-blur-050: 2px;
  --size-blur-100: 4px;
  --size-radius-full: 9999px;
  --size-depth-0: 0px;
  --size-depth-025: 1px;
  --size-depth-100: 4px;
  --size-depth-200: 8px;
  --size-depth-400: 16px;
  --size-depth-800: 32px;
  --size-depth-1200: 48px;
  --size-depth-negative-025: -1px;
  --size-depth-negative-100: -4px;
  --size-depth-negative-200: -8px;
  --size-depth-negative-400: -16px;
  --size-depth-negative-800: -32px;
  --size-depth-negative-1200: -48px;
  --size-stroke-border: 1px;
  --size-stroke-focus-ring: 2px;
  --size-icon-small: 24px;
  --size-icon-medium: 48px;
  --size-icon-large: 72px;
}


/* ============================================================
   BACKGROUND GRADIENT UTILITIES
   Apply directly to a section or panel element.
   ============================================================ */

.redblueGradient {
  background: linear-gradient(180deg, var(--color-teal-700-primary-brand) 0%, var(--color-blue-1000) 100%);
}

.bluesGradient {
  background: linear-gradient(0deg, var(--color-blue-1000) 0%, var(--color-blue-500) 100%);
}

.bluesGradientInverted {
  background: linear-gradient(0deg, var(--color-blue-500) 0%, var(--color-blue-1000) 100%);
}

.lightbluesGradient {
  background: linear-gradient(0deg, var(--color-blue-500) 0%, var(--color-blue-700) 100%);
}


/* ============================================================
   TEXT UTILITY CLASSES
   Composable type styles — apply the class to any element to set
   font-size, family, weight, and line-height in one shot.
   Naming convention:
     TitleHero / TitleDisplay / TitlePage  — page-level headings (40 / 32 / 28px)
     Subtitle / Heading                    — section-level hierarchy (24 / 20px)
     Subheading / SubheadingStrong         — sub-section labels (18px regular / bold)
     BodyBase / BodyBaseMedium / BodyStrong    — body copy (16px reg / semibold / bold)
     BodySmall / BodySmallMedium / BodySmallStrong   — supporting text (14px)
     BodyxSmall / BodyxSmallMedium / BodyxSmallStrong — legal/disclaimer (12px)
     BodyCode                              — monospace inline/block code
     SingleLine__*                         — same sizes but line-height:1
                                            (use for single-line UI labels)
   ============================================================ */

.TitleHero {
  font-size: var(--typography-scale-09)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.2!important;
}

.TitleDisplay {
  font-size: var(--typography-scale-08)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.1!important;
}

.TitlePage {
  font-size: var(--typography-scale-07)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.2!important;
}
.Subtitle {
  font-size: var(--typography-scale-06)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.2!important;
}

.Heading {
  font-size: var(--typography-scale-05)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1.2;
}
.Subheading {
  font-size: var(--typography-scale-04)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.2!important;
}
.SubheadingStrong {
  font-size: var(--typography-scale-04)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.2!important;
}

.BodyBase {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.4!important;
}
.BodyBaseMedium {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1.4!important;
}
.BodyStrong {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.4!important;
}

.BodySmall {
  font-size: var(--typography-scale-02)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.4!important;
}
.BodySmallMedium {
  font-size: var(--typography-scale-02)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1.4!important;
}
.BodySmallStrong {
  font-size: var(--typography-scale-02)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.4!important;
}

.BodyxSmall {
  font-size: var(--typography-scale-01)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.4!important;
}
.BodyxSmallMedium {
  font-size: var(--typography-scale-01)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1.4!important;
}
.BodyxSmallStrong {
  font-size: var(--typography-scale-01)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-bold)!important;
  line-height: 1.4!important;
}

.BodyCode {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-mono)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1.4!important;
}

.SingleLine__BodyBase {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1!important;
}
.SingleLine__BodyBaseMedium {
  font-size: var(--typography-scale-03)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1!important;
}

.SingleLine__BodySmall {
  font-size: var(--typography-scale-02)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-regular)!important;
  line-height: 1!important;
}
.SingleLine__BodySmallMedium {
  font-size: var(--typography-scale-02)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1!important;
}

.SingleLine__BodyxSmallMedium {
  font-size: var(--typography-scale-01)!important;
  font-family: var(--typography-family-sans)!important;
  font-weight: var(--typography-weight-semibold)!important;
  line-height: 1!important;
}

/* ============================================================
   PAGE LOADER
   Full-screen overlay shown until nim:ready + all builders complete.
   Prevents a flash of empty carousels / un-populated headings.
   ============================================================ */

@keyframes nim-spin {
  to { transform: rotate(360deg); }
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-white-1000);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity var(--transition-slow);
}

.page-loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.page-loader__logo {
  width: 140px;
}

.page-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-slate-200);
  border-top-color: var(--color-teal-700-primary-brand);
  border-radius: 50%;
  animation: nim-spin 0.75s linear infinite;
}

.page-loader__error {
  color: var(--color-slate-700);
  text-align: center;
  padding: 0 24px;
}

/* ============================================================
   SHADOW UTILITIES
   DropShadow__* — external box shadows, 100 (subtle) → 600 (heavy)
   InnerShadow__* — inset box shadows, same scale
   Blur__*        — backdrop/filter blur for overlays and glass panels
   ============================================================ */

.DropShadow__100 {
  box-shadow: var(--size-depth-0) var(--size-depth-025) var(--size-depth-100) var(--color-black-100);
}
.DropShadow__200 {
  box-shadow: var(--size-depth-0) var(--size-depth-025) var(--size-depth-100) var(--color-black-200);
}
.DropShadow__300 {
  box-shadow: var(--size-depth-0) var(--size-depth-100) var(--size-depth-100) var(--size-depth-negative-025) var(--color-black-100);
}
.DropShadow__400 {
  box-shadow: var(--size-depth-0) var(--size-depth-400) var(--size-depth-800) var(--size-depth-negative-100) var(--color-black-200);
}
.DropShadow__500 {
  box-shadow: var(--size-depth-0) var(--size-depth-400) var(--size-depth-400) var(--size-depth-negative-200) var(--color-black-200);
}
.DropShadow__600 {
  box-shadow: var(--size-depth-0) var(--size-depth-400) var(--size-depth-800) var(--size-depth-negative-200) var(--color-black-400);
}

/* --- Blur --- */

.Blur__Overlay {
  backdrop-filter: blur(var(--size-blur-050));
}
.Blur__Layer {
  filter: blur(var(--size-blur-050));
}
.Blur__Glass {
  backdrop-filter: blur(var(--size-blur-050));
}

/* --- Inner Shadow --- */

.InnerShadow__100 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-025) var(--size-depth-100) var(--color-black-100);
}
.InnerShadow__200 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-025) var(--size-depth-100) var(--color-black-100);
}
.InnerShadow__300 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-100) var(--size-depth-100) var(--size-depth-negative-025) var(--color-black-100);
}
.InnerShadow__400 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-400) var(--size-depth-800) var(--size-depth-negative-100) var(--color-black-200);
}
.InnerShadow__500 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-400) var(--size-depth-400) var(--size-depth-negative-200) var(--color-black-200);
}
.InnerShadow__600 {
  box-shadow: inset var(--size-depth-0) var(--size-depth-400) var(--size-depth-800) var(--size-depth-negative-200) var(--color-black-400);
}


/* ============================================================
   Breakpoints (reference — use in media queries in site CSS)
   sm  : max-width 479px   — small phones
   md  : 480px – 767px     — large phones / small tablets
   lg  : 768px – 1023px    — tablets / small laptops
   xl  : 1024px+           — desktop (primary layout)
   Main layout shift (1-col → multi-col) happens at 1024px.
   ============================================================ */

/* ============================================================
   TRANSITION & ANIMATION TOKENS
   --transition-fast     : hover states, small toggles
   --transition-base     : most interactive element state changes
   --transition-slow     : panels, modals, entry animations
   --transition-carousel : carousel slide — uses ease-in-out curve
   --carousel-gap        : consistent gap between carousel cards
   ============================================================ */
:root {
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;
  --transition-carousel: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  --carousel-gap: 16px;
}

/* ============================================================
   CONTENT CONTAINER
   Wrap section inner content in .container to cap width at 1152px
   and apply responsive padding. Full-bleed backgrounds should be
   on the section element; .container goes on the inner wrapper.
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 64px;
}

@media (max-width: 1279px) {
  .container { padding-inline: 48px; }
}

@media (max-width: 767px) {
  .container { padding-inline: 32px; }
}

@media (max-width: 479px) {
  .container { padding-inline: 24px; }
}

/* ============================================================
   ENTRY ANIMATIONS (IntersectionObserver-driven)
   1. Add .animate-on-enter to any element that should animate in on scroll.
   2. In JS, observe those elements and add .is-visible when intersecting.
   3. Use .is-visible--fade variant for opacity-only (no upward motion).
   Elements above the fold (TopNavBar, first Hero content) should NOT
   use this — they render immediately on page load.
   ============================================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-on-enter {
  opacity: 0;
}

.animate-on-enter.is-visible {
  animation: fadeSlideUp var(--transition-slow) forwards;
}

.animate-on-enter.is-visible--fade {
  animation: fadeIn var(--transition-slow) forwards;
}


/* Patch for loader logo */
.lottie-loading.peervoice.is-multicountry .logo img {
    display: inline!important;
}