/*
 Theme Name:  GeneratePress Child
 Template:    generatepress
 Version:     1.1
 Description: Child theme per il sito della psicoterapeuta
*/

/* ==========================================================================
   INDICE
   1. Variabili (colori e misure)
   2. Header – regole comuni a tutte le larghezze
   3. Header – desktop (da 769px)
   4. Header – schermi intermedi (769-1199px)
   5. Header – mobile (fino a 768px)
   6. Box di ricerca
   7. Home (foto + presentazione)
   8. Citazione di pagina e footer
   9. Pagine vuote ("Página en construcción")
   10. Menu – voce attiva e passaggio del mouse
   11. Titoli delle pagine, della ricerca e della 404
   12. Pagine di testo: colonna, titoli, immagini, testo giustificato
   13. Selettore di lingua (ES · EN · IT)
   14. Pagina di manutenzione
   ========================================================================== */


/* ==========================================================================
   1. Variabili (colori)
   ========================================================================== */
:root {
	--gc-blu:     #5B7FA8;   /* fascia con nome e motto */
	--gc-chiaro:  #FFFFFF;   /* testo nella fascia */
	--gc-arancio: #FBBD4E;   /* voce di menu attiva */
	--gc-cremisi: #993366;   /* citazione in fondo alle pagine (classe .citazione, sezione 8) */
	--gc-colonna-logo: 124px; /* desktop: logo (100px) + spazio prima della fascia; il testo delle pagine parte da qui (sezione 12) */
}


/* ==========================================================================
   2. Header – regole comuni a tutte le larghezze
   ========================================================================== */

/* Fascia blu con nome e motto */
.site-branding {
	flex: 1 1 auto;          /* la fascia si allunga fino al bordo destro */
	background-color: var(--gc-blu);
	padding: 10px;           /* 10px a sinistra, come le voci del menu */
	margin-top: 35px;        /* distanza dal bordo superiore del logo (su mobile: 0) */
}

.site-header .main-title a,
.site-header .main-title a:hover {
	color: var(--gc-chiaro);
}

.site-header .site-description {
	color: var(--gc-chiaro);
	font-style: italic;
}


/* ==========================================================================
   3. Header – desktop (da 769px)
      Griglia a 3 colonne:  logo | menu | ricerca
      riga 1: logo + fascia blu (su colonne 2-3)
      riga 2: logo + menu (colonna 2) + ricerca (colonna 3)
      La colonna della ricerca è il 35%, come la colonna della presentazione.
   ========================================================================== */
@media (min-width: 769px) {
	#masthead .inside-header {
		display: grid;
		grid-template-columns: var(--gc-colonna-logo) 1fr 35%;
		align-items: start;
		padding-bottom: 0;       /* meno spazio sotto il menu */
	}

	#masthead .site-branding-container {
		display: contents;       /* logo e fascia diventano celle della griglia */
	}

	#masthead .site-logo {
		grid-column: 1;
		grid-row: 1 / span 2;
 	    margin-right: 0;         /* lo spazio dopo il logo lo dà la colonna */
	}

	#masthead .site-branding {
		grid-column: 2 / span 2; /* la fascia copre menu e ricerca */
		grid-row: 1;
	}

	#site-navigation {
		grid-column: 2;
		grid-row: 2;
		margin-left: 0;
		margin-top: 10px;
	}

	#masthead .header-widget {
		grid-column: 3;
		grid-row: 2;
		align-self: start;
		max-width: none;
		margin: 10px 0 0;        /* stesso margine del menu: box centrato sulle voci */
		padding: 0;
	}

	/* --- Voci del menu --- */
	#site-navigation .main-nav ul li a {
		padding-left: 10px;      /* voci vicine: il menu sta su una riga */
		padding-right: 10px;
	}

	#site-navigation .main-nav > ul > li > a {
		line-height: 40px;       /* voci meno alte: meno spazio sopra e sotto */
	}

	/* Voce con sottomenu (Tratamientos): meno spazio attorno alla freccetta */
	#site-navigation .main-nav > ul > li.menu-item-has-children > a {
		padding-right: 0;
	}

	#site-navigation .main-nav > ul > li.menu-item-has-children .dropdown-menu-toggle {
		padding-left: 6px;
		padding-right: 10px;
	}

	/* --- Sottomenu: largo quanto la voce più lunga, fondo bianco con bordo --- */
	#site-navigation .main-nav ul ul {
		width: auto;
		min-width: 100%;
		background-color: #fff;
		border: 1px solid var(--contrast-3);
	}

	#site-navigation .main-nav ul ul li a {
		white-space: nowrap;     /* ogni voce su una sola riga */
		padding-top: 6px;
		padding-bottom: 6px;
	}
}


/* ==========================================================================
   4. Header – schermi intermedi (769-1199px)
      La griglia passa a 2 colonne (logo | menu) e la ricerca scende
      in una terza riga, allineata a destra: così il menu non va a capo.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1199px) {
	#masthead .inside-header {
		grid-template-columns: var(--gc-colonna-logo) 1fr;
	}

	#masthead .site-branding {
		grid-column: 2;
	}

	#masthead .header-widget {
		grid-column: 2;
		grid-row: 3;
		justify-self: end;
		width: 50%;
		margin-top: 10px;
	}
}


/* ==========================================================================
   5. Header – mobile (fino a 768px)
      Griglia a 2 colonne:  logo + fascia | hamburger
      riga 2: menu a tutta larghezza (quando è aperto)
      riga 3: ricerca a tutta larghezza
   ========================================================================== */
