/* ──────────────────────────────────────────────────────────
   FictionX – Navigation Enhancements (lightweight)
   Subtle polish + motion ON TOP OF the existing top-nav style.
   Keeps the original look intact, only adds micro-interactions.
   ────────────────────────────────────────────────────────── */

/* ====== Top-level menu items ====== */

/* Smoother color transition (the template uses no transition by default) */
.top-nav > ul > li > a,
.top-nav > ul > li > span > a{
    transition:color .25s ease;
}

/* Animated brand-color underline on hover (slides in from center) */
.top-nav > ul > li > a,
.top-nav > ul > li > span > a{
    position:relative;
}
.top-nav > ul > li > a::after,
.top-nav > ul > li > span > a::after{
    /* Don't collide with FontAwesome caret of .hasChildren > a:after */
    content:"" !important;
}
.top-nav > ul > li:not(.hasChildren) > a::after,
.top-nav > ul > li:not(.hasChildren) > span > a::after{
    content:"" !important;
    position:absolute;
    left:50%;right:auto;bottom:-6px;
    width:0;height:2px;
    background:#a51313;
    border-radius:4px;
    opacity:0;
    transition:width .32s cubic-bezier(.22,.61,.36,1),
               left .32s cubic-bezier(.22,.61,.36,1),
               opacity .2s ease;
    pointer-events:none;
}
.top-nav > ul > li:not(.hasChildren):hover > a::after,
.top-nav > ul > li:not(.hasChildren):hover > span > a::after,
.top-nav > ul > li.selected:not(.hasChildren) > a::after,
.top-nav > ul > li.selected:not(.hasChildren) > span > a::after{
    width:60%;
    left:20%;
    opacity:1;
}

/* For hasChildren items: tiny dot below instead (caret already serves) */
.top-nav > ul > li.hasChildren > a,
.top-nav > ul > li.hasChildren > span > a{
    position:relative;
}
.top-nav > ul > li.hasChildren > a > i.fx-dot,
.top-nav > ul > li.hasChildren > span > a > i.fx-dot{display:none;} /* reserved */

/* Smoother caret rotation (the template rotates abruptly) */
.top-nav > ul > li.hasChildren > a:after,
.top-nav > ul > li.hasChildren > span > a:after{
    transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
    opacity:.7;
}
.top-nav > ul > li.hasChildren:hover > a:after,
.top-nav > ul > li.hasChildren:hover > span > a:after{opacity:1;}

/* Sub-line under "السلطان قابوس" → polish typography */
.top-nav > ul > li > a > p,
.top-nav > ul > li > span > a > p{
    margin:1px 0 0 !important;
    font-size:9px !important;
    font-weight:500 !important;
    letter-spacing:.4px;
    color:#7d7d7d;
    line-height:1.1 !important;
    opacity:.95;
    transition:color .25s ease,opacity .25s ease;
}
.top-nav > ul > li:hover > a > p,
.top-nav > ul > li:hover > span > a > p{
    color:#a51313;
    opacity:1;
}

/* ====== Dropdown panel polish ====== */

.top-nav ul li ul{
    /* Soften corners + add layered shadow on top of the template's defaults.
       NOTE: do NOT set overflow:hidden here — it clips nested 3rd-level
       submenus that are absolutely positioned at left:100% (or right:100%
       in RTL) and would otherwise disappear. */
    border-radius:4px !important;
    box-shadow:
        0 2px 6px rgba(15,23,42,.04),
        0 14px 32px rgba(15,23,42,.10) !important;
    /* Smoother open/close curve */
    transition:opacity .28s ease,
               transform .32s cubic-bezier(.22,.61,.36,1),
               visibility .28s ease !important;
}

/* Tiny stagger feel by easing the slide a bit longer */
.top-nav ul li:hover > ul{transition-duration:.28s,.32s,.28s !important;}

/* Inner submenu items: smooth slide + subtle background on hover */
.top-nav li li a{
    transition:background .2s ease,color .2s ease,padding .25s ease !important;
}
.top-nav li li a:hover{
    padding-inline-start:22px !important;
}

/* Cleaner separators between submenu items (very subtle) */
.top-nav li li + li > a{
    border-top:1px solid rgba(0,0,0,.04);
}
.top-nav li li:first-child > a{border-top:0 !important;}

/* ====== Third-level (nested) submenu — RTL/LTR direction-aware ====== */
/* The template's default positions 3rd-level dropdowns at left:100% which
   makes them slide off-screen in RTL pages (Arabic). Flip them so they
   always open toward the inner side of the page. */
