/*
Don Byte - folha de compatibilidade para o Elementor.

O blocos.css continua a servir os estilos que assentam em classes
simples (.is-style-etiqueta, .db-mapa, .db-contacto-linha), que
funcionam em qualquer markup.

Este ficheiro cobre apenas o que estava agarrado ao markup do
Gutenberg e deixou de se aplicar: o traco verde, o botao de
contorno e o formulario, que passou do CF7 para o WPForms.

As cores vem das variaveis do theme.json, ja validadas contra a
WCAG 2.1 AA. Ver LEIA-ME.txt para os racios.
*/

/* Traco verde - usar num widget HTML com <hr class='db-traco-verde'> */
hr.db-traco-verde {
	border: none;
	border-top: 3px solid var(--wp--preset--color--verde);
	width: 48px;
	margin-left: 0;
	margin-right: auto;
	opacity: 1;
}

.is-style-seccao-escura hr.db-traco-verde {
	border-top-color: var(--wp--preset--color--verde-claro);
}

/* Botao de contorno - classe no campo CSS Classes do widget Botao */
.elementor .db-botao-contorno .elementor-button {
	background-color: transparent;
	color: var(--wp--preset--color--verde-ligacao);
	border: 2px solid var(--wp--preset--color--verde-ligacao);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--corpo);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
}

.elementor .db-botao-contorno .elementor-button:hover,
.elementor .db-botao-contorno .elementor-button:focus {
	background-color: var(--wp--preset--color--verde-ligacao);
	color: var(--wp--preset--color--papel);
}

/* Foco visivel - WCAG 2.4.7 */
.elementor :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--verde-ligacao);
	outline-offset: 2px;
}

/* Formulario (WPForms) - substitui as regras .wpcf7 do blocos.css */
.db-wpf .wpforms-field {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.db-wpf .wpforms-field-label {
	display: block;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave);
	margin-bottom: 0.4rem;
}

.db-wpf .wpforms-required-label {
	color: var(--wp--preset--color--magenta-texto);
	letter-spacing: 0;
}

.db-wpf input[type='text'],
.db-wpf input[type='email'],
.db-wpf input[type='tel'],
.db-wpf select,
.db-wpf textarea {
	width: 100%;
	max-width: 100%;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--corpo);
	line-height: 1.5;
	color: var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--papel);
	border: 1px solid #C4C8CC;
	border-radius: 4px;
	padding: 0.65rem 0.8rem;
	box-shadow: none;
}

.db-wpf input:focus,
.db-wpf select:focus,
.db-wpf textarea:focus {
	border-color: var(--wp--preset--color--verde-ligacao);
	outline: 2px solid var(--wp--preset--color--verde-ligacao);
	outline-offset: 1px;
}

.db-wpf textarea {
	resize: vertical;
	min-height: 8rem;
}

/* Consentimento RGPD */
.db-wpf .wpforms-field-gdpr-checkbox {
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.5;
	margin: var(--wp--preset--spacing--30) 0;
}

.db-wpf .wpforms-field-gdpr-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.db-wpf .wpforms-field-gdpr-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.db-wpf .wpforms-field-gdpr-checkbox input[type='checkbox'] {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	margin: 0.2em 0 0 0;
	accent-color: var(--wp--preset--color--verde-ligacao);
}

.db-wpf .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--tinta);
	margin: 0;
}

/* Botao de envio */
.db-wpf button[type='submit'] {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--corpo);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
}

.db-wpf button[type='submit']:hover,
.db-wpf button[type='submit']:focus-visible {
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--verde-claro);
}

/* Erros e confirmacao, na paleta da marca */
.db-wpf label.wpforms-error {
	display: block;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--magenta-texto);
	margin-top: 0.3rem;
}

.db-wpf input.wpforms-error,
.db-wpf select.wpforms-error,
.db-wpf textarea.wpforms-error {
	border-color: var(--wp--preset--color--magenta-texto);
}