@media (max-width: 768px) {
	#masthead .inside-header {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 10px;
	}

	#masthead .site-branding-container {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		align-items: center;     /* fascia centrata verticalmente sul logo */
		min-width: 0;            /* permette alla fascia di restringersi */
	}

	#masthead .site-logo .header-image {
		width: 80px;             /* logo più piccolo per lasciare spazio alla fascia */
	}

	#masthead .site-logo {
		flex-shrink: 0;          /* il logo non si rimpicciolisce sotto gli 80px */
	}

	#masthead .site-branding {
		margin-top: 0;           /* annulla il margine del desktop */
		min-width: 0;            /* la fascia può restringersi: il testo va a capo */
	}

	#mobile-menu-control-wrapper {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	#site-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	#masthead .header-widget {
		grid-column: 1 / -1;
		grid-row: 3;
		max-width: none;
		margin: 10px 0 0;
		padding: 0;
	}
}


/* ==========================================================================
   6. Box di ricerca (widget "Cerca" nell'area Header)
   ========================================================================== */
#masthead .header-widget .widget {
	margin: 0;
	padding: 0;
}

#masthead .header-widget .wp-block-search,
#masthead .header-widget .wp-block-search__inside-wrapper,
#masthead .header-widget .wp-block-search__input {
	width: 100%;             /* il campo occupa tutta la colonna */
	max-width: none;
}

#masthead .header-widget .wp-block-search__input {
	background-color: var(--base);   /* grigio leggero (colore globale "Base") */
	border: 1px solid var(--contrast-3); /* bordo grigio chiaro */
	color: var(--contrast);
	font-family: inherit;    /* stesso carattere del menu */
	font-size: 15px;         /* stesso corpo del menu (default di GeneratePress) */
	font-style: italic;
	padding: 6px 20px 6px 40px; /* spazio a sinistra per la lente */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
}

#masthead .header-widget .wp-block-search__input::placeholder {
	color: var(--contrast);
	opacity: 1;
}


/* ==========================================================================
   7. Home (foto + presentazione)
      La home è costruita con un blocco Colonne: foto a sinistra (65%),
      presentazione a destra (35%) con la classe "presentazione".
   ========================================================================== */
@media (min-width: 769px) {
	#content {
		padding-top: 20px;       /* meno spazio tra header e contenuto (tutte le pagine) */
	}
}

.presentazione p {
	text-align: justify;
	font-size: 13px;
	line-height: 1.35;
	margin-bottom: 0.6em;    /* poco spazio tra i paragrafi */
}


/* ==========================================================================
   8. Citazione di pagina e footer
   ========================================================================== */

/* Citazione in fondo alle pagine: ultimo blocco della pagina, con la classe
   CSS aggiuntiva "citazione" (Avanzate → Classi CSS aggiuntive). */
.entry-content .citazione {
	margin-top: 40px;
	text-align: center;
	font-size: 20px;
	color: var(--gc-cremisi);
	text-wrap: balance;       /* se va a capo, righe di lunghezza simile */
}

.site-info {
	font-size: 13px;         /* riga del footer: copyright e link legali */
}


/* ==========================================================================
   9. Pagine vuote: "Página en construcción" (vedi functions.php)
   ========================================================================== */
.pagina-en-construccion {
	text-align: center;
}

.pagina-en-construccion img {
	max-width: 480px;        /* immagine non troppo grande */
	width: 100%;
	height: auto;
}

.pagina-en-construccion p {
	font-style: italic;
	color: var(--contrast-2);
	margin-top: 20px;
}


/* ==========================================================================
   10. Menu – voce attiva e passaggio del mouse
       Pagina corrente (o genitore della sottopagina corrente): sfondo
       arancio, testo scuro. Vale anche per il menu su mobile.
   ========================================================================== */
#site-navigation .main-nav ul li a:hover {
	color: var(--gc-blu);
}

#site-navigation .main-nav ul li.current-menu-item > a,
#site-navigation .main-nav ul li.current-menu-ancestor > a,
#site-navigation .main-nav ul li.current-menu-item > a:hover,
#site-navigation .main-nav ul li.current-menu-ancestor > a:hover {
	background-color: var(--gc-arancio);
	color: var(--contrast);
}

/* Voci del sottomenu: al passaggio del mouse, sfondo arancio come la voce attiva */
#site-navigation .main-nav ul ul li a:hover {
	background-color: var(--gc-arancio);
	color: var(--contrast);
}


/* ==========================================================================
   11. Titoli delle pagine (anche risultati di ricerca e pagina 404)
       - più piccoli e sobri;
       - su desktop, nelle pagine principali, nascosti alla vista (la voce di
         menu evidenziata dice già dove si è) ma presenti per lettori di
         schermo e motori di ricerca;
       - visibili nelle sottopagine (classe "page-child" di WordPress)
         e su mobile.
   ========================================================================== */
