/* CSS for layout and tooltip styling */
body > div > div.p-bdr9414.pagelayer-row.pagelayer-row-stretch-auto.pagelayer-height-default > div > div > div.pagelayer-col-holder > div.p-trw3096.pagelayer-inner_row.pagelayer-row-stretch-auto.pagelayer-height-default > div > div > div,
div.pagelayer-col-holder {
    padding: 0 !important;
}

body {
    font-family: Arial, sans-serif;
    margin: 0 auto; /* Centers the body */
    box-sizing: border-box; /* Ensures padding is included in total width */
    overflow-y: scroll;
}

.menu_val {
    max-width: 800px; /* Sets the maximum width of the page */
    margin: 0 auto; /* Centers #menuContainer within the body */
}

/* Pievienojam šo, lai nodrošinātu, ka attēli un citi elementi nepārsniedz konteineru */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

#languageSwitch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

#navigationMenu {
    list-style-type: none;
    margin: 20px 0;
    display: flex;
    cursor: pointer;
    flex-wrap: wrap; /* Pievienots, lai izvēlne pārkārtotos mazākos ekrānos */
}

#navigationMenu li {
    margin: 0 auto; /* Centers #menuContainer within the body */
    cursor: pointer;
    font-weight: bold;
    color: #000000;
}

#navigationMenu li:active {
    color: orange; /* Aktīva izvēlnes elementa krāsa */
}

#navigationMenu li:hover {
    text-decoration: underline;
    transform: scale(1.15); /* Palielina tekstu par 15% */
    transition: transform 0.2s ease-in-out; /* Pievieno pārejas efektu */
}

#menuContainer {
    width: 100%; /* Mainīts no fiksēta platuma uz 100% */
    max-width: 1000px; /* Maksimālais platums */
    margin: 0 auto; /* Centers #menuContainer within the body */
    padding: 20px; /* Optional padding around content */
    box-sizing: border-box; /* Ensures padding is included in total width */
}

.menu-item {
    /*border-bottom: 1px solid #ccc;*/
    padding: 10px 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    /* Fragments par līnijām */
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dashed gray; /* Raustīta līnija */
    margin-bottom: 10px; /* Atstarpe zem nosaukuma un cenas */
}

.menu-description, .menu-allergens {
    margin-top: 5px;
    text-align: center; /* Centrē tekstu horizontāli */
    margin: 0 auto; /* Nodrošina, ka elements ir centrēts konteinerī */
}

.allergen {
    position: relative;
    cursor: pointer;
}

.tooltip {
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Pozicionē tieši virs atsauces elementa */
    left: 50%; /* Centrs horizontāli virs elementa */
    transform: translateX(-50%) translateY(-5px); /* Pārbīda centru horizontāli un pievieno vertikālu nobīdi */
    white-space: nowrap;
}

.allergen:hover .tooltip {
    visibility: visible;
}

/* Media Queries */

/* Ekrāniem, kas ir mazāki par 768px */
@media (max-width: 768px) {
    #navigationMenu {
        flex-direction: column;
        align-items: center;
    }

    .menu-header {
        flex-direction: column;
        align-items: center;
    }

    .menu-header h2, .menu-header span {
        margin-bottom: 5px;
    }

    #menuContainer {
        padding: 10px;
    }
}

/* Ekrāniem, kas ir mazāki par 480px */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .menu-header h2 {
        font-size: 18px;
    }

    .menu-header span {
        font-size: 16px;
    }

    #navigationMenu li {
        font-size: 16px;
    }
}