[dir="rtl"] .top-nav ul li ul ul{
    left:auto !important;
    right:100% !important;
    border-left-width:0 !important;
    border-right-style:solid;
    border-right-width:3px;
    -webkit-transform:translate3d(-30px,0,0);
    transform:translate3d(-30px,0,0);
}
[dir="rtl"] .top-nav ul li ul li:hover > ul{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}

/* Hover bridge: prevents the 3rd-level submenu from collapsing while the
   cursor crosses the small gap between the 2nd-level item and the panel. */
.top-nav ul li ul li > ul::before{
    content:"";
    position:absolute;top:0;width:14px;height:100%;
    background:transparent;
}
.top-nav ul li ul li > ul::before{inset-inline-end:100%;}

/* ====== Search icon micro-interaction ====== */

.top-search > a{
    transition:transform .22s ease,color .2s ease;
    display:inline-flex;align-items:center;justify-content:center;
}
.top-search > a:hover{
    transform:scale(1.08);
}
.top-search > a:active{transform:scale(.96);}
.top-search > a:focus-visible{
    outline:2px solid rgba(165,19,19,.45);
    outline-offset:3px;
    border-radius:50%;
}

/* Search input focus polish */
.top-search .search-box input.txt-box{
    transition:box-shadow .2s ease,border-color .2s ease;
}
.top-search .search-box input.txt-box:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(165,19,19,.12);
}

/* ====== Logo subtle interaction ====== */

.top-head .logo a img{
    transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
    will-change:transform;
}
.top-head .logo a:hover img{
    transform:scale(1.03);
}
.top-head .logo a:focus-visible img{
    outline:2px solid rgba(165,19,19,.4);
    outline-offset:4px;
}

/* ====== Entrance fade-in for the whole top-head once on load ====== */
@keyframes fxNavFadeIn{
    from{opacity:0;transform:translateY(-6px);}
    to  {opacity:1;transform:translateY(0);}
}
/* `backwards`, not `both`: a fill that keeps transform:translateY(0) after the
   animation would make the header a stacking context at level 0 and trap the
   dropdowns (z-index:999) beneath the slideshow. */
.top-head[data-sticky="true"]{animation:fxNavFadeIn .55s ease-out backwards;}

/* ====== Dropdowns above the slideshow ======
   Revolution Slider layers use 3D transforms and z-index up to 100 (arrows)
   and 333 (section jumper). Safari can paint 3D-transformed content above
   higher z-index siblings, so isolate the slider in its own flat layer at
   z-index 0 and lift the menus explicitly. */
.rev_slider_wrapper{
    position:relative;
    z-index:0;
    isolation:isolate;
}
.top-nav ul ul,
.top-nav li.mega-menu > ul,
.top-nav li.mega-menu > div{z-index:1001 !important;}
.top-head.sticky-nav{z-index:1000 !important;}

/* ====== Responsive niceties ====== */
@media (max-width:1100px){
    .top-nav > ul > li:not(.hasChildren):hover > a::after,
    .top-nav > ul > li:not(.hasChildren):hover > span > a::after{width:55%;left:22.5%;}
}
/* Small desktops (993–1199px): six items + search don't fit with the theme's
   15px item padding, so the last item wrapped under the bar and pushed the
   search button over the page content. Tighten spacing to keep one row. */
@media (min-width:993px) and (max-width:1199px){
    .top-nav > ul > li{padding-left:8px !important;padding-right:8px !important;}
    .top-nav > ul > li > a,
    .top-nav > ul > li > span > a{letter-spacing:0 !important;}
    .top-head .logo a img{max-width:140px;height:auto !important;}
}
@media (min-width:993px) and (max-width:1023px){
    .top-nav > ul > li{padding-left:6px !important;padding-right:6px !important;}
}
@media (max-width:768px){
    .top-nav > ul > li > a::after,
    .top-nav > ul > li > span > a::after{display:none;}
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion:reduce){
    .top-nav > ul > li > a,
    .top-nav > ul > li > span > a,
    .top-nav > ul > li > a::after,
    .top-nav > ul > li > span > a::after,
    .top-nav > ul > li.hasChildren > a:after,
    .top-nav > ul > li.hasChildren > span > a:after,
    .top-nav ul li ul,
    .top-nav li li a,
    .top-search > a,
    .top-head .logo a img,
    .top-head[data-sticky="true"]{
        transition:none !important;
        animation:none !important;
    }
}