@font-face {
        font-family: 'LexendDeca';
        src: url('/style/LexendDeca.ttf') format('truetype');
    }
    @font-face {
        font-family: 'RobotoCondense';
        src: url('/style/RobotoCondense.ttf') format('truetype');
    }
    @font-face {
        font-family: 'Roboto';
        src: url('/style/Roboto.ttf') format('truetype');
    }





/* -----------------------------------------------------------
------- Article CSS
----------------------------------------------------------- */
    #mainContent{
      background-image: url("/img/bg_dark.png");
      justify-content: center;
    }
    
#slug-left {
  flex: 1 1 630px;       /* base width:630px, but shrinkable */
  max-width: 630px;
  min-width: 0;          /* prevents overflow in flex */      background-color: var(--mac-black);
  padding: 15px 15px 0px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: var(--logo-white);
}

#slug-right {
  flex: 0 1 300px;       /* base width:300px */
  max-width: 300px;
  min-width: 0;
  margin: 10px 0 10px 10px;
  background-color: rgba(0, 255, 0, 0.2);
  border: 1px dashed green;
  height: 200px;
}

/* On narrow viewports, both fill 100% */
@media (max-width: 640px) {
  #slug-left,
  #slug-right {
    flex: 1 1 100%;
    max-width: 100%;
  }
  #mainContent{
    background-image: none;
    background-color: var(--mac-black);
    padding: 0px;
  }

}

    #time-stamp-card{
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    #section{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid var(--logo-green);
    }

    #section-title{
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      background-color: var(--logo-green);
      color: var(--mac-black);
      font-size: 16px;
      font-weight: bold;
      padding: 0px 7px 1px 7px;
      border-radius: 0px 0px 5px 5px;
    }

    #section-count-print{
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      justify-content: right;
      align-content: center;
      background-color: ;
    }


    #section-count-print a{
      text-decoration: none;
      margin-top: 0px;
    }


    #print-div{
      display: flex;
      flex-wrap: wrap;
      color: var(--logo-green);
      font-size: 16px;
      font-family: 'RobotoCondense', sans-serif;
      font-weight: bold;
      text-decoration: none; 
    }


    #article{
      width: 100%;
      max-width: 700px;
      margin-bottom: 30px;
      color: var(--logo-white);
    }
    #article-title{
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center; 
      font-family: 'RobotoCondense', sans-serif;
      font-size: 34px;
      font-weight: bold;
      color: var(--title-white);
      margin-bottom: 5px;
      border: 0px solid var(--line-color);
    }
    #sub-title{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 20px;
      border: 0px solid var(--line-color);
    }


/* FAME: Author's Picture & Name + Article Date */
    #fame{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      border-top: 1px solid var(--line-color);
      border-bottom: 1px solid var(--line-color);
      padding: 7px;
      margin: 20px 0px 10px 0px;
    }
    #author-thumbnail{
      width: 54px;
      height: 54px;
      margin-right: 10px;
    }
    #author-thumbnail img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    #wrap-name-date{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: center;
      justify-content: center;
    }

    #author-name{
      color: lightgrey;
      font-size: 16px;
      border: 0px solid brown;
    }

    #article-date{
      /* display: flex;
      flex-wrap: wrap;
      align-items: center; */
      font-size: 14px;
      font-weight: ;
      border: 0px solid brown;
      color: grey;
    }



/* Article Image & Text */
    #article-image{
      width: 100%;
    }

    #article-image img{
      width: 100%;
    }

    #content{
      font-family: 'Roboto', sans-serif;
      font-size: 18px;
      line-height: 1.5;
      color: var(--title-white);
    }


    #image-description{
    font-family: sans-serif;
    font-size: 13px;
    font-style: italic;
    color: grey;
    border: 0px solid grey;
    margin-bottom: 10px;
    }

/* -----------------------------------------------------------
------- Comment CSS
----------------------------------------------------------- */

/* Base state: hidden and slightly translated upward */
.comment-card.fade-in {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* When `.show` is added, it becomes visible and moves into place */
.comment-card.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}


      #comments{
      width: 100%;
      max-width: 700px;
      margin-bottom: 20px;
      border: 0px solid red;
      /* background-color: lightgrey; */
    }
    #add-comment{
      width: 100%;
      max-width: 700px;
      margin-bottom: 30px;
      border: 0px solid var(--line-color);
    }


    .article-textarea{
      background-color: #121212;
      color: #eee;
      border: 1px solid #444;
      padding: 5px;
      width: 100%;
      height: 130px;
      font-family: inherit;
      font-size: 16px;
    }


