/*
Theme Name: AskSufi
Theme URI: https://asksufi.org
Description: AskSufi child theme for GeneratePress. Bilingual (English + Urdu) editorial archive of the teachings of Shaykh Humayun Hanif Db. on Sufism, the Inner Path, and the Purification of the Heart. Theme A palette (cream/sage/gold), Nastaliq + Naskh typography, RTL/bidi handling.
Author: SYNQ
Template: generatepress
Version: 0.1.0
Text Domain: asksufi
*/

/* =========================================================================
   1. PALETTE  — "Theme A" cream / sage / gold  (ported from the live app)
   ========================================================================= */
:root {
  /* Ink */
  --as-ink:        #1a1816;
  --as-ink-soft:   rgba(26, 24, 22, 0.85);
  --as-ink-muted:  rgba(26, 24, 22, 0.65);
  --as-ink-faint:  rgba(26, 24, 22, 0.45);

  /* Surfaces */
  --as-cream:      #faf7f2;   /* page background */
  --as-paper:      #fffcf8;   /* elevated cards */
  --as-parchment:  #f3ebe0;   /* warm deep tone */

  /* Gold / brass */
  --as-gold-warm:  #b8963e;   /* most saturated accent */
  --as-gold:       #9a7b4f;   /* workhorse accent */
  --as-gold-soft:  #c9b896;   /* faded hairlines */
  --as-accent:     #b8963e;
  --as-accent-soft:  rgba(184, 150, 62, 0.35);
  --as-accent-light: rgba(184, 150, 62, 0.18);
  --as-accent-bg:    rgba(184, 150, 62, 0.08);

  /* Sage (hero / footer) */
  --as-sage:       #2d4f42;
  --as-sage-light: #3d6b5a;
  --as-hero-bg:    #2d4f42;
  --as-hero-ink:      #F5EDD8;
  --as-hero-ink-soft: rgba(245, 237, 216, 0.78);
  --as-hero-ink-muted:rgba(245, 237, 216, 0.5);
  --as-hero-rule:     rgba(232, 220, 192, 0.1);

  /* Rules */
  --as-rule:      rgba(26, 24, 22, 0.12);
  --as-rule-soft: rgba(26, 24, 22, 0.06);

  /* Fonts (our aliases) */
  --as-font-serif:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --as-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --as-font-nastaliq: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --as-font-naskh:    "Noto Naskh Arabic", serif;

  /* Font variables the ported app stylesheet (editorial.css) expects —
     these are normally injected by next/font at runtime. */
  --font-serif:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-nastaliq: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --font-naskh:    "Noto Naskh Arabic", serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
body {
  background: var(--as-cream);
  color: var(--as-ink);
  font-family: var(--as-font-serif);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--as-gold-warm); }
a:hover { color: var(--as-gold); }

/* GeneratePress content width tuned for reading measure */
.site-content .content-area { padding-block: clamp(2rem, 5vw, 4rem); }

/* =========================================================================
   3. RTL / URDU / ARABIC  — script-aware typography
   ========================================================================= */
[lang="ur"] {
  font-family: var(--as-font-nastaliq);
  direction: rtl;
  text-align: right;
  line-height: 2.1;             /* Nastaliq needs vertical air */
}
[lang="ar"] {
  font-family: var(--as-font-naskh);
  direction: rtl;
  text-align: right;
  line-height: 1.85;
}
[lang="fa"] {
  font-family: var(--as-font-nastaliq);  /* Persian rendered in Nastaliq */
  direction: rtl;
  text-align: right;
  line-height: 2.0;
}
/* Inline foreign term inside a running line keeps its own script but flows */
[lang="ur"] [lang="en"],
[lang="ar"] [lang="en"] { font-family: var(--as-font-serif); direction: ltr; unicode-bidi: isolate; }

/* =========================================================================
   4. TEACHING ARTICLE  (as-*)  — single entry rendering
   ========================================================================= */
.as-article { max-width: 680px; margin-inline: auto; }
.as-article.lang-ur { max-width: 720px; }   /* Nastaliq expands laterally */

/* --- language toggle mechanism: show one language at a time --- */
.as-article .as-ur { display: none; }
.as-article.lang-ur .as-en { display: none; }
.as-article.lang-ur .as-ur { display: block; }

/* --- toggle control --- */
.as-langbar { display: flex; gap: .25rem; justify-content: flex-end; margin-bottom: 1.5rem; }
.as-langbtn {
  font-family: var(--as-font-sans);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .8rem; border: .5px solid var(--as-rule);
  background: transparent; color: var(--as-ink-muted); cursor: pointer; border-radius: 2px;
  transition: color .15s, border-color .15s, background .15s;
}
.as-langbtn[aria-pressed="true"] { color: var(--as-ink); border-color: var(--as-gold-soft); background: var(--as-accent-bg); }
.as-langbtn:hover { color: var(--as-ink); }

