/*
Theme Name: FilmFjordFestival
Author: Daniel Kirchhoff
Description: Ein Classic Theme für das FilmFjordFestival
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: filmfjordfestival
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

* {
    color: white;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Source Code Pro", monospace;
    text-transform: uppercase;
    font-size: 48px;
}

/* Updated main styles - removed fixed height */
main {
    padding: 20px;
    width: 100vw;
    min-height: 100vh; /* Use min-height instead of height */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Special case for film pages that need full viewport height */
.main-film {
    height: 100vh; /* Only film pages get fixed height */
    /* This overrides the main min-height for this specific case */
}

.wrapper {
    max-width: 1920px; /* limits content width */
    width: 100%; /* fills parent up to max-width */
    margin-inline: auto; /* centers the wrapper horizontally */
    display: flex; /* keeps flex layout */
    align-items: flex-end; /* vertical alignment if needed */
}

.gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* put it behind everything */
    pointer-events: none; /* allow clicks to pass through */
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.6) 50%,
        rgba(0,0,0,0) 100%
    );
}

.main-om-ss {
    width: 100%;
    height: 100vh;
    background: url(./assets/photos/filmfjord_hyke_studio_01.jpg) no-repeat center center;
    background-size: cover;
    min-height: 100vh; /* damit das Bild fullscreen ist */
    padding-top: 80px; /* Höhe der Navbar, damit Content nicht überlappt */
}

html {
    scroll-behavior: smooth;
}

/* Additional mobile-specific fixes */
@media (max-width: 1024px) {
    main {
        padding: 10px; /* Reduce padding on smaller screens */
    }
    
    /* Ensure film page can scroll on mobile when content overflows */
    .main-film {
        height: auto;
        min-height: 100vh;
    }
}