/*
Theme Name: Noor-e-Hikmat
Theme URI: https://noorehikmat.com/
Author: Noor-e-Hikmat
Description: Multilingual (English, Arabic, Urdu) Islamic learning theme for Quran, Hadith and Prayers content. Works with the free Polylang plugin for the language switcher and right-to-left layouts.
Version: 1.9.4
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noorehikmat
*/

/* ============================================================
   1. FONTS (self-hosted, no data sent to Google)
   ============================================================ */
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-latin-regular.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0304,U+0308,U+0327,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/amiri-latin-bold.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0304,U+0308,U+0327,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-arabic-regular.woff) format('woff');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+25CC;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/amiri-arabic-bold.woff) format('woff');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+25CC;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/worksans-var.woff) format('woff');}
@font-face{font-family:'NH Quran Naskh';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/nh-quran-naskh.woff) format('woff');} /* IndoPak script, loaded only when chosen */
@font-face{font-family:'Noto Nastaliq Urdu';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/notonastaliqurdu-var.woff) format('woff');}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#12213B;
  --ink-soft:#1B2E4F;
  --parchment:#F2E9D8;
  --parchment-soft:#E9DEC7;
  --paper:#FFFFFF;
  --charcoal:#201C16;
  --muted:#655D50;
  --lapis:#2C6088;
  --gold:#AD8137;          /* borders and decoration only */
  --gold-text:#7A5A22;     /* gold-coloured text on light backgrounds (meets contrast) */
  --gold-on-ink:#D4A95A;   /* gold-coloured text on navy */
  --clay:#9A4A38;
  --clay-dark:#7F3B2C;
  --success:#2F6B4F;
  --line:rgba(32,28,22,0.14);
  --line-on-ink:rgba(242,233,216,0.18);
  --font-display:'Amiri','Georgia',serif;
  --font-body:'Work Sans',-apple-system,'Segoe UI',sans-serif;
  --font-arabic:'Amiri','Traditional Arabic',serif;
  --font-urdu:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Amiri',serif;
  --container:1180px;
  --radius:4px;
  --header-h:72px;
  /* Roles used by the colour themes (Auto / Light / Sepia / Dark) */
  --bg:var(--parchment);
  --bg-soft:var(--parchment-soft);
  --surface:var(--paper);
  --text:var(--charcoal);
  --text-soft:#3a342b;
  --heading:var(--ink);
  --band:var(--ink);
  --header-bg:rgba(242,233,216,.96);
  --field-border:#bdb3a0;
  --pressed-bg:var(--ink);
  --pressed-fg:var(--parchment);
  color-scheme:light;
}


/* Colour themes, matched to Quran.com: Light (white), Sepia (warm paper) and Dark.
   "Auto" (no choice saved) follows the device: Light by day, Dark if the phone or computer is in dark mode. */
