/* minizine-specific styles that don't have anything to do with the renderer  */
:root {
  --minizine-logo-height: 60px;
  --minizine-black: #111112;
  --body-font-size: 20px;
  --minizine-title-font: neue-haas-grotesk-display, sans-serif;
  --minizine-text-gray: #636363;
  --minizine-light-gray: #e0e0e0;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--minizine-black);
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: 600;
}

/* Modal */
.modal {
  --bs-modal-border-radius: 0px;
  --bs-modal-padding: 1.5rem;
  --bs-modal-header-padding: 1rem 1.5rem;
}

.modal-content {
  padding: 10px;
  box-sizing: content-box;
}

.modal-header {
  border-bottom: none;
  padding-bottom: 0px;
}

.modal-header .btn-close {
  margin-top: 0;
  margin-bottom: auto;
}

.modal-title {
  font-family: var(--minizine-title-font);
  font-weight: 600;
}

.modal p {
  color: var(--minizine-black);
  line-height: calc(var(--body-font-size) + 6px);
}

.modal ul {
  font-size: var(--body-font-size);
  line-height: calc(var(--body-font-size) + 6px);
}

.modal li {
  margin-bottom: 8px;
}

.back-screenshot,
.forward-screenshot,
.chapters-screenshot,
.submit-screenshot {
  height: calc(var(--body-font-size));
  display: inline-block;
  vertical-align: text-bottom;
  margin-bottom: 2px;
}

.forward-screenshot {
  transform: rotate(180deg);
}

/* Chapters */
#chapters {
  font-family: var(--minizine-title-font);
  color: var(--minizine-black);
}

#chapters .offcanvas-header {
  align-items: start;
  padding-left: 30px;
  padding-right: 30px;
}

#chapters .offcanvas-title {
  font-size: 55px;
  font-weight: 700;
}

#chapters .offcanvas-header .btn-close {
  margin-top: 10px;
}

#chapters .offcanvas-body {
  padding-left: 30px;
  padding-right: 30px;
  font-family: "Inter", sans-serif;
}

.chapter-list {
  padding-left: 0px;
  counter-reset: item;
}

/* Makes the chapter number in the ::before take up the entire height
of the li so the actual li text doesn't wrap around */
.chapter-list li {
  display: flex;
  line-height: 1.4;
  margin-bottom: 15px;
  counter-increment: item;
}

/* Chapter number */
.chapter-list li::before {
  content: counter(item) ".";
  color: var(--minizine-text-gray);
  margin-right: 20px;
  font-family: "Inter", sans-serif;
}

.chapter-list a {
  color: var(--minizine-black);
  font-family: "Inter", sans-serif;
  text-decoration: none;
  font-size: 17px;
}

.chapter-list a:hover {
  text-decoration: underline;
}

.chapter-segment {
  display: block;
  font-style: italic;
  color: var(--minizine-text-gray);
}

h1 {
  font-family: neue-haas-grotesk-display, sans-serif;
}

p {
  font-size: var(--body-font-size);
  font-family: "Inter", serif;
}

/* Static navbar at top of page */
.navbar {
  flex-basis: 66vh;
  align-content: flex-start;
  vertical-align: middle;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-buttons button {
  display: inline-block;
  background-color: #e1e1e1;
  border: none;
  height: calc(var(--minizine-logo-height) - 5px);
  width: calc(var(--minizine-logo-height) - 5px);
  vertical-align: middle;
  margin-right: 5px;
}

#info-button {
  background-color: transparent;
  margin-right: -3px;
}

#info-button img {
  height: 70%;
}

#chapters-button img {
  height: 60%;
}

#back-button img {
  height: 60%;
}

#forward-button img {
  height: 60%;
  transform: rotate(180deg);
}

/* Submit button */
.submit {
  display: inline-block;
  background-color: var(--minizine-black);
  color: white;
  text-decoration: none;
  font-family: var(--minizine-title-font);
  font-weight: 600;
  padding-left: 29px;
  padding-right: 29px;
  font-size: 21px;
  height: 55px;
  vertical-align: middle;
  align-content: center;
}

.navbar {
  flex-basis: 83vh;
  align-content: flex-start;
  vertical-align: middle;
}

/* ---------------------------- Disappearing navbar ---------------------------- */

.disappearing-navbar {
  display: block;
  /* background-color: white; */
  width: 100vw;
  /* left: 0px;
  right: 0px; */
  text-align: right;
  padding: 20px 20px;
  transition: margin-top 0.5s ease-in-out;
  z-index: 3;
  position: fixed;
  top: 0px;
  /* filter: drop-shadow(0 0px 12px #969696); */
  filter: drop-shadow(0 2px 15px rgba(225, 225, 225, 0.6)) 
        drop-shadow(0 4px 25px rgba(225, 225, 225, 0.4))
        drop-shadow(0 8px 40px rgba(225, 225, 225, 0.2));
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.7);
}

