/**
 * MetroPress Custom Styles
 *
 * Additional styles that complement theme.json settings.
 * These are minimal and focused on things that can't be achieved with theme.json alone.
 */

/* ========================================
   Base & Reset Enhancements
   ======================================== */

/* Improve text rendering */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ========================================
   Navigation Enhancements
   ======================================== */

/* Navigation sticky behavior */
@media (min-width: 782px) {
	.wp-block-navigation {
		padding-block: var(--wp--preset--spacing--30);
	}

	.wp-block-navigation__container {
		gap: var(--wp--preset--spacing--40);
	}
}

/* Mobile navigation overlay improvements */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}

/* Navigation current item indicator */
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current_page_item > a {
	color: var(--wp--preset--color--accent);
}

/* ========================================
   Article & Content Styling
   ======================================== */

/* Article content links within body text */
.entry-content a:not(.wp-block-button__link):not(.wp-block-file__button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.entry-content a:not(.wp-block-button__link):not(.wp-block-file__button):hover {
	text-decoration-thickness: 2px;
}

/* Drop cap styling for first paragraph */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	margin-right: 0.1em;
}

/* ========================================
   Post Card Hover Effects
   ======================================== */

/* Image hover effect for post cards */
.wp-block-post-featured-image a {
	display: block;
	overflow: hidden;
	border-radius: 4px;
}

.wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--normal);
}

.wp-block-post-featured-image a:hover img,
.wp-block-post-featured-image a:focus img {
	transform: scale(1.03);
}

/* Post title hover transition */
.wp-block-post-title a {
	transition: color var(--wp--custom--transition--fast);
}

/* ========================================
   Sidebar Styling
   ======================================== */

/* Sticky sidebar */
@media (min-width: 782px) {
	.wp-block-column[style*="33.33%"] > .wp-block-group[style*="sticky"] {
		top: var(--wp--preset--spacing--50);
	}
}

/* Most read list styling */
.metropress-most-read,
.metropress-most-read-fallback {
	list-style: none;
	padding-left: 0;
	margin: 0;
	counter-reset: most-read;
}

.metropress-most-read li,
.metropress-most-read-fallback li {
	counter-increment: most-read;
	position: relative;
	padding-left: 2.5rem;
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.metropress-most-read li:last-child,
.metropress-most-read-fallback li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.metropress-most-read li::before,
.metropress-most-read-fallback li::before {
	content: counter(most-read);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

.metropress-most-read li a,
.metropress-most-read-fallback li a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	display: block;
}

.metropress-most-read li a:hover,
.metropress-most-read-fallback li a:hover {
	color: var(--wp--preset--color--accent);
}

.metropress-most-read__meta {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-muted);
	margin-top: var(--wp--preset--spacing--10);
}

/* ========================================
   Ad Slot Styling
   ======================================== */

/* Ad slot placeholders */
.metropress-ad-slot {
	background-color: var(--wp--preset--color--background-alt);
	border: 1px dashed var(--wp--preset--color--border);
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.metropress-ad-slot::before {
	content: 'Advertisement';
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* When ad is loaded, hide placeholder text */
.metropress-ad-slot.has-ad::before {
	display: none;
}

/* Specific ad slot sizes */
.metropress-ad-slot--header_leaderboard {
	min-height: 90px;
	max-width: 728px;
	margin: 0 auto;
}

.metropress-ad-slot--sidebar_top,
.metropress-ad-slot--sidebar_bottom {
	min-height: 250px;
}

.metropress-ad-slot--in_article_1,
.metropress-ad-slot--in_article_2 {
	margin: var(--wp--preset--spacing--50) 0;
}

.metropress-ad-slot--footer_banner {
	min-height: 90px;
	max-width: 970px;
	margin: 0 auto;
}

/* ========================================
   Responsive Grid Adjustments
   ======================================== */

/* Mobile-first: Single column by default */
@media (max-width: 781px) {
	/* Stack columns on mobile */
	.wp-block-columns {
		flex-wrap: wrap;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Adjust query loop grid on mobile */
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* Reduce spacing on mobile */
	.wp-block-group.alignwide {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}

	/* Article card mobile layout */
	.wp-block-columns:has(.wp-block-post-featured-image) .wp-block-column[style*="35%"],
	.wp-block-columns:has(.wp-block-post-featured-image) .wp-block-column[style*="40%"] {
		flex-basis: 100% !important;
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

/* Tablet adjustments */
@media (min-width: 782px) and (max-width: 1024px) {
	.wp-block-post-template.is-layout-grid[style*="columnCount:4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================================
   Focus & Accessibility
   ======================================== */

/* Improved focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	z-index: 100000;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* Screen reader text */
.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;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--background);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--foreground);
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
	/* Hide non-essential elements */
	header,
	footer,
	nav,
	.sidebar,
	.metropress-ad-slot,
	.social-links,
	.comments-area,
	.navigation {
		display: none !important;
	}

	/* Ensure content is readable */
	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	/* Show URLs for links */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}

	/* Ensure images don't break across pages */
	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	/* Prevent headings from being orphaned */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
}

/* ========================================
   Animation & Transitions
   ======================================== */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Smooth scroll for anchors */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ========================================
   Breadcrumbs
   ======================================== */

.breadcrumbs {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--40);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumbs__item a {
	color: var(--wp--preset--color--foreground-muted);
	text-decoration: none;
}

.breadcrumbs__item a:hover {
	color: var(--wp--preset--color--accent);
}

.breadcrumbs__separator {
	color: var(--wp--preset--color--foreground-muted);
}

.breadcrumbs__item [aria-current="page"] {
	color: var(--wp--preset--color--foreground);
	font-weight: 500;
}