/* Theme Variables */
:root {
    --a-visited-color: --mainColor;
    --a-link-color: --mainColorLight;
    --heading-ratio: 1.2;

    /* Default Colors */
    --bibblue: #005092;
    --biblightblue: #e5edf4;
    --bibgreen: #8fb900;
    --biblightgreen: #ffffff;
    --bibturkis: #006b87;
    --biblightturkis: #cce7ee;
    --button-fore-color: white;
    
    /* Default Theme */
    --mainColor: var(--bibblue);
    --mainColorLight: var(--biblightblue);
}

/* High Contrast Theme - Applied via PHP */
body.high-contrast {
    --mainColor: #000000;
    --mainColorLight: #ffffff;
    --bibblue: #000000;
    --biblightblue: #ffffff;
    --bibgreen: #000000;
    --biblightgreen: #ffffff;
    --bibturkis: #000000;
    --biblightturkis: #ffffff;
    --button-fore-color: white;
    --card-back-color: white;
    --card-border-color: black;
    --secondary-fore-color: black;
}

/* Logo styling */
#biblogo rect {
    fill: var(--mainColor)
}

/* Background image styles */
.backgroundImg {
    height: 15vh;
    background-image: url('/img/backgrounds/galeriesaal/768.jpg')
}

/* Responsive background images */
@media (min-width: 768px) {
    .backgroundImg {
        background-image: url('/img/backgrounds/galeriesaal/1280.jpg')
    }
}

@media (min-width: 1281px) {
    .backgroundImg {
        background-image: url('/img/backgrounds/galeriesaal/1920.jpg')
    }
}

@media (min-width: 1921px) {
    .backgroundImg {
        background-image: url('/img/backgrounds/galeriesaal/3820.jpg')
    }
}

/* Additional responsive containers */
.flex-container {
    display: flex;
    align-items: center; /* Vertically centers the nav and button */
}

@media (max-width: 767px) {
    .flex-container {
        flex-direction: row; /* Arranges the nav and button side by side */
    }
}

/* Header structure overrides */
header {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

header.menu {
    line-height: normal !important;
}

@media (max-width: 767px) {
    header.row.menu {
        height: auto !important;
        min-height: 0 !important;
    }
    
    #toggle-button {
        display: inline-block; /* Show button in mobile view */
        height: 3em; /* Adjust this value to match the nav height */
        padding: 0.5em 1em; /* Adjust padding if necessary */
        margin: 0; /* Reset margin */
        border: none; /* Reset border */
        background-color: #f0f0f0; /* Optional: Set a background color */
        cursor: pointer; /* Optional: Changes the cursor on hover */
    }

    .toggleable-content {
        display: none; /* Hide content in mobile view */
    }
    
    #toggle-button {
        display: inline-block; /* Ensures the button is displayed */
    }
}

@media (min-width: 768px) {
    #toggle-button {
        display: none; /* Hides the button in non-mobile view */
    }
}