/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&ampfamily=Playfair+Display:wght@700;800;900&family=Montserrat:wght@400;500;600;700&ampdisplay=swap');

:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --surface2: #1a1a1a;
  --border: #2a2a2a;
  --text: #f0ead6;
  --text-secondary: #a0a0a0;
  --accent: #ffe999;
  --red: #cc2200;
  --orange: #ff6600;
  --french-blue: #4169b8;
  --gold: #d4a017;
  --jade: #41b88a;
  --beige: #f5f0dc;
  --chalk: #e8dfc8;
  --font-main: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-heading: 'Oswald', 'Impact', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}


header {
    background: #0a0a0a;              /* Ultra-dark charcoal premium background */
    border-bottom: 2px solid #e50914; /* Sleek, thin Showcase Red accent line */
    position: sticky;                 /* Keeps the header pinned to the top when scrolling */
    top: 0;
    z-index: 1000;                    /* Ensures it stays on top of video elements/carousels */
    padding: 12px 0;                  /* Tightened vertical padding to make header less bulky */
    transition: all 0.3s ease;
}

.hero-carousel-container {
    position: relative;
    max-width: 85%;      /* Trims the width down so it doesn't span full-screen */
    margin: 20px auto;   /* The 'auto' horizontally centers the trimmed banner */
    height: 550px;       
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid #222;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

body {
    background-image: url('https://web.archive.org/web/20170929111441im_/http://cinemaxasia.com/assets/img/core/cinemax-bg-pattern-1.png'); /* Your uploaded PNG file */
    background-repeat: repeat;        /* Tiles the PNG across the page */
    background-attachment: scroll;    /* MAGIC LINE: Makes the background image scroll with the page */
    color: #000000;                   /* Forces all standard body text to be pure black */
    font-size: 18px;
    font-family: 'Helvetica', Arial, sans-serif;
    margin: 0;
    padding: 0;
}
@media (max-width:768px){
  
  .banner-slider .banner-slide img{
  height:180px;
  object-fit:cover;
  
  }
  

/* --- Centering Logic --- */
.container {
    max-width: 1100px; /* Limits the width for readability */
    margin: 0 auto;    /* This is the key: it centers the div horizontally */
    padding: 0 20px;   /* Prevents touching edges on mobile */
}

/* --- Basic Layout Formatting --- */
header {
    background: #000;
    padding: 20px 0;
    border-bottom: 2px solid #e50914;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero {
    text-align: center;
    padding: 60px 0;
}

.featured-section {
    margin: 40px 0;
}

.hamburger-btn {
      display: none;
      background: none;
      border: none;
      color: #fff;
      font-size: 28px;
      cursor: pointer;
      padding: 5px;
    }

    .hamburger-btn:hover {
      color: #00a8ff;
    }
    
.info-block {
    background: rgba(255, 255, 255, 0.8);
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 40px;
    color: #333;
}
header {
            /* Replace with your rectangular image URL */
            background-image: url(https://web.archive.org/web/20170929092909im_/http://cinemaxasia.com/assets/img/core/cinemax-bg-pattern-bottom.jpg);

            /* Enlarge the image to cover the header area */
            background-size: cover;

            /* Set the position of the background image (optional) */
            background-position: center;

            /* Remove any background repeat */
            background-repeat: no-repeat;

            /* Set a height for the header */
            height: 100px;

            /* Center the content horizontally */
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* --- Interactive Hero Carousel --- */
.hero-carousel-container {
    position: relative;
    max-width: 100%;
    height: 600px; /* How tall the massive hero banner is */
    overflow: hidden;
    border-radius: 12px;
    margin: 20px 0 40px 0;
    border: 2px solid #222;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* The smooth sliding animation */
}

.carousel-slide {
    min-width: 100%; /* Forces each slide to take up the full container */
    height: 100%;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps images from looking stretched */
}

/* THE BLACK GRADIENT MASK */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Fades from 95% black at the bottom to invisible at the top */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, transparent 100%);
    padding: 60px 40px 30px 40px;
    box-sizing: border-box;
    color: #fff;
    text-align: left;
}

.hero-block {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: #e50914; /* Showcase Red */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.hero-title {
    font-size: 3.5rem; /* Massive title text */
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,1);
    line-height: 1.1;
}

.hero-time {
    font-size: 1.1rem;
    color: #ddd;
    font-weight: bold;
}

/* CAROUSEL BUTTONS */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 8px;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-btn:hover {
    background: #e50914; /* Turns red when you hover */
}

.carousel-btn.prev { left: 15px; }
.carousel-btn.next { right: 15px; }
html, body {
  padding:0;
  margin:0;
}
body {
  font-size:12px;
}

body {
    /* Add this line to your existing body code */
    font-size: 1.15rem; /* This makes all text roughly 15% larger */
}

p {
    /* Update your paragraph rule to be larger and more readable */
    font-size: 1.15rem; 
    line-height: 1.7; /* Adds nice breathing room between lines */
    color: #e0e0e0; 
    margin-bottom: 1.5rem; 
}

body a {
  color:white;
}

/* ==========================================================================
   GLOBAL BODY WITH PNG BACKGROUND
   ========================================================================== */
body {
    background-color: #141414;        /* Fallback color while your image loads */
    background-image: url('https://web.archive.org/web/20170929111441im_/http://cinemaxasia.com/assets/img/core/cinemax-bg-pattern-1.png'); /* Replace with your exact uploaded PNG filename */
    background-repeat: repeat;        /* Automatically tiles the PNG across the entire page */
    background-attachment: fixed;     /* Keeps the background locked in place while the user scrolls */
    color: #e0e0e0;
    font-size: 18px;
    font-family: 'Helvetica', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   RESPONSIVE SHOWS GRID SYSTEM
   ========================================================================== */
.shows-grid {
    display: grid;
    /* This automatically creates as many 240px wide columns as will fit on the screen */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;                        /* Controlled spacing between grid cards */
    margin: 40px 0;
}

/* Individual Grid Item Card */
.grid-card {
    background: rgba(10, 10, 10, 0.85); /* Dark background with slight transparency over the body PNG */
    border: 2px solid #252525;
    border-radius: 8px;
    overflow: hidden;                 /* Forces the image corners to round with the card */
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, border-color 0.2s ease;
    text-decoration: none;            /* Removes underlines from text inside link card */
    display: block;
}

.grid-card:hover {
    transform: translateY(-5px);     /* Smooth liftoff effect on hover */
    border-color: #e50914;            /* Changes border to Showcase Red on hover */
}

/* The Grid Image Placeholders */
.grid-card img {
    width: 100%;
    height: 160px;                    /* Forces every single image placeholder to be the exact same height */
    object-fit: cover;                /* Crops your images perfectly into the placeholder dimensions without stretching */
    border-bottom: 2px solid #252525;
    display: block;
}

/* Typography inside the Grid Cards */
.card-details {
    padding: 15px;
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.card-category {
    font-size: 0.8rem;
    color: #888;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

header, nav {
  max-width:100%;
}
aside {
  width:250px;
  margin-top:30px;
}
.flex {
  display:flex;
  max-width:900px;
}
nav {
  height:auto;
  margin-bottom:10px;
  background-color:white;
}
:before,:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Black_colour.jpg?utm_source=en.wikiquote.org&utm_campaign=index&utm_content=original);
    background-size: cover; /* Stretches to fill entire screen */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 0; }

/* NOISE TEXTURE OVERLAY */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
}

/* INTRO ANIMATION */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.intro-overlay.fade-out {
  animation: introFadeOut 0.8s ease forwards;
}

@keyframes introFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); pointer-events: none; }
}

