/*
Theme Name: Quran Light
Description: v0.9.10 — premium light-theme Quran platform, warm off-white, white cards, one green accent, gold only for small highlights, centred editorial column, mobile-first. No gradients, no glassmorphism, no dark theme, no dashboard panels. v0.9.9 adds English SEO meta (title + description per route, self-canonical, verse deep links noindex canonical to base) from workbook EN templates computed from verified plugin metadata; colours, layout, reader, plugin and data unchanged.
Version: 0.9.10
Author: Quran Platform
Text Domain: quran-light
*/
:root{
  --bg:#F8F4E8; --cream:#FDFBF3; --surface:#FFFFFF; --text:#1C2420; --secondary:#5A665E;
  --border:#E5DFC9; --accent:#145A42; --accent-soft:#E7F0E9; --accent-dark:#0E3B2E;
  --emerald-deep:#0E3B2E; --emerald:#145A42; --teal:#2E7D74; --gold:#C19A3D; --gold-soft:#F3EAD3; --gold-light:#F3EAD3;
  --error:#8A1F1F; --error-bg:#FDF0F0; --success:#145A42;
  --font-ui:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-arabic:"Amiri Quran","Scheherazade New",serif;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.7;overflow-wrap:break-word}
img,video{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button,select,input{font:inherit}
.qn-wrap{max-width:1080px;margin:0 auto;padding:0 20px;width:100%}
.qn-header{background:var(--cream);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:20}
/* v0.9.4 header nav centred, retained in v0.9.7. The header-inner is a 3-track grid (1fr auto 1fr):
   the logo stays in the left track, the nav sits in the centre track, and the
   empty right track mirrors the logo track — so the nav is exactly centred
   across the header width, not pushed to one side by space-between. Nav
   colours, font, item spacing and hover/focus states are unchanged. */
.qn-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 0}
.qn-logo{grid-column:1;justify-self:start}
.qn-nav{grid-column:2;justify-content:center}
.qn-logo{font-family:var(--font-serif);font-weight:700;color:var(--emerald-deep);text-decoration:none;font-size:22px;line-height:1.3;letter-spacing:.3px}
.qn-logo span{color:var(--gold)}
.qn-nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.qn-nav a{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text);min-height:44px;display:inline-flex;align-items:center}
.qn-nav a:hover{background:var(--accent-soft)}
.qn-eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 8px}
/* v0.8.2 fix: the search card overlaps the hero BY CONSTRUCTION. Previously the
   hero kept a 36px bottom margin while the search card only pulled up -24px,
   leaving a 12px cream gap — the overlap could never happen. Now the hero has
   no bottom margin at all and the search card pulls up 28px into the hero's
   48px bottom padding (empty space below the hero content, so no hero text or
   button is covered), sits above the hero via z-index, and stays fully
   readable and tappable. */