:root,:root[data-theme="light"]{--bg:#FFFFFF;--bg-soft:#F8F9FA;--surface:#FFFFFF;--text:#272727;--text-soft:#333333;--heading:#1F2125;--charcoal:#272727;--band:#F4F5F6;--parchment:#272727;--parchment-soft:#495057;--gold-on-ink:#7A5A22;--line-on-ink:rgb(222,226,230);--line:rgb(235,238,240);--muted:#666666;--header-bg:rgba(255,255,255,.96);--field-border:#CCCCCC;--pressed-bg:#272727;--pressed-fg:#FFFFFF;color-scheme:light;}
:root[data-theme="sepia"]{--bg:#F8EBD5;--bg-soft:#F0E2CC;--surface:#FFF7EA;--text:#010101;--text-soft:#2A2216;--heading:#010101;--charcoal:#010101;--band:#F0E2CC;--parchment:#1D1710;--parchment-soft:#4A3F30;--gold-on-ink:#74531C;--gold-text:#74531C;--line-on-ink:#DBCCB3;--line:#DBCCB3;--muted:#5C5245;--header-bg:rgba(248,235,213,.96);--field-border:#C9B896;--pressed-bg:#2A2216;--pressed-fg:#FFF7EA;color-scheme:light;}
:root[data-theme="dark"]{--bg:#1F2125;--bg-soft:#26292E;--surface:#25282C;--text:#E7E9EA;--text-soft:#D0D3D5;--heading:#F1F3F4;--charcoal:#E7E9EA;--band:#2A2D32;--parchment:#E7E9EA;--parchment-soft:#C9CDD1;--gold-on-ink:#D4A95A;--gold-text:#D4A95A;--line-on-ink:rgb(70,75,80);--line:rgb(70,75,80);--muted:#A0A6AC;--header-bg:rgba(31,33,37,.95);--field-border:#5A6066;--pressed-bg:#E7E9EA;--pressed-fg:#1F2125;--lapis:#7FC4C9;--success:#4E9A74;color-scheme:dark;}
:root[data-theme="dark"] .grading-badge,:root[data-theme="dark"] .notice-success{background:rgba(78,154,116,.16);border-color:rgba(78,154,116,.45);color:#9FD3B6;}
:root[data-theme="dark"] .grading-badge.grade-hasan{background:rgba(127,196,201,.14);border-color:rgba(127,196,201,.4);color:var(--lapis);}
:root[data-theme="dark"] .grading-badge.grade-daif,:root[data-theme="dark"] .notice-error{background:rgba(224,138,114,.14);border-color:rgba(224,138,114,.4);color:#F0B3A1;}
:root[data-theme="dark"] .req{color:#F0A58F;}
:root[data-theme="dark"] .verse:target{background:rgba(212,169,90,.10);}
@media (prefers-color-scheme:dark){
:root:not([data-theme]){--bg:#1F2125;--bg-soft:#26292E;--surface:#25282C;--text:#E7E9EA;--text-soft:#D0D3D5;--heading:#F1F3F4;--charcoal:#E7E9EA;--band:#2A2D32;--parchment:#E7E9EA;--parchment-soft:#C9CDD1;--gold-on-ink:#D4A95A;--gold-text:#D4A95A;--line-on-ink:rgb(70,75,80);--line:rgb(70,75,80);--muted:#A0A6AC;--header-bg:rgba(31,33,37,.95);--field-border:#5A6066;--pressed-bg:#E7E9EA;--pressed-fg:#1F2125;--lapis:#7FC4C9;--success:#4E9A74;color-scheme:dark;}
:root:not([data-theme]) .grading-badge,:root:not([data-theme]) .notice-success{background:rgba(78,154,116,.16);border-color:rgba(78,154,116,.45);color:#9FD3B6;}
:root:not([data-theme]) .grading-badge.grade-hasan{background:rgba(127,196,201,.14);border-color:rgba(127,196,201,.4);color:var(--lapis);}
:root:not([data-theme]) .grading-badge.grade-daif,:root:not([data-theme]) .notice-error{background:rgba(224,138,114,.14);border-color:rgba(224,138,114,.4);color:#F0B3A1;}
:root:not([data-theme]) .req{color:#F0A58F;}
:root:not([data-theme]) .verse:target{background:rgba(212,169,90,.10);}
}

/* Arabic interface */
html[lang^="ar"]{--font-display:var(--font-arabic);--font-body:var(--font-arabic);}
html[lang^="ar"] body{font-size:18px;line-height:1.85;}
/* Urdu interface (Nastaliq needs extra line height) */
html[lang^="ur"]{--font-display:var(--font-urdu);--font-body:var(--font-urdu);}
html[lang^="ur"] body{font-size:16.5px;line-height:2.2;}
html[lang^="ur"] h1,html[lang^="ur"] h2,html[lang^="ur"] h3,html[lang^="ur"] h4{line-height:2.3;word-spacing:.18em;font-weight:600;}
html[lang^="ar"] .eyebrow,html[lang^="ur"] .eyebrow,
html[lang^="ar"] .ref,html[lang^="ur"] .ref{letter-spacing:0;text-transform:none;}

/* ============================================================
   3. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:3px solid var(--lapis);outline-offset:2px;border-radius:2px;}
.on-ink :focus-visible,.site-footer :focus-visible{outline-color:var(--gold-on-ink);}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:999;background:var(--band);color:var(--parchment);padding:10px 16px;border-radius:var(--radius);font-weight:600;}
.skip-link:focus{top:12px;}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:32px;}
.wrap-narrow{max-width:780px;margin-inline:auto;padding-inline:24px;}
@media (max-width:640px){.wrap{padding-inline:16px;}.wrap-narrow{padding-inline:16px;}}

.eyebrow{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-text);}
.on-ink .eyebrow{color:var(--gold-on-ink);}
.arabic{font-family:var(--font-arabic);direction:rtl;text-align:right;line-height:2;}
.arabic[lang="ar"]{unicode-bidi:isolate;}
.muted{color:var(--muted);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius);font-weight:600;font-size:14.5px;border:1px solid transparent;transition:transform .15s ease,background .15s ease,color .15s ease;line-height:1.3;min-height:44px;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--clay);color:#fff;}
.btn-primary:hover{background:var(--clay-dark);}
.btn-ghost-ink{border-color:var(--text);color:var(--text);background:transparent;}
.btn-ghost-ink:hover{background:var(--text);color:var(--bg);}
.btn-ghost-light{border-color:var(--parchment);color:var(--parchment);}
.btn-ghost-light:hover{background:var(--bg);color:var(--heading);}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* Pattern used on navy sections */
.pattern{position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F2E9D8' stroke-width='1'%3E%3Cpath d='M60 6 L88 30 L114 60 L88 90 L60 114 L32 90 L6 60 L32 30 Z'/%3E%3Cpath d='M60 6 L60 114 M6 60 L114 60 M18 18 L102 102 M18 102 L102 18'/%3E%3C/g%3E%3C/svg%3E");background-size:120px 120px;}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.admin-bar .site-header{top:32px;}
@media (max-width:782px){.admin-bar .site-header{top:46px;}}
.site-header .wrap{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:var(--font-display);font-weight:700;font-size:22px;display:flex;align-items:center;gap:10px;line-height:1.2;}
.logo .mark{width:30px;height:30px;flex:none;}
.logo img{max-height:44px;width:auto;}
.header-right{display:flex;align-items:center;gap:22px;}
.primary-nav ul{display:flex;gap:26px;list-style:none;font-size:15px;font-weight:500;}
.primary-nav a{padding-block:6px;border-bottom:2px solid transparent;}
.primary-nav a:hover{color:var(--lapis);}
.primary-nav .current-menu-item>a,.primary-nav .current-menu-ancestor>a,.primary-nav a[aria-current="page"],.primary-nav .is-active>a{color:var(--lapis);border-bottom-color:var(--gold);}
.primary-nav .sub-menu{display:none;}

/* Language switcher */
.lang-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:22px;padding:3px;background:var(--surface);}
.lang-switch a,.lang-switch span{display:inline-flex;align-items:center;min-height:32px;padding:2px 12px;border-radius:18px;font-size:14px;font-weight:600;line-height:1;color:var(--muted);}
.lang-switch a:hover{color:var(--text);background:var(--bg-soft);}
.lang-switch .is-current{background:var(--pressed-bg);color:var(--pressed-fg);}
 /* System fonts here so English pages don't download the Arabic/Urdu web fonts just for two labels. */
.lang-switch [lang="ar"],.lang-switch [lang="ur"]{font-family:'Segoe UI','Geeza Pro','Noto Naskh Arabic',Tahoma,sans-serif;font-size:14.5px;font-weight:500;}
html[lang^="ar"] .lang-switch [lang="ar"]{font-family:var(--font-arabic);}
html[lang^="ur"] .lang-switch [lang="ur"]{font-family:var(--font-urdu);line-height:1.6;}

.header-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;}
.header-search:hover{background:var(--bg-soft);}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);width:44px;height:44px;align-items:center;justify-content:center;}
.menu-toggle svg{width:22px;height:22px;}

@media (max-width:900px){
  .menu-toggle{display:inline-flex;}
  .header-right{gap:10px;}
  .primary-nav{position:absolute;inset-inline:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);display:none;box-shadow:0 12px 24px rgba(18,33,59,.08);}
  .primary-nav.is-open{display:block;}
  .primary-nav ul{flex-direction:column;gap:0;padding:8px 16px 16px;}
  .primary-nav li a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);}
  .primary-nav .sub-menu{display:block;padding:0 0 0 16px;}
  .header-search{display:none;}
}
@media (max-width:480px){
  .logo{font-size:17px;gap:8px;white-space:nowrap;}
  .logo .mark{display:none;}
  .logo img{max-height:36px;}
  .lang-switch a,.lang-switch span{padding:2px 7px;font-size:13px;}
  .site-header .wrap{gap:8px;}
  .header-right{gap:6px;}
  .logo{font-size:16px;}
  .theme-current{width:38px;min-height:38px;padding:0;justify-content:center;}
  .theme-current .tm-chev{display:none;}
  .menu-toggle{width:40px;height:40px;}
}
@media (max-width:385px){
  /* Small phones: the logo mark stands in for the site name so everything fits on one line */
  .site-header .logo .mark{display:block;}
  .site-header .logo>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
}
@media (max-width:340px){.lang-switch a,.lang-switch span{padding:2px 5px;font-size:12px;}}

/* ============================================================
   5. FOOTER
   ============================================================ */
.site-footer{background:var(--band);color:var(--parchment-soft);padding:52px 0 32px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:32px;margin-bottom:24px;border-bottom:1px solid var(--line-on-ink);}
.footer-grid .logo{color:var(--parchment);margin-bottom:12px;}
.footer-about{font-size:14.5px;max-width:360px;opacity:.85;}
.footer-col h2{font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-on-ink);margin-bottom:12px;font-weight:600;}
html[lang^="ar"] .footer-col h2,html[lang^="ur"] .footer-col h2{letter-spacing:0;font-size:15px;}
.footer-col ul{list-style:none;display:grid;gap:8px;font-size:14.5px;}
.footer-col a:hover{color:var(--gold-on-ink);}
.footer-bottom{font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--parchment-soft);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}

/* ============================================================
   6. HOMEPAGE
   ============================================================ */
.hero{background:var(--band);color:var(--parchment);position:relative;overflow:hidden;padding:84px 0 92px;}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,4.6vw,56px);line-height:1.15;margin:14px 0 18px;}
.hero p.lead{color:var(--parchment-soft);font-size:17.5px;max-width:560px;margin-bottom:30px;}
html[lang^="ur"] .hero h1{line-height:2.3;font-size:clamp(28px,3.6vw,46px);}
html[lang^="ur"] .entry-title,html[lang^="ur"] .archive-intro h1{font-size:clamp(26px,3.4vw,40px);}
@media (max-width:900px){.hero{padding:56px 0 64px;}.hero-grid{grid-template-columns:1fr;gap:40px;}}

.rotator{border:1px solid rgba(173,129,55,.55);border-radius:var(--radius);padding:34px 30px 24px;background:rgba(255,255,255,.03);position:relative;}
.rotator::before{content:"";position:absolute;inset:7px;border:1px solid rgba(173,129,55,.22);border-radius:2px;pointer-events:none;}
.rotator-slide{display:none;}
.rotator-slide.is-active{display:block;}
.rotator-slide .arabic{font-size:clamp(24px,2.8vw,32px);color:var(--parchment);margin:14px 0 16px;}
.rotator-slide .translation{color:var(--parchment-soft);font-size:15.5px;margin-bottom:10px;}
.rotator-slide .ref{font-size:13px;color:var(--gold-on-ink);font-weight:600;letter-spacing:.02em;}
.rotator-controls{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-on-ink);}
.rotator-dots{display:flex;gap:4px;}
.rotator-dots button{width:24px;height:24px;border:none;background:none;display:inline-flex;align-items:center;justify-content:center;}
.rotator-dots button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(242,233,216,.35);}
.rotator-dots button[aria-current="true"]::after{background:var(--gold-on-ink);}
.rotator-arrows{display:flex;gap:8px;}
.rotator-arrows button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-on-ink);background:none;color:var(--parchment);display:inline-flex;align-items:center;justify-content:center;}
.rotator-arrows button:hover{border-color:var(--gold-on-ink);}
[dir="rtl"] .rotator-arrows svg{transform:scaleX(-1);}

