/* === GLOBAL =============================================================== */

:root {
  /* --- CONFIGURATION ---------------------------------------------------- */

  /* --- typographic baselines --- */
  --type-ratio: 1.2;
  --type-base-size: 1rem;

  /* --- typographic sizes --- */
  --type-sm: calc(var(--type-base-size) / var(--type-ratio));
  --type-md: calc(var(--type-base-size) * var(--type-ratio));
  --type-lg: calc(var(--type-md) * var(--type-ratio));
  --type-xl: calc(var(--type-lg) * var(--type-ratio));
  --type-2xl: calc(var(--type-xl) * var(--type-ratio));
  --type-3xl: calc(var(--type-2xl) * var(--type-ratio));
  --type-4xl: calc(var(--type-3xl) * var(--type-ratio));

  /* line sizes */
  --line-sm: 0.09rem;
  --line-md: 0.15rem;
  --line-lg: 0.2rem;
  --line-xl: 0.3rem;

  /* the maximum content width */
  --content-width: 82ch;
  --focus-outline: var(--line-lg) solid color-mix(in srgb, var(--color-action) 40%, var(--mix-to-bg));
  --flow-gap: 1em;

  /* normal text */
  --text-color: var(--foreground-color);
  --text-font: "Helvetica", sans-serif;
  --text-mono-font: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  --text-weight: 200;
  --text-bold-weight: 400;
  --text-line-height: 1.4;

  /* headlines */
  --headline-font: sans-serif;
  --headline-color: var(--foreground-color);
  --headline-weight: var(--text-bold-weight);
  --headline-line-height: 1;

  /* separators */
  --separator-color: var(--foreground-color);
  --separator-border: var(--line-md) solid var(--separator-color);
}

@media (prefers-color-scheme: light) {
  :root {
    --mix-to-bg: white;
    --mix-to-fg: black;

    --color-neutral: grey;
    --color-action: RebeccaPurple;
    --color-informative: orange;
    --color-negative: crimson;
    --color-positive: seaGreen;

    --background-color: color-mix( in hsl, var(--mix-to-bg) 95%, var(--color-neutral));
    --foreground-color: color-mix( in hsl, var(--mix-to-fg) 40%, var(--color-neutral));
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --mix-to-bg: black;
    --mix-to-fg: white;

    --color-neutral: grey;
    --color-action: BlueViolet;
    --color-informative: orange;
    --color-negative: crimson;
    --color-positive: seaGreen;

    --background-color: color-mix( in hsl, var(--mix-to-bg) 75%, var(--color-neutral));
    --foreground-color: color-mix( in hsl, var(--mix-to-fg) 50%, var(--color-neutral));
  }
}

/* Text Selection */
::selection {
  background: var(--color-action);
  color: var(--background-color);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/*  Remove all animations, transitions and smooth scroll for people that
    prefer not to see them
*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Normalisation ======================================================== */


/* === Base ================================================================= */

/* -- body ---------------------------------------------------------------------

    This is the basic implementation of how the document should look like.
    All other elements extend from this.
*/
body {
    /* reset */
    margin: 0;
    min-height: 100vh;
    text-rendering: optimizespeed;

    /* base style */
    color: var(--text-color);
    background: var(--background-color);
    size: var(--type-md);
    font-family: var(--text-font);
    font-weight: var(--text-weight);
    line-height: var(--text-line-height);
    accent-color: var(--color-action);
    display: flex;
    flex-direction: column;
}


/* Remove default margin */
p,
figure {
  margin: 0;
}

/* --- Horizontal separator ------------------------------------------------- */
hr {
    --flow-gap: 2rem;

    border: 0;
    border-block-end: var(--separator-border);
    margin-block-end: var(--flow-gap);
}
li > hr {
  margin-block-end: .5rem;
}

/* --- Headlines ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  /* reset */
  margin: 0;

  /* base style */
  font-family: var(--headline-font);
  line-height: var(--headline-line-height);
  color: var(--headline-color);
}

h1 { font-size: var(--type-4xl); }
h2 { font-size: var(--type-3xl); }
h3 { font-size: var(--type-2xl); }
h4 { font-size: var(--type-lg); }
h5 { font-size: var(--type-md); }
h6 { font-size: var(--type-sm); }

/* self-referencing headlines */