.intro-bg-scratches {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scratch-line {
  position: absolute;
  background: rgba(255,255,255,0.06);
  transform-origin: center;
}

.intro-genre-word {
  font-family: 'Helvetica Neue';
  font-size: clamp(60px, 12vw, 140px);
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
  transform: scaleX(0.3) translateX(-60px);
  filter: blur(8px);
  transition: none;
  white-space: nowrap;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.8);
}

.intro-genre-word.active {
  animation: wordSlam 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-genre-word.exit {
  animation: wordExit 0.4s ease-in forwards;
}

@keyframes wordSlam {
  0% { opacity: 0; transform: scaleX(0.2) translateX(-80px); filter: blur(12px); }
  60% { opacity: 1; transform: scaleX(1.05) translateX(4px); filter: blur(0); }
  100% { opacity: 1; transform: scaleX(1) translateX(0); filter: blur(0); }
}

@keyframes wordExit {
  0% { opacity: 1; transform: scaleX(1) translateX(0); filter: blur(0); }
  100% { opacity: 0; transform: scaleX(0.8) translateX(80px); filter: blur(8px); }
}

.intro-logo-final {
  opacity: 0;
  animation: logoReveal 1s ease forwards;
  text-align: center;
}

@keyframes logoReveal {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.logo{
  height:64px;
  display:flex;
  align-items:center;
  margin-left:-59.9px;   /* controls horizontal position */
}

#logoAnim{
  height:200%;
  width:auto;
  display: block;
}

    .nav-links {
      list-style: none;
      display: flex;
      gap: 40px;
      padding: 0;
      margin-left: auto;
    }

       .nav-links li a {
  text-decoration: none;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: bold;
  color: #000000;
  font-size: 18px;
  padding: 10px 20px; /* ↑ taller and wider */
  border-radius: 0px;  /* smooth corners */
  transition: background-color 0.2s, color 0.2s;
    }

    .nav-links li a:hover {
  background-color: #00b5f3; /* box color */
  color: #ffffff; /* text color when highlighted */
  border-bottom: none; /* remove underline if you had it */
  width: 10px
    }
    
    .nav-links li a.active {
      border-bottom: none;
    }

/* SHOWCASE LOGO WORDMARK */
.showcase-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.showcase-wordmark {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -1px;
  text-transform: lowercase;
  color: black;
  position: relative;
  line-height: 1;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 rgba(0,0,0,0.5);
  filter: url(#grunge-filter);
}

.showcase-wordmark sup {
  font-size: 10px;
  vertical-align: super;
  font-family: 'Helvetica Neue';
  font-weight: 700;
  color: var(--text);
  margin-left: 1px;
}

.showcase-wordmark::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

/* GRUNGE SCRATCHES on logo */
.logo-scratch-overlay {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  overflow: visible;
}

/* NAVIGATION */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10,10,10,0.97);
  border-bottom: 2px solid var(--accent);
  backdrop-filter: none;
  box-shadow: 0 4px 0 rgba(0,0,0,0.8);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex-wrap: nowrap;
}

.nav-links a {
  color: #000000;
  text-decoration: none;
  font-family: 'Montserrat'; sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  position: relative;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255,233,153,0.08);
  box-shadow: 2px 2px 0 var(--accent);
  transform: translate(-1px, -1px);
}

.nav-links a.active {
  color: var(--accent);
  border-color: var(--accent);
}

