/* Whatsnew-sider (docs/Nyheder/Whatsnew).
   Siden aabnes som popup inde i KeyBalance-klienten: ingen guide-menu,
   ingen topbjaelke, og indholdet skal kunne staa i et vindue uden at hele
   siden skal rulles. Farverne er logoets petrolblaa #356977.
   Alt er scopet til .wn-* klasser, saa ingen andre sider i guiden paavirkes.

   Selve boksen og de to kolonner ligger i style-blokken i selve siden -
   ikke her. Se WHATSNEW.md. */

:root {
  --wn-brand: #356977;
  --wn-brand-dark: #24505c;
  --wn-brand-mid: #498a9a;
  --wn-brand-soft: #90aab1;
  --wn-brand-pale: #eef3f4;
  --wn-accent: #db9421;
  --wn-hairline: #dbe4e6;
}

/* --- Sidehoved ------------------------------------------------------- */
.wn-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  padding-bottom: .8rem;
  border-bottom: .12rem solid var(--wn-brand);
  margin-bottom: 1rem;
}
.md-typeset .wn-logo {
  height: 1.35rem;
  width: auto;
  margin-right: .2rem;
}
.wn-title {
  font-size: 1.16rem;
  font-weight: 300;
  color: var(--wn-brand-dark);
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* Versionen som maerkat */
.wn-eyebrow {
  display: inline-block;
  background: var(--wn-brand-pale);
  border: 1px solid #cfdde0;
  border-radius: 2rem;
  padding: .15rem .55rem;
  color: var(--wn-brand);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Kort ------------------------------------------------------------ */
.md-typeset .wn-cards > ul {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: .7rem;
  gap: .7rem;
  margin: .6rem 0;
}
.md-typeset .wn-cards > ul > li {
  border: 1px solid var(--wn-hairline);
  border-radius: .2rem;
  box-shadow: none;
  padding: .9rem 1rem;
  margin: 0;
  transition: border-color .2s;
}
.md-typeset .wn-cards > ul > li:hover {
  border-color: var(--wn-brand-soft);
  box-shadow: none;
}
/* Overskriftslinjen: ikonflise + titel */
.md-typeset .wn-cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .83rem;
  font-weight: 700;
  color: var(--wn-brand-dark);
  margin-bottom: .1rem;
}
/* Flisen goer at kortene ser designede ud i stedet for listede */
.md-typeset .wn-cards .twemoji {
  flex: 0 0 auto;
  /* Material saetter selv height: 1.125em paa .twemoji. Med border-box aad
     polstringen hele ikonet, saa der kun var ca. 8px tilbage til glyffen. */
  height: auto;
  width: auto;
  box-sizing: content-box;
  background: var(--wn-brand-pale);
  border-radius: .35rem;
  padding: .35rem;
  line-height: 0;
  margin: 0;
}
.md-typeset .wn-cards .twemoji,
.md-typeset .wn-cards .twemoji svg {
  color: var(--wn-brand);
  fill: currentcolor;
}
.md-typeset .wn-cards .twemoji svg {
  height: 1.1rem;
  width: 1.1rem;
  display: block;
}
/* Flisen erstatter stregen under overskriften */
/* Descendant-selektor, ikke "> hr": naar kortet foldes, flytter js stregen
   ned i .wn-krop, og saa er den ikke laengere et direkte barn af li. */
.md-typeset .wn-cards > ul > li hr { display: none; }
.wn-krop > :first-child { margin-top: 0; }
.md-typeset .wn-cards > ul > li p,
.md-typeset .wn-cards > ul > li li {
  font-size: .72rem;
  line-height: 1.55;
}
.md-typeset .wn-cards > ul > li ul {
  margin: .5rem 0 0;
  padding-left: 1rem;
}
.md-typeset .wn-cards > ul > li ul li { margin: .15rem 0; }
.md-typeset .wn-cards > ul > li ul li::marker { color: var(--wn-brand-soft); }
.md-typeset .wn-cards > ul > li a { color: var(--wn-brand); }

/* Foerste kort i foerste fane er hovedhistorien: fuld bredde, to spalter.
   Ni ens kort er en mur - her ved oejet hvor det skal starte. */
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #f7fafb 0%, #fff 62%);
}
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child > p:first-child {
  font-size: 1rem;
}
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child .twemoji {
  padding: .45rem;
}
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child .twemoji svg {
  height: 1.35rem;
  width: 1.35rem;
}
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child > p:nth-of-type(2) {
  font-size: .82rem;
  color: var(--md-default-fg-color);
  max-width: 46rem;
}
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child ul {
  columns: 2;
  column-gap: 2rem;
}
@media screen and (max-width: 45em) {
  .md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child ul { columns: 1; }
}

