@font-face{font-family:Atlas Naskh;src:url(../fonts/NotoNaskhArabic-Regular.woff) format("woff");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Atlas Naskh;src:url(../fonts/NotoNaskhArabic-Bold.woff) format("woff");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
:root{color-scheme:light;--paper:#f6f3ea;--surface:#fffcf5;--ink:#141b31;--muted:#50566a;--line:#d9d6ce;--blue:#263fae;--link:#243ca3;--hero:#233bb2;--hero-ink:#fffdf3;--lime:#e9efab;--coral:#f5aa8b;--sans:"Atlas Naskh",system-ui,sans-serif;--display:"Atlas Naskh",Georgia,serif;--reader-scale:1}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--paper:#12172a;--surface:#1c233b;--ink:#faf6e9;--muted:#c0c7df;--line:#414b69;--link:#c5d0ff}}
:root[data-theme=dark]{color-scheme:dark;--paper:#12172a;--surface:#1c233b;--ink:#faf6e9;--muted:#c0c7df;--line:#414b69;--link:#c5d0ff}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 var(--sans)}
a{color:var(--link);text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,video,iframe,audio,embed,object{max-inline-size:100%}
img{height:auto}
svg:not([width]){inline-size:1.35rem;block-size:1.35rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.shell{inline-size:min(100% - 3rem,80rem);margin-inline:auto}
.skip{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:10;background:var(--surface);padding:.65rem 1rem;transform:translateY(-180%)}
.skip:focus{transform:none}
.site-header{background:var(--surface);border-block-end:1px solid var(--line)}
.utility{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:5rem;padding-block:.65rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);line-height:1.2}
.brand img{inline-size:2.65rem;max-block-size:3rem;object-fit:contain}
.brand strong,.brand small{display:block}
.brand strong{font-size:1.12rem;letter-spacing:.13em}
.brand small{color:var(--muted);margin-block-start:.2rem}
.utility-actions,.search-panel form,.reader-tools{display:flex;align-items:center;gap:.55rem}
.icon-button,.reader-tools button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-block-size:2.65rem;min-inline-size:2.65rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:.65rem;text-decoration:none}
.icon-button:hover,.reader-tools button:hover{background:var(--paper)}
.site-nav{border-block-start:1px solid var(--line)}
.site-nav ul,.mod-languages ul,.breadcrumb,.pagination{list-style:none;margin:0;padding:0}
.site-nav .mod-menu{display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;padding-block:.4rem}
.site-nav li{position:relative}
.site-nav :is(a,button,.mod-menu__heading,.separator){display:inline-flex;align-items:center;gap:.4rem;text-align:start;color:var(--ink);text-decoration:none;padding:.55rem .5rem;border:0;background:transparent}
.site-nav button .separator{padding:0}
.site-nav [aria-current=page],.site-nav .current>a{color:var(--link);text-decoration:underline;font-weight:700}
.site-nav :is(a,button):hover{color:var(--link);text-decoration:underline}
.site-nav button.mod-menu__toggle-sub::after{content:"";inline-size:.38rem;block-size:.38rem;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg);margin-inline:.2rem}
.site-nav .mod-menu__sub[aria-hidden=true]{display:none}
.site-nav .mod-menu__sub[aria-hidden=false]{display:block}
.site-nav .mod-menu__sub{padding:.45rem .6rem;background:var(--surface);border:1px solid var(--line);border-radius:.6rem}
.mod-languages ul{display:flex;gap:.45rem}
.search-panel{padding-block:.55rem .85rem}
.search-panel form{flex-wrap:wrap}
.search-panel :is(.awesomplete,.input-group){flex:1 1 14rem}
.search-panel input[type=search]{inline-size:100%}
#main-content{min-block-size:52vh;padding-block:1.6rem 4rem}
.hero{isolation:isolate;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;overflow:hidden;border-radius:1.4rem;background:var(--hero);color:var(--hero-ink);min-block-size:29rem}
.hero-copy{padding:clamp(1.5rem,5vw,4.7rem)}
.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.18em}
:lang(ar) .eyebrow,[dir=rtl] .eyebrow{letter-spacing:normal;font-size:1rem}
.hero .eyebrow{display:flex;align-items:center;gap:.6rem;color:var(--lime)}
.eyebrow span{display:block;width:.52rem;height:.52rem;background:currentColor;transform:rotate(45deg)}
.hero h1{font:400 clamp(3.5rem,6.25vw,6rem)/.98 var(--display);letter-spacing:-.052em;margin:.75rem 0 0;text-wrap:balance}
[dir=rtl] .hero h1{letter-spacing:normal;line-height:1.15}
.hero-second{font:400 clamp(1.55rem,2.5vw,2.5rem)/1.35 var(--display);color:var(--lime);margin:.65rem 0;text-align:start}
.hero-second[dir=rtl]{text-align:left}
[dir=rtl] .hero-second[dir=ltr]{text-align:right}
.hero-description{max-inline-size:34ch;color:#f0efff;margin:.65rem 0 1.2rem}
.hero-button{display:inline-flex;gap:1.4rem;align-items:center;padding:.7rem .95rem;border-radius:.5rem;color:#17233e;background:var(--lime);text-decoration:none;font-weight:750}
.hero-button:hover{background:#fff}
.hero-art{align-self:stretch;display:grid;place-items:center;padding:1rem 1.1rem 1rem 0;background:radial-gradient(ellipse at center,#4056c9 0%,transparent 71%)}
[dir=rtl] .hero-art{padding:1rem 0 1rem 1.1rem}
.hero-art img{display:block;width:min(100%,34rem);height:auto}
.explore{margin-block:2.45rem 2.5rem}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-block-end:.85rem}
.section-title .eyebrow{color:var(--link)}
.section-title h2{font:400 clamp(1.8rem,3.7vw,3rem)/1.14 var(--display);margin:.2rem 0 0;letter-spacing:-.035em}
[dir=rtl] .section-title h2{letter-spacing:normal}
.section-title>span{font:1.35rem/1.25 var(--display);color:var(--muted)}
.shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.shelf{min-inline-size:0;border:1px solid var(--line);border-radius:.8rem;background:var(--surface);overflow:hidden}
.shelf-main{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;padding:.8rem}
.shelf-main:focus-visible{outline-offset:-4px}
.shelf-main:hover strong,.shelf-main:focus-visible strong{text-decoration:underline;text-underline-offset:.2em}
.shelf-icon{display:grid;place-items:center;flex:none;inline-size:2.65rem;block-size:2.65rem;border-radius:.55rem;background:#e6eaff;color:#233daa}
.shelf-quran .shelf-icon,.shelf-hadith .shelf-icon{background:#e9efab;color:#303d16}
.shelf-people .shelf-icon,.shelf-music .shelf-icon{background:#fad6c7;color:#6e2d20}
.shelf-titles{display:grid;justify-items:start;line-height:1.35}
.shelf-titles small{color:var(--muted);font-size:.94rem}
.shelf-titles strong[lang=ar]{font-size:1.22rem}
.shelf-arrow{margin-inline-start:auto;color:var(--link)}
[dir=rtl] .shelf-arrow{transform:scaleX(-1)}
.shelf-language{display:block;padding:.35rem .8rem;border-block-start:1px solid var(--line);font-size:.82rem}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.3rem}
.component{min-inline-size:0;background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:clamp(1rem,3vw,2.4rem)}
.component :is(h1,h2,h3){font-family:var(--display);line-height:1.22;text-align:start;text-wrap:balance}
.component h1{font-size:clamp(1.8rem,4.2vw,3.35rem);margin-block:.15em .6em}
.component :is(p,li,dd){overflow-wrap:anywhere}
.component :is(p,h1,h2,h3,h4,blockquote,li)[dir]{text-align:start}
.component :is(.com-content-article__body,.item-content){font-family:var(--display);font-size:calc(1.18rem * var(--reader-scale));line-height:1.8}
.component :is(.com-content-article__body,.item-content) :is(p,li,blockquote):dir(rtl){font-size:1.14em;line-height:1.92}
.component audio{display:block;margin-block:.65rem}
.component iframe{max-width:100%}
.component .table-scroll{max-inline-size:100%;overflow:auto;margin-block:1rem}
.component table{border-collapse:collapse;max-inline-size:100%}
.component :is(th,td){padding:.45rem .65rem;border:1px solid var(--line)}
.component .blog-items{display:grid;gap:1.1rem}
.component .blog-item+.blog-item{border-block-start:1px solid var(--line);padding-block-start:1rem}
.component :is(.article-info,.published,.category-name){color:var(--muted);font-size:.92rem}
.breadcrumb,.pagination,.list-inline{display:flex;flex-wrap:wrap;gap:.4rem .75rem}
.breadcrumb{margin-block:0 .8rem;color:var(--muted)}
.pagination a,.pagination span{display:inline-block;padding:.3rem .5rem}
.form-control,.form-select,select,input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea{max-inline-size:100%;border:1px solid var(--line);border-radius:.4rem;padding:.45rem .65rem;background:var(--surface)}
.btn,.reader-tools button{border:1px solid var(--line);padding:.45rem .65rem;border-radius:.45rem}
.btn-primary{color:#fff;background:#263fae}
.reader-tools{justify-content:flex-end;margin-block-end:.55rem;color:var(--muted);font-size:.88rem}
.reader-tools button:disabled{opacity:.55;cursor:default}
.sidebar{min-inline-size:0}
.site-footer{border-block-start:1px solid var(--line);background:var(--surface)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:1rem;padding-block:1.35rem}
.footer-inner p{margin:0;color:var(--muted)}
.visually-hidden,.sr-only{position:absolute!important;inline-size:1px;block-size:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:68rem){
.content-grid.has-start{grid-template-columns:minmax(12rem,1fr) minmax(0,3fr)}
.content-grid.has-end{grid-template-columns:minmax(0,3fr) minmax(12rem,1fr)}
.content-grid.has-start.has-end{grid-template-columns:minmax(12rem,1fr) minmax(0,3fr) minmax(12rem,1fr)}
.sidebar.start{grid-column:1;grid-row:1}.has-start .component{grid-column:2;grid-row:1}
}
@media(min-width:54rem){
.atlas-enhanced .site-nav .mod-menu>li>.mod-menu__sub{position:absolute;z-index:5;inset-inline-start:0;min-inline-size:15rem;inline-size:max-content;max-inline-size:min(24rem,70vw);max-block-size:70vh;overflow:auto;box-shadow:0 .75rem 2rem #11152b20}
.atlas-enhanced .site-nav .mod-menu>li:nth-last-child(-n+2)>.mod-menu__sub{inset-inline-start:auto;inset-inline-end:0}
}
@media(max-width:53.999rem){
.atlas-enhanced .site-nav .mod-menu{display:grid;gap:.15rem}
.site-nav .mod-menu__sub{margin-inline-start:.5rem}
.hero{min-block-size:0}
.hero-copy{padding:clamp(1.2rem,4.5vw,2.25rem)}
.hero h1{font-size:clamp(2.55rem,7vw,4.2rem)}
.shelves{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:36rem){
.shell{inline-size:calc(100% - 1.5rem)}
#main-content{padding-block:.8rem 2.5rem}
.utility{gap:.35rem}
.brand small{font-size:.72rem}
.menu-toggle span{display:none}
.hero{grid-template-columns:1fr}
.hero-copy{padding-block-end:.55rem}
.hero-art,.hero-art[dir=rtl],[dir=rtl] .hero-art{padding:.15rem .6rem .65rem}
.hero-art img{inline-size:min(72%,17rem)}
.explore{margin-block:1.6rem}
.section-title{align-items:start}
.section-title>span{display:none}
.shelf-main{padding:.58rem;gap:.4rem}
.shelf-icon{inline-size:1.85rem;block-size:1.85rem}
.shelf-icon svg{inline-size:1.05rem;block-size:1.05rem}
.shelf-arrow{display:none}
.shelf-titles strong{font-size:.9rem}
.shelf-titles small{font-size:.83rem}
}
@media print{
.site-header,.site-footer,.hero,.explore,.sidebar,.reader-tools,.skip{display:none!important}
:root{color-scheme:light;--ink:#000;--paper:#fff;--surface:#fff}
.shell,.content-grid{display:block;inline-size:100%;padding:0!important}
.component{border:0;padding:0}.component a{color:#000}
}

.site-nav .mod-menu__toggle-sub .icon-chevron-down{display:none}
.site-nav button.mod-menu__toggle-sub[aria-expanded=true]::after{transform:rotate(225deg)}
.atlas-article .component{padding-inline:clamp(1rem,5vw,5rem)}
.atlas-article .com-content-article{max-inline-size:78ch;margin-inline:auto}
.component .table-responsive{overflow:auto}
.component .dropdown{position:relative}
.component .dropdown-menu{display:none;position:absolute;z-index:3;min-inline-size:10rem;margin:0;padding:.4rem;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:.4rem}
.component .dropdown-menu.show{display:block}
.component .dropdown-item{display:block;padding:.3rem .5rem}
.component .collapse:not(.show){display:none}
.component .list-inline{padding:0;list-style:none}