/* General link styles */

a {
    color: #007BFF; /* Change this to your desired color */
    text-decoration: none; /* Removes underline */
  }
  
  a:hover {
    color: #0056b3; 
  }
  
  /* Page layout */
  .author-page {
    padding: 20px;
    background-color: #FFFFFF;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    .author-wrapper {
      margin-inline: auto;
      float: unset;
      .modifying {
        display: flex; 
        justify-content: space-between; 
        align-items:center; 
        gap: 10px; 
        margin-left:0; 
        margin-bottom:10px;

        /* Breadcrumb */
        .author-nav-breadcrumb {
          font-family: Montserrat-Regular;
          font-size: 14px;
          color: #333;
          margin: 16px 20px;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          white-space: nowrap;
          overflow: hidden;
          a {
            color: #5d5656;
            font-weight: 400;
            text-decoration: none;
          }
          span {
            color: #0A4476;
            font-weight: 700;
            margin-left: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            display: inline-block;
            flex-shrink: 1;
          }
        }
      }
      /* Author card layout */
      .author-card {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
        background-color: #FFFFFF;
        .author-image {
          position: relative;
          width: 170px;
          height: 170px;
          margin-right: 0;
          img {
            width: 100%;
            height: 100%;
          }
          /* Social media icons */
          .social-icons {
            position: absolute;
            bottom: -10px;
            right: 0;        
            .social-icon {
              width: 50px; 
              height: 50px;
              border-radius: 50%; 
              overflow: hidden;
              display: flex;
              align-items: center; 
              justify-content: center;
              border: 1px solid #e0e0e0;
              img {
                width: 100%;
                height: 100%; 
                object-fit: cover;
              }
            }
          }
        }

        @media(max-width: 620px) {
          flex-wrap: wrap;
          flex-direction: column;
          align-items: flex-start;
          .author-image {
            position: relative;
            width: 135px;
            height: 135px;
          }
        }

        /* Author details */
        .author-details {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          flex: 1;
          max-width: 1800px;
          width: 100%;
    
          h2 {
            font-size: 23px;
            color: #004783;
            font-weight: 600; 
            margin: 0;
          }
    
          p {
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 14px;
            color: #808080;
            margin: 0;
          }

          span {
            color: #808080;
            font-weight: 600;
          }

          .tags-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            /* Section for writing tags */
            .tags {
              display: flex;
              align-items: center;
              gap: 8px;
            
              .tag {
                background-color: #094477;
                color: #fff;
                padding: 5px 8px;
                border-radius: 10px;
                font-size: 10px;
              }
            }
          }
        }
      }
      /* FAQ section */
      .answer-wrapper {
        padding: 20px;
        h3 {
          font-size: 23px;
          color: #333333;
          font-weight: 600; 
        }
      }
    }
    @media (max-width: 992px) {
      padding-top: 6rem;
    }
    @media (max-width: 767px) {
      padding-top: 2rem;
      .author-wrapper {
        padding: 0;
      }
    }
  }
  
  
  h4 {
    font-size: 23px;
    color: #333333;
    font-weight: 550; 
  }

  
  /* FAQ cards */
  .faq-questions {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .faq-card-extra{
      padding-top: 15px;
    }
    .faq-card {
      padding: 15px;
      background-color: #FFFFFF;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
      h4 {
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 16px;
        color: #094477;
        margin-bottom: 10px;
        text-indent: -1em; /* Pulls the first line back */
        padding-left: 2em;
      }
      p {
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
      }
      a {
        font-size: 14px;
        color: #094477;
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
        &:hover {
          color: #0056b3;
        }
      }
      .faq-card-content {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-left: 2.5em;
        p {
          display: inline-block;
        
        }
      }
    }
  }

  .view-more-wrapper {
    text-align: center;
    margin-top: 15px;
    #view-more-btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #fff;
      color: #094477;
      text-align: center;
      text-decoration: none;
      border-radius: 30px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      &:hover {
        background-color: #bde6f2;
      }
    }
  }

  .articles {
    padding: 20px;
    h3 {
      font-size: 23px;
      color: #333333;
      font-weight: 600;
    }
    .articles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
      gap: 35px;
      @media (max-width: 1359px) and (min-width:700px) {
        gap: 25px;
        > div:last-child {
          display: none;
        }
      }
      @media (max-width: 700px) {
        grid-template-columns: unset;
      }
    }
    .article-item {
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease;
      .author-article-image {
        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
      }
      .article-content {
        padding: 20px;
        .article-title {
          color: #094477;
          font-size: 18px;
          margin: 0 0 15px;
          display: -webkit-box;
          line-clamp: 2;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-family: Montserrat-Light !important;
        }
        .article-description {
          font-size: 14px;
          color: #666;
          margin-bottom: 15px;
          .clamp {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;  
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 8px;
          }
        }
        .read-now {
          color: #094477;
          text-decoration: none;
          font-weight: bold;
          padding-top: 10px;
        }
      }
    }
  }
  
  /* Modal container */
  .modal {
    display: grid;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 110%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
  }
  
  /* Modal content */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 25px;
    border: 4px solid #808080;
    width: 80%;
    max-width: 700px;
    border-radius: 10px;
    align-self: center;
  }
  
  /* Close button */
  .close {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  #dropdown > * {
    margin-bottom: 20px; /* Adjust margin for child elements */
  }
  
  #dropdown > *:last-child {
    margin-bottom: 0; /* Remove margin from the last child */
  }
  
  .inmate-search-box{
    gap: 20px;
    display: grid;
  }
  
  .state, .facility-name{
    min-height: 40px;
  }
  
  .keyword{
    width: 87%;
    min-height: 40px;
  }
  
  .prisonDirect-btn{
    width: 49%;
    border: unset;
    padding: 14px 10px;
    background-color: #2DCF63;
  }
  
  p6{ 
    font-size: 18px;
    top: -12px;
    position: relative;
    margin-left: 65px;
    color: #FFFFFF;
  }
  
  .inmate-search-box {
    border: 1px solid #ccc; /* Set the border color and width */
    border-radius: 4px; /* Adjust this value for more or less rounding */
    padding: 25px; /* Optional: Add padding for spacing inside the box */
    background-color: rgba(255, 255, 255, 0.9); /* Optional: Set a background color */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0); /* Optional: Add a subtle shadow */
  }
  
  
  
  h5{
    margin-left: 150px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 23px;
    color: #333333;
    font-weight: 550; 
    color: #FFFFFF;
  }
  
  
  .modal-content {
    background-color:#83c2f2;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    height: 390px;
    border-radius: 15px;
  }
  
  
  .prisonDirect-btn{
    width: 20%;
    border-radius: 15px;
  }
  
  .reset-btn{
    background-color: #4CAF50;
    border-radius: 15px;
    height: 300px;
    display: contents;
  }