@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Ysabeau:ital,wght@0,1..1000;1,1..1000&display=swap');

/* Breakpoint `@media (min-width: 1240px)` */

html {
  font-size: 18px;

  --color-accent: #2563eb;
  --color-border: #d1d1d1;
  --color-focus: var(--color-accent);
  --color-text: #000000;
  --color-text-table-header: #ffffff;

  --bg-nav: rgba(0, 0, 0, 0.02);
  --bg-active-page: rgba(0, 0, 0, 0.05);
  --bg-active-location: rgba(0, 0, 0, 0.025);
  --bg-active-location-bullet: rgba(0, 0, 0, 0.5);

  --bg-table-row: rgba(0, 0, 0, 0.1);
  --bg-table-header: #000000;

  --bg-scrollbar: #9f9f9f;

  --bg-texture: url("img/bg-light.jpg");
  --bg-base: #fef8f8;

  --focus-outline-width: 2px;

  --font-title: 'Ysabeau';
  --font-base: 'DM Sans';

  --font-size-copy: 1rem;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.75rem;
  --font-size-large: 1.125rem;
  --font-size-small: 0.875rem;
  --font-size-td: 0.97rem;

  --font-weight-bold: 900;

  --line-height-snug: 1;
  --line-height-normal: 1.6;

  --nav-unit: 2.25rem;
  --sidebar-width: 320px;
  --controls-width: 4rem;
}

html[data-mode="dark"] {
  --color-accent: #60a5fa;
  --color-border: #3a3a3a;
  --color-text: #e5e5e5;

  --bg-nav: rgba(255, 255, 255, 0.03);
  --bg-active-page: rgba(255, 255, 255, 0.06);
  --bg-active-location: rgba(255, 255, 255, 0.04);
  --bg-active-location-bullet: rgba(255, 255, 255, 0.5);

  --bg-table-row: rgba(255, 255, 255, 0.05);
  --bg-table-header: #444444;

  --bg-scrollbar: #555555;

  --bg-texture: url("img/bg-dark.jpg");
  --bg-base: #21181b;
}

@media (min-width: 1240px) {
  html {
    font-size: 20px;

    --font-size-h1: 4rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2rem;
  }
}

/* Layout */

body {
  background-color: var(--bg-base);
  background-image: var(--bg-texture);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-size-copy);
  line-height: var(--line-height-normal);
  margin: 0;
}

nav {
  background: var(--bg-texture);
  border-right: 1px solid var(--color-border);
  font-size: var(--font-size-small);
  height: 100vh;
  left: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  width: min(var(--sidebar-width), calc(100vw - var(--controls-width)));
  z-index: 100;
}

nav[data-open] {
  transform: translateX(0);
}

@media (min-width: 1240px) {
  nav {
    background: var(--bg-nav);
    transform: none;
    transition: none;
  }
}

main {
  position: relative;
  padding: 1.5rem 1rem 6rem 1rem;
}

@media (min-width: 1240px) {
  main {
    margin-left: var(--sidebar-width);
    padding: 2rem 2rem 6rem 2rem;
  }
}

article {
  max-width: 840px;
  margin: auto;
}

header + section,
section + section {
  /* Padding defines the scroll to padding for anchors */
  padding-top: 2rem;
  margin-top: 2rem;
}

/* Scrollbars */

* {
  scrollbar-color: var(--bg-scrollbar) transparent;
}

/* Links */

a,
a:visited,
a:active {
  color: var(--color-accent);
}

a:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus);
}

/* Type */

strong {
  font-weight: var(--font-weight-bold);
}

p {
  margin: 1rem 0;
}

p, li, td {
  text-wrap: pretty;
}

/* Headings */

