/*
 * Baggrundsgrafik til administrationen og Min konto: diskrete blå bølger i topbaren og øverst i indholdsområdet.
 * Slås til og fra ét sted: Models/LayoutTheme.cs (BackgroundArt). Er den slået fra, indlæses denne fil ikke.
 *
 * Billederne (wwwroot/img/backgrounds) er tegnet i ét fælles koordinatsystem, 1920 bredt: topbaren viser y = 0-80 og indholdet y = 80-480.
 * De to flader må derfor aldrig få hver sit vandrette nulpunkt eller sin egen skalering; begge højrejusteres og får samme bredde
 * (--celus-art-width), så bølgerne går i ét hen over samlingen. Er vinduet smallere end 1920 px, beskæres venstre side.
 *
 * Justering: farver og bølger står i SVG-filerne; højder, bredde og grundfarve står som variabler her. Topbarens højde (--header-height) står i tokens.css.
 * Topbaren maler selv sin del af billedet (den står altid øverst, så den flugter med den faste baggrund) og er derfor ugennemsigtig: indhold, der scroller,
 * skjules bag den. Indholdsdelen ligger på en fast baggrund (.celus-backdrop) bag indholdet.
 */
:root {
  --celus-art-width: max(1920px, 100%);
  --celus-wave-height: 400px;
  --celus-ground: #f4f7fa;
  /* Hvor langt billederne er trukket mod højre (ud over vinduets kant), så bølgerne sidder længere mod højre. 0 = billedernes egen placering. */
  --celus-art-shift: 150px;
}

@media (max-width: 767px) {
  :root { --celus-wave-height: 280px; }
}

/* Tabeloverskrifter: den lyseblå farve i stedet for standardens primary-subtle, så de stadig står tydeligt på de hvide kort ved siden af baggrundens blå farver. */
.celus-shell {
  /* --color-tint (tokens.css): den lyseblå, til tabeloverskrifter og det valgte menupunkt. Kontrast mod teksten (#1F3A52) ca. 9,1:1 (AA kræver 4,5:1, AAA 7:1). Tailwind skriver den ud, fordi sidemenuerne bruger bg-tint. */
  --table-header-bg: var(--color-tint);
}

/* Hele siden: grundfarven under bølgerne, og et eget lag, så den faste baggrund kan ligge bag indholdet uden at forsvinde bag siden. */
.celus-shell {
  isolation: isolate;
  background: var(--celus-ground);
}

.celus-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.celus-backdrop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-height);
  height: var(--celus-wave-height);
  /* Den lodrette farveovergang under billedet svarer til billedernes egen bundfarve (i SVG-filen); den fylder feltet til venstre, som skiftet efterlader. Ændres
     bundfarverne i SVG'en, skal de ændres her også. */
  background-image: url("../img/backgrounds/celus-main.svg"), linear-gradient(#edf5f9, #f4f7fa 58%);
  background-position: right calc(var(--celus-art-shift) * -1) top 0, 0 0;
  background-size: var(--celus-art-width) 100%, 100% 100%;
  background-repeat: no-repeat;
}

.celus-header {
  background-color: var(--celus-ground);
  background-image: url("../img/backgrounds/celus-header.svg"), linear-gradient(#eaf3f8, #edf5f9);
  background-position: right calc(var(--celus-art-shift) * -1) top 0, 0 0;
  background-size: var(--celus-art-width) 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Loginsidens formularside (Pages/Shared/_AuthLayout.cshtml): samme lyseblå farveovergang som under bølgerne i administrationen, men uden selve bølgerne. */
.celus-auth-pane {
  background-color: var(--celus-ground);
  background-image: linear-gradient(#edf5f9, #f4f7fa 58%);
}

/* Logoområdet i topbaren: ingen egen baggrund, kun afstanden til venstre kant. */
.celus-logo-zone {
  align-self: stretch;
  padding-inline: 1.75rem;
}

@media (max-width: 767px) {
  .celus-logo-zone { padding-inline: 1rem; }
}