/* ==========================================================================
   CS-NL Soft — staging redesign stylesheet (book-nook.citizenscience.nl)
   Ported from the CS-NL Soft design system handoff (design_handoff/).
   Loads AFTER bootstrap + theme.css and overrides both.

   Governing rule: soft relief signals interactivity.
   Raised = actionable · Pressed = input/selected · Flat = content.
   Light source is fixed top-left and never inverts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS (verbatim from design-system/tokens/*.css)
   -------------------------------------------------------------------------- */
:root {
  /* Brand — issue #186: Marina's CS-NL house-style palette
     (2A5E83 blue · EA6E52 coral · 3A8F8A teal · FBD58C yellow · EFA23A orange
      · F6F7F9 light · 2E3440 dark). Navy/coral keep their token names so the
     rest of the sheet is untouched; the exact swatches are --cs-navy-mid and
     --cs-coral, the darker/lighter steps are derived from them. */
  --cs-navy:          #234E6E;   /* headings: one step darker than the swatch */
  --cs-navy-mid:      #2A5E83;   /* swatch — links, solid buttons, active states */
  --cs-navy-light:    #4F7FA3;
  --cs-navy-pale:     #8FB1CB;
  --cs-ink:           #2E3440;   /* swatch — footer, deepest text */
  --cs-coral:         #EA6E52;   /* swatch — the one CTA colour */
  --cs-coral-dark:    #C8563C;
  --cs-coral-pale:    #F5B3A3;
  --cs-teal:          #3A8F8A;   /* swatch — accents, "active" status */
  --cs-yellow:        #FBD58C;   /* swatch — highlights */
  --cs-yellow-pale:   #FDEBC5;
  --cs-orange:        #EFA23A;   /* swatch — "upcoming" status, warm accents */

  /* Surfaces (cool light instead of warm paper) */
  --cs-paper:         #F6F7F9;   /* swatch */
  --cs-band:          #E4ECF3;
  --cs-band-border:   #CFDBE6;
  --cs-card:          #ffffff;
  --cs-chip:          #E8EEF3;
  --cs-divider:       #DFE4EA;
  --cs-divider-strong:#CBD3DC;

  /* Text (contrast measured against --cs-paper) */
  --cs-fg-1:          #2E3440;
  --cs-fg-2:          #464C58;
  --cs-fg-muted:      #5D6470;
  --cs-fg-on-card:    #6F7683; /* white surfaces only */
  --cs-fg-invert:     #ffffff;

  /* Status (dark enough to pass 4.5:1 as small bold text on white) */
  --cs-status-active:   #2F7A75; /* teal */
  --cs-status-upcoming: #A8650F; /* orange, darkened for contrast */
  --cs-status-done:     #6B7280;

  /* Type */
  --cs-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cs-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --cs-fw-regular: 400;
  --cs-fw-bold:    700;
  --cs-fs-display: 52px;
  --cs-fs-h1:      42px;
  --cs-fs-h2:      32px;
  --cs-fs-h3:      25px;
  --cs-fs-lead:    19px;
  --cs-fs-body:    17px;
  --cs-fs-md:      15px;
  --cs-fs-sm:      14px;
  --cs-fs-xs:      13px;
  --cs-fs-2xs:     12px;
  --cs-fs-micro:   11px;
  --cs-lh-tight: 1.12;
  --cs-lh-snug:  1.3;
  --cs-lh-base:  1.5;
  --cs-lh-loose: 1.65;
  --cs-ls-kicker: .06em;
  --cs-ls-label:  .08em;
  --cs-ls-eyebrow:.14em;

  /* Spacing / layout */
  --cs-s-1: 4px;  --cs-s-2: 8px;  --cs-s-3: 12px; --cs-s-4: 16px;
  --cs-s-5: 20px; --cs-s-6: 24px; --cs-s-8: 32px; --cs-s-10: 40px;
  --cs-s-12: 48px; --cs-s-16: 64px; --cs-s-20: 80px;
  --cs-container: 1180px;
  --cs-gutter:    5%;
  --cs-nav-h:     76px;
  --cs-section-y: 56px;
  --cs-card-pad:  17px;
  --cs-panel-pad: 22px;

  /* Elevation */
  --cs-raise:      8px 8px 18px rgba(42,94,131,.11), -8px -8px 18px rgba(255,255,255,.95);
  --cs-raise-sm:   5px 5px 12px rgba(42,94,131,.10), -5px -5px 12px rgba(255,255,255,.95);
  --cs-raise-cta:  6px 6px 14px rgba(200,86,60,.30), -6px -6px 14px rgba(255,255,255,.90);
  --cs-press:      inset 5px 5px 10px rgba(42,94,131,.09), inset -5px -5px 10px rgba(255,255,255,.90);
  --cs-press-sm:   inset 3px 3px 6px rgba(42,94,131,.08), inset -3px -3px 6px rgba(255,255,255,.90);
  --cs-raise-band: 8px 8px 18px rgba(42,94,131,.16), -8px -8px 18px rgba(255,255,255,.92);
  --cs-press-band: inset 6px 6px 12px rgba(42,94,131,.16), inset -6px -6px 12px rgba(255,255,255,.92);
  --cs-card-rest:  0 2px 8px rgba(42,94,131,.07);
  --cs-card-hover: 0 8px 22px rgba(42,94,131,.13);

  /* Radii */
  --cs-r-pill:  999px;
  --cs-r-tile:  20px;
  --cs-r-panel: 16px;
  --cs-r-card:  14px;
  --cs-r-check: 7px;
  --cs-r-sm:    4px;

  /* Motion */
  --cs-ease:     cubic-bezier(.4, 0, .2, 1);
  --cs-dur-fast: 120ms;
  --cs-dur-base: 200ms;
  --cs-dur-slow: 300ms;
  --cs-lift:     translateY(-2px);
}

