/* Custom CSS for styling */
html, body {
   margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background-color: black;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* --- Video Player Sizing - Container --- */
#videoScreen.video-js {
 position: fixed;
 top: 50%; /* FIX: Start at 50% from the top */
 left: 0;
 width: 100vw;
 height: 100vh;
 /* CRUCIAL FIX for mobile 100vh bug: ensures it fills the available viewport */
 height: -webkit-fill-available; 
 background-color: black !important;
 z-index: 3;
 overflow: hidden;
 /* --- FIX: Pull back by 50% of its own height to truly center it --- */
 transform: translateY(-50%); 
}

/* Style the actual <video> element inside the player */
#videoScreen .vjs-tech {
 /* DEFAULT: CONTAIN (Ensures full height visibility in all modes) */
 object-fit: contain !important; 
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

/* Hide ALL Standard Video.js UI elements & Subtitles */
#videoScreen .vjs-control-bar, 
#videoScreen .vjs-big-play-button,
#videoScreen .vjs-loading-spinner,
#videoScreen .vjs-poster,
#videoScreen .vjs-modal-dialog,
#videoScreen .vjs-error-display,
/* --- Text Track/Subtitle Hiding --- */
#videoScreen .vjs-text-track-display, 
#videoScreen .vjs-caption-settings,
#videoScreen .vjs-subtitles-button,
#videoScreen .vjs-chapters-button,
#videoScreen .vjs-menu-button, /* Catches generic menu buttons */
/* --- NEW: Aggressively target the main subtitles/captions button --- */
#videoScreen .vjs-subs-caps-button 
{
   display: none !important;
   visibility: hidden !important;
   opacity: 0 !important;
   z-index: -1 !important;
}

/* Attempts to hide NATIVE controls */
#videoScreen::-webkit-media-controls-panel,
#videoScreen::-webkit-media-controls { display: none !important; -webkit-appearance: none;}
#videoScreen::-moz-media-controls-panel { display: none !important; }
#videoScreen::media-controls-panel { display: none !important; }


 /* --- Overlay Styling --- */
 #overlay {
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
   color: white;
   z-index: 10; /* Overlay is layer 10 */
   background-color: #ED1C22;
   overflow-x: hidden;
   overflow-y: auto;
   display: block;

   /* --- NEW: Transition and Default Visible State --- */
   transition: transform 0.3s ease-in-out; 
   transform: translateX(0); 
 }

 /* --- NEW: Class to slide the overlay off-screen (to the left) --- */
 #overlay.hidden {
   transform: translateX(-100vw);
 }

 .top-bar {
   /* --- FIX: Change to absolute so it moves with the parent's transform --- */
   position: absolute; 
   top: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background-color: #ED1C22;
   color: #fff;
   padding: 5px 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 11; 
 }

 /* --- Hamburger Menu Button --- */
 #menuButton {
    color: white;
    font-size: 2em;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1000;
    padding: 5px;
}

 /* --- STOP BUTTON POSITION (Desktop - Inside top-bar) --- */
 .top-bar #stopButton {
    position: absolute;
    right: 55px; /* Position next to the Close Button (15px) */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2em; /* Same size as hamburger */
    cursor: pointer;
    z-index: 1000;
    padding: 5px;
    display: none;
    text-shadow: none;
 }
 .top-bar{
  position: sticky;
  top: 0px;
 }

 #topBarHeading {
   height: 90%;
   max-height:100px;
   width: auto;
 }

 #channelInfo {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 10px;
   -ms-overflow-style: none;
   scrollbar-width: none;
   /* --- Added Top Padding to account for the now-absolute top-bar --- */
   padding-top: 10px; 
 }
 #channelInfo::-webkit-scrollbar { display: none; }


 .channelDiv {
   min-height: 250px;
   display: flex;
   align-items: center;
   padding: 10px;
   background-color:rgba(5, 5, 5, 0.75);
   margin-bottom: 15px;
   border-radius: 20px;
   color: white;
   position: relative;
   cursor: pointer;
 }

 .channel-number-container {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   flex: 0 0 80px;
   text-align: center;
   min-height: 100% !important;
   align-self: stretch;
 }

  