/* --- Hoejre side: udgivelser og noter --------------------------------
   Den skal stoette indholdet, ikke konkurrere med det: tynd streg,
   ingen kasser. */
.md-typeset .wn-rail-box {
  border: 0;
  border-left: .12rem solid var(--wn-hairline);
  border-radius: 0;
  padding: 0 0 0 .7rem;
  margin-bottom: 1.1rem;
  font-size: .72rem;
  line-height: 1.55;
}
.md-typeset .wn-rail-box p { font-size: .72rem; margin: .3rem 0 0; }
.md-typeset .wn-rail-tip {
  background: none;
  border-left-color: var(--wn-brand);
}
.wn-rail-h {
  display: block;
  color: var(--wn-brand-mid);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.md-typeset ul.wn-vers {
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-typeset ul.wn-vers li { margin: 0; }
.md-typeset ul.wn-vers a {
  display: block;
  padding: .2rem 0;
  color: var(--wn-brand-dark);
  font-size: .74rem;
}
.md-typeset ul.wn-vers a:hover { color: var(--wn-brand); }
.md-typeset ul.wn-vers a.wn-cur {
  color: var(--wn-brand);
  font-weight: 700;
}
.md-typeset .wn-rail-link {
  font-size: .68rem;
  margin: .2rem 0 0;
}
.md-typeset .wn-rail-link a { color: var(--wn-brand-mid); }

/* --- Tastetegn ------------------------------------------------------- */
.md-typeset .wn-key {
  display: inline-block;
  background: var(--wn-brand-pale);
  border: 1px solid var(--wn-hairline);
  border-bottom-width: 2px;
  border-radius: .2rem;
  padding: 0 .3rem;
  font-size: .68rem;
  line-height: 1.5;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .wn-cards > ul > li { transition: none; }
}

/* --- Fanen "Seneste nyheder" ----------------------------------------- */
.md-typeset .wn-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  grid-gap: .7rem;
  gap: .7rem;
  margin: .6rem 0;
}
.md-typeset a.wn-news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wn-hairline);
  border-radius: .2rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s;
}
.md-typeset a.wn-news-card:hover { border-color: var(--wn-brand-soft); }
.wn-news-img {
  display: block;
  height: 7rem;
  background: var(--wn-brand-pale) center/cover no-repeat;
  border-bottom: 1px solid var(--wn-hairline);
}
/* Nyheder uden billede faar logoet som vandmaerke i stedet for et tomt felt */
.wn-news-img--tom {
  background:
    linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)),
    var(--wn-brand-pale) url("/images/KBLogo.png") center / 8.5rem no-repeat;
}
.wn-news-txt {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .6rem .7rem .7rem;
}
.wn-news-h {
  font-size: .78rem;
  font-weight: 700;
  color: var(--wn-brand-dark);
  line-height: 1.35;
}
.wn-news-d {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wn-brand-mid);
}
.md-typeset .wn-news-p {
  font-size: .7rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  margin: .2rem 0 0;
}
.md-typeset .wn-news-fejl { font-size: .75rem; }

/* --- Foldede kort ----------------------------------------------------
   whatsnew.v1.js saetter klassen wn-foldet paa <body> og pakker hvert korts
   indhold i en .wn-krop. Uden JavaScript staar kortene bare foldet ud.
   Materials egne selektorer bruger .grid.cards og har derfor en klasse mere
   end vores .wn-cards - derfor er .grid.cards med her, ellers vinder de. */

.wn-foldet .md-typeset .grid.cards.wn-cards > ul { gap: .45rem; grid-gap: .45rem; }
.wn-foldet .md-typeset .grid.cards.wn-cards > ul > li { padding: 0; }

