/* ALNOUR FINAL DESIGN SYSTEM — TasheelExpress interaction discipline + Alnour identity */
:root{
  --alnour-green:#063d2e;
  --alnour-green-deep:#03261d;
  --alnour-gold:#d8ad56;
  --alnour-gold-soft:#efd08a;
  --alnour-cream:#fffaf0;
  --alnour-shell:1540px;
  --alnour-reader-standard:960px;
  --alnour-reader-compact:760px;
  --alnour-reader-wide:1240px;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
img{max-width:100%}

/* One sticky-navigation contract everywhere */
.topbar,.ref-header{
  position:sticky!important;top:0!important;z-index:1000!important;
  transition:background-color .22s ease,box-shadow .22s ease,backdrop-filter .22s ease!important;
}
.topbar.is-scrolled,.ref-header.is-scrolled{
  background:rgba(3,48,36,.50)!important;
  backdrop-filter:blur(16px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2)!important;
  box-shadow:0 9px 28px rgba(0,0,0,.18)!important;
}

/* Tasheel-style homepage hero: every image BEHIND every text/control layer */
.hero{
  position:relative!important;display:block!important;isolation:isolate!important;
  min-height:clamp(560px,48vw,720px)!important;overflow:hidden!important;background:#073d2e!important;
}
.hero-visual{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;z-index:0!important;overflow:hidden!important;
}
.hero-slider-main,.hero-visual>.alnour-hero-slider{position:absolute!important;inset:0!important;z-index:0!important}
.hero-slide-main,.hero-bg,.hero-visual .alnour-hero-slide img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:left center!important;background:transparent!important;
}
.hero-visual:after{
  content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(2,35,27,.55) 0%,rgba(3,45,34,.20) 34%,rgba(5,47,36,.12) 48%,rgba(255,249,238,.58) 70%,rgba(255,251,243,.92) 100%)!important;
}
.hero-copy{
  position:absolute!important;z-index:10!important;right:clamp(22px,5vw,78px)!important;top:clamp(54px,7vw,96px)!important;
  width:min(48%,680px)!important;padding:0!important;background:transparent!important;
}
.hero-copy:after{display:none!important}
.hero h1,.hero-copy p,.hero .calligraphy{position:relative!important;z-index:11!important}
.hero h1{color:#083b30!important;text-shadow:0 1px 0 rgba(255,255,255,.95),0 8px 30px rgba(255,255,255,.38)!important}
.hero-copy p{color:#143c31!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important}
.hero-actions{position:relative!important;z-index:12!important}
.discovery-card,.books-stack,.tablet,.audio-card{z-index:9!important}

/* No baked frames behind floating 3D section illustrations */
.card-visual,.card-visual:hover,.feature-card .card-visual{
  background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;overflow:visible!important;
}
.card-visual:before,.card-visual:after{display:none!important}
.card-visual img{
  width:92%!important;height:92%!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;
  filter:drop-shadow(0 13px 12px rgba(13,46,36,.18))!important;
}

/* Shared inner-page hero contract */
.public-hero{
  position:relative!important;height:clamp(190px,18vw,280px)!important;overflow:hidden!important;background:#073d2e!important;
  border-bottom:1px solid rgba(216,173,86,.45)!important;isolation:isolate!important;
}
.public-hero .alnour-hero-slider{position:absolute!important;inset:0!important;z-index:0!important}
.public-hero .alnour-hero-slide img{object-fit:cover!important;object-position:left center!important}
.public-hero .alnour-hero-overlay{
  background:linear-gradient(90deg,rgba(2,31,24,.62),rgba(3,48,36,.26) 45%,rgba(3,48,36,.12) 70%,rgba(3,48,36,.28))!important;
}
.public-hero .public-hero-brand{
  z-index:4!important;right:clamp(18px,5vw,72px)!important;bottom:clamp(20px,3vw,40px)!important;color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.58)!important;
}
.public-hero .public-hero-brand span{color:#f0cf7a!important}

/* Reader system: fixed frame with three width modes */
.public-main,.article,.reader-frame,[data-reader-frame]{
  --reader-max:var(--alnour-reader-standard);
}
.reader-width-compact .public-main,.reader-width-compact .article,.reader-width-compact [data-reader-frame]{--reader-max:var(--alnour-reader-compact)}
.reader-width-standard .public-main,.reader-width-standard .article,.reader-width-standard [data-reader-frame]{--reader-max:var(--alnour-reader-standard)}
.reader-width-wide .public-main,.reader-width-wide .article,.reader-width-wide [data-reader-frame]{--reader-max:var(--alnour-reader-wide)}
.article,.reader-frame,[data-reader-frame]{max-width:var(--reader-max)!important;margin-inline:auto!important;width:min(calc(100% - 32px),var(--reader-max))!important}

/* Compact mobile: no overlapping controls, hero remains image-behind-text */
@media(max-width:900px){
  .hero{min-height:660px!important}
  .hero-visual{position:absolute!important;inset:0!important;min-height:0!important;height:100%!important}
  .hero-visual:after{background:linear-gradient(180deg,rgba(255,251,243,.90) 0%,rgba(255,251,243,.72) 42%,rgba(3,45,34,.20) 68%,rgba(3,45,34,.58) 100%)!important}
  .hero-copy{position:absolute!important;right:20px!important;left:20px!important;top:34px!important;width:auto!important;padding:0!important}
  .hero h1,.hero h1 span{font-size:clamp(34px,10vw,48px)!important}
  .hero-copy p{font-size:14px!important;max-width:95%!important}
  .discovery-card{top:auto!important;bottom:26px!important;left:16px!important;width:min(72vw,255px)!important}
  .books-stack,.tablet,.audio-card{display:none!important}
  .public-hero{height:210px!important}
  .public-hero .public-hero-brand{right:16px!important;bottom:22px!important}
  .alnour-hero-arrow{display:none!important}
  .article,.reader-frame,[data-reader-frame]{width:min(calc(100% - 20px),var(--reader-max))!important}
}
@media(max-width:560px){
  .hero{min-height:620px!important}
  .hero-copy{top:28px!important}
  .hero-actions{gap:9px!important}
  .hero-actions a{padding:11px 14px!important}
  .feature-grid{grid-template-columns:1fr!important}
}

/* Accessibility / motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}