/* WCAG 2.2 AAA-anpassning för webbanalys.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;
  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;
}

/* ---------- Aktiv sida i sidomenyn ----------
   Temats halvgenomskinliga bakgrund går inte att kontrastberäkna.
   Accentfärgen är kontrollerad mot sidbakgrunden i check_contrast.py,
   och fet stil gör att markeringen inte bara bygger på färg (1.4.1). */

.md-nav--primary .md-nav__item .md-nav__link--active {
  background-color: transparent;
  font-weight: 700;
}

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

.md-typeset .headerlink::after {
  content: "¶";
}

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

@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 för publiceringsdatum/senast granskad ---------- */

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

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

.md-typeset img {
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.6rem;
  border-radius: 4px;
}

.md-typeset pre {
  overflow-x: auto;
}

/* ---------- Sidhuvud, flikar och sidfot (WCAG 1.4.6) ---------- */

.md-header,
.md-tabs,
.md-footer,
.md-footer-meta {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.md-footer,
.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}

.md-header a,
.md-header button,
.md-header__title,
.md-tabs__link,
.md-search__input,
.md-search__input::placeholder,
.md-search__button,
.md-footer a,
.md-footer__title,
.md-footer__direction,
.md-footer-meta a,
.md-copyright,
.md-copyright__highlight {
  color: var(--md-primary-bg-color);
  opacity: 1;
}

/* ---------- Statistikkort (Läget i Sverige) ---------- */

.statkort-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.md-typeset .statkort {
  margin: 0;
  padding: 1rem;
  border-radius: 8px;
  background: #f4f5f7;
  color: #1f2229;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.md-typeset .statkort-tal {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #1c3f5f;
}

.md-typeset .statkort-ring {
  width: 6rem;
  height: 6rem;
  margin: 0.5rem 0;
}

.md-typeset .statkort .spar {
  fill: none;
  stroke: #dfe2e8;
  stroke-width: 12;
}

.md-typeset .statkort .varde {
  fill: none;
  stroke: #1c3f5f;
  stroke-width: 12;
  stroke-linecap: round;
}

.md-typeset .statkort figcaption {
  font-size: 0.9rem;
  font-style: normal;
}

[data-md-color-scheme="slate"] .md-typeset .statkort {
  background: #22252e;
  color: #e7e9ee;
}

[data-md-color-scheme="slate"] .md-typeset .statkort-tal {
  color: #8fc1f7;
}

[data-md-color-scheme="slate"] .md-typeset .statkort .spar {
  stroke: #2b2e38;
}

[data-md-color-scheme="slate"] .md-typeset .statkort .varde {
  stroke: #8fc1f7;
}

/* ---------- Sökknappen i sidhuvudet ----------
   Temat ger knappen en ljus, halvgenomskinlig bakgrund, medan texten i
   sidhuvudet annars är vit. Knappen får därför egna, heltäckande färger. */

.md-header .md-search__button,
.md-header .md-search__button:focus,
.md-header .md-search__button:hover {
  color: #1f2229;
  background-color: #eceef1;
}

.md-header .md-search__button::before {
  background-color: #1f2229;
}

[data-md-color-scheme="slate"] .md-header .md-search__button,
[data-md-color-scheme="slate"] .md-header .md-search__button:focus,
[data-md-color-scheme="slate"] .md-header .md-search__button:hover {
  color: #e7e9ee;
  background-color: #2b2e38;
}

[data-md-color-scheme="slate"] .md-header .md-search__button::before {
  background-color: #e7e9ee;
}

/* ---------- Admonitions (klarspråkssammanfattning m.m.) ---------- */

.md-typeset .admonition,
.md-typeset details,
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  background-color: #f4f5f7;
  color: #1f2229;
  border-color: #1c3f5f;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: #e3e7ee;
  color: #1c3f5f;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: #1c3f5f;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details,
[data-md-color-scheme="slate"] .md-typeset .admonition.abstract,
[data-md-color-scheme="slate"] .md-typeset details.abstract {
  background-color: #22252e;
  color: #e7e9ee;
  border-color: #8fc1f7;
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background-color: #2b2e38;
  color: #8fc1f7;
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset summary::before {
  background-color: #8fc1f7;
}

/* ---------- Länkar i sidfoten ---------- */

.sidfot-lankar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.sidfot-lankar a {
  text-decoration: underline;
}

/* Temat färgar länkar i sidfoten med textfärgen för sidinnehåll
   (mörk), och hover/fokus med accentfärgen. Båda har för låg kontrast
   mot den mörka sidfoten, så alla lägen får sidfotens textfärg. */
html .md-footer-meta.md-typeset .sidfot-lankar a,
html .md-footer-meta.md-typeset .sidfot-lankar a:not(:focus, :hover) {
  color: var(--md-primary-bg-color);
}

/* ---------- Diagram: tratt (Rapportera analysen) ---------- */

.md-typeset .tratt {
  margin: 1.5rem 0;
}

.md-typeset .tratt svg {
  width: 100%;
  max-width: 36rem;
  height: auto;
  color: #1f2229;
}

.md-typeset .tratt text {
  fill: currentColor;
  font-size: 15px;
}

.md-typeset .tratt .etikett {
  font-weight: 700;
}

.md-typeset .tratt .i-ar {
  fill: #1c3f5f;
}

.md-typeset .tratt .forra {
  fill: none;
  stroke: #1c3f5f;
  stroke-width: 2;
}

[data-md-color-scheme="slate"] .md-typeset .tratt svg {
  color: #e7e9ee;
}

[data-md-color-scheme="slate"] .md-typeset .tratt .i-ar {
  fill: #8fc1f7;
}

[data-md-color-scheme="slate"] .md-typeset .tratt .forra {
  stroke: #8fc1f7;
}