@charset "UTF-8";
/* ============================================================
   QURAN4U — stylesheet.css
   Drop-in replacement for the legacy stylesheet.
   Re-skins every page on the site. No HTML edits required.

   Targets the SAME class names the existing pages already use,
   so nothing in the content has to change.

   v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;600&family=Noto+Sans+Devanagari:wght@400;600&family=Noto+Sans+Bengali:wght@400;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Palette — Gilded
     Navy #1D3050 and gold #B87818, sampled directly from the logo. */
  --q-ink:#161E2B;
  --q-ink-2:#3E4859;
  --q-muted:#736C5C;
  --q-paper:#F7F2E6;
  --q-surface:#FFFCF4;
  --q-surface-2:#F0E9D8;
  --q-line:#DED3B8;
  --q-line-2:#CFC2A2;

  --q-lapis:#1D3050;             /* logo navy — headings, links */
  --q-lapis-hover:#132038;
  --q-lapis-soft:#E8ECF3;
  --q-gilt:#B87818;              /* logo gold — ayah markers, rules */
  --q-gilt-soft:#F7EEDA;
  --q-gilt-line:rgba(184,120,24,.30);
  --q-jade:#2F5B57;
  --q-maroon:#8A3F2E;

  --q-bar:#132038;               /* the menu bar across the top */
  --q-bar-ink:#FFFFFF;
  --q-bar-mute:rgba(255,255,255,.74);
  --q-bar-line:rgba(216,179,104,.40);
  --q-bar-hover:rgba(216,179,104,.20);
  --q-bar-field:rgba(255,255,255,.08);

  /* Type */
  --q-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --q-sans:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --q-arabic:"Amiri","Traditional Arabic","Scheherazade New",serif;
  --q-urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --q-hindi:"Noto Sans Devanagari",Mangal,sans-serif;
  --q-bengali:"Noto Sans Bengali",Vrinda,sans-serif;

  --q-radius:3px;
  --q-shadow:0 1px 2px rgba(20,22,27,.05),0 8px 24px -14px rgba(20,22,27,.20);
  --q-measure:70ch;
}

/* Dark mode — follows the reader's device setting */
@media (prefers-color-scheme:dark){
  :root{
    /* Parchment becomes deep navy after dark. */
    --q-ink:#EDF1F8;
    --q-ink-2:#B9C4D6;
    --q-muted:#8593AB;
    --q-paper:#0E1828;
    --q-surface:#141F36;
    --q-surface-2:#18243D;
    --q-line:#22304A;
    --q-line-2:#2E3E5C;
    --q-lapis:#8FB0E4;
    --q-lapis-hover:#B3C9EE;
    --q-lapis-soft:#17243D;
    --q-gilt:#D8B368;
    --q-gilt-soft:#2A2113;
    --q-gilt-line:rgba(216,179,104,.34);
    --q-jade:#6FC0AA;
    --q-maroon:#E0897A;
    --q-bar:#060C16;
    --q-bar-ink:#FFFFFF;
    --q-bar-mute:rgba(255,255,255,.72);
    --q-bar-line:rgba(216,179,104,.30);
    --q-bar-hover:rgba(216,179,104,.18);
    --q-bar-field:rgba(255,255,255,.07);
    --q-shadow:0 1px 2px rgba(0,0,0,.55),0 12px 30px -16px rgba(0,0,0,.9);
  }
}

/* ============================================================
   2. RESET & BASE
   Undoes the legacy silver page border, the global table
   borders, and the link-grows-on-hover behaviour.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  border:0;                       /* was: 1px solid silver */
  background:var(--q-paper);
  color:var(--q-ink);
  font-family:var(--q-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;border:0}
hr{border:0;border-top:1px solid var(--q-line);margin:28px 0;height:0}

/* ============================================================
   3. LEGACY FONT ALIASING
   The old pages ask visitors to install desktop fonts.
   These rules map the old font names onto real webfonts,
   including where they appear in inline style="" attributes.
   The "download fonts" page becomes unnecessary.
   ============================================================ */
[style*="Jameel"],[style*="Nastaleeq"],[style*="Nastaliq"]{
  font-family:var(--q-urdu)!important;
  line-height:2.5!important;
}
[style*="Saleem"],[style*="QuranFont"],[style*="Quran Font"]{
  font-family:var(--q-arabic)!important;
  line-height:2.05!important;
}
[style*="Mangal"]{font-family:var(--q-hindi)!important;line-height:1.9!important}
[style*="Vrinda"]{font-family:var(--q-bengali)!important;line-height:1.9!important}
font{font-family:inherit!important;color:inherit!important;font-size:inherit!important}

