/* Video insert */

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {
  display: none;
}

.video.video--vimeo {}


/* Base variables */

:root {
  --font-size: 17px;
  --line-height: 24px;

  --font-size--h1: clamp(48px, 9vw, 96px);
  --font-size--h2: clamp(28px, 4vw, 46px);
  --font-size--h3: 22px;

  --body-font: "Fluxisch Else";
  --header-font: "Fluxisch Else Bold";

  --body-background-color: #f3f3f3;
  --text-color: #111;
  --quiet-color: #6b6b6b;

  --link-color: black;
  --link-color--visited: black;
  --link-color--hover: black;

  --accent-color: #ff5c00;
  --accent-soft: #ffe1cf;
  --line-color: #111;
}


/* Page */

html {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--body-font);
  background: var(--body-background-color);
  color: var(--text-color);
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--body-font);
  background: var(--body-background-color);
  color: var(--text-color);

  max-width: 100ch;
  margin: calc(2 * var(--line-height)) auto;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 3fr 1fr;
  padding-left: 10ch;
  column-gap: calc(2 * var(--line-height));
}


/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--header-font);
  font-weight: normal;
}

h1 {
  font-size: var(--font-size--h1);
  line-height: 0.9;
  letter-spacing: -0.065em;
  margin: 0 0 calc(5 * var(--line-height)) 0;
  max-width: 20ch;
}

h1::after {
  content: "";
  display: block;
  width: 2.5ch;
  height: 8px;
  margin-top: calc(1.25 * var(--line-height));
  background: var(--accent-color);
}

h2 {
  font-size: var(--font-size--h2);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: calc(4 * var(--line-height)) 0 var(--line-height) 0;
  padding-top: calc(0.75 * var(--line-height));
  border-top: 3px solid var(--line-color);
}

h2::before {
  content: "↪ ";
  color: var(--accent-color);
}

h3 {
  font-size: var(--font-size--h3);
  line-height: var(--line-height);
  letter-spacing: -0.025em;
  margin: calc(2.5 * var(--line-height)) 0 calc(0.5 * var(--line-height)) 0;
  padding-left: 1ch;
  border-left: 6px solid var(--accent-color);
}

h4 {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;

  font-family: var(--header-font);
  font-size: 18px;
  line-height: var(--line-height);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--quiet-color);

  margin: calc(3 * var(--line-height)) 0 calc(0.25 * var(--line-height)) 0;
  padding: 0;

  break-inside: avoid;
  break-after: avoid;
}

h4 + h2 {
  margin-top: 0;
}

h5,
h6 {
  font-size: 14px;
  line-height: var(--line-height);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--quiet-color);
  margin: calc(1.5 * var(--line-height)) 0 0 0;
}


/* Etherpad-friendly spacing

Single Enter creates a tight new line.
Empty line creates paragraph space.

This avoids adding <br/> or class="compact-lines" by hand.
*/

p {
  margin: 0;
}

p:empty,
p:has(> br:only-child) {
  display: block;
  min-height: var(--line-height);
}

p + h2 {
  margin-top: calc(4 * var(--line-height));
}

p + h3 {
  margin-top: calc(2.5 * var(--line-height));
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 0;
}

/* Optional manual classes, still available when needed */

.compact-lines {
  white-space: pre-line;
  line-height: var(--line-height);
  margin: 0;
}

.compact-lines p {
  margin: 0;
}

.loose-lines {
  white-space: pre-line;
  line-height: var(--line-height);
  margin: 0 0 var(--line-height) 0;
}

.loose-lines p {
  margin: 0 0 var(--line-height) 0;
}

main h3 {
  margin-top: 12px !important;
  margin-bottom: 2px !important;
}

