/**
 * CSS is how you can add style to your website, such as colors, fonts, and
 * positioning of your HTML content. Much of what's here is self-explanitory,
 * but I'll give context to some of the less well-known parameters/functions.
 */

/**
 * @import lets you break up your CSS into multiple files; I use it here to
 * seperate the reset settings from the rest of the styles and to import the comments styles.
 */
@import "/css/reset.css";
@import "/css/comments.css";

/* FONTS */

header,
h1,
h2,
h3,
h4,
h5,
summary {
  font-family: "berthold-block-w1g", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2d2b2f;
  /**
   * Todo: Write why we use rem units and set them throughout the stylesheet
   * https://www.youtube.com/watch?v=N5wpD9Ov_To
   */
  margin-bottom: 1rem;
}

p {
  font-family: "ff-meta-web-pro", sans-serif;
  margin-bottom: .75rem;
}

summary:hover{
  cursor: pointer;
}

/* This is to offset some weird height stuff with eleventy img */
img {
  height: auto;
}

/* GLOBAL */

/**
 * :root targets the root element of the document; in practice, it targets the
 * `<html>` tag, just with a higher specificity than calling it directly. It's
 * most commonly used for defining custom variables, which you can see below!
 * (https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
 */
:root {
  /**
   * Custom variables allow us to set repeating values in one place. In this
   * case, we're defining the maximum width of our pages.
   * (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
   *
   * Also, check out the `min()` property: it picks whatever is the smallest of
   * the two given properties as the width! For more details on it and similar
   * properties, check out Kevin Powell's video: https://youtu.be/U9VF-4euyRo
   */
  --pg-width: min(64rem, 80%);
  /* page width for double/spread pages that are one page */
  --double-pg-width: min(84rem, 100%);

  /**
  * The following is variables that set colours for things on the site.
  * If you just want to swap some colours, likely this is all you have to touch.
  **/
  /* universal background color */
  --bg-color: #4f4f47;
  /* the colour of links */
  --link-color: #6a6a5a;
  /* link colours when hovered over */
  --link-color-hover: #d1594c;
  --text-color: #2d2b2f;

   /**
  * I recommend not changing this, UNLESS you are getting rid of the paper tear effect
  * If you DON'T want the paper tear effect remove from PAPER TEAR BEGIN to PAPER TEAR END
  * Roughly lines 149-172 of this file, although that might move a bit as things get added.
  **/
  --content-bg: #fffbf3;
}

body {
  background: linear-gradient(to bottom, #4f4f47, #bf4444 1500px, #bf4444 100%);  
  background-color: var(--bg-color);
}

/* link colors */
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-color-hover);
}

/* HEADER */

header {
  /**
   * For those unfamiliar with flexbox, check out this CSS Tricks article:
   * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 2rem auto 0 auto;
  text-transform: uppercase;
}

header nav {
  font-size: 20px;
  width: max-content;
  margin-top: 1rem;
  text-align: center;
  padding: 10px;
  color: white;
  background-color: #2d2b2f;
  border-radius: 0 0 20px 20px;
  border-top: 3px ridge white;
}

header img {
  width: 600px;
  text-align: center;
  filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.4));
}

header a {
  color: white;
  text-decoration: none;
}

/* FOOTER */

footer {
  color: white;
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 12px;
}

footer p {
  margin: auto;
}

footer a {
  color: white;
}

/* COMIC */
.comic h1 {
  text-align: center;
  margin: 1rem 0;
}

/* style comic page image */
#comicPage {
  margin: 3rem auto 0 auto;
  width: var(--pg-width);
  padding: 20px;
}

.double-page #comicPage {
  width: var(--double-pg-width);
}

#comicPage img {
  display: block;
  margin: 0 auto;
}

/* Don't remove this bit though */
.paperDiv {
  background: var(--content-bg);
  position: relative;
  width: var(--pg-width);
  filter: drop-shadow(3px 6px 2px rgba(0, 0, 0, 0.3));

}

/* PAPER TEAR BEGIN - start removing here if you don't want the paper effect */
.paperDiv::before, .paperDiv::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(/img/papertear.svg) bottom;
  background-size: var(--pg-width);
}

.paperDiv::before {
  transform: scaleY(-1);
  bottom: 100%;
}

.paperDiv::after {
  top: 100%;
}
/* PAPER TEAR END - stop removing here */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
  gap: 10px;
}
.comicNav img {
  width: 60px;
}

/* style author notes */
.authorNotes {
  margin: auto;
  width: var(--pg-width);
  font-size: 1.125rem;
  padding: 1% 3% 3%;
}

.authorNotes blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid #ccc;
  background: #f9f9f9;
  font-style: italic;
}

.authorNotes h1 {
  margin-bottom: 0;
}

.authorNotes-date {
  color: #4f4f47;
  font-size: 0.9rem;
  margin-top: -5px;
  margin-bottom: 1rem;
}

/* SUBPAGES */

.subPage {
  width: var(--pg-width);
  max-width: 98%;
  margin: 3rem auto 0;
  padding: 1rem 3rem 2rem;
}


/* character page */
.characters,
.chapter-container {
  /**
   * For those unfamiliar with grid, check out this CSS Tricks article:
   * https://css-tricks.com/snippets/css/complete-guide-grid/
   *
   * This is also being applied to the archive layout
   */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem auto 2rem;
}

@media (max-width: 768px) {
  .characters {
    grid-template-columns: 1fr; /* Turns into a single column layout */
  }
}

.chapter-container a {
text-decoration: none;
}

.character h2 {
  margin-bottom: 0;
}

.character h2 {
  margin-bottom: 0;
}

