/* ==========================================================================
   CIPRB Communication Design System
   Prototype tokens. These port directly to tailwind.config.js theme.extend
   in the Laravel 12 + Blade + Vite production build.
   Every text pair below is checked against WCAG 2.1 AA.
   ========================================================================== */

:root {
  /* --- Core brand -------------------------------------------------------
     CIPRB's existing blue is kept unchanged. It measures 8.1:1 on white,
     so the equity is retained and the accessibility is already sound.
     What is added is the system around it.                              */
  --c-navy:          #072B55;  /* 14.1:1 on white. Headings, footer.      */
  --c-navy-soft:     #0E3C6E;
  --c-blue:          #0C4DA2;  /*  8.1:1 on white. Primary. Unchanged.    */
  --c-blue-700:      #093E83;  /* hover / pressed                         */
  --c-sky:           #2E9BD6;  /*  3.1:1. Graphics + large type ONLY.     */
  --c-sky-50:        #EAF4FB;

  /* --- Action -----------------------------------------------------------
     Rescue orange. Orange reads rescue globally (lifejackets, lifeboats)
     and RNLI is CIPRB's flagship drowning partner. It also holds its own
     beside UNFPA orange, UNICEF cyan and WHO blue in co-branded layouts. */
  --c-action:        #C2541C;  /*  4.6:1 on white. Solid buttons, white text. */
  --c-action-bright: #E8702A;  /*  3.1:1. Icons, hover, display type.     */
  --c-action-50:     #FDF1EA;

  /* --- Neutrals ---------------------------------------------------------- */
  --c-ink:           #14202E;  /* 15.3:1 */
  --c-body:          #44546A;  /*  7.4:1 */
  --c-muted:         #64748B;  /*  4.8:1 */
  --c-line:          #DDE4EC;
  --c-line-soft:     #EDF1F6;
  --c-surface:       #F5F8FB;
  --c-white:         #FFFFFF;

  /* --- Programme colour coding ------------------------------------------
     Nine focus areas at matched lightness so they read as one family.
     Drives category chips, section accents and chart series. This is the
     communication layer the current site has no mechanism for.           */
  --p-drowning:   #0C4DA2;
  --p-maternal:   #A3366B;
  --p-road:       #A96700;
  --p-burn:       #C13B24;
  --p-nutrition:  #2E7D52;
  --p-ncd:        #6A4C93;
  --p-mental:     #1F7A8C;
  --p-disability: #3F51A3;
  --p-tropical:   #7C6D28;

  /* --- Type ---------------------------------------------------------------
     One superfamily. Noto Sans and Noto Sans Bengali are designed together,
     so Latin and Bangla share metrics. Bilingual by construction.         */
  --f-sans:   "Noto Sans", "Noto Sans Bengali", system-ui, sans-serif;
  --f-bangla: "Noto Sans Bengali", "Noto Sans", system-ui, sans-serif;

  /* --- Motion ------------------------------------------------------------- */
  --e-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:   160ms;
  --t-normal: 320ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-sans);
  color: var(--c-body);
  background: var(--c-white);
}

h1, h2, h3, h4 {
  color: var(--c-ink);
  text-wrap: balance;
  letter-spacing: -0.015em;
}

p, li { text-wrap: pretty; }

:lang(bn), .bn { font-family: var(--f-bangla); }

/* Numbers that update or sit in columns must not jitter. */
.tnum { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Accessibility (WCAG 2.1 AA)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--c-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  transition: top var(--t-fast) var(--e-smooth);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--c-action-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Minimum 44px hit area on icon-only controls. */
.hit {
  position: relative;
}
.hit::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1;
  transition-property: transform, background-color, box-shadow, color, border-color;
  transition-duration: var(--t-fast);
  transition-timing-function: ease-out;
}
.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--c-blue); color: #fff; }
.btn-primary:hover { background: var(--c-blue-700); }