.section{padding:84px 0;}
.section-alt{background:var(--bg-soft);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap;}
.section-head h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);line-height:1.2;margin-top:8px;}
.section-head p{color:var(--muted);max-width:560px;margin-top:8px;}
.section-link{font-weight:600;font-size:14.5px;color:var(--lapis);}
.section-link:hover{text-decoration:underline;}
@media (max-width:640px){.section{padding:56px 0;}}

.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
.pillar-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease;position:relative;}
.pillar-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,33,59,.08);}
html[lang^="ar"] .pillar-card .pillar-ar{display:none;}
.pillar-card .pillar-ar{font-family:var(--font-arabic);font-size:30px;color:var(--gold-text);line-height:1.4;}
.pillar-card h3{font-family:var(--font-display);font-size:26px;line-height:1.3;}
.pillar-card p{color:var(--muted);font-size:15px;flex:1;}
.pillar-card .count{font-size:13px;font-weight:600;color:var(--lapis);}
.pillar-card a.stretched::after{content:"";position:absolute;inset:0;}
@media (max-width:860px){.pillar-grid{grid-template-columns:1fr;}}

.path-teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;}
.path-steps{list-style:none;counter-reset:step;display:grid;gap:12px;}
.path-steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.path-steps li::before{content:counter(step);flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--gold-text);}
.path-steps strong{display:block;font-size:15.5px;}
.path-steps span{color:var(--muted);font-size:14px;}
@media (max-width:860px){.path-teaser{grid-template-columns:1fr;gap:28px;}}

.mission{background:var(--band);color:var(--parchment);position:relative;overflow:hidden;}
.mission .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.mission h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);line-height:1.25;margin-top:8px;}
.mission p{color:var(--parchment-soft);}
@media (max-width:860px){.mission .wrap{grid-template-columns:1fr;gap:20px;}}

/* ============================================================
   7. CARDS (articles, verses, hadith, guides)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card-grid.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid,.card-grid.two{grid-template-columns:1fr;}}

.article-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s ease,box-shadow .2s ease;}
.article-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,33,59,.08);}
.article-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--band) 0%,var(--ink-soft) 60%,#2b4a6e 100%);position:relative;overflow:hidden;}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;}
.article-card .thumb .pattern{opacity:.12;}
.article-card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.article-card h3{font-family:var(--font-display);font-size:21px;line-height:1.35;}
.article-card h3 a::after{content:"";position:absolute;inset:0;}
.article-card p{color:var(--muted);font-size:14.5px;flex:1;}
.article-card .meta{font-size:12.5px;color:var(--muted);}

.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);}
html[lang^="ar"] .tag,html[lang^="ur"] .tag{letter-spacing:0;font-size:13px;}
.topic-tags{display:flex;flex-wrap:wrap;gap:6px;}
.topic-tags a,.topic-tags span{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--bg-soft);color:var(--lapis);position:relative;z-index:1;}
.topic-tags a:hover{background:var(--bg);}

.text-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:10px;}
.text-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.text-card .ref{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-text);display:block;}
.text-card .sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.text-card h3{font-family:var(--font-display);font-size:20px;line-height:1.35;}
.text-card .arabic{font-size:clamp(20px,2.4vw,25px);}
.text-card .translit{font-size:13.5px;font-style:italic;color:var(--muted);}
.text-card .translation{font-size:15px;flex:1;}
.text-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;margin-top:4px;border-top:1px solid var(--line);font-size:13px;}
.read-more{font-weight:600;font-size:13.5px;}
.read-more:hover{color:var(--lapis);}
[dir="rtl"] .read-more .arrow{display:inline-block;transform:scaleX(-1);}

/* Show/hide fields from the toggles */
.hide-arabic .js-f-arabic,.hide-translation .js-f-translation,.hide-translit .js-f-translit{display:none!important;}

.bookmark-btn{background:none;border:none;color:var(--muted);padding:6px;line-height:0;border-radius:50%;flex:none;position:relative;z-index:2;}
.bookmark-btn:hover{color:var(--gold-text);background:var(--bg-soft);}
.bookmark-btn[aria-pressed="true"]{color:var(--gold);}
.bookmark-btn[aria-pressed="true"] svg path{fill:currentColor;}
.bookmark-btn svg{width:19px;height:19px;}

/* ============================================================
   8. ARCHIVES
   ============================================================ */
.archive-intro{background:var(--band);color:var(--parchment);padding:56px 0 44px;position:relative;overflow:hidden;}
.archive-intro .wrap{position:relative;}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:16px;}
.breadcrumb a:hover{color:var(--lapis);text-decoration:underline;}
.breadcrumb .sep{margin-inline:6px;opacity:.6;}
.archive-intro .breadcrumb{color:var(--parchment-soft);}
.archive-intro .breadcrumb a:hover{color:var(--gold-on-ink);}
.archive-intro h1{font-family:var(--font-display);font-size:clamp(30px,3.8vw,44px);line-height:1.2;margin-bottom:12px;}
.archive-intro p{color:var(--parchment-soft);max-width:640px;font-size:15.5px;margin-bottom:10px;}
.archive-stat{font-size:13px;color:var(--gold-on-ink);font-weight:600;}

.controls{background:var(--bg);border-bottom:1px solid var(--line);padding:18px 0;}
.controls-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.search-box{flex:1;min-width:220px;max-width:380px;position:relative;}
.search-box input{width:100%;min-height:44px;padding:10px 16px;padding-inline-start:40px;border:1px solid var(--line);border-radius:22px;font-size:14.5px;background:var(--surface);}
.search-box svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;}
.display-toggles{display:flex;gap:8px;flex-wrap:wrap;}
.toggle-pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);}
.toggle-pill[aria-pressed="true"]{background:var(--pressed-bg);border-color:var(--pressed-bg);color:var(--pressed-fg);}
.toggle-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;}
.toggle-pill[aria-pressed="true"] .dot{background:var(--gold-on-ink);opacity:1;}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.filter-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 15px;border-radius:20px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--text-soft);}
.filter-chip:hover{border-color:var(--gold);}
.filter-chip.is-active{background:var(--clay);border-color:var(--clay);color:#fff;}

.results{padding:40px 0 84px;}
.results-meta{font-size:13.5px;color:var(--muted);margin-bottom:22px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);}

.pagination{margin-top:40px;}
.pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-weight:600;font-size:14px;}
.pagination .page-numbers.current{background:var(--band);color:var(--parchment);border-color:var(--band);}
.pagination a.page-numbers:hover{border-color:var(--gold);}

/* ============================================================
   9. SINGLE CONTENT (article, hadith, guide, verse, page)
   ============================================================ */
.shell{max-width:800px;margin-inline:auto;padding:52px 24px 72px;}
@media (max-width:640px){.shell{padding:36px 16px 56px;}}
.entry-title{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);line-height:1.2;margin:10px 0 16px;}
.entry-intro{font-size:17px;color:var(--muted);margin-bottom:18px;}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13.5px;color:var(--muted);padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line);}
.entry-meta .sep{opacity:.5;}
.entry-actions{margin-inline-start:auto;display:flex;gap:6px;}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:var(--text);}
.icon-btn:hover{border-color:var(--gold);}
.icon-btn svg{width:16px;height:16px;}
.icon-btn[aria-pressed="true"]{color:var(--gold);}
.icon-btn[aria-pressed="true"] svg path{fill:currentColor;}
.avatar-sm{width:28px;height:28px;border-radius:50%;background:var(--band);color:var(--parchment);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;}
.avatar-sm img{width:100%;height:100%;object-fit:cover;}

