/* ============================================================================
   Falah long-form
   The shared component library for books, the tariqa pages and the readers.
   Loaded only on pages that opt in, so it costs nothing elsewhere.

   Colour comes from Theme Options. The plugin emits --fl-acc, --fl-txt and
   --fl-meta from the theme's own settings; every surface below is derived from
   them, so changing the content accent restyles all of these pages at once.
   Gold has no equivalent in Theme Options, so it is declared once as a brand
   constant and is filterable in PHP (falah_brand_gold).

   Do not put colours in page content. Do not paste theme fixes into a page:
   pick "Redux Full Width" or "Blank" from Page Attributes instead.
   ========================================================================= */

.fl-page{
  /* surfaces derived from the theme accent, mixed onto warm paper */
  --paper:  color-mix(in srgb, var(--fl-acc) 4%,  #FBF7EE);
  --card:   color-mix(in srgb, var(--fl-acc) 2%,  #FFFDF8);
  --cream:  color-mix(in srgb, var(--fl-acc) 8%,  #FBF7EE);
  --line:   color-mix(in srgb, var(--fl-acc) 18%, #EFE7D6);
  --acc:    var(--fl-acc);
  --ink:    var(--fl-txt);
  --muted:  var(--fl-meta);
  --gold:   var(--fl-gold);
  /* Decorative gold fails AA as text on paper (2.26:1). This is the same hue
     darkened to 4.96:1, and is the only gold allowed to carry words. */
  --gold-ink: color-mix(in srgb, var(--fl-gold) 62%, #000);

  --nastaliq:"Jameel Reader","Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif;
  --naskh:"Scheherazade New","Noto Naskh Arabic",serif;
  --display:"Cormorant Garamond",Georgia,serif;
  --serif:"Spectral",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  background:var(--paper); color:var(--ink);
  font-family:var(--nastaliq); line-height:2.05;
  padding:0 0 70px;
}
.fl-page *{box-sizing:border-box}
.fl-wrap{max-width:1000px;margin:0 auto;padding:0 clamp(16px,4vw,34px)}
.fl-wrap--wide{max-width:1080px}
/* A prose measure. Nastaliq at 19px runs long, so pages that are mostly
   running text use this rather than the full grid width. */
.fl-wrap--text{max-width:840px}

/* Component rules that style a <p> are written as `.fl-page .fl-x` so they
   outrank the generic `.fl-page p` further down. A bare `.fl-x` loses to it. */

/* ---------- hero ---------- */
.fl-hero{text-align:center;padding:56px 0 30px;border-bottom:1px solid var(--line);margin-bottom:38px}
.fl-hero--split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
  align-items:center;text-align:start;border-bottom:0;padding:52px 0 40px}
.fl-page .fl-eyebrow{font-family:var(--sans);direction:ltr;letter-spacing:.18em;text-transform:uppercase;
  font-size:12px;font-weight:700;color:var(--muted);margin:0 0 14px}
/* The theme sets font-family on h1..h6 directly, which beats inheritance from
   .fl-page. These headings must therefore name the face themselves. */
.fl-page h1,.fl-page h2,.fl-page h3,.fl-page h4{font-family:var(--nastaliq)}
.fl-page h1{font-size:clamp(34px,5vw,54px);line-height:1.75;color:var(--acc);margin:0 0 10px;font-weight:600}
.fl-page .fl-by{font-size:20px;color:var(--acc);margin:0 0 20px}
.fl-page .fl-sub{font-size:clamp(17px,2vw,21px);color:var(--muted);margin:0 auto;max-width:720px}
.fl-page .fl-hero--split .fl-sub{margin:0 0 26px;max-width:560px}
.fl-rule{width:104px;height:3px;background:var(--gold);margin:26px auto 0;border-radius:2px}
.fl-rule--left{margin:0 auto 34px}
.fl-page .fl-meta{font-family:var(--sans);direction:ltr;text-align:end;font-size:13px;color:var(--muted);margin:16px 0 0}

/* ---------- cover ---------- */
.fl-cover{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 26px 56px -30px rgba(60,45,20,.65)}
.fl-cover img{display:block;width:100%;height:auto}

/* ---------- lede & note ---------- */
.fl-lede{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 30px;margin:0 0 40px;font-size:19px}
.fl-page .fl-lede p{margin:0 0 1em}.fl-page .fl-lede p:last-child{margin:0}
.fl-lede b,.fl-page b{color:var(--acc)}
.fl-note{border-inline-start:3px solid var(--gold);background:var(--cream);
  border-radius:0 14px 14px 0;padding:20px 24px;margin:34px 0;font-size:18px}
.fl-page .fl-note p:last-child{margin:0}

/* ---------- buttons: the theme owns these, we only size them for Urdu ---------- */
.fl-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:44px 0 0}
.fl-hero--split .fl-cta{justify-content:flex-start;margin:0}
/* The theme's .vlog-button sets line-height:1, which is far too tight for
   nastaliq: the ink is ~2.5x the line box and collides with the padding. */
.fl-cta .vlog-button{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--nastaliq);font-size:17px;line-height:1.9;padding:9px 26px 13px}
/* Without an explicit size an inline <svg> takes its viewBox ratio against the
   container and rendered ~95px, turning a one-line button into six lines. */
.fl-cta .vlog-button svg{width:19px;height:19px;flex:0 0 19px}
.fl-cta .vlog-button[lang="en"]{font-family:var(--sans);font-size:12px;padding:14px 27px}


/* wpautop converts newlines between children into <br>. Inside a grid or flex
   container each of those becomes a layout item and blows holes in the row.
   Content should avoid the newlines; this makes it impossible to break. */
.fl-cards > br,.fl-cta > br,.fl-figs > br,.fl-steps > br,
.fl-facts > br,.fl-toc > br,.fl-toc ol > br{display:none}
/* and inside a button, where it would split the icon from the label */
.fl-cta .vlog-button br{display:none}

/* ---------- card grid ---------- */
.fl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;margin-top:6px}
a.fl-card,.fl-card{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  transition:transform .16s ease,border-color .2s ease}
a.fl-card:hover{transform:translateY(-2px);border-color:var(--gold)}
/* span, not p: wpautop splits any <a> that contains a <p>, leaving stray empty
   anchors in the grid. These are spans promoted to blocks instead. */
.fl-page .fl-card .n,.fl-page .fl-card .t,.fl-page .fl-card .d{display:block;margin:0}
.fl-page .fl-card .n{font-family:var(--sans);direction:ltr;text-align:end;font-size:11.5px;
  font-weight:700;letter-spacing:.14em;color:var(--acc);margin:0 0 6px}
.fl-page .fl-card .t{font-size:20px;color:var(--acc);margin:0 0 4px;line-height:1.7}
.fl-page .fl-card .d{font-size:16px;color:var(--muted);margin:0;line-height:1.85}

/* ---------- figures ---------- */
.fl-figs{display:grid;gap:26px;margin:.6em 0 1.2em}
.fl-figs figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 18px 44px -34px rgba(60,45,20,.55)}
.fl-figs img{display:block;width:100%;height:auto}
.fl-page .fl-figs figcaption{font-family:var(--sans);direction:ltr;text-align:center;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px}

