/*
Theme Name: GeneratePress Child Video
Theme URI: https://girlsnumbers.shop
Description: Premium video platform child theme for GeneratePress.
Author: Antigravity AI
Template: generatepress
Version: 1.2.0
*/

/* Import parent theme styles */
@import url("../generatepress/style.css");

/* ==========================================================================
   GIRLSNUMBERS.SHOP - COMPLETE VIDEO PLATFORM VISUAL ENGINE
   ========================================================================== */

/* 1. Global Dark Video Theme */
body {
    background-color: #080b11 !important;
    background-image: radial-gradient(circle at 50% -20%, #1e293b 0%, #080b11 80%) !important;
    color: #94a3b8 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Remove default white background from layouts */
#page, .separate-containers .inside-article, .site-main {
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. Sleek Dark Header & Navigation */
.site-header, .main-navigation, .inside-navigation {
    background-color: #0c101d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navigation-branding .main-title a, .site-branding .main-title a {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.main-navigation a {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: color 0.25s ease !important;
}

.main-navigation a:hover {
    color: #f43f5e !important;
}

/* 3. Layout Control: Full Width Homepage (NO SIDEBAR) */
.blog #right-sidebar, 
.archive #right-sidebar {
    display: none !important;
}

.blog #primary, 
.archive #primary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Hide GeneratePress Footer Info/Copyright */
.site-info, 
footer.site-info {
    display: none !important;
}

/* 4. Single Post "Suggested Videos" Sidebar styling */
/* Hide default sidebar widgets on single post pages */
.single-post #right-sidebar .widget:not(.suggested-videos-widget) {
    display: none !important;
}

/* Hide Comment Box completely from posts */
#comments, 
.comments-area, 
#respond, 
.comment-respond {
    display: none !important;
}

.sidebar .widget.suggested-videos-widget {
    background-color: #0c101d !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 20px !important;
}

.suggested-videos-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.suggested-video-card a {
    text-decoration: none !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.suggested-video-thumbnail {
    width: 100px !important;
    aspect-ratio: 16/9 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #000 !important;
}

.suggested-video-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Mini play button overlay on suggested sidebar thumbnails */
.suggested-video-thumbnail::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='40,30 70,50 40,70' fill='white'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 10px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    pointer-events: none !important;
}

.suggested-video-card:hover .suggested-video-thumbnail::after {
    background-color: #f43f5e !important;
    border-color: #f43f5e !important;
}

.suggested-video-title {
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease !important;
}

.suggested-video-card:hover .suggested-video-title {
    color: #fda4af !important;
}

.widget-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-left: 3px solid #f43f5e !important;
    padding-left: 10px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Hide default search box border and make it dark */
