/*
* Theme Name: News Theme
* Theme URI: http://news-theme/
* Author: Bernard Posniak
* Author URI: http://news-theme
* Description: A minimalist, high-performance News Magazine theme built with HTML5, pico.css, alpine.js, and advanced SEO/AEO/GEO.
* Version: 1.0.0
* License: GNU General Public License v2 or later
* License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
* Text Domain: news-theme
* WordPress Tested up to: 6.8
* PHP Requires at least: 8.2
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Global Styles & Dark Theme
# Layout
# Typography
# Accessibility
# Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Styles & Dark Theme
--------------------------------------------------------------*/
:root {
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--line-height: 1.6;
	--font-weight: 400;
	--font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* Responsive font size */
	--border-radius: 8px;
	--spacing: 1rem;
}

/* Minimalist Dark Theme using Pico.css variables */
html {
	--background-color: #11191f;
	--color: #c0c5c9;
	--h1-color: #ffffff;
	--h2-color: #f8f9fa;
	--h3-color: #e9ecef;
	--h4-color: #dee2e6;
	--h5-color: #ced4da;
	--h6-color: #adb5bd;
	--muted-color: #6c757d;
	--primary: #0d6efd;
	--primary-hover: #0b5ed7;
	--primary-focus: rgba(13, 110, 253, 0.25);
	--primary-inverse: #fff;
	--secondary: #6c757d;
	--secondary-hover: #5c636a;
	--secondary-focus: rgba(108, 117, 125, 0.25);
	--secondary-inverse: #fff;
	--contrast: #ffffff;
	--contrast-hover: #f8f9fa;
	--contrast-focus: rgba(255, 255, 255, 0.25);
	--contrast-inverse: #000;
	--card-background-color: #1c262f;
	--card-border-color: #343a40;
	--card-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--form-element-background-color: #1c262f;
	--form-element-border-color: #495057;
	--form-element-color: #ced4da;
	--form-element-placeholder-color: #6c757d;
	--form-element-focus-color: var(--primary-focus);
}

body {
	font-family: var(--font-family);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	font-size: var(--font-size);
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container,
.site-header,
.site-footer {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing);
	padding-right: var(--spacing);
}

.site-main {
	margin-top: calc(var(--spacing) * 2);
	margin-bottom: calc(var(--spacing) * 2);
}

/* Responsive Grid for post listings */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing) * 1.5);
}

@media (min-width: 600px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

article.card {
    padding: 0; /* Override pico's padding for cards */
    border: 1px solid var(--card-border-color);
    background-color: var(--card-background-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensure image corners are rounded */
}

article.card .card-content {
    padding: var(--spacing);
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	margin-bottom: var(--spacing);
}

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.375rem + 1.875vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); }

p {
	max-width: 85ch;
}

a {
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000;
	color: white;
	padding: 8px;
	z-index: 100000;
	transform: translateY(-100%);
	transition: transform 0.3s;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	transform: translateY(0%);
}

:focus-visible {
	outline: 2px solid #005a9c;
	outline-offset: 2px;
	box-shadow: none;
}

.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;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.aspect-ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
	aspect-ratio: 1 / 1;
}

.img-responsive {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Header & Footer Social Links */
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    font-size: 1.25rem;
    color: var(--color);
}
.social-links a:hover {
    color: var(--primary);
}