.nav-search-btn {
  background: none;
  border: 2px;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.nav-search-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 2px 2px 0 var(--accent);
  transform: translate(-1px, -1px);
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-box {
  width: 90%;
  max-width: 700px;
  position: relative;
}

.search-box input {
  width: 100%;
  background: var(--surface);
  border: 3px solid var(--accent);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  padding: 16px 24px;
  outline: none;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0 var(--accent);
}

.search-box input::placeholder {
  color: var(--text-secondary);
}

.search-close {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 2px solid var(--text-secondary);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.search-close:hover {
  border-color: var(--red);
  color: var(--red);
}

/* HERO SECTION */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0000 0%, #0a0a0a 50%, #000510 100%);
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.hero-paint-splatter {
  position: absolute;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 24px;
  width: 100%;
}

.hero-eyebrow {
  font-family: 'Arial Black';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.hero-title {
  font-family: 'Helvetica Neue';
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  margin-bottom: 24px;
  color: var(--text);
  position: relative;
  cursor: default;
}

.hero-title:hover {
  animation: glitchText 0.3s steps(2) infinite;
}

@keyframes glitchText {
  0% { text-shadow: 3px 0 var(--red), -3px 0 var(--french-blue); clip-path: inset(0 0 80% 0); }
  25% { text-shadow: -3px 0 var(--red), 3px 0 var(--french-blue); clip-path: inset(20% 0 60% 0); }
  50% { text-shadow: 3px 0 var(--gold), -3px 0 var(--red); clip-path: inset(40% 0 40% 0); }
  75% { text-shadow: -3px 0 var(--gold), 3px 0 var(--orange); clip-path: inset(60% 0 20% 0); }
  100% { text-shadow: 3px 0 var(--red), -3px 0 var(--french-blue); clip-path: inset(80% 0 0 0); }
}

.hero-title span.accent { color: var(--accent); }
.hero-title span.red { color: var(--red); }

.hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 32px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 5px 5px 0;
  transition: all 0.1s ease;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 96% 100%, 0 100%);
}

.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0;
}

.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 2px solid;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(255,255,255,0.1);
  transition: all 0.1s ease;
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
  transform: translate(-2px, -2px);
}

/* Container block centered beneath the carousel */
.shows-section {
  width: 100%;
  max-width: 600px; /* Match this width to your carousel element */
  margin: 20px auto;
  background: #18181b; /* Modern charcoal grey profile */
  border: 1px solid #27272a;
  border-radius: 6px;
  padding: 16px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.section-title {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px 0;
}

/* Scroll container establishing the dual-column structure */
.shows-scroll-container {
  height: 190px; /* Forces vertical scrolling when contents overflow */
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-right: 8px; /* Buffer space preventing scrollbar overlay */
}

/* Individual list item layouts */
.show-item-card {
  display: flex;
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 4px;
  padding: 8px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.show-item-card:hover {
  background: #3f3f46;
  border-color: #52525b;
}

.schedule-frame {
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  padding: 18px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px #ccc;
  margin-bottom: 30px;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-schedule-banner img {
  width: 80%;
  margin: 0 auto 15px auto;
  display: block;
  border-radius: 8px;
}

.sidebar-schedule {
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.schedule-item {
  margin-bottom: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
}

.schedule-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.schedule-item p {
  margin: 2px 0;
  padding: 0;
  font-family: 'Soho Pro', sans-serif;
}

.label {
  display: block;
  margin-bottom: 4px;
  font-family: 'InterstateBlack', sans-serif;
}

.show {
  margin: 0 0 2px 0;
  font-family: 'Soho Pro', sans-serif;
  font-weight: 500;
  font-size: 20px;
}

.time {
  margin: 0;
  color: #00b5f3;
  font-family: 'Soho Pro', sans-serif;
  font-weight: 400;
}
/* clickable show cards with hover highlight & text color change */
.show-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none; /* removes underline on the link */
  transition: background-color 0.2s, transform 0.15s;
  border-radius: 6px;
}

.show-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.show-card p {
  margin-top: 8px;
  font-family: 'Interstate', sans-serif;
  font-size: 14px;
  color: #000; /* default text color */
  transition: color 0.2s;
}

.show-card:hover {
  background-color: #f0f8ff; /* card highlight on hover */
  transform: translateY(-3px); /* gentle lift */
}

.show-card:hover p {
  color: #0077cc; /* text color when hovered */
}
.sidebar-schedule-banner img{
  user-select:none;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* ============================= */
/* Go to Shows Button (Sidebar)  */
/* ============================= */
.sidebar-go-shows {
  text-align: right;      /* center the button under the schedule */
  margin-top: 20px;        /* spacing from schedule */
  width: 100%;             /* take full width of sidebar */
}
.go-shows-btn {
  display: inline-block;
  margin-left: auto;
  background: #00b5f3;
  color: #fff;
  text-decoration: none;
  font-family: 'Interstate', sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 12px 24px;
  border-radius: 6px;
}
.shows-go-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.go-shows-btn:hover {
  background: #0077cc;
}

/* 1. The Scroll Container */
  .on-showcase-container {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Keeps items in one horizontal line */
    padding: 20px 0;
    scrollbar-width: thin; /* Firefox scrollbar styling */
  }

  /* 2. Custom Scrollbar for Chrome/Safari/Edge */
  .on-showcase-container::-webkit-scrollbar {
    height: 8px;
  }
  .on-showcase-container::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  .on-showcase-container::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
  }

  /* 3. The Individual Image Wrapper */
  .showcase-item {
    display: inline-block;
    width: 200px; /* Width of each image card */
    margin-right: 15px;
    vertical-align: top;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
  }

  .showcase-item:hover {
    transform: scale(1.02);
  }

  .showcase-item img {
    width: 100%;
    height: 120px;
    object-fit: cover; /* Ensures images don't distort */
    display: block;
  }

  .showcase-item p {
    padding: 10px;
    margin: 0;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  /* Schedule card becomes big mobile card */
  .schedule-frame {
    padding: 10px;
    border-radius: 10px;
    width:80%;
    box-sizing:border-box;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  .sidebar-schedule-banner img {
    width: 90%;
  }

  .schedule-item {
    padding: 12px 0;
  }

  .label {
    font-size: 12px;
    color: #888;
  }

  .show {
    font-size: 22px;
  }

  .time {
    font-size: 16px;
  }

  /* Show grid becomes horizontal scroll */
  .shows-grid {
    display: flex;
    overflow-x: auto;
    gap: 15px;
  }

  .show-card {
    min-width: 140px;
  }
.schedule-item:first-child {
  background: white;
  color: black;
  border-radius: 6px;
}

.schedule-item:first-child .time {
  color: #00b5f3;
}

  /* Force schedule sidebar fonts on mobile */
.schedule-item .show {
  
    font-family: 'Soho Pro', sans-serif;
    font-weight: 500; /* or whatever weight you want */
    font-style: normal;
}

.schedule-item .time {
  
  font-family: 'Soho Pro', sans-serif;
    font-weight: 400 /* or whatever weight you want */
    font-style: normal;
    
}

  .label {
    font-size: 21px;
    color: black;
  }
  
}

/* MOBILE MENU OVERLAY */
/* MOBILE FULLSCREEN DROPDOWN */
/* FULLSCREEN MOBILE MENU */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}
/* MOBILE MENU */
/* MOBILE MENU */
.mobile-menu{
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  background: rgba(0,191,255,1);

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  padding-top:110px;
  padding-left:0px;

  transform: translateY(-100%);
  opacity:0;                 /* hides instantly */
  pointer-events:none;

  transition: transform .3s ease, opacity .2s ease;

  z-index:900;
  overflow-y:auto;
}

.mobile-menu.active{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}

.mobile-menu a{
  font-family:'Soho Pro',sans-serif;
  font-size:26px;
  color:white;
  text-decoration:none;
  margin-bottom:25px;
  padding-left: 10px;
}

.mobile-menu a:hover {
  background-color: #00b5f3;
}

@media (max-width:768px){

  /* Hide Schedule + WTW */
  .mobile-hidden {
    display: none;
  }

  /* Keep Shows visible */
  .shows-bar {
    display: block;
  }
}

@media (max-width: 768px) {
  /* Hide Schedule and Where to Watch in desktop nav */
  .top-nav .nav-links li:nth-child(2), /* Schedule */
  .top-nav .nav-links li:nth-child(3)  /* Where to Watch */ {
    display: none;
  }

  /* Make sure Shows stays visible in desktop nav */
  .top-nav .nav-links li:nth-child(1) {
    display: block;
  }

  /* Mobile menu already shows Schedule / Watch */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}
.navbar {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
/* Pure CSS Image Placeholder Block */
.img-placeholder {
  width: 50px;
  height: 65px;
  background: #52525b;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

/* TORN PAPER BORDER */
.torn-border-top {
  width: 100%;
  height: 40px;
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
}

.torn-border-bottom {
  width: 100%;
  height: 40px;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}

.torn-paper-section {
  position: relative;
}

.torn-paper-section::before,
.torn-paper-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  z-index: 5;
  pointer-events: none;
}

.torn-paper-section::before {
  top: -1px;
  background: var(--bg);
  clip-path: polygon(0% 0%, 2% 100%, 5% 20%, 8% 90%, 11% 10%, 14% 80%, 17% 5%, 20% 95%, 23% 15%, 26% 85%, 29% 0%, 32% 90%, 35% 20%, 38% 75%, 41% 5%, 44% 95%, 47% 10%, 50% 80%, 53% 0%, 56% 90%, 59% 15%, 62% 85%, 65% 5%, 68% 95%, 71% 10%, 74% 80%, 77% 0%, 80% 90%, 83% 20%, 86% 75%, 89% 5%, 92% 95%, 95% 10%, 98% 80%, 100% 0%);
}

/* SHOW BANNERS */
.banners-section {
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}

.section-header {
  max-width: 1400px;
  margin: 0 auto 24px;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.section-title {
  font-family: 'Helvetica Neue';
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding-left: 16px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--accent);
}

.section-label {
  font-family: 'Helvetica Neue';
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,233,153,0.1);
  border: 1px;
  padding: 4px 10px;
}

.banner-carousel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.banner-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.banner-track::-webkit-scrollbar { display: none; }

.banner-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--surface);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
}

.banner-card:hover {
  border-color: var(--accent);
  box-shadow: 6px 6px 0;
  transform: translate(-2px, -2px);
}

.banner-card:hover .banner-img {
  transform: scale(1.05);
}

.banner-img-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  background: var(--surface2);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.banner-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 2px dashed;
}

