/**
 * Main Styles
 *
 * @package Supposedly_News
 */

/* Reset and base */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--wp--preset--color--newsprint, #F7F4EF);
	color: var(--wp--preset--color--ink, #1A1A1A);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* ============================================
   Site header
   ============================================ */
.site-header {
	background-color: var(--wp--preset--color--newsprint, #F7F4EF);
	border-bottom: 3px double var(--wp--preset--color--ink, #1A1A1A);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	text-align: center;
}

.site-header__date {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--medium-gray, #6B6B6B);
	margin-bottom: 0.5rem;
}

.site-header__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.site-header__name a {
	color: var(--wp--preset--color--ink, #1A1A1A);
	text-decoration: none;
}

.site-header__tagline {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	color: var(--wp--preset--color--medium-gray, #6B6B6B);
	letter-spacing: 0.06em;
	margin-top: 0.25rem;
	font-style: italic;
}

/* Compact header on scroll */
.site-header--compact .site-header__inner {
	padding: 0.5rem 1.5rem;
}

.site-header--compact .site-header__date {
	display: none;
}

.site-header--compact .site-header__tagline {
	display: none;
}

/* ============================================
   Navigation
   ============================================ */
.site-nav {
	border-top: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
	border-bottom: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
	padding: 0.5rem 0;
}

.site-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.site-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.site-nav .menu li a {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink, #1A1A1A);
	text-decoration: none;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav .menu li a:hover {
	border-bottom-color: var(--wp--preset--color--editorial-red, #B22222);
	color: var(--wp--preset--color--editorial-red, #B22222);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
	background-color: var(--wp--preset--color--ink, #1A1A1A);
	color: var(--wp--preset--color--newsprint, #F7F4EF);
	padding: 3rem 1.5rem 1.5rem;
	margin-top: 3rem;
}

.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.site-footer__section h4 {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--gold, #C9A84C);
}

.site-footer__section p {
	color: rgba(247, 244, 239, 0.8);
	line-height: 1.6;
}

.site-footer__section a {
	color: var(--wp--preset--color--newsprint, #F7F4EF) !important;
	text-decoration: none;
	font-size: 0.875rem;
}

.site-footer__section a:hover {
	color: var(--wp--preset--color--gold, #C9A84C) !important;
}

.site-footer__nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__nav li {
	margin-bottom: 0.5rem;
}

.site-footer__bottom {
	max-width: 1200px;
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(247, 244, 239, 0.15);
	text-align: center;
	font-size: 0.75rem;
	color: rgba(247, 244, 239, 0.6);
}

.site-footer__bottom p {
	color: rgba(247, 244, 239, 0.6);
	margin: 0.25rem 0;
}

.site-footer__disclaimer {
	font-style: italic;
	margin-top: 0.5rem;
	font-size: 0.6875rem;
}

/* ============================================
   Main content area
   ============================================ */
.site-main {
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* ============================================
   Single post
   ============================================ */
.single-post .entry-header {
	max-width: 720px;
	margin: 0 auto 2rem;
	text-align: center;
}

.single-post .entry-header .category-label {
	display: block;
	margin-bottom: 1rem;
}

.single-post .entry-featured-image {
	margin-bottom: 2rem;
}

.single-post .entry-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.single-post .entry-content {
	max-width: 720px;
	margin: 0 auto;
}

.single-post .entry-content p {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1.125rem;
	line-height: 1.8;
	margin-bottom: 1.5rem;
	color: var(--wp--preset--color--ink, #1A1A1A);
}

.single-post .entry-content > *:not(p):not(.credibility-bar):not(.article-meta-block) {
	margin-bottom: 1.5rem;
}

/* Credibility bar at end of content */
.single-post .credibility-bar {
	max-width: 720px;
	margin: 2rem auto 1rem;
}

/* Post tags */
.entry-tags {
	margin: 1.5rem 0;
	max-width: 720px;
}

.entry-tags a {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	padding: 0.35em 0.75em;
	border: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
	border-radius: 3px;
	text-decoration: none;
	color: var(--wp--preset--color--medium-gray, #6B6B6B);
	margin: 0.2em 0.15em;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.entry-tags a:hover {
	background-color: var(--wp--preset--color--ink, #1A1A1A);
	color: #FFFFFF;
	border-color: var(--wp--preset--color--ink, #1A1A1A);
}

/* Post navigation */
.post-navigation {
	max-width: 720px;
	margin: 2rem auto;
	padding: 1.5rem 0;
	border-top: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
	border-bottom: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
}

.post-navigation a {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--editorial-red, #B22222);
}

.post-navigation a:hover {
	color: var(--wp--preset--color--ink, #1A1A1A);
}

/* Comments */
.comments-area {
	max-width: 720px;
	margin: 2rem auto;
}

.comments-area .comment-respond {
	margin-top: 2rem;
}

.comments-area .comment-form label {
	display: block;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--light-gray, #E5E2DB);
	border-radius: 3px;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.9375rem;
	background-color: #FFFFFF;
	margin-bottom: 1rem;
}

.comments-area .comment-form .submit {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.625rem 1.5rem;
	background-color: var(--wp--preset--color--editorial-red, #B22222);
	color: #FFFFFF;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.comments-area .comment-form .submit:hover {
	background-color: #8B1A1A;
}

/* ============================================
   404 page
   ============================================ */
.error-404 {
	text-align: center;
	padding: 4rem 1.5rem;
}

.error-404 h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 4rem;
	font-weight: 900;
}

/* ============================================
   Category label on posts
   ============================================ */
.category-label a {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	padding: 0.15em 0.6em;
	background-color: var(--wp--preset--color--editorial-red, #B22222);
	color: #FFFFFF;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 960px) {
	.section-row__grid,
	.newspaper-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.section-row__grid,
	.newspaper-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.site-header__name {
		font-size: 2rem;
	}

	.site-nav__inner {
		padding: 0 1rem;
	}

	.site-nav .menu {
		gap: 0.75rem 1.25rem;
	}

	.site-nav .menu li a {
		font-size: 0.75rem;
	}
}

/* ============================================
   Dark mode
   ============================================ */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #141414;
		color: #E5E2DB;
	}

	.site-header {
		background-color: #141414;
		border-bottom-color: #3A3A3A;
	}

	.site-header__name a {
		color: #F7F4EF;
	}

	.story-card__title a,
	.hero-headline a {
		color: #F7F4EF;
	}

	.story-card__title a:hover,
	.hero-headline a:hover {
		color: var(--wp--preset--color--gold, #C9A84C);
	}

	.entry-title,
	.hero-headline,
	h1, h2, h3, h4, h5, h6 {
		color: #F7F4EF;
	}

	.story-card {
		border-bottom-color: #2A2A2A;
	}

	.section-row__header {
		border-bottom-color: #3A3A3A;
	}

	.section-row__line {
		border-top-color: #2A2A2A;
	}

	.site-nav {
		border-color: #2A2A2A;
	}

	.site-nav .menu li a {
		color: #E5E2DB;
	}

	.site-nav .menu li a:hover {
		color: var(--wp--preset--color--gold, #C9A84C);
		border-bottom-color: var(--wp--preset--color--gold, #C9A84C);
	}

	a {
		color: var(--wp--preset--color--gold, #C9A84C);
	}

	.credibility-bar__track {
		background-color: #2A2A2A;
	}

	.article-meta-block {
		border-color: #2A2A2A;
	}

	.article-meta-block__persona {
		color: #F7F4EF;
	}

	.satirical-disclaimer {
		border-top-color: #2A2A2A;
	}

	.hero-area {
		border-bottom-color: #3A3A3A;
	}

	.hero-area .hero-main {
		border-right-color: #2A2A2A;
	}

	.search-form .search-field {
		background-color: #1E1E1E;
		border-color: #3A3A3A;
		color: #E5E2DB;
	}

	hr {
		border-top-color: #2A2A2A;
	}

	.single-post .entry-content p {
		color: #E5E2DB;
	}

	.credibility-bar {
		background-color: rgba(255, 255, 255, 0.05);
		border-color: #3A3A3A;
	}

	.credibility-bar__label {
		color: #F7F4EF;
	}

	.credibility-bar__track {
		background-color: #2A2A2A;
	}

	.entry-tags a {
		border-color: #3A3A3A;
		color: #AAA;
	}

	.entry-tags a:hover {
		background-color: var(--wp--preset--color--gold, #C9A84C);
		color: #1A1A1A;
		border-color: var(--wp--preset--color--gold, #C9A84C);
	}

	.post-navigation {
		border-color: #2A2A2A;
	}

	.post-navigation a {
		color: var(--wp--preset--color--gold, #C9A84C);
	}

	.comments-area .comment-form input[type="text"],
	.comments-area .comment-form input[type="email"],
	.comments-area .comment-form input[type="url"],
	.comments-area .comment-form textarea {
		background-color: #1E1E1E;
		border-color: #3A3A3A;
		color: #E5E2DB;
	}

	.pagination-wrapper a,
	.pagination-wrapper span {
		border-color: #3A3A3A;
		color: #E5E2DB;
	}

	.pagination-wrapper a:hover,
	.pagination-wrapper .current {
		background-color: var(--wp--preset--color--gold, #C9A84C);
		color: #1A1A1A;
		border-color: var(--wp--preset--color--gold, #C9A84C);
	}

	/* Keep footer dark in both modes */
	.site-footer {
		background-color: #0A0A0A;
	}
}

/* ============================================
   WordPress admin bar adjustment
   ============================================ */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}