:root
{
    --tpl-hspacing: calc(40 * var(--cms-factor));
    --tpl-width: min(100%, 1050 * var(--cms-factor) - 2 * var(--tpl-hspacing));
}

@media (max-width: 800px)
{
    :root
    {
        --tpl-hspacing: calc(20 * var(--cms-factor));
    }
}

BODY
{
    BOX-SIZING: border-box;
    DISPLAY: grid;
    GRID-TEMPLATE-ROWS: auto auto 1fr auto;
    MARGIN: 0;
    MIN-HEIGHT: 100vh;
    OVERFLOW-X: hidden;
    PADDING: 0;
}

#menu-open,
#menu-close
{
    DISPLAY: none;
}

#menu
{
    BACKGROUND: var(--cms-background-alt);
    BOX-SIZING: border-box;
    CONTAIN: layout style;
    MARGIN: 0 auto;
    POSITION: sticky;
    TOP: 0;
    WIDTH: 100%;
    Z-INDEX: 5000;
}

#menu UL
{
    LIST-STYLE: none;
    MARGIN: 0;
}

#menu LI
{
    MARGIN: 0;
}

#menu A
{
    COLOR: var(--cms-color-alt);
    DISPLAY: block;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
    TEXT-DECORATION: none;
}

#menu A:focus,
#menu A:hover
{
    COLOR: var(--cms-button-color);
}

#menu A.active
{
    BACKGROUND: var(--cms-button-background-alt);
    COLOR: var(--cms-button-color-alt);
}

#menu > UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    JUSTIFY-CONTENT: center;
}

#menu > UL > LI > A
{
    FONT-SIZE: calc(20 * var(--cms-factor));
    LINE-HEIGHT: var(--cms-line-height);
}

#menu LI UL
{
    BACKGROUND: var(--cms-background-alt);
    MAX-WIDTH: calc(200 * var(--cms-factor));
    MIN-WIDTH: 100%;
    LEFT: 0;
    POSITION: absolute;
    WIDTH: max-content;
    Z-INDEX: 1000;
}

#menu LI LI
{
    BORDER-TOP: var(--cms-factor) solid var(--cms-color-alt);
}

#menu LI LI UL
{
    LEFT: auto;
    RIGHT: 100%;
    TOP: calc(-1 * var(--cms-factor));
}

#menu LI UL,
#menu LI:hover LI UL,
#menu LI LI:hover LI UL
{
    OPACITY: 0;
    POINTER-EVENTS: none;
    TRANSITION: opacity 0.25s;
    WILL-CHANGE: opacity;
}

#menu A:focus ~ UL,
#menu UL:focus-within,
#menu LI:hover UL,
#menu LI LI:hover UL
{
    OPACITY: 1;
    POINTER-EVENTS: auto;
    Z-INDEX: 1000;
}