.article-response-message {
  padding: 3px 0px;  
}

.reply-message {
  padding: 3px 0px;  
}



    .article-button{
      background-color: #72b043;
      border: 0px solid #72b043;
      font-family: 'RobotoCondense', sans-serif;
      font-size: 16px;
      font-weight: ;
      padding: 7px 12px;
      margin-right: 3px;
      cursor: pointer;
    }

    .article-button:hover{
       opacity: 80%;
    }


    #comments-total{
      border-bottom: 1px solid var(--line-color);
      margin-bottom: 16px;
      font-size: 24px;
      color: var(--title-white);
      font-family: 'RobotoCondense', sans-serif;
    }

    #user_name, #user_email{
      width: 100%;
      max-width: 480px;
      font-size: 16px;
      padding: 5px;
    }







/* ==========================
   Container for all controls
   ========================== */
.comment-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  padding-left: ;
  border-top: 0px solid var(--line-color);
  border-bottom: 0px solid var(--line-color);
}

/* ==========================
   Group ①: Likes / Dislikes
   ========================== */
.vote-form {
  display: flex;
  gap: 10px; /* wider space between like and dislike */
}

.like-button,
.dislike-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: none;
  color: white;
  cursor: pointer;
  padding: 1px 4px;
}

/* Like button: green */
.like-button {
  background-color: #3d5135;
}

/* Dislike button: red tint */
.dislike-button {
  background-color: #612727; /* or use: var(--red-tint) if you have it */
}

/* ==========================
   Group ②: Reply button
   ========================== */
.reply-toggle {
  background-color: var(--mac-black);
  color: var(--alt-green);
  border: 0px solid var(--line-color);
  font-size: 15px;
  padding: 3px 12px; 
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

/* ==========================
   Group ③: Edit / Delete Icons
   ========================== */
.edit-toggle,
.delete-button {
  background-color: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.comment-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* ==========================
   Hover Feedback (Optional)
   ========================== */
.like-button:hover,
.dislike-button:hover,
.reply-toggle:hover,
.edit-toggle:hover,
.delete-button:hover {
  opacity: 0.80;
}

    .comment-card{
      background-color: #1c2120;
      border: 0px solid var(--line-color);
      margin-bottom: 20px;
      padding: 3px;
      font-family: 'Roboto', sans-serif;
      color: var(--logo-white);
    }
    
    .comment-top-bar{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border: 0px solid yellow;
      margin-bottom: 5px;
    }

    .comment-thumbnail-holder{
      width: 52px;
      display: flex;  
      /* flex: 0 0 40;  do not grow or shrink; fixed width = 35px */
      /* margin-right: 7px; */
      /*align-items: center;
      justify-content: center; */
    }

    .comment-thumbnail{
      width: 46px;
      height: 46px;
      border-radius: 3px;
    }

    .comment-details{
      flex: 1 1 auto; /* Grow to fill remaining space */
      min-width: 0;   /* Prevent overflowing on small screens */
      /*flex-grow: 1; */
      /* border: 1px solid blue; */
    }


   .comment-top-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: ;
  }   


    .comment-username{
      width: ;
      display: flex;
      flex-wrap: wrap;
      /* border: 1px solid var(--line-color); */
      /* color: var(--title-white); */
      color: white;
      font-size: 18px;
      font-weight: bold;
      text-decoration: none;
    }

    .comment-ago-time{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 12px;
    }

    .comment-reply-to{
      color: var(--title-gold);
      font-size: 14px;
    }


.comment-text {
  width: 100%;
  font-size: 18px;
  color: var(--title-white);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.char-wrapper {
  display: inline;
}
.hidden-rest {
  display: none;
}

.ellipsis {
  display: inline;
}

.show-button-wrapper{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.show-more-btn {
  display: none; /* JS will enable this */
  margin-top: 6px;
  margin-left: 2px;
  padding: 2px 10px;
  font-family: 'RobotoCondense', sans-serif;
  color: var(--alt-green);
  font-size: 13px;
  font-weight: 500;
  background-color: transparent;
  text-decoration: none;
  border-top: 1px solid var(--alt-green);
  border-bottom: 1px solid var(--alt-green);
  border-left: none;
  border-right: none;
  /* border-radius: 6px; */
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.show-more-btn:hover {
  background-color: var(--title-white);
  color: black;
  border-color: var(--title-white);
}

.show-more-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}







/* Indent and style nested replies */
.replies {
  margin-left: 2em;
  border-left: 2px solid var(--line-color);
  padding-left: 1em;
}

/* Spacing above the reply form */
.reply-form-container {
  margin-top: 0.5em;
}