/**
 * OMNIUM Components — Reusable UI elements
 * © Omar Dakhane
 */

/* ═══ HEADER ═══ */
.hdr {
    position:fixed; top:0; left:0; right:0; z-index:200;
    padding:1.8rem 0; transition:all 0.6s var(--ease);
}
/* CRITICAL: Force space below fixed header on ALL pages */
.hdr + main,
.hdr + .omnium-main,
.hdr + .omnium-shop,
.hdr ~ main,
.hdr ~ .omnium-main {
    margin-top: 0; /* reset any margin */
}
/* Admin bar adjustment */
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .hdr { top: 46px; }
}
.hdr.scrolled {
    padding:0.8rem 0;
    background:rgba(3,3,3,0.92);
    backdrop-filter:blur(40px) saturate(1.4);
    -webkit-backdrop-filter:blur(40px) saturate(1.4);
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.hdr-in {
    width:var(--container); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
}
.logo-wrap { display:flex; align-items:center; gap:1rem; }
.logo-icon { height:32px; width:auto; }
.logo-txt {
    font-family:var(--serif); font-size:1.3rem; font-weight:400;
    color:var(--white); letter-spacing:0.12em;
}
.logo-txt i { font-style:italic; color:var(--gold); }
.nav-main { display:flex; align-items:center; gap:2.5rem; }
.nav-a {
    font-size:var(--fs-nav, 0.68rem); font-weight:500; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--dim);
    position:relative; padding:0.4rem 0; transition:color 0.4s;
}
.nav-a:hover { color:var(--white); }
.nav-a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:1px; transition:width 0.4s var(--ease), background 0.3s;
}
.nav-a:hover::after { width:100%; }
.nav-a[data-c="v"]:hover::after{background:var(--gold)}
.nav-a[data-c="l"]:hover::after{background:var(--mint)}
.nav-a[data-c="s"]:hover::after{background:var(--ember)}
.nav-a[data-c="m"]:hover::after{background:var(--iris)}
.nav-a[data-c="a"]:hover::after{background:var(--white)}
.cart-a { position:relative; padding:0.4rem; color:var(--dim); transition:color 0.3s; }
.cart-a:hover { color:var(--white); }
.cart-a svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; }
.cart-n {
    position:absolute; top:-2px; right:-6px; min-width:15px; height:15px;
    border-radius:8px; background:var(--gold); color:var(--black);
    font-size:0.5rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
/* Right side of header — cart + hamburger */
.hdr-right {
    display:flex; align-items:center; gap:1rem;
}
.mob-btn {
    display:none; background:none; border:none; cursor:pointer;
    padding:0.5rem; flex-direction:column; gap:5px;
}
.mob-btn span { width:26px; height:1px; background:var(--white); display:block; transition:all 0.4s var(--ease); }

/* ═══ BUTTONS ═══ */
.btn {
    font-family:var(--sans); font-size:0.68rem; font-weight:600;
    letter-spacing:0.2em; text-transform:uppercase;
    padding:1.2rem 3rem; position:relative; overflow:hidden;
    cursor:pointer; border:none; transition:all 0.5s var(--ease);
    display:inline-block; text-align:center;
}
.no-cursor .btn { cursor:pointer; }
.btn-fill {
    background:var(--gold); color:var(--black);
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.btn-fill::before {
    content:''; position:absolute; inset:0;
    background:var(--white); transform:translateY(101%);
    transition:transform 0.5s var(--ease);
}
.btn-fill:hover::before { transform:translateY(0); }
.btn-fill span { position:relative; z-index:1; }
.btn-line {
    background:transparent; color:var(--soft);
    border:1px solid var(--border);
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.btn-line:hover { border-color:var(--gold); color:var(--gold); }

/* ═══ SECTION BADGES ═══ */
.hs-badge, .sc-badge {
    font-family:var(--mono); font-size:0.5rem;
    letter-spacing:0.15em; text-transform:uppercase;
    padding:0.3rem 0.7rem; border-radius:3px;
    display:inline-block;
}
.hb-v, .badge-v { background:rgba(201,168,76,0.12); color:var(--gold); }
.hb-l, .badge-l { background:rgba(0,232,162,0.1); color:var(--mint); }
.hb-s, .badge-s { background:rgba(255,94,58,0.1); color:var(--ember); }
.hb-m, .badge-m { background:rgba(147,129,255,0.1); color:var(--iris); }

/* ═══ FOOTER ═══ */
.ftr { border-top:1px solid var(--border); padding:5rem 0 3rem; }
.ftr-in { width:var(--container); margin:0 auto; }
.ftr-grid { display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr 1fr; gap:3rem; margin-bottom:5rem; }
.ftr-brand p { font-size:0.85rem; color:var(--muted); font-weight:300; line-height:1.8; margin-top:1.5rem; max-width:340px; }
.ftr-col h5 { font-family:var(--mono); font-size:var(--fs-mono, 0.58rem); letter-spacing:0.25em; text-transform:uppercase; color:var(--dim); margin-bottom:1.5rem; }
.ftr-col ul { list-style:none; }
.ftr-col li { margin-bottom:0.75rem; }
.ftr-col a { font-size:var(--fs-small, 0.85rem); color:var(--muted); font-weight:300; transition:color 0.3s; }
.ftr-col a:hover { color:var(--gold); }
.ftr-btm { display:flex; justify-content:space-between; align-items:center; padding-top:3rem; border-top:1px solid var(--border); }
.ftr-copy { font-family:var(--mono); font-size:0.6rem; color:var(--muted); letter-spacing:0.08em; }
.ftr-soc { display:flex; gap:1rem; }
.ftr-soc a { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:all 0.4s var(--ease); }
.ftr-soc a:hover { border-color:var(--gold); transform:translateY(-3px); }
.ftr-soc svg { width:13px; height:13px; stroke:var(--muted); stroke-width:1.5; fill:none; transition:stroke 0.3s; }
.ftr-soc a:hover svg { stroke:var(--gold); }

/* ═══ SCROLL REVEAL ═══ */
.sr { opacity:0; transform:translateY(60px); transition:all 1s var(--ease); }
.sr.vis { opacity:1; transform:translateY(0); }
.srd1{transition-delay:0.1s} .srd2{transition-delay:0.2s}
.srd3{transition-delay:0.3s} .srd4{transition-delay:0.4s}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px) {
    .ftr-grid { grid-template-columns:1fr 1fr 1fr; }
    .ftr-brand { grid-column:1/-1; }
}
@media(max-width:768px) {
    .nav-main { display:none; }
    .nav-main.nav-open {
        display:flex; flex-direction:column;
        position:fixed;
        top:0; left:0;
        width:100vw; height:100vh;
        background:var(--black);
        z-index:9990;
        align-items:center; justify-content:center; gap:2.5rem;
        padding: 5rem 2rem;
        overscroll-behavior: contain;
    }
    .nav-main.nav-open .nav-a {
        font-size:1.4rem; color:var(--white); letter-spacing:0.1em;
    }
    body.menu-open {
        overflow:hidden !important;
        position:fixed !important;
        width:100% !important;
        height:100% !important;
    }
    .mob-btn { display:flex; }
    .hdr-right { z-index:9991; }
    .hdr { z-index:9992; }
    .ftr-grid { grid-template-columns:1fr 1fr; }
    .ftr-btm { flex-direction:column; gap:1.5rem; text-align:center; }
}