/* Modern CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;
    --theme-primary: #663399;
    --theme-secondary: #00cccc;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    
    /* Dynamic theme color calculation for dark mode */
    --theme-primary-hsl: 270 50% 30%; /* Default fallback */
    --theme-secondary-hsl: 180 100% 40%; /* Default fallback */
    
    /* Current theme colors - will use original values in light mode */
    --current-theme-primary: var(--theme-primary);
    --current-theme-secondary: var(--theme-secondary);
}

/* Dark mode detection and automatic color adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        /* Automatically brighten theme colors for dark mode by increasing lightness */
        --current-theme-primary: hsl(from var(--theme-primary) h calc(s + 20) calc(l + 40));
        --current-theme-secondary: hsl(from var(--theme-secondary) h calc(s + 10) calc(l + 30));
        
        /* Update base colors for dark mode */
        --text-dark: #f9fafb;
        --text-light: #d1d5db;
        --bg-light: #1f2937;
        --bg-white: #111827;
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    }
    
    body {
        background-color: #0f172a;
        color: var(--text-dark);
    }
    
    /* Adjust borders for dark mode - use a more neutral approach */
    .episode-container,
    .General,
    .grabs {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Fallback for browsers that don't support CSS color functions with 'from' keyword */
@supports not (color: hsl(from white h s l)) {
    @media (prefers-color-scheme: dark) {
        :root {
            /* Fallback: Use filter to brighten colors for older browsers */
		    --current-theme-primary: var(--theme-primary);
		    --current-theme-secondary: var(--theme-secondary);
             */
            --current-theme-primary: #ffffff;  /* use white */
            --current-theme-secondary: #ffffff;  /* use white */
        }
        
        /* Apply brightness filter to elements using theme colors */
        .heading h1,
        .grabs h2,
        .heading hr,
        .General h2::after,
        .General hr,
        .grabs hr,
        .grabs h3::after,
        .summary-section h3::after,
        .credit-section,
        .detail-card,
        blockquote {
            filter: brightness(1.8) saturate(1.2);
        }
    }
}

/* Manual dark mode class override (for sites with toggle buttons) */
.dark-mode {
    --current-theme-primary: hsl(from var(--theme-primary) h calc(s + 20) calc(l + 40));
    --current-theme-secondary: hsl(from var(--theme-secondary) h calc(s + 10) calc(l + 30));
    --text-dark: #f9fafb;
    --text-light: #d1d5db;
    --bg-light: #1f2937;
    --bg-white: #111827;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

.dark-mode body {
    background-color: #0f172a;
    color: var(--text-dark);
}

.dark-mode .episode-container,
.dark-mode .General,
.dark-mode .grabs {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fallback for manual dark mode */
@supports not (color: hsl(from white h s l)) {
    .dark-mode {
        --current-theme-primary: var(--theme-primary);
        --current-theme-secondary: var(--theme-secondary);
    }
    
    .dark-mode .heading h1,
    .dark-mode .grabs h2,
    .dark-mode .heading hr,
    .dark-mode .General h2::after,
    .dark-mode .General hr,
    .dark-mode .grabs hr,
    .dark-mode .grabs h3::after,
    .dark-mode .summary-section h3::after,
    .dark-mode .credit-section,
    .dark-mode .detail-card,
    .dark-mode blockquote {
        filter: brightness(1.8) saturate(1.2);
    }
}

body{background-color:#fff;font-family:Inter,Nunito,sans-serif;line-height:1.6;color:var(--text-dark);transition:background-color .3s ease,color .3s ease}
div.left{float:left}
div.right{float:right}

/* Modern Content Styling */
.gridparent{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr;gap:2rem}
.heading{text-align:center;opacity:0;animation:fadeInUp .6s ease-out forwards}
.heading h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;background:linear-gradient(135deg,var(--current-theme-primary),var(--current-theme-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;color:var(--current-theme-primary)}

/* Ensure gradient text is visible in all browsers */
@supports not (background-clip: text) or not (-webkit-background-clip: text) {
    .heading h1 {
        color: var(--current-theme-primary);
        background: none;
        -webkit-text-fill-color: unset;
    }
}

.heading hr{width:80px;height:4px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border:none;border-radius:2px;margin:1.5rem auto}
.heading h2{font-size:1.25rem;color:var(--text-light);font-weight:500}

/* Episode Details Section */
.episode-container{display:grid;grid-template-columns:300px 1fr;gap:2rem;background:var(--bg-white);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow-lg);border:1px solid rgba(102,51,153,.1);opacity:0;animation:fadeInUp .8s ease-out .2s forwards;transition:all .3s ease}
.Cover{position:relative;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);transition:all .3s ease}
.Cover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.Cover img{width:100%;height:auto;display:block;border-radius:var(--border-radius)}
.specific{display:flex;flex-direction:column;gap:1.5rem}
.episode-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.detail-card{background:var(--bg-light);padding:1rem;border-radius:8px;border-left:4px solid var(--current-theme-secondary);transition:all .3s ease}
.detail-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.detail-label{font-weight:600;font-size:.875rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}
.detail-value{font-weight:500;font-size:1rem;color:var(--text-dark)}
.summary-section{margin-top:1.5rem}
.summary-section h3{font-size:1.2rem;font-weight:600;color:var(--text-dark);margin-bottom:1rem;position:relative;padding-bottom:.5rem}
.summary-section h3::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border-radius:2px}
blockquote{background:var(--bg-light);padding:1.5rem;border-radius:8px;border-left:4px solid var(--current-theme-primary);font-size:1.1rem;line-height:1.7;font-style:italic;margin:0}

/* Series Information Section */
.General{background:var(--bg-white);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow-lg);border:1px solid rgba(102,51,153,.1);opacity:0;animation:fadeInUp .8s ease-out .4s forwards;display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:start}
.General h2{grid-column:1 / -1;font-size:1.5rem;font-weight:600;color:var(--text-dark);margin-bottom:1rem;position:relative;padding-bottom:.5rem}
.General h2::after{content:'';position:absolute;bottom:0;left:0;width:80px;height:4px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border-radius:2px}
.General hr{grid-column:1 / -1;width:100%;height:2px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border:none;border-radius:1px;margin-bottom:2rem}
.serieslogo-noclick{width:200px;height:auto;border-radius:8px;box-shadow:var(--shadow)}
.General p{font-size:1.1rem;line-height:1.7;color:var(--text-dark)}
.nopicture { width: 100%; max-width: 100%; display: block; float: none; margin: 0 auto; padding: 1rem; box-sizing: border-box; }

/* Media Gallery Section */
.grabs{background:var(--bg-white);border-radius:var(--border-radius);padding:2.5rem;box-shadow:var(--shadow-lg);border:1px solid rgba(102,51,153,.1);opacity:0;animation:fadeInUp .8s ease-out .6s forwards}
.grabs h2{text-align:center;font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,var(--current-theme-primary),var(--current-theme-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;color:var(--current-theme-primary)}

/* Ensure gradient text is visible in all browsers */
@supports not (background-clip: text) or not (-webkit-background-clip: text) {
    .grabs h2 {
        color: var(--current-theme-primary);
        background: none;
        -webkit-text-fill-color: unset;
    }
}

.grabs hr{width:100px;height:4px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border:none;border-radius:2px;margin:1.5rem auto 2rem}
.grabs h3{font-size:1.3rem;font-weight:600;color:var(--text-dark);margin:2rem 0 1rem;position:relative;padding-bottom:.5rem}
.grabs h3::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--current-theme-primary),var(--current-theme-secondary));border-radius:2px}

