/* ======================================================
   SAFÌRA
   HEADER
   Luxury Edition
====================================================== */

:root{

    --sf-gold:#C6A56A;
    --sf-dark:#081C2C;
    --sf-white:#FFFFFF;
    --sf-shadow:0 12px 40px rgba(0,0,0,.10);

}

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

.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    padding:28px 0;

    background:transparent;

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;

}

.site-header.scrolled{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(14px);

    box-shadow:var(--sf-shadow);

    padding:18px 0;

}

/* ======================================================
LAYOUT
====================================================== */

.header-wrapper{

    display:grid;

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

    align-items:center;

    column-gap:40px;

}

.header-left{

    justify-self:start;

}

.header-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-right{

    justify-self:end;

    display:flex;

    align-items:center;

    gap:22px;

}

/* ======================================================
LOGO
====================================================== */

.custom-logo-link{

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}

.custom-logo{

    display:block;

    height:72px;

    width:auto;

    max-width:none;

    transition:
        height .35s ease,
        transform .35s ease;

}

.site-header.scrolled .custom-logo{

    height:60px;

}

.custom-logo:hover{

    transform:scale(1.02);

}

.logo-text{

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    color:#fff;

    letter-spacing:.08em;

}

.site-header.scrolled .logo-text{

    color:var(--sf-dark);

}

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

.main-menu{

    display:flex;

    align-items:center;

    gap:42px;

    margin:0;

    padding:0;

}

.main-menu li{

    list-style:none;

    position:relative;

}

.main-menu li::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--sf-gold);

    transition:width .30s ease;

}

.main-menu li:hover::after{

    width:100%;

}

.main-menu a{

    display:block;

    color:#fff;

    font-size:13px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    text-decoration:none;

    transition:color .30s ease;

}

.site-header.scrolled .main-menu a{

    color:var(--sf-dark);

}

.main-menu a:hover{

    color:var(--sf-gold);

}

/* ======================================================
LANGUAGE SELECTOR
====================================================== */

.header-languages{

    position:relative;

}

.language-dropdown{

    position:relative;

}

.language-current{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    background:none;

    border:0;

    padding:0;

    color:#fff;

    font-size:13px;

    font-weight:500;

    letter-spacing:1px;

    transition:.30s;

}

.site-header.scrolled .language-current{

    color:var(--sf-dark);

}

.language-current:hover{

    color:var(--sf-gold);

}

.language-current img{

    width:22px;

    height:22px;

    border-radius:50%;

    object-fit:cover;

}

.language-arrow{

    width:12px;

    height:12px;

    transition:transform .30s ease;

}

.language-dropdown.open .language-arrow{

    transform:rotate(180deg);

}

/* menu lingue */

.language-list{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    min-width:180px;

    margin:0;

    padding:8px 0;

    list-style:none;

    background:#fff;

    border-radius:14px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:all .28s ease;

    z-index:100;

}

.language-dropdown.open .language-list{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.language-list li{

    margin:0;

}

.language-list a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    text-decoration:none;

    color:var(--sf-dark);

    font-size:14px;

    transition:background .25s ease,color .25s ease;

}

.language-list a:hover{

    background:#F7F5F2;

    color:var(--sf-gold);

}

.language-list img{

    width:20px;

    height:20px;

    border-radius:50%;

}

/* ======================================================
BOOK BUTTON
====================================================== */

.book-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:50px;

    padding:0 30px;

    border:1px solid var(--sf-gold);

    border-radius:999px;

    background:var(--sf-gold);

    color:#fff;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    text-decoration:none;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}

.book-button:hover{

    transform:translateY(-2px);

    background:#d2b57b;

    box-shadow:0 10px 25px rgba(198,165,106,.30);

}

.site-header.scrolled .book-button{

    background:var(--sf-gold);

    color:#fff;

}

/* ======================================================
MENU TOGGLE
====================================================== */

.menu-toggle{

    display:none;

    background:none;

    border:0;

    padding:0;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px 0;

    background:#fff;

    transition:.30s;

}

.site-header.scrolled .menu-toggle span{

    background:var(--sf-dark);

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:90vw;

    height:100vh;

    background:#fff;

    box-shadow:-15px 0 40px rgba(0,0,0,.12);

    transition:right .35s ease;

    z-index:9998;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu-inner{

    padding:120px 40px 40px;

}

.mobile-nav{

    list-style:none;

    margin:0 0 40px;

    padding:0;

}

.mobile-nav li{

    margin-bottom:22px;

}

.mobile-nav a{

    display:block;

    text-decoration:none;

    color:var(--sf-dark);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:15px;

    transition:.30s;

}

.mobile-nav a:hover{

    color:var(--sf-gold);

}

.mobile-menu .hero-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:52px;

    border-radius:999px;

    background:var(--sf-gold);

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

}

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

@media (max-width:1100px){

    .header-wrapper{

        grid-template-columns:auto 1fr auto;

    }

    .header-left{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

    .book-button{

        display:none;

    }

}

@media (max-width:768px){

    .custom-logo{

        height:56px;

    }

    .site-header.scrolled .custom-logo{

        height:50px;

    }

    .header-wrapper{

        padding:0 20px;

    }

    .header-right{

        gap:16px;

    }

    .language-current span{

        display:none;

    }

}

@media (max-width:480px){

    .custom-logo{

        height:48px;

    }

    .site-header.scrolled .custom-logo{

        height:44px;

    }

    .mobile-menu{

        width:100%;

        max-width:100%;

    }

}