.wn-foldet .md-typeset .wn-cards > ul > li > p:first-child {
  position: relative;
  padding: .55rem 1.9rem .55rem .7rem;
  margin: 0;
  border-radius: .2rem;
  cursor: pointer;
}
.wn-foldet .md-typeset .wn-cards > ul > li > p:first-child:hover {
  background: var(--wn-brand-pale);
}
.wn-foldet .md-typeset .wn-cards > ul > li > p:first-child::after {
  content: "";
  position: absolute;
  right: .7rem;
  top: 50%;
  width: .38rem;
  height: .38rem;
  margin-top: -.28rem;
  border-right: .1rem solid var(--wn-brand-mid);
  border-bottom: .1rem solid var(--wn-brand-mid);
  transform: rotate(45deg);
  transition: transform .18s;
}
.wn-foldet .md-typeset .wn-cards > ul > li.wn-aaben > p:first-child::after {
  transform: rotate(-135deg);
  margin-top: -.1rem;
}

.wn-krop { display: none; padding: 0 .7rem .6rem; }
.wn-foldet .md-typeset .wn-cards > ul > li.wn-aaben .wn-krop { display: block; }
/* uden JavaScript findes .wn-foldet ikke, og kroppen skal vises */
body:not(.wn-foldet) .wn-krop { display: block; }

/* --- Fold-skifteren yderst i fanebjaelken ----------------------------
   Én knap med tekst. To smaa ikoner lignede hinanden for meget i 17 px. */
.md-typeset .tabbed-labels { align-items: center; }
.wn-skifter { margin-left: auto; flex: 0 0 auto; }
.wn-skifter button {
  display: flex;
  align-items: center;
  gap: .35rem;
  appearance: none;
  border: 1px solid var(--wn-hairline);
  background: #fff;
  border-radius: .2rem;
  padding: .25rem .5rem;
  margin: 0 0 .2rem;
  cursor: pointer;
  font: 700 .62rem/1.4 inherit;
  letter-spacing: .04em;
  color: var(--wn-brand-dark);
  white-space: nowrap;
}
.wn-skifter button:hover {
  color: var(--wn-brand);
  border-color: var(--wn-brand-soft);
  background: var(--wn-brand-pale);
}
.wn-pil {
  width: .3rem;
  height: .3rem;
  border-right: .09rem solid currentcolor;
  border-bottom: .09rem solid currentcolor;
  transform: rotate(45deg);
  margin-top: -.15rem;
  transition: transform .18s;
}
.wn-skifter button[aria-expanded="true"] .wn-pil {
  transform: rotate(-135deg);
  margin-top: .1rem;
}

@media (prefers-reduced-motion: reduce) {
  .wn-foldet .md-typeset .wn-cards > ul > li > p:first-child::after { transition: none; }
}

/* --- Fanen "Integrationer" -------------------------------------------
   Logovaeg over de integrationer der findes. Logoerne er gaatonede og
   toner op i fuld farve ved hover, saa vaeggen er rolig at kigge paa og
   ingen enkelt partner raaber hoejere end resten. */
.md-typeset .wn-introtekst {
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  margin: .6rem 0 1rem;
  max-width: 44rem;
}
.wn-ikat {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 1.1rem 0 .5rem;
  color: var(--wn-brand-mid);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wn-ikat::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wn-hairline);
}
.wn-ikat span {
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wn-brand-soft);
}
.wn-ivaeg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
  gap: .5rem;
}
.md-typeset a.wn-ilogo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.6rem;
  padding: .5rem;
  border: 1px solid var(--wn-hairline);
  border-radius: .2rem;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.md-typeset a.wn-ilogo:hover {
  border-color: var(--wn-brand-soft);
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .07);
}
.md-typeset .wn-ilogo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .2s, opacity .2s;
}
.md-typeset .wn-ilogo:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .md-typeset a.wn-ilogo,
  .md-typeset .wn-ilogo img { transition: none; }
}

/* --- Rettelser efter kollegafeedback --------------------------------- */

/* 1. Naar et kort foldes ud, straekker grid'et normalt naboen i samme raekke
      til samme hoejde. Det ser ud som om begge kort aabner. align-items: start
      lader hvert kort beholde sin egen hoejde. */
.wn-foldet .md-typeset .grid.cards.wn-cards > ul { align-items: start; }

/* 2. Kontrast: boksen er graa (sat i sidens egen style-blok), og kortene er
      hvide, saa de traeder frem. .grid.cards er med i selektoren, fordi
      Materials egen regel ellers vinder. */
