/**
 * Mar em Movimento — estilos complementares ao theme.json.
 *
 * Aqui ficam apenas os estilos que o theme.json ainda não expressa:
 * estilos de bloco (formas orgânicas, ondas, carrossel), cabeçalho fixo,
 * detalhes de acessibilidade e microinterações.
 * Carregado no site e no editor (add_editor_style).
 */

/* -------------------------------------------------------------------------
 * 1. Tokens locais
 * ---------------------------------------------------------------------- */
:root {
	--mm-onda-h: clamp(24px, 4vw, 56px);
	--mm-transicao: var(--wp--custom--transition, 200ms ease);
	--mm-foco: 0 0 0 3px var(--wp--preset--color--areia, #fbf8f3), 0 0 0 6px var(--wp--preset--color--oceano, #428e95);
	--mm-header-h: var(--wp--custom--header-height, 84px);

	/* Formas reutilizáveis (SVG inline, sem requisições extras). */
	--mm-forma-bolha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-80 -80 160 160' preserveAspectRatio='none'%3E%3Cpath d='M44.6-58.3C56.9-47.3 64.8-31.9 69.3-15.1 73.8 1.8 74.9 20 67.2 33.6 59.5 47.2 43.1 56.1 26 63.1 8.9 70.1-8.8 75.2-25.1 70.7-41.4 66.3-56.3 52.3-65.5 35.4-74.7 18.5-78.2-1.4-72.8-18.6-67.4-35.8-53.1-50.3-37.4-60.8-21.7-71.3-4.6-77.8 11.2-75.6 27-73.4 32.3-69.3 44.6-58.3Z'/%3E%3C/svg%3E");
	--mm-forma-bolha-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 4C36-2 60 2 78 8s22 20 21 38-4 30-14 40-30 14-48 12S4 90 1 72 2 38 6 24 8 8 20 4Z'/%3E%3C/svg%3E");
	--mm-forma-onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 0H100V86C88 98 74 88 60 93S30 100 16 95 0 84 3 70 7 52 3 38 1 12 10 0Z'/%3E%3C/svg%3E");
	--mm-onda-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1260 78 1080 12 900 34S540 80 360 50 120 18 0 46Z'/%3E%3C/svg%3E");
	--mm-onda-topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 4 360 58 540 40S900 0 1080 26 1320 62 1440 30V80H0Z'/%3E%3C/svg%3E");
	--mm-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	--mm-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * 2. Base e acessibilidade
 * ---------------------------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--mm-header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

p {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--areia-laranja);
	color: var(--wp--preset--color--marinho);
}

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

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--marinho);
	color: var(--wp--preset--color--branco);
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	padding: 0.9rem 1.2rem;
	z-index: 100000;
}

img {
	height: auto;
	max-width: 100%;
}

/*
 * Cabeçalho, conteúdo, chamada para contato e rodapé encostam uns nos outros:
 * cada seção já define o próprio respiro interno, então o espaçamento padrão
 * entre blocos de nível superior só criaria faixas vazias entre elas.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Seções empilhadas sem espaços entre si (modelos de página de seção). */
.mm-secoes > * + * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * 2.1 Contraste automático por fundo
 * Ao escolher um fundo escuro no painel de cores, textos, títulos, links e
 * botões se ajustam sozinhos — o editor não precisa recolorir cada bloco.
 * ---------------------------------------------------------------------- */
:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)):not(.has-text-color) {
	color: var(--wp--preset--color--branco);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title):not(.has-text-color) {
	color: inherit;
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) :is(p, li, figcaption, .wp-block-post-title) a:not(.has-text-color):not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--areia-laranja);
}

:is(.has-terracota-escuro-background-color, .has-terracota-background-color) :is(p, li, figcaption) a:not(.has-text-color):not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	color: inherit;
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) .wp-block-button:not(.is-style-outline):not(.is-style-link-seta) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--areia-laranja);
	border-color: var(--wp--preset--color--areia-laranja);
	color: var(--wp--preset--color--marinho);
}

