/*
Theme Name: Elsabagh Mag
Theme URI: https://www.youtube.com/@elsabagh
Author: مصطفى الصباغ
Author URI: https://www.youtube.com/@elsabagh
Description: قالب مجلة تقنية (عربي/إنجليزي) بدعم RTL-first، وضع ليلي، بحث Ajax، شريط أخبار، شريط جانبي لاصق، جدول محتويات تلقائي، تقدم القراءة، Schema JSON-LD، ومساحات AdSense. من تطوير قناة الصباغ للمعلوميات.
Version: 1.3.5
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elsabagh-mag
Tags: blog, news, magazine, rtl-language-support, translation-ready, custom-menu, custom-logo, featured-images, threaded-comments, wide-blocks, block-styles, one-column, two-columns, right-sidebar, left-sidebar, dark-mode, accessibility-ready
*/


/* ==========================================================================
   1. Self-hosted typefaces (no third-party font request, font-display swap)
   ========================================================================== */

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Design tokens (Modern Tech Magazine: Deep Tech Blue, Calm Cyan,
      Soft Light Gray). Every value below is an exact hex, contrast verified.
   ========================================================================== */

:root {
	/* Grounds */
	--c-bg: #EEF2F6;
	--c-surface: #FFFFFF;
	--c-surface-2: #E3EEF1;
	--c-surface-3: #DCE6EE;

	/* Ink */
	--c-ink: #0B1B2B;
	--c-ink-muted: #3E5164;
	--c-ink-invert: #FFFFFF;

	/* Lines */
	--c-border: #D3DEE8;
	--c-border-strong: #B9C8D6;

	/* Accents: Deep Tech Blue -> Calm Cyan */
	--c-blue-deep: #0A3D62;
	--c-accent: #0A6E82;
	--c-accent-strong: #07515F;
	--c-accent-2: #0E8BA6;
	--c-accent-soft: #E3EEF1;
	--c-accent-on: #FFFFFF;

	/* States */
	--c-focus: #07515F;
	--c-success: #0F6B4F;
	--c-danger: #A3231F;

	/* Gradients (subtle, never neon) */
	--grad-brand: linear-gradient(135deg, #0A3D62 0%, #07515F 55%, #0E8BA6 100%);
	--grad-brand-soft: linear-gradient(135deg, rgba(10, 61, 98, 0.96) 0%, rgba(14, 139, 166, 0.92) 100%);
	--grad-tint: linear-gradient(135deg, rgba(227, 238, 241, 0) 0%, rgba(14, 139, 166, 0.1) 100%);

	/* Typography */
	--font-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.25rem;
	--fs-3xl: 2.75rem;
	--fs-4xl: 3.25rem;

	--lh-tight: 1.08;
	--lh-heading: 1.22;
	--lh-body: 1.75;
	--measure: 68ch;

	/* Spacing scale */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* Radius scale: inputs 8, cards 12, buttons pill */
	--r-input: 8px;
	--r-card: 12px;
	--r-pill: 999px;

	/* Elevation: shadows tinted toward the ground hue, never pure black */
	--sh-1: 0 1px 2px rgba(10, 61, 98, 0.06), 0 1px 3px rgba(10, 61, 98, 0.05);
	--sh-2: 0 4px 12px rgba(10, 61, 98, 0.08), 0 1px 3px rgba(10, 61, 98, 0.05);
	--sh-3: 0 12px 32px rgba(10, 61, 98, 0.12), 0 2px 8px rgba(10, 61, 98, 0.06);
	--sh-focus: 0 0 0 3px rgba(7, 81, 95, 0.35);

	/* Motion (hardware-accelerated: transform + opacity only) */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-1: 140ms;
	--dur-2: 260ms;
	--dur-3: 420ms;

	/* Layout */
	--container: 1240px;
	--header-h: 68px;
	--z-header: 900;
	--z-progress: 950;
	--z-totop: 880;
}

/* Dark mode: OLED-friendly near-black ground. Applied by data-theme so the
   preference is readable before first paint (no flash of light theme). */
:root[data-theme="dark"] {
	--c-bg: #05080C;
	--c-surface: #0B1118;
	--c-surface-2: #0E2A33;
	--c-surface-3: #121A24;

	--c-ink: #DCE6F0;
	--c-ink-muted: #93A6BB;
	--c-ink-invert: #04212A;

	--c-border: #1E2A38;
	--c-border-strong: #2C3B4D;

	--c-blue-deep: #062A45;
	--c-accent: #5FD3E3;
	--c-accent-strong: #7FE0EE;
	--c-accent-2: #37B7CC;
	--c-accent-soft: #0E2A33;
	--c-accent-on: #04212A;

	--c-focus: #5FD3E3;
	--c-success: #4FCB9A;
	--c-danger: #FF8A80;

	--grad-brand: linear-gradient(135deg, #062A45 0%, #0A4B5C 55%, #0E6B7E 100%);
	--grad-brand-soft: linear-gradient(135deg, rgba(6, 42, 69, 0.98) 0%, rgba(14, 107, 126, 0.94) 100%);
	--grad-tint: linear-gradient(135deg, rgba(14, 42, 51, 0) 0%, rgba(95, 211, 227, 0.08) 100%);

	--sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
	--sh-2: 0 4px 14px rgba(0, 0, 0, 0.6);
	--sh-3: 0 14px 34px rgba(0, 0, 0, 0.68);
	--sh-focus: 0 0 0 3px rgba(95, 211, 227, 0.4);
}

/* ==========================================================================
   3. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
	border-style: none;
}

/* CLS guard: explicit ratio box until the asset reports its size. */
img {
	display: block;
	background-color: var(--c-surface-3);
}

/* Dark mode protects the eyes: dim photography slightly, never the text. */
:root[data-theme="dark"] img:not(.no-dim),
:root[data-theme="dark"] video:not(.no-dim) {
	filter: brightness(0.86) contrast(1.03);
}

a {
	color: var(--c-accent-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--c-blue-deep); }
:root[data-theme="dark"] a:hover { color: var(--c-accent-2); }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--sp-4);
	z-index: 1000;
	background: var(--c-surface);
	color: var(--c-ink);
	padding: var(--sp-3) var(--sp-5);
	border-radius: 0 0 var(--r-input) var(--r-input);
	box-shadow: var(--sh-2);
	font-weight: 600;
	transition: inset-block-start var(--dur-2) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

/* ==========================================================================
   4. Typography hierarchy (long-form readability standards)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--c-ink);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-xl);  letter-spacing: -0.016em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); }

p { margin: 0 0 var(--sp-5); }

.eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-strong);
	margin-bottom: var(--sp-3);
}

.lede {
	font-size: var(--fs-md);
	color: var(--c-ink-muted);
	line-height: 1.7;
}

/* ==========================================================================
   5. Accessibility helpers
   ========================================================================== */

@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;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header, .site-footer, .scroll-top, .reading-progress,
	.news-ticker, .ad-slot, .widget-area, .lang-switcher, .theme-toggle {
		display: none !important;
	}
	body { background: #fff; color: #000; }
}