/* ---------- download band ---------- */
.fl-band{background:linear-gradient(180deg,var(--card),var(--cream));border:1px solid var(--line);
  border-radius:20px;padding:40px 30px;margin:52px 0 0;text-align:center}
.fl-band h2{margin:0 0 14px}
.fl-page .fl-band p{font-size:18px;color:var(--muted);margin:0 0 24px;line-height:2}

/* ---------- numbered steps ---------- */
@counter-style fl-urdu{system:numeric;symbols:"\6F0" "\6F1" "\6F2" "\6F3" "\6F4" "\6F5" "\6F6" "\6F7" "\6F8" "\6F9";suffix:""}
.fl-steps{counter-reset:st;margin:20px 0 0;padding:0}
.fl-steps,.fl-steps>li{list-style:none}
/* Physical padding here reserved space on the right while the marker was placed
   at the inline end, which is the left in RTL. Both are logical now, so the
   marker and the space it needs stay on the same side in either direction. */
.fl-steps>li{counter-increment:st;position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  padding-inline-start:62px;margin:0 0 12px;font-size:18.5px}
.fl-steps>li::before{content:counter(st,fl-urdu);position:absolute;inset-inline-start:20px;top:19px;
  width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
/* English pages number in Latin digits. */
.fl-steps--latin>li::before{content:counter(st)}
.fl-page .fl-steps b{color:var(--acc)}

/* ---------- dhikr ---------- */
.fl-dhikr{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;margin:0 0 16px;text-align:center}
.fl-page .fl-dhikr .lbl{font-size:18px;color:var(--muted);margin:0 0 4px}
.fl-page .fl-dhikr .cnt{font-family:var(--sans);direction:ltr;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.fl-page p.fl-ar,.fl-ar{font-family:var(--naskh);direction:rtl;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:2.15;color:var(--acc);
  margin:0;text-align:center}

/* ---------- headings inside long-form ---------- */
.fl-page h2{font-size:clamp(24px,3vw,32px);color:var(--acc);margin:46px 0 18px;font-weight:600}
.fl-page h3{font-size:clamp(20px,2.5vw,25px);color:var(--acc);margin:32px 0 8px;font-weight:600;opacity:.86}
.fl-page p{font-size:19px;margin:0 0 1.15em}
/* p.fl-foot, not .fl-foot: the generic `.fl-page p` rule above sets margin and
   outranks a lone class, so the separation has to be stated at that weight. */
.fl-page p.fl-foot{text-align:center;color:var(--muted);font-size:16px;
  margin:46px 0 0;padding-top:26px;border-top:1px solid var(--line)}

/* ---------- chain (shajarah) ---------- */
.fl-chain{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 8px}
.fl-chain ol,.fl-chain ol>li{list-style:none}
.fl-chain ol{margin:0;padding:0 34px 0 12px;counter-reset:s}
.fl-chain li{counter-increment:s;position:relative;padding:9px 34px 9px 10px;
  border-bottom:1px dashed var(--line);font-size:18px}
.fl-chain li:last-child{border-bottom:0}
.fl-chain li::before{content:counter(s);position:absolute;inset-inline-end:0;top:11px;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--acc);
  min-width:26px;text-align:end;direction:ltr}

/* ---------- contents card ---------- */
.fl-toc{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:0 0 40px}
.fl-page .fl-toc .t{font-family:var(--sans);direction:ltr;text-align:end;font-size:11.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.fl-toc ol,.fl-toc ol>li{list-style:none}
/* The counter is drawn in ::before rather than as a list marker: a list-item
   marker is not painted when the <li> is a grid item, which this one is. */
.fl-toc ol{margin:0;padding:0;counter-reset:tc;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 26px}
.fl-toc li{counter-increment:tc;position:relative;padding-inline-start:32px;
  font-size:19px;line-height:2.1;color:var(--acc)}
.fl-toc li::before{content:counter(tc,fl-urdu) "\6D4";position:absolute;inset-inline-start:0;
  color:var(--muted);font-size:16px}
.fl-toc--latin li::before{content:counter(tc) "."}
.fl-toc a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line)}
.fl-toc a:hover{border-bottom-color:var(--gold)}