.wpforms-confirmation-container-full {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--verde-ligacao);
	border-radius: 4px;
	color: var(--wp--preset--color--tinta);
	padding: var(--wp--preset--spacing--30);
	margin: 0;
}

.wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}
/* --------------------------------------------------
   Largura dentro do tema de blocos

   O main do tema usa is-layout-constrained, que limita
   os filhos directos ao contentSize de 578px. O wrapper
   do Elementor e um desses filhos, pelo que as seccoes
   largas ficavam esmagadas. Cada container do Elementor
   define a sua propria largura, por isso liberta-se aqui
   apenas o wrapper.
   -------------------------------------------------- */
.is-layout-constrained > .elementor {
	max-width: none;
}

.entry-content > .elementor,
.wp-block-post-content > .elementor {
	max-width: none;
}
/* --------------------------------------------------
   Faixa a toda a largura

   Equivalente do align:full do Gutenberg. O tema usa
   useRootPaddingAwareAlignments, por isso as margens
   negativas anulam a repadding lateral do main e a
   faixa encosta as duas extremidades do ecra.

   As margens verticais ficam aqui e nao no Elementor,
   para o CSS inline dele nao sobrepor as laterais.
   -------------------------------------------------- */
.db-faixa-total {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--50);
	margin-left: calc(-1 * var(--wp--style--root--padding-left));
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
}
/* --------------------------------------------------
   Seccao Onde estamos

   Grelha em vez de duas colunas flex, para o mapa poder
   alinhar com precisao a linha do titulo e a linha do
   email. Com duas colunas independentes nao ha forma de
   as fazer coincidir em altura.

   O layout aplica-se ao .e-con-inner: nos containers
   boxed do Elementor o elemento exterior e apenas uma
   coluna flex, e e o interior que dispoe os widgets.

   Linhas: 1 titulo, 2 morada, 3 telefone, 4 email,
   5 horario, 6 botao. O mapa ocupa da 1 a 4, ou seja,
   do titulo ate ao fim da linha do email.
   -------------------------------------------------- */
.db-contactos-grelha > .e-con-inner {
	display: grid;
	grid-template-columns: 45fr 55fr;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: 0;
	align-items: start;
}

.db-contactos-grelha .db-linha-contacto {
	grid-column: 1;
	width: 100%;
}

.db-contactos-grelha .db-mapa-celula {
	grid-column: 2;
	grid-row: 1 / 5;
	width: 100%;
	height: 100%;
}

.db-contactos-grelha .db-mapa-celula > .elementor-widget-container {
	height: 100%;
}

/* O mapa deixa de depender do racio e preenche a celula */
.db-contactos-grelha .db-mapa {
	aspect-ratio: auto;
	height: 100%;
	min-height: 240px;
}

/* Espaco antes do botao, que o row-gap zero retirou */
.db-contactos-grelha .db-botao-contorno {
	margin-top: var(--wp--preset--spacing--20);
}

/* Abaixo de 781px empilha, como as wp:columns do original */
@media (max-width: 781px) {
	.db-contactos-grelha > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.db-contactos-grelha .db-linha-contacto,
	.db-contactos-grelha .db-mapa-celula {
		grid-column: 1;
		grid-row: auto;
		height: auto;
	}

	.db-contactos-grelha .db-mapa {
		aspect-ratio: 2 / 1;
		height: auto;
	}

	.db-contactos-grelha .db-mapa-celula {
		margin-top: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 640px) {
	.db-contactos-grelha .db-mapa {
		aspect-ratio: 4 / 3;
	}
}

/* --------------------------------------------------
   Seccoes escuras

   A classe .is-style-seccao-escura funciona tal e qual,
   por ser uma classe simples. O que se perde sao as
   regras descendentes do blocos.css, que apontam a
   markup do Gutenberg. Reescrevem-se aqui.

   Nota importante: o blocos.css exclui os botoes pelo
   .wp-element-button. No Elementor a classe e outra, e
   sem esta reescrita os botoes dentro de seccoes
   escuras herdavam a cor das ligacoes.
   -------------------------------------------------- */
.is-style-seccao-escura a:where(:not(.elementor-button)) {
	color: var(--wp--preset--color--verde-claro);
}

.is-style-seccao-escura a:where(:not(.elementor-button)):hover,
.is-style-seccao-escura a:where(:not(.elementor-button)):focus {
	color: var(--wp--preset--color--papel);
}

.is-style-seccao-escura .elementor .db-botao-contorno .elementor-button {
	color: var(--wp--preset--color--verde-claro);
	border-color: var(--wp--preset--color--verde-claro);
}

.is-style-seccao-escura .elementor .db-botao-contorno .elementor-button:hover,
.is-style-seccao-escura .elementor .db-botao-contorno .elementor-button:focus {
	background-color: var(--wp--preset--color--verde-claro);
	color: var(--wp--preset--color--tinta);
}

.is-style-seccao-escura :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--verde-claro);
}

