/*
 * Estilos estructurales de mocabi que no se pueden expresar en theme.json,
 * portados de la hoja "main" y el header de Oxygen.
 */

/* El header flota sobre el contenido, pegado arriba a la derecha. */
.mocabi-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.mocabi-header__menu {
	transition: background-color 0.2s ease;
}

.mocabi-header__menu:hover {
	background-color: var(--wp--preset--color--primary-light);
}

.mocabi-header__toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	align-self: flex-end;
}

/* El menú arranca cerrado; el logo lo abre y lo cierra. */
.mocabi-header__nav {
	display: none;
}

.mocabi-header.is-open .mocabi-header__nav {
	display: flex;
}

/* Selección de texto en amarillo primario, como en Oxygen. */
::selection {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent-1);
}

/* Botón con icono de olas mocabi. */
.wp-block-button.is-style-mocabi-olas .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}

.wp-block-button.is-style-mocabi-olas .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 3em;
	aspect-ratio: 64 / 12;
	margin-left: 0.5em;
	background-color: currentColor;
	-webkit-mask-image: url(../images/mocabi-olas.svg);
	mask-image: url(../images/mocabi-olas.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center right;
	mask-position: center right;
}

@media (max-width: 480px) {
	.mocabi-header {
		padding-right: 24px !important;
		padding-left: 24px !important;
	}
}