/* ==========================================================================
   Josep Morán — estilos dark-mode a medida (cargados en FRONT-END y EDITOR)
   Lo que NO se puede expresar como estilo global de theme.json vive aquí:
   el anillo de borde con degradado neón de los botones y del marco del pòdcast.
   (Tipografías, paleta y estilos base de botón viven en los estilos globales /
   post de estilos de usuario, y ya se reflejan solos en el editor.)
   ========================================================================== */

/* ---- Botones: sistema unificado con borde de degradado neón (lima → violeta) ---- */
.wp-block-button__link,
.wp-element-button,
.wppc-card__all,
.wpforms-container .wpforms-submit {
	position: relative;
	transition: background-color .15s ease, color .15s ease;
}

.wp-block-button__link::before,
.wp-element-button::before,
.wppc-card__all::before,
.wpforms-container .wpforms-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #D5FF02), var(--wp--preset--color--accent-7, #B026FF));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	transition: filter .2s ease;
	filter: drop-shadow(0 0 1px var(--wp--preset--color--accent-1, #D5FF02)) drop-shadow(0 0 4px var(--wp--preset--color--accent-7, #B026FF));
}

/* El "Enviar" de WPForms no es un bloque de Gutenberg: se le dan aquí los mismos
   valores que al botón de referencia (los de Gutenberg los heredan de los estilos globales). */
.wpforms-container .wpforms-submit {
	background-color: var(--wp--preset--color--base, #121212) !important;
	color: var(--wp--preset--color--accent-1, #D5FF02) !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	padding: .85rem 1.3rem !important;
	font-family: inherit !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}

/* Hover: el anillo se mantiene; cambian fondo (accent-3) y texto (negro). */
.wp-block-button__link:hover, .wp-block-button__link:focus-visible,
.wp-element-button:hover, .wp-element-button:focus-visible,
.wppc-card__all:hover, .wppc-card__all:focus-visible,
.wpforms-container .wpforms-submit:hover, .wpforms-container .wpforms-submit:focus-visible {
	background-color: var(--wp--preset--color--accent-3, #A6A6A6) !important;
	color: var(--wp--preset--color--base, #121212) !important;
}

.wp-block-button__link:hover::before, .wp-block-button__link:focus-visible::before,
.wp-element-button:hover::before, .wp-element-button:focus-visible::before,
.wppc-card__all:hover::before, .wppc-card__all:focus-visible::before,
.wpforms-container .wpforms-submit:hover::before, .wpforms-container .wpforms-submit:focus-visible::before {
	filter: drop-shadow(0 0 2px var(--wp--preset--color--accent-1, #D5FF02)) drop-shadow(0 0 7px var(--wp--preset--color--accent-7, #B026FF));
}

/* ---- Marco exterior del patrón WPpodcast: degradado neón de 4px ---- */
.wppc-outerframe {
	position: relative;
}

.wppc-outerframe::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 4px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #D5FF02), var(--wp--preset--color--accent-7, #B026FF));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	filter: drop-shadow(0 0 1px var(--wp--preset--color--accent-1, #D5FF02)) drop-shadow(0 0 4px var(--wp--preset--color--accent-7, #B026FF));
}

/* ---- Marco de tarjeta individual (posts del Blog): mismo anillo neón que las tarjetas de WPpodcast, grosor 2px ---- */
.wppc-postcard {
	position: relative;
	transition: transform .2s ease;
}

.wppc-postcard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #D5FF02), var(--wp--preset--color--accent-7, #B026FF));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	transition: filter .2s ease;
	filter: drop-shadow(0 0 1px var(--wp--preset--color--accent-1, #D5FF02)) drop-shadow(0 0 4px var(--wp--preset--color--accent-7, #B026FF));
}

.wppc-postcard:hover {
	transform: translateY(-3px);
}

.wppc-postcard:hover::before {
	filter: drop-shadow(0 0 2px var(--wp--preset--color--accent-1, #D5FF02)) drop-shadow(0 0 7px var(--wp--preset--color--accent-7, #B026FF));
}

/* ==========================================================================
   Rejillas de entradas (Blog y archivos de categoría): la tarjeta siempre
   contiene su contenido. Sin esto, una entrada larga desbordaba la tarjeta y
   se montaba encima de la de al lado.
   ========================================================================== */

/* Los elementos de una rejilla CSS no se encogen por debajo de su contenido si
   no se les da min-width:0. */
.wp-block-post-template.is-layout-grid > li,
.wp-block-post-template.is-flex-container > li {
	min-width: 0;
}

/* La tarjeta ocupa toda su celda: todas las de una misma fila, igual de altas. */
.wp-block-post-template > li > .wp-block-group {
	box-sizing: border-box;
	height: 100%;
}

/* Ninguna pieza de la tarjeta puede ser más ancha que la propia tarjeta. */
.wp-block-post-template > li > .wp-block-group > *,
.wp-block-post-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-post-excerpt {
	min-width: 0;
	max-width: 100%;
}

/* Palabras o URLs muy largas parten de línea en vez de estirar la tarjeta. */
.wp-block-post-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-post-excerpt__excerpt {
	overflow-wrap: break-word;
}