/*
Theme Name: p26c
Theme URI: https://pablopostigo.com
Author: Pablo Postigo
Author URI: https://pablopostigo.com
Description: A minimal personal blog theme with light/dark mode support, featuring Inter and Space Mono fonts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: p26c
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks

A clean, minimal theme for a personal website and blog.
*/

/* ======================================
   CSS Custom Properties for Color Modes
   ====================================== */

:root {
	/* Light mode (default) */
	--color-background: #ffffff;
	--color-foreground: #1a1a1a;
	--color-muted: #666666;
	--color-border: #e0e0e0;
	--color-strong: #1a1a1a;
}

/* Dark mode when system prefers dark */
@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #1a1a1a;
		--color-foreground: #ffffff;
		--color-muted: #929292;
		--color-border: #333333;
		--color-strong: #e0e0e0;
	}
}

/* Apply color scheme to body */
body,
.wp-site-blocks {
	background-color: var(--color-background) !important;
	color: var(--color-foreground);
	color-scheme: light dark;
}

/* Override WordPress preset colors with CSS custom properties */
.has-background-color {
	color: var(--color-background) !important;
}

.has-foreground-color {
	color: var(--color-foreground) !important;
}

.has-muted-color {
	color: var(--color-muted) !important;
}

.has-background-background-color {
	background-color: var(--color-background) !important;
}

.has-foreground-background-color {
	background-color: var(--color-foreground) !important;
}

/* Site title */
.wp-block-site-title,
.wp-block-site-title a {
	color: var(--color-foreground) !important;
}

/* Navigation links */
.wp-block-navigation-item a {
	color: var(--color-muted) !important;
	transition: color 0.2s ease-in-out;
}

.wp-block-navigation-item a:hover {
	color: var(--color-foreground) !important;
}

/* Post titles */
.wp-block-post-title,
.wp-block-post-title a {
	color: var(--color-foreground) !important;
}

/* Post date */
.wp-block-post-date {
	color: var(--color-muted) !important;
}

/* Paragraphs */
.wp-block-paragraph,
.entry-content p,
.wp-block-post-content p {
	color: var(--color-muted) !important;
}

/* Strong text in paragraphs - color override for dark mode */
.wp-block-paragraph strong,
.entry-content strong,
.wp-block-post-content strong,
p strong,
strong {
	color: var(--color-strong) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	color: var(--color-foreground);
}

/* Links */
a,
.wp-block-paragraph a,
.entry-content a,
.wp-block-post-content a {
	color: var(--color-foreground) !important;
}

/* Separator */
.wp-block-separator {
	border-color: var(--color-border) !important;
	background-color: var(--color-border) !important;
}

/* Dots separator style */
.wp-block-separator.is-style-dots {
	color: var(--color-muted) !important;
	background-color: transparent !important;
	border: none !important;
}

/* Query title (archive, search) */
.wp-block-query-title {
	color: var(--color-foreground);
}

/* ======================================
   Link Underline Styles
   ====================================== */

/* Base link styles - no underline by default */
a {
	text-decoration: none !important;
}

/* Exclude buttons, skip links, and pagination from underline */
.wp-block-button a,
.skip-link,
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers a {
	background-image: none !important;
}

