/**
 * Maria Fornet — designed content pages (mf-page template).
 * The page design lives in block attributes + theme.json variations.
 * This file only holds what theme.json cannot express per-instance:
 * responsive step overrides of custom tokens, and one inline-decoration rule.
 */

/* Breakpoint step overrides (design: 860px and 480px). */
@media (max-width: 860px) {
	:root {
		--wp--custom--page-space--cierre-margin: 100px;
		--wp--custom--page-space--cierre-pad: 90px;
		--wp--custom--page-space--section-lg: 110px;
	}
}

@media (max-width: 480px) {
	:root {
		--wp--custom--page-space--hero: 56px;
		--wp--custom--page-space--section: 72px;
		--wp--custom--page-space--section-lg: 72px;
	}
}

/* Capital Femenino wordmark: enlace burdeos + punto dorado final.
   Los enlaces de enlace a texto solo son alcanzables con CSS. */
.cf-wordmark a {
	color: var(--wp--preset--color--burgundy);
	text-decoration: none;
}

.cf-wordmark__dot {
	color: var(--wp--preset--color--gold);
}

/* Palabras de acento burdeos dentro de titulares CF. */
.cf-title-accent {
	color: var(--wp--preset--color--burgundy);
}

/* Pie mínimo de páginas privadas CF: enlaces tinta sin subrayado. */
.cf-footer-min a {
	color: inherit;
	text-decoration: none;
}

/* Retrato del hero de la Aplicación: alturas por breakpoint
   (la portada de la foto no admite estados responsive en atributos). */
.cf-hero-photo {
	min-height: 520px;
}

@media (max-width: 860px) {
	.cf-hero-photo {
		min-height: 300px;
	}
}

/* Gold bar under "Capital Femenino" inside the cierre headline.
   Inline span styling is not expressible in block attributes. */
.mf-clases__u {
	border-bottom: 5px solid var(--wp--preset--color--gold);
}

/* Same underline treatment for the designed pages (shared classes,
   reused by Convierte/El Audiario/Substack). */
.mf-u {
	border-bottom: 5px solid var(--wp--preset--color--gold);
}

.mf-u--4 {
	border-bottom: 4px solid var(--wp--preset--color--gold);
}

/* FAQ accordion (design system shared by the masterclass pages):
   the toggle icon is a core-rendered span, not a block — color, size
   and hover behavior can only be reached here. */
.wp-block-accordion .wp-block-accordion-heading__toggle {
	align-items: baseline;
	gap: 24px;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--gold-dark);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 22px;
	font-weight: 400;
	flex: none;
}

.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Inversión CTA: designed min-width; not expressible per-instance. */
.mf-btn-cta .wp-block-button__link {
	min-width: 280px;
}

/* Ink-colored mail link inside the gold cierre band. */
.mf-ink-link {
	color: var(--wp--preset--color--ink);
}

/* The mf-card variations set their hover/focus transition in theme.json css,
   which cannot carry a media query (@media inside css breaks the parser). */
@media (prefers-reduced-motion: reduce) {
	[class*="is-style-mf-card-"] {
		transition: none;
	}
}
/* ---- Capital Femenino — estilos de variación de bloque (en el theme nuevo
   viven en theme.json styles.blocks variations; aquí, como CSS) ---- */

.is-style-cf-label,
.is-style-cf-label-gold {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.is-style-cf-label-gold {
	color: var(--wp--preset--color--gold);
}

.is-style-cf-label-muted {
	color: var(--wp--custom--tint--ink-60);
}


/* Landing template (páginas diseñadas sobre Genesis): la página trae su
   propio contenedor de 1240px con márgenes internos — anula la restricción
   de .site-inner de la plantilla Market y los paddings del entry. */
.market-landing .site-inner,
.market-landing .wrap,
.market-landing main.content,
.market-landing .content-sidebar-wrap,
.market-landing .entry,
.market-landing .entry-content {
	width: auto;
	max-width: 1240px;
	padding: 0;
}

/* Landing template: las páginas diseñadas traen su propio H1;
   el entry-header de Genesis duplicaría el título. */
.market-landing .entry-header {
	display: none;
}

/* Botones CF (is-style-cf-button): Genesis estiliza los botones base con su
   propio sistema — reafirmamos el diseño CF con especificidad suficiente. */
.market-landing .wp-block-button.is-style-cf-button .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	padding: 18px 20px;
	border-radius: 0;
	text-align: center;
	transition: background 0.28s ease, color 0.28s ease;
}

.market-landing .wp-block-button.is-style-cf-button .wp-block-button__link:hover,
.market-landing .wp-block-button.is-style-cf-button .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* El theme clásico impone color h1..h6 (0,0,1); en las secciones CF el color
   lo define el contenedor (has-cream/ink/…-color), de donde los headings deben
   heredar. Los headings con color propio llevan has-text-color y quedan fuera. */
.market-landing [class*="has-cream-color"] :is(h1,h2,h3,h4,h5,h6):not([class*="has-text-color"]),
.market-landing [class*="has-ink-color"] :is(h1,h2,h3,h4,h5,h6):not([class*="has-text-color"]),
.market-landing [class*="has-burgundy-color"] :is(h1,h2,h3,h4,h5,h6):not([class*="has-text-color"]),
.market-landing [class*="has-gold-color"] :is(h1,h2,h3,h4,h5,h6):not([class*="has-text-color"]) {
	color: inherit;
}