/*
Theme Name: VideoHost Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: A custom theme for showcasing videos with category navigation.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: video, custom-theme, grid-layout
Text Domain: videohost
*/

/* General Layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 0;
}

/* The updated rule with a wider layout */
.main-content {
    max-width: 1600px; /* Increased from 1200px */
    margin: 20px auto;
    padding: 20px;
    background: #181818;
    border-radius: 8px;
}

.page-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

/* --- New Header Styles --- */

/* General Header Styles */
.site-header-new {
    background-color: #121212;
    color: #fff;
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

/* Top Bar: Main Header */
.header-main {
    background-color: #212121;
    padding: 15px 0;
}
.header-main .header-container {
    justify-content: space-between;
}

/* Logo */
.site-branding a {
    text-decoration: none;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1px;
}
.site-branding .logo-accent {
    background-color: #e50914;
    padding: 4px 8px;
    border-radius: 5px;
    margin-right: 4px;
}

/* Search Bar */
.header-search {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 40px;
}
.header-search .search-form {
    position: relative;
    display: flex;
}
/* This styles the text input field */
.header-search .search-field {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #444;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    font-size: 16px;
}
/* This adds the red border when you click into the search box */
.header-search .search-field:focus {
    outline: none;
    border-color: #e50914;
}
/* This hides the "Search" button, as you can submit by pressing Enter */
.header-search .search-submit {
    display: none; 
}
/* This hides the "Search for:" label visually but keeps it for screen readers */
.header-search .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* User Actions */
.user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.user-actions a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.user-actions .register-button {
    background-color: #e50914;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.2s;
}
.user-actions .register-button:hover {
    background-color: #f40612;
}
.user-actions .user-icon .dashicons {
    font-size: 28px;
    height: 28px;
    width: 28px;
}

/* Bottom Bar: Navigation Menu */
.header-nav {
    background-color: #121212;
    border-bottom: 1px solid #333;
}
.header-nav .header-container {
    justify-content: center; /* Center the menu */
}
.primary-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 30px;
}
.primary-menu-list li a {
    display: block;
    padding: 15px 5px;
    text-decoration: none;
    color: #aaa;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.primary-menu-list li a:hover {
    color: #fff;
}
/* Style for the currently active menu item */
.primary-menu-list .current-menu-item a {
    color: #fff;
    border-bottom-color: #e50914;
}

/* Homepage Category Grid (front-page.php) */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}
.category-item {
    text-decoration: none;
    color: #fff;
    background: #3c434a;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    text-align: center;
    padding: 10px;
}
.category-item:hover {
    transform: scale(1.05);
    background: #0073aa;
}
.category-title {
    font-size: 1.2em;
    margin: 0 0 5px 0;
}
.category-count {
    font-size: 0.9em;
    margin: 0;
    opacity: 0.8;
}

/* Video Grid (archive-videos.php & taxonomy-video_category.php) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.video-item {
    text-decoration: none;
    color: #333;
    background: #f9f9f9;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}
.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}
.video-title {
    font-size: 1.1em;
    padding: 15px;
    margin: 0;
}

/* Single Video Page (single-videos.php) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
    background: #000;
    border-radius: 5px;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #666;
    font-size: 0.9em;
}

/* Pagination Styling */
.pagination {
    margin-top: 40px;
    text-align: center;
}
.nav-links {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.nav-links .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #0073aa;
    border-left: 1px solid #ddd;
}
.nav-links .page-numbers:first-child {
    border-left: 0;
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    background-color: #0073aa;
    color: #fff;
}
.nav-links .dots {
    padding: 10px 0;
}

/*
 * Grid for the 6x6 related videos section.
 * This is responsive: 2 columns on mobile, 3 on tablet, 6 on desktop.
*/
.related-videos .video-grid {
    display: grid;
    gap: 15px;
    /* Mobile First: 2 columns by default */
    grid-template-columns: repeat(2, 1fr);
}

/* Tablet: 3 columns */
@media (min-width: 768px) {
    .related-videos .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: 6 columns */
@media (min-width: 1024px) {
    .related-videos .video-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* --- Secondary Header Navigation Bar --- */

.header-secondary-nav {
    background-color: #212121;
    border-bottom: 1px solid #333;
}

.header-secondary-nav .header-container {
    justify-content: flex-start; /* Align menu to the left */
}

.secondary-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 25px;
}

.secondary-menu-list li {
    position: relative; /* Needed for dropdown positioning */
}

.secondary-menu-list li a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: #ccc;
    font-size: 15px;
    transition: color 0.2s;
}

.secondary-menu-list li a:hover {
    color: #fff;
}

/* Style for the dropdown arrow */
.secondary-menu-list .menu-item-has-children > a::after {
    content: '▾'; /* Downward pointing triangle */
    font-size: 10px;
    margin-left: 6px;
    display: inline-block;
}