@media (max-width: 800px), (pointer: coarse), (hover: none)
{
    #menu-open,
    #menu-close
    {
        BACKGROUND: var(--cms-background);
        COLOR: var(--cms-link-color);
        DISPLAY: block;
        FONT-FAMILY: "Entypo";
        FONT-SIZE: calc(40 * var(--cms-factor));
        HEIGHT: calc(50 * var(--cms-factor));
        LINE-HEIGHT: calc(50 * var(--cms-factor));
        POSITION: fixed;
        RIGHT: 0;
        TEXT-ALIGN: center;
        TEXT-DECORATION: none;
        TOP: 0;
        WIDTH: calc(50 * var(--cms-factor));
        Z-INDEX: 4000;
    }

    #menu-close
    {
        BACKGROUND: #81002d;
        COLOR: var(--cms-button-color);
        OPACITY: 0;
        POINTER-EVENTS: none;
        TRANSITION: opacity 0.25s;
        WILL-CHANGE: opacity;
        Z-INDEX: 6000;
    }

    #menu-open:hover,
    #menu-open:focus,
    #menu-close:hover,
    #menu-close:focus
    {
        BACKGROUND: var(--cms-button-background-alt);
        COLOR: var(--cms-button-color-alt);
    }

    #menu-open:after
    {
        CONTENT: "\e8f3";
        USER-SELECT: none;
    }

    #menu-close:after
    {
        CONTENT: "\e871";
        USER-SELECT: none;
    }

    #menu
    {
        BACKDROP-FILTER: blur(10px);
        BACKGROUND: var(--cms-overlay-background);
        INSET: 0;
        MARGIN: 0;
        OPACITY: 0;
        PADDING-TOP: calc(50 * var(--cms-factor));
        POINTER-EVENTS: none;
        POSITION: fixed;
        TRANSITION: opacity 0.25s;
        WILL-CHANGE: opacity;
    }

    #menu-open:focus + #menu-close,
    #menu-open:focus ~ #menu,
    #menu-close:has(+ #menu:focus-within),
    #menu:focus-within
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }

    #menu UL
    {
        --height: 100vh;
    }

    #menu LI
    {
        BORDER-TOP: calc(1 * var(--cms-factor)) solid var(--cms-color-alt);
    }

    #menu A
    {
        DISPLAY: block;
    }

    #menu A.active:not(:has(> STRONG))
    {
        BACKGROUND: transparent;
        COLOR: var(--cms-color-alt);
    }

    #menu A.active:not(:has(> STRONG)):focus,
    #menu A.active:not(:has(> STRONG)):hover
    {
        COLOR: var(--cms-button-color);
    }

    #menu > UL
    {
        BORDER-BOTTOM: var(--cms-factor) solid var(--cms-color-alt);
        BACKGROUND: var(--cms-background-alt);
        FLEX-DIRECTION: column;
    }

    #menu LI UL,
    #menu LI LI UL,
    #menu LI:hover UL,
    #menu LI LI:hover UL
    {
        HEIGHT: 100%;
        MAX-HEIGHT: 0;
        OPACITY: 1 !important;
        OVERFLOW: hidden;
        POINTER-EVENTS: none;
        POSITION: relative;
        TRANSITION: max-height 0.25s;
        WILL-CHANGE: max-height;
    }

    #menu LI A:focus ~ UL,
    #menu LI UL:focus-within,
    #menu:not(:has(.menu-switch)) UL
    {
        MAX-HEIGHT: var(--height) !important;
        POINTER-EVENTS: auto !important;
    }

    #menu LI LI UL
    {
        RIGHT: auto;
        TOP: auto;
    }

    #menu LI LI A
    {
        PADDING-LEFT: calc(2 * var(--cms-hpadding));
    }

    #menu LI LI LI A
    {
        PADDING-LEFT: calc(3 * var(--cms-hpadding));
    }
}

#menu A:has(+ A.menu-switch)
{
    PADDING-RIGHT: calc(35 * var(--cms-factor));
}

#menu A.menu-switch
{
    DISPLAY: block;
    FONT-FAMILY: "Entypo";
    PADDING: var(--cms-vpadding) calc(7.5 * var(--cms-factor)) var(--cms-vpadding) calc(5 * var(--cms-factor));
    POSITION: absolute;
    RIGHT: 0;
    TEXT-ALIGN: center;
    TEXT-DECORATION: none;
    TOP: 0;
    WIDTH: calc(22.5 * var(--cms-factor));
    Z-INDEX: 4000;
}

#menu A.active + A.menu-switch
{
    COLOR: var(--cms-button-color-alt);
}

#menu A.menu-switch:after
{
    CONTENT: "\e840";
}

@media (min-width: 801px) and (pointer: fine),
       (min-width: 801px) and (hover: hover)
{
    #menu UL UL A:has(+ A.menu-switch)
    {
        PADDING-LEFT: calc(35 * var(--cms-factor));
        PADDING-RIGHT: var(--cms-hpadding);
    }

    #menu UL UL A.menu-switch
    {
        LEFT: 0;
        PADDING-LEFT: calc(7.5 * var(--cms-factor));
        PADDING-RIGHT: calc(5 * var(--cms-factor));
        RIGHT: auto;
    }

    #menu UL UL A.menu-switch:after
    {
        CONTENT: "\e83f";
    }
}

