/* CSS Document */

:root{
  --theatre-bg: #121014;      /* near-black plum */
  --theatre-bg-2: #1a1620;    /* slightly lighter */
  --cream: #f5f0e6;
  --gold: #c9a646;
  --muted: #b9b3aa;
}

body{
  background: #0f0e12;
  color: var(--cream);
}

.bg-theatre{
  background: linear-gradient(90deg, var(--theatre-bg), var(--theatre-bg-2));
}

.brand-subtitle{
  font-size: .78rem;
  opacity: .8;
  line-height: 1.1;
}

.btn-donate{
  background: var(--gold);
  border: 0;
}
.btn-donate:hover{ filter: brightness(1.05); }

.hero-memorial{
  background: radial-gradient(ellipse at top, #2a2136 0%, #14111a 55%, #0f0e12 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

.memorial-kicker{
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
}

.card-poster{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: transform .12s ease, border-color .12s ease;
}
.card-poster:hover{
  transform: translateY(-2px);
  border-color: rgba(201,166,70,.45);
}

.poster-img{
  width: 100%;
  height: 220px;
  object-fit: contain; /* use this because the show poster images are very small */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Prevent small legacy show posters from being upscaled too much */
.poster-legacy{
  width: 100%;
  max-width: 330px;   /* close to your 312px originals */
  height: auto;
  display: block;
}

/* Center the poster in its column */
.poster-wrap{
  display: flex;
  justify-content: center;
}

/*
  Cast photos
---------------------------------------------------------*/
.cast-name{
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px dotted rgba(245,240,230,.55);
}

.cast-name:hover{
  border-bottom-color: rgba(201,166,70,.9);
}

/* Hover preview (desktop) */
.cast-preview{
  display: none;
  position: absolute;
  left: 0;
  top: 1.6rem;
  z-index: 1000;
  width: 100px;
  background: rgba(15,14,18,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}

.cast-preview img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Only show hover preview on devices that actually hover */
@media (hover: hover) and (pointer: fine){
  .cast-name:hover .cast-preview{ display: block; }
}

/*
control of the mobile scroll for all the seasons (22 of them!)
------------------------------------------------------------- */
/* Allow scrolling inside the collapsed mobile navbar (Bootstrap 4) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: calc(100vh - 56px); /* 56px = typical navbar height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Optional: keep dropdown menus within the scrollable collapse area */
  .navbar-nav .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.navbar-nav .dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.section-title{
  border-left: 4px solid var(--gold);
  padding-left: 12px;
  margin-bottom: 14px;
}

.text-muted{ color: rgba(245,240,230,.65) !important; }

.footer-memorial{
  background: #0c0b0f;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-link{
  color: rgba(245,240,230,.78);
}
.footer-link:hover{
  color: var(--gold);
  text-decoration: none;
}

.breadcrumb{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.breadcrumb a{ color: rgba(245,240,230,.85); }