/* Links Section */
.image-gallery-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;list-style:none;margin-bottom:2rem}
.image-gallery-links li{background:var(--bg-light);border-radius:var(--border-radius);padding:1.5rem;text-align:center;transition:all .3s ease;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
.image-gallery-links li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--current-theme-secondary)}
.image-gallery-links li img{width:80px;height:80px;border-radius:8px;margin-bottom:1rem;transition:all .3s ease;display:block}
.image-gallery-links li:hover img{transform:scale(1.1)}
.image-gallery-links li span{font-weight:500;color:var(--text-dark);font-size:1rem;text-align:center;width:100%;display:block}
.image-gallery-links li a{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}

/* Episode Screenshots Gallery */
.image-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,200px));gap:1.5rem;list-style:none}
.image-gallery li{position:relative;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);transition:all .3s ease;background:var(--bg-light)}
.image-gallery li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.image-gallery li img{width:100%;height:auto;display:block;transition:all .3s ease}
.image-gallery li:hover img{transform:scale(1.05)}
.image-gallery li span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;padding:.75rem;font-weight:500;font-size:.875rem}

/* Writing Credit Section */
.credit-section{background:linear-gradient(135deg,var(--current-theme-primary),var(--current-theme-secondary));color:#fff;padding:2rem;border-radius:var(--border-radius);text-align:center;box-shadow:var(--shadow-lg);margin-top:2rem;opacity:0;animation:fadeInUp .8s ease-out .8s forwards}
.credit-section p{font-size:1.1rem;font-weight:500;line-height:1.6}

/* Animations */
@keyframes fadeInUp {
    from {
	opacity: 0;
	transform: translateY(30px);
    }
    to {
	opacity: 1;
	transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .episode-container {
	grid-template-columns: 1fr;
	gap: 1.5rem;
    }

    .Cover {
	max-width: 400px;
	justify-self: center;
    }

    .General {
	grid-template-columns: 1fr;
	gap: 1.5rem;
    }

    .serieslogo-noclick {
	max-width: 150px;
	justify-self: center;
    }
}

@media (max-width: 768px) {
    .gridparent {
	padding: 1rem;
    }

    .episode-details-grid {
	grid-template-columns: 1fr;
    }

    .episode-container,
    .General,
    .grabs {
	padding: 1.5rem;
    }

    .image-gallery {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
    }

    .image-gallery-links {
	grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .gridparent {
	padding: 0.75rem;
    }

    .episode-container,
    .General,
    .grabs {
	padding: 1.25rem;
    }

    .image-gallery {
	grid-template-columns: 1fr;
    }
}


/* Add this to your existing CSS - responsive sizing for General section image */

/* For tablets and smaller screens where General becomes single column */
@media (max-width: 1024px) {
    .serieslogo-noclick {
        max-width: 300px; /* Increase from 200px */
        width: 100%;
        justify-self: center;
    }
}

/* For mobile screens - make it even more prominent */
@media (max-width: 768px) {
    .serieslogo-noclick {
        max-width: 250px; /* Slightly smaller for mobile but still bigger than original */
        width: 90%; /* Use percentage for better responsive behavior */
        justify-self: center;
    }
}

/* Utility Classes */
.clear { clear: both; }
.centered { text-align: center; }
.nobottommargin { margin-bottom: 0; }
.magnifycursor {cursor:url("http://www.writtenbyjoelle.com/stills/icons/cursor-magnification.png"), pointer}
.webcursor {cursor:url("http://www.writtenbyjoelle.com/stills/icons/cursor-to-web.png"), pointer}
.moviecursor {cursor:url("http://www.writtenbyjoelle.com/stills/icons/cursor-movie.png"), pointer}
.imdbcursor {cursor:url("http://www.writtenbyjoelle.com/stills/icons/cursor-toimdb.png"), pointer}
.pdfwindowcursor {cursor:url("http://www.writtenbyjoelle.com/stills/icons/cursor-pdf.png"), pointer}

/* Print Styles */
@media print {
    div.navbar { display: none; }
    body { padding-top: 0; }
    .gridparent {
	background: white;
	box-shadow: none;
    }
}