/*
Theme Name: VOA Creole Theme
Theme URI: https://example.com/voa-creole-theme
Author: Your Name/AI
Author URI: https://example.com
Description: A custom WordPress theme for VOA Creole, based on provided HTML designs, with dynamic sections.
Version: 1.1
Text Domain: voa-creole
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: news, blog, responsive, custom-header, custom-menu, custom-post-type, widgets
*/

/* Add your actual CSS rules below this header comment block */
/* For example, you might add some global styles here if needed. */
body {
    /* Ensure Inter font is applied and padding for fixed header */
    font-family: 'Inter', sans-serif;
    padding-top: 56px;
}
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Simple focus styling for accessibility */
:focus {
    outline: 2px solid theme('colors.blue.500');
    outline-offset: 2px;
}

/* Specific styles for video player to ensure aspect ratio */
.video-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Fallback for no video */
}
.video-player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Thumbnail styling */
.thumbnail-item {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 3px solid transparent; /* Default transparent border */
}
.thumbnail-item.active {
    border-color: theme('colors.blue.500'); /* Highlight active thumbnail */
    transform: scale(1.05); /* Slightly enlarge active thumbnail */
}
.thumbnail-item:hover {
    transform: scale(1.03);
    border-color: theme('colors.blue.300');
}
/* Hide scrollbar for thumbnail container */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}