/*
 * CSS residual do child-theme da Psico Self.
 *
 * Aqui mora SO o que theme.json e os ajustes de bloco nao expressam: icones
 * decorativos, o estado ativo da navegacao, o cabecalho fixo, o painel do
 * mobile e o botao flutuante do WhatsApp.
 *
 * Toda cor, fonte e tamanho vem dos presets do theme.json. As unicas excecoes
 * sao as cores dentro dos SVG de icone, que nao aceitam var().
 */

:root {
	--psicoself-coral: var(--wp--preset--color--coral, #D45C40);
	--psicoself-roxo: var(--wp--preset--color--roxo, #332C7F);
	--psicoself-azul: var(--wp--preset--color--azul, #64AAEA);
	--psicoself-linha: var(--wp--preset--color--linha, #EADCD4);
	--psicoself-zap: #25D366;
}

/* Icones do sprite, usados dentro de conteudo de bloco. */
.psicoself-ico-svg {
	display: inline-block;
	vertical-align: middle;
	flex: none;
	fill: none;
	stroke: currentColor;
}

/* --- Icones -------------------------------------------------------------
 * Sao decoracao, nao conteudo: entram como background para que o texto do
 * bloco continue editavel e ligado as Informacoes da Clinica.
 */
.psicoself-ico {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 18px;
	padding-left: 26px;
}

.psicoself-topbar .psicoself-ico--relogio { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }

.psicoself-rodape .psicoself-ico--fone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364AAEA%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
.psicoself-rodape .psicoself-ico--relogio { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364AAEA%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }
.psicoself-rodape .psicoself-ico--mail { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364AAEA%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%205L2%207%22%2F%3E%3C%2Fsvg%3E"); }
.psicoself-rodape .psicoself-ico--zap { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%2364AAEA%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884a9.82%209.82%200%200%201%206.988%202.896%209.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.885-9.885%209.885m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E"); }
.psicoself-rodape .psicoself-unidade { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364AAEA%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Cabecalho ---------------------------------------------------------- */
.psicoself-topbar p { margin: 0; }

/* Telefone e link, nao texto solto: um botao do core despido de aparencia de
 * botao, para que o binding de URL continue funcionando.
 *
 * O icone vai no <a>, nunca no .wp-block-buttons em volta: o contêiner ocupa a
 * largura toda e o fundo se repete atras do texto. */
.psicoself-link-simples .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	padding: 0 0 0 26px;
	min-height: 0;
	border-radius: 0;
	font-weight: 400;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 18px;
}

.psicoself-link-simples .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
}

.psicoself-topbar .psicoself-tel .wp-block-button__link { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }

/* Fixo ao topo.
 *
 * O sticky vai no <header> que o WordPress cria em volta do template part, e
 * nao na faixa branca: um elemento sticky so corre dentro da caixa do proprio
 * pai, e o pai da faixa branca termina junto com ela. Aplicado no filho, o
 * efeito seria de 44px e depois nada.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.psicoself-cabeca .wp-block-site-logo img {
	height: auto;
	display: block;
}

/* O item ativo. */
.psicoself-nav .current-menu-item > .wp-block-navigation-item__content,
.psicoself-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--psicoself-roxo);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--psicoself-azul);
}

/* --- Cabecalho no mobile: uma linha so ----------------------------------
 * A barra roxa sai de cena e logo, hamburguer e botao dividem a mesma linha.
 * Sem o nowrap o logo de 230px empurra o resto para baixo em 390px de tela.
 */
/* 599px e o breakpoint do core para overlayMenu "mobile". Usar o mesmo aqui
 * garante que as regras de linha unica so valham quando o hamburguer existe. */
@media (max-width: 599px) {
	.psicoself-topbar { display: none; }

	/* Nao basta o grupo de fora: o hamburguer e o botao Contato moram num
	 * segundo grupo flex, e era ele que quebrava a linha em 375px. */
	.psicoself-cabeca .wp-block-group.is-layout-flex {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--40);
	}

	.psicoself-cabeca .wp-block-site-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.psicoself-cabeca .wp-block-site-logo img { width: 164px; }

	.psicoself-cabeca .wp-block-buttons { flex: 0 0 auto; }

	/* O hamburguer e um botao dentro do <nav>; sem isto ele encosta no topo
	 * da linha em vez de acompanhar logo e botao. */
	.psicoself-cabeca .psicoself-nav {
		display: flex;
		align-items: center;
		align-self: center;
	}

	.psicoself-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.psicoself-cta-topo .wp-block-button__link {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}

/* --- Onde o menu vira off-canvas ----------------------------------------
 *
 * O core troca para o menu inline a partir de 600px, mas o nosso nao cabe la:
 * logo de 230px mais sete itens mais o botao de Contato pedem perto de
 * 1000px, e abaixo disso a linha quebra em duas. Encolher o logo resolveria a
 * quebra e deixaria tudo espremido, entao o off-canvas passa a valer ate
 * 1023px.
 *
 * Sao exatamente as duas regras que o core aplica em min-width:600px, aqui
 * desfeitas na faixa de tablet. Prefixar com .psicoself-nav passa a
 * especificidade delas (0-3-0 e 0-2-0).
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.psicoself-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
	}

	.psicoself-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- Painel de navegacao do mobile --------------------------------------
 *
 * O core copia as classes do <nav> para a <ul> do painel, inclusive a
 * justificacao do desktop, e alinha tudo por
 * --navigation-layout-justification-setting. Redefinir essa variavel dentro do
 * painel resolve o alinhamento sem brigar com seletor nenhum.
 *
 * O resto precisa de especificidade: as regras do core usam :where(), que nao
 * pontua, entao o seletor mais longo delas vale 0-5-0. Os overrides daqui
 * acrescentam .psicoself-nav para passar disso.
 */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-align: stretch;
	--navigation-layout-direction: column;
	--wp--style--block-gap: 0;
	padding: 0;
	gap: 0;
}

/* O painel abandona o flex e volta a ser fluxo de bloco.
 *
 * Em coluna flex, o item nao encolhe abaixo do proprio conteudo (min-width
 * auto), e um rotulo longo como "Programa de Acolhimento e Atendimento
 * Humano" estica a lista alem da largura da tela. O resultado e o painel
 * inteiro deslocado para a esquerda, com o texto cortado na borda. Em bloco,
 * cada item ocupa a largura do pai e quebra linha quando precisa.
 */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 80px 0 var(--wp--preset--spacing--80);
}