h1, h2, h3 {
  font-family: var(--font-title);
  line-height: var(--line-height-snug);
  margin: 0;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

p + .table-wrapper,
h3 + .table-wrapper {
  margin-top: 1.5rem;
}

p + h3,
dl + h3,
ul + h3,
.table-wrapper + h3 {
  margin-top: 3rem;
}

article > header > p:first-child,
article > p:first-child,
#ch-00-cover .changelog button,
#ch-00-glossary h1,
#ch-00-character-sheet h1,
#ch-00-credits-attribution h1 {
  font-family: var(--font-base);
  line-height: var(--line-height-normal);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  margin: 0 0 1.8rem 0;
  text-align: center;
  text-transform: uppercase;
}

article > p:first-child:has(+ h1) {
  margin-bottom: 0;
}

/* Imgs */

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

img:has(+ h1),
img:has(+ h2) {
  margin-bottom: 1rem;
}

img:has(+ h1) {
  height: 180px;
  width: 180px;
}

img:has(+ h2) {
  height: 120px;
  width: 120px;
}

/* Hr */

hr {
  background: var(--color-border);
  border: none;
  height: 1px;
}

/* Block Quotes */

blockquote {
  --blockquote-border-width: 4px;

  border-left: var(--blockquote-border-width) solid var(--color-text);
  margin: 2rem 0;
  padding-left: 1rem;

  p strong::after {
    content: ':';
  }
}

@media (min-width: 1240px) {
  blockquote {
    --blockquote-indentation: 5rem;

    p {
      padding-left: var(--blockquote-indentation);

      strong {
        display: inline-block;
        margin-bottom: 0;
        margin-left: calc(var(--blockquote-indentation) * -1);
        width: calc(var(--blockquote-indentation) - var(--blockquote-border-width));
      }

      strong::after {
        content: '';
      }
    }
  }
}

h1 + blockquote,
#adventuring-equipment blockquote,
#the-world-map blockquote {
  border: 0;
  padding: 0;
  text-align: center;

  p {
    padding: unset;

    strong {
      display: unset;
      margin: unset;
      width: unset;
    }
  }
}

@media (min-width: 1240px) {
  h1 + blockquote,
  #adventuring-equipment blockquote,
  #the-world-map blockquote {
    margin: 1.5rem 3rem 2.5rem 3rem;
  }
}

/* Tables */

.table-wrapper {
  overflow-x: auto;
  box-shadow: inset -12px 0 8px -8px rgba(0, 0, 0, 0.15);

  html[data-mode="dark"] & {
    box-shadow: inset -12px 0 8px -8px rgba(255, 255, 255, 0.1);
  }

  @media (min-width: 1240px) {
    box-shadow: none;

    html[data-mode="dark"] & {
      box-shadow: none;
    }
  }
}

.table-wrapper:has(
  #ability-scores-table-2
) {
  box-shadow: none;
}

table {
  border-bottom: 1px solid var(--color-border);
  border-collapse: collapse;
  width: 100%;
  min-width: max-content;
}

@media (min-width: 1240px) {
  table {
    min-width: unset;
  }
}

.table-wrapper + .table-wrapper {
  margin-top: 2rem;
}

th {
  background: var(--bg-table-header);
  color: var(--color-text-table-header);
  font-size: var(--font-size-small);
  text-align: left;
  padding: 0.25rem 0.5rem;
  border: none;
}

tbody tr:nth-child(even) td {
  background: var(--bg-table-row);
}

td {
  padding: 0.45rem 0.5rem;
  border: none;
  font-size: var(--font-size-td);
}

td > p {
  margin: 0.5rem 0;
}

td > p:first-child,
table td ul li:first-child p {
  margin-top: 0;
}

td > p:last-child,
table td ul li:last-child p {
  margin-bottom: 0;
}

table td ul {
  margin: 0;
}

table td ul li p {
  margin: 0.5rem 0;
}

/* Lists */

main ul {
  list-style: none;
  padding-left: 2rem;
  margin: 1.5rem 0;
}

@media (min-width: 1240px) {
  main ul {
    padding-left: 3.5rem;
  }
}

main ul li {
  position: relative;
}