/* a small pill, for a status against a contents line */
.fl-page .fl-tag{display:inline-block;font-size:14px;line-height:1.6;color:var(--muted);
  background:var(--cream);border-radius:20px;padding:2px 11px;
  margin-inline-start:8px;vertical-align:2px}

/* A section number sitting above its heading. It keeps the parent's direction
   so it aligns with the heading rather than against it; `isolate` is what keeps
   the digits reading left to right inside RTL text. */
.fl-page h2 .fl-n{display:block;font-family:var(--sans);unicode-bidi:isolate;
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--gold-ink);margin:0 0 6px}

/* ---------- panel: a bordered aside, source note or form wrapper ---------- */
.fl-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:34px 0 0}
.fl-page .fl-panel p{font-size:17.5px;color:var(--muted)}
.fl-page .fl-panel p:last-child{margin:0}
.fl-panel a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--gold)}

/* ---------- fact tiles ---------- */
.fl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin:44px 0 0}
.fl-fact{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;text-align:center}
.fl-page .fl-fact .k,.fl-page .fl-contact .k{font-family:var(--sans);font-size:11.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.fl-page .fl-fact .v{font-family:var(--display);font-size:26px;font-weight:600;
  color:var(--acc);margin:0;line-height:1.3}
.fl-page .fl-fact .n{font-size:14.5px;color:var(--muted);margin:6px 0 0}

.fl-contact{text-align:center;margin:30px 0 0}
.fl-page .fl-contact .v{font-family:var(--display);font-size:23px;font-weight:600;margin:0}
.fl-contact a{color:var(--acc);text-decoration:none;border-bottom:2px solid var(--gold)}

/* ---------- odds and ends ---------- */
/* An Urdu line inside otherwise English content. It sets direction but NOT
   text-align: alignment has to keep coming from the block it sits in, or the
   line breaks out of a centred hero and pins itself to the margin. */
.fl-page p.fl-ur{font-family:var(--nastaliq);direction:rtl;
  font-size:20px;line-height:2.05;color:var(--acc);margin:12px 0 0}
/* as a hero subtitle it carries the title, so it is sized and coloured like one */
.fl-page .fl-hero .fl-ur{font-size:clamp(22px,3vw,32px);line-height:1.9;
  color:var(--gold-ink);margin:0 0 18px}
/* a quieter remark following a block it belongs to */
.fl-page p.fl-aside{font-size:17.5px;color:var(--muted);margin:16px 0 1.15em}

/* ---------- English long-form ---------- */
/* .fl-page sets Nastaliq on the container and on h1..h4, because the theme
   styles headings directly. An English page has to restate both. */
.fl-page--en{font-family:var(--serif);line-height:1.78}
.fl-page--en h1,.fl-page--en h2,.fl-page--en h3,.fl-page--en h4{font-family:var(--display)}
.fl-page--en h1{line-height:1.1}
.fl-page--en h2{line-height:1.2}
.fl-page--en .fl-hero{border-bottom:0}
.fl-page--en .fl-sub{font-family:var(--serif)}

@media(max-width:860px){
  .fl-hero--split{grid-template-columns:1fr;gap:30px}
  .fl-cover{max-width:270px;margin:0 auto;order:-1}
}
@media(max-width:640px){
  .fl-page{line-height:1.95}
  .fl-page p,.fl-chain li,.fl-toc li{font-size:17px}
  .fl-page p.fl-ar,.fl-page .fl-ar{font-size:23px}
  .fl-page--en{line-height:1.72}
  .fl-page .fl-fact .v{font-size:22px}
}

/* ============================================================================
   Urdu variants of the components whose Latin form does not survive translation.

   Two properties are the problem. `letter-spacing` breaks the cursive joins in
   Arabic script, so a tracked label renders as disconnected letters; and
   `--display` is Cormorant Garamond, a Latin serif that Urdu simply falls out
   of. Both are correct for the English chrome these components were written
   for, and wrong the moment the text itself is Urdu.

   Scoped to .fl-page[lang="ur"] so the English pages are untouched.

   Deliberately NOT included: a rule for `.fl-card .n`. On this site that label
   holds Latin numerals (01, 02, 03) on rahnuma-e-salik, which is itself an
   lang="ur" page, so an [lang="ur"] rule would re-render those numerals in
   Nastaliq. Checked before writing this, not after.
   ========================================================================= */
.fl-page[lang="ur"] .fl-fact .k,
.fl-page[lang="ur"] .fl-contact .k{
  font-family:var(--nastaliq);
  letter-spacing:normal;
  text-transform:none;
  font-size:15px;
  line-height:1.9;
}
.fl-page[lang="ur"] .fl-fact .v,
.fl-page[lang="ur"] .fl-contact .v{font-family:var(--nastaliq);line-height:1.75}
.fl-page[lang="ur"] .fl-fact .v{font-size:24px}
@media (max-width:640px){
  .fl-page[lang="ur"] .fl-fact .v{font-size:21px}
}

/* Micro-labels: the dhikr count and figure captions are set in Latin small caps
   with letter-spacing and uppercase, which is right for Latin and wrong for Urdu
   twice over - letter-spacing breaks the cursive joins, and uppercase is
   meaningless in the script. On an Urdu page they take Nastaliq at its own size
   with the tracking removed. Same shape as the .fl-fact rule above. */
.fl-page[lang="ur"] .fl-dhikr .cnt,
.fl-page[lang="ur"] .fl-figs figcaption{
  font-family:var(--nastaliq);direction:rtl;
  letter-spacing:normal;text-transform:none;
  font-size:15px;line-height:1.95;
}

/* The contents list numbers in Urdu digits with an Urdu full stop, which is
   right on an Urdu page and wrong on an English one. A .fl-toc--latin modifier
   exists but nothing selected it, so /daily-practice-en/ shipped numbered
   ۱۔ ۲۔ ۳۔ against English text. Bind it to the page language instead of asking
   an author to remember a modifier class. */
.fl-page--en .fl-toc li::before{content:counter(tc) "."}

/* The dhikr card is text-align:center and its Arabic is centred, but on an Urdu
   page the label and count inherit the body's right/justify and sit against the
   edge. The English side was given explicit centring in v1.42.1; this is the
   matching half, which was missed. */
.fl-page[lang="ur"] .fl-dhikr .lbl,
.fl-page[lang="ur"] .fl-dhikr .cnt{text-align:center;text-align-last:center}