/* --- eyebrow --- */
.as-eyebrow {
  font-family: var(--as-font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--as-gold-warm); margin-bottom: 1rem;
}

/* --- title --- */
.as-title {
  font-family: var(--as-font-serif);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 600;
  letter-spacing: -0.01em; color: var(--as-ink); margin: 0 0 1rem;
}
.as-title[lang="ur"] {
  font-family: var(--as-font-nastaliq);
  font-size: clamp(24px, 3.4vw, 34px); line-height: 2.2; font-weight: 500;
}

/* --- hairline --- */
.as-hairline { border: 0; border-top: .5px solid var(--as-gold-soft); width: 60px; margin: 1.5rem 0 2rem; }

/* --- body prose --- */
.as-body { font-size: 18px; line-height: 1.65; color: var(--as-ink-soft); }
.as-body[lang="ur"] { font-size: 22px; line-height: 2.0; }
.as-body p { margin: 0 0 1.4em; }
.as-body h2 { font-family: var(--as-font-serif); font-size: 26px; line-height: 1.18; font-weight: 600; letter-spacing: -0.005em; color: var(--as-ink); margin: 2em 0 .6em; }
.as-body h3 { font-family: var(--as-font-serif); font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--as-ink); margin: 1.6em 0 .5em; }
.as-body[lang="ur"] h2 { font-family: var(--as-font-nastaliq); line-height: 1.8; }
.as-body[lang="ur"] h3 { font-family: var(--as-font-nastaliq); line-height: 1.8; }

/* =========================================================================
   5. SOURCE QUOTES  — Quran / hadith / Persian.  Original ALWAYS shown;
      translation follows the active language toggle.
   ========================================================================= */
.as-sources { margin: 2.5rem 0; }
.as-sources-label {
  font-family: var(--as-font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--as-ink-muted); margin-bottom: 1rem;
}
.as-source-quote {
  background: var(--as-paper);
  border: .5px solid var(--as-rule-soft); border-left: 3px solid var(--as-gold);
  padding: 18px 22px; margin: 28px 0;
}
/* original scripture / couplet text */
.as-source-text {
  font-family: var(--as-font-naskh);
  font-size: 24px; line-height: 2.0; direction: rtl; text-align: right;
  color: var(--as-ink); margin: 0;
}
.as-source-quote[data-script="persian"] .as-source-text { font-family: var(--as-font-nastaliq); }
.as-source-rule { border: 0; border-top: .5px solid var(--as-gold); width: 36px; margin: 14px 0 12px; }
/* translation — only the language-appropriate one shows via toggle */
.as-source-translation { font-family: var(--as-font-serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--as-ink-soft); margin: 0; }
.as-source-translation[lang="ur"] { font-family: var(--as-font-nastaliq); font-style: normal; font-size: 18px; line-height: 1.9; }
.as-article .as-source-translation.as-ur { display: none; }
.as-article.lang-ur .as-source-translation.as-en { display: none; }
.as-article.lang-ur .as-source-translation.as-ur { display: block; }
.as-source-citation {
  display: block; margin-top: 10px;
  font-family: var(--as-font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--as-gold-warm);
}

/* =========================================================================
   6. SIGNOFF  — reverent attribution block
   ========================================================================= */
.as-signoff { margin-top: 3rem; padding-top: 1.5rem; border-top: .5px solid var(--as-rule); }
.as-signoff-prefix { font-family: var(--as-font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-ink-muted); display: block; margin-bottom: .4rem; }
.as-signoff-name { font-family: var(--as-font-serif); font-size: 19px; font-weight: 600; color: var(--as-ink); }
.as-signoff-name[lang="ur"] { font-family: var(--as-font-nastaliq); }
.as-signoff-honorific { color: var(--as-gold-warm); }

/* =========================================================================
   7. TOPIC PILLS
   ========================================================================= */
.as-topics { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.as-topic-pill {
  font-family: var(--as-font-sans); font-size: 12px; letter-spacing: .04em;
  padding: .35rem .75rem; border: .5px solid var(--as-gold-soft); border-radius: 999px;
  color: var(--as-ink-soft); text-decoration: none; background: var(--as-accent-bg);
}
.as-topic-pill:hover { color: var(--as-ink); border-color: var(--as-gold); }

/* =========================================================================
   8. HOMEPAGE + LISTINGS
   ========================================================================= */

/* --- section rhythm --- */
.as-section { max-width: 1080px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2rem); }
.as-section-head { margin-bottom: 2rem; }
.as-section-eyebrow {
  font-family: var(--as-font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--as-gold-warm); margin: 0 0 .5rem;
}
.as-section-title {
  font-family: var(--as-font-serif); font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.15rem); letter-spacing: -0.02em; color: var(--as-ink); margin: 0;
}

