/*
Theme Name: Eduardo Sierra
Theme URI: https://eduardosierra.com/
Author: TenKeys
Description: Tema de bloques para eduardosierra.com. Reconstrucción del diseño original de Framer: cabecera granate, tipografía Playfair Display + Montserrat y listados editoriales.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eduardo-sierra
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, custom-colors
*/

/*
 * Nearly all styling lives in theme.json so it stays editable in the site editor.
 * Only what theme.json cannot express belongs here.
 */

/* Framer drew the section rules as a dotted line rather than a solid separator. */
.wp-block-separator.is-style-dotted-rule {
	border: none;
	border-top: 2px dotted var(--wp--preset--color--rule);
	height: 0;
	opacity: 1;
	background: none;
}

/* Meta row: date and category separated by a vertical divider, as on the original. */
.es-meta {
	align-items: center;
}

.es-meta > .wp-block-post-date + .wp-block-post-terms::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin-right: 0.75em;
	vertical-align: -0.1em;
	background: var(--wp--preset--color--rule);
}

/* Hero card: title and meta sit over the image, bottom-left. */
.es-hero {
	position: relative;
	overflow: hidden;
}

.es-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Post list rows are separated by generous space, not borders. */
.es-post-list .wp-block-post {
	margin-bottom: var(--wp--preset--spacing--60);
}

.es-post-list .wp-block-post:last-child {
	margin-bottom: 0;
}

/* The author card image is a circle on every breakpoint. */
.es-avatar img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Navigation sits on the dark header, so links invert. */
.es-header .wp-block-navigation a,
.es-header .wp-block-site-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.es-header .wp-block-navigation a:hover,
.es-header .wp-block-site-title a:hover {
	opacity: 0.75;
}

/* Single-post body: Framer used a narrower measure than the page container. */
.es-entry-content > * {
	margin-block: var(--wp--preset--spacing--40);
}

.es-entry-content h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Featured images keep the soft corner radius from the original. */
.es-featured img,
.es-hero img {
	border-radius: 10px;
}

@media (max-width: 781px) {
	/* Stack the sidebar under the content rather than squeezing it. */
	.es-with-sidebar {
		gap: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 600px) {
	/* The cover block writes min-height inline, so overriding it needs the
	   !important. 460px is over half a phone viewport; the hero only has to
	   frame the title and category. */
	.es-hero {
		min-height: 320px !important;
	}
}

/*
 * Hover states ease instead of snapping.
 *
 * This is the one deliberate departure from the Framer original, which changes
 * link colour instantly. Nothing moves and no layout is affected — only the
 * colour and opacity changes are given a duration. Gated on prefers-reduced-
 * motion, so visitors who ask for less motion get the original snap behaviour.
 */
@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-block-button__link,
	.wp-block-navigation a,
	.wp-block-social-link,
	.es-header .wp-block-site-title a,
	.es-post-list .wp-block-post-title a {
		transition:
			color 0.2s ease,
			background-color 0.2s ease,
			opacity 0.2s ease;
	}
}

/* The article body sits in a narrower measure than the page container, and the
   featured image in a slightly wider one — both taken from the original. */
.es-entry-content p {
	line-height: 1.7;
}

/* Archive sidebar category list: the original shows plain uppercase items with
   no bullets and no link colour. */
.wp-block-categories-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.wp-block-categories-list li {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-categories-list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}