/* Below 768px soft relief at full strength reads as blur — halve the offsets */
@media (max-width: 768px) {
  :root {
    --cs-raise:      4px 4px 9px rgba(42,94,131,.11), -4px -4px 9px rgba(255,255,255,.95);
    --cs-raise-sm:   3px 3px 6px rgba(42,94,131,.10), -3px -3px 6px rgba(255,255,255,.95);
    --cs-raise-cta:  3px 3px 7px rgba(200,86,60,.30), -3px -3px 7px rgba(255,255,255,.90);
    --cs-press:      inset 3px 3px 5px rgba(42,94,131,.09), inset -3px -3px 5px rgba(255,255,255,.90);
    --cs-press-sm:   inset 2px 2px 3px rgba(42,94,131,.08), inset -2px -2px 3px rgba(255,255,255,.90);
    --cs-raise-band: 4px 4px 9px rgba(42,94,131,.16), -4px -4px 9px rgba(255,255,255,.92);
    --cs-press-band: inset 3px 3px 6px rgba(42,94,131,.16), inset -3px -3px 6px rgba(255,255,255,.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cs-lift: none; }
  .cs-soft * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   2. BASE ELEMENT RESTYLE (overrides bootstrap + theme.css)
   -------------------------------------------------------------------------- */
body {
  background: var(--cs-paper) !important;
  font-family: var(--cs-font-sans) !important;
  color: var(--cs-fg-1);
  font-size: var(--cs-fs-body);
  line-height: var(--cs-lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-fw-regular);   /* headlines are REGULAR weight */
  color: var(--cs-navy);
  letter-spacing: -.01em;
}
h1, .h1 { font-size: var(--cs-fs-h1); line-height: var(--cs-lh-tight); }
h2, .h2 { font-size: var(--cs-fs-h2); }
h3, .h3 { font-size: var(--cs-fs-h3); }

a { color: var(--cs-navy-mid); text-decoration: none; }
a:hover { color: var(--cs-coral-dark); }

*:focus-visible { outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }

::placeholder { color: var(--cs-fg-muted); opacity: 1; }

/* --------------------------------------------------------------------------
   3. BUTTONS  (.cs-btn native + bootstrap .btn mapping)
   Shadows never animate — only fill/color changes on hover.
   -------------------------------------------------------------------------- */
.cs-btn,
.btn {
  display: inline-block;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  font-weight: var(--cs-fw-bold);
  padding: 13px 28px;
  border-radius: var(--cs-r-pill);
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--cs-dur-fast) var(--cs-ease), color var(--cs-dur-fast) var(--cs-ease);
  line-height: 1.2;
}
.cs-btn--sm, .btn-sm { padding: 11px 24px; font-size: var(--cs-fs-sm); }
.cs-btn--lg, .btn-lg { padding: 15px 34px; font-size: var(--cs-fs-body); }

/* primary — coral, one per view, coral-tinted raise */
.cs-btn--primary,
.btn-primary, .btn-outline-primary {
  background: var(--cs-coral);
  color: var(--cs-fg-invert);
  box-shadow: var(--cs-raise-cta);
  border: none;
}
.cs-btn--primary:hover, .cs-btn--primary:focus,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background: var(--cs-coral-dark);
  color: var(--cs-fg-invert);
  box-shadow: var(--cs-raise-cta);
}

/* secondary — paper, raised */
.cs-btn--secondary,
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-outline-info {
  background: var(--cs-paper);
  color: var(--cs-navy-mid);
  box-shadow: var(--cs-raise);
  border: none;
}
.cs-btn--secondary:hover, .cs-btn--secondary:focus,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-light:hover, .btn-outline-dark:hover, .btn-outline-info:hover {
  background: var(--cs-paper);
  color: var(--cs-coral-dark);
  box-shadow: var(--cs-raise);
}
.cs-btn--secondary.cs-on-band { background: var(--cs-band); box-shadow: var(--cs-raise-band); }

/* solid — navy fill, flat (used inside search fields) */
.cs-btn--solid,
.btn-dark, .btn-info {
  background: var(--cs-navy-mid);
  color: var(--cs-fg-invert);
  box-shadow: none;
  border: none;
}
.cs-btn--solid:hover, .btn-dark:hover, .btn-info:hover {
  background: var(--cs-navy);
  color: var(--cs-fg-invert);
}

/* quiet — text only */
.cs-btn--quiet,
.btn-link {
  background: transparent;
  color: var(--cs-navy-mid);
  box-shadow: none;
  padding: 10px 4px;
  text-decoration: none;
}
.cs-btn--quiet:hover, .btn-link:hover { color: var(--cs-coral-dark); background: transparent; }
.cs-btn--quiet.cs-btn--sm { padding: 8px 4px; }

.cs-btn:disabled, .cs-btn.disabled, .btn:disabled, .btn.disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. FIELDS — pressed-in inputs (.cs-field wrapper + bootstrap mapping)
   -------------------------------------------------------------------------- */
