/*
Theme Name: Arabzeen
Theme URI: https://arabzeen.com
Author: Arabzeen
Author URI: https://arabzeen.com
Description: قالب بلوكات (Full Site Editing) مخصص لموقع عربزين، مبني لدعم محتوى إخباري ومجلة عامة باللغة العربية (RTL)، مع تحسينات لمحركات البحث (SEO)، وسرعة تحميل، وتخصيص كامل عبر محرر الموقع الكامل.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arabzeen
Tags: block-theme, full-site-editing, news, blog, one-column, right-to-left-language-support, rtl-language-support, custom-logo, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   Component CSS that goes beyond what theme.json can express.
   Colors/type/spacing here reference the theme.json custom properties
   so everything stays in sync with the Site Editor's design tokens.
   ========================================================================== */

/* --- Kicker / dateline chip (the site's signature device) --- */
.arabzeen-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--amber-signal);
	padding: 0.25em 0.75em;
	border-radius: 2px;
	text-decoration: none;
}
.arabzeen-kicker:hover,
.arabzeen-kicker:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.arabzeen-dateline-rule {
	display: inline-block;
	width: 3px;
	align-self: stretch;
	background: var(--wp--preset--color--amber-signal);
	margin-inline-end: 0.75rem;
}

/* --- Meta row (date / author / reading time) --- */
.arabzeen-meta {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	font-variant-numeric: tabular-nums;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1em;
	align-items: center;
}
.arabzeen-meta .sep {
	opacity: 0.5;
}

/* --- Post cards --- */
.arabzeen-card {
	border: 1px solid var(--wp--preset--color--rule-gray);
	border-radius: 4px;
	overflow: clip;
	background: var(--wp--preset--color--paper);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.arabzeen-card:hover {
	box-shadow: 0 6px 24px rgba(14, 71, 73, 0.12);
	transform: translateY(-2px);
}
.arabzeen-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--paper-shade);
}
.arabzeen-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.arabzeen-card-body {
	padding: 1rem 1.25rem 1.25rem;
}

/* --- Hero (front page) --- */
.arabzeen-hero-primary {
	position: relative;
	min-height: 460px;
	border-radius: 6px;
	overflow: clip;
	isolation: isolate;
	background: var(--wp--preset--gradient--nile-fade);
}
.arabzeen-hero-primary .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.arabzeen-hero-primary img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* If the image 404s, don't show the browser's broken-image icon/border. */
	color: transparent;
}
.arabzeen-hero-primary img::before {
	content: "";
}
.arabzeen-hero-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--hero-scrim);
	z-index: 1;
}
.arabzeen-hero-primary .arabzeen-hero-content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 2rem;
}
.arabzeen-hero-primary .arabzeen-hero-content h2,
.arabzeen-hero-primary .arabzeen-hero-content h2 a {
	color: var(--wp--preset--color--paper);
}
.arabzeen-hero-primary .arabzeen-meta {
	color: rgba(251, 249, 244, 0.8);
}

/* --- Category strip pills --- */
.arabzeen-category-pill {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--wp--preset--color--deep-nile);
	color: var(--wp--preset--color--deep-nile);
	border-radius: 999px;
	padding: 0.5em 1.25em;
	font-weight: 700;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	transition: background 0.2s ease, color 0.2s ease;
}
.arabzeen-category-pill:hover,
.arabzeen-category-pill:focus {
	background: var(--wp--preset--color--deep-nile);
	color: var(--wp--preset--color--paper);
}

/* --- Pull quote styling handled mostly in theme.json, add rule accent --- */
.wp-block-quote {
	border-inline-start: 4px solid var(--wp--preset--color--amber-signal);
	padding-inline-start: 1.25rem;
}

/* --- Skip link (accessibility) --- */
.skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: -100px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.75em 1.25em;
	z-index: 100000;
	border-radius: 4px;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 1rem;
}

/* --- Sticky header --- */
.arabzeen-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--rule-gray);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.arabzeen-card,
	.skip-link {
		transition: none;
	}
}

/* --- Print --- */
@media print {
	.arabzeen-site-header,
	.wp-block-navigation,
	.arabzeen-newsletter-cta {
		display: none;
	}
}