/* Sub-menu / Dropdown styles */
.secondary-menu-list .sub-menu {
    display: none; /* Hide dropdown by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #212121;
    border: 1px solid #333;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    min-width: 200px;
    z-index: 1000;
    border-radius: 0 0 5px 5px;
}

/* Show dropdown on hover */
.secondary-menu-list li:hover > .sub-menu {
    display: block;
}

.secondary-menu-list .sub-menu li a {
    padding: 10px 15px;
    white-space: nowrap; /* Prevent links from wrapping */
}

.secondary-menu-list .sub-menu li a:hover {
    background-color: #e50914;
    color: #fff;
}

/* --- New Improved Footer Styles --- */

.site-footer-new {
    background-color: #121212;
    color: #aaa;
    padding: 60px 0 0;
    font-size: 15px;
}

.footer-widgets-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    /* Creates a responsive 4-column grid that wraps on smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

/* Widget Titles (e.g., "Categories", "Navigation") */
.footer-widget-column .widget-title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Widget Content Styling (lists, links) */
.footer-widget-column,
.footer-widget-column a {
    color: #aaa;
    text-decoration: none;
}
.footer-widget-column a:hover {
    color: #e50914; /* Red accent on hover */
    text-decoration: underline;
}
.footer-widget-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-widget-column ul li {
    margin-bottom: 12px;
}

/* Copyright Bar */
.footer-bottom-bar {
    background-color: #000;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}


/* --- Homepage Video Grid Styles --- */

/* Make the main content area dark ONLY on the homepage */
body.home .main-content {
    background: #181818; /* Dark background like the screenshot */
    border: none;
    box-shadow: none;
}

.homepage-video-grid {
    display: grid;
    /* This creates a responsive grid that aims for 6 columns */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.video-grid-item {
    text-decoration: none;
}

.video-thumbnail-container {
    position: relative;
    background-color: #000;
    border-radius: 5px;
    overflow: hidden;
    /* This forces a 16:9 aspect ratio for all thumbnails */
    padding-bottom: 56.25%; 
    height: 0;
    margin-bottom: 8px;
    transition: transform 0.2s ease-in-out;
}
.video-grid-item:hover .video-thumbnail-container {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.video-thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.video-thumbnail-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    padding: 5px;
    text-align: center;
}

.video-grid-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    padding: 0 5px;
}

.video-grid-item:hover .video-grid-title {
    color: #e50914; /* Red accent on hover */
}

/* --- Black Background Override --- */

/* Set the base background for the entire page to black */
body {
    background-color: #000;
}

/* Set the main content area background to black */
.main-content {
    background-color: #000;
}

/* Update header and footer sections to pure black */
.site-header-new,
.header-main,
.header-nav,
.header-secondary-nav,
.site-footer-new {
    background-color: #000;
}

/* Make the search input consistent with the black theme */
.header-search .search-field {
    background-color: #222; /* A very dark grey is better for input fields */
}

/* --- Black Background Override --- */

/* Set the base background for the entire page to black */
body {
    background-color: #000;
}

/* Set the main content area background to black */
.main-content {
    background-color: #000;
}

/* Update header and footer sections to pure black */
.site-header-new,
.header-main,
.header-nav,
.header-secondary-nav,
.site-footer-new {
    background-color: #000;
}

/* Make the search input consistent with the black theme */
.header-search .search-field {
    background-color: #222; /* A very dark grey is better for input fields */
}

/* --- Homepage Video Grid Styles --- */

/* --- Homepage Video Grid Styles (Updated for 6-column layout) --- */

/* This is the default for mobile (2 columns) */
.homepage-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* For tablets and small desktops (4 columns) */
@media (min-width: 768px) {
    .homepage-video-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* For large desktops (6 columns) */
@media (min-width: 1200px) {
    .homepage-video-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.video-grid-item {
    text-decoration: none;
}

.video-thumbnail-container {
    position: relative;
    background-color: #000;
    border-radius: 5px;
    overflow: hidden;
    /* This forces a 16:9 aspect ratio for all thumbnails */
    padding-bottom: 56.25%; 
    height: 0;
    margin-bottom: 8px;
    transition: transform 0.2s ease-in-out;
}

.video-grid-item:hover .video-thumbnail-container {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.video-thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.video-thumbnail-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    padding: 5px;
    text-align: center;
}

.video-grid-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    padding: 0 5px;
}

.video-grid-item:hover .video-grid-title {
    color: #e50914; /* Red accent on hover */
}

/* --- Single Image Player Style --- */

.image-player-container {
    position: relative;
    background-color: #000;
    padding-bottom: 56.25%; /* This forces a 16:9 aspect ratio */
    height: 0;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden; /* Ensures image corners are rounded too */
}

.image-player-container img {
    /* Make the image fit inside the container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* This is the magic property! It scales the image to fit without stretching. */
    object-fit: contain; 
}