.cs-field {
  background: var(--cs-paper);
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-press);
  padding: 14px 22px;
}
.cs-field--area { border-radius: var(--cs-r-panel); padding: 14px 20px; }
.cs-field input, .cs-field textarea, .cs-field select {
  width: 100%;
  border: none; outline: none; background: transparent;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  color: var(--cs-navy);
  padding: 0;
  resize: vertical;
}
.cs-field:focus-within { outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }
.cs-label {
  display: block;
  font-size: var(--cs-fs-xs);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-fg-1);
  margin-bottom: 8px;
}
.cs-hint { display: block; margin-top: 7px; font-size: var(--cs-fs-2xs); color: var(--cs-fg-muted); }

/* Bootstrap-form mapping so existing (unrewritten) forms inherit the look.
   Excludes summernote's internal editor chrome. */
.form-control:not(.note-codable),
.form-select,
textarea.form-control {
  background: var(--cs-paper);
  border: none;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-press);
  padding: 12px 22px;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  color: var(--cs-navy);
}
textarea.form-control { border-radius: var(--cs-r-panel); }
.form-control:focus, .form-select:focus {
  background: var(--cs-paper);
  border: none;
  box-shadow: var(--cs-press);
  outline: 2px solid var(--cs-navy-mid);
  outline-offset: 2px;
  color: var(--cs-navy);
}
.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235F5F5F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.input-group .form-control { border-radius: var(--cs-r-pill); }
.input-group-text { background: transparent; border: none; }

/* checkboxes (bootstrap) — soft square with dark-coral check */
.form-check-input {
  width: 22px; height: 22px;
  border: none;
  border-radius: var(--cs-r-check);
  background-color: var(--cs-paper);
  box-shadow: var(--cs-raise-sm);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--cs-paper);
  box-shadow: var(--cs-press-sm);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23C95B3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.form-check-input:focus { box-shadow: var(--cs-raise-sm); outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }
.form-check-input:checked:focus { box-shadow: var(--cs-press-sm); }
.form-check-label { font-size: var(--cs-fs-md); color: var(--cs-fg-1); cursor: pointer; }

/* native cs checkbox row (filter rails) */
.cs-check {
  display: flex; align-items: center; gap: var(--cs-s-3);
  cursor: pointer; font-size: var(--cs-fs-md); color: var(--cs-fg-1);
}
.cs-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-check .cs-check__box {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--cs-r-check);
  background: var(--cs-paper);
  box-shadow: var(--cs-raise-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cs-fs-xs); font-weight: var(--cs-fw-bold);
  color: var(--cs-coral-dark);
}
.cs-check input:checked + .cs-check__box { box-shadow: var(--cs-press-sm); }
.cs-check .cs-check__box::after { content: ""; }
.cs-check input:checked + .cs-check__box::after { content: "✓"; }
.cs-check input:focus-visible + .cs-check__box { outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }
.cs-check .cs-check__label { flex: 1; }
.cs-check .cs-check__count { font-size: var(--cs-fs-sm); color: var(--cs-fg-muted); }

/* --------------------------------------------------------------------------
   5. SEARCH FIELD — pressed pill with optional solid submit
   -------------------------------------------------------------------------- */
.cs-search {
  display: flex; align-items: center; gap: var(--cs-s-3);
  background: var(--cs-paper);
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-press);
  padding: 5px 6px 5px 24px;
}
.cs-search--plain { padding: 5px 24px; }
.cs-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  color: var(--cs-navy);
  padding: 11px 0;
}
.cs-search input:focus { outline: none; box-shadow: none; }
.cs-search:focus-within { outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }
.cs-search--band { background: var(--cs-band); box-shadow: var(--cs-press-band); }

/* --------------------------------------------------------------------------
   6. PILLS & CHIPS
   -------------------------------------------------------------------------- */
.cs-sort-pill {
  background: var(--cs-paper);
  color: var(--cs-fg-1);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-sm);
  border: none;
  padding: 13px 24px;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-raise-sm);
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
}
.cs-sort-pill.is-active {
  box-shadow: var(--cs-press-sm);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy-mid);
}

.cs-chip, .badge.cs-chip {
  display: inline-block;
  background: var(--cs-chip);
  color: var(--cs-navy-mid);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-micro);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--cs-r-pill);
  line-height: 1.5;
}
a.cs-chip:hover { color: var(--cs-coral-dark); }
.cs-chip.is-pressed {
  background: var(--cs-paper);
  box-shadow: var(--cs-press-sm);
  font-weight: var(--cs-fw-bold);
  padding: 4px 11px;
}
.cs-chip--navy { background: var(--cs-navy-mid); color: #fff; }
.cs-chip--navy:hover { color: #fff; opacity: .92; }
.cs-chip--yellow { background: var(--cs-yellow); color: var(--cs-ink); }
.cs-chip--yellow:hover { color: var(--cs-ink); background: #F8CB76; }

/* generic bootstrap badge mapping */
.badge {
  background: var(--cs-chip);
  color: var(--cs-navy-mid);
  font-weight: 600;
  border-radius: var(--cs-r-pill);
  font-size: var(--cs-fs-micro);
  padding: 3px 10px;
}

.cs-status-pill {
  display: inline-block;
  background: rgba(255,255,255,.92);
  color: var(--cs-status-done);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-micro);
  font-weight: var(--cs-fw-bold);
  padding: 4px 12px;
  border-radius: var(--cs-r-pill);
}
.cs-status-pill--md { padding: 7px 18px; font-size: var(--cs-fs-xs); }
.cs-status-pill.is-active   { color: var(--cs-status-active); }
.cs-status-pill.is-upcoming { color: var(--cs-status-upcoming); }
.cs-status-pill.is-done     { color: var(--cs-status-done); }

.cs-lang-toggle {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--cs-paper);
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-press-sm);
  padding: 8px 16px;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-xs);
  color: var(--cs-fg-muted);
}
.cs-lang-toggle button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
  color: var(--cs-fg-muted); font-weight: var(--cs-fw-regular);
}
.cs-lang-toggle button.is-active { color: var(--cs-navy-mid); font-weight: var(--cs-fw-bold); }

