/*
Theme Name: Raíz y Espacio
Theme URI: https://raizyespacio.com/
Author: TenKeys
Description: Tema de bloques para raizyespacio.com. Reconstrucción del diseño original de Framer: cabecera azul claro, 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: raiz-y-espacio
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. */
.rye-meta {
	align-items: center;
}

.rye-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. */
.rye-hero {
	position: relative;
	overflow: hidden;
}

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

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

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

.rye-avatar img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* The header is light on this site, so nav and title keep the dark ink. */
.rye-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rye-header .wp-block-site-title a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

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

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

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

.rye-featured img,
.rye-hero img {
	border-radius: 10px;
}

@media (max-width: 781px) {
	.rye-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. 420px is over half a phone viewport; the hero only has to
	   frame the title and category. */
	.rye-hero {
		min-height: 300px !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,
	.rye-header .wp-block-site-title a,
	.rye-post-list .wp-block-post-title a {
		transition:
			color 0.2s ease,
			background-color 0.2s ease,
			opacity 0.2s ease;
	}
}

/* Author box closing each article: portrait left, name and bio right, matching
   the block the Framer original puts at the foot of a post. */
.rye-author-box {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.rye-author-box .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.rye-author-box .wp-block-post-author__name {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-bottom: var(--wp--preset--spacing--20);
}

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