/* Styles.css */

/* General styles */
@font-face {
    font-family: 'GarotaSans'; /* Custom font name */
    src: url('./fonts/Garota-Sans-Caps-Reg-Bold-FFP/GarotaSansSC-Regular-FFP.ttf') format('truetype'); /* Path and format */
}

:root {
    --baseColor: #3d240e;
    --secondaryColor: #fffaf0;
    --highlightColor: #ffe6b4;
}

* {
    box-sizing: border-box;
}
html {
    font-size: 20px;
    scroll-behavior: smooth;
}

.linkPic{
    height: 2.3em;
    width:auto;
    padding: 0px;
    margin: 0px;
}

body img {
    width:100%;
}

body video {
    width: 100%;
}

.portrait {
    width: 50%;
    padding-bottom: 1em;
}

p {
    width: 80%;
    padding: 0.5em 1em 2em 1em;
    line-height: 1.7em;
}

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: var(--baseColor);
    margin: 0;
    padding: 0;
    font-size: 18px;
}

header {
    /*
    License Information:
    Free to use under the Unsplash license.
    For more details, visit: https://unsplash.com/license
    source: https://unsplash.com/photos/silhouette-photo-of-six-persons-on-top-of-mountain-Sj0iMtq_Z4w
    */
    background-image: url("./img/logos/sunset.webp");
    color: var(--baseColor);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-size: cover;
    background-position: center;
    height: 45vh;
}

header img {
    height: 15vh;
    width: auto;
    display: block;
}

.container {
    padding: 1em;
    /* für eine abgerundete box */
    /*
    background-color: var(--secondaryColor);
    border-radius: 8px;
    box-shadow: 0 0 10px #402b002c;
    */
    text-align: center;
    width: 1068px;
    margin: 1em auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.button{
    position: fixed;
    top: 1em;
    left: 1em;
    font-family: 'GarotaSans', sans-serif;
    font-weight: bold;
    background-color: var(--baseColor);
    color: var(--secondaryColor);
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 10px #402b002c;
}
.button:hover {
    background-color: var(--highlightColor);
    color: var(--baseColor);
    box-shadow: 0 0 10px #402b002c;
}

/* Horizontal navigation bar with expandable link lists */
.navbar {
    font-family: 'GarotaSans', sans-serif;
    background-color: var(--baseColor);
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: bold;
    overflow: visible;
}

.navbar a {
    float: left;
    display: block;
    color: var(--secondaryColor);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navSection{
    flex-direction: column;
}

.navSection .navButton{
    display: flex;
    justify-content: left;
}

.navSection .navList{
    visibility: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--baseColor);
}

.navList:hover{
    visibility: visible;
}

.navButton:hover + .navList{
    visibility: visible;
}

.navbar a:hover {
    color: var(--highlightColor);
    text-decoration: none;
}

/*Formatting for tables*/
table {
    display: block;
    border-collapse: collapse;
    margin-top: 20px;
    }
    
th, td {
    padding: 12px;
    text-align: center;
}
th {
    background-color: var(--baseColor);
    color: var(--secondaryColor);
}
tr:nth-child(even) {
    background-color: transparent;
}
tr:nth-child(odd) {
    background-color: transparent;
}
tr:hover {
    background-color: var(--highlightColor);
}

/*Links */

a {
    color: inherit;
    text-align: center;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer {
    background-color: var(--baseColor);
    color: var(--secondaryColor);
    line-height: 1.5em;
    padding: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column ;
    width: 100%;
    height: auto;
}

footer .box{
    font-size: 15px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px #402b002c;
    width: 40%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.pdf-viewer {
    width: 100%;
    max-width: 600px;
    height: 900px;
    border: none;
}

@media (max-width: 1068px) {

    .portrait {
        width: 70%;
        padding-bottom: 1em;
    }

    .container {
        width: 100%;
    }

    /* vertical navigation bar with all links expanded */
    .navbar {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: bold;
        overflow: visible;
    }

    .navbar a {
        float: none;
        display: flex;
        flex-direction: row;
    }

    .navSection .navButton{
        display: flex;
        flex-direction: row;
    }

    .navSection .navList{
        display: flex;
        flex-direction: row;
        visibility: visible;
        position: relative;
    }

    .navSection{
        display: flex;
        flex-direction: row;
    }
}

@media (max-width: 734px) {

    .container {
        width: 100%;
    }

     /* vertical navigation bar with all links expanded */
     .navbar {
        font-family: 'GarotaSans', sans-serif;

        background-color: var(--baseColor);
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        font-weight: bold;
        overflow: visible;
    }

    .navbar a {
        float: none;
        display: flex;
        justify-content: center;
    }

    .navSection .navButton{
        justify-content: center;
    }

    .navSection .navList{
        visibility: visible;
        flex-direction: column;
        position: relative;
    }

    .navSection{
        flex-direction: column;
    }

    /* This is a mobile-friendly version of the table. It stacks rows vertically for better readability on small screens. */    
    table, thead, tbody, td, tr {
        display: block; /* Makes table elements behave like block elements */
    }
    table {
        width: 80%;
    }

    th {
        visibility: collapse;
        display: none;

    }

    tr {
        margin-bottom: 50px; /* Adds space between rows */
        border-radius: 8px;
    }    
    
    tr:hover {
        background-color: transparent; /* Removes hover effect for better readability */
    }


    td {
        text-align: left; /* Aligns content to the left for readability */
        padding: 8px;
        border-bottom: 1px solid var(--baseColor); /* Adds a divider between rows */
    }

    td::before {
        content: attr(data-label); /* Adds labels for each cell using 'data-label' */
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
        
    }


    /* This could be an alternative to using data Labels for every Line. problem is, this would be applied to all tables. 
    td:nth-child(1):before {
        content: "Datum";
    }
    td:nth-child(2):before {
        content: "Programm";
    }
    td:nth-child(3):before {
        content: "Verantwortlich";
    }
    td:nth-child(4):before {
        content: "Abendessen";
    }
    */
}