/*
Theme Name: +Rho
Theme URI: https://piurho.it
Author: +Rho
Description: Tema a blocchi del sito della lista civica +Rho (piurho.it). Design sobrio e minimalista, palette lime/teal con gradiente di brand, approccio human-first.
Version: 0.2.2
Requires at least: 6.5
Tested up to: 7.0.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piurho
*/

/* ---------------------------------------------------------------
   Elemento firma: titoli con gradiente teal -> lime (clip sul testo)
   --------------------------------------------------------------- */
.gradient-title,
.gradient-title a {
	background: linear-gradient(90deg, #007281, #a0c519);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #007281; /* fallback */
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Navbar: sfondo gradiente di brand, testo bianco
   --------------------------------------------------------------- */
.piurho-navbar {
	background: linear-gradient(90deg, #007281, #a0c519);
}
.piurho-navbar a,
.piurho-navbar .wp-block-site-title a {
	color: #ffffff;
}
/* Le voci di menu stanno sul lato lime del gradiente: testo scuro per
   contrasto WCAG (bianco su #a0c519 = 2.0; #111 su #a0c519 = 8.7).
   La regola vale solo per il menu in linea (desktop), non per l'overlay
   mobile, che ha sfondo teal e testo bianco. */
.piurho-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
.piurho-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
	color: #111111;
}
.piurho-navbar .wp-block-navigation__responsive-container-open {
	color: #111111;
}
/* Sottomenu a discesa (desktop): lo sfondo e il teal dell'overlay
   (overlayBackgroundColor del blocco Navigazione), non il bianco di
   default: il testo scuro della regola sopra dava 3,35:1 (audit 30/08,
   R3). Bianco su teal = 5,64:1, come gia nel menu mobile. */
.piurho-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.piurho-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	color: #ffffff;
}
.piurho-navbar .wp-block-navigation-item__content:hover,
.piurho-navbar .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.wp-site-blocks > footer {
	margin-block-start: 0;
}
.piurho-footer a {
	color: #f8f9fa;
}
.piurho-footer a:hover {
	color: #ffffff;
}

/* Claim nel footer: "+" con gradiente di brand su testo chiaro */
.piurho-claim {
	color: #f8f9fa;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 600;
}
.piurho-claim .claim-plus {
	background: linear-gradient(90deg, #a0c519, #a0c519);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #a0c519;
	font-size: 1.3em;
}
.piurho-footer-list {
	list-style: none;
	padding-left: 0;
}
.piurho-footer-list li {
	margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------
   Leggibilita e sobrieta
   --------------------------------------------------------------- */
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Immagini nei contenuti: nessuna decorazione superflua */
.entry-content img {
	height: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------
   Ambiti di lavoro in home: griglia di link con la firma gradient
   (riprende i titoli di categoria del vecchio sito: "+ AMBITO")
   --------------------------------------------------------------- */
.piurho-ambiti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem 2.5rem;
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.piurho-ambiti li {
	margin: 0;
}
.piurho-ambiti a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	/* Teal pieno (il capo iniziale del gradiente di brand): a differenza
	   del gradient-clip garantisce il contrasto WCAG AA su fondo chiaro. */
	color: #007281;
	text-transform: uppercase;
}
.piurho-ambiti a::before {
	content: "+ ";
}
.piurho-ambiti a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Elenco categorie sulla pagina Blog: reso orizzontale e discreto */
.piurho-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	list-style: none;
	padding-left: 0;
}
.piurho-cats .cat-item {
	margin: 0;
}

/* ---------------------------------------------------------------
   Target touch nel menu mobile (audit 20/07: voci top-level a 32px,
   X e hamburger a 24px, sotto la soglia dei 44px raccomandati).
   Diagnosi audit 30/08 (R7): la regola originale a 3 classi era
   annullata da una regola core di WP 7.1 a pari specificita' caricata
   dopo (".is-menu-open:where(:not(.disable-default-overlay))
   .wp-block-navigation__responsive-container-content
   .wp-block-navigation-item__content { padding: 0 }").
   Aggiunta la classe -container-content per vincere in specificita'.
   --------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	min-width: 44px;
	min-height: 44px;
}

/* ---------------------------------------------------------------
   Accessibilita: anello di focus esplicito (audit 30/08, M5).
   Sul corpo pagina basta il teal; sulla navbar il fondo e' un
   gradiente teal->lime, quindi anello doppio (bianco + scuro)
   visibile su entrambi i capi.
   --------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid #007281;
	outline-offset: 2px;
}
.piurho-navbar :focus-visible,
.piurho-footer :focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
	box-shadow: 0 0 0 4px #111111;
}

/* ---------------------------------------------------------------
   Accessibilita: riduzione del movimento
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}