:root {
  /* Constant used in some calcs */
  --nav-height: 61px;

  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-green: #0c7646;
  --brand-yellow: #ebba27;
  --brand-yellow-highlight: #cea11c;

  --font-size-s: 1rem;
  --font-size-m: 1.2rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-hero: 5rem;

  --content: var(--brand-black);
  --bg: var(--brand-white);

  --link: #957000;
  --link-highlight: #b08501;

  --spacing-s: 6px;
  --spacing-m: 10px;
  --spacing-l: 18px;
  --spacing-xl: 35px;

  @media (prefers-color-scheme: dark) {
    --content: var(--brand-white);
    --bg: var(--brand-black);

    --link: var(--brand-yellow);
    --link-highlight: var(--brand-yellow-highlight);
  }

  @media screen and (min-width: 750px) {
    --spacing-xl: 64px;
  }
}

html {
  background-color: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--spacing-m));
  line-height: 1.6;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main,
.footer-content {
  width: 90%;
  margin: 0 auto;

  @media screen and (min-width: 750px) {
    width: 60%;
  }
}

main {
  flex: 1;
}

/* ---------------------------------------------------- */
/* Native elements, baseline styling */
/* ---------------------------------------------------- */

figure,
ul,
ol {
  margin: 0;

  li {
    padding-bottom: var(--spacing-s);
  }

  li:last-child {
    padding-bottom: 0;
  }
}

ul {
  padding: 0;
  list-style: none;
}

ol {
  padding: 0;
  list-style-position: inside;

  h3 {
    display: inline;
  }
}

p {
  margin: var(--spacing-s) 0;
}

p,
small,
span,
li,
figcaption,
h1,
h2,
h3 {
  color: var(--content);
}

p,
span,
li,
figcaption {
  font-size: var(--font-size-m);
}

small {
  font-size: var(--font-size-s);
}

a {
  font-size: var(--font-size-m);
  color: var(--link);

  &:hover,
  &:focus {
    color: var(--link-highlight);
  }
}

h1,
h2 {
  font-size: var(--font-size-l);

  margin-top: var(--spacing-l);
  margin-bottom: 0;
}

h3 {
  margin-top: var(--spacing-m);
  margin-bottom: 0;
}

/* Elements that always have a black background */
nav,
footer,
#mobile-nav-menu {
  background-color: var(--brand-black);

  a {
    color: var(--brand-yellow);

    &:hover,
    &:focus {
      color: var(--brand-yellow-highlight);
    }
  }

  p,
  span,
  li,
  figcaption {
    color: var(--brand-white);
  }
}

/* Header bar */
nav {
  width: 100%;
  box-sizing: border-box;

  border-bottom: 1px solid var(--content);
  padding: var(--spacing-s) var(--spacing-m);

  figcaption {
    color: var(--brand-white);
    font-size: var(--font-size-l);
  }
}

button {
  color: var(--content);
  background-color: var(--bg);
  border: 1px solid var(--content);

  &:hover,
  &:focus {
    background-color: var(--content);
    color: var(--bg);
  }
}

footer {
  margin-top: var(--spacing-l);
  padding: var(--spacing-l) 0;
  border-top: 1px solid var(--content);
}

/* ---------------------------------------------------- */
/* Targeted elements */
/* ---------------------------------------------------- */

#mobile-nav-menu {
  position-area: bottom;
  margin: var(--spacing-s) var(--spacing-m);
  padding: var(--spacing-s) var(--spacing-m);
  border: 1px solid var(--brand-white);

  &::backdrop {
    background: rgba(0, 0, 0, 0.35);
  }

  transform: translateX(200px);

  transition:
    transform 0.2s ease-out,
    opacity 0.2s ease-out,
    display 0.2s;
  transition-behavior: allow-discrete;

  &:popover-open {
    transform: translateX(0);
    opacity: 1;

    @starting-style {
      transform: translateX(200px);
      opacity: 0;

      @media (prefers-reduced-motion: reduce) {
        transform: unset;
      }
    }
  }
}

.social-link {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--spacing-l);

  @media screen and (min-width: 750px) {
    flex-direction: row;
  }
}

/* ---------------------------------------------------- */
/* Utils & microclasses akin to Tailwind */
/* ---------------------------------------------------- */

.font-size-xl {
  font-size: var(--font-size-xl);
}

.horizontal-align {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-m);
}

.align-items-center {
  align-items: center;
}

.justify-space-between {
  justify-content: space-between;
}

.gap-s {
  gap: var(--spacing-s);
}

.gap-m {
  gap: var(--spacing-m);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

.display-flex {
  display: flex;
}

.display-inline-flex {
  display: inline-flex;
}

.display-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-m);
}

.grid-cols-6 {
  grid-column: span 6;
}

.grid-cols-12 {
  grid-column: span 12;
}

/* Placeholder */
.placeholder-img {
  background-color: var(--brand-white);
  height: 48px;
  width: 48px;
}

@media screen and (min-width: 750px) {
  .md\:display-block {
    display: block;
  }

  .md\:display-none {
    display: none;
  }

  .md\:display-flex {
    display: flex;
  }

  .md\:grid-cols-4 {
    grid-column: span 4;
  }

  .md\:grid-cols-8 {
    grid-column: span 8;
  }
}