main h3 + .visible-intro {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.visible-intro {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.collapse-button {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}


b,
strong {
  font-family: var(--header-font);
  font-weight: normal;
  border: 0;
  background: var(--accent-soft);
  padding: 0 0.25em;
  border-radius: 0.18em;
}

em {
  color: var(--quiet-color);
}


/* Links */

a {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-color--hover);
  text-decoration: none;
}

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

main a:hover {
  background: black;
  color: var(--body-background-color);
  text-decoration: none;
}


/* Header and navigation */

header {
  display: flex;
  vertical-align: baseline;
  margin: 2em 0;
  grid-column-end: span 2;
}

.navbar--organisation {
  flex: 0 0 75mm;
  margin-left: calc(-75mm - 2ch);
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

nav ul li {
  margin: 0 2ch 1ch 0;
}

.navbar--reports--subnav,
.navbar--pages--subnav,
.navbar--labels--subnav {
  display: none;
}


/* Main */

main {
  position: relative;
}

main ul,
main ol {
  padding-left: 2ch;
}

main li {
  margin-bottom: calc(0.5 * var(--line-height));
}

main li::marker {
  color: var(--accent-color);
}


/* References which are not direct links */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
  color: inherit;
  text-decoration: none;
}

[data-link-target-type="label"]:hover {
  color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
  text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
  text-decoration: underline;
  text-decoration-style: dotted;
}

[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family: var(--body-font);
}

.link-source {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 85%;
}

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}


/* Hidden instruction content */

.instruction {
  display: none;
}


/* Tags */

.tag--question {
  font-size: 110%;
  color: green;
}

.tag--important {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.tag--trouble {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.tag--commentary {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.tag--citation {
  background-color: beige;
}


/* Going hybrid labels */

.going-hybrid--labels ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.going-hybrid--labels ul li {
  margin-top: var(--line-height);
}

.going-hybrid--labels ul li a {
  padding: .3em .5em;
  border: 2px solid;
  text-decoration: none;
}

.going-hybrid--labels ul li a:hover {
  background: white;
}


/* Media */

img {
  max-width: 100%;
}


/* Responsive layout */

@media screen and (max-width: 800px) {
  body {
    padding-left: 0;
    margin-left: 6ch;
    margin-right: 2ch;
    display: block;
  }

  .navbar--organisation {
    position: absolute;
    margin-left: -2ch;
    transform: rotate(90deg);
    transform-origin: top left;
  }

  h1 {
    max-width: none;
  }
}

@media screen and (min-width: 800px) and (max-width: calc(116ch + 150mm)) {
  body {
    margin-left: calc(75mm + 4ch);
    margin-right: 2ch;
    padding-left: 0;
  }
}

/* Labels / references - screen, safe patch */

/* Keep the tagged text exactly as normal text */
main [data-link-target-type="label"],
main [data-link-target-type="label"]:visited {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Cancel the general main a:hover effect only for labels */
main [data-link-target-type="label"]:hover,
main [data-link-target-type="label"]:focus,
main [data-link-target-type="label"]:active {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Remove dotted underline from the text that has the label */
main [data-link-target-type="label"] .reference--label--inline {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Keep the margin label in the margin, only change appearance */
main [data-link-target-type="label"] .reference--target {
  color: red !important;
  font-size: 40% !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

/* Do not underline the margin label on hover */
main [data-link-target-type="label"]:hover .reference--target {
  color: red !important;
  text-decoration: none !important;
}

/* If a label wraps a heading, keep it block-like so the heading layout does not collapse */
main [data-link-target-type="label"]:has(> h1),
main [data-link-target-type="label"]:has(> h2),
main [data-link-target-type="label"]:has(> h3),
main [data-link-target-type="label"]:has(> h4),
main [data-link-target-type="label"]:has(> h5),
main [data-link-target-type="label"]:has(> h6) {
  display: block;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Fix spacing when a labelled h2 is followed by a paragraph */
main [data-link-target-type="label"]:has(> h2) + p {
  margin-top: 0;
}

/* Space between label name and tagged text in the index */
.index .reference--label,
.index .reference-label--target--label {
  margin-right: 0.5ch;
}