.quote-card{background:var(--band);color:var(--parchment);border-radius:var(--radius);padding:34px 32px;margin:28px 0 36px;position:relative;overflow:hidden;}
.quote-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(173,129,55,.35);border-radius:2px;pointer-events:none;}
.quote-card .eyebrow{color:var(--gold-on-ink);margin-bottom:12px;}
.quote-card .arabic{font-size:clamp(24px,3vw,32px);margin:6px 0 14px;color:var(--parchment);}
.quote-card .translit{font-style:italic;color:var(--parchment-soft);opacity:.85;font-size:14.5px;margin-bottom:10px;}
.quote-card .translation{color:var(--parchment-soft);font-size:16px;margin-bottom:10px;}
.quote-card .ref{font-size:13px;color:var(--gold-on-ink);font-weight:600;}
.quote-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;position:relative;}
.quote-controls .toggle-pill{background:transparent;color:var(--parchment-soft);border-color:var(--line-on-ink);}
.quote-controls .toggle-pill[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#12213B;}
.quote-controls .toggle-pill[aria-pressed="true"] .dot{background:#12213B;}
@media (max-width:640px){.quote-card{padding:28px 22px;}}

.entry-content{font-size:17px;line-height:1.8;}
html[lang^="ur"] .entry-content{font-size:17px;line-height:2.3;}
.entry-content>*+*{margin-top:1.1em;}
.entry-content h2{font-family:var(--font-display);font-size:28px;line-height:1.3;margin-top:1.8em;}
.entry-content h3{font-family:var(--font-display);font-size:22px;line-height:1.35;margin-top:1.5em;}
.entry-content h4{font-size:17px;margin-top:1.3em;}
.entry-content a{color:var(--lapis);text-decoration:underline;text-underline-offset:3px;}
.entry-content ul,.entry-content ol{padding-inline-start:1.4em;}
.entry-content li+li{margin-top:.4em;}
.entry-content blockquote{border-inline-start:3px solid var(--gold);padding:6px 0;padding-inline-start:20px;color:var(--muted);font-style:italic;}
.entry-content img{border-radius:var(--radius);}
.entry-content figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface);}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top;}
.entry-content th{background:var(--bg-soft);}
.entry-content :lang(ar),.entry-content .has-arabic{font-family:var(--font-arabic);font-size:1.25em;line-height:2;}
.entry-content .alignwide{max-width:none;}
.entry-content .wp-block-button__link{background:var(--clay);color:#fff;border-radius:var(--radius);text-decoration:none;}

.source-box{margin-top:40px;padding:22px 24px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-size:14.5px;}
.source-box h2{font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px;font-weight:700;}
html[lang^="ar"] .source-box h2,html[lang^="ur"] .source-box h2{letter-spacing:0;font-size:15px;}
.source-box ol{padding-inline-start:1.3em;display:grid;gap:4px;}

.author-card{display:flex;gap:18px;margin-top:28px;padding:22px 24px;border-radius:var(--radius);background:var(--bg-soft);}
.author-photo{width:64px;height:64px;flex:none;border-radius:50%;background:var(--band);color:var(--parchment);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:700;overflow:hidden;}
.author-photo img{width:100%;height:100%;object-fit:cover;}
.author-card h2{font-family:var(--font-display);font-size:19px;}
.author-card p{font-size:14.5px;color:var(--muted);}

/* Hadith detail */
.hadith-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.grading-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;background:#E3EFE7;color:var(--success);border:1px solid #B9D5C4;}
.grading-badge.grade-hasan{background:#EAF0F6;color:var(--lapis);border-color:#C5D5E5;}
.grading-badge.grade-daif{background:#F6E9E4;color:var(--clay-dark);border-color:#E3C6BC;}
.grading-badge svg{width:14px;height:14px;}
.grading-note{font-size:13.5px;color:var(--muted);margin:10px 0 24px;}
.grading-note details{display:inline;}
.grading-note summary{display:inline;cursor:pointer;color:var(--lapis);text-decoration:underline;}
.grading-note details[open] p{display:block;margin-top:10px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}

.isnad{margin:24px 0;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.isnad h2{font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px;font-weight:700;}
html[lang^="ar"] .isnad h2,html[lang^="ur"] .isnad h2{letter-spacing:0;font-size:15px;}
.isnad ol{list-style:none;display:flex;gap:0;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;}
.isnad li{flex:none;display:flex;align-items:center;scroll-snap-align:start;}
.isnad .node{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);font-size:14px;font-weight:600;white-space:nowrap;}
.isnad li:first-child .node{border-color:var(--gold);}
.isnad li+li::before{content:"";width:26px;height:1px;background:var(--gold);flex:none;}

/* Ibadaat guide */
.guide-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:14px;color:var(--muted);padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--line);}
.guide-meta-item{display:inline-flex;align-items:center;gap:6px;}
.guide-meta-item svg{width:16px;height:16px;color:var(--gold-text);}
.steps{list-style:none;display:grid;gap:14px;margin:28px 0 36px;counter-reset:gstep;}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);counter-increment:gstep;transition:border-color .15s ease;}
.step::before{content:counter(gstep);width:34px;height:34px;border-radius:50%;background:var(--band);color:var(--parchment);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.step h3{font-size:16.5px;margin-bottom:4px;font-family:var(--font-body);}
.step p{color:var(--muted);font-size:15px;}
.step.is-done{border-color:var(--success);}
.step.is-done::before{background:var(--success);}
.step-check{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:none;color:transparent;}
.step-check[aria-pressed="true"]{background:var(--success);border-color:var(--success);color:#fff;}
.step-check svg{width:16px;height:16px;}

.faq{margin-top:36px;}
.faq>h2{font-family:var(--font-display);font-size:26px;margin-bottom:14px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:600;font-size:16px;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{width:18px;height:18px;flex:none;transition:transform .2s ease;}
.faq details[open] summary svg{transform:rotate(180deg);}
.faq details>div{padding:0 0 18px;color:var(--muted);}

/* Related + CTA */
.related{background:var(--bg-soft);padding:56px 0;}
.related h2{font-family:var(--font-display);font-size:28px;margin-bottom:24px;}
.cta-band{padding:72px 0;}
.cta-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:44px 40px;text-align:center;position:relative;}
.cta-box::before{content:"";position:absolute;inset:8px;border:1px solid rgba(173,129,55,.25);border-radius:2px;pointer-events:none;}
.cta-box h2{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);margin-bottom:8px;}
.cta-box p{color:var(--muted);margin-bottom:22px;}
.cta-box .btn-row{justify-content:center;position:relative;}
@media (max-width:640px){.cta-band{padding:48px 0;}.cta-box{padding:32px 20px;}}

/* ============================================================
   10. LEGAL / POLICY PAGES (sticky table of contents)
   ============================================================ */
.legal-layout{display:grid;grid-template-columns:220px 1fr;gap:56px;padding:48px 0 80px;}
.legal-toc{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;font-size:14px;}
.legal-toc .eyebrow{margin-bottom:10px;}
.legal-toc ol{list-style:none;border-inline-start:1px solid var(--line);display:grid;gap:2px;}
.legal-toc a{display:block;padding:6px 14px;margin-inline-start:-1px;border-inline-start:2px solid transparent;color:var(--muted);}
.legal-toc a:hover{color:var(--text);}
.legal-toc a.is-active{border-inline-start-color:var(--gold);color:var(--text);font-weight:600;}
.legal-updated{font-size:13.5px;color:var(--muted);margin-bottom:28px;}
@media (max-width:860px){.legal-layout{grid-template-columns:1fr;gap:24px;padding-top:32px;}.legal-toc{position:static;}}

/* ============================================================
   11. STARTER PATH (page template)
   ============================================================ */
.path-progress{margin-top:22px;max-width:420px;}
.path-progress-bar{height:6px;background:rgba(242,233,216,.2);border-radius:4px;overflow:hidden;margin-top:8px;}
.path-progress-bar span{display:block;height:100%;width:0;background:var(--gold-on-ink);transition:width .3s ease;}
.path-progress-label{display:flex;justify-content:space-between;font-size:13px;color:var(--parchment-soft);}
.path-content{counter-reset:pstep;}
.path-step{position:relative;padding-inline-start:64px;padding-bottom:30px;}
.path-step::before{counter-increment:pstep;content:counter(pstep);position:absolute;inset-inline-start:0;top:0;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--gold-text);}
.path-step::after{content:"";position:absolute;inset-inline-start:21px;top:48px;bottom:4px;border-inline-start:1px dashed var(--gold);}
.path-step:last-child::after{display:none;}
.path-step.is-done::before{background:var(--success);border-color:var(--success);color:#fff;}
.path-step-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;}
.path-step-card h2{font-family:var(--font-display);font-size:24px;margin:0 0 8px!important;}
.path-step-card .step-check{float:inline-end;margin-inline-start:10px;}
.path-step-card>*+*{margin-top:.8em;}

