/*
 * Copyright © 2026 Em Zakharov
 */

body {
  font-family: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
  font-weight: 450;
  -webkit-text-size-adjust: 100%; /* To prevent odd font size changes in landscape Safari on iOS */
  color: rgb(41, 37, 36);
}

h1, h2 {
  font-family: ui-sans-serif, "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
}

main > h1 { font-size: 1.75rem; }

section { line-height: 1.5; }
section h2 { font-size: 1.375rem; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", "Noto Sans Mono", Menlo, monospace;
}

a:any-link {
  display: inline-block; /* To prevent ::after link arrows from wrapping */
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
  text-decoration-color: #F5565650;
  text-decoration-skip-ink: none;
  text-underline-offset: -0.166em;
}
a:visited { text-decoration-color: #FF68CC50; }
a:hover {
  text-decoration-thickness: 1em;
  text-underline-offset: -0.834em;
}
a:active { color: #F55656; }

a.up::after {
  content: url("/link-arrow.svg");
  display: inline-block;
  position: relative;
  transform: rotate(-90deg);
  top: -0.15em;
  right: 0.13em;
  width: 0.55em;
  margin-right: -0.07em;
}
a.down::after {
  content: url("/link-arrow.svg");
  display: inline-block;
  position: relative;
  transform: rotate(90deg);
  top: 0.2em;
  right: -0.18em;
  width: 0.55em;
  margin-right: 0.05em;
}
a.ext::after {
  content: url("/link-arrow.svg");
  display: inline-block;
  position: relative;
  transform: rotate(-45deg);
  top: -0.2em;
  right: 0.1em;
  width: 0.55em;
  margin-right: -0.05em;
}


/* NOT from /base.css, but makes sense to put it here */
/* System set to DARK mode; user HAS NOT expressed preference to override it */
@media (prefers-color-scheme: dark) {
  a:any-link {
    text-decoration-thickness: 2px; /* -3px */
    text-decoration-color: #F55656; /* Remove alpha */
    text-underline-offset: 0.075em; /* -0.166em -> 0.075em */
  }
  a:visited { text-decoration-color: #FF68CC; /* Remove alpha */ }
  a:hover { /* No overrides, but needed to maintain the intended :hover style */
    text-decoration-thickness: 1em;
    text-underline-offset: -0.834em;
  }
  a:active { color: #C42525; /* -0x313131 */ }

  a.up::after,
  a.down::after,      /* brightness(6.65) hue-rotate(4deg);                 /* Color match for rgb(255, 247, 237) */
  a.ext::after { filter: brightness(6.05) hue-rotate(27deg) saturate(2.55); /* Color match for hsl(33deg, 100%, 86%) */ }
}

/* System set to LIGHT mode; user HAS expressed preference to override it */
@media (prefers-color-scheme: light) {
  body[dm="on"] a:any-link {
    text-decoration-thickness: 2px; /* -3px */
    text-decoration-color: #F55656; /* Remove alpha */
    text-underline-offset: 0.075em; /* -0.166em -> 0.075em */
  }
  body[dm="on"] a:visited { text-decoration-color: #FF68CC; /* Remove alpha */ }
  body[dm="on"] a:hover { /* No overrides, but needed to maintain the intended :hover style */
    text-decoration-thickness: 1em;
    text-underline-offset: -0.834em;
  }
  body[dm="on"] a:active { color: #C42525; /* -0x313131 */ }

  body[dm="on"] a.up::after,
  body[dm="on"] a.down::after,      /* brightness(6.65) hue-rotate(4deg);                 /* Color match for rgb(255, 247, 237) */
  body[dm="on"] a.ext::after { filter: brightness(6.05) hue-rotate(27deg) saturate(2.55); /* Color match for hsl(33deg, 100%, 86%) */ }
}

/* System set to DARK mode; user HAS expressed preference to override it */
/* Revert dark mode styles */
@media (prefers-color-scheme: dark) {
  body[dm="off"] a:any-link {
    text-decoration-thickness: 5px;
    text-decoration-color: #F5565650;
    text-underline-offset: -0.166em;
  }
  body[dm="off"] a:visited { text-decoration-color: #FF68CC50; }
  body[dm="off"] a:hover {
    text-decoration-thickness: 1em;
    text-underline-offset: -0.834em;
  }
  body[dm="off"] a:active { color: #F55656; }

  body[dm="off"] a.up::after,
  body[dm="off"] a.down::after,
  body[dm="off"] a.ext::after { filter: none; }
}

@media (prefers-contrast: more) {
  a:any-link {
    text-decoration-thickness: 2px; /* -3px */
    text-decoration-color: #F55656; /* Remove alpha */
    text-underline-offset: 0.075em; /* -0.166em -> 0.075em */
  }
  a:visited { text-decoration-color: #FF68CC; /* Remove alpha */ }
  a:hover { /* No overrides, but needed to maintain the intended :hover style */
    text-decoration-thickness: 1em;
    text-underline-offset: -0.834em;
  }
  a:active { color: #C42525; /* -0x313131 */ }
}