/*
 * KPT Production — Content Typography System (FINAL)
 *
 * ADDITIVE MODULE — pure visual layer for rich HTML content areas.
 * Loaded automatically only on views that render rich `.kpt-article-content`
 * (singular post/news/video/service/team/page) and on Post/Page editor
 * screens.
 *
 * RULE: this file NEVER targets raw `body`, `h1-h6`, `p`, `button`,
 * `table`, `nav`, `header`, `footer` selectors. All rules are namespaced
 * inside `.kpt-rich-content` and `.kpt-article-content`, plus the
 * explicit `.kpt-font-*` and `.kpt-title-font-*` utility classes —
 * so existing UI typography remains exactly as-is.
 *
 * FINAL TYPOGRAPHY: exactly ONE custom Urdu font is shipped —
 *   1. Alvi Nastaleeq Regular   (assets/fonts/Alvi-Nastaleeq-Regular.ttf)
 * All previously-offered decorative custom fonts were removed and are
 * NOT registered. English / Roman Urdu content keeps the website's
 * existing simple font. Automatic script detection (content-render.php)
 * applies the Urdu font + RTL — no manual selection needed.
 *
 * Colors used here come from the KPT Royal Blue / Purple system
 * (no gold anywhere). Fonts load locally (no CDN); `font-display: swap`
 * keeps first paint fast and never blocks render.
 */

/* ============================================================
   1. FONT-FACE — the ONLY custom Urdu font (local, no CDN).
   Only the Regular weight exists (TTF as supplied), so we register
   exactly ONE face at weight 400.
   ============================================================ */