/* ============================================================
   12. FORMS (Ask a Question)
   ============================================================ */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;}
.form-row .hint{font-size:13px;color:var(--muted);margin-top:4px;}
.form-row input[type=text],.form-row input[type=email],.form-row textarea,.form-row select{width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--field-border);border-radius:var(--radius);background:var(--surface);font-size:15.5px;}
.form-row textarea{min-height:160px;resize:vertical;}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--lapis);outline:2px solid rgba(44,96,136,.25);}
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.form-check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--clay);}
.hp-field{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden;}
.notice{padding:14px 18px;border-radius:var(--radius);margin-bottom:22px;font-size:15px;border:1px solid;}
.notice-success{background:#E3EFE7;border-color:#B9D5C4;color:#1f4d37;}
.notice-error{background:#F6E9E4;border-color:#E3C6BC;color:#6d2f22;}
.req{color:var(--clay);}

/* ============================================================
   13. 404 + SEARCH + SAVED
   ============================================================ */
.notfound{text-align:center;padding:90px 0 100px;}
.notfound .num{width:96px;height:96px;margin:0 auto 24px;border-radius:50%;border:2px solid var(--band);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:30px;}
.notfound h1{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);margin-bottom:10px;}
.notfound p{color:var(--muted);max-width:520px;margin:0 auto 26px;}
.notfound .search-box{margin:0 auto 22px;}
.quick-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.saved-list{display:grid;gap:14px;}
.saved-item{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.saved-item a{font-weight:600;}
.saved-item a:hover{color:var(--lapis);}
.saved-item .tag{display:block;margin-bottom:2px;}

/* ============================================================
   14. WORDPRESS CORE CLASSES
   ============================================================ */
.alignleft{float:inline-start;margin-inline-end:1.5em;margin-bottom:1em;}
.alignright{float:inline-end;margin-inline-start:1.5em;margin-bottom:1em;}
.aligncenter{margin-inline:auto;display:block;}
.wp-caption-text{font-size:13px;color:var(--muted);}
.sticky,.bypostauthor,.gallery-caption{}

/* ============================================================
   15. QURAN READER (/quran/read/)
   ============================================================ */
.surah-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:960px){.surah-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.surah-grid{grid-template-columns:1fr;}}
.surah-card{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:border-color .15s ease,transform .15s ease;}
.surah-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.surah-card[hidden]{display:none;}
.surah-num{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;position:relative;font-weight:700;font-size:13px;color:var(--gold-text);}
.surah-num::before{content:"";position:absolute;inset:5px;border:1.4px solid var(--gold);transform:rotate(45deg);border-radius:3px;}
.surah-num span{position:relative;}
.surah-names{flex:1;min-width:0;display:flex;flex-direction:column;}
.surah-name{font-weight:600;font-size:15.5px;}
.surah-name::after{content:"";position:absolute;inset:0;}
.surah-meaning{font-size:13px;color:var(--muted);}
.surah-side{display:flex;flex-direction:column;align-items:flex-end;text-align:end;}
.surah-ar{font-family:var(--font-arabic);font-size:21px;line-height:1.4;color:var(--heading);}
.surah-count{font-size:12px;color:var(--muted);}

.surah-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.surah-head h1{margin:6px 0 6px;}
.surah-head p{margin:0;}
.surah-head-ar{display:block;font-family:var(--font-arabic);font-size:clamp(36px,5vw,56px);line-height:1.5;height:1.5em;overflow:visible;color:var(--gold-on-ink);} /* fixed height: no jump when the font loads */
@media (max-width:760px){.surah-head{display:block;}.surah-head-ar{margin-top:6px;}} /* always its own line on phones, so it can't wrap late */

.reader-controls{position:sticky;top:var(--header-h);z-index:40;}
.admin-bar .reader-controls{top:calc(var(--header-h) + 32px);}
.surah-jump select{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface);font-size:14.5px;max-width:260px;}

.reader-shell{max-width:860px;margin-inline:auto;padding:36px 24px 72px;}
@media (max-width:640px){.reader-shell{padding:24px 16px 56px;}}
.reader-audio{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:24px;}
.reader-audio figcaption{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.reader-audio audio{width:100%;}
.bismillah{font-family:var(--font-arabic);text-align:center;font-size:clamp(26px,3.4vw,34px);color:var(--heading);margin:6px 0 26px;line-height:2;}
.verses{list-style:none;display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.verse{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:24px 22px;border-bottom:1px solid var(--line);scroll-margin-top:150px;}
.verse:last-child{border-bottom:none;}
.verse:target{background:rgba(173,129,55,.08);}
.verse-side{display:flex;flex-direction:column;align-items:center;gap:8px;}
.verse-key{font-size:12.5px;font-weight:700;color:var(--gold-text);direction:ltr;}
.verse-key:hover{text-decoration:underline;}
.verse-side .icon-btn{width:34px;height:34px;}
.verse-ar{font-family:var(--font-arabic);direction:rtl;text-align:right;font-size:calc(clamp(24px,3vw,30px) * var(--nh-ar,1));line-height:2.25;color:var(--text);}
.ayah-end{font-size:.8em;color:var(--gold-text);white-space:nowrap;}
.sajdah-note{margin-top:6px;font-size:13px;font-weight:600;color:var(--gold-text);}
.verse-tr{margin-top:12px;font-size:calc(16.5px * var(--nh-tr,1));line-height:1.75;color:var(--text-soft);}
html[lang^="ur"] .verse-tr{font-size:calc(17px * var(--nh-tr,1));line-height:2.3;}
.verse-tr sup{font-size:.7em;}
@media (max-width:640px){.verse{grid-template-columns:1fr;gap:10px;padding:20px 16px;}.verse-side{flex-direction:row;justify-content:space-between;}}
/* Surah details and reading modes (Verse by verse / Reading) */
.surah-about{margin-top:10px!important;max-width:62ch;font-size:15px;opacity:.9;}
.mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:3px;gap:2px;}
.mode-switch .seg{min-height:36px;padding:6px 14px;border:0;border-radius:18px;background:transparent;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;}
.mode-switch .seg[aria-pressed="true"]{background:var(--pressed-bg);color:var(--pressed-fg);}
.mode-switch .seg:focus-visible{outline:3px solid var(--gold);outline-offset:1px;}
.reader-controls .controls-row{gap:10px 14px;}
.reader-loc{margin:0 0 0 auto;font-size:13px;font-weight:600;color:var(--gold-text);white-space:nowrap;}
[dir="rtl"] .reader-loc{margin:0 auto 0 0;}
html.nh-reading .only-verse,html:not(.nh-reading) .only-reading{display:none!important;}
.tr-num{display:none;}
.page-mark{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gold-text);direction:inherit;}
.page-mark::before,.page-mark::after{content:"";flex:1;height:1px;background:var(--line);}
.verse:has(.page-mark){padding-top:14px;}
@media (max-width:640px){
  .reader-controls.controls{padding:10px 0;}
  .reader-controls .controls-row{gap:8px;}
  .reader-controls .surah-jump{flex:1 1 120px;min-width:0;}
  .reader-controls .surah-jump select{width:100%;max-width:100%;min-height:40px;padding:6px 10px;font-size:14px;}
  .mode-switch .seg{min-height:34px;padding:5px 11px;font-size:12.5px;}
  .reader-controls .toggle-pill{min-height:34px;padding:5px 11px;font-size:12.5px;}
  .reader-loc{font-size:12px;}
}
html[lang^="ur"].nh-reading.nh-read-tr .verses{line-height:2.5;}

