/* public/css/navbar.css */

/* =============================================================================
 * (0) ROOT VARIABLES (Theme + Sizes)
 * ============================================================================= */
:root{
    /* Brand */
    --brand:#c99a12;

    /* Text & UI */
    --text:#1f2937;
    --border:rgba(15,23,42,.10);

    /* Shadows */
    --shadow:0 18px 40px rgba(0,0,0,.12);
    --nav-shadow:
        0 10px 26px rgba(0,0,0,.10),
        0 2px 0 rgba(201,154,18,.08);

    /* Gradient whites */
    --w1:#ffffff;
    --w2:#fbfbfb;
    --w3:#f3f4f6;
    --w4:#ffffff;

    /* Navbar height (used for body padding-top) */
    --nav-h:82px;
}

/* =============================================================================
 * (1) BASE (page base rules)
 * ============================================================================= */
html, body{
    margin:0;
    padding:0;
    width:100%;
    font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    overflow-x:hidden;
}

/* (Optional) hide page scrollbar */
body::-webkit-scrollbar{ width:0; height:0; }
body{ scrollbar-width:none; }

/* لأن الناف بار fixed وما يحجز مكان */
body{ padding-top: var(--nav-h); }

/* =============================================================================
 * (2) NAVBAR WRAPPER (fixed + cool gradient + shimmer + light sweep)
 * ============================================================================= */
.site-navbar{
    position:fixed;
    top:0; left:0; right:0;
    width:100%;
    z-index:9999;

    border-bottom:1px solid var(--border);
    box-shadow: var(--nav-shadow);

    /* مهم لخلط الإضاءة (mix-blend-mode) بدون ما يأثر على الصفحة */
    isolation:isolate;

    /* خلفية متحركة (تدرج أبيض) */
    background: linear-gradient(
        90deg,
        var(--w1) 0%,
        var(--w2) 28%,
        var(--w3) 55%,
        var(--w4) 100%
    );
    background-size:240% 100%;

    /* حركة الإخفاء/الإظهار عند السكرول */
    transition: transform .25s ease;
    will-change: transform;

    /* ✅ تشغيل حركتين:
       1) gradientFlow مستمرة
       2) navIn دخول مرة واحدة من اليمين لليسار */
    animation:
      gradientFlow 10s ease-in-out infinite,
      navIn .55s cubic-bezier(.22,.9,.28,1) both;
}

/* يخفي الناف بار عند النزول للأسفل */
.site-navbar.is-hidden{
    transform: translateY(-110%);
}

/* تدرج متحرك */
@keyframes gradientFlow{
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* دخول ناعم من اليمين لليسار */
@keyframes navIn{
    from{
        transform: translateX(60px);
        opacity: 0;
        filter: blur(6px);
    }
    to{
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* =============================================================================
 * (2.1) SHIMMER (لمعة ناعمة) - Right to Left
 * ============================================================================= */
.site-navbar::before{
    content:"";
    position:absolute;
    inset:-2px;
    pointer-events:none;
    z-index:1;

    /* لمعة بيضاء ناعمة */
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.95) 46%,
        transparent 72%
    );

    /* تبدأ من اليمين وتمشي لليسار */
    transform: translateX(85%);
    animation: shimmerRtl 5.8s ease-in-out infinite;

    opacity:.85;
    mix-blend-mode: screen;
}

@keyframes shimmerRtl{
    0%   { transform: translateX(85%);  opacity:.25; }
    35%  { opacity:.95; }
    50%  { opacity:1; }
    100% { transform: translateX(-85%); opacity:.25; }
}

/* =============================================================================
 * (2.2) LIGHT SWEEP (ضوء ساطع قوي) - Right to Left
 * ============================================================================= */
.site-navbar::after{
    content:"";
    position:absolute;
    inset:-10px;
    pointer-events:none;
    z-index:1;

    /* “ضوء” مركز + ناعم */
    background:
      radial-gradient(220px 60px at 100% 50%,
        rgba(184, 9, 9, 0.85) 0%,
        rgba(255,255,255,.45) 35%,
        rgba(255,255,255,0) 70%);

    transform: translateX(70%);
    animation: lightSweep 4.6s linear infinite;

    opacity:.9;
    mix-blend-mode: screen;
    filter: blur(.2px);
}

@keyframes lightSweep{
    from{ transform: translateX(70%); }
    to  { transform: translateX(-70%); }
}

/* =============================================================================
 * (3) CONTAINER LAYERING (ensure content over light)
 * ============================================================================= */
.site-navbar .container-fluid{
    margin:0 !important;
    padding:0 !important;
    width:100%;
    position:relative;
    z-index:2; /* ✅ فوق اللمعة */
}

/* =============================================================================
 * (4) NAV SHELL (layout)
 * ============================================================================= */
.nav-shell{
    position:relative;
    min-height:74px;
    display:flex;
    align-items:center;
    width:100%;
}

/* Logo (right) */
.nav-brand-right{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    z-index:3;
}
.nav-brand-right img{
    height:48px;
    width:auto;
    display:block;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.10));
}

