/* ─────────────────────────  header.css  ──────────────────────────
   Dark navigation bar with mobile drawer + pre‑loader
   (fixed hamburger‑off‑screen bug)
   ---------------------------------------------------------------- */

/* 0. Colour & z‑layers */
:root{
    --gold:       #d4af37;
    --gold-dark:  #b88700;
    --black:      #000;
    --grey:       #666;
    --white:      #fff;
    --shadow:     0 2px 6px rgba(0,0,0,.12);
    --z-preloader:9999;
    --z-header:   1000;
}

body{font-family:'Poppins',sans-serif;color:var(--black);overflow-x:hidden;}  /* ← stop sideways scroll */

/* ╔══ PRE‑LOADER ══╗ */
#preloader{
    position:fixed;inset:0;display:grid;place-items:center;
    background:var(--white);z-index:var(--z-preloader);
    transition:opacity .5s ease;
}
#preloader.loaded{opacity:0;pointer-events:none;}
.spinner{
    width:48px;height:48px;border:4px solid var(--gold);
    border-top-color:transparent;border-radius:50%;
    animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ╔══ TOP CONTACT STRIP ══╗ */
.top-strip{
    background:var(--gold);color:var(--black);font-size:.9rem;
}
.top-strip .container{
    max-width:1200px;margin:auto;padding:.45rem 1rem;
    display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
}
.top-strip a{color:inherit;text-decoration:none;font-weight:500;}
.top-strip a:hover{text-decoration:underline;}

/* ╔══ MAIN NAV BAR ══╗ */
.site-header{
    position:sticky;top:0;z-index:var(--z-header);
    background:var(--black);box-shadow:var(--shadow);
}
.site-header .container{
    max-width:1200px;margin:auto;padding:.8rem 1rem;
    display:flex;align-items:center;justify-content:space-between;
}

/* Brand */
.brand img{width:170px;height:auto;display:block;}
@media(max-width:360px){.brand img{width:140px;}}

/* Desktop nav list */
.main-nav ul{display:flex;gap:2rem;list-style:none;margin:0;}
.main-nav a{
    color:var(--gold);text-decoration:none;font-weight:500;position:relative;
}
.main-nav a::after{
    content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
    background:var(--gold);transition:.3s;
}
.main-nav a:hover::after{width:100%;}

/* ╔══ HAMBURGER BUTTON ══╗ */
.nav-toggle{
    display:none;flex-direction:column;gap:6px;background:none;border:0;
    width:32px;padding:0;cursor:pointer;
    position:relative;z-index:calc(var(--z-header) + 2);   /* ← keeps button on top */
}
.nav-toggle span{
    height:3px;width:100%;background:var(--gold);border-radius:2px;transition:.3s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);border:0;}

/* ╔══ MOBILE DRAWER ══╗ */
@media(max-width:992px){
    .nav-toggle{display:flex;}          /* show hamburger */

    /* Drawer panel */
    .main-nav{
        position:fixed;top:0;right:0;bottom:0;width:260px;max-width:75%;
        background:#111;color:#fff;box-shadow:-4px 0 12px rgba(0,0,0,.4);
        transform:translateX(100%);transition:transform .4s ease;
        padding:5rem 1.5rem;overflow-y:auto;
    }
    .main-nav ul{flex-direction:column;gap:1.6rem;}
    .main-nav a{font-size:1.1rem;}

    /* Drawer open state */
    .main-nav.open{transform:translateX(0);}

    /* Dimmed backdrop */
    .drawer-backdrop{
        content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);
        z-index:calc(var(--z-header) + 1);opacity:0;pointer-events:none;
        transition:opacity .4s;
    }
    body.drawer-active .drawer-backdrop{opacity:1;pointer-events:auto;}
}

/* JavaScript helper class to activate backdrop */