.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 0;
}

/* Uma divisoria so, no <li> de primeiro nivel.
 *
 * Antes a borda ficava em cada .wp-block-navigation-item__content, e onde um
 * item terminava e outro comecava as duas se encostavam: a linha dupla que
 * aparecia embaixo de Home. No <li> a divisoria envolve o grupo inteiro,
 * cabecalho e filhos, que e como a prancheta desenha.
 */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child) {
	border-bottom: 1px solid var(--psicoself-linha);
}

/* Dentro de um grupo, uma linha discreta separa o cabecalho dos filhos. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--psicoself-linha);
}

/* Qualquer borda que o core desenhe no submenu sai de cena: o core aplica
 * 1px solid rgba(0,0,0,.15) quando o <nav> nao tem has-background, e o nosso
 * fundo vive no container do painel, nao no <nav>. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container,
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	border: 0;
}

/* Grupos com submenu ganham o fundo creme, o que os separa dos itens simples
 * e deixa claro onde o acordeao comeca e termina. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	background-color: var(--wp--preset--color--creme);
}

/* Item de primeiro nivel: 58px de alvo, linha divisoria, tipo de titulo. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 58px;
	padding: 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--cartao);
	font-weight: 500;
	color: var(--wp--preset--color--tinta);
	box-sizing: border-box;
	overflow-wrap: break-word;
}

/* O botao de abrir submenu tambem carrega a classe de conteudo, entao herda a
 * linha acima; so falta empurrar a setinha para a direita. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

/* Submenu: fundo creme, sem os 2rem de recuo que o core aplica, itens de 46px
 * em tipo de corpo. O seletor precisa dos seis niveis para vencer o do core. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	display: block;
	background-color: transparent;
	border: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 46px;
	padding: 0 var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
	font-family: var(--wp--preset--font-family--corpo);
	font-size: var(--wp--preset--font-size--apoio);
	font-weight: 400;
	color: var(--wp--preset--color--tinta-suave);
	min-height: 46px;
}

/* --- Pagina ativa no painel --------------------------------------------
 *
 * A regra de cor dos subitens vale 0-7-0, entao o marcador precisa passar
 * disso para aparecer num item de submenu. Barra azul a esquerda mais roxo e
 * peso: cor sozinha nao basta, porque cor sozinha nao e sinal acessivel.
 */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	color: var(--psicoself-roxo);
	font-weight: 700;
	background-color: var(--wp--preset--color--branco);
	box-shadow: inset 3px 0 0 0 var(--psicoself-azul);
}

