/* =========================================================
   UK MARRIAGE BUREAU
   HEADER COMPONENT CSS
   Premium Final Production Version
   Central System Compatible
   Fully Responsive + Luxury UI
========================================================= */

/* =========================
   TOP BAR
========================= */

.top-bar{
    background:
        radial-gradient(circle at top left, rgba(200,169,81,.10), transparent 30%),
        linear-gradient(
            180deg,
            #14584f 0%,
            #1d1f1f 100%
        );

    padding:8px 0;

    border-bottom:1px solid rgba(200,169,81,.15);

    position:relative;
    z-index:999;

    overflow:hidden;
}

.top-bar::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );

    pointer-events:none;
}

.top-bar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}

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

.logo-area{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-link{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo-img{
    width:74px;
    height:74px;
    object-fit:contain;

    filter:
        drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

.brand{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand-name{
    font-family:'Playfair Display',serif;

    color:var(--white);

    font-size:22px;
    font-weight:700;

    line-height:1.05;

    letter-spacing:-0.3px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.25);
}

.brand-tagline{
    color:var(--light-gold);

    font-size:11px;

    margin-top:3px;

    line-height:1.25;

    letter-spacing:.4px;

    opacity:.92;
}

/* =========================
   SOCIAL ICONS
========================= */

.social-icons{
    display:flex;
    align-items:center;
    gap:10px;
}

.social-icon{
    width:36px;
    height:36px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--white);

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

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

.social-icon:hover{
    background:var(--luxury-gold);

    color:var(--emerald);

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 10px 18px rgba(200,169,81,.35);
}

/* =========================
   NAVBAR
   Final Seam / Divider Fix
========================= */

.main-nav{
    isolation:isolate;

    background:
        linear-gradient(
            180deg,
            #f6f1e7 0%,
            #ece4d6 100%
        );

    padding:12px 0;

    position:sticky;
    top:0;

    z-index:998;

    margin-bottom:-2px;

    border-bottom:none;

    box-shadow:
        0 2px 4px rgba(0,0,0,.02),
        0 8px 20px rgba(0,0,0,.04);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    transform:translateZ(0);
    will-change:transform;
}

.main-nav .container{
    display:flex;
    align-items:center;
    gap:18px;
}

/* =========================
   MOBILE TOGGLE
========================= */

.mobile-toggle{
    display:none;
}

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

.nav-menu{
    display:flex;
    align-items:center;

    gap:14px;

    flex:1;

    padding-left:0;
    margin-left:0;

    list-style:none;
}

.nav-item{
    position:relative;
}

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

.nav-link-3d{
    width:150px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #146157 0%,
            #0d4b44 100%
        );

    color:var(--white);

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 10px 20px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        filter .30s ease;
}

.nav-link-3d::before{
    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:.55s;
}

.nav-link-3d:hover::before{
    left:120%;
}

.nav-link-3d:hover{
    transform:
        translateY(-5px)
        scale(1.02);

    box-shadow:
        0 16px 30px rgba(0,0,0,.22),
        0 6px 14px rgba(0,0,0,.12);

    filter:brightness(1.06);
}

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

.auth-buttons{
    display:flex;
    gap:12px;

    margin-left:auto;
}

.btn-login,
.btn-signup{
    width:115px;
    height:44px;

    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:700;

    letter-spacing:.5px;

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

.btn-login{
    background:#090909;

    border:2px solid var(--luxury-gold);

    color:var(--luxury-gold);

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.btn-signup{
    background:var(--luxury-gold);

    color:var(--white);

    box-shadow:
        0 10px 20px rgba(200,169,81,.30);
}

.btn-login:hover,
.btn-signup:hover{
    transform:translateY(-4px);
}

.btn-login:hover{
    background:#111;
}

.btn-signup:hover{
    filter:brightness(1.05);
}

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

.dropdown-menu-3d{
    position:absolute;

    top:calc(100% + 10px);
    left:0;

    min-width:260px;

    padding:0;

    background:transparent;

    border:none;

    border-radius:0;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index:997;
}

.nav-item:hover > .dropdown-menu-3d{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================
   SUBMENU
========================= */

.has-submenu{
    position:relative;
}

.dropdown-submenu{
    position:absolute;

    top:0;
    left:calc(100% + 10px);

    min-width:260px;

    padding:0;

    background:transparent;

    border:none;

    opacity:0;
    visibility:hidden;

    transform:translateX(10px);

    transition:
        opacity .25s ease,
        transform .25s ease;

    z-index:998;
}

.has-submenu:hover > .dropdown-submenu{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

/* =========================
   DROPDOWN LINKS
   Gap between tabs: 2px only
   Text alignment: slightly left of center (padding-left larger than padding-right)
========================= */

.dropdown-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    width:100%;
    min-height:46px;

    padding:10px 20px 10px 28px;

    margin-bottom:2px;

    background:
        linear-gradient(
            180deg,
            #14584f,
            #0d4a43
        );

    color:var(--white);

    border-radius:999px;

    font-size:13px;
    font-weight:700;

    border:1px solid rgba(200,169,81,.82);

    box-shadow:
        0 8px 16px rgba(0,0,0,.14),
        0 3px 8px rgba(0,0,0,.08);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

    cursor:pointer;
    text-decoration:none;

    gap:8px;
}

.dropdown-link:last-child{
    margin-bottom:0;
}

.dropdown-link:hover{
    transform:
        translateX(5px);

    border-color:var(--light-gold);

    filter:brightness(1.10);

    box-shadow:
        0 14px 24px rgba(0,0,0,.18),
        0 6px 12px rgba(0,0,0,.12);
}

/* =========================
   SUBMENU ARROW
========================= */

.has-arrow{
    position:relative;
}

.submenu-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-size:16px;
    font-weight:700;

    color:var(--light-gold);

    margin-left:auto;

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

    flex-shrink:0;
}

.dropdown-link:hover .submenu-arrow{
    transform:translateX(3px);

    color:var(--white);
}

/* =========================
   SLIDER BAR
========================= */

.slider-bar{
    overflow:hidden;

    white-space:nowrap;

    background:
        linear-gradient(
            180deg,
            #ece4d6 0%,
            #262727 18%,
            #1d1e1e 100%
        );

    padding:10px 0;

    border-top:1px solid rgba(255,255,255,.04);
}

.slider-track{
    display:flex;

    gap:42px;

    width:max-content;

    animation:sliderMove 22s linear infinite;
}

.slider-track span{
    color:var(--light-gold);

    font-size:12px;

    font-weight:600;

    letter-spacing:.2px;
}

@keyframes sliderMove{
    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

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

@media(max-width:991px){

    .top-bar{
        padding:8px 0;
    }

    .top-bar-inner{
        flex-direction:row;

        justify-content:space-between;
        align-items:center;

        gap:12px;
    }

    .logo-area{
        flex:1;

        gap:10px;
    }

    .logo-img{
        width:62px;
        height:62px;
    }

    .brand-name{
        font-size:17px;
    }

    .brand-tagline{
        font-size:10px;
    }

    .social-icons{
        gap:6px;
    }

    .social-icon{
        width:28px;
        height:28px;

        font-size:12px;
    }

    .mobile-toggle{
        display:flex;

        width:44px;
        height:44px;

        flex-direction:column;

        justify-content:center;
        align-items:center;

        cursor:pointer;
    }

    .mobile-toggle span{
        display:block;

        width:22px;
        height:3px;

        background:var(--emerald);

        margin:3px 0;

        border-radius:10px;

        transition:.25s ease;
    }

    .main-nav .container{
        flex-wrap:wrap;
    }

    .nav-menu{
        display:none;

        width:100%;

        flex-direction:column;

        gap:10px;

        margin-top:14px;
    }

    .nav-menu.active{
        display:flex;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-link-3d{
        width:100%;
        height:46px;
    }

    .auth-buttons{
        width:100%;

        margin-top:10px;

        flex-direction:column;
    }

    .btn-login,
    .btn-signup{
        width:100%;
    }

    .dropdown-menu-3d,
    .dropdown-submenu{
        position:static;

        opacity:1;
        visibility:visible;

        transform:none;

        display:none;

        width:100%;

        margin-top:8px;
    }

    .dropdown-menu-3d.show,
    .dropdown-submenu.show{
        display:block;
    }

    .dropdown-link{
        padding:10px 20px 10px 24px;
        justify-content:flex-start;
        margin-bottom:2px;
    }

    .submenu-arrow{
        margin-left:auto;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:576px){

    .top-bar-inner{
        flex-direction:column;

        gap:8px;
    }

    .logo-area{
        justify-content:center;
    }

    .brand{
        align-items:center;
        text-align:center;
    }

    .logo-img{
        width:54px;
        height:54px;
    }

    .brand-name{
        font-size:16px;
    }

    .brand-tagline{
        font-size:9px;
    }

    .social-icon{
        width:24px;
        height:24px;
    }

    .nav-link-3d{
        font-size:12px;
    }

    .btn-login,
    .btn-signup{
        height:42px;
    }

    .dropdown-link{
        padding:10px 16px 10px 20px;
        margin-bottom:2px;
    }
}