.search-field {
    background-color: #161f30 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

/* 5. Hide Blog Metadata (Faltu details) */
.entry-meta, .entry-meta .byline, .entry-meta .posted-on, .author {
    display: none !important;
}

.entry-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

/* Hide blog post excerpts on homepage */
.blog .entry-summary, .archive .entry-summary,
.blog .entry-content, .archive .entry-content {
    display: none !important;
}

/* 6. Force 16:9 Ratio & Video Thumbnail Crop (CRITICAL FIX FOR IMAGE STRETCH) */
.wp-block-image,
.wp-block-image a,
.post-image,
.post-image a,
.featured-image,
.page-header-image-single {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important; /* Forces 16:9 ratio */
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Forces image to stretch and crop to fill the 16:9 container, eliminating black margins */
.wp-block-image img,
.post-image img,
.featured-image img,
.page-header-image-single img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important; /* Crops image to fill container */
    display: block !important;
    transition: transform 0.5s ease !important;
}

.wp-block-image:hover img,
.post-image:hover img,
.featured-image:hover img,
.page-header-image-single:hover img {
    transform: scale(1.05) !important;
}

/* 7. Centered Play Button Overlay (FIXED: NO BLACK BACKGROUND BOX, METALLIC WHITE GLASS STYLE) */
.wp-block-image::after,
.post-image a::after,
.post-image::after,
.featured-image::after,
.page-header-image-single::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 60px !important;
    height: 60px !important;
    /* Transparent box background, circle and triangle are drawn inside the SVG itself */
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(255, 255, 255, 0.25)' stroke='white' stroke-width='5'/%3E%3Cpolygon points='42,30 72,50 42,70' fill='white'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.wp-block-image:hover::after,
.post-image:hover a::after,
.post-image:hover::after,
.featured-image:hover::after,
.page-header-image-single:hover::after {
    transform: translate(-50%, -50%) scale(1.15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(244, 63, 94, 0.95)' stroke='white' stroke-width='5'/%3E%3Cpolygon points='42,30 72,50 42,70' fill='white'/%3E%3C/svg%3E") !important;
}

/* Hide legacy plugin elements to prevent conflicts and black squares */
.fvol-play-button, 
.fvol-overlay,
.fvol-video-card .fvol-overlay::after {
    display: none !important;
}

/* 8. Realistic Video Control Bar (Seekbar, Timer, Fullscreen, Volume) */
.wp-block-image::before,
.post-image a::before,
.post-image::before,
.featured-image::before,
.page-header-image-single::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 45'%3E%3Cpolygon points='20,15 20,30 32,22.5' fill='white'/%3E%3Cpath d='M45,18 L40,22 L36,22 L36,28 L40,28 L45,32 Z' fill='white'/%3E%3Cpath d='M48,19 Q50,22.5 48,26' stroke='white' stroke-width='2' fill='none'/%3E%3Ctext x='65' y='26' fill='%23ccc' font-family='sans-serif' font-size='12'%3E0:00 / 12:45%3C/text%3E%3Cline x1='160' y1='22.5' x2='720' y2='22.5' stroke='rgba(255,255,255,0.25)' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='160' y1='22.5' x2='380' y2='22.5' stroke='%23f43f5e' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='380' cy='22.5' r='5' fill='%23f43f5e'/%3E%3Cpath d='M755,16 L762,16 L762,23 M762,27 L762,34 L755,34 M749,34 L742,34 L742,27 M742,23 L742,16 L749,16' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 97% auto !important;
    z-index: 8 !important;
    pointer-events: none !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    opacity: 0.95 !important;
}

/* 9. GeneratePress Homepage Post Loop turned into a 4-Column Video Grid (FIXED: smaller thumbnails) */
.blog .site-main, .archive .site-main {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns grid loop makes cards smaller! */
    gap: 20px !important;
    margin: 25px 0 !important;
}

.blog article, .archive article {
    background-color: #0c101d !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.blog article:hover, .archive article:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(244, 63, 94, 0.5) !important;
    box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3) !important;
}

.blog .inside-article, .archive .inside-article {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide card text title spacing if title is empty/missing */
.blog .entry-header, .archive .entry-header {
    padding: 0 !important;
    margin: 0 !important;
}

.blog .entry-title, .archive .entry-title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: block !important;
}

.blog .entry-title a, .archive .entry-title a {
    color: #e2e8f0 !important;
    text-decoration: none !important;
    padding: 10px 14px 14px 14px !important;
    display: block !important;
}

/* Auto-hide title box completely on cards that have empty/missing titles */
.blog .entry-title a:empty, .archive .entry-title a:empty {
    display: none !important;
    padding: 0 !important;
}

.blog article:hover .entry-title a, .archive article:hover .entry-title a {
    color: #fda4af !important;
}

/* 10. WordPress Gallery Grid (Single Post Related Grid) */
.wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns on single posts too */
    gap: 20px !important;
    margin: 25px 0 !important;
}

/* Grid Responsiveness for Mobile & Tablet */
@media (max-width: 992px) {
    .blog .site-main, .archive .site-main,
    .wp-block-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .blog .site-main, .archive .site-main,
    .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .blog .site-main, .archive .site-main,
    .wp-block-gallery {
        grid-template-columns: 1fr !important;
    }
}

.wp-block-gallery .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
}

.wp-block-image figcaption {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    margin-top: 8px !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.wp-block-image:hover figcaption {
    color: #fda4af !important;
}