h1[id] a[href^="#"],
h2[id] a[href^="#"],
h3[id] a[href^="#"],
h4[id] a[href^="#"],
h5[id] a[href^="#"],
h6[id] a[href^="#"],
h1 a[id][href^="#"],
h2 a[id][href^="#"],
h3 a[id][href^="#"],
h4 a[id][href^="#"],
h5 a[id][href^="#"],
h6 a[id][href^="#"] {
  color: var(--foreground-color);
  text-decoration-color: var(--color-action);

  &::before {
    content: "#";
    color: var(--color-action);
    opacity: .5;
  }
}

@media (min-width: 650px) {
  h1[id] a[href^="#"],
  h2[id] a[href^="#"],
  h3[id] a[href^="#"],
  h4[id] a[href^="#"],
  h5[id] a[href^="#"],
  h6[id] a[href^="#"],
  h1 a[id][href^="#"],
  h2 a[id][href^="#"],
  h3 a[id][href^="#"],
  h4 a[id][href^="#"],
  h5 a[id][href^="#"],
  h6 a[id][href^="#"] {
    display: inline-block;
    position: relative;

    &::before {
      position: absolute;
      display: inline-block;
      left: -0.8em;
    }
  }
}

/* Headlines with kicker */

h1 > small,
h2 > small,
h3 > small,
h4 > small,
h5 > small,
h6 > small {
  display: block;
  font-weight: var(--text-weight);
  font-size: 0.5em;
  padding-block-end: 0.1em;
}

h5 > small {font-size: .8em; padding-block-end: .5em;}
h6 > small {font-size: 1em; padding-block-end: .5em;}

/* --- Ordered & unordered lists -------------------------------------------- */

ul,
menu,
ol {
  padding-inline-start: 1rem;

  /*  Remove list styles on ul, ol elements with a list role, which suggests
      default styling will be removed
  */
  &[role="list"] {
    list-style: none;
    padding: 0;
  }
}

/* Setting the indention only for lists without the `list` role.
  Lists with that role come with their own style anyway. */
ol:not([role="list"]),
ul:not([role="list"]) {
  & > li {
    padding-inline-start: 0.5rem;
  }

  & li > * > li,
  & > * + *  {
    padding-block-start: 1rem;
  }
}

/* Only the unorderd list has a custom list style. */
ul:not([role="list"]) {
  list-style-type: "–";
}

/* --- Menu lists ----------------------------------------------------------- */

menu {
  --separator-border: var(--line-sm) solid var(--foreground-color);

  border: var(--line-md) solid var(--foreground-color);
  border-radius: var(--line-lg);
}

menu a,
menu button {
  display: inline-block;
  padding: 0.5rem 1rem;
  width: 100%;
  text-decoration: none;
  font-weight: var(--text-bold-weight);
  background: var(--background-color);
  color: var(--color-action);
  border: unset;
  border-radius: 0;
  text-align: left;

  &:hover,
  &:focus-visible {
    color: var(--background-color);
    background: var(--color-action);
  }
}

/* --- Definition lists ----------------------------------------------------- */

dl > dt {
  font-weight: var(--text-bold-weight);
}

dd + dt {
  margin-block-start: var(--flow-gap);
}

/* --- Tables --------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-style: italic;
}

tr > * {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem;
}

tr > *:first-child {
  padding-inline-start: 0;
}

tr > *:last-child {
  padding-inline-end: 0;
}

th {
  font-weight: var(--text-bold-weight);
}

table tr:first-child > th[role="columnheader"] {
  vertical-align: bottom;
  white-space: nowrap;
}

table th[scope="row"] {
  font-weight: var(--text-weight);
}

tr {
  border-bottom: var(--line-sm) solid var(--foreground-color);

}

table > tr:first-child,
thead tr {
  border-width: var(--line-md);
}

@media (max-width: 650px) {
  [role="columnheader"] {
    display: none;
  }

  table tr:nth-of-type(2) {
    border-top: var(--separator-border);
  }

  tr th[role="rowheader"] {
    display: block;
    font-weight: var(--text-bold-weight);
  }

  td {
    display: block;
    padding-inline: 0;
  }

  tr > *:first-child {
    padding-block-start: 1rem;
  }

  tr > *:last-child {
    padding-block-end: 1rem;
  }

  td::before {
    content: attr(data-label) ": ";
    font-weight: var(--text-bold-weight);
  }
}

/* --- Forms ---------------------------------------------------------------- */

form > * + * {
    margin-block-start: var(--flow-gab, 1em);
}

form p label,
form p > small {
  display: inline-block;
}

