/*
Theme Name: GAL Gargano
Theme URI: https://www.galgargano.com/
Description: Tema figlio di Hello Elementor per il sito del GAL Gargano Agenzia di Sviluppo. Contiene i token di brand e gli stili che non si possono costruire con i widget di Elementor. Direzione grafica: Promontorio.
Author: Asernet Srl
Author URI: https://www.asernet.it/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gal-gargano
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   FONT: Lexend, self-hosted (scelta di Marco, 14/10/2026).
   Un solo file a peso variabile (100–900) per alfabeto, latino e
   latino esteso; licenza OFL in assets/fonts/OFL.txt. Niente Google
   Fonts: il filtro in functions.php spegne quelli di Elementor (GDPR).
   ============================================================ */

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/lexend-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/lexend-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   TOKEN DI BRAND
   Fonte: DESIGN.md, estratti dal brand book ufficiale.
   Vanno usati ovunque — nei widget Elementor si richiamano con
   var(--gg-*), mai scrivendo l'esadecimale a mano.
   ============================================================ */

:root {
	/* i quattro colori del marchio, come dichiarati nel brand book */
	--gg-earth: #86755D;
	--gg-sun: #F8AD03;
	--gg-sand: #D7B56D;
	--gg-sea: #00A3B5;
	--gg-ink: #3C3C3B;
	--gg-black: #000000;

	/* varianti scure: --gg-sea e --gg-earth non passano l'AA su fondo chiaro
	   a corpo testo, queste sì (verificate nelle proposte) */
	--gg-sea-dark: #00707C;
	--gg-sea-deep: #02505A;
	--gg-earth-dark: #6B5C48;
	--gg-earth-deep: #4E4335;
	--gg-sand-light: #FAF5E9;

	/* tinte pallide delle testate senza foto: sotto il titolo in --gg-*-deep */
	--gg-sea-pale: #D5EEF1;
	--gg-earth-pale: #EDE4D3;

	/* sole e natura: le altre due tinte delle testate. L'ocra è il giallo del marchio
	   scurito; il verde non è nel brand book: è quello del box Strategia in home */
	--gg-ochre: #D99A0B;
	--gg-ochre-pale: #FBEFD2;
	--gg-ochre-deep: #6E4A00;
	--gg-green: #1C7A4A;
	--gg-green-pale: #DCEEE3;
	--gg-green-deep: #0F4A2C;
	/* oliva: dall'ulivo del marchio, la natura più morbida */
	--gg-olive: #7D8C3C;
	--gg-olive-pale: #E9EDD8;
	--gg-olive-deep: #3F4A17;
	/* cielo d'alba: dall'azzurro pallido al giallo caldo, titolo in blu notte (sezione Bandi,
	   palette 3 dei mockup, Marco 14/10). Non è nel brand book */
	--gg-sky-pale: #E1EFF8;
	--gg-sky-dawn: #F5D58A;
	--gg-sky-deep: #16466A;

	/* fondo e inchiostro della direzione Promontorio */
	--gg-paper: #FFFFFF;
	--gg-white: #FFFFFF;
	--gg-text: #2E2C28;
	--gg-text-soft: #6D6860;
	--gg-line: #ECE6D9;

	/* famiglie: Lexend per titoli e testo, geometrico come il Futura del brand book.
	   Restano due token per poterli separare di nuovo senza toccare le regole. */
	--gg-font-display: "Lexend", -apple-system, "Segoe UI", sans-serif;
	--gg-font-text: "Lexend", -apple-system, "Segoe UI", sans-serif;

	/* piede: fondo scuro e i suoi due livelli di testo, entrambi sopra l'AA */
	--gg-footer: #2E2C28;
	--gg-footer-text: #CFC9BC;
	--gg-footer-soft: #A8A296;
}

/* il reset di Hello lascia al body il font di sistema: barra di servizio e piede
   lo ereditavano, il resto del sito no */
body {
	font-family: var(--gg-font-text);
}