.start-time { 
  font-size: 0.65em; 
  opacity: 0.7; 
  /* --- The Fix --- */
  white-space: normal; /* Allows wrapping */
  word-break: normal;  /* Ensures breaking only happens at spaces */
  max-width: 35px;     /* Forces the break at the space after 10:30 */
  line-height: 1.1;    /* Keeps the two lines close together */
  text-align: center;  /* Makes it look neat */
}

 .channel-number { font-size: 1.2em; font-weight: bold; }

 /* --- UPDATED: Program Content Structure for 70/30 Split (Desktop) --- */
 .program-content {
   padding-left: 15px;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column; /* Set to column to allow percentage heights */
   overflow: hidden;
   align-self: stretch; /* Ensures it takes full vertical height */
 }

 .program-title {
  /* Set to take 70% of the program-content height */
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the text within 70% */
  align-items: center; /* Horizontally center the text within 70% */
  
  /* Existing styles */
   font-size: 1.3em;
   font-weight: bold;
   margin-bottom: 0; /* Remove margin-bottom */
   line-height: 1.2;
   white-space: normal;
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
   padding: 5px 0;
     text-wrap: balance; 
 }

/* NEW: Wrapper for Upcoming Programs (Bottom 30%) */
.upcoming-programs-wrapper {
  height: 30%; /* Explicitly takes the remaining 30% */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Start content at the top of this 30% block */
  box-sizing: border-box;
}

 .next-program, .next-program2 {
   /* NEW: Use flex-grow to make them share the wrapper's 30% height equally */
   flex-grow: 1; 
   flex-shrink: 0;
   
   font-size: 0.95em;
     /* CRITICAL FOR ELLIPSIS */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   
   /* NEW: THE FLEX FIX */
   min-width: 0; /* Allows the content to shrink and enables ellipsis */
   
   width: 100%;
   line-height: 1.3;
   opacity: 0.9;
   padding: 0 5px; /* Keep horizontal padding */
 }
 .next-program { font-size: 0.9em; opacity: 0.8;}
 .next-program2 { font-size: 0.9em; opacity: 0.8; padding-bottom:30px;}

 .end-time { margin-right: 5px; opacity: 0.8; }

 .program-image {
   flex: 0 0 20%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-left: 15px;
 }

 .program-image > img {
   max-height: 80%;
   max-width: 100%;
   object-fit: contain;
 }

 /* --- Overlay Buttons (Close/BMH) --- */
 .closeButton {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     height: 60%;
     cursor: pointer;
 }

 .bmhButton {
   position: fixed;
   bottom: 15px;
   left: 15px;
   max-height: 45px;
   width: auto;
   z-index: 5;
   opacity: 0.8;
 }

#navPanel {
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none; /* Keep hidden by default */
    overflow-y: auto;
    color: #f1f1f1;
    text-align: left;
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #1a1a1a; /* Darker header background for distinction */
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 10000; /* Ensure header stays on top of scrollable content */
}

#navTitle {
    font-size: 2.0em;
    font-weight: bold;
    color: lightskyblue;
;
}

#closeNavButton {
    font-size: 2.0em;
    cursor: pointer;
    color: lightskyblue;
    transition: color 0.2s;
}

#closeNavButton:hover {
    color: white;
}

#navContent {
    padding: 20px;
    width: 100%;
}

#navContent h3 {
    color: lightskyblue;
    margin-top: 15px;
}

#navContent h4 {
    margin-top: 20px;
    color: #ddd;
}

#navContent ul {
    list-style: disc inside;
    padding-left: 20px;
}

#navContent li {
    margin-bottom: 5px;
    font-size: 0.9em;
}

/* --- Temporary Message Banner --- */
#temporaryMessage {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9em;
    z-index: 5000;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#temporaryMessage.visible {
    opacity: 1;
}

#temporaryMessage.warning {
    background-color: rgba(255, 0, 0, 0.7);
}
.vjs-texttrack-settings {
  display: none;
}

/* Targets the standard WebKit/Safari text track display container */
video::-webkit-media-text-track-container {
    display: none !important;
    visibility: hidden !important;
}

