/*
Theme Name: Mas Dagot (Hello Elementor Child)
Theme URI: https://masdagot.com/
Description: Tema fill de Hello Elementor per a Mas Dagot. Tipografies de marca (Noctis i Geomanist) i base de disseny.
Author: Eiko Digital Studio
Author URI: https://eikostudio.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ---------------------------------------------------------------
   Tipografies de marca
   Noctis  -> titulars, logotip, enllaços destacats
   Geomanist -> text corrent, formularis, peu
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Noctis';
	src: url('assets/fonts/Noctis-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noctis';
	src: url('assets/fonts/Noctis-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geomanist';
	src: url('assets/fonts/Geomanist-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geomanist';
	src: url('assets/fonts/Geomanist-Book.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geomanist';
	src: url('assets/fonts/Geomanist-Regular.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------
   Base
   Els colors i les mides es gestionen des dels globals d'Elementor.
   Aquí només hi va allò que Elementor no pot fer.
   --------------------------------------------------------------- */

body {
	background-color: var(--e-global-color-secondary, #FFFEF7);
}

/* Camps de formulari del disseny: només línia inferior, sense caixa */
.elementor-widget-form.md-form .elementor-field-group .elementor-field-textual {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-primary, #4C2D00);
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.elementor-widget-form.md-form .elementor-field-group .elementor-field-textual:focus {
	box-shadow: none;
	border-bottom-color: var(--e-global-color-primary, #4C2D00);
}

.elementor-widget-form.md-form .elementor-field-group > label {
	opacity: .75;
}

/* El botó d'enviar del disseny és un enllaç subratllat, no un botó */
.elementor-widget-form.md-form .elementor-button[type="submit"] {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--e-global-color-primary, #4C2D00);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.elementor-widget-form.md-form .elementor-button[type="submit"]:hover {
	color: var(--e-global-color-accent, #705731);
}

/* La casella de privacitat va centrada, com al disseny */
.elementor-widget-form.md-form .elementor-field-type-acceptance .elementor-field-subgroup {
	justify-content: center;
}

.elementor-widget-form.md-form .elementor-field-type-acceptance {
	justify-content: center;
}

.elementor-widget-form.md-form .elementor-field-option label {
	font-size: 14px;
}

/* L'opció ocupava tot l'ample i el centrat del pare no feia res */
.elementor-widget-form.md-form .elementor-field-type-acceptance .elementor-field-option {
	flex: 0 0 auto;
	text-align: center;
}

/* El salt de línia del titular és una decisió d'escriptori: en mòbil sobra */
@media (max-width: 767px) {
	.md-news-titol br {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Capçalera
   Va SOBRE el hero, no ocupa espai al flux.
   --------------------------------------------------------------- */

.md-header,
.md-header .elementor-widget-container {
	color: var(--e-global-color-secondary, #FFFEF7);
}

/* ⚠️ El crema d'aquí dalt és per al logotip i la hamburguesa, que van
   damunt de la foto del hero. Però el panell del menú també viu dins de
   `.md-header` i té fons crema: les dades de contacte hi sortien del
   mateix color que el fons i no es veien. Només quedaven a la vista els
   enllaços (que tenen color propi), i per això les línies semblaven
   desalineades: hi havia el text «Telèfon:» i «WhatsApp:» ocupant lloc,
   invisible.

   No es podia arreglar des del widget: la regla de dalt s'aplica a
   `.elementor-widget-container`, més a prop del text que el selector que
   genera Elementor per al widget, i per proximitat guanya encara que
   tingui menys especificitat.

   Ve del muntatge original, no de la migració: la regla mai va estar
   condicionada a `body.home`, així que passava a totes les pàgines. */
.md-header .e-off-canvas .elementor-widget-container {
	color: var(--e-global-color-primary, #4C2D00);
}

/* Icona d'hamburguesa: 3 línies de 35×2px amb 12px de separació (mesurat al disseny).
   El selector porta l'element `header[...]` a propòsit: el CSS del kit d'Elementor
   carrega DESPRÉS i el seu `.elementor-kit-N a{color:...}` guanyaria a `.md-burger`. */
header[data-elementor-type="header"] .md-burger {
	/* `flex` i no `inline-flex`: com a element en línia arrossegava
	   l'interlineat i baixava la icona 13px respecte del títol. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 35px;
	height: 30px;
	color: var(--e-global-color-secondary, #FFFEF7);
}

header[data-elementor-type="header"] .md-burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: opacity .2s ease;
}

header[data-elementor-type="header"] .md-burger:hover span {
	opacity: .7;
}

/* ---------------------------------------------------------------
   Panell del menú (off-canvas)
   --------------------------------------------------------------- */

.md-close {
	display: inline-flex;
	color: var(--e-global-color-primary, #4C2D00);
	transition: opacity .2s ease;
}

.md-close:hover {
	opacity: .6;
}

/* Els ítems del menú van a l'esquerra i sense farciment: la mida ve de la tipografia */
.md-menu .elementor-nav-menu--main .elementor-nav-menu a {
	padding: 0;
}

.md-menu .elementor-nav-menu--layout-vertical > ul > li > a {
	justify-content: flex-start;
}

/* Les dades de contacte del panell segueixen l'interlineat del disseny (30px) */
.md-dades p {
	line-height: 30px;
}

/* El marge del <p> inflava el bloc de dades del panell 14px de més */
.md-dades p {
	margin: 0;
}

/* ---------------------------------------------------------------
   Correcció d'un error d'Elementor Pro 3.34 a l'off-canvas
   En tancar, el handler afegeix `e-off-canvas__no-scroll-animation`
   al body i només la treu a l'`animationend` de l'animació de sortida.
   Aquesta animació no arriba a executar-se mai: Elementor no porta CSS
   per a cap animació de sortida (no hi ha slideOut*), i amb «cap»
   el seu propi selector `.animated-reverse-wrapper .no-animation`
   busca un descendent quan la classe és al mateix element.
   Resultat: el body es queda amb overflow:hidden i la pàgina no fa scroll.
   Aquí el desactivem quan no hi ha cap panell obert de veritat.
   --------------------------------------------------------------- */

body.e-off-canvas__no-scroll-animation:not(:has(.e-off-canvas[aria-hidden="false"])) {
	overflow: visible;
}

/* ---------------------------------------------------------------
   🔴 XARXA DE SEGURETAT DE LES ANIMACIONS D'ENTRADA

   Elementor amaga amb `visibility:hidden` tot element que porti una
   animació d'entrada (classe `elementor-invisible`) i confia que el seu
   JavaScript la tregui en entrar a la pantalla. Aquí NO ho fa: els
   assets carreguen bé (frontend.min.js i fadeInUp.min.css tornen 200) i
   el marcatge és correcte, però el manejador no dispara mai. El
   `frontend.min.js` d'Elementor 4.2.4 llança
   «elementorDevTools is not defined».

   Resultat: amb les animacions posades, les pàgines sortien EN BLANC.

   Aquesta regla garanteix que el contingut es vegi passi el que passi
   amb el JavaScript. No s'ha de treure encara que un dia les animacions
   funcionin: és exactament la garantia que faltava.
   --------------------------------------------------------------- */

/* DECISIÓ (10/09/2026): es fa servir l'animació d'entrada NATIVA
   d'Elementor, no una de pròpia.

   ⚠️ Aquí hi va haver una regla `.elementor-invisible{visibility:visible}`
   com a xarxa de seguretat. S'ha tret a posta: xoca amb l'animació
   nativa. Elementor amaga l'element fins que entra a pantalla i llavors
   l'esvaeix; si se'l força visible abans, es veu, després parpelleja i
   torna a aparèixer.

   ⚠️ I un avís per si algú torna a mirar això: es va arribar a pensar que
   l'observador d'Elementor estava trencat perquè en fer proves els
   elements no es destapaven mai. NO ho estava. Les proves es feien en un
   navegador sense pintar (`document.hidden` = true), i una pàgina que no
   es pinta no dispara mai `IntersectionObserver`. Abans de donar per
   trencada una animació d'entrada, comprovar-ho en un navegador de
   veritat.

   Queda `assets/js/md-animacions.js` encolat des del functions.php, d'una
   implementació pròpia que es va descartar. No fa res (només afegeix una
   classe que ja no té CSS), però convé treure'l quan es pugui. */

/* ---------------------------------------------------------------
   L'animació de SORTIDA de l'off-canvas, que Elementor no porta

   A `assets/lib/animations/styles/` hi ha `slideInRight.min.css`, però
   `slideOutRight.min.css` dona 404 — comprovat a Elementor 4.2.4, o sigui
   que segueix igual que a la 3.34. Per això el menú obria animat i es
   tancava de cop.

   El mecanisme d'Elementor sí que és correcte: en tancar afegeix
   `animated-reverse-wrapper` al panell, que amb el keyframe
   `e-off-canvas-close` el manté visible tota la durada, i posa la classe
   de sortida a `.e-off-canvas__main`. Només faltava definir-la.

   Format calcat del fitxer original perquè es comporti igual.
   La durada surt de `--e-off-canvas-animation-duration` (0,5 s), que es
   toca des del widget, no des d'aquí.
   --------------------------------------------------------------- */

@keyframes slideOutRight {
	from {
		transform: translate3d(0, 0, 0);
	}

	/* ⚠️ Sense `visibility: hidden` a posta, al contrari que a animate.css.
	   `visibility` és una propietat discreta: en un keyframe de dos passos
	   salta al 50%, o sigui que el panell es feia invisible a mig recorregut
	   i el lliscament no s'arribava a veure. Amagar-lo ja ho fa Elementor
	   des del contenidor. */
	to {
		transform: translate3d(100%, 0, 0);
	}
}

/* ⚠️ En tancar, Elementor NO treu la classe d'entrada: el panell es queda
   amb `slideInRight` i `slideOutRight` alhora. Amb el selector pelat
   `.slideOutRight` (0,1,0) les dues regles empaten en especificitat i mana
   l'ordre de càrrega, que guanya Elementor. Cal pujar-la perquè la sortida
   s'imposi sempre, carregui el que carregui abans. */
.elementor-widget-off-canvas .e-off-canvas__main.slideOutRight {
	animation-name: slideOutRight;
}

/* animate.css deixa el `ease` per defecte, que en un panell tan ample
   arrenca de cop i frena massa aviat. Aquesta corba surt suau als dos
   sentits (entrada i sortida comparteixen l'element). */
.elementor-widget-off-canvas .e-off-canvas__main.animated {
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ⚠️ Amb això sol encara no n'hi havia prou: en tancar, Elementor posa
   `visibility:hidden` al contenidor del panell a l'instant, de manera que
   l'animació de sortida es reprodueix damunt d'un element ja invisible i
   no es veu mai. Es retarda el canvi de `visibility` exactament el que
   dura l'animació, i mentrestant s'esvaeix l'opacitat. En obrir, cap
   retard: ha d'aparèixer de seguida. */
.elementor-widget-off-canvas .e-off-canvas {
	transition:
		opacity var(--e-off-canvas-animation-duration, .5s) ease,
		visibility 0s linear var(--e-off-canvas-animation-duration, .5s);
}

.elementor-widget-off-canvas .e-off-canvas[aria-hidden="false"] {
	transition:
		opacity var(--e-off-canvas-animation-duration, .5s) ease,
		visibility 0s;
}

/* ---------------------------------------------------------------
   Dues capçaleres amb una sola plantilla
   Portada  -> logotip crema damunt del hero, fora del flux.
   La resta  -> títol de la pàgina en marró, dins del flux, sobre crema.
   El discriminant és la classe `home` que WordPress posa al body.
   Si més endavant una altra pàgina estrena un hero fosc, se li afegeix
   aquí la seva classe (`page-id-N` o `page-<slug>`).
   --------------------------------------------------------------- */

body.home header[data-elementor-type="header"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

body.home .md-titol {
	display: none;
}

body:not(.home) .md-logo {
	display: none;
}

body:not(.home) header[data-elementor-type="header"] .md-burger {
	color: var(--e-global-color-primary, #4C2D00);
}

/* ---------------------------------------------------------------
   Home
   --------------------------------------------------------------- */

/* Enllaços de secció: text subratllat, sense forma de botó */
.md-enllac a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* El segell penja a la dreta del titular SENSE desplaçar-lo:
   al disseny «Projectant amb el cor» queda centrat a la pàgina (x=959)
   i el segell sobresurt. Si anessin tots dos en una fila centrada,
   el titular es desplaçaria uns 50px cap a l'esquerra. */
.md-titol-segell {
	position: relative;
}

.md-titol-segell .md-segell {
	position: absolute;
	left: calc(50% + 235px);
	top: 102px;
	width: 83px;
}

@media (max-width: 1100px) {
	.md-titol-segell .md-segell {
		position: static;
		margin: 18px auto 0;
	}
}

/* Els blocs de text amb amplada fixa s'han de poder centrar */
.md-cos {
	max-width: 100%;
}

/* L'espaiat d'aquests blocs el porten els marges del widget, no el <p> */
.md-cos p,
.md-enllac p {
	margin: 0;
}

/* L'espaiat entre widgets el porta Elementor: els marges que el tema posa als
   titulars descuadren les distàncies mesurades al disseny. */
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

/* Elementor posa 20px de marge inferior a cada widget que no és l'últim.
   L'espaiat d'aquest disseny està mesurat: el porten els marges explícits. */
.elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* Els paràgrafs de cos deixen una línia en blanc entre ells (19px al disseny) */
.md-cos p + p {
	margin-top: 19px;
}

/* «Projectant amb el cor» (Essència): el segon paràgraf porta sagnat de
   primera línia i el bloc va justificat, com al PDF. */
.md-cos-sagnat p + p {
	text-indent: 14px;
}

/* L'interlineat de 19px del disseny (1,19 sobre 16px) és molt just per llegir
   en un mòbil. El disseny no especifica mòbil, així que allà s'obre a 1,5. */
@media (max-width: 767px) {
	.md-cos p {
		line-height: 24px;
	}

	.md-cos p + p {
		margin-top: 24px;
	}

	/* Justificar en una columna estreta obre forats: a l'esquerra */
	.md-cos-sagnat p {
		text-align: left;
		text-indent: 0;
	}
}


/* ---------------------------------------------------------------
   Bàner de galetes (Complianz)
   Els colors es configuren al plugin (Aparença del bàner); aquí només
   hi va la tipografia de marca, que Complianz no controla.
   --------------------------------------------------------------- */

.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-category-title,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: 'Noctis', Georgia, serif;
	font-weight: 300;
	letter-spacing: 0;
}

.cmplz-cookiebanner .cmplz-title {
	font-size: 21px;
	line-height: 1.2;
}

.cmplz-cookiebanner .cmplz-header {
	justify-content: space-between;
}

.cmplz-cookiebanner .cmplz-message {
	line-height: 1.55;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
.cmplz-cookiebanner .cmplz-links a {
	font-family: 'Geomanist', system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
}

.cmplz-cookiebanner .cmplz-category-title {
	font-size: 17px;
}

/* La pestanya per tornar a obrir el consentiment */
#cmplz-manage-consent .cmplz-manage-consent {
	font-size: 14px;
}

/* ---------------------------------------------------------------
   Pàgines legals
   Text llarg: aquí l'interlineat s'obre a 1,6. El 19px del disseny
   és per a blocs curts i en un document de 2.000 paraules no es llegeix.
   --------------------------------------------------------------- */

.elementor-widget-text-editor.md-legal-cos h2 {
	font-family: 'Noctis', Georgia, serif;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.25;
	color: var(--e-global-color-primary, #4C2D00);
	margin: 38px 0 12px;
}

.elementor-widget-text-editor.md-legal-cos h2:first-child {
	margin-top: 0;
}

.md-legal-cos p {
	margin: 0 0 14px;
}

.md-legal-cos ul {
	margin: 0 0 14px;
	padding-left: 20px;
	list-style: disc;
}

.md-legal-cos li {
	margin-bottom: 7px;
}

.md-legal-cos a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.md-legal-cos table {
	width: 100%;
	border-collapse: collapse;
	margin: 6px 0 18px;
	font-size: 14px;
}

.md-legal-cos th,
.md-legal-cos td {
	border: 1px solid rgba(76, 45, 0, .3);
	padding: 9px 11px;
	text-align: left;
	vertical-align: top;
}

.md-legal-cos th {
	font-family: 'Noctis', Georgia, serif;
	font-weight: 300;
	font-size: 15px;
}

/* ---------------------------------------------------------------
   Marca de dades PENDENTS
   Tot el que estigui així és text de farciment: són les dades de
   l'empresa que encara no tenim. NO es pot publicar la web així.
   --------------------------------------------------------------- */

.md-pendent {
	background: #FBE9A7;
	box-shadow: 0 0 0 2px #FBE9A7;
	color: #6b4b00;
	font-style: italic;
}

/* A les pàgines legals, el títol de la capçalera i l'h1 del document deien
   exactament el mateix. Es manté l'h1 (la semàntica ha de viure al contingut)
   i s'amaga el de la capçalera, que aquí no aporta res. */
.md-legal-page .md-titol {
	display: none;
}

/* Amagant el títol de la capçalera, la fila es queda amb un sol element i
   el `space-between` deixava la hamburguesa a l'esquerra. */
.md-legal-page .md-burger-wrap {
	margin-left: auto;
}

/* Al peu, els marges per defecte del <p> inflaven el bloc de marca uns 40px */
.md-peu p {
	margin: 0;
}

/* ---------------------------------------------------------------
   Dues regles que es van perdre en una edició del fitxer i s'han
   hagut de restaurar. Si es torna a editar aquest CSS per script,
   comprovar que hi continuen sent.
   --------------------------------------------------------------- */

/* «Com arribar» només és al peu de la pàgina de Contacte (ca #13 · es #62) */
body:not(.page-id-13):not(.page-id-62) .md-com-arribar {
	display: none;
}

/* La imatge del carrusel és inline i deixa ~10px de línia base sota la foto */
.md-slider img,
.md-slider figure {
	display: block;
	line-height: 0;
	margin: 0;
}

/* Les xarxes del peu van a l'interlineat del text menut, no al del cos */
.md-socials p {
	line-height: 19px;
}


/* ---------------------------------------------------------------
   Selector d'idioma CA / ES
   --------------------------------------------------------------- */

/* L'idioma actual es pinta com a <span>, no com a enllaç: cal donar-li
   el mateix color que als enllaços perquè la parella es vegi igual que
   al disseny, on CA i ES no es distingeixen entre si. */
.md-idioma {
	color: #4C2D00;
	text-decoration: none;
}

a.md-idioma:hover,
a.md-idioma:focus-visible {
	color: #705731;
}

.md-idioma-actiu {
	cursor: default;
}