:is(.has-terracota-escuro-background-color, .has-terracota-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-link-seta) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--branco);
	border-color: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--marinho);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) .wp-block-button .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--branco);
	border-color: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--marinho);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) .wp-block-button:is(.is-style-outline, .is-style-link-seta) .wp-block-button__link:not(.has-text-color):not(:hover) {
	border-color: currentColor;
	color: var(--wp--preset--color--branco);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) :is(.is-style-sobretitulo, .is-style-lema, .is-style-numero-destaque, .wp-block-post-date, .wp-element-caption):not(.has-text-color) {
	color: #d4e7e8;
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-terracota-escuro-background-color, .has-terracota-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) .is-style-sobretitulo::after {
	background: var(--wp--preset--color--areia-laranja);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-mar-profundo-gradient-background, .wp-block-cover:not(.is-light)) .is-style-manuscrito.has-text-align-center {
	transform-origin: center;
}

.is-style-manuscrito.has-text-align-right {
	transform-origin: right center;
}

.is-style-manuscrito:not(.has-text-color) {
	color: var(--wp--preset--color--areia-laranja);
}

/*
 * Fundo laranja areia (cor secundária): claro e quente. Textos, sobretítulos,
 * links e botões passam para marinho, que tem bom contraste sobre o laranja.
 */
.has-areia-laranja-background-color:not(.has-text-color) {
	color: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color :is(.is-style-sobretitulo, .is-style-lema, .is-style-manuscrito, .is-style-numero-destaque, .wp-element-caption, .wp-block-post-date):not(.has-text-color) {
	color: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color .is-style-sobretitulo::after {
	background: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color :is(p, li, figcaption) a:not(.has-text-color):not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color .wp-block-button:not(.is-style-outline):not(.is-style-link-seta) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--marinho);
	border-color: var(--wp--preset--color--marinho);
	color: var(--wp--preset--color--branco);
}

.has-areia-laranja-background-color .wp-block-button .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--branco);
	border-color: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color .wp-block-breadcrumbs a {
	color: var(--wp--preset--color--marinho);
}

.has-areia-laranja-background-color .mm-carrossel-controles button {
	color: var(--wp--preset--color--marinho);
}

/* Fundos claros aninhados dentro de fundos escuros voltam ao padrão. */
:is(.has-branco-background-color, .has-areia-background-color, .has-bruma-background-color):not(.has-text-color) {
	color: var(--wp--preset--color--tinta);
}

:is(.has-branco-background-color, .has-areia-background-color, .has-bruma-background-color) :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title):not(.has-text-color) {
	color: var(--wp--preset--color--marinho);
}

/* -------------------------------------------------------------------------
 * 3. Cabeçalho fixo
 * ---------------------------------------------------------------------- */
/* O elemento fixo é o <header> da parte de modelo (pai direto do conteúdo). */
.wp-site-blocks > header.wp-block-template-part:has(.mm-cabecalho),
.editor-styles-wrapper .mm-cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.mm-cabecalho) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.mm-cabecalho) {
		top: 0;
	}
}

.mm-cabecalho {
	transition: box-shadow var(--mm-transicao), background-color var(--mm-transicao);
}

/*
 * O fundo translúcido fica num pseudo-elemento: backdrop-filter no próprio
 * grupo criaria um bloco de contenção e prenderia o menu móvel (position: fixed)
 * dentro da altura do cabeçalho.
 */
.mm-cabecalho > .wp-block-group {
	position: relative;
	isolation: isolate;
}

.mm-cabecalho > .wp-block-group::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--areia) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	transition: box-shadow var(--mm-transicao);
}

.mm-cabecalho.is-rolado > .wp-block-group::before {
	box-shadow: 0 8px 24px -18px rgba(4, 63, 99, 0.55);
}

.mm-cabecalho .wp-block-site-logo img {
	transition: width var(--mm-transicao);
}

/* Item de menu ativo: sublinhado em onda suave. */
.mm-cabecalho .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
}

.mm-cabecalho .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--oceano);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mm-transicao);
}

.mm-cabecalho .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.mm-cabecalho .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.mm-cabecalho .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"]::after {
	transform: scaleX(1);
}

/* Menu móvel (sobreposição): tipografia generosa, alvos grandes, alinhado à esquerda. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: calc(var(--wp--preset--spacing--60) + 1rem);
	padding-inline: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--capriola);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	padding-block: 0.35rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.5rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Botão de contato do cabeçalho com ícone de envelope. */
.mm-botao-contato .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.mm-botao-contato .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--mm-envelope) center / contain no-repeat;
	mask: var(--mm-envelope) center / contain no-repeat;
}

