/**
 * NIYAPRESS: Harmonization Layer
 * Unified design system for all homepage sections
 * Colors, typography, spacing, and consistency fixes
 */

/* ========================================
   GLOBAL COLOR PALETTE
   ======================================== */
:root {
	/* Primary Brand Colors */
	--np-red-primary: #c8102e;
	--np-red-dark: #a00d24;
	--np-blue-primary: #2874a6;
	--np-blue-dark: #1e5a7f;
	
	/* Section Accent Colors */
	--np-politics-red: #c8102e;
	--np-society-teal: #16a085;
	--np-sports-blue: #2874a6;
	--np-exclusive-orange: #f39c12;
	--np-woman-pink: #e91e63;
	--np-economy-slate: #34495e;
	--np-national-green: #27ae60;
	
	/* Neutral Colors */
	--np-text-primary: #1a1a1a;
	--np-text-secondary: #555;
	--np-text-light: #777;
	--np-text-meta: #999;
	--np-border-light: #e0e0e0;
	--np-bg-white: #ffffff;
	--np-bg-light: #f9f9f9;
	--np-bg-dark: #2c3e50;
	
	/* Shadows */
	--np-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
	--np-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
	--np-shadow-lg: 0 6px 20px rgba(0,0,0,0.15);
	
	/* Transitions */
	--np-transition-fast: 0.3s ease;
	--np-transition-medium: 0.5s ease;
	
	/* Spacing */
	--np-section-padding: 40px 0;
	--np-section-margin: 30px 0;
	--np-card-gap: 20px;
}

/* ========================================
   TYPOGRAPHY HARMONIZATION
   ======================================== */

/* All section titles */
.np-politics-title,
.np-society-title,
.np-sports-title,
.np-exclusive-title,
.np-woman-title,
.np-economy-title,
.np-national-title,
.np-news-trio-title,
.np-video-title {
	font-family: 'Tajawal', sans-serif;
	font-weight: 900;
	letter-spacing: 0.5px;
	margin: 0;
	color: #fff;
}

/* All article card titles */
.np-politics-card-title,
.np-society-card-title,
.np-sports-featured-title,
.np-sports-small-title,
.np-exclusive-card-title,
.np-woman-card-title,
.np-economy-card-title,
.np-national-card-title,
.np-news-trio-card-title {
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	line-height: 1.6;
	color: var(--np-text-primary);
	direction: rtl;
	text-align: right;
}

/* ========================================
   SECTION BACKGROUNDS
   ======================================== */

/* White background sections */
.np-sports-grid,
.np-woman-section {
	background: var(--np-bg-white);
}

/* Light gray background sections */
.np-news-trio {
	background: var(--np-bg-light);
}