/* Reading mode: the surah as continuous text, like a printed Mushaf page */
html.nh-reading .verses{display:block;padding:30px 34px;text-align:justify;}
html.nh-reading:not(.nh-read-tr) .verses{direction:rtl;}
html.nh-reading .verse,html.nh-reading .verse-body{display:inline;padding:0;border:0;}
html.nh-reading .verse-side,html.nh-reading .sajdah-note{display:none;}
html.nh-reading .page-mark{display:flex;margin:18px 0;font-family:var(--font-body,inherit);}
html.nh-reading .verse-ar{display:inline;font-size:calc(clamp(25px,3.1vw,31px) * var(--nh-ar,1));line-height:2.35;text-align:inherit;}
html.nh-reading:not(.nh-read-tr) .verse-tr{display:none;}
html.nh-reading:not(.nh-read-tr) .hide-arabic .js-f-arabic{display:inline!important;}
html.nh-reading.nh-read-tr .verse-ar{display:none;}
html.nh-reading.nh-read-tr .verse-tr,html.nh-reading.nh-read-tr .hide-translation .js-f-translation{display:inline!important;margin:0;}
html.nh-reading.nh-read-tr .verses{text-align:start;line-height:1.9;}
html.nh-reading.nh-read-tr .tr-num{display:inline-block;min-width:1.7em;margin-inline:4px 5px;padding:0 4px;border-radius:10px;background:rgba(173,129,55,.14);font-size:.72em;font-weight:700;line-height:1.5;text-align:center;color:var(--gold-text);vertical-align:.15em;}
html.nh-reading .verse:target{background:none;}
html.nh-reading .verse:target .verse-ar,html.nh-reading .verse:target .verse-tr{background:rgba(173,129,55,.14);}
@media (max-width:640px){html.nh-reading .verses{padding:22px 18px;}}

/* Pressed show/hide switch: keep the dot visible in every theme */
.toggle-pill[aria-pressed="true"] .dot{background:var(--pressed-fg);opacity:.85;}

/* IndoPak script (chosen in Settings): the two scripts sit side by side in the page; only one shows */
.verse-ip{font-family:'NH Quran Naskh','Amiri',serif;line-height:2.4;}
.bismillah.verse-ip{font-family:'NH Quran Naskh','Amiri',serif;}
html:not(.nh-script-ip) .reader-shell .verse-ip.verse-ip.verse-ip,html.nh-script-ip .reader-shell .verse-uth.verse-uth.verse-uth,html:not(.nh-script-ip) .votd .verse-ip,html.nh-script-ip .votd .verse-uth{display:none!important;}

/* Reading bar: Listen and Settings */
.bar-actions{display:flex;align-items:center;gap:8px;}
.btn-listen{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 15px 6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--text);}
.btn-listen svg{width:15px;height:15px;color:var(--gold-text);}
.btn-listen:hover,.btn-listen:focus-visible{border-color:var(--gold);}
.reader-controls .icon-btn svg{width:18px;height:18px;}

/* Settings panel */
.reader-settings{position:fixed;z-index:70;top:calc(var(--header-h) + 10px);inset-inline-end:16px;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - var(--header-h) - 24px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:18px 20px 20px;display:grid;gap:16px;}
.reader-settings[hidden]{display:none;}
.rs-head{display:flex;align-items:center;justify-content:space-between;}
.rs-head h2{font-size:20px;margin:0;color:var(--heading);}
.rs-row{display:grid;gap:8px;justify-items:start;}
.rs-label{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
html[lang^="ar"] .rs-label,html[lang^="ur"] .rs-label{text-transform:none;letter-spacing:0;font-size:14px;}
.rs-row select{min-height:42px;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);}
.stepper{display:inline-flex;align-items:center;gap:12px;}
.stepper .icon-btn{width:42px;height:42px;font-weight:700;font-size:14px;}
.stepper .icon-btn:disabled{opacity:.4;cursor:default;}
.stepper output{min-width:1.6em;text-align:center;font-weight:700;color:var(--heading);}
.theme-set .seg{padding-inline:12px;}
@media (max-width:640px){
  .reader-settings{top:auto;bottom:0;inset-inline:0;width:100%;max-height:82vh;border-radius:14px 14px 0 0;}
  .bar-actions{margin-inline-start:auto;}
  .bar-toggles{display:none!important;} /* on phones the show/hide switches live in Settings */
}

/* Verse tools: play, save, share */
.verse-tools{display:flex;flex-direction:column;align-items:center;gap:6px;}
.verse-tools .icon-btn{width:34px;height:34px;}
.verse-tools .js-play-verse svg{width:14px;height:14px;}
.verse-tools .js-play-verse[aria-pressed="true"]{background:var(--pressed-bg);border-color:var(--pressed-bg);color:var(--pressed-fg);}
.verse-tools .js-play-verse[aria-pressed="true"] svg path{fill:currentColor;}
@media (max-width:640px){.verse-tools{flex-direction:row;}}
.verse.is-playing{background:rgba(173,129,55,.09);box-shadow:inset 3px 0 0 var(--gold);}
[dir="rtl"] .verse.is-playing{box-shadow:inset -3px 0 0 var(--gold);}
html.nh-reading .verse.is-playing{box-shadow:none;background:none;}
html.nh-reading .verse.is-playing .verse-ar,html.nh-reading .verse.is-playing .verse-tr{background:rgba(173,129,55,.18);border-radius:4px;}

