/* ========================================
   Global Theme Variables and Base Styles
   ======================================== */
:root {
  --bg-dark: #121212;
  --text-light: #FCE4F9;
  --accent: #BA5E9E;
  --accent-deep: #7A3E6A;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding-top: 80px;
  padding-bottom: 80px;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================
   Sticky Header and Footer
   ============================ */
.sticky-header,
.footer {
  position: fixed;
  left: 0;
  right: 0;
  background-color: var(--bg-dark);
  z-index: 1000;
  border-color: var(--accent-deep);
}

.sticky-header {
  top: 0;
  border-bottom: 1px solid var(--accent-deep);
}

.footer {
  bottom: 0;
  border-top: 1px solid var(--accent-deep);
}

/* =======================
   Content Area Spacing
   ======================= */
.content {
  margin-top: 2rem;
}

/* ===================
   Headings Styling
   =================== */
h2, h3 {
  color: var(--accent);
}

/* =====================
   Logo and Social Icons
   ===================== */
.logo-img {
  height: 48px;
  max-width: 100%;
}

@media (max-width: 576px) {
  .logo-img {
    height: 36px;
  }
  body {
    padding-top: 60px; /* was probably 80px */
  }

  .content,
  .about-intro {
    margin-top: 1rem; /* tighten this as needed */
  }
}

.social-icons a {
  margin-left: 10px;
  color: var(--accent);
  font-size: 1.25rem;
}

.social-icons a:hover {
  color: #fff;
}

/* =====================
   Responsive Iframe
   ===================== */
iframe {
  width: 100%;
  height: 300px;
}

/* ==============================
   Navigation Styling - General
   ============================== */
.navbar-nav .nav-link {
  color: var(--accent);
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #fff;
}

#mainNav .nav-link {
  padding: 0.5rem 0;
}

/* ==============================
   Desktop Navigation Styles
   ============================== */
.desktop-nav {
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--accent-deep);
  padding: 1rem 0;
  position: sticky;
  top: 64px;
  z-index: 999;
}

.desktop-nav .nav-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}

.desktop-nav .nav-link:hover {
  color: #fff;
}

/* ==============================
   Mobile Navigation Styles
   ============================== */
.mobile-nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 64px;
  left: 0;
  width: 50%;
  background-color: var(--bg-dark);
  z-index: 999;
  padding: 1rem;
  border-right: 1px solid var(--accent-deep);
  border-bottom: 1px solid var(--accent-deep);
}

.mobile-nav.open,
.mobile-nav.show {
  transform: translateX(0);
}

.mobile-nav .nav-link {
  color: var(--accent);
  padding: 0.4rem 0;
  font-weight: 500;
  text-align: left;
}

.mobile-nav .nav-link:hover {
  color: #fff;
}

/* Legacy mainNav sliding styles (not used with new layout) */
#mainNav {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

#mainNav.open {
  transform: translateX(0);
}

/* =============================
   Desktop Header Layout (Flex Row)
   ============================= */
.desktop-header {
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--accent-deep);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  gap: 2rem;
}

.desktop-header .logo-container {
  flex-shrink: 0;
}

.desktop-header nav.desktop-nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-header .social-icons a {
  margin-left: 10px;
  font-size: 1.25rem;
  color: var(--accent);
}

  .desktop-header nav.desktop-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .desktop-header .nav-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
  }

  .social-icons a {
    font-size: 1rem;
    margin-left: 6px;
  }


/* ==============================================
   Forcefully remove nav link underline or border
   ============================================== */
.desktop-nav .nav-link,
.desktop-nav .nav-link:focus,
.desktop-nav .nav-link:active,
.desktop-nav .nav-link:visited {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* ==============================
   Desktop Navigation Styles
   ============================== */
.desktop-nav {
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--accent-deep); /* This line is fine if you want the full header underline */
  padding: 1rem 0;
  position: sticky;
  top: 64px;
  z-index: 999;
}

.desktop-nav .nav-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
  border: none !important;               /* Ensure all borders are cleared */
  border-bottom: none !important;
  box-shadow: none !important;           /* Remove any focus or active shadows */
}


/* ==============================
   Nuke phantom nav underlines
   ============================== */
nav.desktop-nav,
.desktop-nav ul,
.desktop-nav li {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Highlight the current (active) page in the nav */
.desktop-nav .nav-link.active,
.mobile-nav .nav-link.active {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}

/* Section: Meet the Crew - 3-column layout with square images on About page */
.meet-the-crew .crew-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Makes it a square */
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--accent-deep);
}

/* ggb buton small variant */
.ggb-btn-small {
  display: inline-block;
  background-color: #9A5081;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  margin-top: 6px;
  transition: background-color 0.2s ease;
}

.ggb-btn-small:hover {
  background-color: #b26497;
  color: #fff;
}

