/* ===========================================
   PITTSBURGH PENGUINS RADIO NETWORK STYLES - CONSOLIDATED
   =========================================== */

/* ===========================================
   SYSTEM FONTS (Custom fonts removed - never used)
   =========================================== */

:root{
    /* Font settings: adopt Inter for primary and heading typefaces to align with
       the official Penguins website.  Inter is loaded via Google Fonts in
       each HTML file.  Fallbacks ensure compatibility if the font fails
       to load. */
    --font-primary: 'Inter', Arial, sans-serif;
    --font-heading: 'Inter', Arial, sans-serif;

    /* Penguins Color Palette */
    --penguins-black: #000000;
    --penguins-gold: #FFD700;
    --penguins-dark-gold: #B8860B;
    --penguins-light-gold: #FFE55C;
    --penguins-orange: #FF8C00;

    /* Neutral Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --background-dark: #111111;
    --background-darker: #0a0a0a;
    --background-card: rgba(255, 255, 255, 0.05);
    --background-card-hover: rgba(255, 255, 255, 0.08);

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* ===========================================
   TICKETS BANNER
   =========================================== */

.tickets-banner {
    width: 100%;
    margin-top: 71px;    
    background: linear-gradient(135deg, var(--penguins-black) 0%, var(--background-darker) 100%);
}

.tickets-banner-container {
    width: 100%;
    padding: 0;
}

.tickets-banner-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.tickets-banner-image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.2);
}

/* ===========================================
   RESET & BASE STYLES
   =========================================== */

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

body{
    font-family: var(--font-primary);
    background: linear-gradient(135deg, var(--penguins-black) 0%, #1a1a1a 50%, var(--penguins-black) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a{
    color: var(--penguins-gold);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover{
    color: var(--penguins-light-gold);
}

.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===========================================
   NAVIGATION
   =========================================== */

.main-nav{
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    transition: var(--transition-fast);
}

.nav-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--penguins-gold);
}

.nav-logo i{
    font-size: 2rem;
    color: var(--penguins-gold);
}

.nav-logo-image{
    height: 40px;
    width: auto;
    object-fit: contain;
}

.nav-links{
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link{
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
    transition: var(--transition-fast);
}

.nav-link:hover{
    color: var(--penguins-gold);
}

.nav-link::after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--penguins-gold);
    transition: var(--transition-fast);
}

.nav-link:hover::after{
    width: 100%;
}


