/*
Theme Name: Universal News Theme
Theme URI: https://generatepress.com
Description: A professional, mobile-first, and highly optimized news/magazine child theme for GeneratePress. Features a custom dynamic homepage builder, AdSense optimizations, and perfectly scaled typography.
Author: Universal Theme Builder
Author URI: https://example.com
Template: generatepress
Version: 1.0.0
Text Domain: universal-news
Tags: news, magazine, responsive, accessibility-ready, blog, custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* 
 * ==========================================
 * THEME FOUNDATION & CSS VARIABLES
 * ==========================================
 */
:root {
	/* Colors - These can be overridden via Admin Panel inline styles */
	--un-color-primary: #e63946;
	--un-color-accent: #1d3557;
	--un-color-bg-body: #f8f9fa;
	--un-color-bg-section: #ffffff;
	--un-color-text-body: #333333;
	--un-color-text-heading: #111111;
	--un-color-text-meta: #666666;
	--un-color-border: #eaeaec;

	/* Typography */
	--un-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--un-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* Fluid Typography Sizes using clamp() */
	--un-size-hero-title: clamp(24px, 3vw, 34px);
	--un-size-section-heading: clamp(20px, 2.5vw, 24px);
	--un-size-card-title: clamp(16px, 2vw, 18px);
	--un-size-body: clamp(14px, 1.5vw, 16px);
	--un-size-meta: clamp(12px, 1.2vw, 13px);

	/* Layout & Spacing */
	--un-container-width: 1200px;
	--un-spacing-xs: 8px;
	--un-spacing-sm: 16px;
	--un-spacing-md: 24px;
	--un-spacing-lg: 32px;
	--un-spacing-xl: 48px;
	--un-border-radius: 8px;
	--un-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--un-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	
	/* Transitions */
	--un-transition-fast: 0.2s ease-in-out;
}

/* Base Styles */
body {
	background-color: var(--un-color-bg-body);
	color: var(--un-color-text-body);
	font-family: var(--un-font-body);
	font-size: var(--un-size-body);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--un-font-heading);
	color: var(--un-color-text-heading);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--un-spacing-sm);
}

a {
	color: var(--un-color-primary);
	text-decoration: none;
	transition: color var(--un-transition-fast);
}

a:hover {
	color: var(--un-color-accent);
}

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

/* Note: Component-specific styles are in assets/css/main.css to keep style.css lightweight and maintainable. */