/* --------------------------------------------------------------------------
   7. PANELS — filter rail, quick facts, stat tiles
   -------------------------------------------------------------------------- */
.cs-filter-panel {
  background: var(--cs-paper);
  border-radius: var(--cs-r-panel);
  padding: var(--cs-panel-pad);
  box-shadow: inset 4px 4px 10px rgba(42,94,131,.07), inset -4px -4px 10px rgba(255,255,255,.85);
}
.cs-filter-panel__title {
  margin: 0 0 var(--cs-s-4);
  font-size: var(--cs-fs-xs);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cs-filter-panel__body { display: flex; flex-direction: column; gap: var(--cs-s-3); }

.cs-quickfacts {
  background: var(--cs-paper);
  border-radius: var(--cs-r-tile);
  padding: 24px 26px;
  box-shadow: var(--cs-raise);
}
.cs-quickfacts__title {
  margin: 0 0 var(--cs-s-4);
  font-size: var(--cs-fs-2xs);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--cs-ls-label);
}
.cs-quickfacts__row {
  margin: 0 0 11px;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--cs-fs-md);
}
.cs-quickfacts__row span { color: var(--cs-fg-2); }
.cs-quickfacts__row b { color: var(--cs-navy); text-align: right; }
.cs-quickfacts__action { margin-top: var(--cs-s-5); }
.cs-quickfacts__action .cs-btn, .cs-quickfacts__action .btn { width: 100%; }

.cs-stat-tile {
  display: block;
  background: var(--cs-paper);
  border-radius: var(--cs-r-tile);
  padding: 22px 26px;
  box-shadow: var(--cs-raise);
  cursor: pointer;
  text-decoration: none;
}
.cs-stat-tile__value {
  display: block;
  font-size: 40px; line-height: 1;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy-mid);
}
.cs-stat-tile--coral .cs-stat-tile__value { color: var(--cs-coral); }
.cs-stat-tile__label { display: block; margin-top: 8px; font-size: var(--cs-fs-md); color: var(--cs-fg-2); }
.cs-stat-tile__caption { display: block; margin-top: 6px; font-size: var(--cs-fs-2xs); color: var(--cs-fg-muted); line-height: var(--cs-lh-base); }
.cs-stat-tile:hover .cs-stat-tile__label { color: var(--cs-coral-dark); }

/* --------------------------------------------------------------------------
   8. CARDS — flat white content cards (+ bootstrap .card mapping)
   -------------------------------------------------------------------------- */
.cs-card, .card {
  background: var(--cs-card);
  border: none;
  border-radius: var(--cs-r-card);
  box-shadow: var(--cs-card-rest);
}
.cs-card { padding: var(--cs-panel-pad); }
.cs-card--pad0 { padding: 0; overflow: hidden; }
a.cs-card { display: block; color: inherit; }
.cs-card.is-clickable, a.cs-card {
  transition: transform var(--cs-dur-base) var(--cs-ease), box-shadow var(--cs-dur-base) var(--cs-ease);
  cursor: pointer;
}
.cs-card.is-clickable:hover, a.cs-card:hover {
  box-shadow: var(--cs-card-hover);
  transform: var(--cs-lift);
  color: inherit;
}

/* project card */
.cs-pcard {
  background: var(--cs-card);
  border-radius: var(--cs-r-card);
  overflow: hidden;
  box-shadow: var(--cs-card-rest);
  transition: transform var(--cs-dur-base) var(--cs-ease), box-shadow var(--cs-dur-base) var(--cs-ease);
  display: block;
  color: inherit;
  font-family: var(--cs-font-sans);
}
a.cs-pcard:hover, .cs-pcard.is-clickable:hover {
  box-shadow: var(--cs-card-hover);
  transform: var(--cs-lift);
  color: inherit;
}
.cs-pcard__media {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--cs-chip);
  background-size: cover;
  background-position: center;
}
.cs-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pcard__media .cs-status-pill { position: absolute; top: 10px; left: 10px; }
.cs-pcard__body { padding: var(--cs-s-4) var(--cs-card-pad) var(--cs-card-pad); }
.cs-pcard__org {
  margin: 0;
  font-size: var(--cs-fs-micro);
  color: var(--cs-fg-on-card);
  text-transform: uppercase;
  letter-spacing: var(--cs-ls-kicker);
}
.cs-pcard__title {
  margin: 5px 0 0;
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy-mid);
  line-height: var(--cs-lh-snug);
}
.cs-pcard__date { margin: 6px 0 0; font-size: var(--cs-fs-2xs); color: var(--cs-fg-on-card); }
.cs-pcard__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--cs-s-3); }
.cs-pcard__summary { margin: var(--cs-s-3) 0 0; font-size: var(--cs-fs-xs); color: var(--cs-fg-2); line-height: var(--cs-lh-base); }
.cs-pcard__meta {
  display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid #eee;
  margin-top: var(--cs-s-3);
  padding-top: 10px;
  font-size: var(--cs-fs-2xs);
  color: var(--cs-fg-on-card);
}
.cs-pcard__meta b { color: var(--cs-navy-mid); font-weight: var(--cs-fw-bold); }

