/*
Theme Name: Tema Javier
Theme URI: https://garcía-valiño.es
Description: Child theme for garciavalino — a watercolour portfolio/blog for Javier García-Valiño. Design tokens live in theme.json; this file holds layout niceties.
Author: David Alfonso
Template: twentytwentyfive
Version: 1.0.0
Text Domain: javier-theme
*/

/* Sticky translucent header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-block: 1.25rem;
}
/* Blur/translucent backdrop lives on a pseudo-element so the header itself is
   NOT a containing block for the fixed mobile nav overlay. backdrop-filter on
   .site-header would clamp the overlay to the header's height, hiding all menu
   items but the first. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in oklab, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-header__inner {
	align-items: center;
}
.site-brand,
.site-brand a {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--contrast);
}
.site-nav {
	font-size: 0.95rem;
	letter-spacing: 0.4px;
}

/* Hero intro */
.hero-intro {
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 640px;
	margin: 0;
}

/* Post cards feed (frontpage / archive / search) — image-forward 2-col grid. */
.exhibitions .wp-block-post-template.post-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.5rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.post-cards > li {
	margin: 0;
}
.post-card__image {
	margin: 0 0 1rem;
}
.post-card__image img {
	width: 100%;
	border-radius: 6px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.eyebrow {
	font-size: 0.8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
	row-gap: 2px;
	column-gap: 0;
}
.eyebrow * {
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}
.post-cards .post-card__title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 0.35rem;
}
.post-cards .post-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.post-cards .post-card__title a:hover {
	color: var(--wp--preset--color--accent);
}
.post-cards .post-card__date {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Pagination — detached, centered row: Prev · "Página X de Y" · Next.
   Override the block's space-between so nothing splits onto separate lines. */
.exhibitions .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	font-family: var(--wp--preset--font-family--jost);
}
/* Middle status label (rendered from functions.php via render_block filter). */
.pagination-status {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	align-self: center;
}
/* Prev / Next: the primary action — accent, bold, larger. */
.exhibitions .wp-block-query-pagination-previous,
.exhibitions .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}
.exhibitions .wp-block-query-pagination-previous:hover,
.exhibitions .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
}

/* Placeholder box for missing images */
.image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	border-radius: 6px;
	border: 1px dashed var(--wp--preset--color--accent);
	background: color-mix(in oklab, var(--wp--preset--color--surface) 55%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
}
.post-cards .image-placeholder {
	aspect-ratio: 4 / 3;
}
.about-portrait .image-placeholder {
	aspect-ratio: 1;
}
.about-portrait-img {
	margin: 0;
}
.about-portrait-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* About */
.about-grid {
	gap: 3rem;
	align-items: start;
}
.expo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.expo-list li {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	font-size: 0.97rem;
	color: var(--wp--preset--color--contrast);
}
.expo-list .year {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	min-width: 44px;
}

/* Contact — WPForms styled to match theme.
   Modern markup sets its look via --wpforms-* custom properties applied
   INLINE on .wpforms-container, so overrides need !important to win. */
.contact-section .wpforms-container {
	--wpforms-field-border-color: var(--wp--preset--color--border) !important;
	--wpforms-field-border-radius: 4px !important;
	--wpforms-field-background-color: oklch(98% 0.008 65) !important;
	--wpforms-field-text-color: var(--wp--preset--color--contrast) !important;
	--wpforms-button-background-color: var(--wp--preset--color--accent) !important;
	--wpforms-button-text-color: var(--wp--preset--color--base) !important;
	--wpforms-button-border-radius: 4px !important;
	/* left-align: is-layout-constrained forces margin:auto !important on children */
	max-width: 440px;
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* font-family is not a WPForms variable, so set it on the elements directly */
.contact-section .wpforms-field-label,
.contact-section .wpforms-field input,
.contact-section .wpforms-field textarea,
.contact-section .wpforms-submit {
	font-family: var(--wp--preset--font-family--jost);
}
.contact-section .wpforms-field input:focus,
.contact-section .wpforms-field textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
}

/* Single: match the gap between post-navigation and comments to the default
   block gap (1.2rem) used around the tags. Both core patterns hard-code large
   inline margins (spacing|60 / spacing|70), so override with !important; the two
   adjacent margins collapse to the larger, so setting both to block-gap wins. */
.wp-block-group.alignwide:has(> nav[aria-label]) {
	margin-bottom: var(--wp--style--block-gap) !important;
}
.wp-block-comments-query-loop {
	margin-top: var(--wp--style--block-gap) !important;
}

/* Single: shrink the huge gap above "Más entradas" (core pattern hard-codes
   padding-top:spacing|60). Comments margin-bottom is already 0 in the template. */
.wp-block-group.alignwide:has(> .wp-block-query) {
	padding-top: var(--wp--preset--spacing--30) !important;
}

/* Footer — surface band, distinct from the base/crema contact section above it. */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 0;
}
.site-footer__cols {
	align-items: start;
	gap: 3rem;
	margin: 0;
}
.footer-brand__name {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.5rem;
}
.footer-brand__name a {
	color: inherit;
	text-decoration: none;
}
.footer-heading {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.9rem;
}
.footer-cats ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.9;
}
.footer-cats a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.footer-cats a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
/* Minimal: borderless field with a thin underline and an inline icon button. */
.footer-search .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
}
.footer-search .wp-block-search__input {
	max-width: 100%;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--jost);
	padding-left: 0;
}
.footer-search .wp-block-search__input:focus {
	outline: none;
}
.footer-search:focus-within .wp-block-search__inside-wrapper {
	border-bottom-color: var(--wp--preset--color--accent);
}
.footer-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 0;
	padding: 0.25rem 0.4rem;
	cursor: pointer;
	transition: color 0.15s ease;
}
.footer-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--accent);
}
.footer-search .wp-block-search__button svg {
	fill: currentColor;
}

/* Mobile: stack the two-column rows */
@media (max-width: 600px) {
	.about-grid {
		gap: 1.5rem;
	}
	/* Post cards collapse to a single column; tighten the between-cards gap. */
	.exhibitions .wp-block-post-template.post-cards {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	/* Footer columns are already stacked by core (is-stacked-on-mobile); tighten
	   the vertical rhythm between the stacked brand / categorías / buscar blocks. */
	.site-footer__cols {
		gap: 2rem;
	}
	/* Pagination: stack centered so long labels never split awkwardly.
	   Core puts auto side-margins on Prev/Next (to spread them in a row); zero
	   them and center every item on the cross axis when stacked. */
	.exhibitions .wp-block-query-pagination {
		flex-direction: column;
		align-items: center;
		gap: 0.9rem;
	}
	.exhibitions .wp-block-query-pagination > * {
		margin: 0 !important;
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}