/*
Theme Name: Fluro Media Scheduler
Theme URI: https://fluro.co.nz/tv/
Author: Fluro! Themes
Author URI: https://fluro.co.nz/tv/
Description: Introducing the Fluro Media Scheduler for WordPress – the ultimate solution for creating a stunning, interactive TV guide experience on your website. This theme is designed with broadcasters and media enthusiasts in mind, offering a dynamic timeline layout that displays your schedule with precision and style. Showcase your schedule with a visually appealing timeline that updates in real-time, highlighting current shows with an eye-catching "ON NOW" indicator. Tailor your theme's appearance to match your brand with extensive customization options for colors, fonts, and backgrounds using the intuitive WordPress Customizer. Ensure a seamless viewing experience across all devices with a layout that adapts beautifully to desktops, tablets, and smartphones. Engage your audience with clickable post boxes that reveal detailed show information and feature images in stylish popups. Manage your content effortlessly with custom templates for each day of the week, allowing you to display shows exactly when they’re on air. Transform your website into a professional TV guide with the Fluro Media Scheduler – where functionality meets elegance. Perfect for TV stations, streaming services, and media websites looking to provide their viewers with an engaging and user-friendly schedule.
Version: 1.0
License: All Rights Reserved
License URI: https://licences.fluro.co.nz/
Text Domain: fluro_media_scheduler
Tags: Tags: accessibility-ready, custom-header, custom-menu, custom-colors, custom-logo, entertainment, featured-images, featured-image-header, full-site-editing, full-width-template, news, responsive, theme-options
*/

/**** PAGE STYLES ****/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body {
    font-family: Arial, sans-serif;
}
body.display-clock .header-clock {
    display: block;
}

/**** HEADER ****/
.site-header {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0;
    border-bottom: 0px solid #ddd;
    background-size: cover;
    background-position: center;
}
.site-title {
    margin-left: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	margin-left: 15px;
}
.site-logo img {
    max-height: 50px;
    height: 50px;
    width: auto;
}
.header-clock {
    position: absolute;
    right: 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #000;
    border-radius: 0px;
    z-index: 10;
    display: none;
}

.logo-container {
    display: flex;
    align-items: center;
}

#scrolling-box {
    position: absolute;
    top: 10px;
    right: 150px;
    width: 600px;
    height: 31px;
    overflow: hidden;
    padding: 0px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrolling-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scrolling-post {
    position: absolute;
    bottom: -100%; /* Start off-screen */
    opacity: 0;
    width: 100%;
    transition: bottom 1s ease-in-out, opacity 1s ease-in-out;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 0;
    padding-top: 10px;
}

.scrolling-post.active {
    bottom: 50%; /* Center vertically */
    opacity: 1;
}

.scrolling-post.inactive {
    bottom: 150%; /* Move off-screen upwards */
    opacity: 0;
}


/**** DESKTOP MENU ****/
.desktop-menu {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
}
.desktop-menu a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}
.desktop-menu a:hover {
	text-decoration: none;
}
.desktop-menu li {
    flex: 1;
    text-align: center;
    padding: 0;
}
.desktop-menu li a {
    display: block;
    padding: 10px 0;
}
.desktop-menu ul {
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

/**** MOBILE MENU ****/
.mobile-menu {
    display: none;
    position: relative;
}
.mobile-menu-content {
    display: none;
    position: absolute;
	top: 40px;
    30: 50px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
}
.mobile-menu-content a {
    display: block;
    padding: 10px 20px;
    color: #007bff;
    text-decoration: none;
}
.mobile-menu-content a:hover {
    background-color: #f0f0f0;
}
.mobile-menu-content li {
}
.mobile-menu-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
}

/**** SELECTED MENU DAY ****/
.current-page-item {
    width: 100%;
    text-align: center;
}
.current-page-item a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

/**** TIME BAR ****/
.timeline {
    display: flex;
    padding-top: 10px;
	margin-top: 1px;
    min-width: calc(var(--hour-width) * 24 + 101px);
}
.timeline-buffer {
    width: 101px;
    flex-shrink: 0;
}
.timeline-hour {
    width: var(--hour-width);
    text-align: left;
    padding-left: 10px;
    line-height: 30px;
}
.timeline-half-hour {
    width: calc(var(--hour-width) / 2);
    position: absolute;
    border-right: 1px dashed #555;
    top: 0;
    height: 100%;
}

/**** TIMELINE INDICATOR ****/
.current-time-line {
    display: none;
    position: fixed;
    width: 1px;
    height: calc(100% - 0px);
    z-index: 2;
}
.current-time-line::before {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}

/**** SCHEDULER ****/
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.timeline-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - var(--header-offset, 50px));
    position: relative;
}
.timeline-container {
    display: flex;
    flex-direction: column;
    min-width: calc(var(--hour-width) * 24 + 101px);
}