/* event card */
.cs-event {
  display: flex; gap: var(--cs-s-4); align-items: flex-start;
  background: var(--cs-card);
  border: 1px solid var(--cs-divider);
  border-radius: var(--cs-r-card);
  padding: 18px 20px;
  font-family: var(--cs-font-sans);
  color: inherit;
}
a.cs-event:hover { color: inherit; box-shadow: var(--cs-card-rest); }
.cs-event__date {
  flex-shrink: 0; text-align: center;
  background: var(--cs-chip);
  border-radius: var(--cs-r-sm);
  padding: 8px 12px;
  min-width: 54px;
}
.cs-event__month { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-fg-muted); }
.cs-event__day { display: block; font-size: 24px; line-height: 1.1; font-weight: var(--cs-fw-bold); color: var(--cs-coral-dark); }
.cs-event__year { display: block; font-size: 10px; color: var(--cs-fg-muted); }
.cs-event__place { display: block; font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-bold); text-transform: uppercase; letter-spacing: var(--cs-ls-kicker); color: var(--cs-coral-dark); }
.cs-event__title { display: block; margin-top: 5px; font-size: var(--cs-fs-md); font-weight: var(--cs-fw-bold); line-height: var(--cs-lh-snug); color: var(--cs-navy); }
.cs-event__summary { display: block; margin-top: 5px; font-size: var(--cs-fs-2xs); line-height: var(--cs-lh-base); color: var(--cs-fg-2); }
/* inverted variant on the navy band */
.cs-event--band { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.cs-event--band .cs-event__date { background: rgba(255,255,255,.12); }
.cs-event--band .cs-event__month { color: rgba(255,255,255,.7); }
.cs-event--band .cs-event__day { color: var(--cs-coral-pale); }
.cs-event--band .cs-event__year { color: rgba(255,255,255,.55); }
.cs-event--band .cs-event__place { color: var(--cs-coral-pale); }
.cs-event--band .cs-event__title { color: var(--cs-fg-invert); }
.cs-event--band .cs-event__summary { color: rgba(255,255,255,.65); }

/* --------------------------------------------------------------------------
   9. PAGE FURNITURE — container, hero band, section head, fact rail, prose
   -------------------------------------------------------------------------- */
.cs-container {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding: 0 var(--cs-gutter);
  box-sizing: border-box;
}

.cs-hero {
  background: linear-gradient(180deg, var(--cs-band) 0%, var(--cs-band) 82%, #EAF0F5 100%);
  border-bottom: 1px solid var(--cs-band-border);
  padding: 30px 0 44px;
}
.cs-hero--compact { padding: 26px 0 30px; }
.cs-hero__row { display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap; }
.cs-hero__main { flex: 1; min-width: min(420px, 100%); }
.cs-eyebrow {
  margin: 0 0 10px;
  font-size: var(--cs-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--cs-ls-eyebrow);
  color: var(--cs-navy-light);
  font-weight: var(--cs-fw-bold);
}
.cs-hero h1, .cs-hero .cs-h1 {
  margin: 0;
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-regular);
  line-height: var(--cs-lh-tight);
  color: var(--cs-navy);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.cs-hero--display h1 { font-size: var(--cs-fs-display); letter-spacing: -.015em; }
.cs-lead {
  margin: 16px 0 0;
  font-size: var(--cs-fs-lead);
  line-height: var(--cs-lh-loose);
  color: var(--cs-fg-2);
  max-width: 660px;
  text-wrap: pretty;
}

.cs-breadcrumb {
  margin: 0 0 18px;
  font-size: var(--cs-fs-sm);
  color: var(--cs-fg-muted);
}
.cs-breadcrumb a { color: var(--cs-navy-mid); }
.cs-breadcrumb a:hover { color: var(--cs-coral-dark); }
.cs-breadcrumb .cs-breadcrumb__sep { margin: 0 8px; }
.cs-breadcrumb .is-current { color: var(--cs-fg-2); }

.cs-section { padding-top: var(--cs-section-y); }
.cs-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: var(--cs-s-6);
}
.cs-section-head h2 {
  margin: 0;
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-regular);
  color: var(--cs-navy);
  letter-spacing: -.01em;
}

.cs-key-label {
  margin: 0;
  font-size: var(--cs-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--cs-ls-label);
  color: var(--cs-fg-muted);
  font-weight: var(--cs-fw-bold);
}
.cs-card .cs-key-label, .cs-pcard .cs-key-label { color: var(--cs-fg-on-card); }

.cs-fact-rail {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--cs-divider);
  border-bottom: 1px solid var(--cs-divider);
}
.cs-fact-rail__cell {
  padding: 18px 30px 18px 0;
  margin-right: 30px;
  border-right: 1px solid var(--cs-divider);
  min-width: 150px;
}
.cs-fact-rail__cell:last-child { border-right: none; margin-right: 0; }
.cs-fact-rail__value {
  margin: 7px 0 0;
  font-size: var(--cs-fs-md);
  color: var(--cs-navy);
  font-weight: var(--cs-fw-bold);
}

