/* Custom CSS for WWII Heroes Site */

/* Apply background image to a dedicated div for better control */
.background-image {
    background: url('../images/background.jpg') center center no-repeat;
    background-size: cover;
    /* Ensure it stays fixed during scroll */
    background-attachment: fixed;
}

/* Style for the main content box */
.central-overlay {
    /* Using Tailwind for background, border, shadow, width */
    /* Height will be determined by content, min-height can be added if needed */
    /* max-height: 80vh; /* Example: Limit height on large screens */
	color: #FFFFFF;
}

/* Style for the left logo section */
.logo-container {
    background: url('../images/logo2.jpg') left top no-repeat;
    background-size: 100% auto; /* Changed from 33.1vw to contain for responsiveness */
	background-color: rgba(0, 0, 0, 0.1);
    min-height: 200px; /* Ensure some height on small screens */
}
/* Medium screens and up: Adjust background size and minimum height */
@media (min-width: 768px) {
    .logo-container {
        min-height: 400px; /* Adjust as needed */
    }
}
@media (orientation: portrait) {
    .logo-container {
        /* Override background image for vertical/portrait display */
        /* Ensure 'images/logo2w.jpg' exists at this path relative to style.css */
        background-image: url('../images/logo2w.jpg');
        /* Keep other background properties (position, size, repeat) from the default rule */
    }
}

/* Style for navigation links */
a.nav-link {
    @apply text-yellow-300 hover:text-white transition-colors duration-200;
    /* Tailwind classes replace manual color, hover, etc. */
}

/* Style for main text and producers sections scrollbar */
.main-text::-webkit-scrollbar,
.producers::-webkit-scrollbar {
    width: 8px;
}

.main-text::-webkit-scrollbar-track,
.producers::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.main-text::-webkit-scrollbar-thumb,
.producers::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 4px;
    border: 1px solid slategrey;
}

/* Style for supporter links */
a.supporter-link img {
    /* Tailwind classes handle height and hover effect in HTML */
    display: inline-block; /* Ensure proper alignment */
    vertical-align: middle;
}

/* Modal Video Links */
.modal-video-link {
     @apply text-yellow-300 hover:text-white transition-colors duration-200 px-2 py-1 inline-block;
}

/* Tailwind's aspect-ratio plugin styles */
/* Ensure these are available or define them */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}
.aspect-h-9 {
    /* Combined with aspect-w-16 */
}
.aspect-w-16 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Hide scrollbar for video links container if needed, but allow scrolling */
.video-links::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}
.video-links {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}