.banner-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--red);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.banner-info {
  padding: 12px 14px;
  background: var(--surface);
}

.banner-show-title {
  font-family: 'Helvetica Neue';
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.2;
}

.banner-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-main);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: #000;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
  transition: all 0.1s;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 0 100%);
}

.carousel-btn:hover {
  transform: translateY(-50%) translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.8);
}

.carousel-btn.prev { left: -8px; }
.carousel-btn.next { right: -8px; }

/* WEEKDAY BANNERS */
.weekday-banners {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 24px 8px;
  scrollbar-width: none;
}

.weekday-banners::-webkit-scrollbar { display: none; }

.weekday-pill {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 2px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  white-space: nowrap;
}

.weekday-pill:hover,
.weekday-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,233,153,0.08);
  box-shadow: 3px 3px 0;
  transform: translate(-1px, -1px);
}

/* FEATURED SHOWS */
.featured-section {
  padding: 60px 0;
  background: var(--surface);
  position: relative;
}

/* --- Professional Section Dividers --- */
.section-divider {
    border: 0;             /* Removes default browser border */
    height: 3px;           /* Sets thickness */
    background: #e50914;   /* Your Showcase Network Red */
    margin: 50px auto;     /* Adds vertical space above and below */
    width: 80%;            /* Keeps it from spanning the full width of the screen */
    border-radius: 5px;    /* Rounded edges for a modern look */
    opacity: 0.8;          /* Slight transparency for a sleeker feel */
}

.featured-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.featured-card {
  background: var(--bg);
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  text-decoration: none;
  display: block;
  color: var(--text);
}

.featured-card:hover {
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--accent);
  transform: translate(-2px, -2px);
}

.featured-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--surface2);
  display: block;
}

.featured-card-img-placeholder {
  width: 100%;
  height: 200px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border-bottom: 2px dashed var(--border);
}

.featured-card-img-placeholder span {
  font-family: 'Helvetica Neue';
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.featured-card-body {
  padding: 16px;
}

.featured-card-genre {
  font-family: 'Helvetica Neue';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.featured-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.featured-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-card-time {
  font-family: 'Helvetica Neue';
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}

/* PROGRAMMING BLOCKS */
.blocks-section {
  padding: 60px 0;
  position: relative;
}

.blocks-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.block-card {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.6);
  transition: all 0.15s;
}

.block-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--accent);
  border-color: var(--accent);
}