.cs-prose { max-width: 680px; }
.cs-prose p { margin: 0 0 18px; font-size: var(--cs-fs-body); line-height: var(--cs-lh-loose); color: var(--cs-fg-1); text-wrap: pretty; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose h2, .cs-prose h3, .cs-prose h4 { margin: 28px 0 14px; }
.cs-prose ul, .cs-prose ol { margin: 0 0 18px; padding-left: 22px; font-size: var(--cs-fs-body); line-height: var(--cs-lh-loose); color: var(--cs-fg-1); }
.cs-prose img { max-width: 100%; height: auto; border-radius: var(--cs-r-card); }
.cs-prose table { max-width: 100%; }

.cs-empty { text-align: center; padding: 70px 20px; }
.cs-empty__title { margin: 0; font-size: var(--cs-fs-h3); font-weight: var(--cs-fw-regular); color: var(--cs-navy); }
.cs-empty__note { margin: 10px 0 22px; font-size: var(--cs-fs-md); color: var(--cs-fg-muted); }

/* --------------------------------------------------------------------------
   10. LAYOUT GRIDS — every track minmax(0,1fr); plain 1fr overflows
   -------------------------------------------------------------------------- */
.cs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-s-5); }
.cs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-s-5); }
.cs-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cs-s-5); }

/* directory: facet rail + results */
.cs-directory {
  display: grid;
  /* issue #232 follow-up: was minmax(190px, 250px) — too narrow once the
     rail also carries the relocated Sort-by panel, made each facet <select>
     feel cramped and pushed users into more scrolling than before. */
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: var(--cs-s-10);
  align-items: start;
}
.cs-directory__rail {
  display: flex; flex-direction: column; gap: var(--cs-s-3);
  position: sticky; top: 20px;
}
/* issue #232 follow-up: the rail now stacks Sort-by alongside every facet
   panel (Status, Topic, Tags, More filters, Moderation). Tighten padding
   here only — not the shared --cs-panel-pad token, which .cs-card also
   uses elsewhere on the site — so fewer scrolls are needed to reach the
   bottom of the rail. */
.cs-directory__rail .cs-filter-panel { padding: 16px 18px; }
.cs-directory__rail .cs-filter-panel__body { gap: var(--cs-s-2); }
.cs-directory__tools {
  display: flex; gap: var(--cs-s-4); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--cs-s-6);
}
.cs-directory__tools .cs-search { flex: 1; min-width: 200px; }
.cs-directory__count { margin: 0 0 var(--cs-s-5); font-size: var(--cs-fs-sm); color: var(--cs-fg-muted); }

/* detail: content + sticky sidebar */
.cs-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--cs-s-16);
  align-items: start;
}
.cs-detail__side {
  display: flex; flex-direction: column; gap: var(--cs-s-5);
  position: sticky; top: 20px;
}

@media (max-width: 1080px) {
  .cs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cs-directory { grid-template-columns: minmax(0, 1fr); gap: var(--cs-s-5); }
  .cs-directory__rail { position: static; flex-direction: column; }
  /* issue #182: the rail collapses behind one button on phones (JS in base_r2.html) */
  .cs-directory__rail.cs-rail--collapsible > .cs-filter-panel { display: none; }
  .cs-directory__rail.cs-rail--collapsible.is-open > .cs-filter-panel { display: block; }
  .cs-directory__rail.cs-rail--collapsible.is-open .cs-rail__chev { transform: rotate(180deg); }
  .cs-rail__toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .cs-rail__chev { font-size: 11px; transition: transform var(--cs-dur-base) var(--cs-ease); }
  .cs-detail { grid-template-columns: minmax(0, 1fr); gap: var(--cs-s-8); }
  /* issue #182: key facts + the page's action come before the long prose on phones */
  .cs-detail__side { position: static; order: -1; }
  .cs-fact-rail__cell { min-width: 0; flex: 1 1 40%; padding-right: 16px; margin-right: 16px; }
  .cs-hero__row { gap: 20px; }
}
@media (min-width: 901px) {
  .cs-rail__toggle { display: none; }
}
@media (max-width: 640px) {
  .cs-grid-4, .cs-grid-3, .cs-grid-2 { grid-template-columns: minmax(0, 1fr); }
  :root { --cs-fs-display: 36px; --cs-fs-h1: 30px; --cs-fs-h2: 25px; --cs-fs-h3: 21px;
          --cs-fs-lead: 17px; --cs-section-y: 40px; --cs-gutter: 5.5%; }
  .cs-hero { padding: 22px 0 30px; }
  .cs-hero--compact { padding: 18px 0 22px; }
  .cs-stat-tile { padding: 18px 20px; }
  .cs-stat-tile__value { font-size: 32px; }
  .cs-join-band { padding: 28px 22px; }
  .cs-quickfacts { padding: 20px 20px; }
  .cs-fact-rail__cell { flex: 1 1 100%; border-right: none; margin-right: 0; padding: 12px 0; border-bottom: 1px solid var(--cs-divider); }
  .cs-fact-rail__cell:last-child { border-bottom: none; }
  .cs-section-head { flex-wrap: wrap; gap: 8px 16px; }
  .cs-footer__cols { gap: 28px 40px; }
  .cs-footer { padding: 34px var(--cs-gutter) 24px; }
}

/* --------------------------------------------------------------------------
   11. HEADER (flat white) + EU band + FOOTER (ink) + join band
   -------------------------------------------------------------------------- */