/* ============================================================
   TESTATA E PIEDE
   Sono scritti in header.php e footer.php, non con il Theme
   Builder: qui c'è il loro stile. I menu e le colonne del piede
   restano posizioni di menu e aree widget standard.
   ============================================================ */

.gg-wrap {
	max-width: 1360px;
	margin: 0 auto;
	padding-inline: 24px;
}

/* salto al contenuto: primo elemento focalizzabile (EN 301 549 / WCAG 2.4.1) */
.gg-salta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.gg-salta:focus {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	background: var(--gg-white);
	color: var(--gg-text);
	font-family: var(--gg-font-display);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 18px;
}

/* ---- barra di servizio ---- */
.gg-servizio {
	background: #F5F1E8;
	color: var(--gg-text);
	font-size: 14px;
	border-bottom: 1px solid var(--gg-line);
}
.gg-servizio .gg-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	padding-block: 7px;
}
.gg-servizio a {
	color: var(--gg-text);
	text-decoration: none;
}
.gg-servizio a:hover,
.gg-servizio a:focus-visible {
	color: var(--gg-sea-dark);
}
.gg-contatti {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.gg-contatti p {
	margin: 0;
}
/* icone accanto a orari, telefono, email e PEC. Si agganciano al contenuto dei widget
   (nessun link = orari, tel: = telefono, mailto: = email, mailto: con «pec» = PEC), così
   restano giuste se la redazione cambia testo o ordine. Decorative: ::before non si legge */
.gg-contatti .gg-widget p::before {
	content: "";
	display: inline-block;
	vertical-align: -2px;
	margin-right: 5px;
	width: 14px;
	height: 14px;
	background: var(--gg-earth-dark);
	-webkit-mask: var(--gg-icona) center / contain no-repeat;
	mask: var(--gg-icona) center / contain no-repeat;
}
.gg-contatti .gg-widget:not(:has(a)) { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
.gg-contatti .gg-widget:has(a[href^="tel:"]) { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z%22/%3E%3C/svg%3E"); }
.gg-contatti .gg-widget:has(a[href^="mailto:"]) { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M3 7l9 6 9-6%22/%3E%3C/svg%3E"); }
.gg-contatti .gg-widget:has(a[href^="mailto:"][href*="pec"]) { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22/%3E%3C/svg%3E"); }
/* un widget senza icona riconoscibile resta senza: niente quadratino vuoto */
.gg-contatti .gg-widget:has(a):not(:has(a[href^="tel:"], a[href^="mailto:"])) p::before {
	content: none;
}

.gg-menu-servizio {
	margin-left: auto;
}
.gg-lista-servizio {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* social: l'icona si aggancia al dominio del link, così la redazione cambia gli indirizzi
   dal menu «Barra di servizio — social». Dominio sconosciuto = globo */
.gg-lista-social {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gg-social a {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	--gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18%22/%3E%3C/svg%3E");
}
.gg-social a::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--gg-icona) center / contain no-repeat;
	mask: var(--gg-icona) center / contain no-repeat;
}
.gg-social a[href*="//x.com"], .gg-social a[href*="twitter.com"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M18.9 1.2h3.7l-8 9.2 9.4 12.4h-7.4l-5.8-7.6-6.6 7.6H.5l8.6-9.8L0 1.2h7.6l5.2 6.9zm-1.3 19.4h2L6.5 3.2H4.3z%22/%3E%3C/svg%3E"); }
.gg-social a[href*="facebook.com"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M14 8h3V4h-3c-2.8 0-5 2.2-5 5v2H7v4h2v9h4v-9h3l1-4h-4V9c0-.6.4-1 1-1z%22/%3E%3C/svg%3E"); }
.gg-social a[href*="instagram.com"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3C/g%3E%3Ccircle fill=%22%23000%22 cx=%2217.3%22 cy=%226.7%22 r=%221.2%22/%3E%3C/svg%3E"); }
.gg-social a[href*="youtube.com"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.8 15.1V8.9l5.4 3.1z%22/%3E%3C/svg%3E"); }
.gg-social a[href*="t.me"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M21.9 3.6 18.8 20c-.2 1.1-.9 1.4-1.8.9l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.2-8.3c.4-.4-.1-.6-.6-.2L6.2 13.6l-4.9-1.5c-1.1-.3-1.1-1 .2-1.6L20.6 2.3c.9-.3 1.7.2 1.3 1.3z%22/%3E%3C/svg%3E"); }
.gg-social a[href*="wa.me"] { --gg-icona: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 20.5l1.2-4.1A8.5 8.5 0 1 1 7.8 19.4z%22/%3E%3Cpath d=%22M9 8.3c0 3.4 3 6.5 6.6 6.6l1-1.4-2-1-1 .8a5 5 0 0 1-2.9-2.9l.8-1-1-2z%22/%3E%3C/g%3E%3C/svg%3E"); }

/* ---- testata ---- */
.gg-testata {
	background: var(--gg-white);
	border-bottom: 1px solid var(--gg-line);
}
.gg-testata .gg-wrap {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 16px;
}
.gg-logo img {
	height: 46px;
	width: auto;
	display: block;
}
/* su desktop (menu in linea, oltre la soglia di menu.js) il logo più grande (Marco, 16/10) */
@media (min-width: 1081px) {
	.gg-testata .gg-logo img {
		height: 65px;
	}
}
.gg-logo-testo {
	font-family: var(--gg-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--gg-text);
	text-decoration: none;
}
.gg-nav {
	margin-left: auto;
}
.gg-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gg-lista a,
.gg-sotto {
	font-family: var(--gg-font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--gg-text-soft);
	text-decoration: none;
	white-space: nowrap;
}
.gg-lista a:hover,
.gg-lista a:focus-visible,
.gg-sotto:hover,
.gg-sotto:focus-visible {
	color: var(--gg-sea-dark);
}
/* voce contenitore («#» nel menu): un pulsante che apre la tendina, vestito da voce.
   Due classi: il reset di Hello colora i pulsanti con [type=button]:hover (0,2,0),
   fondo magenta e bordo arrotondato, e a parità vincerebbe l'ordine di caricamento */
.gg-lista .gg-sotto,
.gg-lista .gg-sotto:hover,
.gg-lista .gg-sotto:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}
.gg-sotto::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.gg-sotto[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}
/* la pagina in cui ci si trova, detta anche fuori dal colore */
.gg-lista .current-menu-item > a,
.gg-lista .current-menu-ancestor > a,
.gg-lista .current-menu-ancestor > .gg-sotto {
	color: var(--gg-text);
	border-bottom: 2px solid var(--gg-sun);
	padding-bottom: 3px;
}

/* il fuoco da tastiera deve vedersi anche sulle fasce scure, dove l'outline
   scuro del tema genitore si perde nel fondo (WCAG 2.4.7) */
.gg-servizio a:focus-visible,
.gg-piede a:focus-visible {
	outline: 3px solid var(--gg-sun);
	outline-offset: 2px;
	box-shadow: none;
}

/* sottomenu: aperto al passaggio e al fuoco da tastiera */
.gg-lista li {
	position: relative;
}
.gg-lista .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 20;
	display: none;
	min-width: 220px;
	background: var(--gg-white);
	border: 1px solid var(--gg-line);
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
/* il passaggio apre solo con un mouse vero: sul telefono il tocco lascerebbe
   l'«hover» attaccato e la tendina non si chiuderebbe più. Le voci contenitore
   si aprono dal loro pulsante (aria-expanded), non dal fuoco */
@media (hover: hover) and (min-width: 1081px) {
	.gg-lista li:hover > .sub-menu {
		display: block;
	}
}
.gg-lista li:not(.gg-contenitore):focus-within > .sub-menu,
.gg-lista .gg-sotto[aria-expanded="true"] + .sub-menu {
	display: block;
}
/* 1.4.13: quello che si apre al passaggio del mouse deve potersi chiudere
   senza spostarlo. Esc mette questa classe, il movimento del mouse la toglie. */
.gg-nav.gg-senza-hover .gg-lista li:hover > .sub-menu {
	display: none;
}
.gg-nav.gg-senza-hover .gg-lista li:not(.gg-contenitore):focus-within > .sub-menu {
	display: block;
}
.gg-lista .sub-menu a {
	display: block;
	padding: 8px 16px;
	text-transform: none;
	font-size: 14px;
	letter-spacing: 0;
	white-space: normal;
}

/* ---- apertura del menu su schermo stretto ---- */
.gg-apri {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: 10px;
	background: none;
	/* il contorno identifica il componente: 1.4.11 chiede almeno 3:1 */
	border: 1px solid var(--gg-earth-dark);
	padding: 10px 14px;
	font-family: var(--gg-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gg-text);
	cursor: pointer;
}
/* Sfarfallio al tocco sul telefono (29/10). Hello dà ai pulsanti `transition: all .3s` e,
   su :hover/:focus, fondo magenta e testo bianco (`button:focus`, 0,1,1): «Menu» ha una
   classe sola e perdeva, così a ogni tocco sfumava verso il magenta e ci restava finché
   aveva il fuoco. Due classi per vincere, niente transizione; il lampo grigio di tocco
   del browser via anche dalle voci. Il fuoco da tastiera resta visibile (2.4.7). */
.gg-testata .gg-apri,
.gg-testata .gg-apri:hover,
.gg-testata .gg-apri:focus {
	background: none;
	color: var(--gg-text);
	transition: none;
}
.gg-testata .gg-apri:focus-visible {
	outline: 3px solid var(--gg-sea-dark);
	outline-offset: 2px;
}
.gg-lista .gg-sotto { transition: none; }
.gg-apri,
.gg-nav a,
.gg-nav .gg-sotto { -webkit-tap-highlight-color: transparent; }
.gg-tratti,
.gg-tratti::before,
.gg-tratti::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}
.gg-tratti {
	position: relative;
}
.gg-tratti::before,
.gg-tratti::after {
	content: "";
	position: absolute;
	left: 0;
}
.gg-tratti::before { top: -6px; }
.gg-tratti::after { top: 6px; }

/* Lexend è più largo di Jost: sotto 1080 px le otto voci non stanno su una riga */
@media (max-width: 1080px) {
	/* il menu aperto va a capo sotto logo e pulsante: senza wrap si stringeva accanto */
	.gg-testata .gg-wrap {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.gg-apri { display: inline-flex; }
	.gg-nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
	}
	.gg-nav.gg-aperto { display: block; }
	/* tendina sopra il contenuto (Marco, 29/10): prima il menu aperto spingeva giù la
	   pagina. Pannello agganciato sotto la testata; il velo sulla pagina è un pseudo-
	   elemento del pannello, così la testata resta pulita e un tocco sul velo arriva al
	   <nav> — menu.js lo chiude. Le voci scorrono dentro se non ci stanno. */
	.gg-testata {
		position: relative;
		z-index: 50;
	}
	.gg-testata .gg-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--gg-white);
		border-top: 1px solid var(--gg-line);
		box-shadow: 0 14px 28px rgba(14, 22, 28, .18);
	}
	.gg-testata .gg-nav::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		background: rgba(14, 22, 28, .4);
	}
	/* svh, non dvh: dvh segue la barra degli indirizzi che compare e sparisce mentre si
	   scorre, e la tendina si ridimensionava a ogni scatto (sfarfallio, Marco 29/10) */
	.gg-testata .gg-lista {
		max-height: calc(100svh - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px 10px;
	}
	/* col menu aperto la pagina sotto non scorre: uno strascico del dito sul velo la
	   muoveva, la barra degli indirizzi si chiudeva e riapriva e tutto saltava */
	html:has(.gg-nav.gg-aperto),
	html:has(.gg-nav.gg-aperto) body { overflow: hidden; }
	.gg-testata .gg-lista > li:first-child { border-top: 0; }
	.gg-lista {
		flex-direction: column;
		gap: 0;
	}
	.gg-lista > li {
		border-top: 1px solid var(--gg-line);
	}
	.gg-lista a,
	.gg-lista .gg-sotto {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding-block: 13px;
	}
	.gg-lista .sub-menu {
		position: static;
		display: block;
		border: 0;
		padding: 0 0 8px 16px;
	}
	/* sul telefono le sezioni contenitore sono a fisarmonica */
	.gg-lista .gg-contenitore > .sub-menu {
		display: none;
	}
	.gg-lista .gg-sotto[aria-expanded="true"] + .sub-menu {
		display: block;
	}
	/* telefono a sinistra, newsletter e social a destra anche quando vanno a capo */
	.gg-servizio .gg-wrap { justify-content: flex-end; }
	.gg-contatti { margin-right: auto; }
	/* sul telefono dei contatti resta solo il telefono: orari ed email stanno nella pagina Contatti */
	.gg-contatti .gg-widget:not(:has(a[href^="tel:"])) { display: none; }
}

/* ---- piede ---- */
/* loghi istituzionali: su bianco, come vogliono i manuali d'immagine dei fondi */
.gg-loghi {
	background: var(--gg-white);
	border-top: 1px solid var(--gg-line);
	padding: 24px 16px;
	text-align: center;
}
.gg-loghi img {
	display: inline-block;
	width: 100%;
	max-width: 763px;
	height: auto;
}
.gg-loghi .gg-widget + .gg-widget { margin-top: 12px; }
.gg-loghi figure { margin: 0; }
.gg-loghi p {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gg-ink);
}
.gg-piede {
	background: var(--gg-footer);
	color: var(--gg-footer-text);
	padding-block: 52px 0;
	font-size: 15.5px;
}
.gg-piede a {
	color: var(--gg-footer-text);
	text-decoration: none;
}
.gg-piede a:hover,
.gg-piede a:focus-visible {
	color: var(--gg-sun);
}
.gg-colonne {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 32px;
}
.gg-piede .gg-logo img {
	height: 56px;
	margin-bottom: 16px;
}
.gg-piede .gg-widget-titolo {
	font-family: var(--gg-font-display);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gg-white);
	margin: 0 0 14px;
}
.gg-piede ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.gg-piede p {
	margin: 0 0 8px;
	line-height: 1.75;
}
.gg-barra {
	margin-top: 44px;
	border-top: 1px solid #3E3A32;
	padding-block: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	font-size: 14px;
	color: var(--gg-footer-soft);
}

/* Società Trasparente: obbligo di legge, si vede come un bottone */
.gg-piede .gg-trasparente {
	display: inline-block;
	margin-top: 14px;
	border: 1px solid var(--gg-footer-soft);
	padding: 10px 16px;
	font-family: var(--gg-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gg-white);
}
.gg-piede .gg-trasparente:hover,
.gg-piede .gg-trasparente:focus-visible {
	border-color: var(--gg-sun);
}

/* il widget porta paragrafi propri: in barra stanno su una riga */
.gg-copyright p { margin: 0; line-height: 1.5; }
/* la PEC sta in mezzo al testo della barra: sottolineata, non solo più chiara (WCAG 1.4.1) */
.gg-copyright a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) {
	.gg-colonne { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.gg-colonne { grid-template-columns: 1fr; }
}

/* Gli stili delle sezioni interne arrivano quando si monta il template:
   qui vive solo ciò che Elementor non sa fare da sé. */

/* ---- mappe MapPress ---- */
/* «Get directions» non si spegne nella versione gratuita, è in inglese e porta a
   Google: nel fumetto resta solo il link alla scheda del comune */
.mapp-dir-wrapper {
	display: none;
}

/* ---- iscrizione alla newsletter: [gg-newsletter] in home e in Contatti ---- */
/* fascia Mare scuro; in home la fascia è già la sezione .e-chiusa di home.css */
.gg-iscrizione.e-con {
	background: var(--gg-sea-dark);
	color: var(--gg-white);
	text-align: center;
	padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 34px);
}
.gg-iscrizione .elementor-heading-title { color: var(--gg-white); }
.gg-iscrizione p { color: #CFE9EC; }
.gg-iscrizione a { color: var(--gg-white); border-bottom: 1px solid rgba(255, 255, 255, .6); }

/* esito dell'iscrizione (gal_gargano_newsletter): <dialog> modale aperto da JS; senza JS resta aperto
   nel flusso sopra il modulo. Il padding sta sul corpo, così un clic sul fondo del dialog è un clic fuori */
.gg-nl-dialogo {
	position: relative; /* aperto senza modale il browser lo mette absolute, sopra il modulo */
	max-width: 520px;
	width: calc(100% - 32px);
	margin: 18px auto 22px;
	padding: 0;
	background: var(--gg-white);
	color: var(--gg-text);
	border: 0;
	border-top: 6px solid var(--gg-green);
	text-align: left;
	scroll-margin-top: 140px; /* sotto la testata fissa */
}
.gg-nl-dialogo:modal {
	position: fixed;
	margin: auto;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.gg-nl-dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.gg-nl-dialogo--errore { border-top-color: var(--gg-sun); }
.gg-nl-dialogo__corpo { padding: 26px 28px 28px; }
.gg-pagina .gg-testo .gg-iscrizione .gg-nl-dialogo h2, /* battono .gg-iscrizione (pagina.css) e .gg-home .e-chiusa (home.css) */
dialog.gg-nl-dialogo .gg-nl-dialogo__corpo h2 {
	max-width: none;
	margin: 0 0 10px;
	color: var(--gg-text);
	font-family: var(--gg-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}
.gg-pagina .gg-testo .gg-iscrizione .gg-nl-dialogo p,
dialog.gg-nl-dialogo .gg-nl-dialogo__corpo p {
	max-width: none;
	margin: 0 0 22px;
	color: var(--gg-text);
	font-size: 17px;
	line-height: 1.5;
}
.gg-nl-dialogo .gg-nl-dialogo__chiudi, /* batte button:hover/:focus di reset.css (Hello Elementor) */
.gg-nl-dialogo .gg-nl-dialogo__chiudi:focus {
	min-width: 140px;
	height: 46px;
	padding: 0 26px;
	background: var(--gg-sun);
	color: var(--gg-ink);
	border: 0;
	border-radius: 0;
	font-family: var(--gg-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.gg-nl-dialogo .gg-nl-dialogo__chiudi:hover { background: #FFC231; color: var(--gg-ink); }
.gg-nl-dialogo .gg-nl-dialogo__chiudi:focus-visible { outline: 3px solid var(--gg-sea-deep); outline-offset: 3px; }

/* Nome · Cognome · Comune / Telefono · Email · Iscriviti / privacy */
.gg-iscrizione form.tnp-subscription {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"nome cognome comune"
		"tel email invio"
		"privacy privacy privacy";
	align-items: end;
	gap: 14px 12px;
	max-width: 960px;
	margin: 26px auto 0;
	text-align: left;
}
.gg-iscrizione .tnp-field { margin: 0; }
.gg-iscrizione .tnp-field-firstname { grid-area: nome; }
.gg-iscrizione .tnp-field-surname { grid-area: cognome; }
.gg-iscrizione .tnp-field:has([name="np2"]) { grid-area: comune; }
.gg-iscrizione .tnp-field:has([name="np1"]) { grid-area: tel; }
.gg-iscrizione .tnp-field-email { grid-area: email; }
.gg-iscrizione .tnp-field-button { grid-area: invio; }
.gg-iscrizione .tnp-field-privacy { grid-area: privacy; }
.gg-iscrizione .tnp-field > label {
	display: block;
	font-family: var(--gg-font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #CFE9EC;
	margin-bottom: 8px;
}
.gg-iscrizione .tnp-field input:not([type="checkbox"]):not([type="submit"]) {
	width: 100%;
	box-sizing: border-box;
	height: 49px;
	padding: 0 16px;
	line-height: normal; /* il tema dà 1.5 a input[type=tel] e il telefono usciva più alto */
	font-family: var(--gg-font-text);
	font-size: 17px;
	color: var(--gg-white);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 0;
}
/* la privacy: casella e testo sulla stessa riga, il testo è l'etichetta */
.gg-iscrizione .tnp-field-privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.gg-iscrizione .tnp-field-privacy > label {
	margin: 0;
	font-family: var(--gg-font-text);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #CFE9EC;
}
.gg-iscrizione .tnp-field-privacy input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--gg-sun);
}
.gg-iscrizione input.tnp-submit {
	width: 100%;
	height: 49px;
	padding: 0 26px;
	background: var(--gg-sun);
	color: var(--gg-ink);
	border: 0;
	border-radius: 0;
	font-family: var(--gg-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.gg-iscrizione input.tnp-submit:hover { background: #FFC231; }
.gg-iscrizione .tnp-field input:focus-visible {
	outline: 3px solid var(--gg-sun);
	outline-offset: 2px;
}

/* sul telefono a due colonne (29/10): in colonna unica il modulo era alto quasi mille
   pixel. Nome e cognome, comune e telefono affiancati; email, privacy e invio larghi */
@media (max-width: 600px) {
	.gg-iscrizione form.tnp-subscription {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "nome cognome" "comune tel" "email email" "privacy privacy" "invio invio";
		gap: 12px 10px;
		margin-top: 18px;
	}
	.gg-iscrizione .tnp-field > label {
		font-size: 11px;
		letter-spacing: .06em;
		margin-bottom: 6px;
		line-height: 1.3; /* in Contatti la colonna è più stretta: «Comune di residenza» va a capo,
		                     e i campi della riga restano allineati perché la griglia li porta in basso */
	}
	.gg-iscrizione .tnp-field-privacy > label { font-size: 14px; }
	.gg-iscrizione .tnp-field input:not([type="checkbox"]):not([type="submit"]) {
		height: 46px;
		padding: 0 12px;
	}
}

/*
 * Contenuti di terzi in attesa del consenso (inc/consenso.php, consenso.js):
 * l'iframe tiene il suo spazio, l'avviso ci sta sopra finché iubenda non
 * rimette l'indirizzo vero.
 */
.gg-consenso {
	position: relative;
	display: block;
	max-width: 100%;
	background: var(--gg-sand-light);
}
.gg-consenso > iframe {
	display: block;
	max-width: 100%;
	min-height: 220px;
}
.gg-consenso-avviso {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 20px 24px;
	background: var(--gg-sand-light);
	border: 1px solid var(--gg-line);
	border-top: 3px solid var(--gg-sun);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--gg-text);
	text-align: left;
	overflow: auto;
}
.gg-consenso-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}
.gg-consenso-preferenze,
.gg-mappa-consenso .gg-consenso-preferenze {
	padding: 9px 16px;
	border: 0;
	border-radius: 0;
	background: var(--gg-sea-deep);
	color: var(--gg-white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.gg-mappa-consenso .gg-consenso-preferenze {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 12px;
}
.gg-consenso-preferenze:hover {
	background: var(--gg-sea-dark);
}
.gg-consenso-preferenze:focus-visible,
.gg-consenso-azioni a:focus-visible {
	outline: 3px solid var(--gg-sun);
	outline-offset: 2px;
}
.gg-consenso-azioni a {
	color: var(--gg-sea-deep);
	font-weight: 600;
	text-decoration: underline;
}
.gg-consenso-attivo {
	background: none;
}
.gg-consenso-attivo > .gg-consenso-avviso {
	display: none;
}