/* YesStreaming Modern Theme CSS
 * Copyright (c) 2025 YesStreaming. All Rights Reserved.
 * Version: 1.2.0 - Full theme preset support with nav hover
 */

/* ========================================
   BASE STYLES
   ======================================== */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    background: var(--color-background);
    min-height: 100vh;
    padding-bottom: 0;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6, .heading {
    font-family: var(--font-heading);
    color: var(--color-heading);
}

h1 { font-size: calc(var(--font-size-heading) * 1.5); }
h2 { font-size: calc(var(--font-size-heading) * 1.2); }
h3 { font-size: var(--font-size-heading); }
h4 { font-size: calc(var(--font-size-heading) * 0.9); }
h5 { font-size: calc(var(--font-size-heading) * 0.8); }
h6 { font-size: calc(var(--font-size-heading) * 0.7); }

/* Navigation and menu items */
nav, nav a, .nav, .nav a, .menu, .menu a, .navigation {
    font-family: var(--font-menu);
    font-size: var(--font-size-menu);
}

/* Logo/Site Name */
.logo-text, .site-name, header .logo {
    font-size: var(--font-size-logo) !important;
    color: var(--color-logo-text, var(--color-heading));
}

/* Body text */
p, span, div, a, button, input, textarea, select {
    font-family: var(--font-body);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
header, .site-header {
    background: var(--color-header-bg, var(--color-background));
}

nav a, .nav-link {
    color: var(--color-menu-link, var(--color-text)) !important;
    transition: all 0.3s ease;
}

nav a:hover, .nav-link:hover {
    color: var(--color-menu-hover, var(--color-primary)) !important;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

nav a.active, .nav-link.active {
    background: var(--color-menu-active-bg, var(--color-primary)) !important;
    color: var(--color-menu-active-text, #ffffff) !important;
}

/* Desktop Navigation Links */
.desktop-nav a {
    color: var(--color-menu-link) !important;
}

.desktop-nav a:hover {
    color: var(--color-menu-hover, var(--color-primary)) !important;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.desktop-nav a.active {
    background: var(--color-menu-active-bg) !important;
    color: var(--color-menu-active-text) !important;
}

/* ========================================
   GRADIENT & EFFECTS
   ======================================== */
.gradient-text {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-right: 0.1em;
    display: inline-block;
}

.glass-card {
    background: var(--color-card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

/* ========================================
   BUTTONS
   ======================================== */
.play-button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 10px 40px color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: all 0.3s ease;
}

.play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 50px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.btn-primary, .request-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: var(--color-button-text, #ffffff) !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-primary:hover, .request-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Desktop Nav Request Button Override */
.desktop-nav .request-btn,
nav .request-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: var(--color-button-text, white) !important;
}

.desktop-nav .request-btn:hover,
nav .request-btn:hover {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)) !important;
}

/* ========================================
   CARDS
   ======================================== */
.show-card {
    background: var(--color-card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    transition: all 0.3s ease;
}

.show-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary);
}

.stat-icon {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ========================================
   NEWSLETTER SECTION
   ======================================== */
.newsletter-section {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

/* ========================================
   RANGE INPUT (Volume)
   ======================================== */
input[type="range"] {
    -webkit-appearance: none;
    background: var(--color-border, rgba(255, 255, 255, 0.2));
    border-radius: 10px;
    height: 6px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* ========================================
   PERSISTENT PLAYER
   ======================================== */
.persistent-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-player-bg, rgba(0, 0, 0, 0.95));
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-border);
    z-index: 100;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.album-art {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.album-art-placeholder {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   FOOTER
   ======================================== */
footer, .site-footer {
    background: var(--color-footer-bg, var(--color-background));
    color: var(--color-footer-text, var(--color-text));
}

/* ========================================
   MOBILE MENU
   ======================================== */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--color-menu-bg, var(--color-background));
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    color: var(--color-menu-link, var(--color-text));
}

.mobile-menu a:hover {
    color: var(--color-menu-hover, var(--color-primary));
}

/* ========================================
   LINKS
   ======================================== */
a {
    color: var(--color-link, var(--color-primary));
}

a:hover {
    color: var(--color-link-hover, var(--color-secondary));
}

/* ========================================
   SCHEDULE STYLING
   ======================================== */
.schedule-item:nth-child(odd) {
    background: var(--color-schedule-odd, var(--color-card-bg));
}

.schedule-item:nth-child(even) {
    background: var(--color-schedule-even, var(--color-background));
}

/* ========================================
   STATUS COLORS
   ======================================== */
.success, .text-success {
    color: var(--color-success, #10b981);
}

.error, .text-error {
    color: var(--color-error, #ef4444);
}

.warning, .text-warning {
    color: var(--color-warning, #f59e0b);
}

.info, .text-info {
    color: var(--color-info, #3b82f6);
}

/* ========================================
   HIGH QUALITY IMAGES
   ======================================== */
.high-quality-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .persistent-player {
        padding: 8px 12px;
    }
    
    .album-art,
    .album-art-placeholder {
        width: 40px;
        height: 40px;
    }
}