#head
{
    BACKGROUND: var(--cms-button-background-alt);
    CONTAIN: content;
    DISPLAY: grid;
    MARGIN: 0 auto;
    OVERFLOW: hidden;
    WIDTH: 100%;
}

#banner
{
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    MIN-HEIGHT: calc(400 * var(--cms-factor));
}

#banner > IMG
{
    HEIGHT: 100%;
    LEFT: 0;
    OBJECT-FIT: cover;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100%;
}

#banner:after
{
    BACKGROUND: #793f00;
    CONTENT: "";
    INSET: 0;
    OPACITY: 0.35;
    MIX-BLEND-MODE: multiply;
    POINTER-EVENTS: none;
    POSITION: absolute;
}

#head-content
{
    COLOR: var(--cms-button-color);
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    PADDING: var(--tpl-hspacing);
    PLACE-SELF: center;
    TEXT-ALIGN: center;
}

#head-content *
{
    COLOR: inherit;
}

#logo
{
    MARGIN-BOTTOM: var(--cms-vspacing);
    MAX-WIDTH: 100%;
    WIDTH: calc(350 * var(--cms-factor));
}

#body
{
    BOX-SIZING: border-box;
    CONTAIN: content;
    MARGIN: 0 auto;
    PADDING: var(--cms-vspacing) var(--tpl-hspacing);
    WIDTH: var(--tpl-width);
}

#foot
{
    CONTAIN: content;
    FONT-FAMILY: "Carrois Gothic", sans-serif;
    FONT-SIZE: calc(15 * var(--cms-factor));
}

#foot-content
{
    BACKGROUND: var(--cms-button-background-alt);
    BOX-SIZING: border-box;
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    PADDING: var(--cms-vspacing) var(--tpl-hspacing);
    WIDTH: var(--tpl-width);
}

#foot-content *
{
    COLOR: var(--cms-button-color);
    FLEX-GROW: 1;
}

#foot-content:before,
#menu-meta:before
{
    BACKGROUND: var(--cms-button-background-alt);
    CONTENT: "";
    HEIGHT: 100%;
    LEFT: 50%;
    POSITION: absolute;
    TOP: 0;
    TRANSFORM: translateX(-50%);
    WIDTH: 100vw;
}

#menu-footer UL
{
    LIST-STYLE: none;
    MARGIN: 0;
}

#menu-footer LI
{
    MARGIN: 0;
}

#menu-footer A
{
    DISPLAY: block;
    TEXT-DECORATION: none;
}

#menu-footer UL UL A:hover
{
    TEXT-DECORATION: underline;
}

#menu-footer > UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
}

#menu-footer > UL > LI
{
    FLEX-GROW: 1;
}

#menu-footer > UL > LI > A,
#contact DIV.like-h3
{
    BORDER-BOTTOM: var(--cms-factor) solid var(--cms-button-color);
    FONT-FAMILY: var(--cms-h3-font-family);
    FONT-SIZE: var(--cms-h3-font-size);
    FONT-WEIGHT: var(--cms-h3-font-weight);
    LINE-HEIGHT: var(--cms-h3-line-height);
    MARGIN-BOTTOM: var(--cms-vpadding);
    PADDING-BOTTOM: var(--cms-vpadding);
}

#contact > P
{
    WIDTH: max-content;
}

#menu-meta
{
    BACKGROUND: var(--cms-background-alt);
    BOX-SIZING: border-box;
    MARGIN: 0 auto;
    PADDING: var(--cms-hspacing) var(--tpl-hspacing);
    WIDTH: var(--tpl-width);
}

#menu-meta:before
{
    BACKGROUND: var(--cms-background-alt);
}

#menu-meta A
{
    COLOR: var(--cms-color-alt);
}

#menu-meta A:hover
{
    COLOR: var(--cms-button-color);
}

#menu-meta UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vpadding) var(--cms-hpadding);
    JUSTIFY-CONTENT: center;
    LIST-STYLE: none;
    MARGIN: 0;
}

#menu-meta LI
{
    MARGIN: 0;
}