/*
Theme Name: ABB News Urdu
Theme URI: https://abbnews.com
Author: ABB News
Author URI: https://abbnews.com
Description: Custom RTL Urdu newspaper theme for ABB News. Pairs with the ABB Core plugin (live data, columnists, videos, breaking ticker) and the Daily ABB E-Paper plugin (PDF e-paper reader/archive). Nastaliq headlines, Naskh body, ABB red identity.
Version: 1.0.2
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abb-news
Tags: rtl-language-support, news, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   ABB News — Design Tokens
   Palette locked with the client. Colors sampled from brand logos.
   ========================================================================== */
:root {
	/* Brand */
	--abb-red: #83040B;
	--abb-red-dark: #72010A;
	--abb-red-soft: #F8EAEA;
	--abb-navy: #030B20;

	/* Neutrals */
	--abb-white: #FFFFFF;
	--abb-offwhite: #FAFAFA;
	--abb-text: #111111;
	--abb-text-muted: #555555;
	--abb-text-soft: #777777;
	--abb-border: #E5E5E5;
	--abb-border-light: #EFEFEF;

	/* Semantic (added during design review) */
	--abb-success: #1B8A5A;   /* newsletter confirmation check, positive change */
	--abb-live: #E02020;      /* pulsing LIVE dot — brighter than brand red */
	--abb-danger: var(--abb-red);

	/* Footer-scoped text (navy bg needs light muted text) */
	--abb-footer-bg: var(--abb-navy);
	--abb-footer-text: rgba(255, 255, 255, 0.82);
	--abb-footer-muted: rgba(255, 255, 255, 0.55);
	--abb-footer-border: rgba(255, 255, 255, 0.12);

	/* Elevation */
	--abb-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
	--abb-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
	--abb-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);

	/* Typography — families */
	--abb-font-heading: "Noto Nastaliq Urdu", serif;   /* Urdu headlines */
	--abb-font-body: "Noto Naskh Arabic", serif;        /* Urdu body — legible for dense text */
	--abb-font-latin: "Inter", system-ui, -apple-system, sans-serif; /* Latin + numerals */

	/* Type scale (rem) — tuned for Nastaliq which needs generous line-height */
	--abb-fs-xs: 0.75rem;
	--abb-fs-sm: 0.875rem;
	--abb-fs-base: 1rem;
	--abb-fs-md: 1.125rem;
	--abb-fs-lg: 1.375rem;
	--abb-fs-xl: 1.75rem;
	--abb-fs-2xl: 2.25rem;
	--abb-fs-3xl: 2.875rem;

	/* Nastaliq needs much taller line-height than Latin */
	--abb-lh-nastaliq: 2.1;
	--abb-lh-naskh: 1.9;
	--abb-lh-tight: 1.5;

	/* Spacing */
	--abb-space-1: 0.25rem;
	--abb-space-2: 0.5rem;
	--abb-space-3: 0.75rem;
	--abb-space-4: 1rem;
	--abb-space-5: 1.5rem;
	--abb-space-6: 2rem;
	--abb-space-7: 3rem;
	--abb-space-8: 4rem;

	/* Layout — wide portal width (multi-column bands need room) */
	--abb-container: 1600px;
	--abb-container-wide: 1600px;
	--abb-radius: 6px;
	--abb-radius-sm: 4px;
	--abb-radius-lg: 10px;

	/* Transitions */
	--abb-transition: 0.18s ease;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--abb-offwhite);
	color: var(--abb-text);
	font-family: var(--abb-font-body);
	font-size: var(--abb-fs-base);
	line-height: var(--abb-lh-naskh);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Latin numerals/text inside RTL Urdu content read better in Inter.
   Apply .ltr or wrap Latin runs; default numerals use tabular Inter. */
.abb-latin, .abb-num {
	font-family: var(--abb-font-latin);
	direction: ltr;
	unicode-bidi: isolate;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--abb-font-heading);
	line-height: var(--abb-lh-nastaliq);
	font-weight: 700;
	margin: 0 0 var(--abb-space-4);
	color: var(--abb-text);
}

/* Nastaliq sits low on the line; headlines need padding so descenders
   (of the flowing script) are never clipped by overflow:hidden cards. */
h1, h2, h3 { padding-block: 0.15em; }

p { margin: 0 0 var(--abb-space-4); }

a {
	color: var(--abb-red);
	text-decoration: none;
	transition: color var(--abb-transition);
}
a:hover { color: var(--abb-red-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

/* Accessible focus — visible for keyboard users (quality floor) */
:focus-visible {
	outline: 3px solid var(--abb-red);
	outline-offset: 2px;
}

/* Screen-reader-only utility */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.skip-link:focus {
	position: fixed; top: 8px; right: 8px;
	z-index: 100000;
	background: var(--abb-red); color: #fff;
	padding: 0.75rem 1.25rem; border-radius: var(--abb-radius-sm);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.abb-container {
	width: 100%;
	max-width: var(--abb-container);
	margin-inline: auto;
	padding-inline: var(--abb-space-5);
}
.abb-container--wide { max-width: var(--abb-container-wide); padding-inline: var(--abb-space-5); }

/* Section heading with the red left-bar seen throughout the mockups */
.abb-section-title {
	display: flex;
	align-items: center;
	gap: var(--abb-space-3);
	font-size: var(--abb-fs-lg);
	color: var(--abb-red);
	margin: 0 0 var(--abb-space-5);
	padding-block: 0.15em;
}
.abb-section-title::before {
	content: "";
	width: 4px;
	height: 1.4em;
	background: var(--abb-red);
	border-radius: 2px;
	flex: none;
}

/* Reduced-motion respect (quality floor) */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}