/* alhamdulillah.net 2.3.0 - progressive rendering, accessibility and small screens.
   Additive rules; no replacement of legacy layout. */
:root{scroll-padding-top:1rem}
html{scroll-behavior:smooth}
/* Prevent a long URL, German compound word or wide form control from expanding
   a content column. Do not split Arabic text in the middle of glyphs. */
.alh160-main main,.alh160-subpage main{min-width:0}
:is(.q200-wrap,.alh220-wrap,.reader-layout) :is(a,pre,code){overflow-wrap:anywhere}
:is(.q200-wrap,.alh220-wrap,.reader-layout) :is(input,textarea,select){max-width:100%}
:is(.q200-wrap,.alh220-wrap,.reader-layout) :is([lang="ar"],.arabic){word-break:normal;overflow-wrap:break-word}
/* Use native content-visibility on long, scrollable Hadith results. The
   intrinsic size reserves space before offscreen entries are painted. */
@supports(content-visibility:auto){
  .results>.result{content-visibility:auto;contain-intrinsic-size:auto 310px}
  .cards>.card{content-visibility:auto;contain-intrinsic-size:auto 200px}
  .alh220-results>li{content-visibility:auto;contain-intrinsic-size:auto 150px}
}
/* Visible keyboard focus; never rely on color alone. */
:is(.alh160-main,.alh160-subpage) :is(a,button,input,select,textarea,summary):focus-visible,
body:not(.alh160-main):not(.alh160-subpage) :is(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid #bc7800;outline-offset:3px
}
.alh160-skip:focus-visible,.skip:focus-visible{position:fixed!important;top:10px!important;left:10px!important;z-index:1000!important;padding:12px 16px!important;background:#fff!important;color:#123a2b!important;border:2px solid #123a2b!important;border-radius:8px!important;clip:auto!important;width:auto!important;height:auto!important;overflow:visible!important}
@media(max-width:760px){
  .alh160-site-header :is(button,input){touch-action:manipulation}
  .alh160-site-header :is(.alh160-menu-toggle,.alh160-theme-toggle,.alh170-header-help){min-height:44px;min-width:44px}
  .alh160-site-header .alh160-header-search{display:flex;min-width:0;width:100%;max-width:100%}
  .alh160-site-header .alh160-header-search :is(input,button){min-height:44px}
  .alh160-site-header .alh160-header-search input{flex:1 1 auto;min-width:0;width:0;font-size:16px}
  .alh160-site-header .alh160-header-search button{flex:0 0 44px}
  .alh160-site-header .alh160-primary{max-height:min(56dvh,460px);overscroll-behavior:contain;scrollbar-gutter:stable}
  .alh160-site-header .alh160-primary a,.alh160-site-header .alh160-primary summary{min-height:44px}
  .q200-grid,.alh220-topic-grid,.alh220-form{min-width:0}
  .q200-card,.alh220-card{min-width:0}
  .q200-original [lang="ar"],.alh220-arabic{line-height:2.1}
}
@media(max-width:380px){
  .alh160-site-header .brand{font-size:.96rem}
  .alh160-site-header .alh160-nav-wrap{gap:5px}
  .alh160-site-header .alh160-primary{left:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .alh160-main :is(*,*::before,*::after),.alh160-subpage :is(*,*::before,*::after){scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(forced-colors:active){
  :is(.q200-wrap,.alh220-wrap) :is(a,button,input,select,summary):focus-visible{outline:3px solid Highlight}
  .q200-different{border:2px solid Highlight;background:Canvas!important;color:CanvasText!important}
}
@media print{
  .results>.result,.cards>.card,.alh220-results>li{content-visibility:visible!important;contain-intrinsic-size:none!important}
  #alh170-progress,#alh170-back-top,.alh180-menu-backdrop{display:none!important}
}