/* Site title link - underline from left to right on hover */
.wp-block-site-title a {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 0% 1px;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.3s ease-in-out;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wp-block-site-title a:hover {
	background-size: 100% 1px;
}

/* Navigation link - underline from left to right on hover */
.wp-block-navigation-item a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 0% 1px;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.3s ease-in-out;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wp-block-navigation-item a:hover {
	background-size: 100% 1px;
}

/* Animated arrow nav links */
.has-arrow .wp-block-navigation-item__label::after {
	content: " \2192";
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease-in-out;
}

.has-arrow a:hover .wp-block-navigation-item__label::after {
	transform: translateX(4px);
}

.has-arrow-back .wp-block-navigation-item__label::before {
	content: "\2190 ";
	display: inline-block;
	margin-right: 4px;
	transition: transform 0.2s ease-in-out;
}

.has-arrow-back a:hover .wp-block-navigation-item__label::before {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.has-arrow .wp-block-navigation-item__label::after,
	.has-arrow-back .wp-block-navigation-item__label::before {
		transition: none;
	}
	.has-arrow a:hover .wp-block-navigation-item__label::after,
	.has-arrow-back a:hover .wp-block-navigation-item__label::before {
		transform: none;
	}
}

/* Current page highlight in navigation */
.wp-block-navigation-item.current-menu-item a,
.wp-block-navigation-item.current_page_item a {
	color: var(--color-foreground) !important;
	background-size: 0% 1px !important;
}

/* Post title link - underline from left to right on hover */
.wp-block-post-title a {
	display: inline !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-position: 0 100%;
	background-size: 0% 2px;
	background-repeat: no-repeat;
	padding-bottom: 4px;
	transition: background-size 0.3s ease-in-out;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wp-block-post-title a:hover {
	background-size: 100% 2px;
}

/* Inline content links */
.entry-content a,
.wp-block-paragraph a {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 0% 1px;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.3s ease-in-out;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.entry-content a:hover,
.wp-block-paragraph a:hover {
	background-size: 100% 1px;
}

/* ======================================
   Front Page Vertical Centering
   ====================================== */

/* On large screens, vertically center the front page content */
@media (min-height: 700px) and (min-width: 1024px) {
	body.home .wp-site-blocks {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	body.home .wp-site-blocks > main {
		flex: 1;
		display: flex;
		align-items: center;
		padding-top: 0 !important;
	}
}

/* ======================================
   Post List Layout
   ====================================== */

/* On non-mobile screens, keep dates right-aligned while titles wrap */
@media (min-width: 769px) {
	.wp-block-post-template .wp-block-post-title {
		flex: 1 1 0%;
		min-width: 0;
	}

	.wp-block-post-template .wp-block-post-date {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* ======================================
   Mobile Responsive
   ====================================== */

@media (max-width: 768px) {
	/* Reduce left margin to 24px on mobile */
	.wp-site-blocks header.wp-block-group,
	.wp-site-blocks main.wp-block-group {
		padding-left: 24px !important;
	}

	/* Post list: stack title and date vertically on mobile */
	.wp-block-post-template .wp-block-group.is-layout-flex {
		flex-wrap: wrap !important;
	}

	.wp-block-post-template .wp-block-post-title {
		width: 100%;
	}

	.wp-block-post-template .wp-block-post-date {
		width: 100%;
	}
}

/* ======================================
   Pagination
   ====================================== */

.wp-block-query-pagination {
	gap: 16px;
	margin-top: 64px !important;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
	align-items: center;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	font-size: 13px;
	color: var(--color-muted);
	text-decoration: none !important;
	background-image: none !important;
	border-radius: 4px;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.wp-block-query-pagination-numbers .page-numbers:hover {
	color: var(--color-foreground);
	background-color: var(--color-border);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--color-foreground);
	font-weight: 600;
	background-color: var(--color-border);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: auto;
	padding: 0 2px;
	background: none;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	font-size: 13px;
	color: var(--color-muted) !important;
	transition: color 0.2s ease-in-out;
}

.wp-block-query-pagination-next a,
.wp-block-query-pagination-previous a {
	color: var(--color-muted) !important;
}

.wp-block-query-pagination-next a:hover,
.wp-block-query-pagination-previous a:hover {
	color: var(--color-foreground) !important;
}

/* ======================================
   Post List Spacing
   ====================================== */

.wp-block-post-template {
	gap: 0 !important;
}

.wp-block-post-template .wp-block-post {
	padding: 5px 0;
	transition: transform 0.2s ease-in-out;
}

.wp-block-post-template .wp-block-post:hover {
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-template .wp-block-post {
		transition: none;
	}
	.wp-block-post-template .wp-block-post:hover {
		transform: none;
	}
}

/* ======================================
   More Posts Section (Single Post)
   ====================================== */

.more-posts-section .wp-block-post-template {
	gap: 2px !important;
}

/* More Posts label — uses Space Mono for contrast */
.more-posts-label {
	color: var(--color-muted) !important;
	margin-bottom: 8px;
}

/* Dots separator — visible by default (for editor & no-JS) */
.more-posts-section .wp-block-separator.is-style-dots {
	transition: opacity 0.6s ease-in-out;
}

/* JS adds this class; then IntersectionObserver reveals it */
.more-posts-section .wp-block-separator.is-style-dots.scroll-hidden {
	opacity: 0;
}

.more-posts-section .wp-block-separator.is-style-dots.scroll-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.more-posts-section .wp-block-separator.is-style-dots {
		transition: none;
	}
}

/* ======================================
   Utility Classes
   ====================================== */

/* 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(--color-background);
	clip: auto !important;
	clip-path: none;
	color: var(--color-foreground);
	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;
}