/*
 * AskSufi enhancements layered on top of the ported editorial.css.
 * Loaded last. Home of our design improvements beyond the app replica.
 */

/* --- Urdu block on single entries (source text shown under the English) --- */
.ed-urdu-block {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 0.5px solid rgba(26, 24, 22, 0.12);
}
.ed-urdu-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #b8963e; margin-bottom: 1rem; direction: rtl; text-align: right;
}
.ed-urdu-title {
  font-family: var(--font-nastaliq);
  font-size: clamp(22px, 3vw, 30px); line-height: 2.2; font-weight: 500;
  direction: rtl; text-align: right; color: #1a1816; margin: 0 0 1.25rem;
}
.ed-body--ur {
  font-family: var(--font-nastaliq);
  font-size: 21px; line-height: 2.0; direction: rtl; text-align: right;
}
.ed-body--ur p { margin: 0 0 1.2em; }

/* --- practice meta line on single practice entries --- */
.ed-practice-meta {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(26, 24, 22, 0.65); margin: 0 0 1.5rem;
}

/* ============================================================
   PHASE 2 — single-entry redesign (illuminated manuscript)
   Layered over editorial.css (loads after → wins on equal specificity).
   ============================================================ */

/* breadcrumb */
.ed-breadcrumb {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.04em;
  display: flex; gap: 0.55rem; align-items: center; margin-bottom: 1.6rem;
}
.ed-breadcrumb a { color: rgba(26, 24, 22, 0.5); text-decoration: none; transition: color 0.15s; }
.ed-breadcrumb a:hover { color: #b8963e; }
.ed-breadcrumb span { color: rgba(26, 24, 22, 0.25); }

/* eyebrow — a small brass rule leads it */
.ed-read-column .ed-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: #b8963e; letter-spacing: 0.2em;
}
.ed-read-column .ed-eyebrow::before {
  content: ""; width: 1.6rem; height: 0.5px; background: #b8963e; display: inline-block;
}

/* title — a touch larger + tighter for presence */
.ed-read-column .ed-h1 {
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -0.018em;
}

/* manuscript drop cap on the opening paragraph of the answer */
.ed-body--lead > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 4.1em; line-height: 0.8; font-weight: 600;
  color: #9a7b4f;
  padding: 0.05em 0.14em 0 0; margin: 0.04em 0.04em 0 0;
}

