/* Shared CSS for all main-*.htm pages */

/* Import Google Fonts - moved to shared file */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@400;600;700&display=swap');

:root{--primary-color:#6366f1;--secondary-color:#8b5cf6;--accent-color:#06b6d4;--text-dark:#1f2937;--text-light:#6b7280;--text-muted:#9ca3af;--bg-light:#f8fafc;--bg-white:#fff;--shadow:0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1);--shadow-hover:0 10px 15px -3px rgba(0,0,0,.1);--border-radius:12px;--theme-gradient:linear-gradient(135deg,var(--theme-primary,var(--primary-color)),var(--theme-secondary,var(--secondary-color)))}

@media (prefers-color-scheme:dark){
	:root{--text-dark:#f9fafb;--text-light:#d1d5db;--text-muted:#9ca3af;--bg-light:#1f2937;--bg-white:#111827;--shadow:0 4px 6px -1px rgba(0,0,0,.3);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.4);--shadow-hover:0 10px 15px -3px rgba(0,0,0,.3)}
	body{background-color:#0f172a;color:var(--text-dark)}
}

*{margin:0;padding:0;box-sizing:border-box}
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}
.background{width:100%;height:100%;margin:0;padding:0;font-family:Inter,Nunito,sans-serif}
.parent{width:auto;margin:0 15px 20px 15px;padding-bottom:15px;background:var(--bg-white);transition:background-color .3s ease}
.joellehead{font-size:200%;text-align:center;text-decoration:none;margin:0;color:var(--text-dark);display:none}
.page-header{text-align:center;padding:1.5rem 2rem .25rem;background:var(--theme-gradient);color:#fff;margin:-15px -15px 2rem -15px}
.page-header h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.page-header p{font-size:1.25rem;opacity:.9;max-width:600px;margin:0 auto;font-weight:500}
.cardholder{display:grid;gap:2rem;padding:0 2rem 2rem;max-width:1800px;margin:0 auto;text-decoration:none}
.cardholder a{text-decoration:none;color:var(--primary-color)}
.cardholder a:link{text-decoration:none;color:var(--primary-color)}
.cardholder a:visited{text-decoration:none;color:var(--primary-color)}
.cardholder a:active{text-decoration:none;color:var(--primary-color)}
.cardholder a:hover{text-decoration:none;color:var(--primary-color)}
.card-top-bottom{background:var(--bg-white);border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;transition:all .3s ease;border:1px solid rgba(124,58,237,.1);display:flex;flex-direction:column;position:relative}
.card-top-bottom:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:var(--theme-secondary,var(--secondary-color))}
.card-top-bottom img{width:100%;height:200px;object-fit:cover;object-position:center;transition:transform .3s ease}
.card-top-bottom:hover img{transform:scale(1.05)}
.card-top-bottom-bottom{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.card-top-bottom-bottom>span:first-child{font-size:1.25rem;font-weight:700;color:var(--text-dark);margin-bottom:.75rem;line-height:1.3;display:block}
.card-left-right{background:var(--bg-white);border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;transition:all .3s ease;border:1px solid rgba(124,58,237,.1);height:auto;min-height:225px;display:flex;flex-direction:row;align-items:flex-start}
.card-left-right:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:var(--theme-secondary,var(--secondary-color))}
.card-left-right img{width:150px;height:225px;min-height:225px;max-height:225px;object-fit:cover;object-position:center top;transition:transform .3s ease;flex-shrink:0;margin:8px 0 8px 8px}
.card-left-right:hover img{transform:scale(1.02)}
.card-left-right-right{padding:1.5rem;flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.card-left-right-right>span:first-child{font-size:1.25rem;font-weight:700;color:var(--text-dark);margin-bottom:1rem;line-height:1.3;display:block}
.genre-badge,.publisher-badge,.platform-badge,.network-badge,.type-badge{display:inline-block;background:var(--theme-primary,var(--primary-color));color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem}
.card-top-bottom-bottom ul,.card-left-right-right ul{list-style:none;padding:0;margin:1rem 0 0 0;flex:1}
.card-top-bottom-bottom li,.card-left-right-right li{margin-bottom:.5rem;position:relative;padding-left:1rem;line-height:1.4}
.card-top-bottom-bottom li::before,.card-left-right-right li::before{content:'▶';position:absolute;left:0;color:var(--theme-primary,var(--primary-color));font-size:.75rem;top:.125rem}
.card-top-bottom-bottom a,.card-left-right-right a{color:var(--primary-color);text-decoration:none;font-weight:500;transition:all .2s ease;display:block;padding:.25rem 0;border-radius:4px;margin-left:-.5rem;padding-left:.5rem}
.card-top-bottom-bottom a:hover,.card-left-right-right a:hover{color:var(--theme-primary,var(--primary-color));background-color:var(--bg-light);transform:translateX(4px)}
.card-left-right-right p,.card-top-bottom-bottom p{margin:0;color:var(--text-light);font-size:.9rem}
.card-left-right-right p a,.card-top-bottom-bottom p a{color:var(--primary-color);font-weight:500;margin:0;padding:0;transform:none;background:0 0;text-decoration:none}
.card-left-right-right p a:hover,.card-top-bottom-bottom p a:hover{color:var(--theme-primary,var(--primary-color));background:0 0;transform:none}

@media (max-width:1200px){
	.cardholder{gap:1.5rem;padding:0 1.5rem 1.5rem}
	.page-header{padding:2rem 1rem 1.5rem}
}

@media (max-width:768px){
	.cardholder{gap:1rem;padding:0 1rem 1rem}
	.page-header{margin:-15px -15px 1rem -15px;padding:1.5rem 1rem}
	.card-left-right{flex-direction:column;min-height:auto}
	.card-left-right img{width:100%;height:200px;min-height:200px;max-height:200px;margin:4px}
	.card-left-right-right,.card-top-bottom-bottom{padding:1.25rem}
}

@media (max-width:480px){
	.parent{margin-left:0;margin-right:0}
	.page-header{margin:0 0 1rem 0}
	.card-top-bottom{height:auto;min-height:auto}
	.cardholder{padding:0 .75rem 1rem}
}

.card-top-bottom,.card-left-right{opacity:0;animation:fadeInUp .6s ease-out forwards}
.card-top-bottom:nth-child(1),.card-left-right:nth-child(1){animation-delay:.1s}
.card-top-bottom:nth-child(2),.card-left-right:nth-child(2){animation-delay:.2s}
.card-top-bottom:nth-child(3),.card-left-right:nth-child(3){animation-delay:.3s}
.card-top-bottom:nth-child(4),.card-left-right:nth-child(4){animation-delay:.4s}
.card-top-bottom:nth-child(5),.card-left-right:nth-child(5){animation-delay:.5s}
.card-top-bottom:nth-child(6),.card-left-right:nth-child(6){animation-delay:.6s}
.card-top-bottom:nth-child(7),.card-left-right:nth-child(7){animation-delay:.7s}
.card-top-bottom:nth-child(8),.card-left-right:nth-child(8){animation-delay:.8s}
.card-top-bottom:nth-child(9),.card-left-right:nth-child(9){animation-delay:.9s}
.card-top-bottom:nth-child(10),.card-left-right:nth-child(10){animation-delay:1s}
.card-top-bottom:nth-child(11),.card-left-right:nth-child(11){animation-delay:1.1s}
.card-top-bottom:nth-child(12),.card-left-right:nth-child(12){animation-delay:1.2s}
.card-top-bottom:nth-child(13),.card-left-right:nth-child(13){animation-delay:1.3s}
.card-top-bottom:nth-child(14),.card-left-right:nth-child(14){animation-delay:1.4s}
.card-top-bottom:nth-child(15),.card-left-right:nth-child(15){animation-delay:1.5s}
.card-top-bottom:nth-child(16),.card-left-right:nth-child(16){animation-delay:1.6s}

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

.clear{clear:both}
.animation-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.comics-grid{grid-template-columns:repeat(auto-fill,minmax(450px,1fr))}
.television-grid{grid-template-columns:repeat(auto-fill,minmax(450px,1fr))}
.webseries-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.videogames-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

@media (max-width:1200px){
	.comics-grid,.television-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
	.animation-grid,.webseries-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
	.videogames-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

@media (max-width:768px){
	.comics-grid,.television-grid,.animation-grid,.webseries-grid{grid-template-columns:1fr}
	.videogames-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

@media (max-width:480px){
	.videogames-grid{grid-template-columns:1fr}
}

/* Enhanced dark mode fixes for better text visibility */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override link colors for dark mode */
        --primary-color: #818cf8;
        --secondary-color: #a78bfa;
        --accent-color: #22d3ee;
    }
    
    /* Ensure all links are visible in dark mode */
    .cardholder a,
    .cardholder a:link,
    .cardholder a:visited,
    .cardholder a:active {
        color: var(--primary-color) !important;
    }
    
    .cardholder a:hover {
        color: var(--secondary-color) !important;
    }
    
    /* Fix card content links specifically */
    .card-top-bottom-bottom a,
    .card-left-right-right a {
        color: var(--primary-color) !important;
    }
    
    .card-top-bottom-bottom a:hover,
    .card-left-right-right a:hover {
        color: var(--secondary-color) !important;
        background-color: var(--bg-light);
    }
}