/* O grupo que contem a pagina atual fica marcado, mais discreto que ela. */
.psicoself-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--psicoself-roxo);
	font-weight: 700;
}

/* O painel prende o foco e foca o primeiro item na abertura. Isso e correto e
 * deve continuar visivel, mas na cor da marca em vez do azul do navegador. */
.psicoself-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--psicoself-azul);
	outline-offset: -2px;
}

/* O botao de fechar so existe dentro do painel aberto, entao pode receber
 * display sem risco. O de ABRIR nao: o core o esconde com display:none acima
 * do breakpoint, e um display:flex aqui fora de media query faz o hamburguer
 * reaparecer no desktop. So dimensoes, que sao inofensivas em display:none. */
.psicoself-nav .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
}

.psicoself-nav .wp-block-navigation__responsive-container-close,
.psicoself-nav .wp-block-navigation__responsive-container-open {
	min-width: 48px;
	min-height: 48px;
}

.psicoself-nav .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
}

/* --- Cartao de profissional ---------------------------------------------
 *
 * O selo e um <div> vazio pintado por CSS. O icone vem da classe de
 * especialidade que o WordPress imprime no <li> do Query Loop, e as regras que
 * casam classe com desenho sao geradas em inc/post-type-equipe.php a partir dos
 * termos. E isso que deixa o icone editavel no admin sem PHP no layout.
 */
.psicoself-card { text-align: center; }

.psicoself-retrato {
	position: relative;
	width: 156px;
	margin: 0 auto var(--wp--preset--spacing--40);
}

.psicoself-retrato .wp-block-post-featured-image,
.psicoself-retrato .wp-block-post-featured-image img {
	width: 156px;
	height: 156px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* A borda fica so no <figure>. Com ela tambem no <img>, os 3px saiam para fora
 * dos 156px da figura e desenhavam um segundo anel, com um fio branco entre os
 * dois. */
.psicoself-retrato .wp-block-post-featured-image {
	box-sizing: border-box;
	overflow: hidden;
	border: 3px solid var(--psicoself-azul);
	background-color: var(--wp--preset--color--branco);
}

.psicoself-retrato .wp-block-post-featured-image img {
	border: 0;
	display: block;
}

.psicoself-selo {
	position: absolute;
	top: -24px;
	right: -4px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--psicoself-azul);
	border: 3px solid var(--wp--preset--color--creme);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.psicoself-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--cartao);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--10);
}

/* Cargo e registro. A cor agrupa: azul para psicologia, coral para as demais
 * especialidades. O significado fica no icone e no texto, nunca so na cor. */
.psicoself-papel {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--psicoself-azul);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.psicoself-card .wp-block-post-excerpt__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave);
	margin: 0;
}

.psicoself-card .wp-block-post-excerpt__more-text { display: none; }

/* O tema-pai da margem de topo a todo filho de .wp-site-blocks, e o <main>
 * herda isso, abrindo um vao entre o cabecalho e a capa. O rodape herda a
 * mesma margem e abria um vao depois da ultima faixa da pagina; quem decide se
 * ha respiro ali e o conteudo, pelo espacamento do proprio bloco. */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