@media (max-width: 781px) {
	.mm-cabecalho .mm-botao-contato {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 4. Botões: seta em todos os botões de conteúdo
 * ---------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color var(--mm-transicao), color var(--mm-transicao), border-color var(--mm-transicao), transform var(--mm-transicao);
}

.wp-block-button:not(.mm-botao-contato):not(.is-style-sem-seta) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button:not(.mm-botao-contato):not(.is-style-sem-seta) .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: var(--mm-seta) center / contain no-repeat;
	mask: var(--mm-seta) center / contain no-repeat;
	transition: transform var(--mm-transicao);
}

.wp-block-button .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Estilo "Link com seta": botão sem caixa, para chamadas secundárias. */
.wp-block-button.is-style-link-seta .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--terracota-escuro);
	padding-left: 0;
	padding-right: 0;
}

.wp-block-button.is-style-link-seta .wp-block-button__link:hover {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--marinho);
}

/* -------------------------------------------------------------------------
 * 5. Tipografia de apoio (estilos de parágrafo/título)
 * ---------------------------------------------------------------------- */
.is-style-sobretitulo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--gabarito);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--petroleo-verde);
}

.is-style-sobretitulo::after {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--oceano);
}

.is-style-sobretitulo.has-text-align-center {
	justify-content: center;
}

.has-text-color.is-style-sobretitulo::after {
	background: currentColor;
	opacity: 0.6;
}

.is-style-manuscrito {
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
	font-weight: 500;
	line-height: 1.05;
	transform: rotate(-4deg);
	transform-origin: left center;
}

.is-style-manuscrito:not(.has-text-color) {
	color: var(--wp--preset--color--oceano);
}

.is-style-lema {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.is-style-lema:not(.has-text-color) {
	color: var(--wp--preset--color--marinho);
}

.is-style-numero-destaque {
	font-family: var(--wp--preset--font-family--capriola);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.is-style-numero-destaque:not(.has-text-color) {
	color: var(--wp--preset--color--marinho);
}

/* Destaque de palavra dentro de títulos (formatação "Destaque" do editor). */
:where(h1, h2, h3) mark.has-inline-color {
	background: none;
}

/* -------------------------------------------------------------------------
 * 6. Formas orgânicas (imagem e capa)
 * ---------------------------------------------------------------------- */
.wp-block-image.is-style-organica img,
.wp-block-image.is-style-organica-alt img,
.wp-block-image.is-style-onda img,
.wp-block-cover.is-style-organica,
.wp-block-cover.is-style-onda,
.wp-block-post-featured-image.is-style-organica img {
	border-radius: 0 !important;
	-webkit-mask: var(--mm-forma) center / 100% 100% no-repeat;
	mask: var(--mm-forma) center / 100% 100% no-repeat;
}

.wp-block-image.is-style-organica,
.wp-block-cover.is-style-organica,
.wp-block-post-featured-image.is-style-organica {
	--mm-forma: var(--mm-forma-bolha);
}

.wp-block-image.is-style-organica-alt {
	--mm-forma: var(--mm-forma-bolha-alt);
}

.wp-block-image.is-style-onda,
.wp-block-cover.is-style-onda {
	--mm-forma: var(--mm-forma-onda);
}

/* Moldura sutil atrás da forma, como nos layouts de referência. */
.wp-block-image.is-style-organica,
.wp-block-image.is-style-organica-alt {
	position: relative;
	isolation: isolate;
}

.wp-block-image.is-style-organica::before,
.wp-block-image.is-style-organica-alt::before {
	content: "";
	position: absolute;
	inset: 6% -4% -5% 5%;
	z-index: -1;
	background: var(--wp--preset--color--bruma);
	-webkit-mask: var(--mm-forma-bolha-alt) center / 100% 100% no-repeat;
	mask: var(--mm-forma-bolha-alt) center / 100% 100% no-repeat;
}

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

/* -------------------------------------------------------------------------
 * 7. Bordas em onda para seções (grupo e capa)
 * ---------------------------------------------------------------------- */
.is-style-onda-inferior,
.is-style-onda-superior,
.is-style-ondas {
	position: relative;
}

.is-style-onda-inferior {
	-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--mm-onda-h) + 3px) no-repeat, var(--mm-onda-base) bottom / 100% var(--mm-onda-h) no-repeat;
	mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--mm-onda-h) + 3px) no-repeat, var(--mm-onda-base) bottom / 100% var(--mm-onda-h) no-repeat;
	padding-bottom: calc(var(--mm-onda-h) + var(--wp--preset--spacing--60)) !important;
}