main ul li::before {
  border: 2px solid var(--bg-active-location-bullet);
  content: '';
  height: 0.25rem;
  left: calc(var(--nav-unit) * -0.5);
  position: absolute;
  top: 0.80rem;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.25rem;
}

/* Detail Lists */

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
  width: 100%;

  &[hidden] {
    display: none;
  }
}

dt,
dd {
  padding: 0.45rem 0.5rem;
}

dd {
  font-weight: var(--font-weight-bold);
  margin: 0;
}

dt:nth-of-type(odd),
dt:nth-of-type(odd) + dd {
  background: var(--bg-table-row);
}

/* Nav */

.skip-link {
  background: var(--bg-texture);
  border-radius: 0.25rem;
  left: 0.5rem;
  padding: 0 0.25rem;
  position: fixed;
  top: -0.5rem;
  transform: translateY(-100%);
  z-index: 1;
}

@media (min-width: 1240px) {
  .skip-link {
    left: calc(var(--sidebar-width) + 0.5rem);
  }
}

.skip-link:focus {
  transform: translateY(1rem);
}

nav ol,
nav ul {
  margin: 0;
  padding: 0;
}

nav ul {
  border-top: 1px solid var(--color-border);
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Nav - list items */

nav ol:first-of-type li:first-child a {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

nav li {
  border-bottom: 1px solid var(--color-border);
}

nav ol li {
  display: grid;
  grid-template-columns: var(--nav-unit) 1fr;
  grid-template-rows: var(--nav-unit) auto;
}

nav ul li:last-child {
  border-bottom: none;
}

nav li:hover > a,
nav li:hover > button,
nav li[data-active] > a,
nav li[data-active] > button,
nav ol > li > a[aria-current="page"]:first-child {
  background: var(--bg-active-page);
}

nav ol > li > a[aria-current="page"],
nav ul li a[aria-current="location"] {
  position: relative;
}

nav ul li a[aria-current="location"] {
  background: var(--bg-active-location);
}

nav ol > li > a[aria-current="page"]:first-child::before,
nav ul li a[aria-current="location"]::before {
  content: '';
  position: absolute;
  left: calc(var(--nav-unit) * 0.5);
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.25rem;
  height: 0.25rem;
  border: 2px solid var(--bg-active-location-bullet);
}

/* Nav - links */

nav li a {
  align-items: center;
  color: inherit;
  display: flex;
  height: var(--nav-unit);
  padding-left: var(--nav-unit);
  text-decoration: none;
}

nav li a:visited {
  color: inherit;
}

nav ol li > a:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
}

nav ol li > button + a {
  grid-column: 2;
  grid-row: 1;
  padding-left: 0;
}

nav li a span {
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

nav li a:focus-visible {
  outline: none;
}

nav li a:focus-visible span {
  outline: var(--focus-outline-width) solid var(--color-focus);
}

/* Nav - buttons */

nav ol li > button {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  height: var(--nav-unit);
  justify-content: center;
  padding: 0;
  width: var(--nav-unit);
}

nav button:focus-visible {
  outline: none;
}

nav button:focus-visible svg {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: 0.25rem;
  border-radius: 2rem;
}

nav button svg {
  color: var(--color-text);
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

nav button[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

/* Button Bubbles */

.button-bubble {
  align-items: center;
  background: var(--bg-texture);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  line-height: 0;
  width: 2.5rem;
}

/* UI Controls */

.ui-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: fixed;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 1;
}

/* Nav Toggle */

@media (min-width: 1240px) {
  .nav-toggle {
    display: none;
  }
}

/* Mode Toggle */

/* Chapters */

/* Title-style table cells */

#ability-scores-table-1 td:first-child,
#backgrounds-table-1 td:nth-child(2),
#classes-table-1 td:first-child,
#magic-table-1 strong,
#spells-table-2 td:first-child,
#spells-table-3 td:first-child {
  font-family: var(--font-title);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
}

/* Arrow lists */

#sessions-list-1 li::before,
#character-builds-list-1 li::before,
#ability-scores-list-1 li::before,
#ability-scores-list-2 li::before,
#leveling-up-list-1 li::before,
#initiative-list-1 li::before,
#defense-list-1 li::before,
#attack-list-1 li::before,
#movement ul:not(:first-of-type) li::before,
#casting-list-1 li::before {
  border: 0;
  content: '→';
  font-size: var(--font-size-large);
  transform: none;
  top: 0;
  left: -2rem;
}

/* Cover */

#ch-00-cover .changelog button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 3rem 0 1rem 0;
  padding: 0;
  text-align: left;

  svg {
    color: var(--color-text);
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
  }

  &[aria-expanded="true"] svg {
    transform: rotate(0deg);
  }
}