/* ============================================================
   4. PAGE SKELETON
   Every page is: [top table] [content table] [footer table].
   These rules turn that into a centred, responsive column.
   ============================================================ */
body>table,
body>div>table{
  max-width:1140px;
  margin:0 auto;
  border-collapse:collapse;
  background:transparent;
  border:0;
}

table{
  border-collapse:collapse;
  border:0;                       /* was: 1px solid grey */
  background:transparent;
  width:100%;
}
td,th{border:0;padding:0;vertical-align:top}

.container{min-width:0}
.wrapper{position:relative;overflow:visible}

/* ============================================================
   5. HEADINGS
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--q-serif);
  color:var(--q-ink);
  font-weight:600;
  text-wrap:balance;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(1.9rem,4.5vw,2.75rem);line-height:1.12;text-align:center;margin:28px 0 14px}
h2{font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.25;color:var(--q-muted);font-weight:400;text-align:center;margin:0 0 20px}
h3{font-size:1.05rem;line-height:1.4;font-weight:600;margin:20px 0 10px}

/* ============================================================
   6. NAVIGATION
   The old markup is a <ul> of inline <li>. Turned into a real
   pill-style nav bar that wraps on small screens.
   ============================================================ */
ul{list-style:none;margin:18px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
li{
  list-style-type:none;display:inline-flex;padding:0;margin:0;
  text-align:center;line-height:1.4;color:var(--q-ink);font-weight:400;
}
li a,li a:link,li a:visited{
  display:inline-block;
  padding:7px 16px;
  border:1px solid var(--q-line-2);
  border-radius:3px;
  background:var(--q-surface);
  color:var(--q-lapis);
  font-family:var(--q-sans);
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
li a:hover,li a:focus-visible{
  background:var(--q-lapis);
  border-color:var(--q-lapis);
  color:var(--q-surface);
  font-size:.92rem;              /* was: x-large — links no longer jump */
  padding:7px 16px;
}
@media (prefers-color-scheme:dark){
  li a:hover,li a:focus-visible{color:#0F1115}
}

/* ============================================================
   7. LINKS
   ============================================================ */
a,a:link{
  color:var(--q-lapis);
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
a:visited{color:var(--q-lapis);font-weight:500}
a:hover{
  color:var(--q-lapis-hover);
  border-bottom-color:currentColor;
  font-size:inherit;             /* was: x-large */
  font-weight:500;
  padding-bottom:0;
}
a:active{color:var(--q-lapis-hover);font-weight:500}
a:focus-visible{
  outline:2px solid var(--q-lapis);
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================================
   8. VERSE TABLES  (.style10 = ayah number, .style12 = text)
   The core reading experience — used on every surah page.
   ============================================================ */
.style10,.style11,.style11a{
  width:52px;
  text-align:center;
  vertical-align:top;
  font-family:var(--q-sans);
  font-size:.82rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--q-gilt);           /* was: white on maroon */
  background:transparent;
  border:0;
  padding:22px 10px 0 0;
}
.style10::before,.style11::before,.style11a::before{content:""}

.style12,.style12a,.style12aa{
  width:auto;
  font-family:var(--q-serif);
  font-size:1.06rem;
  line-height:1.75;
  text-align:left;
  color:var(--q-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--q-line);
  text-indent:0;
  padding:18px 0 18px 4px;
}
.style12a{text-align:center}

/* Ring the ayah number the way a mushaf does */
tr:has(>.style10) .style10{position:relative}
.style10{
  color:var(--q-gilt);
}
.style10 > *:first-child{display:inline}

/* ============================================================
   9. INDEX / LISTING TABLES  (.style4* .style5* .style10b .style10c)
   Surah lists, download grids, chapter indexes.
   ============================================================ */
.style4,.style4a,.style4aa,.style4b,.style4c,.style5,.style5a,.style5aa,
.style10a,.style10b,.style10c,.style10d{
  border:0;
  border-bottom:1px solid var(--q-line);
  background:transparent;
  color:var(--q-ink-2);
  font-family:var(--q-sans);
  font-size:.95rem;
  padding:11px 12px;
  vertical-align:middle;
  width:auto;
}
.style10b{text-align:left;font-weight:500;color:var(--q-ink)}
.style10c,.style10d,.style4,.style4a,.style4b{text-align:center;white-space:nowrap}
.style4aa,.style5aa{text-align:left}
.style5a{text-align:center;width:auto}

/* Row hover on listings */
tr:hover > .style10b,
tr:hover > .style10c,
tr:hover > .style10d{background:var(--q-lapis-soft)}

.style4c1{background:var(--q-lapis);border:0;color:var(--q-surface)}
.style4c2{background:var(--q-jade);border:0;direction:rtl}

.style5aa1,.style5aaa{
  text-align:left;
  color:var(--q-ink);
  font-family:var(--q-serif);
  font-size:1.15rem;
  font-weight:600;
  margin:34px 0 12px;
}

/* ============================================================
   10. TEXT BLOCKS — LATIN
   The centre*/justify* families. Grouped instead of 40 near
   duplicate rules with hard-coded colours.
   ============================================================ */
p{margin:0 0 1em}

p.center,p.center1,p.center1a,p.center1aa,p.centera,p.centera1,p.centeraaa,
p.centerb,p.centerbb,p.centerb1,p.centerc,p.centergu,p.centergut,
p.centeraab,p.center1aaaa,p.centera1a,p.center1aa1,p.centergut1,
.style2,.style3,.style3a,.style3aa,.style3aal,.style3c,.style3d,
.style1aa,.style1aaa,.style2aa,.style7c,.style4c{
  text-align:center;
  font-family:var(--q-sans);
  color:var(--q-ink-2);
  margin:14px auto;
  max-width:var(--q-measure);
  font-size:1rem;
}
p.centergu,p.centergut,p.center1aaaa,p.centera1a,.style1aa,.style1aaa{
  font-family:var(--q-serif);
  font-size:1.35rem;
  font-weight:600;
  color:var(--q-ink);
}
p.center1,p.center1a,.style3a,.style3aal{font-size:1.1rem}
p.centery,p.centerw,.style3aa,.style6,.auto-style2{color:var(--q-ink-2)}
p.centeraab{font-style:italic;font-size:.92rem;color:var(--q-muted)}
p.center1aa,p.centerc,p.center1a,.style3c{color:var(--q-muted)}

p.justify,p.justify1,p.justify1a,p.justify1a1,p.justify1b,p.justify1g,
p.justify1gw,p.justify1h,p.justify2,p.justify2a,p.justify2aa,p.justifya,
p.justifya1,p.justifyam,.style1,.style1a{
  text-align:left;
  font-family:var(--q-serif);
  font-size:1.03rem;
  line-height:1.75;
  color:var(--q-ink-2);
  margin:0 auto 1.05em;
  max-width:var(--q-measure);
}
p.justify1h{font-size:1.15rem;color:var(--q-ink)}
p.justify2a,.style1a{font-size:.92rem;color:var(--q-muted)}
p.left{text-align:left;color:var(--q-ink-2);margin:0 auto 1em;max-width:var(--q-measure)}

/* Legacy colour-only helpers — re-pointed at the palette */
.auto-style1,.auto-style3{color:var(--q-lapis)}
.auto-style1a{color:var(--q-maroon)}
.auto-style2{color:var(--q-ink-2)}
.auto-style5,.auto-style6{color:var(--q-muted)}

/* ============================================================
   11. ARABIC
   Naskh, generous leading so the diacritics are not clipped.
   ============================================================ */
p.center1d,p.center1dd,p.center1d1,p.center1dd1,p.center1ddd,p.center1ddb1,
p.center11b,p.center3,p.center3a1,p.center4,p.justify1aaba,p.justify2b,
.style7a,.style10xaa,.auto-style4a{
  font-family:var(--q-arabic);
  direction:rtl;
  text-align:center;
  font-size:1.65rem;
  line-height:2.05;
  color:var(--q-ink);
  margin:20px auto;
  max-width:none;
  letter-spacing:0;
}
p.justify1aaba,p.justify2b{text-align:right;font-size:1.5rem}
.style7a{font-size:2.1rem;margin:34px auto 26px}
p.center3,p.center1ddd{color:var(--q-maroon)}
p.center4,p.center11b,p.justify2b{color:var(--q-lapis)}
p.center3a1,p.center1d,p.center1dd{color:var(--q-lapis)}

/* ============================================================
   12. URDU — NASTALIQ
   Nastaliq descends steeply. It needs size and line-height or
   it becomes a smear. This is the single biggest legibility
   fix on the Urdu half of the site.
   ============================================================ */
p.center1e,p.centere1e,p.center1ee,p.center1eee,p.center1eeb,p.center1eew,
p.center1eey,p.justify1aa,p.justify1aab,p.justify1aag,p.justify1aam,
p.justify1aaa,p.justify1aaah,p.justify2g,p.justify2bb,
.style2a,.style7,.auto-style4,.auto-style4un{
  font-family:var(--q-urdu);
  direction:rtl;
  text-align:right;
  font-size:1.32rem;
  line-height:2.55;
  color:var(--q-ink);
  margin:18px auto;
  max-width:64ch;
  word-spacing:normal;
  letter-spacing:normal;
  height:auto;
}
p.center1e,p.centere1e,p.center1ee,p.center1eee,p.center1eeb,
.style2a,.style7,.auto-style4,.auto-style4un{text-align:center}
.style7,.auto-style4{font-size:1.85rem;line-height:2.3;margin:30px auto 18px}
.style2a{font-size:1.6rem;line-height:2.4}
p.justify1aaah{font-size:1.55rem;margin-top:34px}
p.center1ee,p.center1e,p.justify1aam{color:var(--q-maroon)}
p.center1eee,p.center1eeb,p.justify1aab{color:var(--q-lapis)}
p.justify1aag,p.justify2g{color:var(--q-muted)}
.auto-style4un{direction:ltr}

/* ============================================================
   13. HINDI & BENGALI
   ============================================================ */
p.justifyah,.style7h,.auto-style4ah{
  font-family:var(--q-hindi);direction:ltr;text-align:left;
  font-size:1.12rem;line-height:1.95;color:var(--q-ink-2);
  margin:0 auto 1em;max-width:var(--q-measure);
}
p.justifyab,.style7b,.auto-style4ab{
  font-family:var(--q-bengali);direction:ltr;text-align:left;
  font-size:1.12rem;line-height:1.95;color:var(--q-ink-2);
  margin:0 auto 1em;max-width:var(--q-measure);
}
.style7h,.style7b,.auto-style4ah,.auto-style4ab{
  font-size:1.9rem;text-align:center;color:var(--q-ink);margin:30px auto 20px;
}

/* ============================================================
   14. BUTTONS
   The old .button1 was a fixed 468px wide gradient block.
   ============================================================ */
.button,.button1,.button2,.button3{
  display:inline-block;
  width:auto;
  max-width:100%;
  height:auto;
  background:var(--q-lapis);
  border:0;
  border-radius:3px;
  padding:11px 22px;
  color:#fff;
  font:500 .95rem/1.4 var(--q-sans);
  text-align:center;
  cursor:pointer;
  transition:background .15s ease;
}
.button:hover,.button1:hover,.button2:hover,.button3:hover{background:var(--q-lapis-hover)}
.button a,.button1 a,.button2 a,.button3 a,
.button a:link,.button1 a:link,.button a:visited,.button1 a:visited{
  color:#fff;text-decoration:none;font-weight:500;border:0;
}
@media (prefers-color-scheme:dark){
  .button,.button1,.button2,.button3{color:#0F1115}
  .button a,.button1 a,.button a:link,.button1 a:link,
  .button a:visited,.button1 a:visited{color:#0F1115}
}
.button2{background:var(--q-jade)}
.button3{background:var(--q-gilt)}

/* ============================================================
   15. AD SLOTS
   .style4a / .style5a / .style4aa are the cells that held the
   seven ad networks. The scripts are removed from the HTML;
   these rules stop the empty cells leaving holes in the page,
   and mark where a single clean network can go later.
   ============================================================ */
.q-ad{
  display:block;
  margin:22px auto;
  text-align:center;
  min-height:0;
  max-width:100%;
  overflow:hidden;
}
.q-ad:empty{display:none}
.q-ad::before{
  content:"";display:block;
}
td:empty{padding:0;border:0}
iframe[src="about:blank"]{display:none}

/* ============================================================
   16. HORIZONTAL RULES & DIVIDERS
   ============================================================ */
.style3hr{border-top:1px solid var(--q-line);height:0;color:transparent}
.style3hra{border-top:2px solid var(--q-gilt);height:0;width:120px;margin:24px auto;color:transparent}

/* ============================================================
   17. FOOTER  (.style1a in the closing table)
   ============================================================ */
body>table:last-of-type .style1a,
body>table:last-of-type .style4aa{
  font-size:.85rem;
  color:var(--q-muted);
  line-height:1.6;
}
.statcounter,.statcounter img{opacity:.35}

/* ============================================================
   18. RESPONSIVE
   The three-table skeleton stacks into one column on phones.
   ============================================================ */
@media (max-width:900px){
  body{font-size:16px}
  body>table,body>div>table{width:100%}
  .style4a,.style5a,.style4aa,.style5aa{
    display:block;width:100%!important;text-align:center;
  }
  body>table:first-of-type tr,
  body>table:last-of-type tr{display:block}
  body>table:first-of-type td,
  body>table:last-of-type td{display:block;width:100%!important}
}

@media (max-width:640px){
  body{font-size:16px;padding:0 14px}
  h1{font-size:1.55rem;margin:20px 0 10px}
  h2{font-size:1.05rem}

  /* Verse rows stack: number above, text below */
  .style10,.style11,.style11a{
    display:block;width:100%;text-align:left;
    padding:16px 0 2px;font-size:.78rem;letter-spacing:.06em;
  }
  .style12,.style12a,.style12aa{
    display:block;width:100%;padding:0 0 16px;font-size:1.05rem;
  }
  tr{display:block}

  /* Listing tables stack */
  .style10b,.style10c,.style10d{display:block;width:100%;text-align:left;white-space:normal}
  .style10c,.style10d{padding-top:0;border-bottom:0}
  .style10b{border-bottom:0;padding-bottom:2px;font-weight:600}
  tr:has(>.style10b){border-bottom:1px solid var(--q-line);display:block;padding:6px 0}

  ul{gap:6px}
  li a,li a:link,li a:visited{padding:8px 14px;font-size:.88rem}

  /* Scripts stay readable rather than shrinking */
  p.center1d,p.center3,p.center4,p.center3a1,.style7a,p.justify2b{font-size:1.42rem;line-height:2.0}
  p.center1e,p.justify1aa,p.justify1aaa,.style2a{font-size:1.22rem;line-height:2.45}
  .style7,.auto-style4{font-size:1.5rem}

  .button,.button1,.button2,.button3{display:block;width:100%;padding:13px 18px}
}

/* Wide content never forces the page sideways */
.q-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   19. ACCESSIBILITY & PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
::selection{background:var(--q-gilt-soft);color:var(--q-ink)}

@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .q-ad,.statcounter,ul,.button,.button1,.button2,.button3,.q-head,.q-foot{display:none!important}
  a{color:#000;border:0}
  .style12{border-bottom:1px solid #ccc}
}

/* ============================================================
   20. SHARED HEADER
   Added to the top of every page. Gives the site a menu and a
   search box it has never had.
   ============================================================ */
.q-head{
  margin:0 0 22px;
  padding:13px max(22px, calc((100% - 1140px) / 2));
  width:100%;
  background:var(--q-bar);
  border-bottom:2px solid var(--q-bar-line);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.q-brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--q-serif);
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:-.01em;
  color:var(--q-bar-ink);
  text-decoration:none;
  border:0;
  white-space:nowrap;
}
.q-brand:link,.q-brand:visited,.q-brand:hover,.q-brand:active{color:var(--q-bar-ink);border:0}
.q-brand em{font-style:normal;color:var(--q-gilt)}
.q-brand img{
  width:42px;
  height:42px;
  display:block;
  border-radius:50%;
  box-shadow:0 0 0 2px var(--q-bar-line);
  flex:none;
  border:0;
}
@media (max-width:820px){
  .q-brand img{width:34px;height:34px}
}

/* ============================================================
   21. LINK HOVER — colour change and a gentle grow
   A link that stands on its own (a menu item, a surah name, a
   download link, a button) lifts and grows slightly.
   A link inside a sentence only changes colour, because growing
   it would push the words around it and make the text jump.
   ============================================================ */

a{
  transition:color .18s ease,
             background-color .18s ease,
             border-color .18s ease,
             transform .18s cubic-bezier(.2,.7,.3,1);
}

/* -- a link that is the whole of its line or cell -- */
p > a:only-child,
li > a:only-child,
td > a:only-child,
h1 > a:only-child,
h2 > a:only-child,
h3 > a:only-child,
.q-nav a,
.button a, .button1 a, .button2 a, .button3 a{
  display:inline-block;
  transform-origin:center;
}

p > a:only-child:hover,     p > a:only-child:focus-visible,
li > a:only-child:hover,    li > a:only-child:focus-visible,
td > a:only-child:hover,    td > a:only-child:focus-visible,
h1 > a:only-child:hover,    h2 > a:only-child:hover,   h3 > a:only-child:hover{
  transform:scale(1.06);
  color:var(--q-lapis-hover);
  border-bottom-color:transparent;
}

/* -- menu pills and the Previous / Index / Next buttons -- */
li a:hover, li a:focus-visible,
.q-nav a:hover, .q-nav a:focus-visible{
  transform:translateY(-1px) scale(1.04);
}

/* -- the big buttons -- */
.button, .button1, .button2, .button3{
  transition:background-color .18s ease,
             transform .18s cubic-bezier(.2,.7,.3,1),
             box-shadow .18s ease;
  transform-origin:center;
}
.button:hover, .button1:hover, .button2:hover, .button3:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 18px -8px rgba(31,51,80,.55);
}

/* -- rows in the surah and download tables -- */
tr:hover > .style10b,
tr:hover > .style10c,
tr:hover > .style10d,
tr:hover > .style10{
  background:var(--q-lapis-soft);
}

/* -- a link inside a sentence: colour and underline only -- */
.style12 a:hover,
.style12a a:hover,
.style12aa a:hover,
p.justifya a:hover,
p.justify1 a:not(:only-child):hover,
p.justify1a a:not(:only-child):hover{
  transform:none;
  border-bottom-color:currentColor;
}

/* -- people who ask for less movement get none -- */
@media (prefers-reduced-motion:reduce){
  a:hover, a:focus-visible,
  .button:hover, .button1:hover, .button2:hover, .button3:hover,
  p > a:only-child:hover, li > a:only-child:hover, td > a:only-child:hover{
    transform:none!important;
  }
}

.q-nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.q-nav a,
.q-nav a:link,
.q-nav a:visited{
  display:inline-block;
  padding:6px 13px;
  border:0;
  border-radius:3px;
  font-family:var(--q-sans);
  font-size:.9rem;
  font-weight:500;
  color:var(--q-bar-mute);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.q-nav a:hover,
.q-nav a:focus-visible{
  background:var(--q-bar-hover);
  color:var(--q-bar-ink);
  border:0;
  font-size:.9rem;
}

.q-search{margin-left:auto;display:flex;align-items:center}
.q-search input{
  border:1px solid var(--q-bar-line);
  border-radius:3px;
  padding:9px 15px;
  font-family:var(--q-sans);
  font-size:.88rem;
  color:var(--q-bar-ink);
  background:var(--q-bar-field);
  min-width:215px;
  outline-offset:2px;
}
.q-search input::placeholder{color:var(--q-bar-mute)}
.q-search input:focus-visible{outline:2px solid var(--q-gilt);border-color:var(--q-gilt);background:rgba(255,255,255,.14)}

/* ---- shared footer strip ---- */
.q-foot{
  max-width:1140px;
  margin:40px auto 0;
  padding:18px 22px 30px;
  box-sizing:border-box;
  border-top:1px solid var(--q-line);
  font-family:var(--q-sans);
  font-size:.85rem;
  color:var(--q-muted);
  line-height:1.9;
  text-align:center;
}
.q-foot a,.q-foot a:link,.q-foot a:visited{
  color:var(--q-muted);font-weight:400;border:0;background:none;
  padding:0 2px;display:inline;white-space:nowrap;
}
.q-foot a:hover{color:var(--q-lapis);transform:none}
.q-foot .q-sep{color:var(--q-line-2);padding:0 5px}
.q-foot p{margin:0 0 4px;font-size:.85rem;color:var(--q-muted);text-align:center}

@media (max-width:820px){
  .q-head{gap:10px;margin:0 0 18px;padding:11px 15px}
  .q-brand{font-size:1.08rem}
  .q-search{margin-left:0;width:100%}
  .q-search input{width:100%;min-width:0}
  .q-nav{gap:1px}
  .q-nav a,.q-nav a:link,.q-nav a:visited{padding:6px 11px;font-size:.86rem}
  .q-nav a:hover{font-size:.86rem}
}


/* ============================================================
   22. GILDED TOUCHES
   Thin gold rules, to match the framed look of the homepage.
   ============================================================ */
h1{
  padding-bottom:14px;
  border-bottom:1px solid var(--q-gilt-line);
  position:relative;
}
h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:9px;
  height:9px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid var(--q-gilt);
  background:var(--q-paper);
}
h3{color:var(--q-lapis)}

/* verse tables sit inside a faint gold frame */
body > table:not(:first-of-type):not(:last-of-type){
  border:1px solid var(--q-line);
  background:var(--q-surface);
  padding:6px 16px;
}

.style5aa1,.style5aaa{
  border-bottom:1px solid var(--q-gilt-line);
  padding-bottom:8px;
  color:var(--q-lapis);
}

/* a gold rule above the footer */
body > table:last-of-type{
  border-top:1px solid var(--q-gilt-line);
  padding-top:14px;
  margin-top:26px;
}


/* ============================================================
   23. THE BISMILLAH
   Was a fixed-width JPEG on every surah page. Now real Arabic
   text: sharp on any screen, selectable, and it can be searched.
   ============================================================ */
.q-bism{
  display:block;
  font-family:var(--q-arabic);
  direction:rtl;
  text-align:center;
  font-size:2rem;
  line-height:2.1;
  color:var(--q-lapis);
  margin:20px auto 4px;
  letter-spacing:0;
}
@media (max-width:640px){
  .q-bism{font-size:1.6rem;line-height:2.05}
}


/* ============================================================
   24. ARTICLE PAGES
   About, Contact and Privacy. Ordinary reading pages, so the
   list and heading rules used elsewhere have to be undone here.
   ============================================================ */
.q-article{
  max-width:74ch;
  margin:0 auto;
  padding:0 0 70px;
  text-align:left;
}
.q-article h1{
  text-align:left;
  margin:22px 0 6px;
  font-size:clamp(1.8rem,4vw,2.5rem);
  padding-bottom:14px;
}
.q-article h1::after{left:0;transform:rotate(45deg)}
.q-article .q-lede{
  font-size:1.12rem;
  color:var(--q-ink-2);
  margin:0 0 6px;
  line-height:1.6;
}
.q-article .q-date{
  font-family:var(--q-sans);
  font-size:.82rem;
  color:var(--q-muted);
  margin:0 0 30px;
}
.q-article h3{
  font-size:1.22rem;
  color:var(--q-lapis);
  margin:34px 0 10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--q-gilt-line);
}
.q-article p{
  margin:0 0 1.05em;
  color:var(--q-ink-2);
  font-family:var(--q-serif);
  font-size:1.05rem;
  line-height:1.75;
  text-align:left;
  max-width:none;
}
.q-article p strong{color:var(--q-ink);font-weight:600}
.q-article ul{
  display:block;
  list-style:disc;
  padding-left:1.4em;
  margin:0 0 1.2em;
  justify-content:flex-start;
  gap:0;
}
.q-article li{
  display:list-item;
  text-align:left;
  padding:0;
  margin:0 0 .45em;
  color:var(--q-ink-2);
  font-family:var(--q-serif);
  font-size:1.03rem;
  line-height:1.7;
}
.q-article li a,
.q-article li a:link,
.q-article li a:visited{
  display:inline;
  padding:0;
  border:0;
  background:none;
  border-radius:0;
  font-family:var(--q-serif);
  font-size:inherit;
  color:var(--q-lapis);
  font-weight:600;
}
.q-article li a:hover{
  background:none;
  color:var(--q-lapis-hover);
  border-bottom:1px solid currentColor;
  transform:none;
}
.q-article .q-note{
  background:var(--q-surface);
  border:1px solid var(--q-line);
  border-left:3px solid var(--q-gilt);
  padding:16px 20px;
  margin:24px 0;
}
.q-article .q-note p{margin:0;font-size:1rem}
.q-article table{
  width:100%;
  margin:0 0 1.4em;
  border:1px solid var(--q-line);
  background:var(--q-surface);
}
.q-article th,.q-article td{
  padding:10px 14px;
  border-bottom:1px solid var(--q-line);
  font-family:var(--q-sans);
  font-size:.95rem;
  text-align:left;
  color:var(--q-ink-2);
}
.q-article th{
  background:var(--q-surface-2);
  color:var(--q-ink);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.03em;
}
.q-article tr:last-child td{border-bottom:0}