.is-style-onda-superior {
	-webkit-mask: var(--mm-onda-topo) top / 100% var(--mm-onda-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--mm-onda-h) + 3px) no-repeat;
	mask: var(--mm-onda-topo) top / 100% var(--mm-onda-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--mm-onda-h) + 3px) no-repeat;
	padding-top: calc(var(--mm-onda-h) + var(--wp--preset--spacing--60)) !important;
}

.is-style-ondas {
	-webkit-mask: var(--mm-onda-topo) top / 100% var(--mm-onda-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--mm-onda-h) + 6px) no-repeat, var(--mm-onda-base) bottom / 100% var(--mm-onda-h) no-repeat;
	mask: var(--mm-onda-topo) top / 100% var(--mm-onda-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--mm-onda-h) + 6px) no-repeat, var(--mm-onda-base) bottom / 100% var(--mm-onda-h) no-repeat;
	padding-top: calc(var(--mm-onda-h) + var(--wp--preset--spacing--60)) !important;
	padding-bottom: calc(var(--mm-onda-h) + var(--wp--preset--spacing--60)) !important;
}

/* Seções com onda se sobrepõem levemente à seguinte, para a onda "fluir". */
.mm-secoes > .is-style-onda-inferior,
.mm-secoes > .is-style-ondas {
	z-index: 2;
	margin-bottom: calc(-1 * var(--mm-onda-h));
}

.mm-secoes > .is-style-onda-inferior + *,
.mm-secoes > .is-style-ondas + * {
	padding-top: calc(var(--mm-onda-h) + var(--wp--preset--spacing--70)) !important;
}

.mm-secoes > * + .is-style-onda-superior,
.mm-secoes > * + .is-style-ondas {
	z-index: 2;
	margin-top: calc(-1 * var(--mm-onda-h)) !important;
}

/* -------------------------------------------------------------------------
 * 8. Elementos gráficos da marca (faixas)
 * ---------------------------------------------------------------------- */
.is-style-faixas-canto,
.is-style-faixas-lateral {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.is-style-faixas-canto::before,
.is-style-faixas-lateral::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}

.is-style-faixas-canto::before {
	top: 0;
	right: 0;
	width: clamp(160px, 26vw, 420px);
	aspect-ratio: 600 / 645;
	background-image: url("../images/decor/faixas-canto.png");
	background-position: top right;
}

.is-style-faixas-lateral::before {
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(90px, 14vw, 240px);
	background-image: url("../images/decor/faixas-vertical.png");
	background-position: top right;
	background-size: cover;
	opacity: 0.95;
}

@media (max-width: 781px) {
	.is-style-faixas-canto::before {
		width: 140px;
		opacity: 0.55;
	}

	.is-style-faixas-lateral::before {
		width: 70px;
		opacity: 0.5;
	}
}

/* -------------------------------------------------------------------------
 * 9. Cartões clicáveis
 * ---------------------------------------------------------------------- */
.is-style-cartao-link {
	position: relative;
	transition: transform var(--mm-transicao), box-shadow var(--mm-transicao), background-color var(--mm-transicao);
}

.is-style-cartao-link:not(.has-background) {
	background-color: var(--wp--preset--color--branco);
}

.is-style-cartao-link:not([style*="border-radius"]) {
	border-radius: var(--wp--custom--radius--md);
}

/* O primeiro link do cartão cobre o cartão inteiro (área de clique ampla). */
.is-style-cartao-link :where(h2, h3, h4, p) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-cartao-link :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.is-style-cartao-link:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--elevada);
}

.is-style-cartao-link:focus-within {
	box-shadow: var(--mm-foco);
}

.is-style-cartao-link :where(h2, h3, h4) a:focus-visible {
	outline: none;
}

/* Cartões em "vidro fosco" (atalhos do banner, sobre o céu das ondas). */
.is-style-cartao-link.mm-cartao-vidro:not(.has-background) {
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: 0 12px 30px -20px rgba(4, 63, 99, 0.45);
}

.is-style-cartao-link.mm-cartao-vidro:hover {
	background: rgba(255, 255, 255, 0.85);
}

.mm-atalhos .wp-block-heading {
	line-height: 1.25;
}

/* Celular: os atalhos do banner ficam ocultos (as áreas estão no menu). */
@media (max-width: 781px) {
	.mm-ocultar-no-celular {
		display: none !important;
	}
}

