/* ==============================================================
   Urdu Coach Pro — Nastaliq Layer (v1.8.0)
   Loaded LAST. Guarantees:
   1. Nastaliq renders for every visitor (font is bundled — no install needed)
   2. Line-spacing is tuned to Nastaliq's tall vertical metrics
   3. Arabic-script joining is never broken (no letter-spacing, no faux italic)
   Fonts: Noto Nastaliq Urdu & Gulzar — both SIL OFL 1.1 (see assets/fonts/)
   ============================================================== */

/* ---------- 1. Bundled fonts (self-hosted, no Google request) ---------- */
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('../fonts/NotoNastaliqUrdu-VF.woff2') format('woff2');
    font-weight: 400 700;          /* variable font: real weights, no faux bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gulzar';
    src: url('../fonts/Gulzar-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. Defaults (typography.php overrides these from Customizer) ---------- */
:root,
.editor-styles-wrapper {
    --ucp-font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
    --ucp-line-height: 2.1;          /* running text   */
    --ucp-line-height-ui: 1.9;       /* menus, meta, buttons, short labels */
    --ucp-line-height-heading: 1.8;  /* headlines (wrap to 2-3 lines) */
}

/* ---------- 3. Script-safe text settings ---------- */
html {
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-variant-ligatures: normal;
    font-synthesis-style: none;      /* never fake italic */
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--ucp-font-family);
    line-height: var(--ucp-line-height);
    word-spacing: 0.04em;            /* Nastaliq words sit tight; small air helps */
    hyphens: none;
    overflow-wrap: break-word;
}
/* Letter-spacing breaks cursive joins — force to zero everywhere */
body, body *, body *::before, body *::after, body ::placeholder {
    letter-spacing: 0 !important;
}
/* Italic / uppercase have no meaning in Urdu; faux-slant ruins the calligraphy */
em, i, cite, address, dfn, var, blockquote, .np-tagline {
    font-style: normal;
}
em, cite { font-weight: 600; }
* { text-transform: none !important; }
.screen-reader-text { text-transform: none !important; }

/* ---------- 4. Line-height by role ---------- */
/* running text */
.entry-content,
.entry-content p,
.entry-content li,
.entry-summary,
.post-card-excerpt,
.cat-card-excerpt,
.comment-content,
.widget p,
.widget li,
blockquote,
textarea {
    line-height: var(--ucp-line-height);
}
/* UI text */
.primary-menu-list a,
.entry-meta,
.entry-meta *,
.slider-meta,
.top-date,
.breadcrumb,
.breadcrumbs,
button,
input,
select,
.button,
.btn,
.widget-title {
    line-height: var(--ucp-line-height-ui);
}
/* headlines — any theme class that ends in "-title", plus real headings */
h1, h2, h3, h4, h5, h6,
body [class*="-title"],
body [class$="title"],
.site-title,
.entry-title,
.section-heading {
    line-height: var(--ucp-line-height-heading);
}
/* headlines wrap onto 2–3 lines; give them room to breathe */
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5em; text-wrap: balance; }
.entry-content p { margin: 0 0 1.1em; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 1.4em; }

/* ---------- 5. Clamped (…) titles & excerpts: never clip the strokes ---------- */
.hero-card-small .hero-card-title,
.post-card-title,
.post-card-title a,
.cat-card-small .cat-card-title,
.numbered-title,
.circular-title,
.video-card-title-small,
.gallery-title,
.social-feed-title,
.social-yt-title,
.ucp-latest-title {
    line-height: 1.85 !important;
    padding-top: 0.25em;             /* top room only — bottom padding would leak the next line */
    margin-top: -0.25em;
}
.post-card-excerpt,
.cat-card-excerpt,
.cat-card-feature .cat-card-excerpt {
    line-height: 2 !important;
}

/* ---------- 6. Display / branding text ---------- */
.site-title,
.np-logo-text,
.logo-text {
    line-height: 1.7 !important;
    font-weight: 700;
}

/* ---------- 7. Minimum comfortable size (Nastaliq collapses below ~14px) ---------- */
small, .small, figcaption, .wp-caption-text, .entry-meta, .comment-meta, .widget_tag_cloud a {
    font-size: max(0.875rem, 14px);
}
@media (max-width: 480px) {
    body { font-size: 16px; }       /* was 15px */
}

/* ---------- 8. Numbers & mixed Latin text ---------- */
.ucp-num { direction: ltr; unicode-bidi: isolate; display: inline-block; line-height: 1.4; }
code, pre, kbd, samp { font-family: 'Courier New', monospace; direction: ltr; text-align: left; line-height: 1.5; }

/* ---------- 9. Fonts that only ship Regular (no faux bold) ---------- */
.ucp-font-single-weight, .ucp-font-single-weight * { font-synthesis: none; }

/* ---------- 10. Form controls inherit the Urdu stack ---------- */
button, input, select, textarea { font-family: var(--ucp-font-family); }