#ch-00-cover .changelog dl {
  font-size: var(--font-size-small);
}

#ch-00-cover .changelog dd {
  font-weight: normal;
}

#ch-00-cover > p:nth-of-type(1),
#ch-00-cover > p:nth-of-type(2) {
  text-align: center;
}

#ch-00-cover .coffee {
  display: flex;
  justify-content: center;
}

#ch-00-cover .coffee a {
  width: 190px;
  display: flex;
  border-radius: 1.5rem;
  overflow: hidden;
}

#ch-00-cover .coffee img {
  height: 56px;
  max-width: none;
}

#ch-00-cover .download {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

#ch-00-cover .download a {
  font-size: var(--font-size-large);
}

/* Intro */

#ch-00-introduction h1 + blockquote {
  text-align: left;
}

/* 1. Gameplay */

#retros blockquote p {
  padding: unset;

  strong {
    display: unset;
    margin: unset;
    width: unset;
  }
}

/* 2. Character Builds */

#ability-scores-table-2 {
  margin: auto;

  th, td {
    text-align: center;
    width: 50%;
  }
}

@media (min-width: 1240px) {
  #ability-scores-table-2 {
    max-width: 50%;
  }
}

/* 4. Backgrounds */

#backgrounds-table-1 td:nth-child(2) {
  width: 200px;
}

/* 5. Classes */

#classes-table-1 td:nth-of-type(n+3),
#classes-table-1 th:nth-of-type(n+3) {
  text-align: center;
}

#classes-table-1 td:nth-of-type(3) {
  width: 160px;
}

#classes-table-1 td:nth-of-type(5) {
  width: 100px;
}

#ch-05-classes [id$="-table-2"] td,
#ch-05-classes [id$="-table-2"] th {
  text-align: center;
}

#ch-05-classes [id$="-table-2"] td:last-child,
#ch-05-classes [id$="-table-2"] th:last-child {
  text-align: left;
}

/* 8. Weapons */

#weapons-table-1 th:nth-of-type(2),
#weapons-table-1 td:nth-of-type(2),
#armor-table-1 th,
#armor-table-1 td {
  text-align: center;
}

#armor-table-1 th:first-child,
#armor-table-1 td:first-child,
#armor-table-1 th:last-child,
#armor-table-1 td:last-child {
  text-align: left;
}

/* 11. Magic */

#magic-table-1 img {
  width: 80px;
}

/* 12. Engineering */

#engineering-table-2 th:nth-of-type(2),
#engineering-table-2 td:nth-of-type(2) {
  text-align: center;
}

/* 13. Alchemy */

#bad-batches-table-1 th:first-child,
#bad-batches-table-1 td:first-child,
#potions-table-1 th:first-child,
#potions-table-1 td:first-child,
#potions-table-1 th:nth-of-type(3),
#potions-table-1 td:nth-of-type(3),
#ingredients-table-1 th:first-child,
#ingredients-table-1 td:first-child {
  text-align: center;
}

#ingredients-table-1 td:first-child {
  white-space: nowrap;
}

#ingredients-table-2 th[role="presentation"],
#ingredients-table-2 td[role="presentation"] {
  background: transparent;
}