/* Cartões de notícias / vídeos / materiais nas listas (Query Loop). */
.mm-cartao-post {
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--tinta);
	box-shadow: var(--wp--preset--shadow--suave);
	transition: transform var(--mm-transicao), box-shadow var(--mm-transicao);
}

.mm-cartao-post .wp-block-post-title {
	color: var(--wp--preset--color--marinho);
}

.mm-cartao-post .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Metadados vazios (campos não preenchidos) não ocupam espaço no site. */
body:not(.editor-styles-wrapper) .mm-meta-video > .wp-block-group:has(> p:empty),
body:not(.editor-styles-wrapper) :is(.mm-cartao-post, .wp-block-group) > p:empty,
body:not(.editor-styles-wrapper) .wp-block-button:has(> a.wp-block-button__link:not([href])) {
	display: none;
}

.mm-meta-video p {
	margin: 0;
}

.mm-cartao-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--elevada);
}

.mm-cartao-post .wp-block-post-featured-image {
	overflow: hidden;
}

.mm-cartao-post .wp-block-post-featured-image img {
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-cartao-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* -------------------------------------------------------------------------
 * 10. Carrossel (Modelo de post do Query Loop) — rolagem nativa com snap
 * ---------------------------------------------------------------------- */
.wp-block-post-template.is-style-carrossel {
	display: grid !important;
	grid-auto-flow: column;
	grid-template-columns: none !important;
	grid-auto-columns: minmax(240px, 300px);
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	padding: 0.5rem 2px 1.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--salvia) transparent;
}

.wp-block-post-template.is-style-carrossel > li {
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 600px) {
	.wp-block-post-template.is-style-carrossel {
		grid-auto-columns: 78%;
	}
}

.mm-carrossel-controles {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-block-end: 0.5rem;
}

.mm-carrossel-controles[hidden] {
	display: none;
}

.mm-carrossel-controles button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--marinho);
	cursor: pointer;
	transition: background-color var(--mm-transicao), color var(--mm-transicao), opacity var(--mm-transicao);
}

.mm-carrossel-controles button:hover:not(:disabled) {
	background: var(--wp--preset--color--marinho);
	color: var(--wp--preset--color--branco);
}

.mm-carrossel-controles button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mm-carrossel-controles svg {
	width: 20px;
	height: 20px;
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-mar-profundo-gradient-background) .mm-carrossel-controles button {
	color: var(--wp--preset--color--branco);
}

:is(.has-marinho-background-color, .has-petroleo-verde-background-color, .has-mar-profundo-gradient-background) .mm-carrossel-controles button:hover:not(:disabled) {
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--marinho);
}

/* Cartão de vídeo: miniatura com botão de play sobreposto. */
.mm-cartao-video .wp-block-post-featured-image {
	position: relative;
}

.mm-cartao-video .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23043F63' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 26px no-repeat;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform var(--mm-transicao);
	pointer-events: none;
}

.mm-cartao-video:hover .wp-block-post-featured-image::after {
	transform: translate(-50%, -50%) scale(1.1);
}

/* -------------------------------------------------------------------------
 * 11. Colunas e layout
 * ---------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-columns.is-style-inverter-no-celular {
		flex-direction: column-reverse;
	}
}

/* Lista de itens com ícone (ícone + texto lado a lado). */
.mm-item-icone {
	align-items: flex-start !important;
}

.mm-item-icone > .wp-block-mm-icone {
	flex: none;
}

/* -------------------------------------------------------------------------
 * 12. Vídeo incorporado (fachada leve do YouTube) e moldura
 * ---------------------------------------------------------------------- */
.wp-block-embed.is-style-moldura .wp-block-embed__wrapper,
.wp-block-video.is-style-moldura video {
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--elevada);
	overflow: hidden;
}

.wp-block-embed .wp-block-embed__wrapper {
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.mm-video-fachada {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #0b2233 center / cover no-repeat;
	cursor: pointer;
}

.mm-video-fachada::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 63, 99, 0) 40%, rgba(4, 63, 99, 0.55) 100%);
	transition: opacity var(--mm-transicao);
}

.mm-video-fachada__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(64px, 9vw, 88px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform var(--mm-transicao), background-color var(--mm-transicao);
}