/* Targets the individual cue text box */
video::cue {
    display: none !important;
    visibility: hidden !important;
}



 /* --- Media Query Adjustments (Mobile - max-width: 768px) --- */
 @media screen and (max-width: 768px){

  html, body {
  min-height: 100vh;
  max-width: 100vw;
  }
   
   /* Overlay/Header adjustments */
   .top-bar { height: 60px; position: sticky; top: 0; z-index: 1000; }
   #topBarHeading { max-height: 50px; }
   #menuButton { font-size: 2.0em; left: 8px;}

   #channelInfo {
    width: 100%;
    max-width: 100%;
    padding: 10px 8px 35px 8px;
    /* --- FIX: Added Top Padding for the new absolute top-bar on mobile --- */
    padding-top: 20px; 
  }

  /* --- MOBILE: Top Bar Stop Button Position --- */
  .top-bar #stopButton {
      right: 15px;
      font-size: 2.0em;
  }
  
  /* Channel Item adjustments */
  .channelDiv {
    min-height: 150px;
    margin-bottom: 8px;
    padding: 6px;
  }

  /* Channel Number - No Bold, Smaller */
  .channel-number-container { flex-basis: 45px; }
  .start-time { font-size: 0.65em; opacity: 0.8;}
  .channel-number { 
    font-size: 0.85em; 
    font-weight: normal;
  }
 
  /* --- Program Content Structure --- */
  .program-content {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: flex-start; 
    align-self: stretch;
    overflow: hidden;
  }

  /* Program Title - 60% Height, Top/Left Aligned */
  .program-title {
    padding-top: 5px; 
    margin-bottom: 0;
    width: 100%;
    font-size: 0.95em; 
    font-weight: normal; 
    justify-content: center; /* Override desktop center to be top aligned */
    align-items: center; 
    text-align: center;
    
    height: 60%; /* Mobile split: 60% for title */
    max-height: none; /* Remove old hard limit */
    overflow: hidden;
    white-space: normal;
  }
 
  /* --- Upcoming Wrapper - 40% Height --- */
  .upcoming-programs-wrapper {
    height: 40%; /* Mobile split: 40% for upcoming */
    padding: 0; /* Remove any padding set on desktop wrapper */
  }
 
  /* --- Next/Later Programs - Use flex-grow to share 40% and remove spacer logic --- */
  .next-program {
    flex-grow: 1; /* Shares 50% of the 40% block */
    align-items: flex-end;
    font-size: 0.8em; 
    font-weight: normal;
    padding: 0; /* Tighter mobile padding */
       font-weight: normal;
    padding-top: 10px;
    line-height: 1.2; 
    min-width: 0;

  }
 
  /* Next Program 2 - Sits directly under the first one */
  .next-program2 {
    flex-grow: 1; /* Shares the other 50% of the 40% block */
    font-size: 0.7em; 
    opacity: 0.8;
    
    font-weight: normal;
    margin-top: 1px;
    padding-bottom:10px;
padding-left:0px;
    line-height: 1.2; 
  }

  /* Logo */
  .program-image { flex-basis: 60px; padding-left: 5px; }
  .program-image > img { max-height: 40px; }

  /* Floating Buttons */
  .bmhButton { 
      bottom: 8px; 
      left: 8px;
      max-height: 35px;
      display: block; 
  }

   .program-desc, .episode { display: none; }
   
     #navPanel {
        padding: 0; /* Remove padding here, content adds its own */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .nav-header {
        padding: 10px 15px;
    }

    #navTitle {
        font-size: 1.7em;
    }

    #closeNavButton {
        font-size: 2.3em;
    }

    #navContent {
        padding: 15px; /* Adjusted padding for mobile */
         /* Add fixed height to prevent content reflow/jump when login form appears/disappears */
        min-height: calc(100vh - 60px); /* 60px is the header height on mobile */
        /* If the above doesn't work, set a large, fixed min-height based on the screen size */
        min-height: 500px; /* A safe, large minimum height */
        height: auto; /* Keep auto for scrolling */
        overflow-y: auto; /* Ensure it still scrolls if content exceeds this */
    }

    #navContent h2 {
        font-size: 1.4em; /* Slightly larger for mobile */
        text-align: center;
    }

    #navContent h3 {
        font-size: 1.1em;
        margin-top: 15px;
        color:cornflowerblue;
    }

    #navContent h4 {
        font-size: 0.9em; /* Slightly larger than desktop small text */
        margin-top: 15px;
    }

    #navContent p, #navContent li {
        font-size: 0.9em; /* Slightly larger than desktop small text */
    }

    #navContent p:last-of-type{
        color:cornflowerblue;
        text-align: center;  
        font-size: 0.9em;
    }

#navPanel input[type="text"],
#navPanel input[type="password"] {
    /* Stop iOS/Safari from zooming when an input is focused/keyboard appears */
    -webkit-text-size-adjust: 100%; /* For older WebKit */
    text-size-adjust: 100%;
    
    /* Ensure font is large enough that scaling is unnecessary */
    font-size: 16px !important; 
    
    /* Explicitly prevent scaling/zooming via CSS transform */
    transform: scale(1.0) !important; 
}

    #aboutPanelLogo { /* Keep existing selector reference just in case */
        height: 40px; 
    }
.vjs-texttrack-settings {
  display: none;
}


 }

/* --- LANDSCAPE MODE FIX FOR VIDEO ELEMENT (Ensures full height visibility) --- */
@media screen and (orientation: landscape) and (max-width: 999px) { 
    /* This rule relies on object-fit: contain (set above) and the -webkit-fill-available on the container */
    /* to ensure the entire stream fits vertically within the available height. */
}