.block-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.block-card.justice::before { background: var(--red); }
.block-card.scifi::before { background: var(--french-blue); }
.block-card.suspense::before { background: var(--gold); }
.block-card.action::before { background: var(--orange); }
.block-card.comedy::before { background: var(--jade); }
.block-card.films::before { background: var(--beige); }
.block-card.cartoon::before { background: #ff88cc; }

.block-title {
  font-family: 'Helvetica Neue';
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.block-time {
  font-family: 'Helvetica Neue';
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.block-shows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.block-shows li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.block-shows li::before {
  content: '›';
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
}

/* 508 WORDMARK */
.wordmark-508 {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(80px, 15vw, 160px);
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 1;
  user-select: none;
}

.wordmark-508 .left-half {
  color: #f5f0dc;
}

.wordmark-508 .right-half {
  color: #8b1a1a;
}

.wordmark-508-wrap {
  position: relative;
  display: inline-block;
}

/* FOOTER */
.site-footer {
  background: #050505;
  border-top: 3px solid var(--accent);
  padding: 60px 24px 32px;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--bg);
  clip-path: polygon(0% 0%, 2% 100%, 5% 20%, 8% 90%, 11% 10%, 14% 80%, 17% 5%, 20% 95%, 23% 15%, 26% 85%, 29% 0%, 32% 90%, 35% 20%, 38% 75%, 41% 5%, 44% 95%, 47% 10%, 50% 80%, 53% 0%, 56% 90%, 59% 15%, 62% 85%, 65% 5%, 68% 95%, 71% 10%, 74% 80%, 77% 0%, 80% 90%, 83% 20%, 86% 75%, 89% 5%, 92% 95%, 95% 10%, 98% 80%, 100% 0%);
}

.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-col-title {
  font-family: 'Helvetica Neue';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-links a::before {
  content: '›';
  color: var(--border);
  transition: color 0.15s;
}

.footer-links a:hover::before {
  color: var(--accent);
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-heading);
  transition: color 0.15s;
}

.footer-legal-links a:hover {
  color: var(--accent);
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.8;
}

.footer-copyright span.accent {
  color: var(--accent);
}

/* CHALK DUST */
.chalk-divider {
  width: 100%;
  height: 3px;
  background: var(--chalk);
  opacity: 0.15;
  position: relative;
  margin: 24px 0;
  filter: url(#chalk-filter);
}

/* PAGE LAYOUTS */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px;
}

.page-hero {
  padding: 80px 24px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}

.page-hero-title {
  font-family:'Helvetica Neue';
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--text);
  max-width: 1400px;
  margin: 0 auto;
}

.page-hero-title span {
  color: var(--accent);
}

/* SCHEDULE TABLE */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.schedule-table th {
  background: var(--surface2);
  color: var(--accent);
  font-family: 'Helvetica Neue';
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.schedule-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
  line-height: 1.5;
}

.schedule-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

.schedule-table tr:hover td {
  background: rgba(255,233,153,0.04);
  color: var(--text);
}

.schedule-time {
  font-family: 'Helvetica Neue';
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  font-size: 12px;
}

.schedule-show {
  font-family: 'Helvetica Neue';
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}

.schedule-block-badge {
  display: inline-block;
  font-family: 'Helvetica Neue';
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-top: 2px;
}

/* SHOW PAGE */
.show-detail-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}

.show-detail-bg {
  position: absolute;
  inset: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-detail-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.show-detail-content {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%);
}

/* EPISODE GRID */
.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.episode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
}

.episode-card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
  transform: translate(-1px, -1px);
}

.episode-thumb {
  width: 100%;
  height: 140px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.episode-info {
  padding: 10px 12px;
}

.episode-num {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.episode-title {
  font-family: 'Helvetica Neue';
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.episode-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CONTACT FORM */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: 'Helvetica Neue';
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
}

.form-select option {
  background: var(--surface2);
}

/* WHERE TO WATCH */
.zip-input-wrap {
  display: flex;
  gap: 0;
  max-width: 500px;
}

.zip-input-wrap input {
  flex: 1;
  background: var(--surface);
  border: 3px solid var(--border);
  border-right: none;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  padding: 14px 20px;
  outline: none;
  letter-spacing: 4px;
  transition: border-color 0.15s;
}

.zip-input-wrap input:focus {
  border-color: var(--accent);
}

.zip-input-wrap button {
  background: var(--accent);
  border: 3px solid var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 24px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--red);
  transition: all 0.1s;
  white-space: nowrap;
}

.zip-input-wrap button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--red);
}

/* PROVIDER CARD */
.provider-card {
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.15s;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}

.provider-card:hover {
  border-color: var(--accent);
  box-shadow: 5px 5px 0 var(--accent);
  transform: translate(-1px, -1px);
}

.provider-logo-placeholder {
  width: 80px;
  height: 50px;
  background: var(--surface2);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ABOUT PAGE */
.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-dot {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--bg);
  transform: rotate(45deg);
}

