/*
Theme Name: Video X Tube
Theme URI: https://vidxtube.com
Author: VidxTube
Author URI: https://vidxtube.com
Description: Publish embedded and self-hosted clips using the original Video x Tube Theme. The fully responsive and adaptive Video x tube Theme is the perfect choice for your WordPress based video site. The theme offers an intelligent way to display a large number of videos that will immediately attract your visitors’ attention right on the front page. The optional featureds lets you highlight your best content, while the carefully placed widgetized areas are perfect for displaying revenue generating advertising. Using the right plugin, thumbnails from embedded videos.
Version: 1.0.5
License: GNU General Public License v2 or later,  MIT License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, flexible-header, custom-colors, custom-menu, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog
Text Domain: video-x-tube
*/

:root {
    --accent-color: #ff9900;
    --accent-hover: #999090;
}

/* Base theme */
body {
    background-color: #121212;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
    
}

/* Grid container for videos */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Each video item/card */
.video-item {
    background: #1e1e1e;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.video-item:hover {
    box-shadow: 0 6px 12px rgba(255, 153, 0, 0.7);
}

/* Video thumbnail */
.video-item img,png,jpeg,
.video-item video {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
}

/* Title */
.video-item h2 {
    font-size: 18px;
    margin: 12px 0 0;
    color: var(--accent-color);
    line-height: 1.2;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video player on single pages */
.video-player,
.single-post video,mp4,
.single-post iframe {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

/* Sidebar */
aside {
    background-color: none;
    margin-top: 20%;
    padding: 16px;
    color: #ccc;
}

/* Base pagination styles */
.pagination-container .page-numbers {
    display: inline-block;
    margin-right: 4px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
    border-radius: 0.375rem; /* Tailwind's rounded-lg */
    color: #4b5563; /* Tailwind's text-gray-700 */
    text-decoration: none;
}

/* Hover effect for page numbers */
.pagination-container .page-numbers:hover {
    background-color: #1f2937; /* Tailwind's bg-gray-800 */
    color: #ffffff; /* White text */
}

.pagination-container .prev:hover, .pagination-container .next:hover {
    background-color: #1f2937; /* Tailwind's bg-gray-800 */
    color: #ffffff; /* White text */
}

/* Optional: style the entire pagination as a flexbox container */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.responsive-ad {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.responsive-ad img,
.responsive-ad iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.content a,
.content strong,
.content em,
.content h1,
.content h2,
.content h3,
.content p {
  color: var(--accent-color);
}

/* Menu links base color */
nav a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

/* Hover/focus state */
nav a:hover,
nav a:focus {
  color: #999090; /* e.g. a brighter or customize */
}

/*cookie consent*/

/* Style the checkbox and label */
.comment-form-cookies-consent label {
    font-size: 1rem;
    color: var(--accent-color); /* Apply accent color to the label */
    font-weight: 500;
}

/* Style the checkbox itself */
.comment-form-cookies-consent input[type="checkbox"] {
    accent-color: var(--accent-color); /* Modern way to set checkbox color */
}

/* Hover state for the checkbox label */
.comment-form-cookies-consent label:hover {
    color: var(--accent-hover); /* Accent hover color for the label */
}

/* Add a little spacing between the label and the checkbox */
.comment-form-cookies-consent {
    margin-bottom: 1rem;
}

/* ==============================================
   DROPDOWN MENU STYLES FOR WORDPRESS NAVIGATION
   ============================================== */

/* Parent menu item positioning */
.menu-item-has-children {
    position: relative;
}

/* Dropdown arrow indicator (optional) */
.menu-item-has-children > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Sub-menu (dropdown) styling */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #374151, #1f2937); /* Gray gradient */
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid #4b5563;
    overflow: hidden;
}

/* Show dropdown on hover */
.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-menu list items */
.sub-menu li {
    display: block;
    width: 100%;
}

/* Sub-menu links */
.sub-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

/* Remove border from last item */
.sub-menu li:last-child a {
    border-bottom: none;
}

/* Sub-menu link hover effect */
.sub-menu a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #ffffff;
    padding-left: 20px;
}

/* Third-level menus (sub-sub-menus) */
.sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    margin-left: -1px;
}

/* ==============================================
   MOBILE RESPONSIVE STYLES
   ============================================== */

@media (max-width: 767px) {
    /* Reset positioning for mobile */
    .menu-item-has-children {
        position: static;
    }
    
    /* Stack sub-menus vertically on mobile */
    .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: #4b5563 !important;
        margin-left: 16px;
        margin-top: 4px;
        margin-bottom: 4px;
        min-width: auto;
        width: auto;
        display: none; /* Hidden by default on mobile */
        transition: none;
    }
    
    /* Show sub-menu when parent is clicked */
    .menu-item-has-children.active .sub-menu {
        display: block !important;
    }
    
    /* Reset hover effects on mobile */
    .menu-item-has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    /* Remove dropdown arrow transform on mobile */
    .menu-item-has-children > a::after {
        transform: none !important;
    }
    
    .menu-item-has-children.active > a::after {
        transform: rotate(180deg) !important;
    }
    
    /* Sub-menu styling for mobile */
    .sub-menu li {
        width: 100%;
        display: block;
    }
    
    /* Sub-menu links on mobile */
    .sub-menu a {
        padding: 10px 16px !important;
        border-bottom: 1px solid rgba(75, 85, 99, 0.5);
        display: block;
        color: #d1d5db;
    }
    
    .sub-menu a:hover {
        padding-left: 20px !important;
        background: rgba(107, 114, 128, 0.3);
    }
    
    /* Last item border */
    .sub-menu li:last-child a {
        border-bottom: none;
    }
}