.btn-action { background: var(--c-action); color: #fff; }
.btn-action:hover { background: #A64616; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

.btn-outline {
  border: 1.5px solid var(--c-line);
  color: var(--c-navy);
  background: #fff;
}
.btn-outline:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* --- Cards ---------------------------------------------------------------
   Concentric radius: outer = inner + padding. Cards never nest inside cards. */
.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  transition-property: transform, box-shadow, border-color;
  transition-duration: var(--t-normal);
  transition-timing-function: var(--e-smooth);
}
.card:hover {
  transform: translateY(-3px);
  border-color: #C8D5E4;
  box-shadow:
    0 1px 2px rgba(7, 43, 85, 0.04),
    0 8px 20px -6px rgba(7, 43, 85, 0.12),
    0 20px 40px -24px rgba(7, 43, 85, 0.18);
}

.card img { outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }

/* --- Programme chip ------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  background: color-mix(in srgb, currentColor 10%, white);
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Hero ---------------------------------------------------------------- */
.hero-scrim {
  background:
    linear-gradient(103deg,
      rgba(7, 23, 45, 0.94) 0%,
      rgba(7, 32, 62, 0.86) 38%,
      rgba(9, 45, 88, 0.52) 66%,
      rgba(12, 77, 162, 0.22) 100%);
}

/* Second scrim layer. Guarantees legibility at the top and bottom edges
   whatever photograph is dropped in behind it. */
.hero-scrim-v {
  background: linear-gradient(180deg,
    rgba(7, 23, 45, 0.70) 0%,
    rgba(7, 23, 45, 0.00) 24%,
    rgba(7, 23, 45, 0.00) 70%,
    rgba(7, 23, 45, 0.80) 100%);
}

.hero-img { object-position: 70% 42%; }

/* On a narrow screen the diagonal scrim spans too little width and flattens
   into a solid block, losing the photograph. Switch to a vertical ramp. */
@media (max-width: 767px) {
  .hero-img { object-position: 64% 34%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(7, 23, 45, 0.80) 0%,
      rgba(7, 23, 45, 0.70) 50%,
      rgba(7, 23, 45, 0.55) 100%);
  }
  .hero-scrim-v {
    background: linear-gradient(180deg,
      rgba(7, 23, 45, 0.45) 0%,
      rgba(7, 23, 45, 0.00) 26%,
      rgba(7, 23, 45, 0.00) 72%,
      rgba(7, 23, 45, 0.55) 100%);
  }
}

.hero-rule {
  width: 52px; height: 3px;
  background: var(--c-action-bright);
  border-radius: 2px;
}

/* --- Image crops ---------------------------------------------------------
   CIPRB's current slider assets are marketing banners with headline text
   baked into the image file. Until clean photography is supplied by CIPRB
   (TOR section 7, inputs from the client), these crops frame past the
   burnt-in type so the photograph can carry the page on its own.          */
.crop {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 700ms var(--e-smooth);
}
.crop-b { transform: scale(1.50); transform-origin: 50% 90%; }   /* text sits top */
.card:hover .crop-b { transform: scale(1.58); }

.crop-r { transform: scale(1.34); transform-origin: 88% 50%; }   /* text sits left */
.card:hover .crop-r { transform: scale(1.41); }

.crop-c { transform: scale(1.01); }
.card:hover .crop-c { transform: scale(1.07); }

/* --- Stat band ----------------------------------------------------------- */
.stat-value {
  font-size: clamp(2.1rem, 5vw, 3.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

/* --- Impact funnel ------------------------------------------------------- */
.funnel-step {
  position: relative;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
}
.funnel-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--c-sky-50);
  overflow: hidden;
}
.funnel-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-sky));
  width: 0;
  transition: width 1100ms var(--e-smooth);
}

/* --- Partner marquee ----------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.partner-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--t-normal) var(--e-smooth), opacity var(--t-normal) var(--e-smooth);
}
.partner-logo:hover { filter: grayscale(0); opacity: 1; }

/* --- Reveal on scroll ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition-property: opacity, transform;
  transition-duration: 620ms;
  transition-timing-function: var(--e-smooth);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Nav ----------------------------------------------------------------- */
.nav-link {
  position: relative;
  font-weight: 550;
  font-size: 0.925rem;
  color: var(--c-ink);
  padding: 0.5rem 0;
  transition: color var(--t-fast) ease-out;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal) var(--e-smooth);
}
.nav-link:hover { color: var(--c-blue); }
.nav-link:hover::after { transform: scaleX(1); }

.mega {
  box-shadow:
    0 1px 2px rgba(7, 43, 85, 0.05),
    0 18px 42px -12px rgba(7, 43, 85, 0.22);
}

/* --- Map ------------------------------------------------------------------
   No basemap tiles. The districts are the map, which keeps it fast, keeps
   the palette intact and avoids third-party tile attribution clutter.    */
.map-canvas {
  background: #fff;
  border-radius: 14px;
  outline: none;
}
.map-canvas .leaflet-container { background: #fff; font-family: var(--f-sans); }
.map-canvas path { transition: fill 420ms var(--e-smooth); cursor: pointer; }

.leaflet-tooltip.map-tip {
  background: var(--c-navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 10px 26px -8px rgba(7, 43, 85, 0.5);
  white-space: nowrap;
}
.leaflet-tooltip.map-tip span { color: rgba(255, 255, 255, 0.7); }
.leaflet-tooltip.map-tip::before { border-top-color: var(--c-navy); }

/* Filter chips on the map page */
.filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--c-ink);
  transition-property: border-color, background-color, box-shadow;
  transition-duration: var(--t-fast);
}
.filter:hover { border-color: #B9C9DC; background: var(--c-surface); }
.filter[aria-pressed="true"] {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(7, 43, 85, 0.45);
}
.filter .swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.filter .tally {
  margin-left: auto;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* --- Chatbot ------------------------------------------------------------- */
.bot-panel {
  box-shadow:
    0 2px 6px rgba(7, 43, 85, 0.08),
    0 24px 56px -14px rgba(7, 43, 85, 0.32);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .card:hover { transform: none; }
  .btn:active { transform: none; }
  .funnel-fill { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}