/* GGB Themed Buttons */
.ggb-btn {
  background-color: var(--accent);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ggb-btn:hover {
  background-color: var(--accent-deep);
  transform: translateY(-2px);
  cursor: pointer;
}

.ggb-btn-alt {
  background-color: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.ggb-btn-alt:hover {
  background-color: var(--accent-deep);
  color: white;
  border-color: var(--accent-deep);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.button-row .btn {
  flex: 1 1 100%;
  max-width: 250px;
  min-width: 200px;
  text-align: center;
}

/* Make buttons full-width and same size on small screens */
@media (max-width: 768px) {
  .ggb-btn {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* tablet based sizes */
@media (max-width: 992px) {
  .ggb-btn,
  .ggb-btn-alt {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }

  .button-row {
    flex-direction: column;
    align-items: center;
  }
}

/* make nav menu bigger on big screens */
@media (min-width: 1200px) {
  .content {
    margin-top: 4rem;
  }
  
  .desktop-header {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .desktop-nav .nav-link {
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
  }

  .logo-img {
    height: 60px;
  }

  .social-icons a {
    font-size: 1.4rem;
  }
}

/*bigger text on contact ()*/
@media (min-width: 992px) {
  .contact-page h2 {
    font-size: 2rem;
  }

  .contact-page p,
  .contact-page h5 {
    font-size: 1.15rem;
  }

  .ggb-btn {
    font-size: 1.05rem;
    padding: 0.75rem 1.5rem;
  }
}

/*accent color*/
.text-accent {
  color: var(--accent);
}

/*buzzpsrout player stuff*/
.buzzsprout-wrapper {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.buzzsprout-wrapper iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 73px !important; /* This is the height of the small player */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 768px) {
  .episode-list,
  .blog-list,
  .movie-list {
    max-height: 30vh; /* Adjust as needed */
    overflow-y: auto;
    font-size: 0.875rem; /* Slightly smaller text */
    padding-right: 6px; /* Avoid scrollbar overlap */
  }

  .episode-list::-webkit-scrollbar,
  .blog-list::-webkit-scrollbar,
  .movie-list::-webkit-scrollbar {
    width: 6px;
  }

  .episode-list::-webkit-scrollbar-thumb,
   .blog-list::-webkit-scrollbar-thumb,
    .movie-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-deep);
    border-radius: 4px;
  }

  .episode-list h5,
  .blog-list h5,
  .movie-list h5 {
    font-size: 1rem;
  }

  .episode-list,
  .blog-list,
  .mobie-list {
    border-bottom: 1px solid var(--accent-deep);
  }

  
}
@media (max-width: 768px) {
  .episode-scroll-container,
  .blog-scroll-container,
  .movie-list-container {
    max-height: 30vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }

  .episode-list,
  .blog-list,
  .movie-list {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 6px;
  }

  .episode-list::-webkit-scrollbar,
   .blog-list::-webkit-scrollbar,
   .movie-list::-webkit-scrollbar{
    width: 6px;
  }

  .episode-list::-webkit-scrollbar-thumb,
  .blog-list::-webkit-scrollbar-thumb,
  .movie-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-deep);
    border-radius: 4px;
  }

  .player-panel,
  .blog-panel,
  .movie-panel {
    position: relative;
    z-index: 1;
  }
}


.blog-date {
      color: #BA5E9E !important;
      font-weight: 500;
    }

    #blog-links a.active,
    #episode-links a.active,
    #movie-links a.active {
  background-color: var(--accent);
  color: #fff;
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 4px;
}

/* ==============================
   Scrollable Left Column (Episode/Blog List)
   ============================== */
.episode-list,
.blog-list,
.movie-list {
  max-height: calc(100vh - 140px); /* adjust for header + footer height */
  overflow-y: auto;
  padding-right: 6px;
}

.episode-list::-webkit-scrollbar,
.blog-list::-webkit-scrollbar,
.movie-list::-webkit-scrollbar {
  width: 6px;
}

.episode-list::-webkit-scrollbar-thumb,
.blog-list::-webkit-scrollbar-thumb,
.movie-list::-webkit-scrollbar-thumb {
  background-color: var(--accent-deep);
  border-radius: 4px;
}

/*dropdown menu mobile*/

@media (max-width: 768px) {
  #episode-dropdown,
  #blog-dropdown,
  #movie-dropdown
   {
    background-color: #111;
    color: #fff;
    border-color: #9A5081;
  }
}

@media (max-width: 767px) {
  #episode-dropdown-container,
  #blog-dropdown-container,
  #movie-dropdown-container {
    z-index: 999;
    background-color: #111;
    padding: 10px;
    border-bottom: 1px solid #444;
  }
}
#episode-dropdown {
  appearance: none;         /* Try to remove system styling (only partially works on iOS) */
  -webkit-appearance: none; /* Required for iOS Safari */
  background-color: #121212;
  color: #fff;
  border: 1px solid #9A5081;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

   #shared-header {
  position: relative;
  z-index: 1001;
}
#episode-dropdown-container h3 {
  margin-top: 0;
  padding-top: 0;
}


