/*
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;
}

/* Exhibitions feed */
.exhibitions .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exhibition__row {
	gap: 2.25rem;
	align-items: start;
}
.exhibition .wp-block-post-featured-image {
	margin: 0;
}
.exhibition .wp-block-post-featured-image img {
	border-radius: 6px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.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;
}
.exhibition .wp-block-post-title {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}
.exhibition .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}
.exhibition .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	text-align: left;
}
.exhibition .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
}

/* 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;
}
.exhibition .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;
}

/* Mobile: stack the two-column rows */
@media (max-width: 600px) {
	.exhibition__row,
	.about-grid {
		gap: 1.5rem;
	}
	/* Stacked rows are visually closer, so the between-posts gap can shrink. */
	.exhibitions .wp-block-post-template {
		gap: 2.25rem;
	}
}