/*
  Global styles

  Low-specificity, 0-global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

html {
  font-size: 20px;
}

body {
  background: var(--color-light);
  color: var(--color-dark);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  margin: 0;
}

main {
  container-type: inline-size;
}

main:not([class]) {
  padding-block: var(--space-xl);
}

/* Headings */

:is(h1, h2, h3, h4) {
  font-weight: var(--font-regular);
  line-height: var(--leading-standard);
  max-width: 70ch;
  text-wrap: balance;
}

h1,
.heading-one {
  font-size: var(--size-step-5);
  font-weight: var(--font-light);
}

h2,
.heading-two {
  font-size: var(--size-step-4);
}

h3,
.heading-three {
  font-size: var(--size-step-3);
}

:is(h4, h5, h6),
.heading-four,
.heading-five,
.heading-six {
  font-size: var(--size-step-2);
}

p,
.body {
  font-size: var(--size-step-0);
  font-weight: var(--font-light);
}

small {
  font-size: var(--size-step--1);
}

ins {
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-light);
  padding-inline: 0.3em;
}

/* Code */

:is(code, kbd, samp) {
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
}

/* This is quite a new property, so we want code styles to at least, not be huge or tiny */
@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}

pre:has(code) {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

pre code {
  border: none;
  background: none;
  padding: 0;
}

kbd {
  border: none;
  outline: 1px solid;
  padding-block-end: 0.1em;
}

var {
  font-style: normal;
  font-weight: var(--font-medium);
}

q {
  font-style: italic;
}

/* Lists */

ul:not([class]) {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}

ul:not([class]) > li {
  padding-inline-start: var(--space-xs);
}

:is(ol, ul):not([class]) li + * {
  margin-block-start: var(--flow-space, var(--space-xs));
}

ul ::marker {
  font-size: 0.8lh;
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */
[role="list"],
[role="tablist"] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-medium);
}

dt + dd {
  margin-block-start: var(--space-xs);
}

dd + dt {
  margin-block-start: var(--space-s);
}

dd {
  margin-inline-start: 1.5ch;
}

/* Blockquotes */

blockquote {
  margin-inline: 0;
  color: var(--color-primary);
}

blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-mid);
  font-size: var(--size-step--1);
}

blockquote q {
  font-style: normal;
}

/* Media */

:is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step--1);
  font-family: monospace;
}

/* Tables */

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

th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  vertical-align: top;
  padding: var(--space-xs) var(--space-s);
  box-shadow: inset 0 -1px 0 var(--color-tint);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

/* Interactions */
a:not([class]) {
  text-decoration: none;
  font-weight: var(--font-regular);
}

a:not([class]):hover {
  text-decoration: 0.1ex underline;
  text-underline-offset: 0.2lh;
}

:is(h1, h2, h3, h4) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.1lh);
}

/*
 * Firefox is the only browser that doesn't outline the whole element unless you
 * make it display: inline-block. That in itself causes multiple flow issues so
 * we can detect it, using its own vendor prefix and reduce focus offset.
 */
@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:target {
  scroll-margin-block: 5lh;
}

::selection {
  color: var(--color-light);
  background: var(--color-primary);
}

/* Misc elements */

hr {
  border: none;
  border-block-start: var(--stroke);
  margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
  width: auto;
  height: 1lh;
}

svg {
  flex-shrink: 0;
}

svg[role="img"][width][height] {
  width: revert;
  height: revert;
  padding: var(--space-xs);
}

/* Details, summary */

summary {
  font-weight: var(--font-bold);
  cursor: pointer;
}

details[open] summary {
  margin-block-end: var(--space-s);
}