/*
* 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, CSS3, vanilla 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:
----------------------------------------------------------------
1.0 Normalize & Globals
2.0 Accessibility
3.0 Layout & Grid System
4.0 Header & Navigation
5.0 Main Content & Loop
6.0 Single & Page Content
7.0 Footer
8.0 Pagination
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize & Globals
--------------------------------------------------------------*/
:root {
	--color-bg: #ffffff;
	--color-text: #222222;
	--color-link: #0056b3;
	--color-link-hover: #003d80;
	--color-border: #cccccc;
	--font-base-size: 16px;
	--line-height-base: 1.6;
	--line-height-heading: 1.3;
	--container-width: 1200px;
	--spacing-base: 8px;
	--spacing-unit-1: var(--spacing-base); /* 8px */
	--spacing-unit-2: calc(var(--spacing-base) * 2); /* 16px */
	--spacing-unit-3: calc(var(--spacing-base) * 3); /* 24px */
	--spacing-unit-4: calc(var(--spacing-base) * 4); /* 32px */
}

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

body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: var(--font-base-size);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Responsive Typography */
h1, h2, h3, h4, h5, h6 {
	margin: var(--spacing-unit-3) 0 var(--spacing-unit-2);
	line-height: var(--line-height-heading);
	font-weight: 700;
}

h1 { font-size: clamp(2rem, 1.625rem + 1.875vw, 3rem); } /* 32px to 48px */
h2 { font-size: clamp(1.5rem, 1.2813rem + 1.0938vw, 2.125rem); } /* 24px to 34px */
h3 { font-size: clamp(1.25rem, 1.1563rem + 0.4688vw, 1.5rem); } /* 20px to 24px */

p {
	margin: 0 0 var(--spacing-unit-2);
	max-width: 85ch;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration: none;
}

/* Media Stabilization (CLS Prevention) */
img, video, iframe {
	max-width: 100%;
	height: auto;
}

img[width][height] {
	height: auto; /* Preserve aspect ratio */
}

.wp-post-image {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	object-fit: cover;
	background-color: #f0f0f0; /* Placeholder color */
}


/*--------------------------------------------------------------
2.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.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; /* Many screen readers do not recognize word-wrap: break-word. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above everything else. */
}

/* Visible focus outline for keyboard navigation */
:focus-visible {
	outline: 3px solid var(--color-link);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--color-bg);
}

/* Skip Link */
.skip-link {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: 99999;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	padding: var(--spacing-unit-2);
	background: var(--color-bg);
	border: 2px solid var(--color-link);
	color: var(--color-link);
	text-decoration: none;
	font-weight: 700;
}


/*--------------------------------------------------------------
3.0 Layout & Grid System
--------------------------------------------------------------*/
.container {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-unit-3);
	padding-right: var(--spacing-unit-3);
}

/* Custom CSS Grid for post loops */
.post-grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile-first: 1 column */
	gap: var(--spacing-unit-4);
}

/* Tablet breakpoint */
@media (min-width: 768px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr); /* 2 columns */
	}
}

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

.grid-item {
	display: flex;
	flex-direction: column;
}

.grid-item .entry-thumbnail {
	margin-bottom: var(--spacing-unit-2);
}

.grid-item h2 {
	margin-top: 0;
	font-size: clamp(1.25rem, 1.1563rem + 0.4688vw, 1.5rem); /* H3 size */
}

.grid-item h2 a {
	text-decoration: none;
}

/*--------------------------------------------------------------
4.0 Header & Navigation
--------------------------------------------------------------*/
.site-header {
	padding-top: var(--spacing-unit-3);
	padding-bottom: var(--spacing-unit-3);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-unit-2);
}

.site-branding {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
}
.site-branding a {
	color: var(--color-text);
	text-decoration: none;
}

.site-header h1.site-branding {
	font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
}

.header-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-unit-2);
}

/* Primary Navigation */
#site-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-unit-3);
}

#site-navigation ul li {
	margin: 0;
}

#site-navigation ul a {
	display: block;
	text-decoration: none;
	font-weight: 600;
	padding: var(--spacing-unit-1) 0;
	min-height: 48px; /* Tap Target */
	display: flex;
	align-items: center;
}