/* --- hero --- */
.as-hero {
  background: linear-gradient(160deg, var(--as-parchment) 0%, var(--as-cream) 60%);
  border-bottom: .5px solid var(--as-rule-soft);
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 2rem) clamp(3rem, 7vw, 5rem);
  /* full-bleed regardless of the GP content container */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.as-hero-eyebrow {
  font-family: var(--as-font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--as-gold-warm); margin: 0 0 1.25rem;
}
.as-hero-title {
  font-family: var(--as-font-serif); font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--as-ink); margin: 0 auto 1.25rem; max-width: 16ch;
}
.as-hero-title[lang="ur"] { font-family: var(--as-font-nastaliq); line-height: 1.9; }
.as-hero-sub {
  font-family: var(--as-font-serif); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.6;
  color: var(--as-ink-muted); margin: 0 auto; max-width: 44ch;
}

/* --- teaching card grid --- */
.as-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 640px) { .as-grid { grid-template-columns: 1fr; } }

.as-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--as-paper); border: .5px solid var(--as-rule-soft); border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 1.75rem); text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.as-card:hover { border-color: var(--as-gold-soft); transform: translateY(-2px); box-shadow: 0 14px 34px -22px rgba(26,24,22,.35); }
.as-card-eyebrow {
  font-family: var(--as-font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--as-gold-warm);
}
.as-card-title { font-family: var(--as-font-serif); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.25; letter-spacing: -0.012em; color: var(--as-ink); margin: 0; }
.as-card-summary { font-family: var(--as-font-serif); font-size: 1rem; line-height: 1.55; color: var(--as-ink-soft); margin: 0; }
.as-card-more { margin-top: auto; font-family: var(--as-font-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--as-gold-warm); }

/* --- featured (spans full width, larger) --- */
.as-featured { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.as-card--featured { background: linear-gradient(155deg, var(--as-paper), var(--as-parchment)); padding: clamp(1.75rem, 4vw, 2.75rem); }
.as-card--featured .as-card-title { font-size: clamp(1.6rem, 3.6vw, 2.15rem); font-weight: 600; }
.as-card--featured .as-card-summary { font-size: clamp(1.05rem, 2vw, 1.15rem); max-width: 52ch; }

/* --- topic strip --- */
.as-topic-strip { display: flex; flex-wrap: wrap; gap: .6rem; }
.as-topic-chip {
  font-family: var(--as-font-sans); font-size: 13px; letter-spacing: .02em;
  padding: .5rem .9rem; border: .5px solid var(--as-gold-soft); border-radius: 999px;
  color: var(--as-ink-soft); text-decoration: none; background: var(--as-paper);
  transition: border-color .15s, color .15s, background .15s;
}
.as-topic-chip:hover { border-color: var(--as-gold); color: var(--as-ink); background: var(--as-accent-bg); }
.as-topic-count { color: var(--as-ink-faint); font-size: 11px; }

/* --- CTA panel --- */
.as-cta {
  background: linear-gradient(140deg, var(--as-sage), var(--as-sage-light));
  color: var(--as-hero-ink); text-align: center; border-radius: 6px;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 6vw, 3rem);
}
.as-cta-title { font-family: var(--as-font-serif); font-weight: 500; font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--as-hero-ink); margin: 0 0 .75rem; }
.as-cta-sub { font-family: var(--as-font-serif); color: var(--as-hero-ink-soft); margin: 0 auto 1.75rem; max-width: 42ch; }
.as-btn {
  display: inline-block; font-family: var(--as-font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 3px; background: var(--as-gold-warm); color: #fff;
  transition: background .15s;
}
.as-btn:hover { background: var(--as-gold); color: #fff; }

/* --- archive / topic header --- */
.as-archive-head { max-width: 1080px; margin: clamp(2rem,5vw,3.5rem) auto 0; padding: 0 clamp(1.25rem,5vw,2rem); text-align: center; }
.as-archive-eyebrow { font-family: var(--as-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--as-gold-warm); margin: 0 0 .6rem; }
.as-archive-title { font-family: var(--as-font-serif); font-weight: 600; font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -0.02em; color: var(--as-ink); margin: 0; }
.as-archive-grid-wrap { max-width: 1080px; margin: 2rem auto 0; padding: 0 clamp(1.25rem,5vw,2rem); }

/* =========================================================================
   9. HEADER / NAV / FOOTER chrome
   ========================================================================= */
.site-header { background: var(--as-cream); border-bottom: .5px solid var(--as-rule-soft); }
.site-title a, .main-title a {
  font-family: var(--as-font-serif); font-weight: 600; letter-spacing: -0.01em; color: var(--as-ink);
}
.site-description {
  font-family: var(--as-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--as-ink-muted);
}
.main-navigation, .main-navigation ul { background: transparent; }
.main-navigation a {
  font-family: var(--as-font-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--as-ink-soft);
}
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--as-gold-warm); background: transparent; }

.site-footer, .site-info { background: var(--as-cream); border-top: .5px solid var(--as-rule-soft); }
.as-footer-credit { font-family: var(--as-font-sans); font-size: 12px; letter-spacing: .04em; color: var(--as-ink-muted); }