/*
 Theme Name: Twenty Twenty-Five Child
 Template:   twentytwentyfive
*/
/* --- Full-screen video hero with halftone overlay --- */

/* Reset body/html for full coverage */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 100vh; /* Ensure proper viewport handling */
}

/* Apply black background only to front page with video hero */
body.home,
body.front-page {
    background-color: #000;
}

/* Reset WordPress block defaults that interfere with full-screen layout */
.wp-block-group.alignfull.video-hero,
.wp-block-group.video-hero,
.alignfull.video-hero,
.video-hero {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Video wrapper - covers full container */
.video-hero .video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video iframe - object-fit: cover behavior */
.video-hero .video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: calc(100vw * 9 / 16); /* Assume 16:9 video aspect ratio */
    min-width: 100vw;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
    z-index: 0;
}

/* Adjust video size based on viewport aspect ratio for proper cover behavior */
@media (max-aspect-ratio: 16/9) {
    /* Viewport is taller than 16:9 - video height should match viewport height */
    .video-hero .video-wrapper iframe {
        width: calc(100vh * 16 / 9);
        height: 100vh;
    }
}

@media (min-aspect-ratio: 16/9) {
    /* Viewport is wider than 16:9 - video width should match viewport width */
    .video-hero .video-wrapper iframe {
        width: 100vw;
        height: calc(100vw * 9 / 16);
    }
}

/* WordPress admin bar adjustments */
.admin-bar .video-hero {
    height: calc(100vh - 32px);
}

@media (max-width: 782px) {
    .admin-bar .video-hero {
        height: calc(100vh - 46px);
    }
}

/* Halftone overlay - repeating pattern at original size with WordPress override */
.wp-block-group.alignfull.video-hero .halftone-overlay,
.wp-block-group.video-hero .halftone-overlay,
.alignfull.video-hero .halftone-overlay,
.video-hero .halftone-overlay {
    background-image: url('./assets/halftone.png') !important;
    background-size: auto !important; /* Keep original size */
    background-position: 0 0 !important;
    background-repeat: repeat !important; /* Tile the pattern */
    position: fixed !important; /* Use fixed positioning to ensure full coverage */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
    z-index: 999 !important; /* Higher z-index to ensure it's above everything */
    box-sizing: border-box !important;
}

/* Hero content - centered above video and overlay (preserved for compatibility) */
.wp-block-group.alignfull.video-hero .hero-content,
.wp-block-group.video-hero .hero-content,
.alignfull.video-hero .hero-content,
.video-hero .hero-content {
    position: relative !important;
    z-index: 1000 !important; /* Above halftone overlay */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* New Gutenberg content layer - absolute overlay over video background */
.wp-block-group.alignfull.page-content-over-video,
.wp-block-group.page-content-over-video,
.alignfull.page-content-over-video,
.page-content-over-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1001 !important; /* Above everything */
    margin: 0 !important;
    padding: 2rem !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow-y: auto !important; /* Allow scrolling if content exceeds viewport */
}

/* Style content blocks for readability over video background */
.page-content-over-video * {
    position: relative !important;
    z-index: inherit !important;
}

/* Ensure text readability over video */
.page-content-over-video h1,
.page-content-over-video h2,
.page-content-over-video h3,
.page-content-over-video h4,
.page-content-over-video h5,
.page-content-over-video h6 {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

.page-content-over-video p,
.page-content-over-video li,
.page-content-over-video span {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

/* Style WordPress blocks for video background */
.page-content-over-video .wp-block-button__link {
    text-shadow: none !important;
    background: rgba(255,255,255,0.9) !important;
    color: #000 !important;
    border-radius: 4px !important;
}

.page-content-over-video .wp-block-button__link:hover {
    background: rgba(255,255,255,1) !important;
}