.md-typeset .grid.cards.wn-cards > ul > li {
  background: #fff;
  border-color: #d8e3e6;
}
.md-typeset .grid.cards.wn-cards > ul > li:hover { background: #fbfdfd; }
.wn-foldet .md-typeset .wn-cards > ul > li > p:first-child:hover {
  background: var(--wn-brand-pale);
}
/* hovedkortet skiller sig stadig ud - nu opad i stedet for nedad */
.md-typeset .tabbed-block:first-child .wn-cards > ul > li:first-child {
  background: linear-gradient(180deg, #fff 0%, #f6fafb 100%);
}
/* logokortene skal blive hvide, ellers forsvinder partnernes logoer */
.md-typeset a.wn-ilogo { background: #fff; }

/* --- Sidehoved: version UNDER overskriften ---------------------------
   Maerkaten midt imellem logo og titel saa underlig ud. Nu staar titel og
   version i en kolonne ved siden af logoet. Den lavere polstring under
   stregen betaler for den ekstra linje, saa hovedet ikke fylder mere. */
.wn-top { align-items: center; padding-bottom: .5rem; }
/* wn-top maa IKKE have markdown-attributten: saa pakker markdown indholdet i
   et <p>, og flex-opstillingen rammer kun det ene element. Sidehovedet faldt
   fra hinanden paa den maade i v8. */
.wn-titelblok {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.wn-title { line-height: 1.15; }
/* ikke laengere en pille - en pille under overskriften blev for tung */
.wn-eyebrow {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--wn-brand-mid);
  font-size: .56rem;
}


/* --- Fold-knappen maa ikke rulle vaek ---------------------------------
   Fanebjaelken ruller vandret naar der er mange faner. Laa knappen inde i
   bjaelken, rullede den ud af syne. Nu ligger den fast i hoejre hjoerne, og
   bjaelken faar plads reserveret, saa fanerne ikke kan gemme sig bag den. */
.md-typeset .tabbed-set { position: relative; }
.wn-skifter {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  z-index: 1;
}
.md-typeset .tabbed-labels { padding-right: 6.2rem; }

/* --- Lang udgivelsesliste --------------------------------------------
   Med mange udgivelser ville listen fylde hele hoejresiden. Der vises de
   seks nyeste, og resten hentes frem med en knap - grupperet pr. aar og
   med en hoejde der kan rulles i. */
.md-typeset ul.wn-vers.wn-vers-lang {
  max-height: 12rem;
  overflow-y: auto;
  padding-right: .2rem;
}
.md-typeset ul.wn-vers.wn-vers-lang::-webkit-scrollbar { width: .25rem; }
.md-typeset ul.wn-vers.wn-vers-lang::-webkit-scrollbar-thumb {
  background: var(--wn-brand-soft);
  border-radius: .2rem;
}
.md-typeset li.wn-vers-aar {
  margin: .5rem 0 .1rem;
  color: var(--wn-brand-soft);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.md-typeset li.wn-vers-aar:first-child { margin-top: 0; }
.wn-vers-mere {
  appearance: none;
  border: 0;
  background: none;
  padding: .3rem 0 0;
  font: inherit;
  font-size: .66rem;
  color: var(--wn-brand-mid);
  cursor: pointer;
  text-align: left;
}
.wn-vers-mere:hover { color: var(--wn-brand); text-decoration: underline; }

/* --- Fanebjaelken: alt paa én raekke ---------------------------------
   Fanerne er skruet ned i stoerrelse, saa der er plads til 7-8 stykker paa
   én linje uden at noget ruller ud af syne.

   Materials skydende understregning (::before) sidder forkert naar bjaelken
   ruller, saa den er slaaet fra. I stedet faar den valgte fane sin egen streg. Materials egne selektorer parrer input nr. N med label
   nr. N - de er gentaget her for op til otte faner. */
.md-typeset .tabbed-labels {
  flex-wrap: nowrap;
  padding-right: 5rem;
}
.md-typeset .tabbed-labels::before { display: none; }
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8) {
  box-shadow: inset 0 -.1rem 0 var(--wn-brand);
}

/* Kompakte faner - plads til 7-8 paa én raekke */
.md-typeset .tabbed-labels > label {
  font-size: .58rem;
  padding: .45rem .45rem;
  letter-spacing: 0;
}
.md-typeset .tabbed-labels > label:first-child { padding-left: 0; }
.wn-skifter button { font-size: .53rem; padding: .15rem .35rem; }