form p label + small,
form p label + input,
form p label + * + input,
form p label + select,
form p label + * + select {
  display: block;
}

fieldset {
    border: var(--separator-border);
    border-radius: 0.2rem;
    padding: 1rem;
}

fieldset > * + * {
    margin-block-start: var(--flow-gap, 1rem);
}

fieldset legend {
    color: var(--separator-color);
    font-family: var(--headline-font);
    font-weight: var(--headline-weight);
}

textarea,
input[type="email"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="text"] {
  --field-foreground: var(--foreground-color);
  --field-background: color-mix(in srgb, var(--mix-to-bg) 95%, var(--background-color));
  --field-border: var(--line-md) solid color-mix(in srgb, var(--mix-to-bg) 50%, var(--field-foreground));
  --field-outline: unset;

  background: var(--field-background);
  color: var(--field-foreground);
  border: var(--field-border);
  outline: var(--field-outline);
  outline-offset: 0.1rem;
  border-radius: 0.1rem;
  padding: 0.3em 0.5rem;

  &:focus-visible {
    --field-border: var(--line-md) solid var(--color-action);
    --field-outline: var(--focus-outline);
  }

  &:hover {
    --field-border: var(--line-md) solid var(--color-action);
  }

  &:disabled {
    --field-background: color-mix(in hsl, var(--mix-to-bg) 85%, var(--color-neutral));
    --field-border: var(--line-md) solid color-mix(in hsl, var(--mix-to-bg) 60%, var(--color-neutral));
  }
}

input ~ span {display: none;}

@supports selector(:user-invalid) {
  input:user-invalid:not(:focus) ~ span {
    --field-foreground: var(var(--color-negative));

    display: block;
  }

  input:user-invalid:not(:focus) {
    --field-border: var(--line-md) solid var(--color-negative);
    --field-outline: var(--line-lg) solid color-mix(in srgb, var(--mix-to-bg) 70%, var(--color-negative));

    outline-offset: 0;
  }

  input:not([type="submit"]):user-valid:not(:focus) {
    --field-border: var(--line-md) solid var(--color-positive);
    --field-outline: var(--line-lg) solid color-mix(in srgb, var(--mix-to-bg) 70%, var(--color-positive));

    outline-offset: 0;
  }
}

@supports not selector(:user-invalid) {
  input:not(:focus):not(:placeholder-shown):required:invalid ~ span {
    --field-foreground: var(var(--color-negative));

    display: block;
  }

  input:not(:focus):not(:placeholder-shown):required:invalid {
    --field-border: var(--line-md) solid var(--color-negative);
    --field-outline: var(--line-lg) solid color-mix(in srgb, var(--mix-to-bg) 70%, var(--color-negative));

    outline-offset: 0;
  }

  input:not(:focus):not(:placeholder-shown):required:valid {
    --field-border: var(--line-md) solid var(--color-positive);
    --field-outline: var(--line-lg) solid color-mix(in srgb, var(--mix-to-bg) 70%, var(--color-positive));

    outline-offset: 0;
  }
}

select:not([multiple]),
input[type="submit"],
input[type="reset"],
button,
body [role="button"] {
  --button-foreground: var(--background-color);
  --button-background: var(--color-action);
  --button-border: var(--line-md) solid color-mix(in srgb, var(--mix-to-fg) 20%, var(--color-action));
  --button-outline: unset;

  color: var(--button-foreground);
  background: var(--button-background);
  border: var(--button-border);
  outline: var(--button-outline);
  outline-offset: var(--line-md);
  text-decoration: none;
  border-radius: 0.1rem;
  padding: 0.5em 1rem 0.4em 1rem;
  cursor: pointer;

  &:focus-visible {
    --button-border: var(--line-md) solid color-mix(in srgb, var(--mix-to-fg) 20%, var(--color-action));
    --button-outline: var(--focus-outline);
  }

  &:hover {
    --button-foreground: var(--background-color);
    --button-background: color-mix(in srgb, var(--mix-to-fg) 10%, var(--color-action));
    --button-border: var(--line-md) solid color-mix(in srgb, var(--mix-to-fg) 30%, var(--color-action));
    color: var(--button-foreground);
  }

  &:disabled {
    --button-foreground: var(--foreground-color);
    --button-background: color-mix(in hsl, var(--mix-to-bg) 85%, var(--button-foreground));
    --button-border: var(--line-md) solid color-mix(in hsl, var(--mix-to-bg) 65%, var(--button-foreground));
    --button-outline: unset;
  }
}