@font-face {
    font-family: 'KPT Alvi Nastaleeq';
    src: url('../fonts/Alvi-Nastaleeq-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. UTILITY CLASSES — the single Urdu font identifier an admin
   can still select per block (Default / Alvi). Whitelisted in PHP.
   ============================================================ */
.kpt-font-alvi,
.has-kpt-font-alvi {
    font-family: 'KPT Alvi Nastaleeq', 'Alvi Nastaleeq', 'Noto Nastaliq Urdu', serif;
    line-height: var(--kpt-content-leading, 2.0);
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Title variant — same Urdu family at heading weight.
   Authoring: editor adds .kpt-title-font-alvi to h1/h2/h3 in content. */
.kpt-title-font-alvi {
    font-family: 'KPT Alvi Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-weight: 400;
    line-height: var(--kpt-title-leading, 1.8);
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Text direction utilities — explicit auto / ltr / rtl on blocks. */
.kpt-direction-auto { direction: auto; unicode-bidi: plaintext; }
.kpt-direction-ltr  { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.kpt-direction-rtl  { direction: rtl; text-align: right; unicode-bidi: plaintext; }

/* ============================================================
   3. RICH-CONTENT WRAPPER — premium KPT-branded typography
   applied ONLY inside `.kpt-rich-content` and the existing
   `.kpt-article-content`. Existing rules in `.kpt-article-content`
   keep working; this layer adds the new font + spacing system on
   top. English stays on the website's normal font — no override.
   ============================================================ */
.kpt-rich-content,
.kpt-article-content {
    --kpt-content-leading: 1.7;
    --kpt-title-leading:   1.3;
    --kpt-content-color:   var(--kpt-text-secondary);
    color: var(--kpt-content-color);
}

/* Headings in content — apply admin-selected title font on top
   of any per-element class the editor added. */
.kpt-rich-content :is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--kpt-font-primary);
    color: var(--kpt-text-primary);
    font-weight: var(--kpt-weight-bold);
    line-height: var(--kpt-title-leading);
    overflow-wrap: break-word;
    word-break: break-word;
    margin-top: var(--kpt-space-xl);
    margin-bottom: var(--kpt-space-sm);
}
.kpt-rich-content :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }

.kpt-rich-content h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.kpt-rich-content h2 { font-size: clamp(1.4rem, 3.8vw, 2.0rem); }
.kpt-rich-content h3 { font-size: clamp(1.2rem, 3.2vw, 1.7rem); }
.kpt-rich-content h4 { font-size: clamp(1.05rem, 2.8vw, 1.45rem); }
.kpt-rich-content h5 { font-size: clamp(1.0rem, 2.4vw, 1.25rem); }
.kpt-rich-content h6 { font-size: clamp(0.95rem, 2.2vw, 1.1rem);  }

/* Per-element Urdu font class wins over the global default. */
.kpt-rich-content .kpt-font-alvi :is(h1,h2,h3,h4,h5,h6),
.kpt-rich-content .kpt-title-font-alvi,
.kpt-article-content :is(.kpt-font-alvi, .has-kpt-font-alvi) :is(h1,h2,h3,h4,h5,h6) {
    font-family: 'KPT Alvi Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    line-height: var(--kpt-title-leading) !important;
    direction: rtl; text-align: right; unicode-bidi: plaintext;
}

/* ── Paragraphs ──────────────────────────────────────────── */
.kpt-rich-content p,
.kpt-article-content p {
    font-size: var(--kpt-text-md);
    line-height: var(--kpt-content-leading);
    color: var(--kpt-content-color);
    margin: 0 0 var(--kpt-space-md);
    max-width: 70ch;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    unicode-bidi: plaintext;
}
/* When a paragraph carries the Urdu class, justify looks broken in
   Nastaleeq — switch to natural flowing text instead. */
.kpt-rich-content p[class*="kpt-font-alvi"],
.kpt-rich-content p.has-kpt-font-alvi {
    text-align: right;
    hyphens: none;
}

/* ── MIXED SCRIPT (Urdu + English in one block) ─────────────
   unicode-bidi: plaintext renders each inline run with its own
   natural direction: the Urdu portion shapes RTL correctly while
   English words/Latin fragments stay readable LTR. */
.kpt-rich-content,
.kpt-article-content { unicode-bidi: plaintext; }

/* ── Lists ───────────────────────────────────────────────── */
.kpt-rich-content ul,
.kpt-rich-content ol,
.kpt-article-content ul,
.kpt-article-content ol {
    margin: 0 0 var(--kpt-space-md);
    padding-left: var(--kpt-space-lg);
    padding-right: 0;
    list-style: revert;
    color: var(--kpt-content-color);
}
.kpt-rich-content li,
.kpt-article-content li { margin: 0 0 var(--kpt-space-2xs); }

/* ── Bold / Italic / Underline / Mark ────────────────────── */
.kpt-rich-content strong,
.kpt-article-content strong { font-weight: var(--kpt-weight-bold); color: var(--kpt-text-primary); }
.kpt-rich-content em,
.kpt-article-content em     { font-style: italic; }
.kpt-rich-content u,
.kpt-article-content u      { text-decoration: underline; text-underline-offset: 2px; }
.kpt-rich-content mark,
.kpt-article-content mark   {
    background: rgba(124,93,224,0.22);
    color: var(--kpt-text-primary);
    padding: 0 4px;
    border-radius: var(--kpt-radius-xs);
}

/* ── Links ───────────────────────────────────────────────── */
.kpt-rich-content a,
.kpt-article-content a {
    color: var(--kpt-text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--kpt-transition-fast);
    overflow-wrap: anywhere;
}
.kpt-rich-content a:hover,
.kpt-article-content a:hover { color: var(--kpt-purple-light); }

/* ── Quotes ──────────────────────────────────────────────── */
.kpt-rich-content blockquote,
.kpt-rich-content .wp-block-quote,
.kpt-rich-content .wp-block-pullquote {
    border-left: 3px solid var(--kpt-purple-light);
    padding: var(--kpt-space-md) var(--kpt-space-md) var(--kpt-space-md) var(--kpt-space-lg);
    margin: var(--kpt-space-lg) 0;
    font-style: italic;
    color: var(--kpt-text-primary);
    background: linear-gradient(90deg, rgba(74,47,170,0.10), transparent 60%);
    border-radius: 0 var(--kpt-radius-md) var(--kpt-radius-md) 0;
}
.kpt-rich-content blockquote p,
.kpt-rich-content .wp-block-quote p { font-size: clamp(1.0rem, 2.6vw, 1.2rem); line-height: 1.6; }
.kpt-rich-content blockquote cite,
.kpt-rich-content .wp-block-quote cite {
    display: block;
    margin-top: var(--kpt-space-xs);
    font-style: normal;
    font-size: var(--kpt-text-sm);
    color: var(--kpt-text-muted);
}
.kpt-rich-content .wp-block-pullquote {
    border-top: 1px solid var(--kpt-border-mid);
    border-bottom: 1px solid var(--kpt-border-mid);
    border-left: none;
    padding: var(--kpt-space-xl) var(--kpt-space-md);
    text-align: center;
    background: none;
}
.kpt-rich-content .wp-block-pullquote p {
    font-family: var(--kpt-font-display);
    font-size: clamp(1.2rem, 3.4vw, 1.6rem);
    color: var(--kpt-text-primary);
}

/* ── Inline code + pre ───────────────────────────────────── */
.kpt-rich-content code {
    background: var(--kpt-surface);
    padding: 2px 6px;
    border-radius: var(--kpt-radius-xs);
    font-family: var(--kpt-font-mono);
    font-size: 0.9em;
    color: var(--kpt-purple-light);
}
.kpt-rich-content pre {
    background: var(--kpt-surface);
    padding: var(--kpt-space-md);
    border-radius: var(--kpt-radius-sm);
    overflow-x: auto;
    margin-block: var(--kpt-space-lg);
    -webkit-overflow-scrolling: touch;
}
.kpt-rich-content pre code { background: none; padding: 0; color: var(--kpt-text-primary); }

/* ── Tables ──────────────────────────────────────────────── */
.kpt-rich-content .wp-block-table,
.kpt-rich-content table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; margin-block: var(--kpt-space-lg); }
.kpt-rich-content table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: var(--kpt-text-sm); }
.kpt-rich-content th,
.kpt-rich-content td { padding: var(--kpt-space-xs) var(--kpt-space-sm); border: 1px solid var(--kpt-border-subtle); text-align: left; vertical-align: top; }
.kpt-rich-content th { background: var(--kpt-surface); font-weight: var(--kpt-weight-semibold); color: var(--kpt-text-primary); }
.kpt-rich-content td { color: var(--kpt-content-color); }

