@font-face {
    font-family: 'Maax';
    src: url("../fonts/maax_regular.woff");
}

/* Media Queries for Specific Breakpoints */
@media (max-width: 768px) {

    .mobile-header {
        font-family: Maax;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #002554;
        color: white;
    }

    .mobile-header img{
        width: 50px;
        margin-right: 10px;
    }

    .qrcode {
        display: none;
    }

    .heading h1,
    .heading p {
        font-size: 6vw;
        /* Larger font size for small screens */
    }

    .heading p {
        margin-top: auto;
    }

    .day {
        flex: 0 0 100%;
        /* Full width for each day */
    }

    .dishes h2,
    .dishes p {
        font-size: 5vw;
        /* Responsive font size */
    }

    :root {
        --border-size: 10px;
        --background-color: #C6E0DC;
        --font-color: #001276;
        --side-margin: 5vw;
        /* Use viewport units */
        --top-margin: 5vw;
        /* Use viewport units */
        --bottom-margin: 10vw;
        /* Adjust for smaller screens */
        --heading-bottom-margin: 5vw;
        /* Increased margin for headings */
        --side-padding: 5vw;
        /* Use viewport units */
    }

    .monday {
        --background-color: #C6E0DC;
    }

    .tuesday {
        --background-color: #B0D4EA;
    }

    .wednesday {
        --background-color: #FFDF97;
    }

    .thursday {
        --background-color: #FCC3D2;
    }

    .friday {
        --background-color: #FCB48B;
    }

    .saturday {
        --background-color: #C7DBB2;
    }

    .sunday {
        --background-color: #E7D3EF;
    }

    body,
    html {
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
        background-color: white;
    }

    body {
        color: var(--font-color);
        font-family: Maax;
        width: 100%;
        /* Set width to 100% */
        height: auto;
        /* Allow height to be dynamic */
        margin: 0;
    }

    .upper {
        background-color: white;
        padding: var(--top-margin) var(--side-margin) 0;

    }

    .day {
        flex: 0 0 48%;
        /* Adjust for smaller screens */
        margin-bottom: 5px;
        /* Space between days */
            }

    /* New Heading Styles */
    .heading {
        margin-bottom: var(--heading-bottom-margin);
        /* Increased margin */
    }

    /* Added Margin Between Heading and Content */
    .upper .dishes {
        margin-top: 20px;
        /* Adds space between heading and dish items */
    }

    .heading h1,
    .heading p {
        font-size: 6vw;
        /* Responsive font size */
        margin: 0;
        width: max-content;
        font-family: Maax;
        font-weight: bold;
        line-height: 100%;
        /* Adjust line-height */
    }

    /* Adjust for Dates Below Headings */
    .next_three_days .heading {
        margin-bottom: 20px;
        /* Ensures spacing from the previous heading */
    }

    .allergenes,
    body .dish p.allergenes {
        font-size: 3vw;
        /* Responsive font size */
        font-weight: normal;
        position: relative;
        top: 0.8ex;
        
    }

    .upper .allergenes {
        padding-left: 3px;
    }

    .allergene_icon {
        height: 4vw;
        /* Responsive icon size */
        vertical-align: middle;
        padding-left: 10px;
        position: relative;
        top: -2px;
        /* Adjust position */
    }

    .upper .dishes,
    .lower .dishes {
        display: flex;
        flex-wrap: wrap;
        /* Allow wrapping */
        column-gap: 4%;
    }

    .column-right {
        padding-top: 1vh;
    }

    .lower {
        background-color: white;
    }

    .lower .bottom-border {
        padding: 0 var(--side-padding) 0;
        display: flex;
        flex-wrap: wrap;
        /* Allow wrapping */
        column-gap: 1.6%;
    }

    .content {
        padding-top: 1vw;
        /* Responsive padding */
        padding-bottom: 1vw;
        /* Responsive padding */
    }

    .lower .content {
        padding-top: 1vw;
        padding-bottom: 1vw;
        /* Responsive padding */
    }

    .upper .dishes .dish {
        margin-bottom: 5vw;
        /* Adjust spacing */
        border-left: 8px solid var(--background-color);
        padding-left: 20px;
    }

    .upper .dish {
        font-size: 4vw;
        /* Responsive font size */
    }

    .upper .dish.dish-last {
        margin-bottom: 1vh;
    }

    .tomorrow {
        border-right: 5px dotted var(--background-color);
    }

    .lower .heading {
        position: relative;
    }

    .dishes h2,
    .dishes p {
        margin: 0;
        font-size: 4vw;
        /* Responsive font size */
    }

    .lower .dishes .dish {
        margin-bottom: 5vw;
        /* Adjust spacing */
        border-left: 8px solid var(--background-color);
        padding-left: 20px;
    }

    .heading p {
        font-size: 4vw;
        /* Responsive font size */
        margin: 0;
    }

    .dish-description {
        word-break: break-word;
    }

    .next_three_days .heading p {
        font-size: 5vw;
        /* Responsive font size */
        margin: 0;
        font-weight: normal;
        position: relative;
        top: 1vh;
        /* Avoids overlap, consider adjusting */
    }

    .disclaimer{
        text-align: center;
        font-style: italic;
    }
}