input[type="range"]:has( + datalist) {
  width: var(--input-range-size, 12em);
}

input[type="range"] + datalist {
  width: var(--input-range-size, 12em);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  text-align: center;
  padding-top: .3em;
  padding-left: .4em;
  padding-right: .2em;
}

input[type="range"][orient="vertical"] {
  writing-mode: bt-lr;
  appearance: slider-vertical;
}

select {
    line-height: 1.5;
    padding: 0.5em 1rem 0.4em 1rem;
}

/* --- Preformatted text ---------------------------------------------------- */

pre {
  --code-background: color-mix(in srgb, var(--mix-to-fg) 5%, var(--background-color));

  tab-size: 4;
  white-space: pre-wrap;
  background: var(--code-background);
  border-radius: var(--line-lg);
  padding: var(--flow-gap);
}

pre code var {
  color: var(--color-informative);
  font-style: normal;
}
pre code dfn {
  color: var(--color-action);
  font-style: normal;
}
pre code strong {
  color: var(--color-negative);
  font-style: normal;
}
pre code em {
  color: var(--color-positive);
  font-style: normal;
}
pre samp {
  color: color-mix(in hsl, var(--mix-to-bg) 30%, var(--foreground-color));
}
pre samp kbd {
  color: var(--color-action);
  background: var(--code-background);
  font-weight: var(--text-bold-weight);
}
pre samp strong {
  color: var(--foreground-color);
}

/* --- Quotes --------------------------------------------------------------- */

blockquote {
  --quote-border: var(--line-xl) solid var(--foreground-color);

  padding-left: 1rem;
  border-left: var(--quote-border);
}

blockquote > * + * {
  margin-block-start: var(--flow-gap, 1em);
}

/* --- Figures --- */

figure blockquote + figcaption {
  margin-block-start: 0.5rem;
  text-align: right;
}

/* --- Dialogs -------------------------------------------------------------- */

dialog {
  --dialog-border: var(--separator-border);
  --dialog-background: var(--background-color);
  --dialog-foreground: var(--foreground-color);
  --dialog-max-width: var(--content-width);

  max-width: var(--dialog-max-width);
  color: var(--dialog-foreground);
  background: var(--dialog-background);
  border: var(--dialog-border);
  border-radius: 0.2rem;

  & > * + * {
    margin-block-start: var(--flow-gap, 1rem);
  }

  &:target {
    display: block;
  }

  &[data-mode="modal"] {
    position: fixed;
  }
}

*:has(dialog[data-mode="modal"]) {
  position: relative;
  z-index: 1;
}

dialog[data-mode="modal"]::after {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  height: 100vh;

  left: 0;
  top: 0;
  margin-top: -25%;
  margin-left: calc(((100vw/2) - (var(--dialog-max-width)/2)) * -1);

  background: rgba(255, 0, 0, .5);
  z-index: -2;
  backdrop-filter: blur(4px);
}

/* --- Aside ---------------------------------------------------------------- */

aside {
  border: 0.1rem solid var(--foreground-color);
  border-radius: 0.2rem;
  padding: 1rem;

  & > * + * {
    margin-block-start: var(--flow-gap, 1rem);
  }

  &:not([role]) {
    float: left;
    margin-right: 1rem;
    max-width: 50%;
  }
}

@media (min-width: 700px) {
  aside:not([role]) {
    margin-left: calc(var(--type-md) * -1);
    max-width: 33.333%;
  }
}

p[role="note"] {
  border: 0.1rem solid var(--foreground-color);
  border-radius: 0.2rem;
  padding: 1rem;
}

p[role="note"],
aside[role="note"] {
  --note-background: var(--background-color);
  --note-border-color: var(--foreground-color);

  background: var(--note-background);
  border-color: var(--note-border-color);

  &[data-status="info"] {
    --note-background: color-mix(in hsl, var(--mix-to-bg) 75%, var(--color-positive));
    --note-border-color: color-mix(in hsl, var(--mix-to-fg) 40%, var(--color-positive));
  }

  &[data-status="warn"] {
    --note-background: color-mix(in hsl, var(--mix-to-bg) 75%, var(--color-informative));
    --note-border-color: color-mix(in hsl, var(--mix-to-fg) 40%, var(--color-informative));
  }

  &[data-status="error"] {
    --note-background: color-mix(in hsl, var(--mix-to-bg) 75%, var(--color-negative));
    --note-border-color: color-mix(in hsl, var(--mix-to-fg) 40%, var(--color-negative));
  }
}

