/* WCAG 2.2 AAA-anpassning för marcusosterberg.se.
   Alla färgpar verifieras av scripts/check_contrast.py — håll i synk! */

/* ---------- Primär-/accentfärger (primary/accent = "custom") ---------- */

:root > * {
  --md-primary-fg-color: #1c3f5f;        /* header/footer, vit text 10.9:1 */
  --md-primary-fg-color--light: #2d5a82;
  --md-primary-fg-color--dark: #12293e;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;
}

/* ---------- Ljust läge ---------- */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #1f2229;                  /* 15.9:1 */
  --md-default-fg-color--light: #50555e;           /* 7.5:1 — datum m.m. */
  --md-default-fg-color--lighter: #50555e;
  --md-default-fg-color--lightest: #eceef1;        /* endast dekor/linjer */
  --md-typeset-color: #1f2229;
  --md-typeset-a-color: #0d47a1;                   /* 8.6:1 */
  --md-accent-fg-color: #7b1fa2;                   /* 8.2:1 — hover/fokus */
  --md-code-bg-color: #f2f2f4;
  --md-code-fg-color: #23262c;                     /* 13.6:1 */
  --md-code-hl-keyword-color: #66129e;
  --md-code-hl-function-color: #8c2b00;
  --md-code-hl-string-color: #0c5c2e;
  --md-code-hl-number-color: #84245c;
  --md-code-hl-constant-color: #84245c;
  --md-code-hl-special-color: #84245c;
  --md-code-hl-comment-color: #4a4f58;
  --md-code-hl-generic-color: #4a4f58;
  --md-code-hl-name-color: #23262c;
  --md-code-hl-variable-color: #23262c;
  --md-code-hl-operator-color: #23262c;
  --md-code-hl-punctuation-color: #23262c;
}

/* ---------- Mörkt läge ---------- */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #16181f;
  --md-default-fg-color: #e7e9ee;                  /* 14.6:1 */
  --md-default-fg-color--light: #aab0bc;           /* 8.1:1 */
  --md-default-fg-color--lighter: #aab0bc;
  --md-default-fg-color--lightest: #2b2e38;        /* endast dekor/linjer */
  --md-typeset-color: #e7e9ee;
  --md-typeset-a-color: #8fc1f7;                   /* 9.4:1 */
  --md-accent-fg-color: #c0a6f0;                   /* 8.4:1 — hover/fokus */
  --md-code-bg-color: #22252e;
  --md-code-fg-color: #e7e9ee;                     /* 12.6:1 */
  --md-code-hl-keyword-color: #d4a8f5;
  --md-code-hl-function-color: #f0b68a;
  --md-code-hl-string-color: #9fd8ab;
  --md-code-hl-number-color: #f0a8c8;
  --md-code-hl-constant-color: #f0a8c8;
  --md-code-hl-special-color: #f0a8c8;
  --md-code-hl-comment-color: #aab0bc;
  --md-code-hl-generic-color: #aab0bc;
  --md-code-hl-name-color: #e7e9ee;
  --md-code-hl-variable-color: #e7e9ee;
  --md-code-hl-operator-color: #e7e9ee;
  --md-code-hl-punctuation-color: #e7e9ee;
}

/* ---------- Typografi (WCAG 1.4.8) ---------- */

.md-typeset {
  line-height: 1.6;            /* radavstånd minst 1,5 */
  text-align: left;            /* ingen marginaljustering */
}

/* Radlängd max 80 tecken (1.4.8). Uppmätt: genomsnittligt tecken i
   brödtexten är ~0,44 em → 35 em ≈ 80 tecken per rad. */
.md-content__inner {
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
  /* sidoluft som temats mobilregler förutsätter (kodblock har -16px
     marginal för kant-till-kant på små skärmar) */
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Understrukna länkar i brödtext (1.4.1 — inte enbart färg) */
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- Fokusindikator (WCAG 2.4.13) ---------- */

.md-typeset a:focus-visible,
.md-nav a:focus-visible,
.md-header a:focus-visible,
.md-tabs a:focus-visible,
.md-footer a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--md-typeset-a-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Klickytor minst 44×44 px (WCAG 2.5.5) ---------- */

.md-tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0;
  padding-top: 0;
}

.md-footer-meta a,
.md-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* ---------- Pekskärmar: inga hovringsberoende ändringar ---------- */

/* Temats permalänkar (¶) ligger i varje rubrik med opacity: 0 och tänds av
   .md-typeset :hover > .headerlink. På iOS gör den hovringsregeln att första
   trycket på en rubrik bara sätter hovring — länken följs först vid andra
   trycket. Det drabbar inläggslänkarna på startsidan, som ligger i <h3>.
   Pekenheter kan ändå inte hovra, så permalänken tas bort helt där.
   Rubrikernas id:n finns kvar och nås via innehållsförteckningen. */
@media (hover: none) {
  .md-typeset .headerlink {
    display: none;
  }
}

/* ---------- Rörelse (WCAG 2.3.3) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Metadatarad ovanför inläggsrubriken ---------- */

.post-meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  margin: 0 0 0.4em;
}

/* ---------- Utfallande hjältebild ---------- */

/* Hjältebilden (första bilden direkt efter rubriken, injicerad vid
   konverteringen) bryter sig ur textkolumnen: upp till 44 rem bred,
   centrerad, med begränsad höjd. Utan :has-stöd faller den tillbaka
   till textbredd. */
.md-typeset h1 + p:has(> img:only-child) {
  width: min(44rem, 94vw);
  margin: 1.2em 0 1.6em 50%;
  transform: translateX(-50%);
}

.md-typeset h1 + p:has(> img:only-child) > img {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- Tidslinje (Om mig) ---------- */

.md-typeset ol.tidslinje {
  list-style: none;
  margin-left: 0.3em;
  padding-left: 1.6em;
  border-left: 2px solid var(--md-default-fg-color--lightest);
}

.md-typeset ol.tidslinje > li {
  position: relative;
  margin: 0 0 2em;
}

.md-typeset ol.tidslinje > li::before {
  content: "";
  position: absolute;
  left: calc(-1.6em - 6px);
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--md-typeset-a-color);
}

.md-typeset ol.tidslinje h3 {
  font-size: 0.85rem;
  margin: 0 0 0.2em;
}

.md-typeset ol.tidslinje .tl-meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  margin: 0 0 0.4em;
}

.md-typeset ol.tidslinje p {
  margin: 0;
}

/* ---------- Relaterade inlägg ---------- */

.md-related {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-related h2 {
  font-size: 1em;
  margin-top: 0;
}

.md-related li {
  margin-bottom: 0.6em;
}

/* ---------- Diverse ---------- */

/* Porträttbilden i sidhuvudet som rund avatar */
.md-header .md-logo img,
.md-nav .md-logo img {
  border-radius: 50%;
}


/* Bilder skalar med sidbredden. Vit platta bakom: transparenta PNG:er
   ritade för ljus bakgrund förblir läsbara även i mörkt läge. */
.md-typeset img {
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.6rem;
  border-radius: 4px;
}

/* Hjältebilder är utfallande foton — ingen vit ram runt dem */
.md-typeset h1 + p:has(> img:only-child) > img {
  padding: 0;
}

/* Indragna (ofäktade) kodblock får bar <pre> utan temats rullstil —
   rulla inom kolumnen i stället för att tränga ut ur vyporten */
.md-typeset pre {
  overflow-x: auto;
}