/* ALNOUR — TasheelExpress v58.11.8 interaction parity layer
   Keeps Alnour identity; ports the mature navigation/mobile/accessibility contract. */
:root{--alnour-fixed-header-height:74px;--alnour-mobile-drawer-gap:12px}
html,body{overflow-x:clip!important}
body{padding-top:var(--alnour-fixed-header-height)!important}

/* Authoritative fixed-header contract (Tasheel v58.11.8 behavior). */
.topbar,.ref-header{
  position:fixed!important;top:0!important;right:0!important;left:0!important;bottom:auto!important;
  width:100%!important;z-index:5000!important;transform:translate3d(0,0,0)!important;
  isolation:isolate!important;will-change:background,backdrop-filter;
  transition:background-color .24s ease,background .24s ease,box-shadow .24s ease,backdrop-filter .24s ease,-webkit-backdrop-filter .24s ease!important;
}
.topbar.is-scrolled,.ref-header.is-scrolled{
  background:rgba(3,48,36,.50)!important;
  -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
  backdrop-filter:blur(14px) saturate(135%)!important;
  box-shadow:0 10px 30px rgba(2,30,22,.20)!important;
}

/* Consistent keyboard/touch targets. */
a,button,[role="button"],input[type="button"],input[type="submit"]{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(232,201,129,.72)!important;outline-offset:3px!important;
}
.home-hamb,.hamb,.icon-btn,.nav-audio-trigger,.alnour-hero-arrow{min-width:44px!important;min-height:44px!important}

/* Desktop mega menus remain predictable above content. */
.nav-panel,.mega{z-index:5010!important}
.nav-drop.open>.nav-panel,.drop.open>.mega{visibility:visible!important;opacity:1!important;pointer-events:auto!important}

/* Performance-safe lower-page rendering without changing layout. */
.feature-grid,.method,.why,.live-zone,.community-zone,.results,.footer-grid,footer{
  content-visibility:auto;contain-intrinsic-size:auto 700px;
}

/* Long content legibility and anchor clearance under the fixed header. */
[id]{scroll-margin-top:calc(var(--alnour-fixed-header-height) + 14px)}
.article p,.reader-frame p,[data-reader-frame] p{line-height:1.95}
.article h1,.article h2,.article h3,.public-result h2{text-wrap:balance}

/* Mobile/tablet: Tasheel-style readable floating drawer, Alnour palette. */
@media(max-width:768px){
  body{padding-top:var(--alnour-fixed-header-height)!important}
  .topbar,.ref-header{background:linear-gradient(90deg,#031f19,#063c2d 54%,#04271f)!important}
  .topbar.is-scrolled,.ref-header.is-scrolled{background:rgba(3,48,36,.50)!important}

  .main-nav,.ref-menu{
    position:fixed!important;
    top:calc(var(--alnour-fixed-header-height) + 6px)!important;
    left:var(--alnour-mobile-drawer-gap)!important;
    right:var(--alnour-mobile-drawer-gap)!important;
    bottom:auto!important;width:auto!important;
    max-height:calc(100vh - var(--alnour-fixed-header-height) - 24px)!important;
    max-height:calc(100dvh - var(--alnour-fixed-header-height) - 24px)!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;touch-action:pan-y!important;
    background:rgba(255,253,247,.985)!important;
    border:1px solid rgba(183,144,73,.30)!important;border-radius:16px!important;
    box-shadow:0 22px 60px rgba(1,31,23,.30)!important;padding:10px!important;
    transform:translateY(-8px) scale(.985)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:transform .22s ease,opacity .18s ease,visibility .18s ease!important;
  }
  .main-nav.mobile-open,.ref-menu.mobile-open{
    transform:translateY(0) scale(1)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }
  .nav-drop,.ref-menu .drop{width:100%!important}
  .nav-drop-btn,.public-toplink,.ref-menu .drop>button{
    color:#173d32!important;background:#fffdf8!important;border-radius:10px!important;
    min-height:48px!important;padding:12px 14px!important;text-align:right!important;
  }
  .nav-drop-btn:hover,.nav-drop-btn:focus-visible,.public-toplink:hover,.public-toplink:focus-visible,
  .ref-menu .drop>button:hover,.ref-menu .drop>button:focus-visible{
    color:#075d45!important;background:#f4ecdc!important;
  }
  .nav-panel,.mega{
    position:static!important;width:100%!important;max-width:none!important;grid-template-columns:1fr!important;
    background:#fff!important;border:1px solid #eadfc9!important;border-radius:10px!important;box-shadow:none!important;
    padding:6px!important;margin:2px 0 6px!important;
  }
  .nav-panel a,.mega a{color:#173d32!important;min-height:44px!important;border-radius:8px!important}
  .nav-panel a:hover,.nav-panel a:focus-visible,.mega a:hover,.mega a:focus-visible{background:#f7f1e5!important;color:#075d45!important}

  /* Language controls stay outside the hamburger, like Tasheel v58.11.8. */
  .language-bar,.language-links{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    pointer-events:auto!important;white-space:nowrap!important;direction:rtl!important;
  }
  .language-bar a,.language-links a{
    min-width:29px!important;min-height:32px!important;padding:0 5px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border-radius:8px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;
    color:#fff!important;font-size:10px!important;font-weight:850!important;
  }
  body.alnour-menu-open{overflow:hidden!important;touch-action:none}
  body.alnour-menu-open .main-nav,body.alnour-menu-open .ref-menu{touch-action:pan-y}
}

@media(max-width:430px){
  .topbar{padding-inline:8px!important;gap:5px!important}.ref-nav{padding-inline:9px!important;gap:5px!important}
  .brand-word small,.ref-brand small{display:none!important}
  .language-bar a,.language-links a{min-width:27px!important;padding-inline:4px!important;font-size:9px!important}
  .top-actions,.nav-actions{gap:4px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .topbar,.ref-header,.main-nav,.ref-menu,.nav-panel,.mega{transition:none!important}
  .feature-card:hover,.public-result:hover{transform:none!important}
}