/* illuminated source-quote panel (Quran / hadith / Persian) — the signature */
.ed-read-column .ed-source-quote {
  background: linear-gradient(180deg, #fffcf8, #faf7f2);
  border: 0.5px solid rgba(184, 150, 62, 0.4);
  border-radius: 3px;
  padding: 2.25rem 2rem 1.6rem;
  margin: 2.75rem 0;
  text-align: center; position: relative;
}
.ed-read-column .ed-source-quote::before {
  content: "۞"; position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  color: #b8963e; background: #faf7f2; padding: 0 0.5rem; font-size: 1rem; line-height: 1;
}
.ed-read-column .ed-source-quote-text {
  text-align: center; font-size: clamp(24px, 3.4vw, 29px); line-height: 2.05; color: #1a1816;
}
.ed-read-column .ed-source-quote-rule {
  width: 44px; margin: 1.1rem auto 0.9rem; border-top: 0.5px solid #b8963e;
}
.ed-read-column .ed-source-quote-translation { text-align: center; color: rgba(26, 24, 22, 0.8); }
.ed-read-column .ed-source-quote-citation {
  display: block; text-align: center; margin-top: 0.9rem;
  letter-spacing: 0.16em; color: #b8963e;
}

/* colophon — the sign-off as a centered, ornamented close */
.ed-read-column .entry-signoff {
  margin-top: 3.5rem; padding-top: 0; border-top: none;
}
.entry-signoff-ornament { color: #b8963e; font-size: 1.15rem; opacity: 0.75; margin-bottom: 1.4rem; text-align: center; }
/* A letter's signature: English at the left (LTR) edge, Urdu at the right (RTL) edge. */
.entry-signoff-en { text-align: left; }
.entry-signoff-ur { text-align: right; direction: rtl; }
.ed-read-column .entry-signoff .greeting {
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem;
  color: rgba(26, 24, 22, 0.6); margin: 0 0 0.5rem;
}
.ed-read-column .entry-signoff .name {
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
  color: #1a1816; letter-spacing: -0.01em; margin: 0 0 0.45rem;
}
.ed-read-column .entry-signoff .address {
  font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(26, 24, 22, 0.45); margin: 0;
}
/* Urdu sign-off: Nastaliq, natural leading, and a plain (non-uppercased) address. */
.ed-read-column .entry-signoff-ur .greeting { font-family: var(--font-nastaliq); font-style: normal; line-height: 2; }
.ed-read-column .entry-signoff-ur .name { font-family: var(--font-nastaliq); font-weight: 600; letter-spacing: 0; line-height: 2.1; }
.ed-read-column .entry-signoff-ur .address { font-family: var(--font-nastaliq); text-transform: none; letter-spacing: 0; font-size: 0.98rem; line-height: 1.9; color: rgba(26, 24, 22, 0.5); }

/* marginalia topics — quieter, tag-like */
.ed-marginalia .ed-mh {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 24, 22, 0.5);
}
.ed-marginalia .ed-topic-pill { color: rgba(26, 24, 22, 0.7); }
.ed-marginalia .ed-topic-pill:hover { color: #b8963e; }

/* mobile-first tightening */
@media (max-width: 600px) {
  .ed-read-column .ed-source-quote { padding: 1.75rem 1.25rem 1.25rem; }
  .ed-body--lead > p:first-of-type::first-letter { font-size: 3.4em; }
}

/* ---- Hikmah entry: full-bleed shareable pull-quote ---- */
.ed-read-column .ed-hikmah-card { text-align: center; margin: 1.25rem 0 2.5rem; padding: 2.25rem 0; }
.ed-hikmah-orn { color: #b8963e; font-size: 1.15rem; opacity: 0.75; margin-bottom: 1.75rem; }
.ed-read-column blockquote.ed-hikmah {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.25; letter-spacing: -0.02em;
  color: #1a1816; max-width: 24ch; margin: 0 auto;
}
.ed-hikmah-rule { width: 44px; height: 0.5px; background: #b8963e; margin: 1.75rem auto 0; }

/* ---- Practice entry: illuminated "wird" card ---- */
.ed-read-column .ed-wird {
  background: linear-gradient(180deg, #fffcf8, #faf7f2);
  border: 0.5px solid rgba(184, 150, 62, 0.4); border-radius: 3px;
  padding: 2.5rem 1.5rem 1.75rem; margin: 1.25rem 0 2rem; text-align: center; position: relative;
}
.ed-wird-orn { color: #b8963e; font-size: 1rem; opacity: 0.8; margin-bottom: 1rem; }
.ed-wird-arabic {
  font-family: var(--font-naskh); font-size: clamp(26px, 4.2vw, 36px); line-height: 2;
  direction: rtl; color: #1a1816; margin: 0;
}
.ed-wird-meta { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.ed-chip {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; color: #1a1816;
  border: 0.5px solid rgba(184, 150, 62, 0.5); border-radius: 999px; padding: 0.35rem 0.85rem; background: #fff;
}
.ed-chip em { font-style: normal; color: rgba(26, 24, 22, 0.5); text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; margin-right: 0.35rem; }

/* ---- Story entry: closing moral ---- */
.ed-story-moral {
  margin-top: 2.5rem; padding: 1.5rem 1.75rem;
  border-left: 2px solid #b8963e; background: rgba(184, 150, 62, 0.06);
}
.ed-story-moral-label {
  display: block; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: #b8963e; margin-bottom: 0.5rem;
}
.ed-story-moral p { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: #1a1816; margin: 0; }

/* ---- About / content pages: editorial headings, ornaments, drop cap ---- */
.ed-read-column .ed-body h2 {
  font-family: var(--font-serif); font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2;
  font-weight: 600; letter-spacing: -0.01em; color: #1a1816; margin: 0.4rem 0 0.7rem; text-align: center;
}
.ed-read-column .ornament { text-align: center; margin: 2.75rem 0 2rem; }
.ed-read-column .ornament .glyph { color: #b8963e; font-size: 1.15rem; opacity: 0.7; }
body.page .ed-read-column .ed-body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-serif); font-size: 3.8em; line-height: 0.82; font-weight: 600;
  color: #9a7b4f; padding: 0.05em 0.14em 0 0; margin: 0.04em 0.04em 0 0;
}

/* remove inherited left border on centered hikmah quote */
.ed-read-column blockquote.ed-hikmah { border: 0; padding: 0; }

/* ---- pagination (archive / topic / search) — WP outputs .nav-links + .page-numbers ---- */
.nav-links { display: flex; gap: 0.4rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 3.5rem 0 0.5rem; }
.page-numbers {
  font-family: var(--font-sans); font-size: 14px; line-height: 1;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.65rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid rgba(26, 24, 22, 0.16); border-radius: 3px;
  color: rgba(26, 24, 22, 0.7); text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
a.page-numbers:hover { border-color: #b8963e; color: #b8963e; }
.page-numbers.current { background: #2d4f42; border-color: #2d4f42; color: #f5edd8; }
.page-numbers.dots { border: none; min-width: 1rem; }
.page-numbers.prev, .page-numbers.next { letter-spacing: 0.03em; }

/* ============================================================
   PHASE 4 — mobile chrome: masthead, hamburger, menu
   ============================================================ */
.as-burger { display: none; }
/* higher specificity than the app's ".site-head nav", and always hidden while
   the [hidden] attribute is present (JS toggles it). Prevents the desktop
   double-nav. */
.site-head .as-mobile-menu { display: none; }
.site-head .as-mobile-menu[hidden] { display: none; }

@media (max-width: 1023px) {
  /* keep the masthead inset + on one tidy row */
  .site-head { padding: 0 1.1rem; gap: 0.75rem; align-items: center; }
  .site-head .brand { font-size: 1.4rem; flex: 0 0 auto; }
  .mobile-head-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

  .as-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 9px; background: transparent; cursor: pointer;
    border: 0.5px solid rgba(26, 24, 22, 0.16); border-radius: 4px;
  }
  .as-burger span { display: block; height: 1.5px; width: 100%; background: #1a1816; transition: transform 0.2s, opacity 0.2s; }
  .as-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .as-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .as-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .site-head .as-mobile-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: #fffcf8; border-top: 0.5px solid rgba(26, 24, 22, 0.1);
    box-shadow: 0 18px 40px -24px rgba(26, 24, 22, 0.4); padding: 0.5rem 1.1rem 1.1rem;
  }
  .as-mobile-menu a {
    font-family: var(--font-serif); font-size: 1.15rem; color: #1a1816;
    padding: 0.85rem 0; border-bottom: 0.5px solid rgba(26, 24, 22, 0.07); text-decoration: none;
  }
  .as-mobile-menu a:last-child { border-bottom: none; }
  .as-mobile-menu-cta {
    margin-top: 0.9rem; text-align: center; background: #2d4f42; color: #f5edd8 !important;
    border-radius: 3px; font-family: var(--font-sans) !important; font-size: 0.95rem !important;
    letter-spacing: 0.02em; padding: 0.85rem 1rem !important;
  }
  .site-head { position: relative; }
  body.as-menu-open { overflow: hidden; }

  /* shrink the desktop "Ask a Question" pill to compact on mobile */
  .ask-cta { padding: 0.5rem 0.85rem; }
}

@media (max-width: 400px) {
  .site-head .brand { font-size: 1.25rem; }
}

/* ============================================================
   PHASE 4 — homepage elevation + desktop nav + tonality
   ============================================================ */

/* desktop nav — a touch larger, brass hover, clear current state */
@media (min-width: 1024px) {
  .public-nav a { font-size: 14px; letter-spacing: 0.005em; color: rgba(26, 24, 22, 0.72); padding: 0.5rem 0; transition: color 0.15s; }
  .public-nav a:hover { color: #b8963e; }
  .public-nav a[aria-current="page"] { color: #1a1816; }
  .public-nav .locale-toggle { color: rgba(26, 24, 22, 0.45); font-size: 13px; }
  .public-nav .locale-toggle:hover { color: #b8963e; }
}
/* subtle sage-warmed hairline under the masthead */
.site-head { border-bottom: 0.5px solid rgba(45, 79, 66, 0.12); }

/* section titles + see-all */
.section-title h2 { color: #1a1816; }
.section-title h2 em { color: #9a7b4f; }
.section-title .see-all { color: #b8963e; font-size: 12px; letter-spacing: 0.06em; transition: color 0.15s; }
.section-title .see-all:hover { color: #9a7b4f; }

/* ornaments — one consistent brass glyph across site */
.ornament .glyph { color: #b8963e; opacity: 0.65; font-size: 1.15rem; }

/* today card — brass top rule to echo the illuminated panels */
.today-card { border-top: 2px solid rgba(184, 150, 62, 0.5); }

/* card polish — gentle lift + brass edge on hover */
.today-card, .compact-card, .story-feature, .practice-card, .topic-card, .hikmah-card {
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.today-card:hover, .compact-card:hover, .story-feature:hover,
.practice-card:hover, .topic-card:hover, .hikmah-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -24px rgba(26, 24, 22, 0.32);
  border-color: rgba(184, 150, 62, 0.4);
}
.entries .entry:hover h3 { color: #9a7b4f; }
.topic-chip:hover { border-color: #b8963e; color: #1a1816; }

/* ============================================================
   Homepage refinements — full-bleed hero, pattern, green hikmah, nav
   ============================================================ */

/* let the masthead band reach the screen edges; .page keeps content centered */
body { max-width: none; padding-left: 0; padding-right: 0; }

/* subtle Islamic geometric pattern on the homepage hero band —
   uniform density, full-bleed (no edge emphasis) */
.asksufi-front .masthead-band { position: relative; }
.asksufi-front .masthead-band > * { position: relative; z-index: 1; }
.asksufi-front .masthead-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b8963e' stroke-width='0.6'%3E%3Cpath d='M32 2 L62 32 L32 62 L2 32 Z'/%3E%3Cpath d='M32 16 L48 32 L32 48 L16 32 Z'/%3E%3Ccircle cx='32' cy='32' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px; opacity: 0.14;
  /* Uniform full-bleed pattern — no radial mask, so no left/right edge marks. */
}

/* small Hikmah row cards → sage-green with parchment text (echo the spotlight) */
.hikmah-row-grid .hikmah-card {
  background: linear-gradient(140deg, #2d4f42, #3d6b5a);
  border-color: transparent;
}
.hikmah-row-grid .hikmah-card .quote { color: #f5edd8; }
.hikmah-row-grid .hikmah-card .urdu-echo { color: rgba(245, 237, 216, 0.72); }
.hikmah-row-grid .hikmah-card:hover { box-shadow: 0 16px 38px -20px rgba(45, 79, 66, 0.55); border-color: transparent; }

/* nav balance — smaller items, even spacing, matched About */
@media (min-width: 1024px) {
  .public-nav { gap: 1.6rem; align-items: center; }
  .public-nav a { font-size: 13.5px; padding: 0.4rem 0; }
  .public-nav .about-link { font-size: 13.5px; color: rgba(26, 24, 22, 0.72); }
  .public-nav .locale-toggle { font-size: 12.5px; }
  .public-nav .cta { font-size: 12.5px; }
}

/* decisively lift the body cap so the masthead band is full-bleed (content stays capped via .page) */
html body { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ============================================================
   Nav rebuild — editable WP menu, centered, balanced masthead
   (loads last → wins over the app's .public-nav rules)
   ============================================================ */
.site-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.site-head .brand { justify-self: start; }

.public-nav { justify-self: center; }
ul.public-nav-list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; }
ul.public-nav-list li { margin: 0; }
.public-nav a {
  font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0.01em;
  color: rgba(26, 24, 22, 0.74); text-decoration: none; padding: 0.4rem 0; transition: color 0.15s;
}
.public-nav a:hover, .public-nav .current-menu-item > a, .public-nav .current_page_item > a { color: #b8963e; }

.head-actions { justify-self: end; display: flex; align-items: center; gap: 1.1rem; }
.head-actions .locale-toggle { font-family: var(--font-sans); font-size: 12.5px; color: rgba(26, 24, 22, 0.5); text-decoration: none; }
.head-actions .locale-toggle:hover { color: #b8963e; }
.head-actions .cta {
  background: #2d4f42; color: #f5edd8; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.6rem 1.15rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.head-actions .cta:hover { background: #3d6b5a; color: #f5edd8; }

@media (max-width: 1023px) {
  .site-head { display: flex; justify-content: space-between; }
  .public-nav, .head-actions { display: none; }
  ul.as-mobile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .as-mobile-menu ul.as-mobile-list a {
    font-family: var(--font-serif); font-size: 1.15rem; color: #1a1816; display: block;
    padding: 0.85rem 0; border-bottom: 0.5px solid rgba(26, 24, 22, 0.07); text-decoration: none;
  }
}

/* ============================================================
   Nav v2 + hero refinements (loads last → authoritative)
   ============================================================ */

/* logo far left, nav items contained, About pushed right + bold, button right */
.site-head { display: flex; align-items: center; gap: 1.5rem; }
.public-nav { flex: 1 1 auto; }
ul.public-nav-list { gap: 1.35rem; }
.public-nav a { font-size: 12px; }
ul.public-nav-list > li:last-child { margin-left: auto; }          /* About → right */
ul.public-nav-list > li:last-child > a { font-weight: 700; color: rgba(26, 24, 22, 0.88); }
.head-actions { flex: 0 0 auto; }
.head-actions .cta { font-size: 12px; padding: 0.6rem 1.1rem; }

/* hover dropdown when a menu item has sub-items */
ul.public-nav-list li { position: relative; }
ul.public-nav-list .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 70; min-width: 12rem;
  background: #fffcf8; border: 0.5px solid rgba(26, 24, 22, 0.1); border-radius: 4px;
  box-shadow: 0 16px 34px -22px rgba(26, 24, 22, 0.4); padding: 0.4rem 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
ul.public-nav-list li:hover > .sub-menu, ul.public-nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
ul.public-nav-list .sub-menu li { display: block; margin-left: 0; }
ul.public-nav-list .sub-menu a { display: block; padding: 0.5rem 1rem; font-size: 12px; white-space: nowrap; font-weight: 400; }

/* mobile: force the hamburger visible, hide the desktop nav + actions */
@media (max-width: 1023px) {
  .site-head { display: flex; justify-content: space-between; gap: 0.75rem; }
  .public-nav, .head-actions { display: none !important; }
  .mobile-head-actions { display: flex !important; align-items: center; gap: 0.6rem; }
  .as-burger { display: inline-flex !important; }
}

/* hero pattern: keep the centre faintly visible, never fully transparent */
.asksufi-front .masthead-band::after {
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse 54% 70% at 50% 42%, rgba(0,0,0,0.3) 12%, #000 88%);
  mask-image: radial-gradient(ellipse 54% 70% at 50% 42%, rgba(0,0,0,0.3) 12%, #000 88%);
}

/* force nav item + cta sizing over the app rules */
.site-head .public-nav a { font-size: 12px !important; padding: 0.4rem 0.5rem !important; min-height: 0 !important; }
.site-head .head-actions .cta { font-size: 12px !important; }
.site-head ul.public-nav-list > li:last-child > a { font-weight: 700 !important; }

/* force nav layout: tight items left, About separated to the right */
.site-head .public-nav { flex: 1 1 auto !important; display: flex !important; justify-content: flex-start !important; }
.site-head ul.public-nav-list { width: 100%; flex-wrap: nowrap; }
.site-head ul.public-nav-list > li:last-child { margin-left: auto !important; }

/* guarantee the hero band spans the full viewport on mobile (no side bars) */
@media (max-width: 1023px) {
  .asksufi-front .masthead-band { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; }
}

/* ============================================================
   FINAL nav layout — brand left, menu CENTERED, actions right,
   uppercase items (authoritative, overrides all earlier nav rules)
   ============================================================ */
.site-head { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.site-head .brand { justify-self: start; }
.site-head .public-nav { justify-self: center; flex: 0 0 auto !important; width: auto !important; display: block !important; }
.site-head ul.public-nav-list { width: auto !important; display: flex; gap: 1.6rem; justify-content: center; flex-wrap: nowrap; }
.site-head ul.public-nav-list > li { margin: 0 !important; }
.site-head ul.public-nav-list > li:last-child { margin-left: 0 !important; }
.site-head .public-nav a { font-size: 12.5px !important; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; }
.site-head ul.public-nav-list > li:last-child > a { font-weight: 700 !important; }
.site-head .head-actions { justify-self: end; }
.site-head .head-actions .cta { text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 1023px) {
  .site-head { display: flex !important; grid-template-columns: none; justify-content: space-between; }
  .site-head .public-nav, .site-head .head-actions { display: none !important; }
}

/* ============================================================
   Entry sidebar enrichment (reading time, TOC, share, related)
   ============================================================ */
.ed-marginalia .ed-mblock { margin-bottom: 1.85rem; }
.ed-readtime { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(26, 24, 22, 0.55); }
.ed-readtime-num { color: #b8963e; font-weight: 700; }
.ed-toc { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ed-toc li { margin: 0.3rem 0; }
.ed-toc li.indent { padding-left: 0.9rem; }
.ed-toc a { font-family: var(--font-serif); font-size: 0.95rem; color: rgba(26, 24, 22, 0.7); text-decoration: none; border-left: 2px solid transparent; padding-left: 0.55rem; display: block; transition: color 0.15s, border-color 0.15s; }
.ed-toc a:hover, .ed-toc a.is-active { color: #b8963e; border-left-color: #b8963e; }
.ed-topic-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ed-share { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ed-share-btn { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.03em; color: rgba(26, 24, 22, 0.7); background: #fffcf8; border: 0.5px solid rgba(26, 24, 22, 0.14); border-radius: 3px; padding: 0.35rem 0.7rem; text-decoration: none; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ed-share-btn:hover { border-color: #b8963e; color: #b8963e; }
.ed-related-mini { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ed-related-mini li { margin: 0; padding: 0.55rem 0; border-bottom: 0.5px solid rgba(26, 24, 22, 0.07); }
.ed-related-mini li:last-child { border-bottom: none; }
.ed-related-mini a { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.35; color: rgba(26, 24, 22, 0.8); text-decoration: none; display: block; }
.ed-related-mini a:hover { color: #b8963e; }

/* ============================================================
   Homepage layout columns + colour scheme (admin-controlled)
   ============================================================ */
.as-cols-3 .as-grid, .as-cols-3 .practice-grid { grid-template-columns: repeat(3, 1fr); }
.as-cols-2 .hikmah-row-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .as-cols-3 .as-grid, .as-cols-3 .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .as-cols-3 .as-grid, .as-cols-3 .practice-grid, .as-cols-2 .hikmah-row-grid { grid-template-columns: 1fr; } }

/* ---- inverted sage scheme (homepage) ---- */
.as-scheme-sage { background: #23403a; color: #f0e9d6; }
.as-scheme-sage .masthead-band { background: linear-gradient(160deg, #2d4f42, #23403a); }
.as-scheme-sage .site-head { border-bottom-color: rgba(245, 237, 216, 0.12); }
.as-scheme-sage .brand, .as-scheme-sage .brand em { color: #f5edd8; }
.as-scheme-sage .public-nav a { color: rgba(245, 237, 216, 0.82) !important; }
.as-scheme-sage .public-nav a:hover { color: #d9b44a !important; }
.as-scheme-sage .hero-eyebrow, .as-scheme-sage .section-title h2 em, .as-scheme-sage .as-card-eyebrow, .as-scheme-sage .kicker { color: #d9b44a; }
.as-scheme-sage .lede, .as-scheme-sage .lede-a, .as-scheme-sage .section-title h2 { color: #f5edd8; }
.as-scheme-sage .lede-em { color: #d9b44a; }
.as-scheme-sage .hero-kicker { color: rgba(245, 237, 216, 0.72); }
.as-scheme-sage .search-field { background: rgba(255, 255, 255, 0.06); border-color: rgba(245, 237, 216, 0.2); }
.as-scheme-sage .search-field input { color: #f5edd8; }
.as-scheme-sage .hints a, .as-scheme-sage .hints .label { color: rgba(245, 237, 216, 0.7); }
.as-scheme-sage .topic-strip .topic-chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(245, 237, 216, 0.2); color: rgba(245, 237, 216, 0.85); }
.as-scheme-sage .today-card, .as-scheme-sage .entry, .as-scheme-sage .compact-card,
.as-scheme-sage .practice-card, .as-scheme-sage .story-feature, .as-scheme-sage .topic-card {
  background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(245, 237, 216, 0.14) !important;
}
.as-scheme-sage .today-card h3, .as-scheme-sage .entry h3, .as-scheme-sage .compact-card h4,
.as-scheme-sage .practice-card h3, .as-scheme-sage .story-feature h3,
.as-scheme-sage .topic-card .english-name, .as-scheme-sage .as-card-title { color: #f5edd8 !important; }
.as-scheme-sage .dek, .as-scheme-sage .summary, .as-scheme-sage .opener, .as-scheme-sage .meaning,
.as-scheme-sage .urdu-col, .as-scheme-sage .urdu-block, .as-scheme-sage .urdu-echo { color: rgba(245, 237, 216, 0.72) !important; }
.as-scheme-sage .arabic-hero, .as-scheme-sage .topic-strip .arabic, .as-scheme-sage .read,
.as-scheme-sage .see-all, .as-scheme-sage .as-card-more, .as-scheme-sage .type-pill { color: #d9b44a; }
.as-scheme-sage .ornament .glyph { color: #d9b44a; }
.as-scheme-sage .hikmah-spot { background: rgba(0, 0, 0, 0.18) !important; }
.as-scheme-sage .foot-band, .as-scheme-sage .site-foot { background: transparent; border-top-color: rgba(245, 237, 216, 0.12); }
.as-scheme-sage .foot-brand, .as-scheme-sage .foot-brand em, .as-scheme-sage .links a { color: rgba(245, 237, 216, 0.82); }
/* keep the Ask CTA bright for contrast against the sage page */
.as-scheme-sage .ask-invite { background: #fffcf8; }
.as-scheme-sage .ask-invite-headline, .as-scheme-sage .ask-invite-headline em { color: #1a1816; }
.as-scheme-sage .ask-invite-lede { color: rgba(26, 24, 22, 0.7); }
.as-scheme-sage .masthead-band::after { opacity: 0.35; }

/* ============================================================
   Phase 7 — topic header + search page + empty states
   ============================================================ */
.as-topic-head { max-width: 1080px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 2rem); text-align: center; }
.as-topic-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #b8963e; margin: 0 0 1rem; }
.as-topic-arabic { font-family: var(--font-naskh); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.2; color: #1a1816; margin: 0 0 0.75rem; }
.as-topic-name { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.02em; color: #1a1816; margin: 0 0 0.5rem; }
.as-topic-meaning { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: rgba(26, 24, 22, 0.6); margin: 0 0 0.6rem; }
.as-topic-count { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(26, 24, 22, 0.45); margin: 0; }
.as-topic-orn { color: #b8963e; opacity: 0.6; margin-top: 1.5rem; }

.as-search-head { max-width: 720px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 2rem); text-align: center; }
.as-search-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #b8963e; margin: 0 0 1.25rem; }
.as-search-form { display: flex; align-items: center; gap: 0.5rem; background: #fffcf8; border: 0.5px solid rgba(26, 24, 22, 0.16); border-radius: 999px; padding: 0.4rem 0.5rem 0.4rem 1rem; }
.as-search-form svg { width: 18px; height: 18px; color: rgba(26, 24, 22, 0.4); flex: 0 0 auto; }
.as-search-form input { flex: 1; border: none; background: transparent; font-family: var(--font-serif); font-size: 1.05rem; color: #1a1816; outline: none; padding: 0.4rem 0; }
.as-search-form button { flex: 0 0 auto; background: #2d4f42; color: #f5edd8; border: none; border-radius: 999px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; padding: 0.6rem 1.15rem; cursor: pointer; transition: background 0.15s; }
.as-search-form button:hover { background: #3d6b5a; }
.as-search-meta { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.03em; color: rgba(26, 24, 22, 0.55); margin: 1rem 0 0; }

.as-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; }
.as-empty-orn { color: #b8963e; opacity: 0.6; font-size: 1.4rem; margin-bottom: 1.25rem; }
.as-empty-lead { font-family: var(--font-serif); font-size: 1.4rem; color: #1a1816; margin: 0 0 0.5rem; }
.as-empty-sub { font-family: var(--font-serif); color: rgba(26, 24, 22, 0.6); margin: 0; }
.as-empty-sub a { color: #b8963e; }

/* ============================================================
   TYPE SYSTEM (loads last — authoritative)
   Display → Newsreader · Body → Source Serif 4 · Arabic → Amiri
   Urdu → Noto Nastaliq Urdu · Micro-labels → Inter
   ============================================================ */

:root {
  /* Explicit type scale — used by the Q&A/topic templates built on top of
     this system. Existing ported components keep their tuned clamps. */
  --step-0:  0.78rem;   /* micro / small-caps labels        */
  --step-1:  1.0625rem; /* body                             */
  --step-2:  1.35rem;   /* sub-head (h3)                    */
  --step-3:  clamp(1.6rem, 3vw, 2.1rem);   /* section / h2  */
  --step-4:  clamp(2rem, 4.4vw, 2.85rem);  /* entry / hero  */
}

/* --- Display face: headings, hero, section labels, pull-quotes --- */
.hero h1.lede.lede .lede-a,
.hero h1.lede.lede .lede-em,
.hero h1.lede.lede em,
.hero .hero-kicker,
.ed-read-column .ed-h1,
.entry-article h1,
.topic-page .topic-head h1,
.section-title h2,
.section-title h2 em,
.brand,
.brand em,
.ed-read-column .ed-body h2,
.ed-read-column .ed-body h3,
.hikmah-spot blockquote,
.hikmah-card .quote,
.ed-read-column blockquote.ed-hikmah {
  font-family: var(--font-display), "Iowan Old Style", Georgia, serif;
}

/* Drop cap on the display face (already colour/size-tuned above). */
.ed-body--lead > p:first-of-type::first-letter,
body.page .ed-read-column .ed-body > p:first-of-type::first-letter {
  font-family: var(--font-display), Georgia, serif;
}

/* --- Arabic face: ayat, dhikr — distinct from Urdu Nastaliq --- */
[lang='ar'],
.arabic,
.ed-read-column .ed-source-quote-text,
.practice-card .arabic-hero,
.topic-card .arabic-hero,
.arabic-hero {
  font-family: var(--font-arabic), "Noto Naskh Arabic", serif;
}

/* --- Urdu: a touch more leading for Nastaliq comfort --- */
[lang='ur'],
.urdu {
  line-height: 2.2;
}

/* ============================================================
   SACRED-TEXT HOUSE STYLE (ayah / hadith / honorific / translit)
   ============================================================ */

/* Ayah + hadith reuse .ed-source-quote; when placed inline in an answer body
   give them breathing room consistent with the pulled source quotes. */
.ed-read-column .ed-body .ed-source-quote { margin: 2.4rem auto; }

/* Translation line: quiet italic, always the body serif. */
.ed-source-quote-translation { font-family: var(--font-serif); font-style: italic; }

/* Honorifics: Arabic glyphs on the Amiri face, sized to sit with Latin text
   without disturbing the line. Never italic, never colour-accented. */
.honorific {
  font-family: var(--font-arabic), "Noto Naskh Arabic", serif;
  font-style: normal;
  font-size: 1.05em;
  line-height: 1;
  white-space: nowrap;
  padding: 0 0.06em;
}

/* Transliterated technical terms: italic on the Latin face (first use only). */
.translit { font-style: italic; }

/* Entry metadata — quiet archival line under the question (topic · date). */
.ed-read-column .ed-meta {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  color: rgba(26, 24, 22, 0.5);
  margin: 0.5rem 0 0;
}
.ed-read-column .ed-meta a { color: rgba(26, 24, 22, 0.6); text-decoration: none; border-bottom: 1px solid rgba(26, 24, 22, 0.15); }
.ed-read-column .ed-meta a:hover { color: #b8963e; border-color: #b8963e; }
.ed-read-column .ed-meta span { padding: 0 0.35em; opacity: 0.6; }

/* ============================================================
   ASK-A-QUESTION FORM (/ask)
   ============================================================ */
.ask-form-wrap { margin-top: 2.5rem; }
.ask-page-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ask-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ask-field-label { font-family: var(--font-sans); font-size: var(--step-0); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(26, 24, 22, 0.55); }
.ask-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.ask-page-form textarea,
.ask-page-form input[type="text"],
.ask-page-form input[type="email"] {
  font-family: var(--font-serif); font-size: 1.02rem; color: #1a1816;
  background: #fffdfa; border: 1px solid rgba(26, 24, 22, 0.16); border-radius: 4px;
  padding: 0.7rem 0.85rem; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
.ask-page-form textarea { resize: vertical; line-height: 1.6; }
.ask-page-form textarea:focus,
.ask-page-form input:focus { outline: none; border-color: #b8963e; box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.14); }
.ask-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .ask-field-row { grid-template-columns: 1fr; } }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-page-submit {
  align-self: flex-start; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em; color: #f5edd8; background: #2d4f42; border: 0; border-radius: 999px;
  padding: 0.75rem 1.6rem; cursor: pointer; transition: background 0.15s;
}
.ask-page-submit:hover, .ask-page-submit:focus-visible { background: #3d6b5a; }
.ask-page-fineprint { font-family: var(--font-sans); font-size: var(--step-0); color: rgba(26, 24, 22, 0.5); margin: 0; }
.ask-form-notice { font-family: var(--font-sans); font-size: 0.9rem; color: #8a5a2b; background: rgba(184, 150, 62, 0.1); border-left: 2px solid #b8963e; padding: 0.6rem 0.85rem; border-radius: 0 4px 4px 0; }
.ask-confirm { text-align: center; padding: 2rem 0; }
.ask-confirm-orn { color: #b8963e; font-size: 1.4rem; opacity: 0.7; margin-bottom: 1rem; }
.ask-confirm-lead { font-family: var(--font-display); font-size: 1.5rem; color: #1a1816; margin: 0 0 0.6rem; }
.ask-confirm-sub { font-family: var(--font-serif); color: rgba(26, 24, 22, 0.72); line-height: 1.7; max-width: 46ch; margin: 0 auto; }
.ask-confirm-sub a { color: #b8963e; text-decoration: none; border-bottom: 1px solid rgba(184, 150, 62, 0.4); }

/* ============================================================
   HOMEPAGE SECTION REFINEMENTS (Pass 5)
   ============================================================ */

/* Topics: no orphan. When there are few rich topics, lay them as one even
   band (exact columns = count); auto-fill only kicks in for larger sets. */
.topic-explorer[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.topic-explorer[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.topic-explorer[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.topic-explorer[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.topic-explorer[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .topic-explorer[data-count] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .topic-explorer[data-count] { grid-template-columns: 1fr; } }

/* Badges: small-caps text labels, not filled pills (keep the type colour as
   ink). One place for pills on the page — the hero suggestion chips. */
.type-pill[data-type] {
  background: transparent;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
}

/* Hikmah: flat deep green, no gradient (gradient-on-card is a tell). */
.hikmah-row-grid .hikmah-card,
.as-scheme-original .hikmah-row-grid .hikmah-card { background: #2d4f42; }

/* Ask form on the homepage invitation — constrain + left-align within the centred block. */
.ask-invite-form-wrap { max-width: 560px; margin: 1.6rem auto 0.4rem; text-align: left; }
.ask-invite .ask-confirm { text-align: center; }
.ask-field-hint { display: block; margin-top: 0.4rem; font-family: var(--font-sans); font-size: var(--step-0); color: rgba(26, 24, 22, 0.5); }
.ask-field-hint [lang="ur"] { font-family: var(--font-nastaliq); font-size: 1.05em; }

/* ============================================================
   CONTACT FORM 7 — reverent styling for the ask form
   ============================================================ */
.asksufi-cf7 br { display: none; }                 /* kill CF7 auto <br> */
.asksufi-cf7 .asksufi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.wpcf7 form.wpcf7-form, .asksufi-cf7 { display: flex; flex-direction: column; gap: 1.15rem; }
.asksufi-cf7 .ask-field { display: flex; flex-direction: column; gap: 0.4rem; }
.asksufi-cf7 .wpcf7-form-control-wrap { display: block; }
.asksufi-cf7 textarea,
.asksufi-cf7 input[type="text"],
.asksufi-cf7 input[type="email"] {
  font-family: var(--font-serif); font-size: 1.02rem; color: #1a1816;
  background: #fffdfa; border: 1px solid rgba(26, 24, 22, 0.16); border-radius: 4px;
  padding: 0.7rem 0.85rem; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
.asksufi-cf7 textarea { resize: vertical; line-height: 1.6; unicode-bidi: plaintext; } /* auto LTR/RTL */
.asksufi-cf7 textarea:focus,
.asksufi-cf7 input:focus { outline: none; border-color: #b8963e; box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.14); }
.asksufi-cf7 .ask-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .asksufi-cf7 .ask-field-row { grid-template-columns: 1fr; } }
.asksufi-cf7 input[type="submit"].ask-page-submit {
  align-self: flex-start; width: auto; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em; color: #f5edd8; background: #2d4f42; border: 0; border-radius: 999px;
  padding: 0.75rem 1.6rem; cursor: pointer; transition: background 0.15s;
}
.asksufi-cf7 input[type="submit"].ask-page-submit:hover { background: #3d6b5a; }
/* CF7 system messages + inline validation, in the site's register */
.wpcf7 .wpcf7-response-output {
  font-family: var(--font-sans); font-size: 0.9rem; margin: 1rem 0 0; padding: 0.7rem 0.95rem;
  border: 0; border-left: 2px solid #b8963e; border-radius: 0 4px 4px 0;
  background: rgba(184, 150, 62, 0.08); color: #6b5a2b;
}
.wpcf7 .wpcf7-not-valid-tip { font-family: var(--font-sans); font-size: 0.8rem; color: #a3402b; margin-top: 0.3rem; }
.asksufi-cf7 input[aria-invalid="true"], .asksufi-cf7 textarea[aria-invalid="true"] { border-color: #c47a6b; }

/* ============================================================
   HOMEPAGE — sleeker rhythm: more air, lighter/smaller type.
   Launch homepage (Q&A + Hikmah). Hero is untouched.
   ============================================================ */

/* Vertical rhythm — room to breathe between and within sections. */
.asksufi-front main > section { margin-top: clamp(3.75rem, 6vw, 6rem); }
.asksufi-front main > section:first-child { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.asksufi-front main > .ask-invite { margin-top: clamp(4rem, 7vw, 7rem); }
.asksufi-front .topic-strip { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.asksufi-front .section-title { margin-bottom: clamp(1.75rem, 2.6vw, 2.25rem); }

/* Section labels — smaller, calmer (Newsreader kept). */
.asksufi-front .section-title h2 {
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: -0.008em;
  font-variation-settings: normal;
}
.asksufi-front .section-title .see-all {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-muted);
}
.asksufi-front .section-title .see-all:hover { color: var(--accent); }

/* Q&A rows — more air, lighter titles. */
.asksufi-front .entries a.entry { padding-top: 1.9rem; padding-bottom: 1.9rem; }
.asksufi-front .entries h3 {
  font-weight: 400;
  font-size: clamp(1.12rem, 1.9vw, 1.32rem);
  line-height: 1.34; letter-spacing: -0.005em; font-variation-settings: normal;
}
.asksufi-front .entries .summary { font-size: 0.95rem; line-height: 1.62; color: var(--ink-muted); }
.asksufi-front .entries .urdu-col { font-size: 0.98rem; line-height: 2.1; }

/* Hikmah — all three in one row, quieter type. */
@media (min-width: 760px) {
  .asksufi-front .hikmah-row-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
}
@media (max-width: 759px) {
  .asksufi-front .hikmah-row-grid { grid-template-columns: 1fr; }
}
.asksufi-front .hikmah-card { min-height: 0; padding: 1.65rem 1.45rem; }
.asksufi-front .hikmah-card .quote { font-size: 1.08rem; line-height: 1.5; font-variation-settings: normal; }

/* ============================================================
   LISTING / ARCHIVE PAGES (Entries, Hikmah, Stories, Topics,
   Search, Topic archives) — the home page's sleeker type, plus
   real breathing room above the title and before the footer.
   ============================================================ */

/* Sleeker type in every listing context (matches the home page). */
.section-title h2 { font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -0.008em; font-variation-settings: normal; }
.section-title .see-all { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-muted); }
.section-title .see-all:hover { color: var(--accent); }
.entries a.entry { padding-top: 1.9rem; padding-bottom: 1.9rem; }
.entries h3 { font-weight: 400; font-size: clamp(1.12rem, 1.9vw, 1.32rem); line-height: 1.34; letter-spacing: -0.005em; font-variation-settings: normal; }
.entries .summary { font-size: 0.95rem; line-height: 1.62; color: var(--ink-muted); }
.entries .urdu-col { font-size: 0.98rem; line-height: 2.1; }

/* The GP-templated pages get no wrapper padding by default: the title jams
   against the nav and the pagination butts the footer. Give them air. */
body:not(.asksufi-front) .page > main { padding-top: clamp(2.75rem, 5vw, 4rem); padding-bottom: clamp(4rem, 7vw, 6rem); }

/* Pagination settles above the footer, not against it. */
.nav-links { margin-top: clamp(3rem, 5vw, 4rem); margin-bottom: 0; }

/* ============================================================
   Topic strip — ~30% smaller so all chips fit the frame.
   ============================================================ */
.asksufi-front .topic-strip { gap: 0.4rem; padding-top: 0.85rem; }
.asksufi-front .topic-chip { font-size: 0.74rem; padding: 0.48rem 0.82rem; gap: 0.4rem; }
.asksufi-front .topic-chip .arabic { font-size: 0.82rem; }
.asksufi-front .topic-chip .count { font-size: 0.66rem; padding: 0.08rem 0.38rem; }

/* Q&A rows — a subtle but present hairline between them, none after the last. */
.entries li { border-bottom: 1px solid rgba(26, 24, 22, 0.09); }
.entries li:last-child { border-bottom: none; }

/* ============================================================
   BLOG POSTS (single.php) — editorial article, distinct from
   the Q&A teachings, sharing the reverent reading column.
   ============================================================ */
.post-single { padding-bottom: 1rem; }
.post-single .post-hero { margin: 0.5rem 0 2.25rem; }
.post-single .post-hero img { width: 100%; height: auto; border-radius: 4px; }
.post-single .post-body h2 {
  text-align: left; font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem); font-weight: 500; line-height: 1.25;
  margin: 2.4rem 0 0.85rem; color: #1a1816;
}
.post-single .post-body h3 { text-align: left; font-family: var(--font-display), Georgia, serif; font-size: 1.25rem; font-weight: 500; margin: 1.9rem 0 0.6rem; }
.post-single .post-body blockquote {
  margin: 2rem 0; padding: 0.4rem 0 0.4rem 1.5rem; border-left: 2px solid #b8963e;
  font-family: var(--font-display), Georgia, serif; font-style: italic; font-size: 1.2rem;
  line-height: 1.5; color: rgba(26, 24, 22, 0.78);
}
.post-single .post-body ul, .post-single .post-body ol { margin: 1.25rem 0; padding-left: 1.4rem; list-style: revert; }
.post-single .post-body li { margin: 0.4rem 0; line-height: 1.7; }
.post-single .post-body a { color: #b8963e; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Topic strip — centered, +10% from the shrunk size.
   ============================================================ */
.asksufi-front .topic-strip { justify-content: center; }
.asksufi-front .topic-chip { font-size: 0.81rem; padding: 0.46rem 0.8rem; gap: 0.4rem; }
.asksufi-front .topic-chip .arabic { font-size: 0.9rem; }
.asksufi-front .topic-chip .count { font-size: 0.72rem; }

/* Hero "Try" suggestions (now real questions) wrap and centre. */
.asksufi-front .hints { flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Hero pattern — larger, softer radial fade so the geometric
   pattern reads as a translucent wash, visible only near the edges.
   ============================================================ */
.asksufi-front .masthead-band::after {
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 96% 110% at 50% 42%, transparent 20%, #000 100%);
          mask-image: radial-gradient(ellipse 96% 110% at 50% 42%, transparent 20%, #000 100%);
}

/* ============================================================
   Topic cards — dial the type down (homepage + /topics share these).
   Was: Arabic 2.6rem, English name 1.5rem/600. Overly large + bold.
   ============================================================ */
.topic-card .arabic-hero { font-size: 2.2rem; margin-bottom: 0.9rem; }
.topic-card .english-name {
  font-size: 1.22rem; font-weight: 500; font-variation-settings: normal; letter-spacing: -0.01em;
}
.topic-card .meaning { font-size: 0.94rem; }
.topic-card .count-row { font-size: 0.7rem; font-weight: 500; }
.topic-card { min-height: 8rem; }