/* 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 ---------------------------- */
.md-typeset .tabbed-labels { align-items: center; }
.wn-skifter {
  margin-left: auto;
  display: flex;
  gap: .1rem;
  flex: 0 0 auto;
}
.wn-skifter button {
  appearance: none;
  border: 0;
  background: none;
  padding: .35rem .3rem;
  cursor: pointer;
  color: var(--md-default-fg-color--light);
  line-height: 0;
  border-radius: .2rem;
}
.wn-skifter button:hover {
  color: var(--wn-brand);
  background: var(--wn-brand-pale);
}
.wn-skifter button[aria-pressed="true"] { color: var(--wn-brand); }
.wn-skifter svg { width: .85rem; height: .85rem; fill: currentcolor; display: block; }

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