/* --------------------------------------------------
   Rodape

   O separador e a pesquisa vinham de blocos do
   Gutenberg. A pesquisa mantem a marcacao .wp-block-search
   para reaproveitar o blocos.css; so o separador precisa
   de regra propria.
   -------------------------------------------------- */
hr.db-rodape-separador {
	border: none;
	border-top: 1px solid var(--wp--preset--color--separador);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	opacity: 1;
}

.db-rodape .db-rodape-pesquisa {
	margin-top: var(--wp--preset--spacing--40);
}

/* As colunas do rodape empilham em ecra estreito */
@media (max-width: 781px) {
	.db-rodape-colunas > .e-con-inner,
	.db-rodape-colunas {
		flex-direction: column;
	}

	.db-rodape-colunas > .e-con {
		width: 100%;
	}
}

/* --------------------------------------------------
   Botoes

   O Elementor aplica a tipografia accent e a cor accent
   aos botoes por omissao. Repoe-se aqui o estilo do
   theme.json: verde #00B75E com tinta por cima, Space
   Grotesk 700 em caixa normal.

   Usa-se .elementor a prefixar para ganhar a
   .elementor-widget-button .elementor-button que o
   Elementor gera, sem recorrer a !important.
   -------------------------------------------------- */
.elementor .elementor-widget-button .elementor-button {
	background-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--tinta);
	border-radius: 4px;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--corpo);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
}

.elementor .elementor-widget-button .elementor-button:hover,
.elementor .elementor-widget-button .elementor-button:focus {
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--verde-claro);
}

/* Botao do cabecalho, mais compacto */
.elementor .db-cta .elementor-button {
	padding: 0.6rem 1.15rem;
	font-size: var(--wp--preset--font-size--pequeno);
	white-space: nowrap;
}


/* --------------------------------------------------
   Cabecalho: impedir que o menu parta em duas linhas
   -------------------------------------------------- */
.db-cabecalho > .e-con-inner {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
}

/* O logotipo nao encolhe.

   O Elementor define nos containers em linha:
     --container-widget-flex-grow: 1;
     --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
   o que resolve para 0%, e aplica isso como largura dos
   widgets filhos. Sem repor width e max-width, o widget
   do logotipo fica com largura zero e desaparece, mesmo
   estando presente no HTML. */
.db-cabecalho > .e-con-inner > .elementor-widget-html {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

/* O lado direito ocupa o que sobra, sem largura fixa */
.db-cabecalho .db-cabecalho-direita {
	flex: 1 1 auto;
	min-width: 0;
}

.db-cabecalho .xpro-elementor-horizontal-navbar-nav {
	flex-wrap: nowrap;
}

.db-cabecalho .xpro-elementor-nav-link {
	white-space: nowrap;
}

/* --------------------------------------------------
   Etiquetas nos titulos do Elementor

   O widget de titulo poe as classes personalizadas no
   div involucro e nao no h2, que fica com a cor dos
   estilos globais. Em seccao escura isso dava texto
   escuro sobre fundo escuro, invisivel.

   Repete-se aqui a regra do blocos.css, apontada ao
   .elementor-heading-title.
   -------------------------------------------------- */
.elementor-widget-heading.is-style-etiqueta .elementor-heading-title {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave);
	margin: 0;
}