/* Toggler (left) */
.navbar-toggler{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(15,23,42,.12);
    box-shadow:none !important;
    z-index:3;
}

/* =============================================================================
 * (4.1) CENTER AREA (center collapse on desktop)
 * ============================================================================= */
.nav-center{
    width:100%;
    padding:0 72px; /* مساحة للشعار والزر */
}

@media (min-width: 992px){
    .nav-center{
        position:absolute;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        pointer-events:none;
        padding:0;
        z-index:2;
    }
    .nav-center .navbar-collapse{
        pointer-events:auto;
    }
}

/* =============================================================================
 * (5) NAV LINKS (underline + hover lift)
 * ============================================================================= */
.site-navbar .nav-link{
    color:var(--text);
    font-weight:700;
    font-size:15.5px;
    padding:18px 14px;
    position:relative;
    white-space:nowrap;
    transition: color .2s ease, transform .2s ease;
}

.site-navbar .nav-link:hover{
    color:var(--brand);
    transform: translateY(-1px);
}

/* خط سفلي أنيق */
.site-navbar .nav-link::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:9px;
    height:2px;
    background:var(--brand);
    transform:scaleX(0);
    transform-origin:right;
    transition: transform .22s ease;
}

.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after{
    transform:scaleX(1);
}

.site-navbar .nav-link.active{ color:var(--brand); }

/* =============================================================================
 * (6) DROPDOWN BASE (clean + shadow)
 * ============================================================================= */
.dropdown-menu{
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    border-radius:14px;
    padding:8px;
    min-width:260px;
    text-align:center;
    z-index:10000;
}

.dropdown-item{
    font-weight:600;
    border-radius:10px;
    padding:10px 14px;
}

.dropdown-item:hover{
    background: rgba(201,154,18,.10);
    color: var(--brand);
}

/* Desktop: open dropdown on hover */
@media (min-width: 992px){
    .navbar .dropdown:hover > .dropdown-menu{
        display:block;
        margin-top:0;
    }
}

/* =============================================================================
 * (6.1) LONG DROPDOWN (scroll inside + footer arrow)
 * ============================================================================= */
.dropdown-menu.long-menu{
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    overflow: hidden;
}

.dropdown-menu.long-menu .long-scroll{
    max-height: 380px;
    overflow: auto;
    padding: 6px;
    border-radius: 12px;
}

/* hide scrollbar inside long scroll */
.dropdown-menu.long-menu .long-scroll::-webkit-scrollbar{ width:0; height:0; }
.dropdown-menu.long-menu .long-scroll{ scrollbar-width:none; }

/* footer يظهر فقط عندما القائمة قابلة للتمرير (JS يتحكم) */
.dropdown-menu.long-menu .long-footer{
    position: relative;
    padding: 10px 8px 8px;
    margin-top: 6px;
    display: none; /* JS toggles */
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* fade فوق الفوتر */
.dropdown-menu.long-menu .long-footer::before{
    content:"";
    position:absolute;
    left:-10px;
    right:-10px;
    top:-18px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events:none;
}

/* arrow button */
.long-arrow-btn{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: transform .15s ease, border-color .15s ease;
    position: relative;
}
.long-arrow-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(201,154,18,.35);
}

.long-arrow-btn svg{
    width: 20px;
    height: 20px;
    opacity: .85;
    position:absolute;
}

/* down arrow default */
.long-arrow-btn .icon-up{ display:none; }
.long-arrow-btn .icon-down{
    animation: arrowBounce 1.6s ease-in-out infinite;
}

@keyframes arrowBounce{
    0%   { transform: translateY(0); opacity:.55; }
    50%  { transform: translateY(5px); opacity:1; }
    100% { transform: translateY(0); opacity:.55; }
}

/* to end button */
.long-end-btn{
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    color: rgba(31,41,55,.75);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    cursor:pointer;
    transition: transform .15s ease, border-color .15s ease;
}
.long-end-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(201,154,18,.35);
}

/* When at bottom => arrow becomes UP */
.long-footer.at-bottom .long-arrow-btn .icon-down{ display:none; }
.long-footer.at-bottom .long-arrow-btn .icon-up{ display:block; animation:none; }

/* =============================================================================
 * (7) MOBILE (compact)
 * ============================================================================= */
@media (max-width: 991.98px){
    .nav-shell{ min-height:68px; }
    .nav-brand-right{ right:12px; }
    .navbar-toggler{ left:12px; }

    .site-navbar .nav-link{
        padding:12px 10px;
        font-size:15px;
    }

    .dropdown-menu{ text-align:right; }

    .dropdown-menu.long-menu{ width: 92vw; }
    .dropdown-menu.long-menu .long-scroll{ max-height: 55vh; }

    :root{ --nav-h:72px; }
}

/* =============================================================================
 * (8) OPTIONAL: reduce motion
 * ============================================================================= */
@media (prefers-reduced-motion: reduce){
    .site-navbar{
        animation: none !important;
        transition:none !important;
    }
    .site-navbar::before,
    .site-navbar::after{
        animation:none !important;
    }
}