/* --- Details -------------------------------------------------------------- */

details {
  border: var(--separator-border);
  border-radius: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;

  & > * + * {
      margin-block-start: var(--flow-gap, 1rem);
  }
}

details summary {
  color: var(--text-color);
  font-weight: bold;
  cursor: default;
  padding: 1rem;
  border-radius: 0.1rem;
  margin-left: -1rem;
  margin-right: -1rem;

  &:hover {
    color: var(--color-action);
    cursor: pointer;
  }

  &:focus-visible {
    color: var(--color-action);
    outline: var(--focus-outline);
    outline-offset: -0.2rem;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
  }

  ::marker {
    color: var(--color-action);
  }
}

details[open] {
  padding-block-end: var(--flow-gap, 1rem);

  & summary {
    border-bottom: var(--line-sm) solid var(--foreground-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: var(--flow-gap);
  }
}

/* --- Media ---------------------------------------------------------------- */

p > img {
  float: left;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

main > img {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

@media (min-width: 700px) {
  p > img {
    margin-left: calc(var(--type-md) * -1);
  }
}

/* --- Links ---------------------------------------------------------------- */

a {
  --link-underline-size: 0.1rem;

  color: var(--color-action);
  text-underline-offset: 0.1em;
  text-decoration-color: color-mix(in srgb, var(--mix-to-bg) 50%, currentColor);
  text-decoration-thickness: var(--link-underline-size);

  &:focus,
  &:hover {
    color: color-mix(in srgb, var(--mix-to-fg) 20%, var(--color-action));
    text-decoration-color: currentColor;
  }

  &:focus-visible {
    outline: var(--focus-outline);
  }

  &[hreflang]::after {
    content: " (" attr(hreflang) ")";
  }
}
/*
a[href^="tel:"]::before { content: "📱"; }
a[href^="mailto:"]::before {content: "✉️"}
a[href^="https:"]::before {content: "🌐"}
*/

/* --- Other inline elements --- */
/*
abbr {}
b {}
code {}
data {}
dfn {}
em {}
i {}
mark {}
q {}
s {}
samp {}
small {}
strong {}
sub {}
sup {}
time {}
var {}
*/

kbd {
  background: var(--foreground-color);
  color: var(--background-color);
  border-radius: var(--line-md);
  padding-inline-start: 0.4em;
  padding-inline-end: 0.4em;
}

u {
  text-decoration: wavy underline var(--color-negative);
  text-underline-offset: 0.1em;
}

del {color: var(--color-negative)}

ins {
  color: var(--color-positive);
  text-underline-offset: 0.1em;
}

mark {
    background: var(--color-informative);
    padding: 0.1em 0.4em;
}

/* === COMPOSITION ========================================================== */

/* header */

body > header:not([class]) {
    --background-color: color-mix(in hsl, var(--mix-to-bg) 80%, var(--color-neutral));

    background: var(--background-color);
    padding: 2rem;
    margin-block-end: 2rem;
    display: grid;
    grid-template-columns: repeat(
        var(--grid-placement, auto-fit),
        minmax(var(--grid-min-item-size, 16rem), 1fr)
    );
    justify-content: center;
    gap: var(--gutter, var(--type-md));
}

/* Header menut */

body > header details {
  position: relative;
}

body > header details > summary {
  padding: 0.5rem 1rem;
}

body > header details[open] {
  padding-bottom: 0;

  & > summary {
    margin-block-end: 0;
    border-bottom: 0;
  }
}

body > header details > menu {
  position: absolute;
  z-index: 10;
  left: 0;
  margin-bottom: 0;
  background: var(--background-color);
}

/* main content area */
main:not([class]) {
    box-sizing: content-box;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline-start: var(--type-md);
    padding-inline-end: var(--type-md);
    flex-grow: 1;
}

body main:not([class]) > * + * {
    margin-block-start: var(--flow-gap, 1em);
}


/* page footer */

body > footer {
    --background-color: color-mix(in hsl, var(--mix-to-bg) 80%, var(--color-neutral));

    padding: 2rem;
    background: var(--background-color);
    margin-block-start: 2rem;
}


/* === UTILITIES ============================================================ */

/* === BLOCKS =============================================================== */

/* === EXCEPTIONS =========================================================== */