.timeline-year {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.timeline-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* FAQ ACCORDION */
.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  padding: 16px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faq-question:hover {
  color: var(--accent);
}

.faq-icon {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-icon.open {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer.open {
  max-height: 400px;
}

.faq-answer-inner {
  padding: 0 0 16px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* LICENSING PARTNERS */
.partner-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.partner-logo-box {
  background: var(--surface);
  border: 2px solid var(--border);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  transition: all 0.15s;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}

.partner-logo-box:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
  transform: translate(-1px, -1px);
}

/* STAFF CARDS */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.staff-card {
  background: var(--surface);
  border: 2px solid var(--border);
  overflow: hidden;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

.staff-portrait {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--surface2);
  display: block;
}

.staff-portrait-placeholder {
  width: 100%;
  height: 200px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.staff-portrait-placeholder .icon {
  font-size: 48px;
  opacity: 0.3;
}

.staff-portrait-placeholder .label {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.staff-info {
  padding: 14px;
}

.staff-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

.staff-title {
  font-size: 12px;
  color: var(--accent);
  font-family: var(--font-heading);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* DAY TABS */
.day-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  margin-bottom: 24px;
}

.day-tabs::-webkit-scrollbar { display: none; }

.day-tab {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  white-space: nowrap;
}

.day-tab:hover,
.day-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,233,153,0.08);
  box-shadow: 3px 3px 0 var(--accent);
  transform: translate(-1px, -1px);
}

/* CARTOON THUMBNAILS */
.cartoon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.cartoon-thumb {
  background: var(--surface);
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.cartoon-thumb:hover {
  border-color: #ff88cc;
  box-shadow: 4px 4px 0 #ff88cc;
  transform: translate(-1px, -1px);
}

.cartoon-thumb-img {
  width: 100%;
  height: 100px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.cartoon-thumb-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px;
  color: var(--text);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .nav-links { gap: 2px; }
  .nav-links a { font-size: 11px; padding: 5px 7px; }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .featured-grid {
    grid-template-columns: 1fr 1fr;
  }
  .blocks-grid {
    grid-template-columns: 1fr;
  }
  .staff-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .staff-grid {
    grid-template-columns: 1fr;
  }
}

/* MOBILE MENU */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 2px solid var(--border);
  color: var(--text);
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: all 0.2s;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: fadeIn 0.2s ease;
}

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 24px;
  border: 2px solid transparent;
  transition: all 0.15s;
}

.mobile-nav a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: 2px solid;
  color: var(--text);
  font-size: 24px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* INTRO SPECIFIC */
.intro-scratches-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* SHOW THUMBNAIL EDITABLE */
.editable-note {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-style: italic;
  margin-top: 4px;
  opacity: 0.6;
}

/* PAINT SPLATTER SVG */
.splatter-svg {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* HERO IMAGE PLACEHOLDER STYLES */
.hero-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0505 0%, #050510 50%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  border: 2px dashed rgba(255,233,153,0.3);
}

.hero-img-placeholder .label {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,233,153,0.5);
}

/* SHOW IMAGE PLACEHOLDER */
.show-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 2px dashed;
}

.show-img-placeholder .icon { font-size: 36px; opacity: 0.4; }
.show-img-placeholder .label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 8px;
}

/* GLITCH EFFECT */
.glitch-hover {
  position: relative;
}

.glitch-hover:hover::before,
.glitch-hover:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.glitch-hover:hover::before {
  color: var(--red);
  animation: glitchClip1 0.4s steps(2) infinite;
  clip-path: inset(0 0 60% 0);
  transform: translateX(-3px);
}

.glitch-hover:hover::after {
  color: var(--french-blue);
  animation: glitchClip2 0.4s steps(2) infinite;
  clip-path: inset(40% 0 0 0);
  transform: translateX(3px);
}

@keyframes glitchClip1 {
  0%, 100% { clip-path: inset(0 0 60% 0); transform: translateX(-3px); }
  50% { clip-path: inset(20% 0 40% 0); transform: translateX(3px); }
}

@keyframes glitchClip2 {
  0%, 100% { clip-path: inset(40% 0 0 0); transform: translateX(3px); }
  50% { clip-path: inset(60% 0 20% 0); transform: translateX(-3px); }
}

/* NEWSBREAK TICKER */
.news-ticker {
  background: var(--red);
  color: #fff;
  padding: 8px 0;
  overflow: hidden;
  position: relative;
  border-top: 2px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.2);
}

