@import url("remarkdown4.css") layer(remarkdown);

/* Fonts definition, a different font is in use between light and dark mode
in order to improve the readability of the text. */
@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'firacode_retina';
  src: url('fonts/FiraCode-Retina.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* This tells the browser which color themes my app supports
  See https://web.dev/prefers-color-scheme/#stylesheet-architecture */
  color-scheme: light dark;

  /* For a smooth transition between light/dark modes
  See https://web.dev/prefers-color-scheme/#smooth-transitions-between-modes */
  --duration: 0.5s;
  --timing: ease;

  --light-background-color: #f7f7f7;
  --light-text-color: #07486c;
  --light-remarkdown-color: SteelBlue;
  --light-link-color: RoyalBlue;
  --light-link-visited-color: RebeccaPurple;
  --light-link-hover-color: var(--background-color);
  --light-link-hover-background-color: var(--link-color);
  --light-target-after-color: #07486c;
  --light-mark-background: LightGoldenRodYellow;

  --dark-background-color: #272727;
  --dark-text-color: Linen;
  --dark-remarkdown-color: Orange;
  --dark-link-color: #ffff2b;
  --dark-link-visited-color: Khaki;
  --dark-link-hover-color: var(--background-color);
  --dark-link-hover-background-color: var(--link-visited-color);
  --dark-target-after-color: DarkOrange;
  --dark-mark-background: Orange;
}

@supports(color: light-dark(#fff, #000)) {
  html {
    --background-color: light-dark(var(--light-background-color), var(--dark-background-color));
    --text-color: light-dark(var(--light-text-color), var(--dark-text-color));
    --remarkdown-color: light-dark(var(--light-remarkdown-color), var(--dark-remarkdown-color));
    --link-color: light-dark(var(--light-link-color), var(--dark-link-color));
    --link-visited-color: light-dark(var(--light-link-visited-color), var(--dark-link-visited-color));
    --link-hover-color: light-dark(var(--light-link-hover-color), var(--dark-link-hover-color));
    --link-hover-background-color: light-dark(var(--light-link-hover-background-color), var(--dark-link-hover-background-color));
    --target-after-color: light-dark(var(--light-target-after-color), var(--dark-target-after-color));
    --mark-background: light-dark(var(--light-mark-background), var(--dark-mark-background));
  }

  aside:has(#theme-switcher) {
    display: block;
  }

  html:has(#theme-switcher [value="auto"]:checked) {
    color-scheme: light dark;
    /* It looks like light-dark doesn't work well with custom font declaration, to investigate. */
    --font-family: 'triplicate_t4p';
  }

  html:has(#theme-switcher [value="light"]:checked) {
    color-scheme: light;
    --font-family: 'triplicate_t4p';
  }

  html:has(#theme-switcher [value="dark"]:checked) {
    color-scheme: dark;
    --font-family: 'triplicate_t3';
  }
}

html {
  /* Applying it to the html element will provide smooth scrolling to anchors
  https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
  scroll-behavior: smooth;
  /* Only supported by Firefox, how fun? */
  scrollbar-color: var(--background-color) var(--target-after-color);
}

/* General stuff. */
.remarkdown {
  margin: 0 auto;
  padding: 0 1.5ch;
  max-width: 58ch;
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Uniformisation with h2 for consistency across pseudo .md filenames. */
.remarkdown.h1-underline h1::after {
  content: "------------------------------------------------------------------------------------------------------------------------";
}

.remarkdown code,
.remarkdown pre {
  font-family: 'firacode_retina', Courier, "Courier New", monospace;
}

/* Font-sizes and line-heights. */
.remarkdown {
  font-size: 1.1rem;
  line-height: 1.5;
}

@media (min-width: 20em) {
  .remarkdown {
    font-size: 1.05rem;
    line-height: 1.4;
  }
}

@media (min-width: 60em) {
  .remarkdown {
    font-size: 1.33rem;
    line-height: 1.55;
  }
}

/* Keep regular style for strong/em. */
.remarkdown strong {
  font-weight: bold;
}

.remarkdown em {
  font-style: italic;
}

/* Reset indentation, room needed for code + handle scrolling. */
.remarkdown pre {
  margin-left: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  max-width: 58ch;
  display: inline-block;
}

/* The main issue is that the characters * are not vertically aligned in most fonts.
See https://github.com/fvsch/remarkdown/issues/7#issuecomment-777860925 */
.remarkdown.ul-star ul>li::before,
.remarkdown strong::before,
.remarkdown strong::after {
  position: relative;
  top: 0.15em;
}

figcaption {
  text-align: right;
}

/* Soften the Markdown-like markers. */
.remarkdown ::before,
.remarkdown ::after {
  opacity: .6;
  color: var(--remarkdown-color);
}

.remarkdown details {
  position: relative;
}

.remarkdown details[open]::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -2ch;
  width: 1ch;
  overflow: hidden;
  white-space: pre;
  content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a";
  cursor: default;
}


/* Set link colors close to defaults but softer. */
a {
  color: var(--link-color);
  text-decoration: none;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;
}

a:visited {
  color: var(--link-visited-color);
}

a:focus,
a:active,
a:hover,
a:visited:hover {
  color: var(--link-hover-color);
  background-color: var(--link-hover-background-color);
  text-decoration: underline;
}

.center,
footer {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Surprisingly not browsers default. */
summary {
  cursor: pointer;
}

/* Mark and accessibility, see
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#Accessibility_concerns
for details. */
mark {
  background: var(--mark-background);
  padding: .3rem .1rem;
}

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:root,
[lang=en] {
  --mark-start: " [highlight start] ";
  --mark-end: " [highlight end] ";
}

[lang=fr] {
  --mark-start: " [début du surlignage] ";
  --mark-end: " [fin du surlignage] ";
}

mark::before {
  content: var(--mark-start);
}

mark::after {
  content: var(--mark-end);
}

/* Inline quotes and i18n, I thought browsers would have more clever defaults. */
:root,
[lang=fr] {
  --q-quotes: "« " " »" "“ " " ”";
}

[lang=en] {
  --q-quotes: "“" "”" "‘" "’";
}

q {
  quotes: var(--q-quotes);
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

/* Proven method to visually hide something but
still make it available to assistive technology
https://a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

[disabled] {
  pointer-events: none;
  opacity: 0.3;
}

/* Remove animations for folks who set their OS to reduce motion.
 1. Immediately jump any animation to the end point
 2. Remove transitions & fixed background attachment
 See: https://github.com/mozdevs/cssremedy/issues/11
*/
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

/* Currently selected anchor styling */
.remarkdown :target {
  font-weight: bold;
}

.remarkdown :target::after {
  color: var(--target-after-color);
  opacity: inherit;
  font-weight: bold;
}

aside {
  float: right;
  margin-top: -1.5lh;
}

aside p {
  margin: 0;
}