/* Recitation player (fixed to the bottom of the screen while in use) */
.player{position:fixed;z-index:65;inset-inline:0;bottom:0;background:var(--band);color:var(--parchment);border-top:1px solid var(--line-on-ink);box-shadow:0 -10px 30px rgba(0,0,0,.18);padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
.player[hidden]{display:none;}
.player-row{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;}
.player-main{display:flex;align-items:center;gap:8px;min-width:0;}
.player .icon-btn{background:transparent;border-color:var(--line-on-ink);color:var(--parchment);}
.player .icon-btn:hover{border-color:var(--gold-on-ink);}
.player .player-toggle{width:46px;height:46px;background:var(--pressed-bg);border-color:var(--pressed-bg);color:var(--pressed-fg);}
.player .player-toggle svg{width:18px;height:18px;}
.player .i-play{display:none;}
.player.is-paused .i-play{display:inline-flex;}
.player.is-paused .i-pause{display:none;}
[dir="rtl"] .player .js-p-prev svg,[dir="rtl"] .player .js-p-next svg{transform:scaleX(-1);}
.player-now{display:flex;flex-direction:column;line-height:1.3;font-weight:600;font-size:14px;min-width:0;}
.player-now small{font-weight:400;font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-opts{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:13px;}
.player-opts label{display:inline-flex;align-items:center;gap:6px;}
.player-opts select{min-height:34px;padding:4px 8px;border-radius:6px;border:1px solid var(--line-on-ink);background:transparent;color:var(--parchment);}
.player-opts select option{color:#272727;background:#fff;}
.player-check input{width:17px;height:17px;accent-color:var(--gold-on-ink);}
body.player-open{padding-bottom:84px;}
@media (max-width:760px){body.player-open{padding-bottom:132px;}.player-opts{gap:6px 10px;font-size:12.5px;}.player-opts label>span{display:none;}.player-check>span{display:inline!important;}}

/* Surah list: search, popular, views, juz */
.quran-search{position:relative;display:flex;gap:8px;max-width:640px;}
.quran-search svg{position:absolute;inset-inline-start:15px;top:23px;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);}
.quran-search input{flex:1;min-width:0;min-height:46px;padding:10px 16px;padding-inline-start:42px;border:1px solid var(--line);border-radius:24px;background:var(--surface);font-size:15px;}
.quran-search .btn{border-radius:24px;}
.popular-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;}
.popular-label{font-size:13px;font-weight:600;color:var(--muted);}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--text);}
.chip:hover,.chip:focus-visible{border-color:var(--gold);}
.chip svg{width:14px;height:14px;color:var(--gold-text);}
.chip-continue{border-color:var(--gold);background:rgba(173,129,55,.12);}
.chip[hidden]{display:none;}
.index-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:20px;}
.sort-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 4px;border:0;background:none;font-size:14px;color:var(--muted);}
.sort-toggle strong{color:var(--text);font-weight:700;}
.sort-toggle:hover strong{text-decoration:underline;text-underline-offset:3px;}
.sort-arrow{display:inline-flex;width:16px;height:16px;color:var(--text);transition:transform .15s;}
.sort-toggle.is-desc .sort-arrow{transform:rotate(180deg);}
.surah-num .num-rev,.surah-grid.is-rev .surah-num .num-n{display:none;}
.surah-grid.is-rev .surah-num .num-rev{display:inline;}
.index-bar .name-filter{margin-inline-start:auto;max-width:320px;}
.index-bar .name-filter[hidden]{display:none;}
/* Surah / Juz / Revelation order tabs: hover like the surah cards, selected like the "Continue" button */
.index-tabs{gap:6px;padding:4px;}
.index-tabs .seg{border:1px solid transparent;border-radius:18px;transition:border-color .15s ease,background-color .15s ease,color .15s ease;}
.index-tabs .seg:hover{border-color:var(--gold);color:var(--text);}
.index-tabs .seg[aria-selected="true"]{border-color:var(--gold);background:rgba(173,129,55,.12);color:var(--text);}
.surah-rev{display:none;font-size:12px;color:var(--gold-text);}
.surah-grid.is-rev .surah-rev{display:block;}
.juz-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;}
.juz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.juz-card h3{font-size:18px;margin-bottom:8px;color:var(--heading);}
.juz-card h3 a:hover{color:var(--gold-text);}
.juz-card ul{list-style:none;}
.juz-card li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14.5px;}
.juz-card li a{font-weight:600;}
.juz-card li a:hover{color:var(--gold-text);text-decoration:underline;}
.juz-range{font-size:12.5px;color:var(--muted);white-space:nowrap;}
@media (max-width:640px){.index-bar .name-filter{margin-inline-start:0;max-width:none;flex-basis:100%;}}

/* Quran search results */
.qs-wrap{max-width:860px;}
.qs-status{color:var(--muted);font-size:14.5px;margin-bottom:14px;min-height:1.6em;}
.qs-surahs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.qs-surahs a{display:inline-flex;padding:6px 14px;border-radius:18px;border:1px solid var(--gold);font-weight:600;font-size:14px;}
.qs-results{list-style:none;display:grid;gap:10px;margin-bottom:18px;}
.qs-hit{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;}
.qs-hit>a{font-weight:700;font-size:14px;color:var(--gold-text);}
.qs-hit>a:hover{text-decoration:underline;}
.qs-ar{font-family:var(--font-arabic);font-size:24px;line-height:2.1;text-align:right;margin-top:4px;}
.qs-tr{margin-top:4px;font-size:15.5px;line-height:1.75;}
html[lang^="ur"] .qs-tr{line-height:2.3;}
.qs-hit mark{background:rgba(212,169,90,.38);color:inherit;border-radius:2px;padding:0 1px;}

/* Homepage: Verse of the Day */
.votd{padding:56px 0 8px;}
.votd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px;box-shadow:inset 0 3px 0 var(--gold);}
.votd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.votd-head h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,28px);color:var(--heading);margin-top:6px;}
.votd-ar{font-family:var(--font-arabic);font-size:calc(clamp(24px,3vw,32px) * var(--nh-ar,1));line-height:2.2;text-align:right;color:var(--text);}
.votd-ar.verse-ip{font-family:'NH Quran Naskh','Amiri',serif;}
.votd-tr{margin-top:10px;font-size:17px;line-height:1.75;color:var(--text-soft);max-width:70ch;}
html[lang^="ur"] .votd-tr{line-height:2.3;}
.votd-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;}
@media (max-width:640px){.votd{padding-top:40px;}.votd-card{padding:22px 18px;}}