.mm-video-fachada__play svg {
	width: 42%;
	height: 42%;
	margin-left: 8%;
	fill: var(--wp--preset--color--marinho);
}

.mm-video-fachada:hover .mm-video-fachada__play,
.mm-video-fachada:focus-visible .mm-video-fachada__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--wp--preset--color--areia-laranja);
}

.mm-video-fachada:focus-visible {
	outline: 3px solid var(--wp--preset--color--areia-laranja);
	outline-offset: -6px;
}

.mm-video-fachada__titulo {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1rem;
	color: #fff;
	font-weight: 600;
	text-align: left;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
 * 13. Rodapé
 * ---------------------------------------------------------------------- */
/* Cobre a emenda de subpixel entre a chamada para contato e o rodapé. */
.mm-rodape {
	box-shadow: 0 -2px 0 var(--wp--preset--color--marinho);
}

.mm-rodape .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

.mm-rodape .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mm-rodape .wp-block-social-links .wp-social-link {
	transition: transform var(--mm-transicao);
}

.mm-rodape .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-2px);
}

.mm-reguas img {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 14. Conteúdo editorial
 * ---------------------------------------------------------------------- */
.wp-block-post-content :where(p, li) a,
.wp-block-post-excerpt a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--capriola);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--marinho);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--bruma);
	color: var(--wp--preset--color--petroleo-verde);
	font-family: var(--wp--preset--font-family--gabarito);
	font-size: 1.25rem;
	transition: transform var(--mm-transicao);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table :where(th, td) {
	border-color: #cfe0df;
	padding: 0.75rem 1rem;
}

.wp-block-table thead {
	background: var(--wp--preset--color--bruma);
	border-bottom: 2px solid var(--wp--preset--color--oceano);
}

/* Linha do tempo (padrão "Linha do tempo"). */
.mm-linha-do-tempo {
	position: relative;
	padding-left: 2.75rem;
}

.mm-linha-do-tempo::before {
	content: "";
	position: absolute;
	left: 0.45rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(var(--wp--preset--color--oceano), var(--wp--preset--color--areia-laranja));
}

.mm-linha-do-tempo > .wp-block-group {
	position: relative;
}

.mm-linha-do-tempo > .wp-block-group::before {
	content: "";
	position: absolute;
	left: -2.75rem;
	top: 0.35rem;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--areia);
	border: 3px solid var(--wp--preset--color--terracota);
}

/* Formulários nativos (busca, comentários) em harmonia com a marca. */
.wp-block-search__input,
.comment-form :where(input:not([type="submit"]):not([type="checkbox"]), textarea) {
	border: 2px solid #cfe0df;
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--branco);
	font: inherit;
}

.wp-block-search__input:focus,
.comment-form :where(input, textarea):focus {
	border-color: var(--wp--preset--color--oceano);
	outline: none;
	box-shadow: 0 0 0 3px rgba(66, 142, 149, 0.25);
}

.wp-block-search__button {
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--marinho);
	color: var(--wp--preset--color--branco);
	border: 0;
	padding-inline: 1.2rem;
	font-weight: 600;
}

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

	.is-style-cartao-link:hover,
	.mm-cartao-post:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 16. Cartões em grade: mesma altura e link sempre na base
 * ---------------------------------------------------------------------- */
.is-layout-grid > .is-style-cartao {
	height: 100%;
}

.is-style-cartao.is-layout-flex > .wp-block-buttons:last-child {
	margin-top: auto;
}

.mm-cartao-post.is-layout-flex > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* Filtros (bloco Categorias em modo lista suspensa). */
.wp-block-categories-dropdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.wp-block-categories-dropdown label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.wp-block-categories-dropdown select {
	appearance: none;
	min-width: 16rem;
	padding: 0.65rem 2.5rem 0.65rem 1rem;
	border: 2px solid #cfe0df;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--branco) var(--mm-seta) no-repeat right 1rem center / 0.9rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23043F63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	color: var(--wp--preset--color--marinho);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.wp-block-categories-dropdown select:focus-visible {
	border-color: var(--wp--preset--color--oceano);
}

/* -------------------------------------------------------------------------
 * 17. Ondas da marca (animadas)
 * Estilo do Grupo. As camadas (sol + 7 faixas) são inseridas no HTML pelo
 * tema (inc/ondas.php); as cores/velocidades de cada faixa estão em ondas.css.
 * Animação só com transform/translate (processada pela GPU, sem repintura).
 * ---------------------------------------------------------------------- */
