/**
 * PunjabiTime News — Phase A: Gurmukhi typography override.
 *
 * ADDITIVE & SAFE. This file is enqueued AFTER main.css and only adjusts
 * typography (font-family, letter-spacing, line-height, transform) so that
 * Gurmukhi (Punjabi) text reads cleanly. It does NOT change layout, colors,
 * structure, queries, or spacing of sections.
 *
 * To revert Phase A completely: remove the enqueue block in functions.php
 * (and optionally delete this file). main.css is untouched.
 *
 * Fonts loaded via functions.php:
 *   - Noto Sans Gurmukhi  -> body, UI, titles (primary Punjabi face)
 *   - Noto Serif Gurmukhi -> reserved for large display headings only
 *
 * @package PunjabiTime
 */

:root {
	/* Punjabi-first stacks. Latin names kept as fallback so English/numbers
	   stay readable when mixed inline with Gurmukhi. */
	--pt-guru-sans: "Noto Sans Gurmukhi", "Work Sans", "Segoe UI", Arial, sans-serif;
	--pt-guru-serif: "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", Georgia, serif;
}

/* -------------------------------------------------------------------------
 * 1. Base body text — readable Gurmukhi sans, comfortable line-height.
 * ---------------------------------------------------------------------- */
body {
	font-family: var(--pt-guru-sans);
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * 2. Brand / logo text and footer title.
 *    Keep it strong but use Gurmukhi-aware spacing (no negative tracking).
 * ---------------------------------------------------------------------- */
.pt-brand,
.pt-footer-title {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;
	line-height: 1.15;
}

/* -------------------------------------------------------------------------
 * 3. Navigation, tagline, kicker, meta, section heads, buttons.
 *    These are UI/label text. Keep them clean and readable. We relax the
 *    aggressive uppercase + wide tracking that hurts Gurmukhi legibility,
 *    while leaving short Latin labels (e.g. "View all") perfectly fine.
 * ---------------------------------------------------------------------- */
.pt-menu,
.pt-tagline,
.pt-kicker,
.pt-meta,
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1,
.pt-section__head a,
.pt-button,
.pt-footer-links,
.pt-footer-bottom,
.pt-breaking,
.pt-empty,
.pt-trending-list time {
	font-family: var(--pt-guru-sans);
}

/* Gurmukhi does not have letter-case, and wide tracking pulls matras apart.
   Soften tracking and disable uppercasing so Punjabi labels read naturally.
   Latin labels remain clear at these gentler values. */
.pt-menu,
.pt-tagline,
.pt-kicker,
.pt-meta,
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1,
.pt-section__head a,
.pt-trending-list time {
	text-transform: none;
	letter-spacing: 0.01em;
}

/* Section headings need a touch more height so Punjabi marks are not clipped. */
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1 {
	line-height: 1.35;
}

/* Navigation links: comfortable Punjabi line-height. */
.pt-menu a {
	line-height: 1.4;
}

/* Meta row (category • date) — keep small but breathing. */
.pt-meta {
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Breaking ticker label can stay uppercase (short Latin word "BREAKING"),
   but ticker headlines are Punjabi, so give them natural spacing. */
.pt-breaking__track a {
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * 4. Post / card / news-line / video titles.
 *    This is the most important fix: remove negative letter-spacing and
 *    tight leading that clip Gurmukhi matras, and switch to the Gurmukhi
 *    sans face for crisp, modern news headlines.
 * ---------------------------------------------------------------------- */
.pt-card__title,
.pt-news-line h3,
.pt-video-card h3,
.pt-trending-list a {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;            /* was -0.02em in main.css */
	line-height: 1.4;            /* was 1.08 / 1.2 — too tight for Gurmukhi */
}

/* Large lead headline: serif Gurmukhi for an elegant, but still modern,
   front-page feel. Generous-but-not-loose leading. */
.pt-card--lead .pt-card__title,
.pt-video-card--lead h3 {
	font-family: var(--pt-guru-serif);
	letter-spacing: 0;
	line-height: 1.3;
}

/* Mini cards (compact list) — keep tight but uncramped. */
.pt-card--mini .pt-card__title {
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
 * 5. Article body content (single posts / fallback) and excerpts.
 *    Comfortable reading measure for long Gurmukhi paragraphs.
 * ---------------------------------------------------------------------- */
.pt-entry-content,
.pt-card__excerpt {
	font-family: var(--pt-guru-sans);
}

.pt-entry-content {
	line-height: 1.85;
}

.pt-entry-content h2,
.pt-entry-content h3,
.pt-entry-content h4 {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;
	line-height: 1.4;
}

.pt-card__excerpt {
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * 6. Archive / search / page headers.
 * ---------------------------------------------------------------------- */
.pt-archive .pt-page-header h1,
.pt-page-header h1 {
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
 * 7. Newsletter heading (display) — keep elegant serif Gurmukhi, untight.
 * ---------------------------------------------------------------------- */
.pt-newsletter h2 {
	font-family: var(--pt-guru-serif);
	letter-spacing: 0;
	line-height: 1.25;
}

/* -------------------------------------------------------------------------
 * 8. Mobile readability — slightly looser leading on small screens so
 *    stacked Gurmukhi headlines and body text stay comfortable.
 * ---------------------------------------------------------------------- */
@media (max-width: 820px) {
	body {
		line-height: 1.75;
	}

	.pt-card__title,
	.pt-news-line h3,
	.pt-video-card h3 {
		line-height: 1.4;
	}

	.pt-card--lead .pt-card__title {
		line-height: 1.35;
	}

	.pt-entry-content {
		line-height: 1.8;
	}
}

@media (max-width: 480px) {
	.pt-card__excerpt {
		line-height: 1.7;
	}
}