/* ====================================
   Garland Park Chronicles Podcast
==================================== */

.collapsible-container {
   margin: 20px 0;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   padding: 2rem 25rem 2rem 25rem;
}
  
.collapsible-btn {
   background: none;
   border: none;
   font-size: 1rem;
   font-weight: bold;
   text-align: left;
   cursor: pointer;
   width: 100%;
   padding: 10px 0;
   color: var(--color-dark, #333);
   display: flex;
   align-items: center;
   gap: var(--spacing-lg);
}

.collapsible-btn:hover {
   color: var(--color-primary, #007bff);
}

body.dark-mode .collapsible-btn {
   color: var(--color-white, #fff);
}

#toggle-icon {
   font-size: var(--font-size-lg, 1.25rem);
}

.collapsible-content {
   font-size: var(--font-size-md, 1rem);
   color: var(--color-dark, #333);
   line-height: var(--line-height-reg, 1.5);
   display: none;
   padding: 10px 0;
}

.collapsible-content h3 {
   font-family: var(--font-heading, 'Roboto', sans-serif);
   font-size: var(--font-size-xxl, 2rem);
   margin-top: var(--spacing-lg, 2rem);
}

.collapsible-content p {
   margin-bottom: var(--spacing-sm, 1rem);
   text-align: justify;
}

body.dark-mode .collapsible-content p {
   color: var(--color-off-white, #efefef);
}

/* PODCAST AUDIO PLAYER */

.audio-player-container {
   margin: var(--spacing-lg, 2rem);
   font-family: var(--font-body, 'Roboto Serif', serif);
   color: var(--color-dark, #333);
   text-align: center;
}

.audio-player-container h1 {
   margin: var(--spacing-sm, 1rem);
}
 
.audio-player {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-lg, 2rem);
   padding: var(--spacing-xs, 0.5rem);
   background: var(--color-white, #fff);
   border-radius: var(--border-radius-sm, 0.25rem);
   box-shadow: var(--drop-shadow-1);
   border: 1px solid var(--color-secondary, #666);
}
 
.play-pause-btn {
   font-size: var(--font-size-xl, 1.5rem);
   background: none;
   border: none;
   cursor: pointer;
}
 
.play-pause-btn:hover {
   color: var(--color-primary, #007BFF);
}
 
.audio-progress-container input[type="range"] {
   width: 100%;
   max-width: var(--max-width-sm, 40rem);
   background: var(--color-white, #fff);
   height: var(--spacing-xs, 0.5rem);
   border-radius: var(--border-radius-sm, 0.25rem);
}
 
.audio-progress-container input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   background: var(--color-secondary, #666);
   border-radius: 50%;
   height: 12px;
   width: 12px;
   cursor: pointer;
}
 
.time {
   font-size: var(--font-size-md, 1rem);
   color: var(--color-secondary, #666);
}

@media (max-width: 1024px) {
   .collapsible-container {
       padding: 2rem 10rem;
   }

   .collapsible-btn {
      font-size: var(--font-size-md, 1rem);
      gap: var(--spacing-md, 1.5rem);
   }

   #toggle-icon {
      font-size: var(--font-size-lg, 1.25rem);
   }

   .collapsible-content h3 {
      font-size: var(--font-size-xl, 1.5rem);
      margin-top: var(--spacing-md, 1.5rem);
   }

   .collapsible-content p {
      font-size: var(--font-size-sm, 0.875rem);
      line-height: var(--line-height-reg, 1.6);
   }

   .audio-player-container {
      margin: var(--spacing-md, 1.5rem);
   }

   .audio-player {
      flex-wrap: wrap;
      gap: var(--spacing-md, 1.5rem);
}

   .audio-progress-container input[type="range"] {
      max-width: 30rem;
   }

   .time {
      font-size: var(--font-size-sm, 0.875rem);
   }

   .content-about-container {
       padding: var(--spacing-sm, 1rem);
   }

   .content-about h2 {
      font-size: var(--font-size-xxl, 2rem);
      margin-bottom: var(--spacing-sm, 1rem);
   }

   .content-about p {
      font-size: var(--font-size-sm, 0.875rem);
      line-height: var(--line-height-reg, 1.6);
   }
}

@media (max-width: 767px) {
   .collapsible-container {
       padding: 1.5rem 2rem;
   }

   .collapsible-btn {
      font-size: var(--font-size-sm, 0.875rem);
      padding: 8px 0;
   }

   #toggle-icon {
      font-size: var(--font-size-md, 1rem);
   }

   .collapsible-content h3 {
      font-size: var(--font-size-lg, 1.25rem);
      margin-top: var(--spacing-sm, 1rem);
   }

   .collapsible-content p {
      font-size: var(--font-size-sm, 0.875rem);
      line-height: var(--line-height-reg, 1.6);
   }

   .audio-player-container {
      margin: var(--spacing-sm, 1rem);
   }

   .audio-player {
      flex-direction: row;
      gap: 10px;
   }

   .audio-progress-container input[type="range"] {
      max-width: 100%;
   }

   .time {
      font-size: var(--font-size-sm, 0.875rem);
   }

   .featured-image img {
      max-width: 100%;
      height: auto;
   }

   .content-about-container {
      padding: var(--spacing-sm, 1rem);
   }

   .content-about h2 {
      font-size: var(--font-size-xl, 1.5rem);
       margin-bottom: 0.5rem;
   }

   .side-container.small {
      width: 100%;
      margin-bottom: var(--spacing-xs, 0.5rem);
   }

   #lightbox-modal .modal-content {
      max-width: 90%;
   }

   .arrow {
      font-size: 1.2rem;
   }
}