/* Medi.kharousi v15 — one header on every page (merged «الموسوعة» section), lighter menus and dialogs,
   light page transitions. Builds on the Aurora v14 design tokens. */

/* ── merged section in the header ── */
.nav>ul>li>a[aria-current]{color:var(--teal-ink);box-shadow:inset 0 -2px 0 var(--teal)}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:.28rem;padding:.45rem .45rem;border:0;border-radius:var(--r-s,8px);background:none;
 color:var(--ink-2);font:inherit;font-size:.82rem;line-height:inherit;cursor:pointer;white-space:nowrap}
.nav-dd-btn:hover,.nav-dd.is-open .nav-dd-btn{background:var(--sunk);color:var(--ink)}
.nav-dd-btn[aria-current]{color:var(--teal-ink);box-shadow:inset 0 -2px 0 var(--teal)}
.nav-dd-ic{width:.72em;height:.72em;fill:none;stroke:currentColor;stroke-width:2.2;transform:rotate(-90deg);transition:transform .14s ease}
.nav-dd.is-open .nav-dd-ic{transform:rotate(90deg)}
@media(max-width:1200px){.nav-dd-btn{font-size:.77rem;padding-inline:.3rem}}

.nav-dd-panel{position:absolute;top:calc(100% + .6rem);left:50%;z-index:45;width:min(40rem,calc(100vw - 3rem));
 display:grid;grid-template-columns:1fr 1fr;padding:.5rem;border:1px solid var(--line-2);border-radius:18px;background:var(--surface);
 box-shadow:0 22px 50px -26px rgba(2,10,18,.6);white-space:normal;
 opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.nav-dd-panel::before{content:'';position:absolute;inset:-.7rem 0 auto;height:.7rem}
.nav-dd.is-open .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .12s ease,transform .12s ease,visibility 0s}
@media(hover:hover) and (pointer:fine){
 .nav-dd:hover .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .12s ease .06s,transform .12s ease .06s,visibility 0s .06s}
 .nav-dd:hover .nav-dd-ic{transform:rotate(90deg)}
}
.nav-dd-col{display:grid;align-content:start;gap:.15rem;padding:.25rem}
.nav-dd-col+.nav-dd-col{border-inline-start:1px solid var(--line)}
.nav .nav-dd-head{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .65rem;border-radius:12px;color:var(--ink);font-size:inherit;white-space:normal}
.nav .nav-dd-head:hover{background:var(--sunk)}
.nav-dd-head>svg{width:1.3rem;height:1.3rem;flex:none;margin-top:.15rem;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-dd-head b{display:flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:600}
.nav-dd-head small{display:block;margin-top:.15rem;font-size:.74rem;line-height:1.5;color:var(--muted)}
.nav-dd-tag{font-size:.62rem;font-weight:500;padding:.05rem .45rem;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.nav .nav-dd-links{display:grid;grid-template-columns:1fr 1fr;gap:.05rem .25rem;justify-content:stretch;padding:.1rem .3rem .3rem}
.nav .nav-dd-links a{font-size:.8rem;padding:.36rem .5rem;border-radius:9px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.nav .nav-dd-links a:hover{background:var(--sunk);color:var(--ink)}
.nav .nav-dd-panel a[aria-current]{box-shadow:none;background:var(--teal-soft);color:var(--teal-ink)}

/* ── mobile menu: same structure as the header, lighter sheet ── */
.menu-l .menu-grp>span{display:block;padding:.9rem .3rem .25rem;font-size:.78rem;color:var(--muted)}
.menu-l .menu-grp ul{list-style:none;margin:0 0 .2rem;padding:0;padding-inline-start:.85rem;border-inline-start:2px solid var(--teal-soft)}
.menu-l .menu-grp ul a{font-size:.98rem}
.menu-l .menu-sep{height:.75rem}
.menu-l .menu-2 a{font-size:.93rem;color:var(--ink-2)}
.menu-l a[aria-current]{color:var(--teal-ink);font-weight:600}

/* ── lighter dialogs: no full-page blur, quick fade/slide ── */
.dlg::backdrop{background:rgba(2,10,18,.42);backdrop-filter:none;-webkit-backdrop-filter:none}
.dlg[open]{animation:mk-dlg-in .16s ease-out}
.dlg[open]::backdrop{animation:mk-fade .16s ease-out}
.dlg--menu{--mk-from:16px}
[dir=rtl] .dlg--menu{--mk-from:-16px}
.dlg--menu[open]{animation:mk-menu-in .18s ease-out}
@keyframes mk-dlg-in{from{opacity:0;transform:translateY(6px)}}
@keyframes mk-menu-in{from{opacity:0;transform:translateX(var(--mk-from))}}
@keyframes mk-fade{from{opacity:0}}

/* ── light page transitions (supporting browsers); the header stays still ── */
@view-transition{navigation:auto}
.hdr{view-transition-name:mk-hdr}
::view-transition-group(mk-hdr){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}

@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .dlg[open],.dlg[open]::backdrop,.dlg--menu[open]{animation:none}
 .nav-dd-panel,.nav-dd-ic{transition:none}
}
html[data-motion=off] .dlg[open],html[data-motion=off] .dlg[open]::backdrop{animation:none}
html[data-motion=off]::view-transition-old(root),html[data-motion=off]::view-transition-new(root){animation:none}
@media print{.nav-dd-panel{display:none!important}}