/*
 Theme Name:   TodoCIA Theme (ES)
 Theme URI:    http://example.com/todocia-theme
 Description:  GeneratePress Child Theme for TodoCIA (Nintendo 3DS Library Style)
 Author:       Your Name
 Author URI:    http://example.com
 Template:     generatepress
 Version:      1.0.4
 Text Domain:  todocia-theme
*/

/* === BASE STYLES === */
html,
body {
    background-color: #F0F0F0 !important;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-attachment: fixed !important;
    color: #4B4B4B !important;
}

.nintendo-nav-link {
    position: relative;
}

.nintendo-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #E60012;
    transition: all 0.2s ease;
    transform: translateX(-50%);
}

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

.nintendo-button {
    transition: transform 0.1s ease, filter 0.2s ease;
}

.nintendo-button:active {
    transform: scale(0.96);
}

.grid-item-card {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.grid-item-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.game-icon-square {
    aspect-ratio: 1/1;
    border: 4px solid white;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
}

/* === MOBILE DRAWER === */
#mobile-drawer {
    will-change: transform;
}

.nintendo-nav-link-mobile {
    position: relative;
    padding-left: 1rem;
}

.nintendo-nav-link-mobile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 100%;
    background-color: #E60012;
    transition: width 0.2s ease;
    border-radius: 0 4px 4px 0;
}

.nintendo-nav-link-mobile:hover::before,
.nintendo-nav-link-mobile.text-nintendo-red::before {
    width: 4px;
}

/* === GENERATEPRESS OVERRIDES === */

/* Carousel mobile scrollbar hide */
.overflow-x-auto::-webkit-scrollbar {
    display: none;
}
.overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Header/Navbar - White with red border */
header,
.site-header,
#masthead,
.main-header,
.inside-header,
.masthead,
.primary-header,
.header-wrap,
.inside-header.grid-container,
.site-header-inner,
.inside-navigation {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 4px solid #E60012 !important;
    box-shadow: none !important;
}

header a,
.site-header a,
.main-navigation a,
.nav-menu a,
.menu-item a {
    color: #4B4B4B !important;
}

header a:hover,
.main-navigation a:hover {
    color: #E60012 !important;
}

/* Footer - Transparent */
footer,
.site-footer,
#colophon,
.footer-widgets,
.footer-container,
.footer-bar,
.footer-wrap,
.inside-site-footer,
.footer-main,
.site-footer-inner {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
}

footer::before,
footer::after,
.site-footer::before,
.site-footer::after {
    display: none !important;
}

/* Main content area - Transparent */
main,
.site-content,
.content-area,
#main,
.inside-container,
.one-container,
.container,
.inside-container {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Cards and content elements - White background */
.card,
.bg-white,
.inside-article,
.post,
article,
.page-content,
.entry-content,
.content-box,
.grid-item-card,
#heroSliderCard,
.bg-white.rounded-3ds-lg {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* Single post/article pages - No white background */
.single-post article,
.single article,
.article-content {
    background-color: transparent !important;
}

/* CSS Variables */
:root {
    --base-2: #F0F0F0 !important;
    --base-3: #FFFFFF !important;
    --contrast: #4B4B4B !important;
    --accent: #E60012 !important;
    --global-color-8: #E60012 !important;
}

/* === SLIDER STYLES === */
#featuredSlider {
    display: flex !important;
    width: 100% !important;
}

#featuredSlider .slide-item {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    #featuredSlider .slide-item {
        flex-direction: column !important;
    }
    
    #featuredSlider .slide-item > div:first-child {
        width: 100% !important;
        height: 250px !important;
        max-width: none !important;
    }
    
    #featuredSlider .slide-item > div:last-child {
        width: 100% !important;
        padding: 1.5rem !important;
    }
    
    #heroSliderCard {
        border-radius: 24px !important;
    }
}

/* === CAROUSEL STYLES === */
#cia-carousel,
#blog-carousel {
    display: flex !important;
    gap: 1rem !important;
}

@media (max-width: 767px) {
    #cia-carousel,
    #blog-carousel {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #cia-carousel > *,
    #blog-carousel > * {
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }
}

/* === NEWS SLIDER (Homepage) === */
#noticiasHeroSlider {
    display: flex !important;
    width: 100% !important;
}

#noticiasHeroSlider .slide-item {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    #noticiasHeroSlider .slide-item {
        flex-direction: column !important;
    }
    
    #noticiasHeroSlider .slide-item > div:first-child {
        width: 100% !important;
        height: 250px !important;
    }
    
    #noticiasHeroSlider .slide-item > div:last-child {
        width: 100% !important;
        padding: 1.5rem !important;
    }
}

/* === DROPDOWN STYLES === */
#abcDropdown,
#catDropdown,
#consolaDropdown,
#generoDropdown,
#sagaDropdown {
    position: relative;
    display: inline-block;
}

#abcMenu,
#catMenu,
#consolaMenu,
#generoMenu,
#sagaMenu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;
    background-color: #FFFFFF !important;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 0.5rem;
    z-index: 30;
    max-height: 18rem;
    overflow-y: auto;
    min-width: 11rem;
}

#abcMenu a,
#catMenu a,
#consolaMenu a,
#generoMenu a,
#sagaMenu a {
    display: block;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    color: #475569;
}

#abcMenu a:hover,
#catMenu a:hover,
#consolaMenu a:hover,
#generoMenu a:hover,
#sagaMenu a:hover {
    background-color: #fef2f2;
    color: #E60012;
}

#abcMenu a.bg-nintendo-red,
#catMenu a.bg-nintendo-red {
    background-color: #E60012 !important;
    color: #FFFFFF !important;
}

#abcMenu.hidden,
#catMenu.hidden,
#consolaMenu.hidden,
#generoMenu.hidden,
#sagaMenu.hidden {
    display: none !important;
}