/*
 * SeaPod — estilos de bloque para componentes del Design System.
 *
 * Solo apariencia que theme.json no puede expresar como estilo de bloque.
 * Todo consume tokens: color, spacing, radius, shadow, typography.
 * Sin !important, sin frameworks, sin JavaScript.
 */

/* ---------------------------------------------------------------- Botones */

.wp-block-button.is-style-seapod-button-primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	border: 1px solid transparent;
	color: var(--wp--preset--color--on-primary);
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.wp-block-button.is-style-seapod-button-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-seapod-button-primary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-seapod-button-secondary > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border: 1px solid transparent;
	color: var(--wp--preset--color--primary);
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.wp-block-button.is-style-seapod-button-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-seapod-button-secondary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.is-style-seapod-button-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: inherit;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.wp-block-button.is-style-seapod-button-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-seapod-button-outline > .wp-block-button__link:focus-visible {
	background-color: currentColor;
}

.wp-block-button.is-style-seapod-button-outline > .wp-block-button__link:hover .wp-block-button__link-text {
	color: var(--wp--preset--color--background);
}

.wp-block-button.is-style-seapod-button-ghost > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid transparent;
	color: inherit;
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	transition: color var(--wp--custom--transition--base);
}

.wp-block-button.is-style-seapod-button-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-seapod-button-ghost > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- Imágenes */

.wp-block-image.is-style-seapod-image-rounded img {
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-image.is-style-seapod-image-card img {
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--medium);
}

.wp-block-image.is-style-seapod-image-full-bleed img {
	border-radius: 0;
	width: 100%;
}

/* ------------------------------------------------------- Secciones y cajas */

.is-style-seapod-section {
	padding-block: var(--wp--preset--spacing--70);
}

.is-style-seapod-section-tight {
	padding-block: var(--wp--preset--spacing--60);
}

.is-style-seapod-surface {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
}

.is-style-seapod-surface-alt {
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--foreground);
}

.is-style-seapod-card {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--subtle);
	padding: var(--wp--preset--spacing--40);
}

