:root{
    --bg:#0b0b0c; --panel:#121214; --text:#e7e7e8; --muted:#9aa0a6; --brand:#66b3ff;
    --radius:16px; --gap:16px; --sidebar-w:280px;
  }
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif}

  /* Layout */
  .wrap{display:block; max-width:900px; margin:0 auto; padding:24px}
  header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; position:sticky; top:0; background:linear-gradient(to bottom,var(--bg),color-mix(in srgb,var(--bg),transparent 85%)); backdrop-filter:blur(6px)}
  .brand{font-weight:700}
  .cta{display:inline-flex; gap:8px; align-items:center; padding:10px 14px; background:var(--panel); border-radius:999px; color:var(--text); text-decoration:none}
  .cta:hover{outline:1px solid color-mix(in srgb,var(--text),transparent 80%)}

  main{display:block}

  /* Sidebar defaults: hidden on small screens */
  .layout{display:block}

  /* Desktop ≥ 1024px: show left sidebar and widen content */
  @media (min-width:1024px){
    .layout{display:grid; grid-template-columns: var(--sidebar-w) 1fr; gap:var(--gap); max-width:1200px; margin:0 auto; padding:var(--gap)}
    .wrap{max-width:none; padding:0}
    aside.sidebar{
      position:sticky; top:16px; align-self:start;
      height:calc(100dvh - 32px); overflow:auto; padding:16px; background:var(--panel); border-radius:var(--radius)
    }
  }

    section.content{
      padding:24px; background:var(--panel); border-radius:var(--radius);
      min-height:60dvh;
    }
	
  /* Nav styling */
  .nav h3{margin:8px 8px 4px; font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
  .nav ul{list-style:none; padding:0; margin:0}
  .nav a{
    display:flex; gap:10px; align-items:center;
    padding:10px 12px; margin:4px 0; border-radius:10px; color:var(--text); text-decoration:none
  }
  .nav a:hover{background:#1a1a1d}
  .nav a.active{background:#101820; outline:1px solid #1f2a36; color:var(--brand)}
  .nav .sub{margin-left:10px; border-left:1px dashed #2a2a2f; padding-left:10px}

  /* Mobile-only helpers */
  .desktop-only{display:none}
  @media (min-width:1024px){ .desktop-only{display:block} }
 

  /* Minimal first page look (mobile) */
  .hero{
    display:grid; gap:14px; padding:24px;
    background:var(--panel); border-radius:var(--radius); margin:16px;
  }
  .hero h1{margin:0; font-size:26px}
  .hero p{margin:0}
  .quick-links{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .chip{display:block; text-align:center; padding:10px 12px; border-radius:999px; background:#17171a; text-decoration:none; color:var(--text)}
  .chip:hover{outline:1px solid #2a2f36}
  
  /* Mobile-only helpers */
  .mobile-only{display:block}
  @media (min-width:1024px){ .mobile-only{display:none} }
  
  .mobile-only { display: inline-flex; }              
  @media (min-width: 1024px) { .mobile-only { display: none !important; } }
  
/* Mobile drawer */
.mobile-menu-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px; border:1px solid #2a2f36;
  background:var(--panel); color:var(--text);
}
.mobile-drawer{
  position:fixed; inset:0 auto 0 0; width:80%; max-width:320px; height:100dvh;
  background:var(--panel); border-right:1px solid #1f1f23; z-index:60;
  transform:translateX(-110%); transition:transform .25s ease, box-shadow .25s ease;
  padding:16px; overflow:auto; border-top-right-radius:12px; border-bottom-right-radius:12px;
}
.mobile-drawer.open{ transform:translateX(0); box-shadow:8px 0 20px rgba(0,0,0,.4) }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(1.5px); z-index:50 }
.scrim[hidden]{ display:none }

.verse { color: #8eed4a;	}
.surah { color: #77f2a4;	}

h2 { font-size:20px; }
h3 { font-size:18px; }
h4 { font-size:16px; padding-top:10px; border-top:  5px solid #d9dedc}
p { font-size:14px; }

.h2-with-img{
  margin: 0 0 .6rem;
  line-height: 1.15;         /* reduce extra leading so first line starts higher */
  overflow: hidden;          /* creates BFC so the h2 encloses the float */
  /* or: display: flow-root;  (same effect, newer syntax) */
}

/* Float image so text wraps against it from the top */
.h2-with-img .h2-img-right{
  float: right;
  margin: 0 0 .5rem .75rem;  /* gap under & to the left of image */
  shape-outside: margin-box; /* optional: smoother wrap */
  shape-margin: .25rem;
}
a  { color:#91edcd }