/*
 * Final application-chrome boundary.
 *
 * This file is loaded after route and legacy styles. It keeps the header in
 * its own compositing layer and gives it an opaque daily-colour surface, so
 * route content can never bleed through it during the first paint or while a
 * fixed route surface scrolls underneath.
 */

:root {
  --cid-header-day-color: var(
    --cid-national-color,
    var(--redCross-bg, #1877f2)
  );
}

.site-header,
.site-header.hidden,
.site-header.is-scrolled {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  /* Above route surfaces, below payment/modal overlays. */
  z-index: 5000 !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: color-mix(
    in srgb,
    var(--cid-header-day-color) 13%,
    #ffffff 87%
  ) !important;
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--cid-header-day-color) 30%,
    #ffffff 70%
  ) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

.site-header.is-scrolled {
  background: color-mix(
    in srgb,
    var(--cid-header-day-color) 19%,
    #ffffff 81%
  ) !important;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .16) !important;
}

.site-header .header-inner,
.site-header .logo,
.site-header .actions,
.site-header #cidSectionContext {
  position: relative;
  z-index: 1;
}

/* All route surfaces stay below the persistent top chrome. */
#results,
#categoriesView,
#croixViewContainer,
#tableauxViewContainer,
#anticipationViewContainer,
#matrixCalculatorPanel,
#profileViewContainer,
#notificationCenter {
  z-index: 30 !important;
}

body[data-cid-dedicated-view="virtual-assistant"] .site-header {
  z-index: -1 !important;
}