/**** ROWS ****/
.row {
    display: flex;
    align-items: center;
    height: 100px;
    position: relative;
    min-width: var(--hour-width);
}
.category-image-container {
    position: sticky;
    left: 0;
    height: 100px;
    width: 100px;
    background-size: cover;
    background-position: center;
    background: #fff;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed versions of Chrome, Edge, Opera and Firefox */
	
}
.category-image-container img {
    max-width: 100%;
    max-height: 100%;
    -webkit-user-drag: none; /* Disable image dragging in Safari */
    -webkit-user-select: none; /* Disable text selection in Safari */
    -moz-user-select: none; /* Disable text selection in Firefox */
    -ms-user-select: none; /* Disable text selection in Internet Explorer/Edge */
    user-select: none; /* Non-prefixed versions of Chrome, Edge, Opera and Firefox */
    pointer-events: none; /* Disable all mouse events */
}

/**** POST BOXES ****/
.posts-container {
    display: flex;
    position: relative;
    margin-left: 100px;
    height: 100%;
    align-items: center;
}
.post {
    margin: 0px;
    height: 100px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    padding: 10px 10px 10px 12px;
    position: absolute;
    top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	-webkit-user-drag: none; /* Disable image dragging in Safari */
    -webkit-user-select: none; /* Disable text selection in Safari */
    -moz-user-select: none; /* Disable text selection in Firefox */
    -ms-user-select: none; /* Disable text selection in Internet Explorer/Edge */
    user-select: none; /* Disable text selection in modern browsers */
}
.post:hover .post-content {
    display: block;
    white-space: normal;
    word-wrap: break-word;
}

.post:hover h3, .post:hover .post-time {
    display: none;
}
.post.custom-bg {
    background-color: var(--post-box-bg-color, inherit);
    position: relative;
}
.post-content {
    display: none;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
	text-align: <?php 
        $align_items = get_theme_mod('post_align_items', 'center');
        if ($align_items == 'flex-start') {
            echo 'left';
        } else if ($align_items == 'flex-end') {
            echo 'right';
        } else {
            echo 'center';
        }
    ?>;
}
.post-title {
    font-family: var(--post-title-font, Arial);
    font-size: var(--post-title-size, 16px);
    margin-bottom: 5px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
	text-align: <?php 
        $align_items = get_theme_mod('post_align_items', 'center');
        if ($align_items == 'flex-start') {
            echo 'left';
        } else if ($align_items == 'flex-end') {
            echo 'right';
        } else {
            echo 'center';
        }
    ?>;
}
.post-time {
    font-family: var(--post-times-font, Arial);
    font-size: var(--post-times-size, 14px);
    text-align: center;
    color: #555;
    margin-top: -5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.post-time.italic {
    font-style: italic;
}
.post-ribbon {
    position: absolute;
    top: 50px;
    left: -20px;
    width: 100px;
    height: auto;
    padding: 2px 5px;
    background-color: var(--ribbon-bg-color, red);
    color: var(--ribbon-text-color, white);
    transform: rotate(-45deg);
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
    white-space: nowrap;
}
.post-banner {
    position: absolute;
    top: var(--banner-top-offset, 10px);
    left: var(--banner-left-offset, 10px);
    width: var(--banner-width, 90%);
    height: auto;
    padding: 2px 5px;
    background-color: var(--banner-bg-color, red);
    color: var(--banner-text-color, white);
    transform: rotate(0deg);
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: var(--banner-text-align, center);
    font-size: var(--banner-text-size, 12px);
    font-weight: bold;
    text-transform: uppercase;
    z-index: 0;
    white-space: nowrap;
}
.post:hover .post-ribbon {
    visibility: hidden;
    opacity: 1;
}
.post:hover .post-banner {
    visibility: hidden;
    opacity: 1;
}

/**** FEATURE IMAGE POPUP ****/
.dim-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    display: flex;
}
.popup-image {
    max-width: 50%;
    max-height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-image img {
    max-width: 80%;
    max-height: 80%;
    display: block;
    margin: auto;
}

/* Add class for each category */
<?php foreach (get_categories() as $category): ?>
.category-<?php echo $category->term_id; ?> {
    background-color: <?php echo get_theme_mod("channel_color_{$category->term_id}", '#ffffff'); ?>;
}

.content {
    margin-top: 0;
}

/**** RESPONSIVE ****/
@media (max-width: 768px) {
.desktop-menu {
        display: none;
    }
.mobile-menu {
        display: block;
    }
}

@media (min-width: 769px) {
.mobile-menu {
        display: none;
    }
.mobile-menu-content a {
        text-decoration: none;
    }

}