#ingredients-table-2 th:first-child,
#ingredients-table-2 td:first-child,
#ingredients-table-2 th:nth-child(4),
#ingredients-table-2 td:nth-child(4),
#ingredients-table-2 th:nth-child(7),
#ingredients-table-2 td:nth-child(7) {
  text-align: center;
}

/* 14. Encounters */

#reaction-table-1 th,
#reaction-table-1 td,
#wanderlust table th,
#wanderlust table td {
  text-align: center;
}

#wanderlust table th,
#wanderlust table td {
  width: 90px;
}

#wanderlust-table-2 th:first-child,
#wanderlust-table-2 td:first-child {
  width: 120px;
}

#wanderlust table th:last-child,
#wanderlust table td:last-child {
  text-align: left;
  width: auto;
}

/* 15. Exploration */

#the-world-map blockquote {
  text-align: left;
}

#the-world-map-table-1 th:first-child,
#the-world-map-table-1 td:first-child,
#the-world-map-table-2 th:first-child,
#the-world-map-table-2 td:first-child {
  text-align: center;
  width: 40px;
}

#travel-table-1 th:last-child,
#travel-table-1 td:last-child {
  text-align: center;
}

#weather table th:first-child,
#weather table td:first-child,
#survival table th:first-child,
#survival table td:first-child {
  text-align: center;
  width: 60px;
}

/* 16. Treasure */

#treasure-table-1 th,
#treasure-table-1 td,
#treasure-table-2 th,
#treasure-table-2 td {
  font-size: var(--font-size-small);
  text-align: center;
  white-space: nowrap;
}

#gems-table-1 th,
#gems-table-1 td,
#jewels-table-1 th,
#jewels-table-1 td {
  text-align: center;
}

#gems-table-1 th:last-child,
#gems-table-1 td:last-child,
#jewels-table-1 th:last-child,
#jewels-table-1 td:last-child {
  text-align: left;
}

#gems-table-1 td:first-child,
#jewels-table-1 td:first-child,
#gems-table-1 td:nth-child(2),
#jewels-table-1 td:nth-child(2) {
  width: 90px;
}

#magic-items th:first-child,
#magic-items td:first-child {
  text-align: center;
  width: 60px;
}

#scripts-table-1 th:first-child,
#scripts-table-1 td:first-child,
#magic-items-table-1 th:first-child,
#magic-items-table-1 td:first-child {
  text-align: center;
  width: 90px;
}

/* 17. Bestiary */

#ch-17-bestiary h3 span {
  font-family: var(--font-base);
  font-size: var(--font-size-small);
  font-weight: normal;
}

#ch-17-bestiary section[data-stat-block] {
  dl:nth-of-type(2) {
    dt:nth-of-type(even),
    dd:nth-of-type(even) {
      background: var(--bg-table-row);
    }

    dt:nth-of-type(odd),
    dd:nth-of-type(odd) {
      background: transparent;
    }
  }

  dl:nth-of-type(3) {
    dt:last-of-type,
    dd:last-of-type {
      border-bottom: 1px solid var(--color-border);
    }
  }

  dl:nth-of-type(3) dd {
    font-weight: normal;
  }

  dt {
    width: 5rem;
  }
}

@media (min-width: 1240px) {
  #ch-17-bestiary section[data-stat-block] {
    display: flow-root;

    dl:first-of-type {
      margin-right: 1rem;
    }

    dl:first-of-type,
    dl:nth-of-type(2) {
      width: calc(50% - 0.5rem);
      float: left;
    }

    dl:nth-of-type(2) {
      dt:nth-of-type(even),
      dd:nth-of-type(even) {
        background: transparent;
      }

      dt:nth-of-type(odd),
      dd:nth-of-type(odd) {
        background: var(--bg-table-row);
      }
    }

    dl:nth-of-type(3) {
      padding-top: 1rem;
    }

    dt {
      width: auto;
    }
  }
}