/* KeyBalance-farver i hele guiden.
 *
 * Temaet stod paa "blue grey", som ikke er en KB-farve. Logoet og hele
 * keybalance.dk koerer paa petrolblaa #356977, og den bruges nu ogsaa her.
 *
 * Materials palette: primary: custom henter farverne herfra.
 * Filnavnet er versioneret, fordi nginx cacher css i et aar.
 */
:root {
  --kb-brand: #356977;
  --kb-brand-dark: #24505c;
  --kb-brand-mid: #498a9a;
  --kb-brand-soft: #90aab1;
  --kb-brand-pale: #eef3f4;

  /* topbjaelke og faner */
  --md-primary-fg-color: var(--kb-brand);
  --md-primary-fg-color--light: var(--kb-brand-mid);
  --md-primary-fg-color--dark: var(--kb-brand-dark);
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);

  /* links, markeringer og den aktive fane */
  --md-accent-fg-color: var(--kb-brand-mid);
  --md-accent-fg-color--transparent: rgba(73, 138, 154, .1);
  --md-typeset-a-color: var(--kb-brand);
}

/* Montserrat er bredere end Roboto - lidt luft goer teksten lettere at laese */
.md-typeset { line-height: 1.68; }
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 { letter-spacing: -.01em; }
.md-typeset h1 { font-weight: 600; color: var(--kb-brand-dark); }
.md-typeset h2 { font-weight: 600; }

/* --- Forsiden -------------------------------------------------------- */
.kb-eyebrow {
  display: block;
  color: var(--kb-brand-mid);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.md-typeset .kb-manchet {
  font-size: .92rem;
  color: var(--md-default-fg-color--light);
  max-width: 58ch;
  margin-bottom: 1.6rem;
}
.md-typeset .grid.cards.kb-indgange > ul > li {
  border: 1px solid #dbe4e6;
  border-radius: .25rem;
  box-shadow: none;
  padding: 1.1rem 1.2rem;
  transition: border-color .2s, box-shadow .2s;
}
.md-typeset .grid.cards.kb-indgange > ul > li:hover {
  border-color: var(--kb-brand-soft);
  box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .06);
}
.md-typeset .kb-indgange > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--kb-brand-dark);
}
.md-typeset .kb-indgange .twemoji {
  flex: 0 0 auto;
  height: auto;
  width: auto;
  box-sizing: content-box;
  background: var(--kb-brand-pale);
  border-radius: .4rem;
  padding: .45rem;
  line-height: 0;
  color: var(--kb-brand);
}
.md-typeset .kb-indgange .twemoji svg {
  height: 1.2rem;
  width: 1.2rem;
  fill: currentcolor;
  display: block;
}
.md-typeset .kb-indgange > ul > li > hr { display: none; }
.md-typeset .kb-indgange > ul > li p { font-size: .78rem; line-height: 1.6; }
.md-typeset .kb-indgange > ul > li a { font-weight: 600; }

/* F1-båndet */
.md-typeset .admonition.kb-baand {
  border: 1px solid #dbe4e6;
  border-left: .18rem solid var(--kb-brand);
  border-radius: .25rem;
  box-shadow: none;
  background: var(--kb-brand-pale);
  font-size: .82rem;
}
.md-typeset .kb-baand > .admonition-title {
  background: transparent;
  color: var(--kb-brand-dark);
  font-weight: 700;
}
.md-typeset .kb-baand > .admonition-title::before { background-color: var(--kb-brand); }

/* --- Emneord (tags) --------------------------------------------------
   Siden var aldrig koblet til: docs/tags.md havde "layout: tags", som er
   Jekyll-syntaks og ignoreres af MkDocs, og tags-pluginet havde ingen
   tags_file. Derfor stod siden tom. */
.md-typeset .md-tag {
  background: var(--kb-brand-pale);
  color: var(--kb-brand-dark);
  border: 1px solid #cfdde1;
  border-radius: 2rem;
  padding: .15rem .6rem;
  font-size: .68rem;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.md-typeset .md-tag:hover {
  background: var(--kb-brand);
  border-color: var(--kb-brand);
  color: #fff;
}
.md-typeset .md-tags { gap: .35rem; margin-bottom: 1rem; }

/* --- Bredere indhold, saa der er plads til tre kort ------------------
   Materials standardbredde er 61rem. Med tre kort ved siden af hinanden
   og indholdsfortegnelsen til hoejre bliver det for trangt. */
.md-grid { max-width: 78rem; }


/* --- Listen over spoergsmaal og svar --------------------------------- */
.md-typeset .faq-liste ul {
  columns: 2;
  column-gap: 2.5rem;
  margin-left: 0;
}
.md-typeset .faq-liste li {
  break-inside: avoid;
  font-size: .78rem;
  line-height: 1.5;
  margin: .3rem 0;
}
@media screen and (max-width: 60em) {
  .md-typeset .faq-liste ul { columns: 1; }
}

/* --- Emneord-siden: kategorier ved siden af hinanden ----------------- */
.md-typeset .md-tags { gap: .35rem; }

/* --- Hele forsidekortet er klikbart ----------------------------------
   Kortet har praecis ét link, og det ligger i sidste afsnit. Linkets
   ::after daekker hele kortet, saa et klik hvor som helst i kortet
   foelger linket. Det er stadig et rigtigt <a>, saa tastatur, hoejreklik
   og "aabn i ny fane" virker som foer. Teksten i kortet kan til
   gengaeld ikke markeres - det er prisen for hele-boksen-klik. */
.md-typeset .grid.cards.kb-indgange > ul > li {
  position: relative;
  cursor: pointer;
}
.md-typeset .grid.cards.kb-indgange > ul > li > p:last-child > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* tastaturfokus skal kunne ses paa hele kortet, ikke kun paa linkteksten */
.md-typeset .grid.cards.kb-indgange > ul > li:has(a:focus-visible) {
  outline: 2px solid var(--kb-brand);
  outline-offset: 2px;
}