:root {
    --hamburger-size: 30px;

    /* DEFAULT LAYOUT */
    --def-top-padding-phone: 8vh;
    --def-top-padding-1100: 13vh;
    --def-top-padding-1500: 10vh;
    --def-height-phone-std: 60vh;
    --def-height-phone-10-19: 55vh;
    --def-height-desktop: 100vh;

    /* AGENDA LAYOUT */
    --age-title-padding-phone: 23vh;
    --age-title-padding-1100: 20vh;
    --age-menu-padding-1100: 3vh;
    --age-font-size-1100: 2em;
    --age-title-padding-1500: 20vh;
    --age-menu-padding-1500: 0.5vh;
    --age-font-size-1500: 2.3em;
    --age-height-phone: 50vh;
    --age-height-desktop: 60vh;
    --age-bg-position: bottom;

    /* SOUTENIR LAYOUT */
    /* --stn-title-padding-phone: 23vh; */
    /* --stn-title-padding-1100: 20vh; */
    --stn-menu-padding-1100: -3vh;
    /* --stn-title-padding-1500: 20vh; */
    --stn-menu-padding-1500: -4vh;
    /* --stn-height-phone: 50vh; */
    /* --stn-height-desktop: 60vh; */
    --stn-bg-position: top;

    /* GALERIE LAYOUT */
    /* --gal-title-padding-phone: 23vh; */
    /* --gal-title-padding-1100: 20vh; */
    --gal-menu-padding-1100: -3vh;
    /* --gal-title-padding-1500: 20vh; */
    --gal-menu-padding-1500: -4vh;
    /* --gal-height-phone: 50vh; */
    /* --gal-height-desktop: 60vh; */
    --gal-bg-position: top;
}

/* MOBILE FIRST*/
.matica-main {
    position: relative;
    width: 100vw;
    height: var(--def-height-phone-std);
    background-size: cover;
    background-position: center;
}
.agenda-layout {
    background-position: var(--age-bg-position);
    height: var(--age-height-phone);
}
.soutenir-layout {
    background-position: var(--stn-bg-position);
    height: var(--age-height-phone);
}
.galerie-layout {
    background-position: var(--stn-bg-position);
    height: var(--age-height-phone);
}

#matica-main {
    overflow: hidden;
}

.matica-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.matica-title-container h1,
.matica-title-container h1 a,
.matica-title-container h3 {
    margin: 0;
    z-index: 2;
    color: var(--accented);
    text-decoration: none;
}
.matica-title-container h1 a {
    display: inline-block;
    margin: 0;
    font-size: 45px;
}
.matica-title-container h3 {
    pointer-events: none;
    display: block;
    margin: 0;
    font-weight: 300;
    max-width: 345px;
}
.default-layout .matica-title-container {
    padding: var(--def-top-padding-phone) 20px 0 20px;
    text-align: center;
}
.agenda-layout .matica-title-container {
    padding: var(--age-title-padding-phone) 20px 0 20px;
    text-align: center;
}
.soutenir-layout .matica-title-container {
    padding: var(--age-title-padding-phone) 20px 0 20px;
    text-align: center;
}
.galerie-layout .matica-title-container {
    padding: var(--age-title-padding-phone) 20px 0 20px;
    text-align: center;
}
.soutenir-layout .matica-title-container h1 a,
.soutenir-layout .matica-title-container h3 {
    color: var(--light);
}
.galerie-layout .matica-title-container h1 a {
    color: var(--light);
}

@media (max-aspect-ratio: 10/19) {
    .default-layout {
        height: var(--def-height-phone-10-19);
    }
    .agenda-layout {
        height: var(--age-height-phone);
    }
    .soutenir-layout {
        height: var(--age-height-phone);
    }

    .matica-title-container h1 a {
        font-size: 1em;
    }
    .matica-title-container h3 {
        font-size: 1em;
    }
}