.disappearing-navbar.hidden {
  margin-top: -400px;
}

.disappearing-navbar.visible {
  margin-top: 0px;
}


.logo {
  display: inline-block;
  height: calc(var(--minizine-logo-height) + 3px);
}

.byline-subtext, .image-section-caption button {
  color: var(--minizine-text-gray);
}

.byline-divider {
  margin-top: 26px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

.light-byline-divider {
  border-bottom: 2px solid #535353;
}

.quote-block {
  padding-left: 35px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 35px;
  font-weight: 500;
  display: inline-block;
  font-size: calc(var(--body-font-size) + 7px);
}

/* Footer */
.footer {
  display: flex;
  margin-top: 25vh;
  /* min-height: 300px;
  height: 20vh; */
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  align-content: flex-end;
  flex-direction: row;
  vertical-align: middle;
}

.footer .navbar-buttons {
  margin-left: auto;
  display: inline-block;
}

@media screen and (max-width: 900px) {
  .navbar {
    align-items: flex-start;
  }

  .logo {
    margin-bottom: -4px;
  }

  .footer {
    align-items: flex-end;
  }

  .footer .navbar-buttons {
    align-items: end;
  }

  .main-bar .navbar-buttons {
    display: grid !important;
    grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
    grid-template-rows: [row1] auto [row2] auto;
    row-gap: 0;
    /* width: 120px; */
  }

  .disappearing-navbar .navbar-buttons {
    display: inline-block !important;
    vertical-align: middle;
  }

  .main-bar .navbar-buttons button {
    margin-bottom: 7px;
    margin-right: 0px;
  }

  .main-bar .navbar-buttons .main-bar-back-button {
    grid-column: col1 / col2;
    grid-row: row1 / row2;
    justify-self: start;
    margin-right: 5px;
  }

  .main-bar-forward-button {
    grid-column: col3 / end;
    grid-row: row1 / row2;
    justify-self: end;
  }

  .main-bar-info-button {
    display: none !important;
  }

  .main-bar-chapters-button {
    grid-column: col2 / col3;
    grid-row: row1 / row2;
    justify-self: center;
  }

  .main-bar-submit-button {
    grid-column: col1 / end;
    grid-row: row2 / end;
    padding-right: 22px;
    padding-left: 22px;
    text-align: center;
  }

  .submit span {
    /* Text changes in button from "Submit a piece" to "Submit" */
    display: none;
  }
}

@media screen and (max-width: 640px) {
  /* ---------------------------- Root and site-wide adjustments ---------------------------- */
  :root {
    --body-font-size: 18px;
    --minizine-logo-height: 48px;
    --minizine-headfoot-horiz-padding: 40px;
  }

  /* .padded-section {
    padding: 10px 10vw;
  }

  .image-section {
    /* Becomes same width as normal padded section
    width: 80%;
  } */

  /* ---------------------------- Opener and navbar ---------------------------- */
  .navbar {
    flex-basis: 83vh;
  }

  /* .opener h1 {
    font-size: 8vh;
    line-height: 8vh;
  } */

  .main-bar-submit-button {
    height: calc(var(--minizine-logo-height) - 5px);
  }

  .navbar .navbar-buttons button {
    margin-bottom: 8px;
  }

  .main-bar-submit-button {
    font-size: var(--body-font-size);
  }

  .disappearing-navbar {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .disappearing-navbar #info-button {
    display: none;
  }

  .disappearing-navbar .submit {
    height: 47px;
  }

  .disappearing-navbar button {
    height: 47px;
    width: 47px;
    margin-bottom: 0px;
  }

  .footer {
    margin-top: 20vh;
  }
}

@media screen and (max-width: 460px) {
  :root {
    --minizine-logo-height: 35px;
    --minizine-headfoot-horiz-padding: 30px;
  }

  .navbar .navbar-buttons {
    /* width: calc(var(--minizine-logo-height) * 3.5); */
  }

  .main-bar .navbar-buttons button {
    margin-bottom: 7px;
  }

  .navbar-buttons button {
    height: 36px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #back-button:not(.disappearing-navbar #back-button) {
    margin-right: 2px;
  }

  .disappearing-navbar {
    text-align: center;
  }

  .main-bar-submit-button {
    height: calc(var(--minizine-logo-height));
    font-size: 17px;
  }

  .disappearing-navbar .submit {
    height: 40px;
  }

  .disappearing-navbar button {
    height: 40px;
    width: 40px;
  }

  /* ---------------------------- Image Expand Button ---------------------------- */
  /* .image-expand-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 0px;
    border: 2px solid white;
    height: 37px;
    width: 37px;
  } */

  /* ---------------------------- Footer ---------------------------- */
  /* .footer {
    margin-top: 75px;
  }

  .footer .navbar-buttons {
    /* Technically aligned with the logo but doesn't look like it to the human eye, so this adjusts it slightly.
    margin-bottom: -2px;
  } */
}