/* ==========================================================
   ELARA & CO EVENTS
   GLOBAL FOUNDATION
========================================================== */


:root {

    --elara-espresso: #2d211b;

    --elara-cocoa: #654a3b;

    --elara-taupe: #a68b75;

    --elara-gold: #c2a276;

    --elara-champagne: #e5d8c8;

    --elara-ivory: #f5f0e8;

    --elara-white: #fcfaf6;
    
    --body-copy-size: 15px;
    --body-copy-line-height: 1.8;
    
    --frame-radius: 10px;


    --font-display:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "Manrope",
        Arial,
        sans-serif;


    --page-padding:
        clamp(24px, 5vw, 88px);

}



/* ==========================================================
   RESET
========================================================== */


*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-width:
        320px;

    background:
        var(--elara-ivory);

    color:
        var(--elara-espresso);

    font-family:
        var(--font-body);

    -webkit-font-smoothing:
        antialiased;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    display:
        block;

    max-width:
        100%;

}



/* ==========================================================
   HEADER
========================================================== */


.site-header {

    position:
        relative;

    z-index:
        100;

    width:
        100%;

    min-height:
        96px;

    display:
        grid;

    grid-template-columns:
        200px
        1fr
        auto;

    align-items:
        center;

    gap:
        40px;

    padding:
        14px
        var(--page-padding);

    background:
        var(--elara-ivory);

    border-bottom:
        1px solid
        rgba(45, 33, 27, 0.14);

}



/* LOGO */


.site-logo {

    display:
        block;

    width:
        155px;

}


.site-logo img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}



/* NAVIGATION */


.desktop-nav {

    justify-self:
        center;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(20px, 2vw, 38px);

}


.desktop-nav a {

    position:
        relative;

    padding:
        7px 0;

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.desktop-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        1px;

    background:
        var(--elara-espresso);

    transition:
        width 0.3s ease;

}


.desktop-nav a:hover::after {

    width:
        100%;

}



/* ENQUIRE */


.header-enquire {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    padding:
        13px 17px;

    border:
        1px solid
        var(--elara-espresso);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}



/* ==========================================================
   BUTTONS
========================================================== */


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    min-width:
        210px;

    padding:
        17px 19px;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.button-dark {

    background:
        var(--elara-espresso);

    color:
        var(--elara-white);

}



/* ==========================================================
   FOOTER
========================================================== */


.site-footer {

    padding:
        70px
        var(--page-padding);

    background:
        var(--elara-espresso);

    color:
        var(--elara-ivory);

}


.footer-inner {

    max-width:
        1500px;

    margin:
        0 auto;

}


.footer-logo {

    width:
        155px;

    margin-bottom:
        25px;

}


.footer-inner p {

    max-width:
        370px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        28px;

    line-height:
        1.25;

}



/* ==========================================================
   GLOBAL RESPONSIVE
========================================================== */


@media (max-width: 1100px) {

    .desktop-nav {

        display:
            none;

    }


    .site-header {

        grid-template-columns:
            1fr
            auto;

    }

}


@media (max-width: 620px) {

    .site-header {

        min-height:
            78px;

    }


    .site-logo {

        width:
            120px;

    }


    .header-enquire {

        padding:
            11px 13px;

    }


    .header-enquire span:first-child {

        display:
            none;

    }

}