.is-style-seapod-bordered {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------- Medios y responsive */

.wp-block-video video,
.wp-block-embed iframe {
	border-radius: var(--wp--custom--radius--md);
	max-width: 100%;
}

.wp-block-columns.is-style-seapod-card > .wp-block-column,
.wp-block-column.is-style-seapod-card {
	block-size: auto;
}

/* Mobile first: los detalles (FAQ) siempre legibles y sin desbordes. */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

/* -------------------------------------------- 0.3.1 — Alturas de sección */

/*
 * Alturas basadas en viewport: siempre min-height para que el contenido
 * pueda crecer y nunca se recorte en móvil.
 */
.is-style-seapod-h-50vh { min-height: 50vh; }
.is-style-seapod-h-75vh { min-height: 75vh; }
.is-style-seapod-h-100vh { min-height: 100vh; }

/* Columnas: igualar altura visual sin valores px (flex stretch nativo). */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
.wp-block-columns > .wp-block-column {
	align-self: stretch;
}

/* ------------------------------------------------------ Enlaces (0.3.1) */

.is-style-seapod-links-plain a:where(:not(.wp-element-button)) {
	text-decoration: none;
	/* Sin subrayado, pero con diferencia visual suficiente (color + peso). */
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

.is-style-seapod-links-plain a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-style-seapod-links-underline a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* focus-visible nunca se elimina: lo define assets/css/base.css. */

/* ------------------------------- Justificado (0.3.2, alineación nativa) */

/*
 * WordPress genera has-text-align-justify desde el atributo nativo de
 * alineación; no es un estilo de bloque, por lo que se combina con cualquier
 * preset tipográfico.
 */
.has-text-align-justify {
	text-align: justify;
	text-wrap: pretty;
	hyphens: none;
	overflow-wrap: break-word;
}

/* ------------------------------------------- Vídeo: relación de aspecto */

.wp-block-video.is-style-seapod-ratio-16-9 video,
.wp-block-embed.is-style-seapod-ratio-16-9 iframe { aspect-ratio: 16 / 9; }

.wp-block-video.is-style-seapod-ratio-9-16 video,
.wp-block-embed.is-style-seapod-ratio-9-16 iframe { aspect-ratio: 9 / 16; }

.wp-block-video.is-style-seapod-ratio-1-1 video,
.wp-block-embed.is-style-seapod-ratio-1-1 iframe { aspect-ratio: 1 / 1; }

.wp-block-video[class*="is-style-seapod-ratio-"] video,
.wp-block-embed[class*="is-style-seapod-ratio-"] iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-embed[class*="is-style-seapod-ratio-"] .wp-block-embed__wrapper {
	position: static;
	padding-top: 0;
}

.wp-block-embed[class*="is-style-seapod-ratio-"] .wp-block-embed__wrapper::before {
	content: none;
}

/* ------------------------------- Móvil: nunca partir palabras con guion */

:where(body, h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote, .wp-block-heading) {
	hyphens: none;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Solo URLs y cadenas sin espacios reciben un corte de emergencia. */
:where(p, li) a[href]:where(:not([class])) {
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	:where(.wp-block-post-content, main) > * {
		max-width: 100%;
	}
}

/* --------------------------- Anchos globales (custom properties, 0.3.2) */

/*
 * Fuente única: el filtro wp_theme_json_data_theme inyecta
 * --seapod-content-width / --seapod-wide-width y actualiza contentSize y
 * wideSize, de modo que los layouts constrained nativos ya los consumen.
 * Estas reglas solo garantizan que nunca se produzca overflow.
 */
/*
 * No se redefine el layout nativo: WordPress ya genera las reglas de
 * contentSize/wideSize por contenedor (incluidos los contenedores con su
 * propio ancho). Solo se garantiza que `alignfull` nunca quede encajonado
 * y que no haya overflow horizontal en móvil.
 */
:where(.is-layout-constrained) > .alignfull {
	max-width: none;
}

:where(main.wp-block-group.is-layout-flow) > * {
	max-width: none;
}

/*
 * Solo `body` y con `clip` (no `hidden` ni en `html`): cualquier overflow
 * distinto de visible/clip en el elemento raíz convierte al documento en
 * contenedor de scroll y anula `position: sticky` en la cabecera.
 */
body {
	overflow-x: clip;
}



/* ============================================================ Cabecera 0.4.0 */

/*
 * El tamaño del logo se resuelve con custom properties inyectadas por
 * core/header-settings.php (SeaPod → Cabecera). height:auto evita deformar.
 */
.seapod-header .wp-block-site-logo img {
	width: var(--seapod-logo-width, 160px);
	height: auto;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.seapod-header .wp-block-site-logo img {
		width: var(--seapod-logo-width-tablet, 140px);
	}
}

@media (max-width: 600px) {
	.seapod-header .wp-block-site-logo img {
		width: var(--seapod-logo-width-mobile, 120px);
	}
}

/*
 * El Site Title es un enlace y heredaba el subrayado del estilo global de
 * enlaces. Se elimina la decoración por defecto SIN tocar focus-visible.
 */
.seapod-header .wp-block-site-title a,
.wp-block-site-title a {
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
}

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

.wp-block-site-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Móvil: el título nunca debe provocar overflow horizontal. */
@media (max-width: 600px) {
	.seapod-header .wp-block-site-title {
		overflow-wrap: anywhere;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Navegación por ubicación (bloque seapod/navigation-location).
 * Estructura mínima y accesible; el color/tipografía los aporta la
 * configuración de SeaPod → Cabecera → Menú (custom properties).
 * ------------------------------------------------------------------------ */
.seapod-navigation-location__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.seapod-navigation-location__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.seapod-navigation-location li {
	position: relative;
}

.seapod-navigation-location a {
	display: inline-block;
}

/* Submenús: se despliegan al pasar el cursor y al recibir foco por teclado. */
.seapod-navigation-location .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 20;
	min-width: 12rem;
	padding: var(--wp--preset--spacing--30, 1rem);
	background: var(--wp--preset--color--background, #fff);
	box-shadow: var(--wp--custom--shadow--soft, 0 8px 24px rgba(0, 0, 0, 0.12));
	opacity: 0;
	visibility: hidden;
}

.seapod-navigation-location li:hover > .sub-menu,
.seapod-navigation-location li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 781px) {
	.seapod-navigation-location__list {
		gap: var(--wp--preset--spacing--20, 0.5rem);
	}

	.seapod-navigation-location .sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		padding-block: 0;
	}
}