.qn-hero{background:var(--emerald-deep);color:#fff;border-radius:0 0 24px 24px;padding:56px 36px 48px;margin:0;text-align:center;position:relative;z-index:1}
.qn-section-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:800;margin:0 0 8px}
.qn-search-hero{border-top:4px solid var(--gold);margin-top:-28px;margin-bottom:24px;position:relative;z-index:2;box-shadow:0 10px 30px rgba(14,59,46,.12)}
.qn-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.qn-quick-card{border:1px solid var(--border);border-radius:16px;padding:18px;min-width:0;background:var(--surface);box-shadow:0 4px 18px rgba(14,59,46,.06)}
.qn-quick-card:hover{border-color:var(--accent)}
.qn-quick-card a{font-weight:800;text-decoration:none;font-size:18px}
.qn-quick-card .qn-quick-num{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.qn-filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0;padding:12px;background:var(--accent-soft);border:1px solid var(--border);border-radius:12px}
.qn-filterbar button,.qn-filterbar select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;min-height:44px;font-size:15px;cursor:pointer;background:var(--surface);color:var(--text);font-weight:600}
.qn-filterbar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.qn-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.qn-mode-card{border:1px solid var(--border);border-radius:12px;padding:18px;min-width:0}
.qn-mode-card h3{margin:0 0 8px}
.qn-mode-card p{color:var(--secondary);margin:0}
.qn-hero h1{font-family:var(--font-serif);font-size:clamp(32px,5vw,48px);line-height:1.15;margin:14px 0 12px}
.qn-hero .qn-arabic{font-family:var(--font-arabic);font-size:clamp(28px,5vw,38px);color:var(--gold-light);direction:rtl;line-height:2}
.qn-hero p{color:#D7E5DB;max-width:620px;margin:12px auto}
.qn-hero .qn-note{color:#D7E5DB}
.qn-hero a{color:var(--gold-light)}
.qn-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 8px}
.qn-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:#1C2420!important;text-decoration:none;padding:15px 26px;border-radius:999px;min-height:54px;font-weight:700;font-size:17px;border:1px solid var(--gold)}
.qn-btn:hover{background:#D4AF4E}
.qn-btn-secondary{background:transparent;color:#fff!important;border:1px solid #fff}
.qn-btn-secondary:hover{background:rgba(255,255,255,.12)}
.qn-continue{background:var(--gold-soft);border:1px solid var(--border);border-radius:12px;padding:16px;margin:20px auto 0;max-width:580px;text-align:left}
.qn-continue a{font-weight:700}
/* v0.8.2 fix (hero faint boxes, root cause): .qn-continue sits INSIDE .qn-hero,
   so the hero's light-on-dark rules leaked into it — .qn-hero a is gold-light
   #F3EAD3 on the box's own gold-soft #F3EAD3 background (identical = invisible)
   and .qn-hero p is pale #D7E5DB on #F3EAD3 (barely visible). These scoped
   rules restore dark text on the light box: #1C2420 body text (~12:1 on
   #F3EAD3) and #145A42 links (~7:1 on #F3EAD3), both clearly readable, with
   no dark-heavy box and no change to the overall design. */
.qn-hero .qn-continue{color:var(--text)}
.qn-hero .qn-continue p{color:var(--text)}
.qn-hero .qn-continue a{color:var(--accent)}
.qn-hero .qn-continue a:hover{color:var(--accent-dark)}
.qn-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:24px;margin:20px 0;box-shadow:0 4px 18px rgba(14,59,46,.06)}
/* v0.8.2 fix (search overlap, root cause): the v0.8.2 rule above was defeated by
   the cascade — .qn-search-hero (single class, defined BEFORE .qn-card) set
   margin-top:-28px, but the later single-class .qn-card rule's margin:20px 0
   overrode it, leaving a 20px cream gap by construction. This compound rule
   (two classes) is defined AFTER .qn-card, so it wins: the search card now
   genuinely pulls up 28px into the hero's 48px bottom padding (32px on mobile,
   still > 28px), overlapping the hero bottom edge without covering hero text
   or buttons, and stays fully readable and tappable. */
.qn-card.qn-search-hero{margin-top:-28px;margin-bottom:24px;position:relative;z-index:2}
.qn-card h2{font-family:var(--font-serif);color:var(--emerald-deep);margin:0 0 8px;font-size:22px;line-height:1.3}
.qn-card>p{color:var(--secondary)}
.qn-note{color:var(--secondary);font-size:14px}
.qn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qn-row button,.qn-row input[type="search"]{padding:12px 14px;border:1px solid var(--border);border-radius:8px;min-height:48px;font-size:15px}
.qn-row input[type="search"]{flex:1;min-width:200px}
.qn-row button{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;cursor:pointer}
.qn-lang-btn{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.qn-lang-btn.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.qn-surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.qn-surah-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--surface);min-width:0;box-shadow:0 4px 18px rgba(14,59,46,.05)}
.qn-surah-card:hover{border-color:var(--accent)}
.qn-surah-card a{font-family:var(--font-serif);font-weight:700;text-decoration:none;display:block;font-size:18px;line-height:1.3;color:var(--emerald-deep)}
.qn-surah-card .qn-surah-num{display:inline-block;font-size:13px;font-weight:700;color:var(--emerald-deep);background:var(--accent-soft);border:1px solid var(--gold);border-radius:999px;padding:4px 12px;margin-bottom:10px}
.qn-surah-card .qn-surah-ar{font-family:var(--font-arabic);font-size:25px;line-height:1.8;direction:rtl;text-align:right;color:var(--text)}
.qn-surah-card .qn-surah-meta{color:var(--secondary);font-size:13px;line-height:1.6;margin-top:8px}
.qn-surah-card .qn-unavailable{color:var(--secondary)}
.qn-juz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.qn-juz-card{border:1px solid var(--border);border-radius:12px;padding:16px;min-width:0}
.qn-juz-card a{font-weight:700;text-decoration:none}
.qn-juz-card .qn-juz-range{color:var(--secondary);font-size:14px}
.qn-search-result{border-top:1px solid var(--border);padding:14px 0;min-width:0}
.qn-search-result a{font-weight:700;text-decoration:none}
.qn-search-result .qn-search-ar{font-family:var(--font-arabic);font-size:20px;line-height:2;direction:rtl;text-align:right}
.qn-disclosure{background:var(--gold-soft);border:1px solid var(--border);border-radius:12px;padding:18px}
.qn-footer{border-top:3px solid var(--gold);background:var(--cream);margin-top:40px;padding:28px 0;color:var(--secondary);font-size:14px}
.qn-footer p{margin:10px 0;line-height:1.7}
.qn-footer p:first-child strong{color:var(--text);font-size:15px}
.qn-row input[type="search"]:focus{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:1px}
@media(max-width:640px){
  /* v0.9.4 narrow-width stacking, retained in v0.9.7: the logo + nav stack and both centre, so the
     centred nav wraps cleanly instead of squeezing beside the logo. */
  .qn-header-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .qn-logo{grid-column:1;justify-self:center}
  .qn-nav{grid-column:1;justify-content:center}
  .qn-wrap{padding:0 16px}
  .qn-hero{padding:36px 18px 32px;margin:0} /* v0.8.2: keep the search overlap on mobile too (32px bottom padding > 28px pull-up) */
  .qn-nav a{padding:10px 8px}
  .qn-surah-grid,.qn-juz-grid,.qn-quick-grid,.qn-mode-grid{grid-template-columns:1fr}
  .qn-hero-actions .qn-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

.qn-ornament{text-align:center;color:var(--gold);letter-spacing:8px;font-size:18px;margin:8px 0}