@media (min-width: 1100px) {
    .default-layout {
        height: var(--def-height-desktop);
    }
    .agenda-layout {
        height: var(--age-height-desktop);
    }
    .soutenir-layout {
        height: var(--age-height-desktop);
    }

    #matica-menu-desktop {
        display: block;
        position: absolute;
        z-index: 2;
        padding: 0 30px 0 80px;
        right: 0;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }
    .soutenir-layout #matica-menu-desktop {
        height: var(--age-height-desktop);
        display: flex;
        align-items: center;
    }

    #matica-menu-desktop::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 1) 100%);
        opacity: 0.25;
        transition: opacity 0.3s ease;
        z-index: -1;
    }
    #matica-menu-desktop:hover::before {
        opacity: 0.35;
    }

    #matica-menu-desktop ul {
        list-style: none;
        margin: 0;
        z-index: 2;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: center;
    }
    .default-layout #matica-menu-desktop > ul {
        margin: var(--def-top-padding-1100) 0 0 0;
    }
    .agenda-layout #matica-menu-desktop > ul {
        margin: var(--age-menu-padding-1100) 0 0 0;
    }
    .soutenir-layout #matica-menu-desktop > ul {
        margin: var(--stn-menu-padding-1100) 0 0 0;
    }

    #matica-menu-desktop ul li a {
        padding: 10px;
        display: inline-block;
        text-decoration: none;
        color: white;
        font-size: 1.7rem;
        transition: transform 0.3s ease;
    }
    #matica-menu-desktop ul li a:hover {
        transform: translateX(5px);
    }

    #matica-menu-list .submenu {
        margin: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }
    #matica-menu-list .submenu.open-submenu {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }

    .menu-item {
        border-width: 0px;
        transition: 0.3s;
    }
    .menu-border {
        border-style: solid;
        border-width: 1px;
        border-radius: 8px;
        border-color: rgba(255, 255, 255, 0.293);
        background-color: rgba(106, 106, 106, 0.063);
    }

    .matica-title-container h1 a {
        font-size: 2em;
    }
    .matica-title-container h3 {
        font-size: 1.42em;
        max-width: 500px;
    }
    .default-layout .matica-title-container {
        padding: var(--def-top-padding-1100) 20px 0 20px;
        text-align: center;
    }
    .agenda-layout .matica-title-container {
        padding: var(--age-title-padding-1100) 20px 0 20px;
        text-align: center;
    }
    .soutenir-layout .matica-title-container {
        padding: var(--age-title-padding-1100) 20px 0 20px;
        text-align: center;
    }
    .galerie-layout .matica-title-container {
        padding: var(--age-title-padding-1100) 20px 0 20px;
        text-align: center;
    }
}

@media (min-width: 1500px) {
    .default-layout #matica-menu-desktop > ul {
        margin: var(--def-top-padding-1500) 0 0 0;
    }
    .agenda-layout #matica-menu-desktop > ul {
        margin: var(--age-menu-padding-1500) 0 0 0;
    }
    .soutenir-layout #matica-menu-desktop > ul {
        margin: var(--stn-menu-padding-1500) 0 0 0;
    }

    .default-layout .matica-title-container h1 a {
        font-size: 2.8em;
        letter-spacing: 5px;
    }
    .agenda-layout .matica-title-container h1 a {
        font-size: var(--age-font-size-1500);
        letter-spacing: 5px;
    }
    .soutenir-layout .matica-title-container h1 a {
        font-size: var(--age-font-size-1500);
        letter-spacing: 5px;
    }
    .matica-title-container h3 {
        font-size: 1.676em;
        max-width: 1000px;
    }
    .default-layout .matica-title-container {
        padding: var(--def-top-padding-1500) 20px 0 20px;
        text-align: center;
    }
    .agenda-layout .matica-title-container {
        padding: var(--age-title-padding-1500) 20px 0 20px;
        text-align: center;
    }
    .soutenir-layout .matica-title-container {
        padding: var(--age-title-padding-1500) 20px 0 20px;
        text-align: center;
    }
    .galerie-layout .matica-title-container {
        padding: var(--age-title-padding-1500) 20px 0 20px;
        text-align: center;
    }
}