/*
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
*/

/* ============================================================
   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: #F4E7C6;

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

	/* famiglie: sostituti web dei font del brand book (Futura BK BT / Swiss 721),
	   da confermare col cliente. Oggi arrivano da Google Fonts via Elementor;
	   quando saranno self-hosted qui, va disattivato il caricamento di Elementor. */
	--gg-font-display: "Jost", -apple-system, "Segoe UI", sans-serif;
	--gg-font-text: "Archivo", -apple-system, "Segoe UI", Helvetica, 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;
}

/* ============================================================
   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: 1180px;
	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: var(--gg-footer);
	color: var(--gg-footer-text);
	font-size: 12.5px;
}
.gg-servizio .gg-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 26px;
	padding-block: 9px;
}
.gg-servizio a {
	color: var(--gg-footer-text);
	text-decoration: none;
}
.gg-servizio a:hover,
.gg-servizio a:focus-visible {
	color: var(--gg-sun);
}
.gg-contatti {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
}
.gg-contatti p {
	margin: 0;
}
.gg-menu-servizio {
	margin-left: auto;
}
.gg-lista-servizio {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- 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;
}
.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 {
	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 {
	color: var(--gg-sea-dark);
}
/* la pagina in cui ci si trova, detta anche fuori dal colore */
.gg-lista .current-menu-item > a,
.gg-lista .current-menu-ancestor > a {
	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;
}
.gg-lista li:hover > .sub-menu,
.gg-lista li:focus-within > .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: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;
}
.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; }

@media (max-width: 900px) {
	.gg-apri { display: inline-flex; }
	.gg-nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
	}
	.gg-nav.gg-aperto { display: block; }
	.gg-lista {
		flex-direction: column;
		gap: 0;
	}
	.gg-lista > li {
		border-top: 1px solid var(--gg-line);
	}
	.gg-lista a {
		display: block;
		padding-block: 13px;
	}
	.gg-lista .sub-menu {
		position: static;
		display: block;
		border: 0;
		padding: 0 0 8px 16px;
	}
	.gg-menu-servizio { margin-left: 0; }
}

/* ---- 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: 14px;
}
.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: 12px;
	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: 12.5px;
	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; }

@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é. */