/* ── Embeds / images / figures ───────────────────────────── */
.kpt-rich-content img,
.kpt-article-content img { max-width: 100%; height: auto; border-radius: var(--kpt-radius-md); display: block; }
.kpt-rich-content figure,
.kpt-article-content figure { margin: var(--kpt-space-md) 0; }
.kpt-rich-content figure figcaption,
.kpt-article-content figure figcaption { font-size: var(--kpt-text-xs); color: var(--kpt-text-muted); text-align: center; margin-top: var(--kpt-space-xs); }
.kpt-rich-content .wp-block-embed,
.kpt-rich-content .wp-block-video { margin-block: var(--kpt-space-lg); }
.kpt-rich-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.kpt-rich-content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    position: relative; width: 100%; aspect-ratio: 16/9; height: 0; padding-bottom: 56.25%;
    overflow: hidden; border-radius: var(--kpt-radius-md);
}
.kpt-rich-content .wp-block-embed iframe,
.kpt-rich-content .wp-block-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: var(--kpt-radius-md); }
.kpt-rich-content .wp-block-video video { position: static; max-width: 100%; }

/* ── Separator / hr ──────────────────────────────────────── */
.kpt-rich-content hr,
.kpt-rich-content .wp-block-separator { border: none; border-top: 1px solid var(--kpt-border-subtle); margin-block: var(--kpt-space-xl); }

/* ── Buttons core block ──────────────────────────────────── */
.kpt-rich-content .wp-block-button__link {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px var(--kpt-space-lg);
    background: var(--kpt-gradient-brand);
    color: var(--kpt-text-primary);
    border-radius: var(--kpt-radius-sm);
    font-weight: var(--kpt-weight-semibold);
    font-size: var(--kpt-text-sm);
    text-decoration: none;
    border: 1px solid rgba(124,93,224,0.4);
    transition: filter var(--kpt-transition-fast);
}
.kpt-rich-content .wp-block-button__link:hover { filter: brightness(1.12); color: #fff; }
.kpt-rich-content .is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--kpt-border-mid); color: var(--kpt-text-primary); }

/* ============================================================
   4. RESPONSIVE — Nastaleeq needs more vertical room on small
   screens; bump down font-size proportionally on narrow widths
   while keeping line-height generous. Prevents overlapping Urdu
   lines, clipped glyphs and card overflow at 320-640px.
   ============================================================ */
@media (max-width: 640px) {
    .kpt-rich-content :is(h1,h2,h3,h4,h5,h6) { line-height: 1.28; }
    .kpt-rich-content p, .kpt-article-content p { font-size: 1rem; line-height: 1.85; }
    .kpt-rich-content .kpt-font-alvi :is(h1,h2,h3,h4,h5,h6),
    .kpt-rich-content .kpt-title-font-alvi { line-height: 2.0 !important; }
    .kpt-rich-content .kpt-font-alvi :is(p, li) { line-height: 2.3; }
}

/* Reduced motion already handled in style.css */


/* ============================================================
   URDU SAFEGUARDS — Alvi Nastaleeq Regular (existing bundled asset).
   Additive only. English content is NOT affected: these selectors
   require an explicit Urdu signal (:lang(ur), or the class the
   existing script-detection layer already writes). Loaded from the
   font file already shipped in assets/fonts/ — nothing downloaded.
   ============================================================ */
.kpt-article-content :lang(ur),
.kpt-rich-content :lang(ur),
.kpt-article-content .kpt-font-urdu,
.kpt-rich-content .kpt-font-urdu {
    font-family: 'KPT Alvi Nastaleeq', 'Alvi Nastaleeq', 'Alvi Nastaleeq Regular',
                 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    line-height: 2;
    direction: rtl;
    text-align: right;
    font-size: 1.05em;
}
/* Nastaleeq needs more leading than Latin — never render it tiny. */
.kpt-article-content p:lang(ur),
.kpt-rich-content p:lang(ur) { margin-bottom: 1.1em; }