/* A grade do Query Loop nasce com quatro colunas fixas e nao reflui sozinha. */
@media (max-width: 1023px) {
	.psicoself-grade-equipe.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.psicoself-grade-equipe.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Capa de pagina ------------------------------------------------------
 *
 * A capa vive no template e nao no conteudo: assim o titulo nao duplica, toda
 * pagina ganha capa sem ninguem lembrar de inserir um pattern, e a foto vem da
 * imagem destacada, que e um controle que o cliente ja conhece.
 *
 * A foto entra em escala de cinza com veu em degrade, como na prancheta.
 */
/* A foto aparece como ela e, sem veu nenhum. A escala de cinza ja vem do
 * arquivo, e o padrao de meias-luas no pe da imagem esta na cor do fundo da
 * pagina: e ele que emenda a capa com a secao seguinte.
 *
 * O titulo se apoia so numa sombra leve, abaixo. Ela ajuda a leitura sobre foto
 * clara, mas nao conta como contraste pela WCAG: nas capas mais claras o branco
 * fica em 2,14:1. Decisao do cliente, em aberto. */

/* Sem foto destacada a capa vira faixa roxa chapada, que e o caso de Contato.
 * O bloco de capa nao tem essa variacao, entao ela sai daqui. */
/* Sem foto, a capa e o roxo chapado. A cor vem do proprio bloco, em
 * `overlayColor`, e aqui so desfazemos a opacidade zero do dimRatio 0. */
.wp-block-cover.psicoself-capa:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background.has-background-dim {
	opacity: 1;
}

.psicoself-capa:not(:has(.wp-block-cover__image-background)) {
	min-height: 210px !important;
}

/* A altura da capa vem inline do bloco, entao so !important a alcanca.
 * 440px no desktop mostra mais da foto; no celular isso comeria a tela. */
@media (max-width: 599px) {
	.psicoself-capa { min-height: 260px !important; }

	.psicoself-capa:not(:has(.wp-block-cover__image-background)) {
		min-height: 170px !important;
	}
}

/* Cinto e suspensorio para o sprite: se algum estilo sobrescrever o inline,
 * ele continua fora do fluxo. */
#psicoself-icones {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.psicoself-capa .wp-block-post-title {
	margin: 0;
	text-shadow: 0 1px 2px rgba(46, 42, 59, 0.35), 0 2px 12px rgba(46, 42, 59, 0.25);
}

/* --- Carrossel de galeria ------------------------------------------------
 *
 * Variacao de estilo sobre a Galeria nativa. Sem o estilo a galeria continua
 * sendo grade, que e o fallback se este CSS nao carregar.
 */
.psicoself-galeria { position: relative; }

.is-style-carrossel.wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.is-style-carrossel.wp-block-gallery::-webkit-scrollbar { display: none; }

.is-style-carrossel.wp-block-gallery > figure.wp-block-image {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: center;
	/* Sem proporcao fixa, uma foto em retrato faz a faixa inteira pular de
	   altura ao arrastar. Com ela, qualquer foto nova se encaixa. */
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.is-style-carrossel.wp-block-gallery > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pontos sobre a foto, para nao consumirem altura. */
.psicoself-pontos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wp--preset--spacing--40);
	display: flex;
	gap: 2px;
	justify-content: center;
	z-index: 2;
}

/* O ponto que se ve tem 9px, mas o que se toca tem 24, que e o minimo da WCAG
 * 2.5.8. Por isso o circulo mora no ::before e a ancora e so a caixa em volta.
 * O vao de 2px entre as caixas deixa 26px de um centro ao outro, acima dos 24
 * que o criterio tambem pede entre um alvo e o vizinho. */