.cs-header {
  background: var(--cs-card);
  border-bottom: 1px solid var(--cs-divider);
  min-height: var(--cs-nav-h);
  font-family: var(--cs-font-sans);
  transition: transform var(--cs-dur-slow) var(--cs-ease);
}
/* Hide-on-scroll: JS toggles this once the user scrolls past the header height */
.cs-header.cs-header--hidden { transform: translateY(-100%); }
.cs-header .navbar-brand img { height: 42px; display: block; }
.cs-header .cs-nav-link {
  background: none; border: none;
  font-size: var(--cs-fs-md);
  font-weight: var(--cs-fw-regular);
  color: var(--cs-fg-1);
  border-bottom: 3px solid transparent;
  padding: 24px 2px 21px;
  white-space: nowrap;
  display: inline-block;
}
.cs-header .cs-nav-link:hover { color: var(--cs-navy-mid); }
.cs-header .cs-nav-link.is-active, .cs-header .cs-nav-link.active {
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy-mid);
  border-bottom-color: var(--cs-navy-mid);
}
.cs-header .dropdown-menu {
  background: var(--cs-card);
  border: none;
  border-radius: var(--cs-r-panel);
  box-shadow: var(--cs-raise);
  padding: 8px;
}
.cs-header .dropdown-item {
  border-radius: var(--cs-r-card);
  padding: 10px 14px;
  font-size: var(--cs-fs-md);
  color: var(--cs-navy-mid);
  font-weight: var(--cs-fw-bold);
}
.cs-header .dropdown-item:hover { background: var(--cs-chip); color: var(--cs-navy-mid); }
.cs-header__right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* collapsed header search */
.cs-header .cs-search { width: 230px; padding: 0 6px 0 18px; }
@media (max-width: 991.98px) {
  /* issue #182: inside the hamburger menu the search spans the row and the
     language / login cluster sits under it, left-aligned like the nav links */
  .cs-header .cs-search { width: 100%; margin: 4px 0 2px; }
  .cs-header__right { justify-content: flex-start; gap: 10px; padding-bottom: 6px; }
  .cs-header .cs-nav-link { padding: 12px 2px 10px; }
  .cs-header .navbar-collapse { padding-top: 6px; }
}
.cs-header .cs-search input { padding: 8px 0; }
.cs-header__search-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Floating search bubble — stands in for the header search once the header
   has scrolled away. Sits outside .cs-header in the DOM so its fixed
   positioning stays relative to the viewport, not the transformed header. */
.cs-float-search {
  position: fixed;
  top: var(--cs-s-4);
  right: var(--cs-s-5);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* The container itself must NEVER catch clicks: while the widget is hidden
     it is an invisible fixed box sitting on top of the header's language
     toggle and Login button. Children re-enable pointer-events via
     .is-visible / .is-open. */
  pointer-events: none;
}
.cs-float-search__bubble {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, var(--cs-card) 45%, var(--cs-band) 100%);
  box-shadow: var(--cs-raise);
  color: var(--cs-navy-mid);
  font-size: 17px;
  cursor: pointer;
  opacity: 0;
  transform: scale(.3) translate(28px, -28px);
  pointer-events: none;
  transition: opacity var(--cs-dur-slow) var(--cs-ease),
              transform var(--cs-dur-slow) var(--cs-ease),
              box-shadow var(--cs-dur-base) var(--cs-ease);
}
.cs-float-search__bubble:hover { box-shadow: var(--cs-raise-cta); color: var(--cs-coral-dark); }
.cs-float-search.is-visible .cs-float-search__bubble {
  opacity: 1;
  transform: scale(1) translate(0, 0);
  pointer-events: auto;
}

.cs-float-search__panel {
  display: flex; align-items: center; gap: var(--cs-s-2);
  margin-top: var(--cs-s-3);
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--cs-card);
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-raise);
  padding: 5px 6px 5px 20px;
  opacity: 0;
  transform-origin: top right;
  transform: translateY(-8px) scale(.96);
  pointer-events: none;
  transition: opacity var(--cs-dur-base) var(--cs-ease), transform var(--cs-dur-base) var(--cs-ease);
}
.cs-float-search.is-open .cs-float-search__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cs-float-search__panel input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  color: var(--cs-navy);
  padding: 10px 0;
}
.cs-float-search__submit {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cs-navy-mid);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.cs-float-search__submit:hover { background: var(--cs-navy); }