:root {
	--mm-ondas-sol: var(--wp--preset--color--terracota, #cc6140);
}

.is-style-ondas-marca,
.is-style-ondas-marca-faixa {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Símbolo: recortado na silhueta do logo. */
.is-style-ondas-marca {
	--mm-ondas-sol-previa: radial-gradient(ellipse 24.5% 33% at 53% 34%, var(--mm-ondas-sol) 98%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1.35;
	-webkit-mask: url("../images/ondas/silhueta-simbolo.svg") center / 100% 100% no-repeat;
	mask: url("../images/ondas/silhueta-simbolo.svg") center / 100% 100% no-repeat;
}

/*
 * Faixa (banner): o mar ocupa a base em largura total e o conteúdo fica no
 * "céu". O espaço inferior é reservado para o texto nunca ficar sobre as ondas.
 */
.is-style-ondas-marca-faixa {
	--mm-ondas-altura: clamp(180px, 24vw, 380px);
	--mm-ondas-camada-altura: calc(var(--mm-ondas-altura) * 1.12);
	--mm-ondas-sol-previa: radial-gradient(circle calc(var(--mm-ondas-altura) * 0.34) at 74% calc(100% - var(--mm-ondas-altura) * 0.64), var(--mm-ondas-sol) 98%, transparent 100%);
	padding-bottom: calc(var(--mm-ondas-altura) * 1.04) !important;
}

.is-style-ondas-marca-faixa > .mm-ondas {
	top: auto;
	bottom: 0;
	height: var(--mm-ondas-altura);
}

.is-style-ondas-marca-faixa .mm-ondas__sol {
	left: 64.5%;
	top: 2%;
	width: 19%;
}

@media (max-width: 781px) {
	.is-style-ondas-marca-faixa .mm-ondas__sol {
		left: 6%;
		width: 34%;
		top: -12%;
	}
}

.mm-ondas {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Ignora a largura máxima que o layout "restrito" aplica aos filhos do grupo. */
	max-width: none !important;
	margin: 0 !important;
}

.mm-ondas__sol {
	position: absolute;
	left: 28.5%;
	top: 1%;
	width: 49%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--mm-ondas-sol) 80%, #fff) 0%, var(--mm-ondas-sol) 55%);
	animation: mm-ondas-sol 11s ease-in-out infinite alternate;
}

.mm-ondas__faixa {
	position: absolute;
	top: -6%;
	left: 0;
	height: 112%;
	width: var(--largura, 300%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	animation:
		mm-ondas-x var(--dur, 24s) linear infinite var(--sentido, normal),
		mm-ondas-y var(--balanco, 7s) ease-in-out infinite alternate;
}

/* Faixas alternadas começam em pontos diferentes do balanço. */
.mm-ondas__faixa:nth-child(odd) {
	animation-delay: 0s, -3s;
}

@keyframes mm-ondas-x {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes mm-ondas-y {
	from { translate: 0 -1.6%; }
	to { translate: 0 1.6%; }
}

@keyframes mm-ondas-sol {
	from { translate: 0 3%; scale: 0.97; }
	to { translate: 0 -4%; scale: 1.02; }
}

/* Conteúdo escrito pelo editor fica acima das ondas. */
.is-style-ondas-marca > :not(.mm-ondas):not(.mm-ondas-pausa),
.is-style-ondas-marca-faixa > :not(.mm-ondas):not(.mm-ondas-pausa) {
	position: relative;
	z-index: 1;
}

.is-style-ondas-marca .is-style-manuscrito {
	text-shadow: 0 2px 12px rgba(4, 63, 99, 0.55);
}

/* Pausa: botão (acessibilidade), fora da tela ou "reduzir movimento". */
.is-pausado .mm-ondas *,
.is-fora-da-tela .mm-ondas * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.mm-ondas * {
		animation: none !important;
	}
}

.mm-ondas-pausa {
	position: absolute;
	z-index: 2;
	left: 22%;
	bottom: 16%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--marinho);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--mm-transicao), background-color var(--mm-transicao);
}

.mm-ondas-pausa:hover,
.mm-ondas-pausa:focus-visible {
	opacity: 1;
	background: #fff;
}

.is-style-ondas-marca-faixa .mm-ondas-pausa {
	left: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
}

.mm-ondas-pausa svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.mm-ondas-pausa {
		display: none;
	}
}