/* Header Social Links */
.header-social-links {
	display: flex;
	gap: var(--spacing-unit-2);
	padding-left: var(--spacing-unit-2); /* Space from nav */
}
.header-social-links a {
	color: var(--color-text);
	font-size: 1.1rem;
	min-width: 48px; /* Tap Target */
	min-height: 48px; /* Tap Target */
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-social-links a:hover {
	color: var(--color-link);
}

/* Breadcrumbs */
.site-breadcrumb {
	grid-column: 1 / -1; /* Span full width if in grid */
	width: 100%;
	padding: var(--spacing-unit-2) 0;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--spacing-unit-4);
}
.site-breadcrumb ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.site-breadcrumb li {
	display: flex;
	align-items: center;
}
.site-breadcrumb li:not(:last-child)::after {
	content: '/';
	margin: 0 var(--spacing-unit-1);
	opacity: 0.7;
}
.site-breadcrumb a {
	text-decoration: none;
}
.site-breadcrumb [aria-current="page"] {
	font-weight: 600;
	color: var(--color-text);
}


/*--------------------------------------------------------------
5.0 Main Content & Loop
--------------------------------------------------------------*/
.site-main {
	padding-top: var(--spacing-unit-4);
	padding-bottom: var(--spacing-unit-4);
}

.archive-header {
	margin-bottom: var(--spacing-unit-4);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--spacing-unit-3);
}
.archive-header h1 {
	margin: 0;
}


/*--------------------------------------------------------------
6.0 Single & Page Content
--------------------------------------------------------------*/
.single .site-main,
.page .site-main {
	max-width: 900px; /* Optimal reading width */
}

.single-post-header {
	margin-bottom: var(--spacing-unit-3);
}
.single-post-header h1 {
	margin: 0 0 var(--spacing-unit-2);
}

.entry-meta {
	font-size: 0.9rem;
	color: #555;
	margin-bottom: var(--spacing-unit-3);
}
.entry-meta .author,
.entry-meta .entry-date {
	margin-right: var(--spacing-unit-2);
}

.entry-featured-image {
	margin-bottom: var(--spacing-unit-3);
}

.entry-content {
	max-width: 85ch;
}

.entry-content > * + * {
	margin-top: var(--spacing-unit-3);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--spacing-unit-3);
}

.entry-content figure {
	margin: var(--spacing-unit-4) 0;
}

/* Share Toolbar */
.share-toolbar {
	margin-top: var(--spacing-unit-4);
	padding-top: var(--spacing-unit-3);
	border-top: 1px solid var(--color-border);
}
.share-toolbar-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 var(--spacing-unit-2);
}
.share-toolbar-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-unit-1);
	padding: 0;
	margin: 0;
	list-style: none;
}
.share-toolbar-list a,
.share-toolbar-list button {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit-1);
	padding: var(--spacing-unit-1) var(--spacing-unit-2);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: #f9f9f9;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	min-height: 48px; /* Tap Target */
}
.share-toolbar-list a:hover,
.share-toolbar-list button:hover {
	background: #f0f0f0;
	border-color: #aaa;
}


/*--------------------------------------------------------------
7.0 Footer
--------------------------------------------------------------*/
.site-footer {
	padding-top: var(--spacing-unit-4);
	padding-bottom: var(--spacing-unit-4);
	margin-top: var(--spacing-unit-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-unit-3);
	font-size: 0.9rem;
}

.footer-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-unit-3);
}

.copyright {
	margin: 0;
	opacity: 0.8;
}


/*--------------------------------------------------------------
8.0 Pagination
--------------------------------------------------------------*/
.pagination {
	margin-top: var(--spacing-unit-4);
	border-top: 1px solid var(--color-border);
	padding-top: var(--spacing-unit-3);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-unit-1);
}

.nav-links .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--spacing-unit-1);
	min-width: 48px; /* Tap Target */
	min-height: 48px; /* Tap Target */
	border: 1px solid var(--color-border);
	text-decoration: none;
	background: #f9f9f9;
}

.nav-links .page-numbers:hover {
	background: #f0f0f0;
}

.nav-links .page-numbers.current {
	background: var(--color-link);
	color: var(--color-bg);
	border-color: var(--color-link);
	font-weight: 700;
}