.cs-eu-band { background: var(--cs-chip); padding: 20px var(--cs-gutter); }
.cs-eu-band__inner {
  max-width: var(--cs-container); margin: 0 auto;
  display: flex; gap: 18px; align-items: center;
}
.cs-eu-band__star {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cs-navy);
  color: var(--cs-yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.cs-eu-band p {
  font-size: var(--cs-fs-2xs);
  color: var(--cs-fg-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 900px;
}

.cs-footer {
  background: var(--cs-ink) !important;
  padding: 46px var(--cs-gutter) 30px;
  font-family: var(--cs-font-sans);
}
.cs-footer__inner { max-width: var(--cs-container); margin: 0 auto; }
.cs-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.cs-footer__brand { flex: 1; min-width: 280px; }
.cs-footer__brand img { height: 38px; display: block; filter: brightness(0) invert(1); opacity: .9; }
.cs-footer__brand p { font-size: var(--cs-fs-2xs); color: #8fa3bd; margin: 12px 0 0; line-height: 1.6; max-width: 320px; }
.cs-footer__col { display: flex; flex-direction: column; gap: 9px; min-width: 150px; }
.cs-footer__col b {
  color: #fff;
  font-size: var(--cs-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--cs-fw-bold);
}
.cs-footer__col a { font-size: var(--cs-fs-xs); color: rgba(255,255,255,.72); }
.cs-footer__col a:hover { color: #fff; }
.cs-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 34px; padding-top: 18px;
  font-size: var(--cs-fs-2xs);
  color: #8fa3bd;
}
.cs-footer__legal a { color: #8fa3bd; }
.cs-footer__legal a:hover { color: #fff; }

.cs-join-band {
  background: var(--cs-chip);
  border-radius: var(--cs-r-tile);
  padding: 44px 48px;
  display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}
.cs-join-band > div:first-child { flex: 1; min-width: min(380px, 100%); }
.cs-join-band h2 { margin: 0; }
.cs-join-band p { margin: 12px 0 0; font-size: var(--cs-fs-body); line-height: var(--cs-lh-loose); color: var(--cs-fg-2); max-width: 560px; }
.cs-join-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* navy events band (home) */
.cs-navy-band { background: var(--cs-navy); padding: 52px 0 56px; }
.cs-navy-band h2 { color: #fff; margin: 0; font-size: var(--cs-fs-h2); font-weight: var(--cs-fw-regular); letter-spacing: -.01em; }
.cs-navy-band .cs-btn--quiet { color: var(--cs-coral-pale); }
.cs-navy-band .cs-btn--quiet:hover { color: #fff; }

/* home hero grid (design: two-column, art overhangs) */
.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  gap: var(--cs-s-12);
  align-items: center;
}
.cs-hero-art { height: 430px; position: relative; }
.cs-hero-art canvas { display: block; position: absolute; inset: -26px; pointer-events: none; }
@media (max-width: 1080px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-hero-art { height: 360px; width: min(440px, 100%); justify-self: center; order: 2; }
}
@media (max-width: 640px) {
  /* issue #182: the decorative mark should not cost a whole phone screen */
  .cs-hero-art { height: 220px; width: min(260px, 100%); }
}

/* --------------------------------------------------------------------------
   12. PAGINATION (bootstrap mapping)
   -------------------------------------------------------------------------- */
.pagination { gap: 8px; }
.pagination .page-link {
  background: var(--cs-paper);
  border: none;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-raise-sm);
  color: var(--cs-navy-mid);
  font-size: var(--cs-fs-sm);
  padding: 10px 18px;
}
.pagination .page-item.active .page-link {
  background: var(--cs-paper);
  box-shadow: var(--cs-press-sm);
  color: var(--cs-navy-mid);
  font-weight: var(--cs-fw-bold);
}
.pagination .page-item.disabled .page-link { opacity: .45; box-shadow: none; }
.pagination .page-link:focus { box-shadow: var(--cs-raise-sm); }

/* --------------------------------------------------------------------------
   13. GUARDS — leave embedded widgets alone
   -------------------------------------------------------------------------- */
/* Leaflet maps: keep their own chrome and heights */
.leaflet-container, .leaflet-container * { font-family: inherit; }
.leaflet-container .leaflet-control a { box-shadow: none; border-radius: 4px; padding: initial; }
/* Select2: only round the outer box, keep internals */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--cs-paper);
  border: none;
  border-radius: var(--cs-r-panel);
  box-shadow: var(--cs-press-sm);
  min-height: 42px;
}
/* Summernote toolbar buttons must not become pills */
.note-editor .btn { border-radius: 4px; box-shadow: none; padding: 5px 10px; background: #fff; color: var(--cs-fg-1); font-weight: 400; }
.note-editor .note-editable { background: #fff; }
/* Modals stay bootstrap but flat-card look */
.modal-content { border: none; border-radius: var(--cs-r-panel); box-shadow: var(--cs-card-hover); }

/* alerts */
.alert { border: none; border-radius: var(--cs-r-panel); box-shadow: var(--cs-card-rest); }

/* forced-colors: soft shadows drop, borders return */
@media (forced-colors: active) {
  .cs-btn, .btn, .cs-field, .cs-search, .cs-sort-pill, .cs-filter-panel,
  .cs-quickfacts, .cs-stat-tile, .form-control, .form-select, .cs-check__box {
    border: 1px solid ButtonBorder !important;
    box-shadow: none !important;
  }
  .cs-card, .card, .cs-pcard, .cs-event { border: 1px solid CanvasText !important; box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   14. HEADER HARDENING — wins over legacy theme.css rules that carry
   !important (.nav-link colors) or higher specificity (.nav-item.dropdown
   .dropdown-menu dark background). Scoped to .cs-header only.
   -------------------------------------------------------------------------- */
.cs-header .nav-link,
.cs-header .cs-nav-link {
  color: var(--cs-fg-1) !important;
  border-bottom: 3px solid transparent !important;
}
.cs-header .nav-link:hover,
.cs-header .cs-nav-link:hover {
  color: var(--cs-navy-mid) !important;
  border-bottom: 3px solid transparent !important;
}
.cs-header .cs-nav-link.is-active,
.cs-header .cs-nav-link.active {
  color: var(--cs-navy-mid) !important;
  font-weight: var(--cs-fw-bold);
  border-bottom: 3px solid var(--cs-navy-mid) !important;
}
.cs-header .dropdown-toggle { cursor: pointer; }
.cs-header .navbar-toggler { cursor: pointer; }
.cs-header .dropdown-menu,
.cs-header .nav-item.dropdown .dropdown-menu {
  background: var(--cs-card) !important;
  border: none;
}
.cs-header .dropdown-item,
.cs-header .nav-item.dropdown .dropdown-item {
  display: block;
  width: 100%;
  color: var(--cs-navy-mid) !important;
  background: transparent !important;
}
.cs-header .dropdown-item:hover,
.cs-header .dropdown-item:focus,
.cs-header .nav-item.dropdown .dropdown-item:hover,
.cs-header .nav-item.dropdown .dropdown-item:focus {
  color: var(--cs-navy-mid) !important;
  background: var(--cs-chip) !important;
}
.cs-header .dropdown-menu li { list-style: none; }