.page .entry-title,
.search .page-title,
.search-no-results .entry-title,
.error404 .entry-title {
	font-size: 26px;
	margin-bottom: 20px;
}

/* Titoli dei singoli risultati di ricerca: un gradino sotto */
.search-results .entry-title {
	font-size: 20px;
}

@media (min-width: 769px) {
	body.page:not(.page-child):has(#site-navigation .current-menu-item) .entry-header {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}


/* ==========================================================================
   12. Pagine di testo: colonna allineata alla fascia, titoli di sezione, immagini, testo giustificato
   ========================================================================== */

/* Su desktop il testo è allineato alla fascia blu: parte dopo la colonna del
   logo e arriva al bordo destro, come la fascia. Su mobile occupa tutta la larghezza. */
@media (min-width: 769px) {
	body.page:not(.home) .entry-header,
	body.page:not(.home) .entry-content {
	  margin-left: var(--gc-colonna-logo); /* parte dove inizia la fascia (sezione 1) */
	}
 
	body.search .site-main,
	body.error404 .site-main {
		margin-left: var(--gc-colonna-logo); /* risultati di ricerca e pagina 404 */
	}
}

body.page:not(.home) .entry-content h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--gc-blu);
	margin: 32px 0 8px;
}

body.page:not(.home) .entry-content h2:first-child {
	margin-top: 0;
}

body.page:not(.home) .entry-content h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 20px 0 6px;
}

body.page:not(.home) .entry-content ul {
	margin-left: 1.5em;
}

body.page:not(.home) .entry-content .wp-block-image {
	margin-bottom: 24px;     /* spazio tra un'immagine e il testo che segue */
}

/* Testo giustificato solo su desktop, con sillabazione automatica nella lingua
   della pagina. Su mobile le righe sono troppo corte: resta allineato a sinistra.
   La citazione è esclusa e resta centrata (sezione 8). */
@media (min-width: 769px) {
	body.page:not(.home) .entry-content p:not(.citazione) {
		text-align: justify;
		hyphens: auto;
	}
}


/* ==========================================================================
   13. Selettore di lingua (ES · EN · IT) nella fascia azzurra, a destra
       (il codice HTML è generato in functions.php)
   ========================================================================== */
.site-branding {
	position: relative;      /* riferimento per il selettore */
}

.site-header .site-description {
	padding-right: 110px;    /* spazio per il selettore: su mobile il motto va a capo */
}

.selettore-lingua {
	position: absolute;
	right: 10px;             /* stesso margine interno della fascia */
	bottom: 10px;            /* in linea con il motto */
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
}

.selettore-lingua a {
	color: #fff;
	text-decoration: none;
	padding: 0 4px;
}

.selettore-lingua a:hover,
.selettore-lingua a:focus,
.selettore-lingua a[aria-current] {
	text-decoration: underline;
}

.selettore-lingua a[aria-current] {
	font-weight: 700;        /* lingua corrente */
}

/* Su mobile la fascia è stretta: il selettore va su una riga sua, sotto il motto */
@media (max-width: 768px) {
	.site-header .site-description {
		padding-right: 0;
	}

	.selettore-lingua {
		position: static;
		text-align: right;
		margin-top: 4px;
	}
}


/* ==========================================================================
   14. Pagina di manutenzione (generata da mu-plugins/manutenzione.php)
       Stessi colori del sito (variabili della sezione 1); l'immagine usa
       le regole della sezione 9 (.pagina-en-construccion).
   ========================================================================== */
body.manutenzione {
	margin: 0;
	background-color: #fff;
	color: #222;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
}

.manutenzione-testata {
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.manutenzione-logo {
	width: 100px;            /* come il logo del sito su desktop */
	height: auto;
	flex-shrink: 0;
}

.manutenzione-fascia {
	flex: 1 1 auto;
	min-width: 0;
	background-color: var(--gc-blu);
	color: var(--gc-chiaro);
	padding: 10px;
}

.manutenzione-nome {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
}

.manutenzione-motto {
	margin: 0;
	font-size: 15px;
	font-style: italic;
}

.manutenzione-contenuto {
	max-width: 1200px;	/* largo come la testata: un messaggio per riga */
	margin: 0 auto;
	padding: 0 20px 40px;
	text-align: center;
}

.manutenzione-messaggio {
	margin: 0 0 8px;
}

.manutenzione-messaggio:first-child {
	margin-top: 30px;        /* spazio sotto la testata */
}

.manutenzione-messaggio strong {
	font-weight: 600;
	color: var(--gc-blu);
}

.manutenzione-contenuto .pagina-en-construccion {
	margin-top: 30px;        /* spazio tra i testi e l'immagine */
}

.manutenzione-contatto {
	margin-top: 30px;
	font-size: 15px;
	color: #575760;
}

@media (max-width: 768px) {
	.manutenzione-logo {
		width: 80px;             /* come il logo del sito su mobile */
	}

	.manutenzione-nome {
		font-size: 20px;
	}
}