.psicoself-ponto {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.psicoself-ponto::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.psicoself-ponto.on::before { background-color: var(--wp--preset--color--branco); }

/* O contorno entra para dentro da caixa: para fora ele invadiria o vizinho. */
.psicoself-ponto:focus-visible,
.psicoself-pausa:focus-visible {
	outline: 2px solid var(--wp--preset--color--branco);
	outline-offset: -2px;
}

/* Botao de pausa da passagem automatica. Fica na mesma linha dos pontos, um
 * pouco afastado, para nao ser confundido com mais uma foto. */
.psicoself-pausa {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	/* 24px pelo mesmo motivo dos pontos; o icone continua com 13. */
	width: 24px;
	height: 24px;
	margin-left: 5px;
	cursor: pointer;
	color: var(--wp--preset--color--branco);
	opacity: 0.75;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.psicoself-pausa:hover { opacity: 1; }

/* Os dois icones vem no HTML e o CSS mostra um de cada vez: assim o botao ja
 * nasce certo, sem esperar o JavaScript. */
.psicoself-pausa svg:last-child,
.psicoself-pausa[data-estado="pausado"] svg:first-child { display: none; }

.psicoself-pausa[data-estado="pausado"] svg:last-child { display: block; }

@media (prefers-reduced-motion: reduce) {
	.is-style-carrossel.wp-block-gallery { scroll-behavior: auto; }
}

/* --- Hero da home --------------------------------------------------------
 *
 * A faixa roxa sangra de ponta a ponta e a foto do padrao fica na largura do
 * container. O roxo chapado da faixa e o mesmo do fundo da imagem, entao a
 * emenda nao aparece: a leitura e de uma faixa unica, com o padrao recortado
 * no meio.
 */
.psicoself-hero .wp-block-cover__inner-container { width: 100%; }

.psicoself-hero h1 { margin: 0; }

.psicoself-hero .psicoself-hero-foto img {
	display: block;
	margin-inline: auto;
	max-height: 340px;
	width: auto;
}

@media (max-width: 781px) {
	.psicoself-hero .psicoself-hero-foto img { max-height: 220px; }
}

/* Cartoes de contato e unidades, logo abaixo do hero.
 *
 * Nada de altura aqui de proposito. Uma coluna do core so estica ate a altura
 * da vizinha mais alta enquanto a altura dela for `auto`: o `height: 100%` que
 * morava nesta regra contava como altura definida e era justamente o que
 * deixava os tres cartoes de tamanhos diferentes. */

.psicoself-cartao p { margin: 0 0 var(--wp--preset--spacing--20); }

.psicoself-cartao .psicoself-destaque { font-weight: 600; }

/* --- Rodape ------------------------------------------------------------- */
.psicoself-rodape p { margin: 0 0 var(--wp--preset--spacing--20) 0; }

.psicoself-rodape a { color: inherit; }

.psicoself-rodape-titulo {
	letter-spacing: 0.04em;
	margin-bottom: var(--wp--preset--spacing--40);
}

.psicoself-rodape .psicoself-unidade {
	font-weight: 600;
	background-repeat: no-repeat;
	background-position: left 2px;
	background-size: 18px 18px;
	padding-left: 26px;
}

/* O endereco e um campo unico com quebra de linha: sem isto as duas linhas
 * viram uma so. */
.psicoself-endereco { white-space: pre-line; }

.psicoself-rodape .psicoself-endereco,
.psicoself-rodape .psicoself-creditos { opacity: 0.78; }

.psicoself-logo-rodape img { height: auto; }

/* --- WhatsApp flutuante -------------------------------------------------
 * Vive no rodape porque o rodape aparece em toda pagina, mas e posicionado
 * fora do fluxo. Atalho secundario: o CTA primario e a pagina de contato.
 */
.psicoself-zap-float {
	position: fixed;
	right: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
	z-index: 90;
	margin: 0;
}

.psicoself-zap-float .wp-block-button__link {
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--psicoself-zap);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	font-size: 0;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884a9.82%209.82%200%200%201%206.988%202.896%209.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.885-9.885%209.885m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
}

.psicoself-zap-float .wp-block-button__link:hover {
	background-color: var(--psicoself-zap);
	filter: brightness(0.94);
}

@media (prefers-reduced-motion: no-preference) {
	.psicoself-zap-float .wp-block-button__link { transition: filter 0.15s ease; }
}

/* Lista de servicos da home. O marcador e o chevron do sprite, exposto em
   --psicoself-chevron por inc/icons.php; duas colunas a partir do tablet. */
.psicoself-lista-servicos {
	list-style: none;
	padding: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--60);
}