.is-style-seccao-escura .elementor-widget-heading.is-style-etiqueta .elementor-heading-title {
	color: var(--wp--preset--color--texto-suave-inv);
}

/* Titulos normais dentro de seccoes escuras.
   O Elementor aplica --e-global-color-primary a todos os
   titulos com especificidade 0,2,0; estas regras ganham. */
.is-style-seccao-escura .elementor-widget-heading .elementor-heading-title {
	color: var(--wp--preset--color--papel);
}

/* --------------------------------------------------
   Texto corrido dentro de seccoes escuras

   O Elementor gera .elementor-widget-text-editor com
   color: var(--e-global-color-text), aplicada ao proprio
   widget. A regra .is-style-seccao-escura do blocos.css
   define a cor num antepassado, para ser herdada, e uma
   cor directa ganha sempre a uma herdada.

   Resultado sem esta correccao: texto tinta sobre fundo
   tinta, invisivel.
   -------------------------------------------------- */
.is-style-seccao-escura .elementor-widget-text-editor,
.is-style-seccao-escura .elementor-widget-text-editor p,
.is-style-seccao-escura .elementor-widget-text-editor li,
.is-style-seccao-escura .elementor-widget-html,
.is-style-seccao-escura .elementor-widget-html p,
.is-style-seccao-escura .elementor-widget-html li {
	color: var(--wp--preset--color--papel);
}

/* Texto secundario continua a distinguir-se, mas na
   variante clara, validada para fundo escuro. */
.is-style-seccao-escura .db-custo-chamada,
.is-style-seccao-escura .db-firma,
.is-style-seccao-escura .has-texto-suave-color {
	color: var(--wp--preset--color--texto-suave-inv);
}

/* --------------------------------------------------
   Logotipo do cabecalho

   E a ligacao para a pagina inicial, mas nada o
   sinalizava. Acrescenta-se o cursor e um ligeiro
   escurecimento ao passar o rato, para se ler como
   clicavel sem ocupar espaco no cabecalho.

   A transicao respeita quem pediu menos movimento.
   -------------------------------------------------- */
.db-logo-ligacao {
	cursor: pointer;
	transition: opacity 0.15s ease-in-out;
}

.db-logo-ligacao:hover,
.db-logo-ligacao:focus-visible {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.db-logo-ligacao {
		transition: none;
	}
}

/* --------------------------------------------------
   Icones do menu movel, sem Font Awesome

   O widget do Xpro usa <i class='fas fa-bars'> e
   <i class='fas fa-times'>, o que obrigava a carregar
   toda a biblioteca Font Awesome (folha de estilos mais
   ficheiros de tipo de letra) por causa de dois icones.

   Desenham-se aqui com pseudo-elementos. Herdam a cor
   do botao, portanto continuam a acompanhar o tema.
   -------------------------------------------------- */
.xpro-elementor-horizontal-menu-toggler i,
.xpro-elementor-horizontal-menu-close i {
	font-family: inherit;
	font-style: normal;
	display: inline-block;
	position: relative;
	width: 22px;
	height: 22px;
	vertical-align: middle;
}

/* Tres tracos */
.xpro-elementor-horizontal-menu-toggler i::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

/* Cruz */
.xpro-elementor-horizontal-menu-close i::before,
.xpro-elementor-horizontal-menu-close i::after {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 22px;
	height: 2px;
	background-color: currentColor;
}

.xpro-elementor-horizontal-menu-close i::before {
	transform: rotate(45deg);
}

.xpro-elementor-horizontal-menu-close i::after {
	transform: rotate(-45deg);
}

/* Area de toque adequada em ecra tactil - WCAG 2.5.8 */
.xpro-elementor-horizontal-menu-toggler,
.xpro-elementor-horizontal-menu-close {
	min-width: 44px;
	min-height: 44px;
}