@import "modern-css-reset.css";
@import "fonts.css";
@import "spacing.css";
@import "header.css";

@view-transition {
  navigation: auto;
}

:root {
  font-family: "Red Hat Text", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  --color-light-100: #fffbf2;
  --color-light-200: #f5f3f0;
  --color-light-300: #e0dfe5;
  --color-light-400: #bfbfbf;
  --color-dark-700: #4d475f;
  --color-dark-800: #2b2831;
  --color-dark-900: #1b191f;
  --color-accent-400: #e7c775;
  --color-accent-600: #987013;

  --shadow: 0 8px 16px -8px color-mix(in hsl, var(--color-dark-700), transparent
        35%);
}

html {
  scroll-behavior: smooth;
  scroll-padding: var(--space-2xl-3xl);
}

body {
  background-color: var(--color-light-200);
}

h1,
.serif {
  font-family: "Tinos", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

h1 {
  font-size: var(--step-4);
  color: var(--color-dark-700);
}

h2 {
  font-size: var(--step-1);
  color: var(--color-dark-700);
}

a {
  color: var(--color-dark-700);
  font-weight: 500;

  &:hover {
    color: var(--color-accent-600);
  }
}

strong {
  font-weight: 600;
  color: var(--color-dark-700);
}

button:has(img[src^="/src/assets/icons"]) {
  border: 0;
  outline: 0;
  border-radius: var(--space-2xs);
  padding: var(--space-2xs);
  background: none;

  &:active {
    background: #00000015;
  }
}

.centered {
  text-align: center;
}

.shelf-container {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}
.shelf {
  display: flex;
  gap: var(--space-s-m);
}
.shelf-book {
  flex: 1 1 200px;

  transition: scale 100ms ease-in-out;

  &:hover {
    scale: 1.03;
  }
}
.shelf-book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-light-400);
  border-radius: var(--space-2xs);
}
@media (width < 50rem) {
  .shelf > :nth-child(n + 5) {
    display: none;
  }
}
@media (width < 40rem) {
  .shelf > :nth-child(n + 4) {
    display: none;
  }
}

.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-l);
  justify-items: center;
  margin-top: var(--space-s-l);
}

.book-list a {
  max-width: min-content;
}
.book-list img {
  min-width: 200px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--color-light-400);
  border-radius: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  transition: scale 100ms ease-in-out;
}
.book-list a:hover img {
  scale: 1.03;
}

.book-layout {
  display: grid;
  gap: var(--space-l);
}

.book-cover-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-content: start;
  /* justify-content: stretch; */
}
.book-cover-info .book-cover {
  border: 1px solid var(--color-light-400);
  border-radius: var(--space-2xs);
  margin-bottom: var(--space-s);
}

.amazon-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  border-radius: var(--space-2xs);
  padding: var(--space-2xs);
  margin-block: var(--space-xs);
  text-decoration: none;
  font-weight: 500;
  transition: scale 100ms ease-in-out, color 100ms ease-in-out;

  &:hover {
    scale: 1.03;
  }
}
.book-link {
  color: white;
  background: var(--color-dark-700);

  &:hover {
    color: white;
    background: color-mix(in hsl, var(--color-dark-700), transparent 35%);
    /* background: var(--color-dark-800); */
  }
}
.review-link {
  color: var(--color-dark-800);
  background: var(--color-light-300);

  &:hover {
    color: var(--color-dark-800);
    background: color-mix(in hsl, var(--color-light-300), transparent 35%);
    /* background: var(--color-light-100); */
  }
}

.toc {
  flex-grow: 1;
}
.toc > p {
  color: var(--color-dark-700);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.toc > ul {
  padding: 0;
  margin: 0;
  margin-bottom: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  list-style: none;
}

.page-content {
  max-width: 1000px;
  padding: var(--space-s-m);
  margin-inline: auto;
}

main {
  max-width: 800px;
  margin-inline: auto;
}

main > * {
  margin-block: 1em;
}
main h1 {
  margin-block: 0;
}
main > h2 {
  margin-block: 1.5em 0;
}
main p,
main li {
  font-size: var(--step-0);
}
@media (width > 25rem) {
  main pre {
    font-size: var(--step--1);
  }
}

.arrow-button {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  padding-block: var(--space-2xs);
  margin-bottom: var(--space-xs);
  color: var(--color-dark-700);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  transition: scale 50ms ease-in-out;

  &:hover {
    color: var(--color-dark-800);
  }
}

blockquote {
  margin-left: var(--space-m);
}
blockquote > * {
  margin-block: var(--space-xs);
}
.verse {
  display: flex;
  gap: var(--space-xs);
}
.verse-number {
  font-weight: 500;
  color: var(--color-dark-700);
  flex: 0 0 25px;
}

.signature {
  color: var(--color-dark-700);
  font-size: var(--step-1);
}

.author-portrait {
  margin-inline: auto;
}
img[src="/src/assets/images/burke-portrait.png"] {
  width: 15rem;
  margin-bottom: var(--space-2xl);
}

@media (width >= 50rem) {
  .mobile-only {
    display: none;
  }

  .book-layout {
    /* grid-template-columns: 250px 1fr; */
    grid-template-columns: calc(var(--space-2xl-3xl) * 2) 1fr;
  }

  .book-layout .book-cover {
    width: 100%;
  }
}