/* Theme colours: box in the top bar, the other colours drop down on hover or tap */
.theme-menu{position:relative;}
.theme-current{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 10px 4px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;}
.theme-current:hover,.theme-menu.is-open .theme-current{border-color:var(--gold);}
.tm-chev{display:inline-flex;width:14px;height:14px;color:var(--muted);transition:transform .15s;}
.theme-menu:hover .tm-chev,.theme-menu.is-open .tm-chev{transform:rotate(180deg);}
.theme-list{list-style:none;position:absolute;top:100%;inset-inline-end:0;z-index:80;min-width:150px;padding:6px;margin-top:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);display:none;}
.theme-menu::after{content:"";position:absolute;inset-inline:0;top:100%;height:8px;} /* keeps the menu open while the pointer moves down */
@media (hover:hover){.theme-menu:hover .theme-list{display:block;}}
.theme-menu.is-open .theme-list{display:block;}
.theme-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 12px;border:0;border-radius:6px;background:none;color:var(--text);font-size:14px;font-weight:500;text-align:start;}
.theme-list button:hover,.theme-list button:focus-visible{background:var(--bg-soft);}
.theme-list button[aria-pressed="true"]{font-weight:700;background:var(--bg-soft);}
.theme-list button[aria-pressed="true"]::after{content:"✓";margin-inline-start:auto;color:var(--gold-text);}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:none;}
.swatch-auto{background:linear-gradient(135deg,#FFFFFF 50%,#1F2125 50%);}
.swatch-light{background:#FFFFFF;}
.swatch-sepia{background:#F8EBD5;}
.swatch-dark{background:#1F2125;}
@media (max-width:980px){.theme-current .tm-label{display:none;}.theme-current{padding-inline:9px 7px;}}

/* Contact us: footer button and pop-up form */
.footer-contact-wrap{margin-top:14px;}
.footer-contact{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--line-on-ink);border-radius:20px;background:transparent;color:var(--parchment);font-size:14.5px;font-weight:600;}
.footer-contact:hover,.footer-contact:focus-visible{border-color:var(--gold-on-ink);color:var(--gold-on-ink);}
.contact-dialog{margin:auto;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:auto;}
.contact-dialog::backdrop{background:rgba(0,0,0,.55);}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;background:#1F7F86;color:#FFFFFF;}
.cd-head h2{margin:0;font-size:19px;font-family:var(--font-body);font-weight:700;color:#FFFFFF;}
.cd-x{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#FFFFFF;}
.cd-x:hover,.cd-x:focus-visible{background:rgba(255,255,255,.16);}
.cd-x svg{width:20px;height:20px;}
.cd-body{padding:18px 20px 8px;display:grid;gap:12px;}
.cd-row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:10px;}
.cd-row-top{align-items:start;}
.cd-row label{font-weight:700;font-size:14px;text-align:end;}
.cd-row-top label{padding-top:8px;}
.cd-row select,.cd-row textarea,.cd-row input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--field-border);border-radius:6px;background:var(--surface);color:var(--text);font-size:15px;}
.cd-row textarea{min-height:150px;resize:vertical;}
.cd-row select{max-width:260px;}
.cd-field{display:flex;align-items:center;gap:8px;}
.cd-field input{flex:1;min-width:0;}
.cd-opt{font-size:13px;color:var(--muted);white-space:nowrap;}
.cd-note{margin:0 0 0 98px;font-size:12.5px;color:var(--muted);line-height:1.5;}
[dir="rtl"] .cd-note{margin:0 98px 0 0;}
.cd-note a{text-decoration:underline;}
.nh-turnstile{min-height:0;}
.cd-body .nh-turnstile{margin-inline-start:98px;}
@media (max-width:520px){.cd-body .nh-turnstile{margin-inline-start:0;}}
.form-card .nh-turnstile{margin:6px 0 16px;}
.cd-status{margin:0;min-height:1.4em;font-size:14px;font-weight:600;}
.cd-status.is-ok{color:var(--success);}
.cd-status.is-error{color:var(--clay);}
.cd-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--line);background:var(--bg-soft);}
.cd-foot .btn{min-height:42px;}
@media (max-width:520px){
  .cd-row{grid-template-columns:1fr;gap:4px;}
  .cd-row label{text-align:start;}
  .cd-row-top label{padding-top:0;}
  .cd-note,[dir="rtl"] .cd-note{margin:0;}
  .cd-row select{max-width:none;}
  .cd-row textarea{min-height:0;height:120px;}
  .cd-body{padding:14px 16px 6px;gap:10px;}
}
:root[data-theme="dark"] .cd-status.is-error{color:#F0B3A1;}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .cd-status.is-error{color:#F0B3A1;}}

.surah-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:32px;}
[dir="rtl"] .arrow-back,[dir="rtl"] .arrow-fwd{display:inline-block;transform:scaleX(-1);}
.reader-credit{margin-top:28px;font-size:13px;color:var(--muted);text-align:center;}
.reader-credit a{text-decoration:underline;}

/* Print: guides and articles print cleanly */
@media print{
  :root{--bg:#fff;--surface:#fff;--text:#000;--heading:#000;}
  .site-header,.site-footer,.related,.cta-band,.entry-actions,.controls,.step-check,.skip-link{display:none!important;}
  body{background:var(--surface);}
  .quote-card{background:var(--surface);color:#000;border:1px solid #999;}
  .quote-card .arabic,.quote-card .translation,.quote-card .translit{color:#000;}
}

/* Word by word (1.8): hover a word to highlight it; tap or click it to see its meaning */
:root,:root[data-theme="light"]{--wbw:#1F7F86;--wbw-bg:rgba(31,127,134,.10);}
:root[data-theme="sepia"]{--wbw:#17666C;--wbw-bg:rgba(23,102,108,.12);}
:root[data-theme="dark"]{--wbw:#7FC4C9;--wbw-bg:rgba(127,196,201,.14);}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--wbw:#7FC4C9;--wbw-bg:rgba(127,196,201,.14);}}
.verses[data-wbw] .verse-ar .w{cursor:pointer;border-radius:5px;transition:color .12s ease,background-color .12s ease;}
.verses[data-wbw] .verse-ar .w:hover,.verses[data-wbw] .verse-ar .w.is-active{color:var(--wbw);}
.verses[data-wbw] .verse-ar .w.is-active{background:var(--wbw-bg);}
.wbw-pop{position:absolute;z-index:120;max-width:min(320px,calc(100vw - 16px));padding:9px 14px 10px;border-radius:8px;background:var(--pressed-bg);color:var(--pressed-fg);box-shadow:0 6px 22px rgba(0,0,0,.22);text-align:center;font-size:15px;line-height:1.45;pointer-events:auto;}
.wbw-pop[hidden]{display:none;}
.wbw-pop::after{content:"";position:absolute;left:var(--arrow,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg);}
.wbw-pop.is-below::after{bottom:auto;top:-6px;}
.wbw-g{display:block;font-weight:600;}
html[lang^="ur"] .wbw-g{font-family:'Noto Nastaliq Urdu',serif;font-weight:400;line-height:2.1;direction:rtl;}
.wbw-t{display:block;margin-top:2px;font-size:13px;font-style:italic;opacity:.8;}
.wbw-t[hidden],.wbw-t:empty{display:none;}

/* Round page (1.8): short surahs (one Mushaf page) laid out as a circle of text in Reading mode, like
   Al-Fatiha on the first page of the Mushaf. No drawn frame; lines are centred; short verses stay whole. */
.round-shape{display:none;}
html.nh-reading .verses.round-on{display:flow-root;text-align:center;text-align-last:center;}
html.nh-reading .verses.round-on .round-shape{display:block;float:left;width:calc(50% - 1px);margin:0;padding:0;list-style:none;}
html.nh-reading .verses.round-on .round-r{float:right;}
html.nh-reading .verses.round-on .verse-ar{font-size:calc(clamp(25px,3.1vw,31px) * var(--nh-ar,1) * var(--nh-round,1));}
html.nh-reading .verses.round-on .verse-tr{font-size:calc(16.5px * var(--nh-tr,1) * var(--nh-round,1));}
html[lang^="ur"].nh-reading .verses.round-on .verse-tr{font-size:calc(17px * var(--nh-tr,1) * var(--nh-round,1));}
html.nh-reading .verses.round-on .keep{white-space:nowrap;}
html.nh-reading .verses.round-on .tr-num{display:inline;}

/* Go to top / Go to bottom (1.8) */
.scroll-btns{position:fixed;z-index:64;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;}
.scroll-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;}
.scroll-btn[hidden]{display:none;}
.scroll-btn svg{width:20px;height:20px;}
.scroll-btn:hover,.scroll-btn:focus-visible{background:var(--pressed-bg);color:var(--pressed-fg);border-color:var(--pressed-bg);}
body:has(.player:not([hidden])) .scroll-btns{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
@media print{.scroll-btns{display:none;}}

/* Top banners (1.9): gold Islamic geometric lines (with their blue inner band) on deep blue,
   the same in every colour theme. The plain blue background of the original picture was removed,
   so only the lines show; a soft shade on the text side keeps the text readable. */
.hero,.archive-intro{--parchment:#FFFFFF;--parchment-soft:rgba(255,255,255,.88);--gold-on-ink:#F2CD84;--line-on-ink:rgba(255,255,255,.3);background:#0B2C47;color:#FFFFFF;}
.hero .pattern,.archive-intro .pattern{opacity:1;background:linear-gradient(90deg,rgba(11,44,71,.78) 0%,rgba(11,44,71,.55) 50%,rgba(11,44,71,.15) 100%),url(assets/images/hero-pattern-lines.webp) center/cover no-repeat;}
html[dir="rtl"] .hero .pattern,html[dir="rtl"] .archive-intro .pattern{background:linear-gradient(270deg,rgba(11,44,71,.78) 0%,rgba(11,44,71,.55) 50%,rgba(11,44,71,.15) 100%),url(assets/images/hero-pattern-lines.webp) center/cover no-repeat;}
@media (max-width:700px){.hero .pattern,.archive-intro .pattern,html[dir="rtl"] .hero .pattern,html[dir="rtl"] .archive-intro .pattern{background:linear-gradient(rgba(11,44,71,.7),rgba(11,44,71,.7)),url(assets/images/hero-pattern-lines.webp) center/cover no-repeat;}}