/* ---------------------------------------------------------------
   Klikbare markører oven på et skærmbillede.
   Bruges sammen med Material for MkDocs' annotations-feature:

   <div class="kb-annotate-image annotate">
     <img src="../billede.png" class="off-glb">
     <span class="kb-marker" style="--kb-x:20%;top:10%">(1)</span>
   </div>

   1. Forklaring til markør 1

   Bemærk "../" foran billedet. Mkdocs omskriver kun relative stier i
   markdown-billeder, ikke i rå HTML, og med use_directory_urls ligger
   siden i sin egen mappe. Stien skal derfor et niveau op, selv om
   billedet ligger ved siden af .md-filen.

   Markøren er en fuldbredde-stribe, ikke en lille prik. Det er med vilje:
   Material placerer sin popup som "position:absolute" inde i markøren, og
   popuppens bredde beregnes ud fra markørens bredde. En smal markør ville
   presse popup-teksten sammen til én ordbredde.
   --------------------------------------------------------------- */

.kb-annotate-image {
  position: relative;
  display: block;
  max-width: 100%;
}

.kb-annotate-image > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Striben spænder over hele billedet og placeres lodret med "top" i procent.
   Selve markøren skubbes vandret på plads med padding i procent, så begge
   koordinater følger billedet uanset skærmbredde. */
.kb-annotate-image .kb-marker {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--kb-x) - 1.5ch);
  transform: translateY(-50%);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
  /* Striberne overlapper hinanden. Uden dette ville den nederste stribe
     opfange museklik på markører der ligger i samme højde. */
  pointer-events: none;
}

.kb-annotate-image .kb-marker > * {
  pointer-events: auto;
}

/* ---------------------------------------------------------------
   Selve markøren: nummer i stedet for Materials grå plus.

   Material tegner som standard et plus-ikon i farven
   --md-default-fg-color--lighter. Det er lyst gråt og forsvinder
   i et skærmbillede. Og et plus siger ikke hvilken forklaring det
   hører til. Vi viser derfor nummeret (som allerede står i
   attributten data-md-annotation-id) i en kraftig farve, så
   markøren på billedet matcher punktet i listen nedenunder.

   Kun markører inde i .kb-annotate-image ændres — annotations i
   kodeblokke andre steder i guiden beholder Materials udseende.
   --------------------------------------------------------------- */

.kb-annotate-image {
  --kb-marker-bg: #e5007d;
  --kb-marker-bg-hover: #a30059;
  --kb-marker-fg: #ffffff;
}

/* Plus-ikonet og dets hvide baggrundscirkel fjernes. */
.kb-annotate-image .md-annotation__index::before,
.kb-annotate-image .md-annotation__index::after {
  content: none;
}

/* Materials faste bredde på 2.2ch er beregnet til ikonet. Nummeret
   skal kunne blive to cifre bredt. */
.kb-annotate-image .md-annotation__index {
  width: auto;
  overflow: visible;
}

.kb-annotate-image .md-annotation__index [data-md-annotation-id] {
  background: var(--kb-marker-bg);
  border-radius: 2ch;
  /* Hvid ring + skygge, så nummeret også kan læses oven på mørke
     eller detaljerede dele af skærmbilledet. */
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgb(0 0 0 / 45%);
  color: var(--kb-marker-fg);
  font-weight: 700;
  line-height: 2.2ch;
  min-width: 2.2ch;
  padding: 0 0.6ch;
  text-align: center;
  transition: background-color 0.25s;
  white-space: nowrap;
}

.kb-annotate-image .md-annotation__index [data-md-annotation-id]::after {
  content: attr(data-md-annotation-id);
}

.kb-annotate-image .md-annotation:hover .md-annotation__index [data-md-annotation-id],
.kb-annotate-image .md-annotation__index:focus [data-md-annotation-id] {
  background: var(--kb-marker-bg-hover);
}