/*
Set up a series of font styles. This will just reference
the actual fonts so they are available to be used for
various elements.
*/
@import url("./fonts.css");

/*
Settings can be available that apply at the root level of
the document, which means the entire HTML page.
*/
@import url("./root.css");

/*
Include what's traditionally called "resets."
*/
@import url("./reset.css");

/*
Set up a grid for all content. The grid will set a specific
content area (safe) but also allow for popouts, gutters, and
full bleed that allows for breaking out beyond the content.
*/
@import url("./grid.css");

/*
Handle styling for the mode theme widget.
*/
@import url("./widget.css");

/*
Handle specific image styling.
*/
@import url("./images.css");

/*
Handle styling for the header.
*/
@import url("./header.css");

/*
Handle styling for the footer.
*/
@import url("./footer.css");

/*
Handle styling for the "scroll to top" progress meter.
*/
@import url("./progress.css");

html[data-mode="dark"] img {
  filter: brightness(0.8);
}

@media (prefers-color-scheme: dark) {
  :root[data-mode="system"] {
    filter: brightness(0.8);
  }
}

/*
The body is the primary element the holds everything else.
The focus on svh is that it gives you units that you can use
to fill the screen when the browser UI is at its largest and
the website content is at its smallest.
*/

body {
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  background-color: var(--clr-background);
  color: var(--clr-content);
}

/*
The styling on main has to be done in order to support the
slide-in footer.
*/

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background-color: var(--clr-background);
}

/*
The article is the core eleent of the page. This is where
primary content styling goes.
*/

article {
  margin-top: 1em;
  margin-bottom: 2em;
  font-family: var(--ff-base);
  font-size: var(--fs-400);
  line-height: 1.7;
  word-spacing: 0.16em;
}

article > h1 + p::first-letter {
  float: left;
  padding: 4px;
  padding-right: 12px;
  padding-left: 3px;
  border-left: 2px solid var(--clr-drop);
  border-top: 2px solid var(--clr-drop);
  font-family: "Kyiv Sans";
  font-size: 65px;
  line-height: 60px;
}

/*
The font style chosen for the base has specific styling for
emphasis (traditionally italic), strong (traditionally bold),
and strongly emphasized text.
*/

em {
  font-family: var(--ff-base-italic);
}

strong {
  font-family: var(--ff-base-bold);
}

strong em {
  font-family: var(--ff-base-bold-italic);
}

/*
Basic element styling can follow.
*/

p,
li,
blockquote {
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
}

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

a[href$=".pdf"]:after {
  content: " (PDF)";
  font-size: 0.8em;
  font-style: italic;
  color: var(--clr-pdf-link);
  text-decoration: none;
}

a[href$=".pdf"][data-size]:after {
  content: " (PDF, " attr(data-size) ")";
}

a[href*="http"]::after,
a[href*="https"]::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: var(--clr-external-link);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

img {
  margin: 0.8em auto;
}

blockquote {
  position: relative;
  margin: 0.2em 0;
  padding: 1.2em 1.875em 1.2em 2.68em;
}

blockquote:not([class])::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: "Times New Roman", serif;
  font-size: 4em;
  font-weight: bold;
}

blockquote:not([class])::after {
  content: "";
}

blockquote span {
  display: block;
  font-style: italic;
}

blockquote span:before {
  content: "- ";
}

h1,
h2,
h3 {
  font-family: var(--ff-heading);
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 {
  --font-weight: 120;
  --font-midline: 0;
  --font-contrast: 250;
  --flow-space: 2em;

  font-size: var(--fs-800);
  font-variation-settings: "wght" var(--font-weight),
    "CONT" var(--font-contrast), "MIDL" var(--font-midline);
  text-align: center;
}

h2 {
  --font-weight: 120;
  --font-midline: 0;
  --font-contrast: 0;

  font-size: var(--fs-700);
  font-variation-settings: "wght" var(--font-weight), "MIDL" var(--font-midline),
    "CONT" var(--font-contrast);
}

h3 {
  --font-weight: 100;
  --font-midline: 0;
  --font-contrast: 250;
  --flow-space: 1em;

  font-size: var(--fs-600);
  font-variation-settings: "wght" var(--font-weight),
    "CONT" var(--font-contrast), "MIDL" var(--font-midline);
}

h4 {
  --font-weight: 190;
  --font-midline: 0;
  --font-contrast: 250;

  font-size: var(--fs-500);
  font-variation-settings: "wght" var(--font-weight),
    "CONT" var(--font-contrast), "MIDL" var(--font-midline);
}

hr {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  border: 0;
  height: 2px;
  background-image: var(--clr-hr);
}

pre {
  padding: 0;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: var(--fs-200);
}

/* @media screen and (max-width: 820px) {
  pre {
    font-size: var(--fs-200);
  }
} */

pre code {
  --darker: hsla(235.71, 14.89%, 18.43%, 1);

  display: flex;
  align-items: center;
  padding-left: 10px;
  border: 1px solid var(--darker);
  border-radius: 10px;
  font-family: var(--ff-mono);
  font-size: 0.8em;
  word-spacing: normal;
  letter-spacing: normal;
  background-color: var(--darker);
  color: hsla(240, 33.33%, 93.53%, 1);
  box-shadow: 1px 1px var(--darker), 2px 2px var(--darker);
}

code {
  margin: 0 0.25rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--clr-code);
  border-radius: 0.125rem;
  font-family: var(--ff-mono);
  font-size: 0.9em;
  color: var(--clr-code-text);
  box-shadow: 1px 1px var(--clr-code), 2px 2px var(--clr-code);
}

var {
  margin: 0 0.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--clr-var-border);
  background-color: var(--clr-var);
  color: var(--clr-var-text);
  border: 1px solid hsla(0, 0%, 40%, 1);
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.popout {
  padding: 0.5em 0.8em;
  border: 1px solid hsla(234.86, 30.97%, 55.69%, 1);
  border-radius: 16px;
}

.note {
  margin: 1.9em;
  padding: 0.5em 0.8em;
  border: 1px solid hsla(234.86, 30.97%, 55.69%, 1);
  border-radius: 16px;
  color: var(--clr-note);
}

article :is(ul, ol) {
  margin: 1em 2em;
}

/* article :is(li:not(:last-child)) {
  margin-bottom: 1em;
} */

article ul:not(.simple) :is(li:not(:last-child)) {
  margin-bottom: 1em;
}

article ol:not(.simple) :is(li:not(:last-child)) {
  margin-bottom: 1em;
}

:where(html, body) {
  overscroll-behavior-y: none;
}

:where(p, blockquote, img, pre, ul) + p:not(.note):not(.popout) {
  text-indent: var(--para-indent);
}