/* WCAG 2.2 AAA-anpassning för docs.webperf.se.
   Färgerna är hämtade ur logotypen: mörkblå (#003e65) och korall (#f26156).
   Alla färgpar verifieras av scripts/check_contrast.py — håll i synk!
   Filen är gemensam för båda språken och symlänkas in i content/sv och
   content/en (Zensical följer symlänkade filer, men inte kataloger). */

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

:root > * {
  --md-primary-fg-color: #0d3350;        /* header/footer, vit text 13.1:1 */
  --md-primary-fg-color--light: #1a4d73;
  --md-primary-fg-color--dark: #08202f;
  --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 — metadata 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: #0f4a76;                   /* 9.3:1 */
  --md-accent-fg-color: #8c2b00;                   /* 8.5: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: #ffc09f;                   /* 11.2: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. Dokumentationen
   har breda tabeller och kodblock som får spränga kolumnen (se nedan). */
.md-content__inner {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Brödtext hålls på 35 em även när kolumnen är bredare — tabeller,
   kodblock och kort får däremot använda hela bredden. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote {
  max-width: 35em;
}

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

/* Undantag: länkar som redan är visuellt avgränsade som knapp/kort/flik */
.md-typeset .md-button,
.md-typeset .grid.cards a,
.md-typeset .tabbed-labels a {
  text-decoration: none;
}

/* ---------- 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,
label:focus-visible {
  outline: 3px solid var(--md-typeset-a-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Fokusram i sidhuvudet ritas mot den mörka primärfärgen — länkfärgen
   har för låg kontrast där. */
.md-header a:focus-visible,
.md-tabs a:focus-visible,
.md-header button:focus-visible {
  outline-color: #ffffff;
}

/* ---------- 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;
}

/* Sidonavigationens länkar — tätt staplade listor är svåra att träffa */
.md-nav__link {
  min-height: 32px;
  display: flex;
  align-items: center;
}

/* Permalänkens ¶ ritas här i stället för i HTML:en (se toc-inställningen i
   zensical.*.toml). CSS-innehåll indexeras inte, så tecknet slipper dyka
   upp i sökmotorernas utdrag. */
.md-typeset .headerlink::after {
  content: "¶";
}

/* ---------- 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. 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;
  }
}

/* ---------- Tabeller ---------- */

/* Breda tabeller rullar i sin egen behållare i stället för att tvinga
   hela sidan att rulla i sidled (WCAG 1.4.10 Reflow). */
.md-typeset__table {
  overflow-x: auto;
}

.md-typeset table:not([class]) {
  font-size: 0.75rem;
}

/* ---------- Kodblock ---------- */

/* 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;
}

.md-typeset code {
  font-size: 0.85em;
}

/* ---------- Kort (grid cards) ---------- */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: var(--md-accent-fg-color);
}

/* ---------- Nyckeltal om repot (snippets/github-stats-*.md) ---------- */

/* Talen skrivs in vid bygget av scripts/fetch_github_stats.py. Inga nya
   färger — allt hämtas ur tokens som redan står i check_contrast.py, så
   blocket lägger inte till något färgpar att hålla reda på. */

.md-typeset .repo-stats {
  margin: 1.5em 0 2em;
  padding: 1.1em 1.3em 0.9em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
}

.md-typeset .repo-stats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1em 2.4em;
  margin: 0 0 0.9em;
  padding: 0;
  list-style: none;
}

/* Talet och etiketten är var sitt flexobjekt: <strong> och texten efter
   det. Kolumnriktningen ger talet överst utan att kasta om läsordningen —
   en skärmläsare hör "11 Bidragsgivare", samma ordning som ögat ser. */
.md-typeset .repo-stats li {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--md-default-fg-color--light);
}

.md-typeset .repo-stats li strong {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--md-default-fg-color);
  font-variant-numeric: tabular-nums;
}

/* Radlängd (1.4.8): 33 em vid 0,75 rem är knappt 70 tecken. */
.md-typeset .repo-stats p {
  max-width: 33em;
  margin: 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .repo-stats p + p {
  margin-top: 0.5em;
  font-size: 0.7rem;
}

/* Länken står sist i en löpande mening och blir svårare att träffa om den
   bryts över två rader. Texten är kort nog att rymmas även på 320 px. */
.md-typeset .repo-stats a {
  white-space: nowrap;
}

/* ---------- Notiser ---------- */

.md-typeset .admonition {
  margin: 1.5em 0;
}

/* ---------- Bilder ---------- */

.md-typeset img {
  max-width: 100%;
  height: auto;
}

/* ---------- Språkväljare ---------- */

/* Temats språkmeny öppnas vid hovring. Utan fokusregeln nås den inte med
   tangentbord (WCAG 2.1.1). */
.md-select:focus-within .md-select__inner {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.25s;
}