/*
Theme Name: F64 Theme
Theme URI: https://fabrica64.com
Author: Fábrica64 · ATOMX
Author URI: https://fabrica64.com
Description: Base block theme for Fábrica64 sites. Design tokens compile into theme.json; each site gets a generated child theme with its own colors, fonts, type scale and spacing. Accessible by default (WCAG 2.1 AA).
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: f64-theme
Domain Path: /languages
Tags: accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, one-column, template-editing, translation-ready, wide-blocks
*/

/* Estructura. El aspecto viene de theme.json (tokens); aquí solo lo que theme.json no expresa. */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.f64-site-header {
	padding-block: var(--wp--preset--spacing--sm);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.f64-main {
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--2-xl);
}

.f64-main.is-flush {
	padding-block-start: var(--wp--preset--spacing--lg);
}

/* Una portada con foto de fondo al principio de la página va pegada a la cabecera. */
.f64-main.is-flush:has(> .wp-block-post-content > .wp-block-f64-hero.is-arrangement-cover:first-child) {
	padding-block-start: 0;
}

/*
 * Una franja con fondo propio (tono distinto de default) al final de la página llega hasta el pie: el relleno inferior
 * del main dejaría una banda del color de la página entre los dos. Con o sin título. Una franja del tono de la página
 * o sin fondo (marquee) conserva el espacio, igual que un bloque core.
 */
.f64-main:has(> .wp-block-post-content > .alignfull:is(.wp-block-f64-section, .wp-block-f64-hero, .wp-block-f64-cta):not(.is-tone-default):last-child) {
	padding-block-end: 0;
}

.f64-site-footer {
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.f64-site-footer__legal {
	margin-block-start: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--muted-foreground);
}

.f64-post-card + .f64-post-card {
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-block-start: var(--wp--preset--spacing--lg);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.f64-hero {
	padding-block: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl);
}

.f64-section {
	padding-block: var(--wp--preset--spacing--xl);
}

.f64-cta {
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--xl);
}

.wp-block-details {
	padding-block: var(--wp--preset--spacing--sm);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 500;
}

/* Ritmo vertical del contenido (especificidad cero: cualquier estilo del editor lo sobrescribe). */

:where(.wp-block-post-content) > :where(h2) {
	margin-block-start: var(--wp--preset--spacing--xl);
}

:where(.wp-block-post-content) > :where(h3, .wp-block-columns) {
	margin-block-start: var(--wp--preset--spacing--lg);
}

:where(.wp-block-post-content) > :where(:first-child) {
	margin-block-start: 0;
}

:where(.f64-site-footer .wp-block-navigation) {
	--wp--style--block-gap: var(--wp--preset--spacing--xs);
}

/* Accesibilidad. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

img {
	height: auto;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}