.psicoself-lista-servicos li {
	break-inside: avoid;
	margin-block-end: var(--wp--preset--spacing--30);
	padding-inline-start: 1.75em;
	background-image: var(--psicoself-chevron);
	background-repeat: no-repeat;
	background-position: left 0.15em;
	background-size: 1.1em 1.1em;
}

.psicoself-lista-servicos a {
	color: inherit;
	text-decoration: none;
}

.psicoself-lista-servicos a:hover,
.psicoself-lista-servicos a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.psicoself-lista-servicos { columns: 1; }
}

/* --- Mapa incorporado ----------------------------------------------------
 *
 * Vem do shortcode [psicoself_mapa], em inc/mapa.php, porque o serializador da
 * fila do editor rejeita tags vazias como <iframe>. A proporcao chega como
 * variavel no proprio elemento, para o mesmo shortcode servir a secoes de
 * alturas diferentes.
 */
.psicoself-mapa {
	aspect-ratio: var(--psicoself-mapa-proporcao, 3 / 1);
	overflow: hidden;
	background-color: var(--wp--preset--color--linha);
}

.psicoself-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 781px) {
	.psicoself-mapa { aspect-ratio: 2 / 1; }
}

.psicoself-mapa-aviso {
	border-left: 3px solid var(--wp--preset--color--coral);
	padding-left: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--coral);
	font-size: var(--wp--preset--font-size--apoio);
}

/* --- Lista com visto ------------------------------------------------------
 *
 * Estilo de bloco "Marcadores em visto", registrado em inc/icons.php. O visto
 * vem do sprite, exposto em --psicoself-check, e acompanha a cor coral da
 * paleta: trocar o coral no painel de Estilos troca o marcador junto.
 */
.wp-block-list.is-style-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-check li {
	padding-inline-start: 1.75em;
	background-image: var(--psicoself-check);
	background-repeat: no-repeat;
	background-position: left 0.2em;
	background-size: 1.05em 1.05em;
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Aninhada, o marcador nao repete: a lista de dentro volta ao tracinho. */
.wp-block-list.is-style-check ul {
	list-style: none;
	padding-left: 1.75em;
}

.wp-block-list.is-style-check ul li {
	background-image: none;
	padding-inline-start: 0.9em;
	position: relative;
}

.wp-block-list.is-style-check ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.5em;
	height: 1px;
	background-color: var(--wp--preset--color--linha);
}

/* Icone solto no conteudo, vindo do shortcode [psicoself_icone]. */
.psicoself-ico {
	display: inline-flex;
	line-height: 0;
}

/* --- Acordeao -------------------------------------------------------------
 *
 * As cores vem do theme.json, degrau 1. Aqui fica so o que ele nao alcanca: o
 * respiro interno mora no <button>, e nao no <h3>, senao a area acolchoada nao
 * seria clicavel.
 */
.wp-block-accordion-item {
	border-radius: 4px;
	/* Sem isto os cantos do cabecalho e do corpo vazam por fora do raio. */
	overflow: hidden;
}

.wp-block-accordion-heading__toggle {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}


/* Fechado, o corpo nao sai do fluxo: o core o esconde com
 * `content-visibility: hidden`, e a caixa continua ocupando o proprio padding.
 * Por isso o respiro vertical vai para o conteudo, e nao para o painel, senao
 * cada item fechado mostra uma tira vazia embaixo do cabecalho. */
.wp-block-accordion-panel {
	margin-block-start: 0;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--60);
}

.wp-block-accordion-panel > * { margin-block: 0; }

.wp-block-accordion-panel > :first-child { padding-block-start: var(--wp--preset--spacing--50); }

.wp-block-accordion-panel > :last-child { padding-block-end: var(--wp--preset--spacing--60); }

/* --- Blog -----------------------------------------------------------------
 *
 * Listagem, post aberto e barra lateral. Os blocos sao todos do core; aqui fica
 * o que o theme.json nao expressa, que e basicamente tirar marcador de lista e
 * dar respiro entre os itens da lateral.
 */