.news-ticker-inner {
  display: flex;
  gap: 0;
  animation: tickerScroll 30s linear infinite;
  white-space: nowrap;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-ticker-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: #000;
  color: var(--accent);
  padding: 0 16px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.news-ticker-item {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 40px;
}

.news-ticker-item::after {
  content: ' ◆ ';
  color: var(--accent);
}

/* SCHEDULE GRID */
.schedule-grid-wrap {
  overflow-x: auto;
  border: 2px solid;
}

/* PROVIDER RESULTS GRID */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* CHALK TEXTURE SECTION */
.chalk-section {
  position: relative;
}

.chalk-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(232,223,200,0.03) 0%, transparent 70%);
  pointer-events: none;
}

    @font-face {
      font-family: 'Interstate';
      src: url('/fonts/Interstate/INTERSTATEBOLD.woff2') format('woff2'),
           url('/fonts/Interstate/INTERSTATEBOLD.woff') format('woff'),
           url('/fonts/Interstate/INTERSTATEBOLD.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'InterstateBlack';
      src: url('/fonts/Interstate/INTERSTATEBLACK.OTF') format('opentype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Soho Pro';
      src: url('/fonts/Soho Pro/SohoPro-ExtraBold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Soho Pro';
      src: url('/fonts/Soho Pro/SohoPro-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
      @font-face {
      font-family: 'Soho Pro';
      src: url('/fonts/Soho Pro/SohoPro-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      
    }
    @font-face {
      font-family: 'Soho Pro';
      src: url('fonts/Soho Pro/SohoPro-ExtraBoldItalic.ttf') format('truetype');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
      
    }
body {
  margin: 0;
  font-family: 'Interstate', Arial, sans-serif;
  background: #fff;
  color: #000;
}

.schedule-banner {
  width: 100%;
  margin-bottom: 30px;
}

.schedule-banner img {
  width: 100%;     /* full width of the page */
  display: block;
  height: auto;    /* maintain aspect ratio */
}

.top-nav {
      background-color: #164450ff;
      padding: 10px 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position:relative;
        background-color:#164450ff;
  z-index:10000;
    }

.nav-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-inner img {
  height: 60px;
}

.logo img {
height: 64px;
display: block;
    }

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  padding: 0;
  margin: 0;
}

    .nav-links li a {
  text-decoration: none;
  font-family: 'Interstate', sans-serif;
  font-weight: bold;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 20px; /* ↑ taller and wider */
  border-radius: 0px;  /* smooth corners */
  transition: background-color 0.2s, color 0.2s;
    }

    .nav-links li a:hover {
  background-color: #00b5f3; /* box color */
  color: #ffffff; /* text color when highlighted */
  border-bottom: none; /* remove underline if you had it */
  width: 10px
    }

main {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}

.schedule-top {
  text-align: center;
  margin-bottom: 10px;
}

#printScheduleBtn {
  font-family: "Interstate", Arial, sans-serif; /* change to whatever font your site uses */
  font-size: 14px;
  padding: 8px 14px;
  background: #00bfff;
  border: none;        /* removes border */
  outline: none;       /* removes outline */
  cursor: pointer;
  border-radius: 6px;
  color: white;
}

#printScheduleBtn:hover {
  background: #0288b5;
}

#dayTitle {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.day-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 0px;
  border-bottom: 1px solid #444; /* thin line across the whole row */
  overflow-x: auto;
}

.day-tabs button {
  font-family: 'Interstate', Arial, sans-serif;
  background: none;
  border: none;
  padding: 0 0 6px;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.day-tabs button.active {
  border-bottom: 3px solid #00b5f3; /* BLUE UNDERLINE */
  color: #00b5f3; /* optional: blue text */
}
.now-banner{
  background: linear-gradient(
    to bottom,
    #33ccff 0%,
    #00BFFF 40%,
    #0099cc 100%
  );
  border-radius:25px;
  padding:0px 40px;
  margin:25px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.now-banner-label{
  font-family:'InterstateBlack';
  color:black;
  font-size:23px;
  letter-spacing:-1px;
}

.now-banner-show{
  font-family:'Soho Pro';
  font-weight:800;
  color:white;
  font-size:35px;
  line-height:1.2;
  margin-bottom:4px;
}

.now-banner-time{
  font-family:'Interstate';
  color:black;
  font-size:22px;
}
.now-banner-image{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.now-banner-image img{
  height:150px;
  width:auto;
  object-fit:contain;
}
/* ===================== SCHEDULE STYLING ===================== */

.schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #d9d9d9; /* divider line */
  position: relative;
  overflow: hidden;
}


  border-left: 7px solid transparent; /* reserve space */
}

.time {
  font-family: 'Soho Pro', Arial, sans-serif;
  font-weight: 400;
  width: 90px;
  color: #164450;
  flex-shrink: 0;
}

.schedule-item-content {
  padding: 0;
  background: none;
  border-radius: 0;
}

.schedule-item.current {
  background: #00bfff;
  border-left: 7px solid #99e5ff;
  padding-left: 10px;
}

.show {
  font-family: 'Soho Pro', Arial, sans-serif;
  font-weight: 500;
  margin: 0;
  font-size: 25px;
}

.category {
  margin: 4px 0 0 0;
  font-size: 17px;
  font-style: bold;
  color: #666;
}
.now-label{
  display:none;
  font-size:17px;
  font-family: 'InterstateBlack';
  color: white;
  margin:0 0 2px 0;
}

.schedule-item.current .now-label{
  display:block;
  color: black;
}

.schedule-item.current .show{
  color:#ffffff;
}

.schedule-item.current .category{
  color: black;
}

.schedule-item.current .time{
  color: black;
}
.show-image {
  position: absolute;
  right: 50px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
}
#nowBanner{
  cursor:pointer;
}
.day-tabs button {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tab-date{
  font-size:20px;
  font-weight:bold;
}

.tab-day{
  font-size:14px;
  letter-spacing:1px;
}

/* ==========================================================================
   INDIVIDUAL SHOW DETAIL LAYOUTS
   ========================================================================== */

.detail-page-layout {
    margin-top: 30px;
    margin-bottom: 60px;
}

/* Back Link Styling */
.back-nav {
    margin-bottom: 25px;
}

.back-nav a {
    color: #e50914; /* Showcase Red */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.back-nav a:hover {
    text-decoration: underline;
}

/* Main Core Block Layout */
.show-identity-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left Poster Column Constraints */
.show-poster-frame {
    flex: 1;
    max-width: 400px;
}

.show-poster-frame img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 3px solid #0a0a0a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: block;
}

/* Right Info Column Constraints */
.show-info-payload {
    flex: 1.5;
}

.show-main-title {
    font-size: 3rem;
    color: #ffffff; /* Pure black text per your layout theme */
    margin: 10px 0 20px 0;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Genre Badges */
.show-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    color: #fff;
}
.scifi-badge { background-color: #457b9d; }
.animation-badge { background-color: #2a9d8f; }
.horror-badge { background-color: #e50914; }

/* Airtime Box info container */
.airtime-schedule-box {
    background: rgba(0, 0, 0, 0.04);
    border-left: 4px solid #0a0a0a;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.airtime-schedule-box p {
    margin: 5px 0;
    color: #fff;
}

.show-info-payload h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 10px;
}

.show-description-text {
    line-height: 1.7;
    color: #ffffff;
    margin-bottom: 25px;
}

/* Styled Programmer Highlight Box */
.network-note {
    background: rgba(255, 255, 255, 0.9); /* Opaque block so text pops on backgrounds */
    border: 1px dashed #e50914;
    border-radius: 6px;
    padding: 18px;
    color: #000000;
    font-size: 0.95rem;
    line-height: 1.5;
}

.show-extra-details h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #ffffff;
}

.show-extra-details p {
    color: #ffffff;
    line-height: 1.7;
}

/* ==========================================================================
   MOBILE VIEWPORT RESPONSIVENESS
   ========================================================================== */
@media (max-width: 768px) {
    .show-identity-block {
        flex-direction: column; /* Stacks the poster over the description on phones */
        align-items: center;
    }
    
    .show-poster-frame {
        max-width: 100%; /* Allows poster to expand correctly on mobile widths */
        margin-bottom: 20px;
    }
    
    .show-main-title {
        font-size: 2.2rem;
    }
}

/* 1. Base Network Container */
  .schedule-container {
    max-width: 800px;
    margin: 20px auto;
    background-color: #111; /* Dark broadcast aesthetic */
    color: #fff;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    border: 2px solid #333;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }

  .network-header {
    background: #000;
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #0056b3;
  }

  /* 2. Monday-Friday Tabs */
  .tab-buttons {
    display: flex;
    background: #222;
  }
  
  .tab-buttons button {
    flex: 1;
    background: inherit;
    color: #aaa;
    border: none;
    padding: 12px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
    border-bottom: 3px solid transparent;
  }
  
  .tab-buttons button:hover {
    background: #333;
    color: #fff;
  }
  
  .tab-buttons button.active {
    color: #fff;
    background: #1a1a1a;
    border-bottom: 3px solid #00a8ff; /* Highlight for active day */
  }

  /* 3. The Mini Scroll Area (The Secret Sauce) */
  .tab-content {
    display: none; /* Hidden by default, JS reveals the active one */
    padding: 15px;
    background: #1a1a1a;
  }

  .grid-scroll-wrapper {
    height: 400px; /* This restricts the height */
    overflow-y: auto; /* This creates the internal vertical scrollbar */
    border: 1px solid #444;
    border-radius: 4px;
  }

  /* Customizing the scrollbar to look sleek */
  .grid-scroll-wrapper::-webkit-scrollbar { width: 10px; }
  .grid-scroll-wrapper::-webkit-scrollbar-track { background: #111; }
  .grid-scroll-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
  .grid-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #00a8ff; }

  /* 4. The 6am-12am Schedule Grid Layout */
  .time-row {
    display: flex;
    border-bottom: 1px solid #333;
    background: #222;
    transition: background 0.2s;
  }
  
  .time-row:hover {
    background: #2a2a2a; /* Slight highlight when hovering over a show */
  }

  .time-slot {
    width: 90px;
    padding: 15px 10px;
    background: #151515;
    font-weight: bold;
    color: #888;
    text-align: right;
    border-right: 2px solid #444;
    flex-shrink: 0;
  }

  .program-info {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .program-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #fff;
  }

  .program-desc {
    font-size: 13px;
    color: #bbb;
  }

  .watch-container {
    max-width: 900px;
    width: 95%; /* Responsive width for mobile */
    margin: 0 auto;
    background-color: #111;
    border-radius: 8px;
    border: 2px solid #333;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }

  .header-banner {
    background: #000;
    padding: 30px 20px;
    text-align: center;
    border-bottom: 3px solid #00a8ff;
  }

  .header-banner h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    letter-spacing: 1px;
  }

  .header-banner p {
    color: #aaa;
    margin: 10px 0 0 0;
    font-size: 15px;
  }

  /* 2. Responsive CSS Grid for Providers & Devices */
  .section-title {
    padding: 25px 20px 10px;
    margin: 0;
    color: #fff;
    border-bottom: 1px solid #222;
    background: #151515;
  }

  .grid-layout {
    display: grid;
    /* MAGIC MOBILE CODE: This automatically stacks boxes on small screens 
       and puts them side-by-side on large screens */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #1a1a1a;
  }

  .card {
    background: #222;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
  }

  .card:hover {
    transform: translateY(-5px);
    border-color: #00a8ff;
  }

  .card h3 {
    margin-top: 0;
    color: #00a8ff;
    font-size: 20px;
  }

  .card p {
    color: #bbb;
    font-size: 14px;
    line-height: 1.5;
  }

  /* 3. Coverage Map / Regions Section */
  .coverage-area {
    background: #111;
    padding: 20px;
    border-top: 2px solid #333;
  }

  .coverage-area h3 {
    color: #fff;
    margin-top: 0;
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
  }

  .tag {
    background: #2a2a2a;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid #444;
  }

  /* Highlight specific tags like Caribbean */
  .tag.highlight {
    background: #002d4d;
    color: #66ccff;
    border-color: #0056b3;
    font-weight: bold;
  }
  
  /* Genre-specific color coding for the left border */
  .genre-cartoon { border-left: 4px solid #ffcc00; }
  .genre-scifi { border-left: 4px solid #00ffcc; }
  .genre-action { border-left: 4px solid #ff3366; }
  
  .finder-container {
    max-width: 600px;
    width: 95%;
    margin: 40px auto;
    background-color: #111;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 30px;
    font-family: Arial, sans-serif;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }

  .finder-container h2 {
    margin-top: 0;
    color: #00a8ff;
    letter-spacing: 1px;
  }

  .finder-container p {
    color: #bbb;
    font-size: 15px;
    margin-bottom: 25px;
  }

  /* 2. Search Box Layout */
  .search-box {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap; /* Keeps it responsive on small phones */
  }

  .search-box input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 12px 15px;
    font-size: 16px;
    background: #222;
    border: 2px solid #444;
    color: #fff;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
  }

  .search-box input[type="text"]:focus {
    border-color: #00a8ff;
  }

  .search-box button {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    background: #0056b3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .search-box button:hover {
    background: #00a8ff;
  }

  /* 3. Results Display Area */
  .result-box {
    margin-top: 25px;
    padding: 20px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    display: none; /* Hidden until a search is performed */
    text-align: left;
  }

  .result-box h3 {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
  }

  .result-box p {
    margin: 10px 0 0 0;
    color: #ccc;
    font-size: 16px;
  }
  
  .error-text {
    color: #ff3366;
    text-align: center;
    font-weight: bold;
  }
  
  .page-container {
    max-width: 1000px;
    margin: 0 auto;
  }



  /* Show Card Styling */
  .show-card {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
  }

  .show-card:hover {
    transform: translateY(-10px);
    border-color: #00a8ff;
  }

  .show-image {
    width: 100%;
    height: 160px;
    background: #222; /* Placeholder for your show artwork */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-weight: bold;
  }

  .show-info { padding: 15px; }

  .show-info h3 { margin: 0 0 10px 0; color: #fff; }

  .show-info p { font-size: 14px; color: #bbb; line-height: 1.4; }

  .btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    background: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
  }

  .btn:hover { background: #00a8ff; }