/*
 * =========================================================
 * MENU.CSS
 * =========================================================
 *
 * Menu principal du site.
 *
 * Le menu est fermé par défaut.
 * La classe .is-open est ajoutée par JavaScript.
 * =========================================================
 */


/* =========================================================
   MENU FERMÉ
   ========================================================= */

.site-menu {

    width: 100%;

    max-height: 0;

    overflow: hidden;

    visibility: hidden;

    opacity: 0;

    background: var(--color-menu);

    border-bottom:
        0 solid
        rgba(120, 120, 120, 0.25);

    transition:
        max-height 0.30s ease,
        opacity 0.20s ease,
        visibility 0s linear 0.30s,
        border-bottom-width 0.30s ease;
}


/* =========================================================
   MENU OUVERT
   ========================================================= */

.site-menu.is-open {

    max-height: 500px;

    visibility: visible;

    opacity: 1;

    border-bottom-width: 1px;

    transition:
        max-height 0.30s ease,
        opacity 0.20s ease,
        visibility 0s linear 0s,
        border-bottom-width 0.30s ease;
}


/* =========================================================
   CONTENU DU MENU
   ========================================================= */

.site-menu__inner {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;

    padding: 0 30px;
}


/* =========================================================
   LIENS
   ========================================================= */

.site-menu a {

    display: block;

    padding: 17px 0;

    font-family: "Cinzel", Georgia, serif;

    font-size: 11px;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    color: var(--color-text);

    white-space: nowrap;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


.site-menu a:hover {

    color: var(--color-hover);
}


.site-menu a.active {

    color: var(--color-ivoire);
}


/* =========================================================
   PAGE ACTIVE
   ========================================================= */

.site-body.home
.site-menu a[href="index.php"],

.site-body.presentation
.site-menu a[href*="presentation.php"],

.site-body.rsvp
.site-menu a[href*="rsvp.php"],

.site-body.event-page--1
.site-menu a[href*="event1.php"],

.site-body.event-page--2
.site-menu a[href*="event2.php"],

.site-body.contact
.site-menu a[href*="contact.php"] {

    color: var(--color-ivoire);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 800px) {

    .site-menu__inner {

        gap: 22px;
    }


    .site-menu a {

        font-size: 10px;

        letter-spacing: 1.2px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-menu__inner {

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 4px 22px 10px;
    }


    .site-menu a {

        width: 100%;

        padding: 13px 5px;

        border-bottom:
            1px solid
            rgba(120, 120, 120, 0.15);

        font-size: 11px;

        text-align: center;
    }


    .site-menu a:last-child {

        border-bottom: 0;
    }

}