.psicoself-lista-posts .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.psicoself-lista-posts .wp-block-post-title a,
.psicoself-lista-posts .wp-block-post-title a:hover {
	color: inherit;
}

.psicoself-lista-posts .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* O "Veja mais" do resumo vira um link de apoio, nao um botao. */
.psicoself-lista-posts .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--coral);
	font-weight: 600;
}

/* Barra lateral: as listas do core saem com marcador e sem respiro. */
.psicoself-lateral .wp-block-categories,
.psicoself-lateral .wp-block-latest-posts {
	list-style: none;
	padding-left: 0;
	margin: var(--wp--preset--spacing--50) 0 0;
}

.psicoself-lateral .wp-block-categories li,
.psicoself-lateral .wp-block-latest-posts li {
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--linha);
}

.psicoself-lateral .wp-block-categories li:last-child,
.psicoself-lateral .wp-block-latest-posts li:last-child {
	border-block-end: 0;
}

.psicoself-lateral .wp-block-categories a,
.psicoself-lateral .wp-block-latest-posts a {
	color: inherit;
	text-decoration: none;
}

.psicoself-lateral .wp-block-categories a:hover,
.psicoself-lateral .wp-block-latest-posts a:hover {
	text-decoration: underline;
}

.psicoself-lateral .wp-block-categories .post-count {
	color: var(--wp--preset--color--tinta-suave);
}

/* No celular a lateral vai para baixo da lista e ganha uma linha de corte. */
@media (max-width: 781px) {
	.psicoself-lateral {
		border-block-start: 1px solid var(--wp--preset--color--linha);
		padding-block-start: var(--wp--preset--spacing--80);
		margin-block-start: var(--wp--preset--spacing--80);
	}
}

/* --- Formulario de contato ------------------------------------------------
 *
 * O Fluent Forms traz a propria folha; aqui so alinhamos com o desenho. Os
 * valores vem do DESIGN.md: campo branco com fio de 1px em `linha`, raio de
 * 2px, 48px de altura minima, rotulo acima em 14px peso 600.
 */
.psicoself-formulario .ff-el-group { margin-bottom: var(--wp--preset--spacing--50); }

.psicoself-formulario .ff-el-input--label label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	margin-bottom: 7px;
}

.psicoself-formulario .ff-el-form-control {
	background-color: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 2px;
	padding: 13px 15px;
	min-height: 48px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--tinta);
}

.psicoself-formulario textarea.ff-el-form-control { min-height: 132px; }

.psicoself-formulario .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--roxo);
	outline: 2px solid var(--wp--preset--color--roxo);
	outline-offset: 1px;
}

/* Consentimento: caixa de 20px e texto miudo, como manda a LGPD sem virar
 * letra de contrato. */
.psicoself-formulario .ff_gdpr_field .ff-el-form-check-label,
.psicoself-formulario .ff-el-tc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave);
}

.psicoself-formulario input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wp--preset--color--roxo);
}

.psicoself-formulario .ff-btn-submit {
	background-color: var(--wp--preset--color--roxo);
	color: var(--wp--preset--color--branco);
	border: 0;
	border-radius: 2px;
	padding: 14px 28px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--apoio);
	font-weight: 600;
	cursor: pointer;
}

.psicoself-formulario .ff-btn-submit:hover { background-color: var(--wp--preset--color--roxo-claro); }

.psicoself-formulario .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--coral); }

.psicoself-formulario .error-text,
.psicoself-formulario .text-danger {
	color: var(--wp--preset--color--coral);
	font-size: 13px;
}

@media (max-width: 599px) {
	.psicoself-formulario .ff-el-form-control { min-height: 50px; }
}

/* Cartao de atendimento ao lado do formulario. */
.psicoself-cartao-contato .psicoself-ico { color: var(--wp--preset--color--azul); }

/* Botao do WhatsApp dentro do conteudo, na cor da marca do servico. */
.psicoself-botao-zap .wp-block-button__link {
	background-color: var(--psicoself-zap);
	color: #FFFFFF;
	width: 100%;
	justify-content: center;
}

.psicoself-botao-zap .wp-block-button__link:hover { filter: brightness(0.94); }