.character picture,
.character img {
  width: 100%;
  max-width: 400px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

.character figcaption{
  opacity: 0;
}

.character figure img{
  display: block;
  margin: 0 auto;
}

.character figure:hover img{
 transform: none !important;
 scale: 1.1;
}

.character figure:hover figcaption{
  opacity: 1;
}

.character figcaption{
  font-family: "ff-meta-web-pro", sans-serif;
  margin-bottom: .75rem;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  color: #2d2b2f;
  text-align: center;
}

/* archive */
.archive-select {
  width: min(400px, 98%);
}

.chapter {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.chapter h3 {
    margin: 0;
    font-family: "ff-meta-web-pro", sans-serif;
}
.chapter-img {
  width: min(200px, 98%);
}
.chapter-container { 
  grid-template-columns: 20% 60%;
}

/**
  * MOBILE STYLES
  * This basically says to apply these changes if the window screen is 700px or smaller
  *
**/
@media screen and (max-width: 700px) {
  .subPage {
    padding: 1rem 1rem 2rem;
  }

  header {
    width: var(--pg-width)
  }

  #comicPage {
    padding: 20px 0;
  }

  .character,
  .chapter-container {
    grid-template-columns: 100%;
    gap: 0rem;
  }

  :root {
    --pg-width: min(100%);
  }
}

h1,
h2 {
   display: inline-flex;
}


html #HCB_comment_box {
  --hcb-font-size: 0.875rem;
  --hcb-font-size-lg: 1.125rem;
  --hcb-font-size-sm: 0.7rem;

  /* declare colors you want to use here */
  --color-white: #e2e2e2;
  --color-dark-gray: #bf4444;
  --color-lime: #2d2b2f;

  @media (min-width: 768px) {
    --hcb-font-size: 1rem;
    --hcb-font-size-lg: 1.25rem;
    --hcb-font-size-sm: 0.8rem;
  }

  font-family: "ff-meta-web-pro", sans-serif !important;
  color: #2d2b2f !important;
  font-size: var(--hcb-font-size) !important;

  * {
    font-family: inherit !important;
  }

  /* links */
  a {
    color: black !important;
    &:hover {
      text-decoration: underline;
    }
  }

  /* comment metadata */
  .author {
    font-family: "berthold-block-w1g", sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: var(--hcb-font-size-lg) !important;
  }

  .date {
    color: black !important;
    font-family: "ff-meta-web-pro", sans-serif !important;
    text-transform: uppercase !important;
  }

  /* form layout */
  #HCB_comment_form_box form {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
  }

  .hcb-wrapper {
    flex-basis: 100% !important;
    margin-bottom: 8px !important;
  }

  .likes {
    padding: 5px 10px !important;
    font-family: "ff-meta-web-pro", sans-serif !important;
  }

  .likes img{
    content: url('/img/heart.png');
    width: 10px;
  }

  /* inputs & textarea */
  #hcb_form_name,
  #hcb_form_website,
  textarea {
    border: 0.5px solid var(--color-dark-gray);
    border-radius: 0 !important;
    padding: 8px;
    outline: none !important;

    &:focus {
      border-color: var(--color-lime) !important;
      box-shadow: 0 0 0 1px
        color-mix(in srgb, var(--color-lime) 20%, transparent) !important;
    }
    width: 100% !important;
    box-sizing: border-box;
    font: inherit !important;
    font-size: inherit !important;
    color: black !important;

    &::placeholder {
      color: black !important;
      opacity: 0.6 !important;
      font: inherit !important;
      font-size: inherit !important;
    }
  }

  /* comment body */
  blockquote,
  .hcb-comment-body {
    font-family: inherit !important;
    font-size: inherit !important;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
  }

  #hcb_msg {
    margin-bottom: 18px;
  }

  /* buttons */
  .btn {
    background-color: var(--color-lime) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 8px;
    font: inherit !important;
    font-size: inherit !important;
    font-family: "berthold-block-w1g", sans-serif !important;
    text-transform: uppercase !important;
    color: white !important;
    cursor: pointer;
    &:hover {
      background-color: var(--link-color-hover) !important;
    }
  }

  /* comment actions */
  .hcb-reply,
  .hcb-flag,
  .hcb-like,
  .del {
    color: var(--color-dark-gray) !important;
    font-weight: 400 !important;
    opacity: 0.8 !important;
    font-family: "ff-meta-web-pro", sans-serif !important;
    text-align: right;
    text-transform: uppercase !important;

    &:hover {
      text-decoration: underline !important;
    }
  }

  .del {
    font-size: 0 !important;

    img {
      display: none;
    }

    &::before {
      content: "delete";
      font-size: var(--hcb-font-size-sm) !important;
    }
  }

  /* comments container */
  #comments_list {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* comment card */
  .comment {
    border: 1px solid var(--color-dark-gray) !important;
    background-color: white !important;
    border-radius: 0 !important;
    padding: 12px 16px;
    margin-bottom: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    width: auto !important;

    &:last-child {
      margin-bottom: 1rem !important;
    }
  }

  /* subscribe & settings */
  #hcb_subscribe,
  small:has(#hcb_settings),
  #hcb_settings {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: "ff-meta-web-pro", sans-serif !important;
    text-transform: uppercase !important;
    font-size: var(--hcb-font-size-sm) !important;
    font-weight: 400 !important;
    color: black !important;
    flex-basis: auto !important;
  }

  #hcb_settings img.hcb-icon {
    display: inline-block !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
  }

  input[type="checkbox"] {
    accent-color: var(--color-lime) !important;
  }

  /* hidden elements */
  .home-desc,
  .hcb-door-in,
  .hcb-door-out,
  img[alt="rss"],
  h3 {
    display: none !important;
  }
}

ul {
  font-family: "ff-meta-web-pro", sans-serif;
  margin-bottom: .75rem;
  list-style-type: "– ";
}