/* Gradient background sections */
.np-politics-grid {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.np-society-grid {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.np-exclusive-grid {
	background: linear-gradient(135deg, #f9a825 0%, #ff9800 100%);
}

.np-economy-grid {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.np-hero-national-grid {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* ========================================
   CARD HOVER EFFECTS (UNIFIED)
   ======================================== */

.np-politics-card:hover,
.np-society-card:hover,
.np-sports-small-card:hover,
.np-sports-featured:hover,
.np-exclusive-card:hover,
.np-economy-card:hover,
.np-national-card:hover,
.np-news-trio-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--np-shadow-lg);
}

.np-woman-card:hover {
	transform: translateX(5px);
	box-shadow: var(--np-shadow-md);
}

/* ========================================
   IMAGE OVERLAYS (UNIFIED)
   ======================================== */

.np-politics-overlay,
.np-society-overlay,
.np-sports-featured-overlay,
.np-sports-small-overlay,
.np-economy-overlay,
.np-national-overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}

/* ========================================
   SECTION HEADERS (UNIFIED)
   ======================================== */

/* Full-width bar headers */
.np-sports-header {
	background: linear-gradient(135deg, var(--np-sports-blue) 0%, #3498db 100%);
	padding: 15px 0;
	text-align: center;
}

.np-woman-header {
	background: linear-gradient(135deg, #d81b60 0%, var(--np-woman-pink) 100%);
	padding: 15px 0;
	text-align: center;
}

/* Centered badge headers */
.np-exclusive-header,
.np-economy-header {
	text-align: center;
	margin-bottom: 30px;
}

.np-exclusive-title {
	background: rgba(0,0,0,0.25);
	display: inline-block;
	padding: 10px 40px;
	border-radius: 8px;
}

.np-economy-title {
	background: linear-gradient(135deg, var(--np-exclusive-orange) 0%, #e67e22 100%);
	display: inline-block;
	padding: 10px 40px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

/* Side accent bar headers */
.np-politics-header,
.np-society-header,
.np-national-header {
	border-right: 5px solid;
	padding-right: 15px;
	margin-bottom: 25px;
	direction: rtl;
}

.np-politics-header {
	border-right-color: var(--np-politics-red);
}

.np-society-header {
	border-right-color: var(--np-society-teal);
}

.np-national-header {
	border-right-color: var(--np-national-green);
}

/* Column headers with bottom border */
.np-news-trio-header {
	background: var(--np-bg-white);
	padding: 15px 20px;
	border-bottom: 3px solid var(--np-blue-primary);
	text-align: center;
}

/* ========================================
   SPACING CONSISTENCY
   ======================================== */

.np-politics-grid,
.np-society-grid,
.np-sports-grid,
.np-exclusive-grid,
.np-woman-section,
.np-economy-grid,
.np-hero-national-grid,
.np-news-trio,
.np-video-carousel {
	padding: var(--np-section-padding);
	margin: var(--np-section-margin);
}

/* ========================================
   RTL DIRECTION FIX
   ======================================== */

.np-politics-card,
.np-society-card,
.np-woman-card,
.np-national-card,
.np-politics-title,
.np-society-title,
.np-woman-card-title,
.np-economy-card-title,
.np-national-title,
.np-news-trio-title {
	direction: rtl;
	text-align: right;
}

/* ========================================
   ANIMATION CONSISTENCY
   ======================================== */

@keyframes npFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes npSlideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ========================================
   IMAGE CONSISTENCY
   ======================================== */

.np-politics-img,
.np-society-img,
.np-sports-featured-img,
.np-sports-small-img,
.np-exclusive-img,
.np-woman-img,
.np-economy-img,
.np-national-img,
.np-news-trio-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--np-transition-medium);
}

.np-politics-card:hover .np-politics-img,
.np-society-card:hover .np-society-img,
.np-sports-featured:hover .np-sports-featured-img,
.np-sports-small-card:hover .np-sports-small-img,
.np-exclusive-card:hover .np-exclusive-img,
.np-woman-card:hover .np-woman-img,
.np-economy-card:hover .np-economy-img,
.np-national-card:hover .np-national-img,
.np-news-trio-card:hover .np-news-trio-img {
	transform: scale(1.08);
}

/* ========================================
   LINK RESET
   ======================================== */

.np-politics-link,
.np-society-link,
.np-sports-featured-link,
.np-sports-small-link,
.np-exclusive-link,
.np-woman-link,
.np-economy-link,
.np-national-link,
.np-news-trio-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* ========================================
   RESPONSIVE CONSISTENCY
   ======================================== */

@media (max-width: 768px) {
	:root {
		--np-section-padding: 25px 0;
		--np-section-margin: 20px 0;
	}
	
	.np-politics-title,
	.np-society-title,
	.np-sports-title,
	.np-exclusive-title,
	.np-woman-title,
	.np-economy-title,
	.np-national-title {
		font-size: 24px;
	}
	
	.np-news-trio-title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	:root {
		--np-section-padding: 20px 0;
		--np-section-margin: 15px 0;
	}
	
	.np-politics-title,
	.np-society-title,
	.np-sports-title,
	.np-exclusive-title,
	.np-woman-title,
	.np-economy-title,
	.np-national-title {
		font-size: 20px;
	}
	
	.np-news-trio-title {
		font-size: 18px;
	}
}

/* ========================================
   FIX: Text Readability
   ======================================== */

/* Ensure white text on dark backgrounds has proper contrast */
.np-economy-card-title,
.np-exclusive-card-title {
	text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* Ensure dark text on light backgrounds is readable */
.np-politics-card-title,
.np-society-card-title,
.np-woman-card-title,
.np-national-card-title,
.np-news-trio-card-title {
	color: var(--np-text-primary);
}

/* ========================================
   FIX: Border and Shadow Consistency
   ======================================== */

.np-politics-card,
.np-society-card,
.np-sports-small-card,
.np-sports-featured,
.np-woman-card,
.np-national-card,
.np-news-trio-column {
	box-shadow: var(--np-shadow-sm);
	transition: all var(--np-transition-fast);
}

/* ========================================
   FIX: Container Width Consistency
   ======================================== */

.np-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	width: 100%;
}

@media (max-width: 1024px) {
	.np-container {
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	.np-container {
		padding: 0 15px;
	}
}

/* ========================================
   FIX: Date/Meta Information
   ======================================== */

.np-politics-date,
.np-society-date,
.np-sports-featured-date,
.np-sports-small-date,
.np-woman-date {
	font-size: 13px;
	color: var(--np-text-meta);
	font-family: 'Tajawal', sans-serif;
}

/* ========================================
   FIX: Video Section Integration
   ======================================== */

.np-video-carousel {
	background: var(--np-bg-white);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	.np-politics-grid,
	.np-society-grid,
	.np-sports-grid,
	.np-exclusive-grid,
	.np-woman-section,
	.np-economy-grid,
	.np-hero-national-grid,
	.np-news-trio {
		background: white !important;
		box-shadow: none !important;
	}
}