/* ==============================
   Formatting byline/date on blogs
   ============================== */
.post-date{
  font-size:small;
  font-style:italic;
}


/* ==============================
   episodes page button styling w/ thumbnail
   ============================== */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px; /* spacing between buttons */
}

.button-group .ggb-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  color: #fff;
  background-color: #9A5081; /* Adjust to your site's accent color */
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.button-group .ggb-btn:hover {
  background-color: #803D6A; /* Slightly darker accent on hover */
}



/* ==============================
override default iOS/android mobiel dropdown
   ============================== */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-toggle-btn {
  width: 100%;
  background-color: #1e1e1e;
  color: white;
  border: 1px solid #444;
  padding: 10px;
  border-radius: 6px;
  text-align: left;
  font-weight: bold;
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background: #222;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 999;
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-options.show {
  display: block;
}

.dropdown-options div {
  padding: 10px;
  color: white;
  cursor: pointer;
}

.dropdown-options div:hover {
  background-color: #444;
}

.dropdown-option.active {
  background-color: #9A5081;
  color: white;
}

.dropdown-search {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid #444;
  background-color: #111;
  color: #BA5E9E;
  box-sizing: border-box;
}


.sidebar-episode[style*="display: none"] {
  display: none !important;
}

@media (max-width: 767px) {
  main.container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
}

/* clear search x icon */

.search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

.search-wrapper input {
  width: 100%;
  padding-right: 2rem; /* leaves space for the ✕ icon */
  box-sizing: border-box;
}

.clear-icon {
  position: absolute;
  right: 1.50rem;        /* pull it in closer to the edge */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;    /* make it a little larger */
  cursor: pointer;
  color: var(--accent);  /* use your site’s accent color */
  display: none;
  z-index: 10;
  background: transparent;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.clear-icon:hover {
  opacity: 1;
}

/* ===== Blog embed defaults (scoped) ===== */
#blog-post,
#blog-post p,
#blog-post li,
#blog-post span,
#blog-post div {
  color: var(--text-light);
}

#blog-post h1,
#blog-post h2,
#blog-post h3 {
  color: var(--accent);
}

#blog-dynamic-content img,
#blog-dynamic-content figure img {
  display: block;
  margin: 1rem auto;      /* center */
  max-width: 100%;
  height: auto;
}

#blog-dynamic-content figure {
  text-align: center;
}

#blog-dynamic-content a {
  color: var(--accent);
}

/* ===== Blog embed defaults (scoped & strong) ===== */
#blog-dynamic-content * {
  color: var(--text-light) !important; /* override any black coming from Google export */
}

#blog-post h1,
#blog-post h2,
#blog-post h3 {
  color: var(--accent) !important;     /* your pink headings */
}

#blog-dynamic-content a {
  color: var(--accent) !important;     /* keep links in accent */
  text-decoration: underline;
}

#blog-dynamic-content img,
#blog-dynamic-content figure img {
  display: block;
  margin: 1rem auto;                   /* center images */
  max-width: 100%;
  height: auto;
}

#blog-dynamic-content figure { text-align: center; }

/* Blog body spacing */
#blog-dynamic-content p {
  margin: 0 0 1rem;      /* space between paragraphs */
  line-height: 1.6;      /* easier reading */
}
#blog-dynamic-content p:empty { display: none; }

/* --- Normalize Google Docs export inside the blog body --- */
#blog-dynamic-content p,
#blog-dynamic-content li,
#blog-dynamic-content blockquote {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;   /* bring back paragraph spacing */
  line-height: 1.6;                  /* nicer reading */
  text-indent: 0 !important;         /* kill random first-line indent */
}

/* Docs sometimes inlines margin/text-indent on specific <p> elements */
#blog-dynamic-content p[style*="margin"],
#blog-dynamic-content p[style*="text-indent"] {
  margin: 0 0 1rem !important;
  text-indent: 0 !important;
}

/* After centered captions or images, ensure the next paragraph isn't indented and has top space */
#blog-dynamic-content figure + p,
#blog-dynamic-content p[style*="text-align:center"] + p,
#blog-dynamic-content figcaption + p {
  margin-top: 1rem !important;
  text-indent: 0 !important;
}

/* Images & captions */
#blog-dynamic-content figure {
  margin: 1.25rem auto !important;
  text-align: center;
}
#blog-dynamic-content figcaption,
#blog-dynamic-content p[style*="text-align:center"] em {
  display: block;
  text-align: center;
  margin-top: .5rem !important;
  font-style: italic;
}