.nav-toggle{
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span{
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    margin: 3px 0;
    transition: var(--transition-fast);
}

/* ===========================================
   HERO SECTION
   =========================================== */

.hero {
    width: 100%;
    padding: 0;
    margin-top: -7px;
}

.hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

@keyframes fadeInUp{
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse{
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes glow{
    from {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    }
    to {
        text-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    }
}

.live-stream-container{
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    min-height: 200px;
    margin: 0;
    box-shadow: 0 20px 40px var(--glass-shadow);
    animation: slideInFromBottom 2s ease-out 0.5s both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.recap-container{
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    min-height: 200px;
    margin: 0;
    box-shadow: 0 20px 40px var(--glass-shadow);
    animation: slideInFromBottom 2s ease-out 1s both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.recap-header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.recap-header i{
    font-size: 1.5rem;
    color: var(--penguins-gold);
}

.recap-text{
    font-weight: 600;
    color: var(--penguins-gold);
    letter-spacing: 1px;
    font-size: 1.1rem;
}

.recap-note{
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
    font-style: italic;
}

.audio-player{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.audio-player audio{
    display: none; /* Hide default controls */
}

.audio-controls{
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 25px;
    padding: 10px 15px;
    backdrop-filter: blur(10px);
}

.audio-btn{
    background: var(--penguins-gold);
    color: var(--penguins-black);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.audio-btn:hover{
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.4);
}

.download-link-container{
    margin-top: 15px;
    text-align: center;
}

.download-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid var(--penguins-gold);
    color: var(--penguins-gold);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.download-link:hover{
    background: var(--penguins-gold);
    color: var(--penguins-black);
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.audio-btn.playing i{
    content: "\f04c"; /* pause icon */
}

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

.progress-bar{
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.progress-fill{
    height: 100%;
    background: var(--penguins-gold);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
}

.time-display{
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    min-width: 35px;
    text-align: center;
}

.time-separator{
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@keyframes slideInFromBottom{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stream-status{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.status-indicator{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff4444;
    animation: blink 2s infinite;
}

.status-indicator.offline{
    background: #ff4444;
}

@keyframes blink{
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.status-text{
    font-weight: 600;
    color: #ff4444;
    letter-spacing: 1px;
}

.stream-note{
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-style: italic;
}

.stream-button{
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}

.stream-button:hover:not(.disabled){
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}

.stream-button.disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===========================================
   BOTTOM SECTIONS LAYOUT
   =========================================== */

.bottom-sections{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 80px 0 40px 0;
}

.bottom-sections > section{
    margin-bottom: 40px;
}

.bottom-sections > section:last-child{
    margin-bottom: 0;
}

@media (max-width: 768px){
    .bottom-sections {
        gap: 30px;
    }
}

/* ===========================================
   EMERGENCY CONTACTS
   =========================================== */

.emergency-section{
    background: var(--background-dark);
    padding: 40px;
    border-radius: 15px;
}

.emergency-header{
    text-align: center;
    margin-bottom: 50px;
}

.emergency-header i{
    font-size: 3rem;
    color: #ff4444;
    margin-bottom: 20px;
    display: block;
}

.emergency-header h3{
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.emergency-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.emergency-card{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: var(--transition-fast);
    box-shadow: 0 8px 20px var(--glass-shadow);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.emergency-card:hover{
    transform: translateY(-5px);
    background: var(--background-card-hover);
    box-shadow: 0 20px 40px var(--glass-shadow);
}

.card-icon{
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.card-icon i{
    font-size: 1.3rem;
    color: var(--penguins-black);
}

.card-content h4{
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--penguins-gold);
    line-height: 1.3;
    word-wrap: break-word;
}

.card-note{
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/* Contact Links - Clean, Consistent Styling */
.contact-link {
    display: inline-block;
    background: var(--penguins-gold);
    color: var(--penguins-black);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    border: 2px solid var(--penguins-gold);
}

.contact-link:hover {
    background: var(--penguins-black);
    color: var(--penguins-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Contact numbers container for multiple numbers */
.contact-numbers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.contact-numbers .contact-link {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.85rem;
}

/* Emergency Contacts Editor Styles */
.emergency-contacts-editor {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-editor-group {
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    transition: var(--transition-fast);
}

.contact-editor-group:hover {
    background: var(--background-card-hover);
    box-shadow: 0 8px 25px var(--glass-shadow);
}

.contact-editor-group h5 {
    color: var(--penguins-gold);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-editor-group h5 i {
    font-size: 1rem;
}

.contact-editor-group .form-group {
    margin-bottom: 15px;
}

.contact-editor-group .form-group:last-child {
    margin-bottom: 0;
}

.contact-editor-group label {
    display: block;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.contact-editor-group input[type="text"],
.contact-editor-group input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--background-darker);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.contact-editor-group input[type="text"]:focus,
.contact-editor-group input[type="tel"]:focus {
    border-color: var(--penguins-gold);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
    outline: none;
}

/* Audio Management Styles */
.audio-management {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-help {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
    font-style: italic;
}

.current-audio-info {
    background: var(--background-darker);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
}

.current-audio-info h5 {
    color: var(--penguins-gold);
    margin-bottom: 10px;
    font-size: 1rem;
}

.current-audio-info p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.current-audio-info strong {
    color: var(--text-primary);
}

/* ===========================================
   AUDIO CONTROLS
   =========================================== */

.audio-controls-section{
    padding: 60px 0;
    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-darker) 100%);
}

.audio-controls-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.live-stream-container {
    grid-column: 1 / -1; /* Span full width */
    justify-self: center;
    max-width: 600px; /* Same width as two recap containers combined */
}

.recap-container {
    max-width: 100%;
}

/* ===========================================
   ANNOUNCEMENTS
   =========================================== */

.announcements-section{
    margin-top: 70px;
    padding: 40px 0;
    background: linear-gradient(135deg, var(--background-darker) 0%, var(--background-dark) 100%);
    scroll-margin-top: 150px; /* Account for fixed nav + margin + extra spacing */
}

.announcements-header{
    text-align: center;
    margin-bottom: 50px;
}

.announcements-header i{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
    display: block;
}

.announcements-header h3{
    font-size: 2.5rem;
    color: var(--text-primary);
}

.announcement-card{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    box-shadow: 0 10px 30px var(--glass-shadow);
    transition: var(--transition-fast);
}

.announcement-card:hover{
    transform: translateY(-3px);
    background: var(--background-card-hover);
}

.announcement-icon{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.announcement-icon i{
    font-size: 1.5rem;
    color: white;
}

.announcement-content h4{
    font-size: 1.4rem;
    color: var(--penguins-gold);
    margin-bottom: 15px;
}

.announcement-content p{
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.7;
}

.date-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.date-item{
    background: var(--penguins-gold) !important;
    color: var(--penguins-black) !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===========================================
   SCHEDULE PREVIEW
   =========================================== */

.schedule-section{
    background: var(--background-dark);
    margin-top: 70px;
    padding: 60px 40px;
    border-radius: 15px;
    scroll-margin-top: 150px; /* Account for fixed nav + margin + extra spacing */
}

.section-header{
    text-align: center;
    margin-bottom: 50px;
}

.section-header i{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
    display: block;
}

.section-header h3{
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.view-all-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--penguins-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-fast);
}

.view-all-link:hover{
    color: var(--penguins-light-gold);
    transform: translateX(5px);
}

.schedule-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.game-card{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 25px;
    transition: var(--transition-fast);
    box-shadow: 0 10px 30px var(--glass-shadow);
}

.game-card:hover{
    transform: translateY(-5px);
    background: var(--background-card-hover);
    box-shadow: 0 20px 40px var(--glass-shadow);
}

.game-date{
    color: var(--penguins-gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.game-matchup{
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 500;
}

.game-time{
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.game-pregame{
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ===========================================
   DOWNLOADS SECTION
   =========================================== */

.downloads-section{
    margin-top: 70px;
    padding: 40px 0;
    background: var(--background-dark);
    scroll-margin-top: 150px; /* Account for fixed nav + margin + extra spacing */
}

.downloads-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.download-card{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: var(--transition-fast);
    box-shadow: 0 10px 30px var(--glass-shadow);
}

.download-card:hover{
    transform: translateY(-5px);
    background: var(--background-card-hover);
    box-shadow: 0 20px 40px var(--glass-shadow);
}

.download-icon{
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.download-icon i{
    font-size: 1.8rem;
    color: white;
}

.download-icon-image{
    width: 100%;
    height: auto;
    /* Limit the height of large single‑column cards (e.g., Satellite section)
       and ensure the full image is visible without cropping.  Using
       object-fit: contain prevents portions of the image from being
       clipped, while reducing the max-height helps maintain a balanced
       layout across devices. */
    max-height: 300px;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}

.download-content h4{
    font-size: 1.3rem;
    color: var(--penguins-gold);
    margin-bottom: 15px;
}

.download-content p{
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.download-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid #4CAF50;
    color: #4CAF50;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.download-link:hover{
    background: #4CAF50;
    color: white;
    transform: scale(1.05);
}

.document-content{
    margin-top: 20px;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.document-content h5{
    color: var(--penguins-gold);
    font-size: 1rem;
    margin: 20px 0 10px 0;
    font-weight: 600;
}

.document-content h5:first-child{
    margin-top: 0;
}

.document-content p{
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.5;
}

.document-content ul{
    color: var(--text-secondary);
    margin: 10px 0;
    padding-left: 20px;
}

.document-content li{
    margin: 5px 0;
    line-height: 1.4;
}

.pinout-table{
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.pinout-row{
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.pinout-row:last-child{
    border-bottom: none;
}

.pinout-row span{
    color: var(--text-secondary);
    flex: 1;
}

.contact-info{
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.contact-info p{
    margin: 5px 0;
    color: var(--penguins-gold);
    font-weight: 500;
}

.broadcast-schedule{
    margin-top: 0;
}

.broadcast-schedule h5{
    color: var(--penguins-gold);
    font-size: 1.1rem;
    margin: 25px 0 15px 0;
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 5px;
}

/* Collapsible Segments */
.collapsible-segment {
    margin: 20px 0;
}

.segments-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.control-btn {
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.2);
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, var(--penguins-light-gold) 0%, var(--penguins-gold) 100%);
}

/* Responsive styles for control buttons */
@media (max-width: 480px) {
    .segments-controls {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .control-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .segment-header::after {
        display: none; /* Hide tooltip on mobile */
    }
}

.segment-header {
    color: var(--penguins-gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
}

.segment-header::after {
    content: "−"; /* Minus symbol - segment is expanded, can collapse */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--penguins-gold);
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: none;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--penguins-gold);
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
}

.segment-header.collapsed::after {
    content: "+"; /* Plus symbol - segment is collapsed, can expand */
}

.segment-header:hover {
    color: var(--penguins-light-gold);
    background: rgba(255, 215, 0, 0.05);
    border-radius: 8px 8px 0 0;
}

.segment-header i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.segment-header.collapsed i {
    transform: rotate(-90deg);
}

.segment-content {
    /* When expanded, allow the content to grow naturally without clipping.  Using
       `max-height: none` and `overflow: visible` ensures nested lists and
       subsegments are fully visible and do not cut off or overlap when
       expanded.  Transitions are removed here because the height is not
       animated; collapse/expand is handled via the `collapsed` class below. */
    max-height: none;
    overflow: visible;
    /* Provide bottom margin so expanded sections push subsequent headings down.  Without
       additional spacing, nested content can visually overlap the next section header
       when expanded. */
    margin-bottom: 20px;
}

.segment-content.collapsed {
    /* Collapsed content is hidden by constraining the max‑height to zero and
       hiding overflow; this allows expand/collapse to work without manual
       inline height management. */
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}


.broadcast-schedule h5:first-child{
    margin-top: 0;
}

.break-details{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid var(--penguins-gold);
}

.break-details p{
    color: var(--penguins-gold);
    font-weight: 600;
    margin: 0 0 10px 0;
    font-size: 1rem;
}

.break-details ul{
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.break-details li{
    color: var(--text-secondary);
    margin: 5px 0;
    font-size: 0.95rem;
}

.broadcast-info{
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
}

.broadcast-info h5{
    color: var(--penguins-gold);
    margin: 15px 0 10px 0;
    font-size: 1rem;
}

.broadcast-info h5:first-child{
    margin-top: 0;
}

.broadcast-info p{
    color: var(--text-primary);
    font-style: italic;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    border-left: 3px solid var(--penguins-gold);
}

/* ===========================================
   PRODUCTION REQUEST
   =========================================== */

.production-section{
    margin-top: 70px;
    padding: 40px 0;
    background: linear-gradient(135deg, var(--background-darker) 0%, var(--background-dark) 100%);
    scroll-margin-top: 150px; /* Account for fixed nav + margin + extra spacing */
}

.production-card{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px var(--glass-shadow);
    max-width: 600px;
    margin: 0 auto;
}

.production-icon{
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 20px rgba(33, 150, 243, 0.3);
}

.production-icon i{
    font-size: 2rem;
    color: white;
}

.production-content h4{
    font-size: 1.8rem;
    color: var(--penguins-gold);
    margin-bottom: 15px;
}

.production-content p{
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.6;
}

.production-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(33, 150, 243, 0.3);
}

.production-link:hover{
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(33, 150, 243, 0.4);
}

/* ===========================================
   FOOTER
   =========================================== */

.main-footer{
    background: var(--penguins-black);
    padding: 30px 0;
    border-top: 1px solid var(--glass-border);
}

.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--penguins-gold);
}

.footer-logo i{
    font-size: 1.5rem;
}

.footer-logo-image{
    height: 30px;
    width: auto;
    object-fit: contain;
}

.footer-links{
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links a{
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

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

.footer-bottom{
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
    margin-top: 15px;
}

.footer-bottom p{
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive footer styles */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .footer-links {
        gap: 15px;
        justify-content: center;
    }

    .main-footer {
        padding: 25px 0;
    }
}

@media (max-width: 480px) {
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }

    .footer-content {
        gap: 20px;
    }
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 768px){
    .nav-links {
        display: none;
    }

    /* When the nav-toggle is active, display the mobile navigation menu */
    .nav-links.active {
        /* When the hamburger is tapped, show a full‑width overlay for links below the nav bar.
           Use a dark opaque background to ensure menu items are legible over page content. */
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        /* darken the background instead of the glass effect so the mobile menu is visible */
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--glass-border);
        padding: 20px 0;
        gap: 15px;
        align-items: center;
        z-index: 1000;
    }

    .nav-toggle {
        display: flex;
    }

    /* Center audio control cards and stack them vertically on small screens */
    .audio-controls-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
    }

    .live-stream-container {
        grid-column: 1;
        max-width: 100%;
    }

    .live-stream-container,
    .recap-container {
        margin: 0 auto;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .live-stream-container {
        padding: 30px 20px;
        margin: 0 20px;
    }

    .hero-content {
        flex-direction: column;
        padding-left: 15%;
    }

    .hero-left {
        margin-bottom: 20px;
        align-items: flex-start;
        max-width: 100%;
    }

    .live-stream-container,
    .recap-container {
        max-width: 100%;
        width: 100%;
    }

    .audio-controls-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 20px;
    }

    .live-stream-container {
        grid-column: 1;
        max-width: 100%;
    }
}

@media (max-width: 480px){
    .hero-content {
        padding-left: 10%;
    }

    .hero-right {
        margin-top: 10px;
    }

    .live-stream-container,
    .recap-container {
        padding: 20px 15px;
        margin: 0 10px;
    }

    .stream-button {
        font-size: 0.9rem;
        padding: 12px 20px;
    }

    .recap-container {
        margin-top: 15px;
    }

    .download-link {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .emergency-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .emergency-card {
        padding: 12px;
    }

    .card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }

    .card-icon i {
        font-size: 1.1rem;
    }

    .card-content h4 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .card-note {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .contact-link {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .contact-numbers .contact-link {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .downloads-grid {
        grid-template-columns: 1fr;
    }

    .announcement-card {
        flex-direction: column;
        text-align: center;
    }

    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px){
    .nav-container {
        padding: 0 15px;
    }

    .emergency-card {
        padding: 15px;
    }

    .emergency-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .card-content {
        padding: 15px;
    }

    .emergency-card {
        min-height: 180px;
    }

    .card-content h4 {
        font-size: 0.9rem;
    }


    .card-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }

    .card-icon i {
        font-size: 1.2rem;
    }

    .card-content h4 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .card-note {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }


    .download-card {
        padding: 20px;
    }

    .hero {
        height: auto;
        margin-top: 0;
    }

    .hero-right {
        right: 10px;
        gap: 15px;
    }

    .live-stream-container,
    .recap-container {
        max-width: 280px;
    }

    .live-stream-container {
        padding: 25px 15px;
    }

    .recap-container {
        padding: 25px 15px;
    }

    .audio-controls {
        padding: 8px 12px;
        gap: 8px;
    }

    .audio-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .time-display {
        font-size: 0.75rem;
        min-width: 30px;
    }

    .time-separator {
        font-size: 0.8rem;
    }

    .section-header h3 {
        font-size: 2rem;
    }
}

/* ===========================================
   ANIMATIONS & EFFECTS
   =========================================== */


@keyframes slideUp{
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-card:nth-child(1){ animation: slideUp 0.8s ease-out 0.1s both; }

.download-card:nth-child(2){ animation: slideUp 0.8s ease-out 0.2s both; }

.download-card:nth-child(3){ animation: slideUp 0.8s ease-out 0.3s both; }

.download-card:nth-child(4){ animation: slideUp 0.8s ease-out 0.4s both; }

/* Custom scrollbar */
::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-track{
    background: var(--background-dark);
}

::-webkit-scrollbar-thumb{
    background: var(--penguins-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--penguins-dark-gold);
}

/* ===========================================
   CALENDAR PAGE STYLES
   =========================================== */

.calendar-header{
    margin-top: 70px;
    padding: 80px 0 60px;
    background: linear-gradient(135deg, var(--background-darker) 0%, var(--background-dark) 100%);
    text-align: center;
    scroll-margin-top: 150px; /* Account for fixed nav + margin + extra spacing */
}

.calendar-title i{
    font-size: 4rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
    display: block;
}

.calendar-title h1{
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--text-primary);
    margin-bottom: 15px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.calendar-title p{
    color: var(--text-secondary);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

.calendar-filters{
    padding: 40px 0;
    background: var(--background-dark);
    border-bottom: 1px solid var(--glass-border);
}

.filters-container{
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 20px;
    align-items: center;
}

.search-box{
    position: relative;
    max-width: 400px;
    width: 100%;
}

.search-box i{
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 1;
}

.search-box input{
    width: 100%;
    padding: 10px 15px 10px 45px;
    background: linear-gradient(135deg, var(--background-card) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(15px);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.search-box input:focus{
    outline: none;
    border-color: var(--penguins-gold);
    background: linear-gradient(135deg, var(--background-card-hover) 0%, rgba(255, 215, 0, 0.15) 100%);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2), 0 6px 20px rgba(255, 215, 0, 0.3);
}

.search-box input:hover{
    border-color: var(--penguins-gold);
    background: linear-gradient(135deg, var(--background-card-hover) 0%, rgba(255, 215, 0, 0.1) 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
}

.filter-controls{
    display: flex;
    gap: 20px;
    align-items: center;
}

.filter-group{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label{
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.filter-group select{
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--background-card) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(15px);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.filter-group select:hover{
    border-color: var(--penguins-gold);
    background: linear-gradient(135deg, var(--background-card-hover) 0%, rgba(255, 215, 0, 0.1) 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
}

.filter-group select:focus{
    outline: none;
    border-color: var(--penguins-gold);
    background: linear-gradient(135deg, var(--background-card-hover) 0%, rgba(255, 215, 0, 0.15) 100%);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2), 0 6px 20px rgba(255, 215, 0, 0.3);
}

.filter-group select option{
    background: var(--background-darker);
    color: var(--text-primary);
    padding: 10px 15px;
    border: none;
    font-weight: 500;
}

.filter-group select option:hover{
    background: var(--penguins-gold);
    color: var(--penguins-black);
}


.results-count{
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.calendar-content{
    padding: 60px 0;
    background: var(--background-dark);
}

.calendar-view{
    display: none;
}

.calendar-view.active{
    display: block;
}

/* List View Styles */
.games-list{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.month-section{
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px var(--glass-shadow);
}

.month-header{
    color: var(--penguins-gold);
    font-size: 1.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--penguins-gold);
}

.month-games{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.game-card{
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: var(--transition-fast);
    cursor: pointer;
}

.game-card:hover{
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px var(--glass-shadow);
}

.game-card.past{
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.03);
}

.game-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.game-date{
    color: var(--penguins-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

.game-location{
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.game-location.home{
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.game-location.away{
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

.game-matchup{
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 500;
}

.game-times{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-time{
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.pregame-times{
    display: flex;
    gap: 15px;
}

.pregame-times div{
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Calendar View Styles */
.month-navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.nav-button{
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    backdrop-filter: blur(10px);
}

.nav-button:hover{
    background: var(--background-card-hover);
    color: var(--penguins-gold);
    transform: scale(1.1);
}

#currentMonth{
    font-size: 2rem;
    color: var(--penguins-gold);
    min-width: 250px;
    text-align: center;
}

.calendar-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px var(--glass-shadow);
}

.calendar-header{
    text-align: center;
    font-weight: 600;
    color: var(--penguins-gold);
    padding: 15px 0;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
}

.calendar-cell{
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
    border-radius: 8px;
    transition: var(--transition-fast);
    cursor: pointer;
    position: relative;
}

.calendar-cell:hover{
    background: rgba(255, 255, 255, 0.05);
}

.calendar-cell.other-month{
    color: var(--text-muted);
    opacity: 0.5;
}

.calendar-cell.today{
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--penguins-gold);
}

.calendar-cell.has-games{
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid #4CAF50;
}

.cell-date{
    font-weight: 600;
    margin-bottom: 5px;
}

.game-indicators{
    background: #4CAF50;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Modal Styles */
.modal{
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content{
    background: var(--background-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    margin: 10% auto;
    max-width: 600px;
    box-shadow: 0 20px 40px var(--glass-shadow);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn{
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-header h3{
    color: var(--penguins-gold);
    font-size: 1.5rem;
    margin: 0;
}

.modal-close{
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.modal-close:hover{
    background: rgba(255, 255, 255, 0.1);
    color: var(--penguins-gold);
}

.modal-body{
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.game-details{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row:last-child{
    border-bottom: none;
}

.detail-label{
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===========================================
   ADMIN LOGIN MODAL
   =========================================== */

.login-modal{
    max-width: 400px;
    width: 90%;
}

.login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.login-icon{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 10px;
}

.login-description{
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

.form-group{
    width: 100%;
    text-align: left;
}

.form-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input{
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus{
    outline: none;
    border-color: var(--penguins-gold);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.login-btn{
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--penguins-gold), var(--penguins-orange));
    color: #000000 !important;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-btn:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
}

.login-btn:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.login-error{
    color: #ff6b6b;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
}

.admin-controls{
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.logout-btn{
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.logout-btn:hover{
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* ===========================================
   CLEAR FILTER BUTTON
   A dedicated button used on the calendar page to reset all filters back
   to their default state.  Styled similarly to other action buttons so
   it fits the design language but with a neutral appearance.  Applies
   subtle hover feedback for improved affordance.
   =========================================== */
.clear-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--penguins-gold);
    color: var(--penguins-gold);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.clear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}



.detail-value{
    color: var(--text-primary);
    text-align: right;
    flex: 1;
}

.detail-value.home{
    color: #4CAF50;
}

.detail-value.away{
    color: #2196F3;
}

.date-game-card{
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.date-game-card:hover{
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* Loading and Error States */
.loading-state,
.error-state,
.empty-state{
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.loading-state i,
.error-state i,
.empty-state i{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
    display: block;
}

.loading-state i{
    animation: spin 1s linear infinite;
}

@keyframes spin{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Calendar Styles */
@media (max-width: 1024px){
    .filters-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .file-upload {
        order: -1; /* Move upload to top on smaller screens */
    }

    .filter-controls {
        justify-content: center;
        flex-wrap: wrap;
    }

    .month-games {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px){
    .calendar-title h1 {
        font-size: 2.5rem;
    }

    .calendar-title p {
        font-size: 1rem;
    }

    #currentMonth {
        font-size: 1.5rem;
        min-width: 200px;
    }

    .month-navigation {
        gap: 20px;
    }

    .calendar-grid {
        padding: 15px;
        gap: 5px;
    }

    .calendar-cell {
        padding: 5px;
    }

    .cell-date {
        font-size: 0.9rem;
    }

    .modal-content {
        margin: 20px;
        max-width: none;
    }

    .modal-header,
    .modal-body {
        padding: 20px;
    }

    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .detail-value {
        text-align: left;
    }

    /* Ensure game cards span the full width on narrow screens.  Without this,
       cards inherit a minimum width which leaves large gutters on phones. */
    .game-card {
        width: 100%;
    }
}

@media (max-width: 480px){
    .calendar-header {
        padding: 80px 0 40px;
    }

    .month-section {
        padding: 20px;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, minmax(35px, 1fr));
        padding: 10px;
    }

    .game-indicators {
        width: 16px;
        height: 16px;
        font-size: 0.7rem;
    }

    .tickets-banner {
        padding: 15px 0;
    }

    .tickets-banner-container {
        padding: 0 15px;
    }

    .tickets-banner-image:hover {
        transform: scale(1.01);
    }
}

/* ===========================================
    FANCY UPLOAD COMPONENTS
=========================================== */

.fancy-upload-card {
    background: var(--background-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px var(--glass-shadow);
    margin-bottom: 30px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.fancy-upload-card h4 {
    color: var(--penguins-gold);
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.upload-description {
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
}

.upload-form {
    margin-bottom: 20px;
}

.file-input-container {
    margin-bottom: 20px;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 2px dashed var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--background-darker);
    position: relative;
}

.file-input-label:hover {
    border-color: var(--penguins-gold);
    background: rgba(255, 215, 0, 0.05);
}

.file-input-text {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1rem;
}

.file-input-button {
    background: var(--penguins-gold);
    color: var(--penguins-black);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.file-input-button:hover {
    background: var(--penguins-dark-gold);
    transform: translateY(-1px);
}

.file-input-label input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--background-darker);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 15px;
}

.file-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.file-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.file-size {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.remove-file-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.remove-file-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

.upload-options {
    margin-bottom: 20px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 500;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background: var(--penguins-gold);
    border-color: var(--penguins-gold);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--penguins-black);
    font-weight: bold;
    font-size: 12px;
}

.upload-button {
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    position: relative;
}

.upload-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.upload-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.button-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.upload-progress {
    margin-top: 20px;
    display: none;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--background-darker);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

.upload-result {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    display: none;
}

.upload-result.success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.upload-result.error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.result-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

.result-icon.success {
    color: #4CAF50;
}

.result-icon.error {
    color: #f44336;
}

.result-message {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 10px;
}

.result-details {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.template-download {
    margin-top: 25px;
    padding: 20px;
    background: var(--background-darker);
    border: 2px dashed var(--penguins-gold);
    border-radius: 8px;
    text-align: center;
}

.template-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.template-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.template-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* ===========================================
    ADMIN PANEL STYLES
=========================================== */

.admin-header{
    background: linear-gradient(135deg, var(--penguins-black) 0%, var(--penguins-dark-gold) 100%);
    color: var(--text-primary);
    padding: 60px 0 40px;
    text-align: center;
}

.admin-title h1{
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.admin-title p{
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
    color: var(--text-secondary);
}

.login-required{
    padding: 80px 0;
    background: var(--background-darker);
}

.login-required-card .login-icon{
    font-size: 4rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
}

.login-btn{
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,215,0,0.4);
}

.admin-section{
    padding: 80px 0;
    background: var(--background-darker);
}

.admin-section:nth-child(even){
    background: var(--background-dark);
}

.section-header{
    text-align: center;
    margin-bottom: 50px;
}

.section-header i{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
}

.section-header h3{
    font-size: 2.2rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
}

.admin-card{
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.card-header{
    background: linear-gradient(135deg, var(--penguins-black) 0%, var(--penguins-dark-gold) 100%);
    color: var(--text-primary);
    padding: 30px;
}

.card-header h4{
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-header p{
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.card-content{
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}



/* Template Download */
.template-download{
    background: var(--background-card);
    border: 2px dashed var(--penguins-gold);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.template-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    padding: 15px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.template-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,215,0,0.4);
}

.template-info{
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* Announcement Editor */
.announcement-editor{
    max-width: 800px;
    margin: 0 auto;
}

/* Two-column layout for desktop */
@media (min-width: 768px) {
    .announcement-editor {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
        max-width: 1200px;
    }
}

.editor-section{
    margin-bottom: 40px;
    padding: 25px;
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.editor-section h5{
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 600;
    border-bottom: 2px solid var(--penguins-gold);
    padding-bottom: 10px;
}

.form-group{
    margin-bottom: 20px;
}

.form-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group textarea,
.form-group input[type="text"]{
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group textarea:focus,
.form-group input[type="text"]:focus{
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

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

/* Date List Editor */
.date-list-editor{
    margin-top: 15px;
}

.date-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
}

.date-item span{
    font-weight: 500;
}

.remove-date-btn{
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.remove-date-btn:hover{
    background: #c82333;
}

.add-date-section{
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.add-date-btn{
    background: var(--penguins-gold);
    color: var(--penguins-black);
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.add-date-btn:hover{
    background: var(--penguins-dark-gold);
}

/* Settings Grid */
.settings-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.setting-group{
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--penguins-gold);
}

.setting-group label{
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.setting-group select{
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--background-dark);
    color: var(--text-primary);
    transition: border-color 0.3s ease;
}

.setting-group select:focus{
    outline: none;
    border-color: var(--penguins-gold);
}

/* Editor Actions */
.editor-actions{
    text-align: center;
    margin-top: 30px;
}

.save-btn{
    background: linear-gradient(135deg, var(--penguins-gold) 0%, var(--penguins-dark-gold) 100%);
    color: var(--penguins-black);
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.save-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,215,0,0.4);
}

.save-status{
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    display: inline-block;
}

.save-status.success{
    background: #d4edda;
    color: #155724;
}

.save-status.error{
    background: #f8d7da;
    color: #721c24;
}

/* Quick Actions */
.quick-actions-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.action-card{
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.action-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.action-icon{
    font-size: 3rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
}

.action-content h4{
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.action-content p{
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.action-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.action-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}

.action-btn.logout-btn{
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.action-btn.logout-btn:hover{
    box-shadow: 0 5px 15px rgba(220,53,69,0.3);
}

/* Login Modal */
.login-modal .modal-content{
    max-width: 450px;
    margin: 100px auto;
}

.login-form{
    text-align: center;
}

.login-form .login-icon{
    font-size: 4rem;
    color: var(--penguins-gold);
    margin-bottom: 20px;
}

.login-form .login-description{
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.login-form .form-group{
    text-align: left;
    margin-bottom: 20px;
}

.login-form .form-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.login-form .form-group input{
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--background-dark);
    color: var(--text-primary);
    transition: border-color 0.3s ease;
}

.login-form .form-group input:focus{
    outline: none;
    border-color: var(--penguins-gold);
    box-shadow: 0 0 0 3px rgba(255,215,0,0.1);
}

.login-error{
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 15px;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Coverage Map Section Styles */
.coverage-map-section {
    padding: 60px 0;
    background: var(--background-dark);
}
.map-description {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-secondary);
    font-size: 1.1rem;
}
/* Map wrapper and container styling */
#map-wrapper {
    position: relative;
    width: 100%;
    margin: 40px auto;
    border-radius: 8px;
    box-shadow: 0 0 20px 5px rgba(0, 160, 255, 0.6), 0 0 40px 15px rgba(0, 160, 255, 0.4) inset;
    background: rgba(0, 0, 0, 0.6);
}
#map {
    width: 100%;
    height: 600px;
    border-radius: inherit;
    overflow: hidden;
}
.static-map {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* Ensure the satellite technical info card has top margin without inline styles */
#satellite.download-card {
    margin-top: 40px;
}

/* Affiliate hero section styles (moved from inline to CSS) */
.affiliate-hero {
    position: relative;
    text-align: center;
    padding: 80px 0;
    background: var(--background-dark);
}
.affiliate-hero h1 {
    color: var(--penguins-gold);
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.affiliate-hero p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
}
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: #00bfff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Show the region labels on top of the static map.  The overlay is hidden by default
       when using an interactive Leaflet map, but for the custom static map we keep it
       visible so users can see the state abbreviations and the Greater Pittsburgh label. */
    display: block;
}
.map-overlay .region-name {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 160, 255, 0.8);
    pointer-events: none;
}
.map-overlay .label-oh,
.map-overlay .label-wv,
.map-overlay .label-nj,
.map-overlay .label-nj2 {
    position: absolute;
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0, 160, 255, 0.8);
}
.map-overlay .label-oh { top: 30%; left: 8%; }
.map-overlay .label-wv { bottom: 20%; left: 12%; }
.map-overlay .label-nj { top: 20%; right: 8%; }
.map-overlay .label-nj2 { bottom: 25%; right: 10%; }
.leaflet-popup-content {
    font-size: 0.9rem;
}

/* Radio Affiliates Information Styles */
.affiliates-info {
    margin-top: 40px;
    padding: 30px 0;
}
.affiliates-info h4 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}
.affiliates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    max-width: 100%;
}

.affiliate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.affiliate-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
}

.affiliate-item strong {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 120px;
}

.affiliate-item .station-info {
    color: var(--text-secondary);
    margin: 0 15px;
    flex: 1;
}

.affiliate-item .frequency {
    color: var(--penguins-gold);
    font-weight: 500;
    text-align: right;
    min-width: 100px;
}

/* Responsive design for affiliates */
@media (max-width: 768px) {
    .affiliates-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .affiliate-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 12px;
    }

    .affiliate-item strong {
        min-width: auto;
    }

    .affiliate-item .station-info {
        margin: 0;
    }

    .affiliate-item .frequency {
        text-align: left;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .affiliates-info h4 {
        font-size: 1.3rem;
    }

    .affiliate-item {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* ==== Additional schedule styling improvements ==== */
/* Spacing between download buttons */
/*
 * Download links styling
 *
 * To ensure the green download buttons don’t run into one another,
 * display them inline with generous spacing.  The right and bottom
 * margins give horizontal and vertical breathing room and scale
 * consistently across the site.  Increasing these values also
 * improves separation on mobile, where buttons stack vertically.
 */
/*
 * Style the schedule download buttons.  Using inline‑block ensures the
 * buttons sit next to each other on larger screens while still wrapping
 * naturally on narrow viewports.  Generous margins keep the buttons
 * visually separated both horizontally and vertically.
 */
.download-links a {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* Ensure the container itself has sufficient top margin so the
   download buttons don’t crowd the preceding content.  A larger
   bottom margin creates breathing room after the button row. */
.download-links {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Legend styles for broadcast schedule color codes */
.legend {
    margin-top: 15px;
    /* leave a bit of space below the legend so it doesn't butt up
       directly against the buttons underneath */
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--penguins-gold);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 20px;
}

.legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Specific legend colors matching the break classes */
.legend-net {
    background-color: rgba(0, 112, 192, 0.4);
    border: 2px solid #0070c0;
}

.legend-local {
    /* Local break legend uses the same cyan tone as break-local */
    background-color: rgba(0, 176, 240, 0.4);
    border: 2px solid #00b0f0;
}

/* Legend color for end-of-broadcast closure */
.legend-end {
    /* End of broadcast uses magenta/purple */
    background-color: rgba(112, 48, 160, 0.4);
    border: 2px solid #7030a0;
}

/* Local rejoin legend colour (red) */
.legend-rejoin {
    background-color: rgba(192, 0, 0, 0.4);
    border: 2px solid #c00000;
}

/* :15 billboard legend colour (teal) */
.legend-billboard {
    background-color: rgba(0, 176, 80, 0.4);
    border: 2px solid #00b050;
}

/* Colour-coded break rows for network and local segments */
.break-net {
    /* Network breaks use a deep blue hue to correspond with the closure key */
    background-color: rgba(0, 112, 192, 0.15);
    border-left: 4px solid #0070c0;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 3px;
}

.break-local {
    /* Local break closures use a cyan tone based on the Penguins’ closure key */
    background-color: rgba(240, 56, 0, 0.15);
    border-left: 4px solid #00b0f0;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 3px;
}

/* End-of-broadcast break styling */
.break-end {
    /* End‑of‑broadcast closures use a magenta/purple colour */
    background-color: rgba(112, 48, 160, 0.15);
    border-left: 4px solid #7030a0;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 3px;
}

/* Local rejoin breaks (e.g. IH2BRJN1) use a red accent to differentiate them */
.break-rejoin {
    background-color: rgba(192, 0, 0, 0.15);
    border-left: 4px solid #c00000;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 3px;
}

/* :15 billboard closures (e.g. IH2BSOS1) use a teal/green accent */
.break-billboard {
    background-color: rgba(0, 176, 80, 0.15);
    border-left: 4px solid #00b050;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 3px;
}

/*
 * Override any inherited centering on schedule text.  Many global rules
 * centre text within cards for splash sections, but the schedule
 * information benefits from left alignment for readability.
 */
.download-content h4,
.download-content h5,
.download-content p,
.download-content li,
.broadcast-schedule h5,
.broadcast-schedule p,
.broadcast-schedule li {
    text-align: left;
}

/*
 * Indentation for nested collapsible segments
 * When a collapsible segment contains another collapsible segment as a child,
 * indent the child slightly and add a gold border to the left to visually
 * communicate the hierarchy.  This makes the broadcast clock tree easier
 * to scan and differentiates sub‑segments from their parent section.
 */
.collapsible-segment .collapsible-segment {
    margin-left: 15px;
    border-left: 2px solid var(--penguins-gold);
    padding-left: 15px;
}

/*
 * Ensure paragraphs inside break details don’t pick up unintended
 * margins from other components.  A consistent bottom margin helps
 * separate groups of text.
 */
.break-details p {
    margin-bottom: 6px;
}

/* Left-align various schedule headings for consistency */
.download-content h4,
.broadcast-schedule h5,
.segment-header {
    text-align: left;
}

/* Adjust heading spacing within broadcast schedules */
.broadcast-schedule > h5 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/*
 * Align text consistently within download cards
 *
 * Without explicit text alignment, some headings and paragraphs may
 * inherit center alignment from parent containers.  Force all
 * headings, paragraphs and list items within a download card’s
 * content area to be left-aligned for improved readability and
 * uniformity across sections.
 */
.download-content h4,
.download-content h5,
.download-content p,
.download-content li {
    text-align: left;
}

/* =====================================================================
   Custom interactive coverage map without external libraries
   ---------------------------------------------------------------------
   We overlay clickable markers on top of a static coverage image.
   Each marker uses a CSS class to set its absolute position as a percentage
   of the map wrapper.  This avoids inline styles and maintains a strict
   Content‑Security‑Policy.  A tooltip appears when the user clicks a
   marker, displaying the affiliate’s city, call letters and frequencies.
   See map-overlay.js for the JavaScript logic.
 */

/* Container for all marker elements.  It fills the map wrapper and
   allows the markers to be positioned absolutely.  We set
   pointer-events: none on the container so only the markers and
   tooltips receive click events. */
#markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    pointer-events: none;
}

/* Style for individual map markers (affiliates).  They are simple
   gold circles with a black border.  The transform centers the marker
   at its coordinate.  We enable pointer events on markers so they can
   receive click events.  Each marker will contain its own tooltip element. */
.map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--penguins-gold);
    border: 2px solid #000;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: all;
}

/* Tooltip displayed within a marker when it is active.  Hidden by default. */
.map-marker .tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translate(-50%, -100%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    max-width: 200px;
    white-space: normal;
    z-index: 5;
    pointer-events: all;
}

/* Show the tooltip when the marker has an active class */
.map-marker.active .tooltip {
    display: block;
}

/* Precomputed positions for each affiliate marker.  These classes
   provide percentage-based positioning relative to the bounding box
   encompassing all stations.  See map-overlay.js for details. */
.station-marker-0 { left: 81.31%; top: 56.55%; }
.station-marker-1 { left: 17.33%; top: 54.15%; }
.station-marker-2 { left: 40.36%; top: 54.33%; }
.station-marker-3 { left: 14.03%; top: 48.41%; }
.station-marker-4 { left: 14.03%; top: 48.41%; }
.station-marker-5 { left: 28.87%; top: 44.51%; }
.station-marker-6 { left: 68.45%; top: 86.93%; }
.station-marker-7 { left: 68.58%; top: 35.45%; }
.station-marker-8 { left: 22.22%; top: 0.00%; }
.station-marker-9 { left: 20.20%; top: 92.82%; }
.station-marker-10 { left: 20.20%; top: 92.82%; }
.station-marker-11 { left: 62.66%; top: 86.79%; }
.station-marker-12 { left: 41.35%; top: 64.16%; }
.station-marker-13 { left: 54.82%; top: 52.93%; }
.station-marker-14 { left: 62.88%; top: 63.28%; }
.station-marker-15 { left: 41.92%; top: 46.09%; }
.station-marker-16 { left: 13.21%; top: 91.22%; }
.station-marker-17 { left: 26.74%; top: 87.75%; }
.station-marker-18 { left: 13.06%; top: 39.72%; }
.station-marker-19 { left: 13.15%; top: 100.00%; }
.station-marker-20 { left: 25.34%; top: 59.28%; }
.station-marker-21 { left: 25.34%; top: 59.28%; }
.station-marker-22 { left: 93.12%; top: 46.69%; }
.station-marker-23 { left: 5.68%; top: 99.78%; }
.station-marker-24 { left: 100.00%; top: 46.89%; }
.station-marker-25 { left: 34.85%; top: 78.41%; }
.station-marker-26 { left: 34.25%; top: 25.70%; }
.station-marker-27 { left: 54.75%; top: 10.09%; }
.station-marker-28 { left: 0.00%; top: 72.53%; }
.station-marker-29 { left: 2.50%; top: 36.14%; }

/* Center live stream and recap containers on small screens */
@media (max-width: 768px) {
    .live-stream-container,
    .recap-container {
        margin-left: auto;
        margin-right: auto;
    }
}


.upload-progress {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FCB514, #e6a413);
    width: 0%;
    animation: progress-animation 2s ease-in-out infinite;
}

@keyframes progress-animation {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.progress-text {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    display: block;
}

.upload-result {
    padding: 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-result.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.upload-result.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.result-icon {
    font-size: 1.5rem;
    font-weight: bold;
}

.result-icon.success {
    color: #28a745;
}

.result-icon.error {
    color: #dc3545;
}

.result-content {
    flex: 1;
}

.result-message {
    font-weight: 600;
    margin-bottom: 5px;
}

.result-details {
    font-size: 0.9rem;
    opacity: 0.8;
}

.upload-btn {
    background: #FCB514;
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}

.upload-btn:hover:not(:disabled) {
    background: #e6a413;
    transform: translateY(-1px);
}

.upload-btn:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
}

.button-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments for upload components */
@media (max-width: 768px) {
    .upload-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .file-input-label {
        padding: 30px 15px;
        min-height: 100px;
    }
    
    .file-input-label i {
        font-size: 1.5rem;
    }
}
/* --- FORCE TWO-COLUMN LAYOUT FOR THE TWO CARDS --- */
.downloads-grid{
    display: grid;
    grid-template-columns: 1fr 1fr; /* exactly two columns on desktop */
    gap: 30px;
  }
  @media (max-width: 900px){
    .downloads-grid{ grid-template-columns: 1fr; }
  }
  /* Satellite remains outside .downloads-grid, so it stays full-width. */
  
  /* --- READABILITY: BREAKS RENDER AS "TITLE + BULLETS" --- */
  .break-details{ background: rgba(0,0,0,.2); border-radius: 8px; padding: 14px;
    margin: 14px 0; border-left: 4px solid var(--penguins-gold); }
  .break-title{ color:#fff; font-weight:700; margin:0 0 6px 0; }
  .break-details ul{ margin: 8px 0 0 18px; }
  .break-details li + li{ margin-top: 6px; }
  
  /* --- HIGHLIGHT ONLY THE SILENCE (PILLS), NOT THE WHOLE ROW --- */
  .break-net, .break-local, .break-billboard, .break-rejoin, .break-end{
    background: none !important; border-left: none !important; padding: 0; margin: 0;
  }
  
  /* Silence pills (colors align to legend) */
  .silence{ display:inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; line-height: 1.2; }
  .silence-rejoin{    background: rgba(192,0,0,.18);   border:1px solid #c00000; color:#ffdede; } /* :05 Local Rejoin */
  .silence-billboard{ background: rgba(0,176,80,.18);  border:1px solid #00b050; color:#eaffea; } /* :15 Billboard Closure */
  .silence-end{       background: rgba(112,48,160,.18);border:1px solid #7030a0; color:#f3e6ff; } /* End of Broadcast */
  
  /* (Optional) keep these for future if you need them */
  .silence-net{    background: rgba(0,112,192,.18); border:1px solid #0070c0; color:#dfefff; }
  .silence-local{  background: rgba(0,176,240,.18); border:1px solid #00b0f0; color:#e7faff; }
  
  /* Legend boxes already exist; only the labels change in HTML to match client phrasing */
  
  /* Break title text colors to match legend */
  .break-title-net {
      color: #0070c0 !important; /* Network break blue */
  }
  
  .break-title-local {
      color: #00b0f0 !important; /* Local break blue */
  }