/*
Theme Name: Ordine Periti Industriali Brindisi
Theme URI: https://www.periti-brindisi.it
Author: GAW Digital Solutions
Author URI: https://gaw.agency
Description: Tema block per l'Ordine dei Periti Industriali e dei Periti Industriali Laureati della Provincia di Brindisi. Rifacimento del sito storico sullo stack GAW: stessi contenuti, stessa palette, impianto editoriale nuovo.
Version: 0.5.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: periti-brindisi-theme
Tags: block-theme, full-site-editing, gaw
*/

/* Il grosso dello stile sta in theme.json. Qui le parti che i blocchi non sanno
   fare da soli: testata, piede, tessere della home, schede di contenuto. */

.wp-site-blocks { overflow-x: hidden; }

/* ------------------------------------------------------------------ testata */

.pb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pb-header__marchio img {
	display: block;
	width: 52px;
	height: auto;
}

.pb-header__nome {
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	max-width: 22ch;
}

.pb-header__nome span {
	display: block;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* Voci di menu: sobrie, con il segno rosso dell'Ordine sotto quella attiva. */
.pb-header .wp-block-navigation {
	font-size: 0.95rem;
	font-weight: 500;
}

.pb-header .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.pb-header .wp-block-navigation-item__content:hover,
.pb-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.pb-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 12px 28px rgba(24, 28, 50, 0.1);
	min-width: 17rem;
	padding-block: 0.4rem;
}

.pb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 0;
	padding: 0.5rem 1rem;
}

/* ------------------------------------------------------------ intestazione  */

.pb-page-head {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pb-page-head .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}

.pb-page-head .wp-block-post-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 0.9rem;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* --------------------------------------------------------------- contenuti  */

.pb-contenuto h2 {
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pb-contenuto h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.pb-contenuto h3 {
	margin-top: 1.8rem;
	color: var(--wp--preset--color--primary-dark);
}

.pb-contenuto ul,
.pb-contenuto ol { padding-left: 1.2rem; }

.pb-contenuto li { margin-bottom: 0.45rem; }

.pb-contenuto figure.wp-block-image { margin-block: 1.6rem; }

.pb-contenuto figure.wp-block-image img {
	border-radius: 8px;
	max-height: 460px;
	width: auto;
}

/* I collegamenti a un documento si riconoscono a colpo d'occhio. */
.pb-contenuto a[href$=".pdf"]::before,
.pb-contenuto a[download]::before {
	content: "\01F4C4\00A0";
	text-decoration: none;
}

/* --------------------------------------------------------------------- home */

.pb-hero {
	position: relative;
	min-height: clamp(380px, 56vh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}

.pb-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 28, 50, 0.15) 0%, rgba(24, 28, 50, 0.72) 100%);
}

.pb-hero__testo {
	position: relative;
	z-index: 2;
	color: #fff;
	padding-block: 2.6rem;
}

.pb-hero__testo h1,
.pb-hero__testo p { color: #fff; }

.pb-hero__testo h1 {
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	line-height: 1.22;
	margin: 0 0 0.6rem;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.pb-hero__testo p {
	margin: 0;
	font-size: 1.05rem;
	opacity: 0.95;
}

/* Tessere: le quattro porte del sito, come sul sito storico. */
.pb-tessere .wp-block-column {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.4rem 1.2rem;
	text-align: center;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.pb-tessere .wp-block-column:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.pb-tessere figure.wp-block-image img {
	max-height: 96px;
	width: auto;
	margin-inline: auto;
}

.pb-tessere p { margin: 0.8rem 0 0; }

.pb-tessere a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Loghi degli enti collegati: in fila, in grigio, colorati al passaggio. */
.pb-enti figure.wp-block-image img {
	max-height: 62px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.pb-enti figure.wp-block-image:hover img {
	filter: none;
	opacity: 1;
}

/* Ultime notizie */
.pb-news .wp-block-post-title {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0.35rem 0 0.5rem;
}

.pb-news .wp-block-post-title a { text-decoration: none; }

.pb-news .wp-block-post-date {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

.pb-news .wp-block-post-template > li {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.15rem 1.25rem;
	background: var(--wp--preset--color--base);
}

.pb-sezione-titolo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
}

.pb-sezione-titolo h2 { margin: 0; }

/* --------------------------------------------------------------------- piede */

.pb-footer {
	background: var(--wp--preset--color--contrast);
	color: #dfe2ea;
}

.pb-footer a { color: #fff; text-decoration: none; }
.pb-footer a:hover { text-decoration: underline; }

.pb-footer h2,
.pb-footer h3 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; }

.pb-footer__marchio img { width: 54px; height: auto; }

.pb-footer p { margin: 0 0 0.35rem; font-size: 0.93rem; line-height: 1.6; }

.pb-footer__coda {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 2rem;
	padding-top: 1.1rem;
	font-size: 0.83rem;
	color: #aeb4c2;
}

/* ---------------------------------------------------------------- elenchi    */

/* Schede di modulistica, normative e trasparenza: stesso mattone ovunque. */
.pb-scheda {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	padding: 1.2rem 1.4rem;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--base);
}

.pb-scheda h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
}

.pb-scheda p { margin: 0 0 0.4rem; }

.pb-scheda p:last-child { margin-bottom: 0; }

.pb-nota {
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 0.9rem 1.1rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ mobile   */

@media (max-width: 781px) {
	.pb-header__nome { font-size: 0.72rem; max-width: 16ch; }
	.pb-header__marchio img { width: 42px; }
	.pb-hero { min-height: 320px; }
	.pb-contenuto figure.wp-block-image img { max-height: none; width: 100%; }
}

/* Senza JavaScript la pagina deve restare leggibile: niente si nasconde. */
@media (scripting: none) {
	.pb-hero__video { display: none; }
}

/* ------------------------------------------------- rifiniture 15/09/2026    */

/* Il nome dell'Ordine in testata e' un collegamento, ma non deve sembrarlo. */
.pb-header__nome a {
	color: inherit;
	text-decoration: none;
}

.pb-header__nome a:hover { color: var(--wp--preset--color--primary); }

/* Hero: aria fra il titolo e l'indirizzo, e l'indirizzo si legge. */
.pb-hero__testo h1 { margin-bottom: 1rem; }

.pb-hero__testo p {
	font-weight: 500;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Tessere: l'icona basta da sola, il titolo ce l'ha gia' dentro. */
.pb-tessere .wp-block-column { padding: 1.1rem 0.9rem; }

.pb-tessere figure.wp-block-image { margin: 0; }

/* Le news in prima pagina: titolo scuro, rosso solo quando ci passi sopra. */
.pb-news .wp-block-post-title a { color: var(--wp--preset--color--contrast); }

.pb-news .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

.pb-news .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Consiglio Direttivo: schede in griglia invece di un elenco chilometrico. */
.pb-persone { margin-block: 0.5rem; }

.pb-persona {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.2rem 1rem 1.4rem;
	text-align: center;
	background: var(--wp--preset--color--base);
}

.pb-persona figure.wp-block-image { margin: 0 0 0.8rem; }

.pb-persona figure.wp-block-image img {
	max-height: 150px;
	width: auto;
	margin-inline: auto;
}

.pb-persona h4 {
	margin: 0 0 0.15rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.pb-persona h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
}

.pb-persona p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

/* Il video deve coprire tutta la fascia: il layout «constrained» di Gutenberg
   stringe anche i figli in posizione assoluta, e qui non deve farlo. */
.pb-hero > .pb-hero__video,
.pb-hero .pb-hero__video {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.pb-hero::after {
	background: linear-gradient(180deg, rgba(24, 28, 50, 0.10) 0%, rgba(24, 28, 50, 0.34) 45%, rgba(24, 28, 50, 0.78) 100%);
}

.pb-hero__testo p {
	opacity: 1;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* Al telefono il titolo della hero non deve toccare il bordo dello schermo. */
@media (max-width: 781px) {
	.pb-hero__testo {
		padding-inline: 1.15rem;
		padding-block: 1.8rem;
	}

	.pb-hero__testo h1 { font-size: 1.45rem; }
}

/* Documenti ripresi dall'archivio: l'anno della versione e cio' che manca. */
.pb-eta {
	color: var(--wp--preset--color--muted);
	font-size: 0.86rem;
}

.pb-assente {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	font-style: italic;
}

.pb-scheda a[download] { font-weight: 600; }

/* Video e mappe incorporati: stessa cornice, e non sfondano mai la colonna. */
.pb-incorporato {
	position: relative;
	margin-block: 1.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
}

.pb-incorporato iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* L'etichetta di famiglia e l'anno delle voci di Amministrazione Trasparente:
   stesse parole del sito storico, che le calcolava col suo JavaScript. */
.pb-famiglia {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.pb-famiglia .pb-anno {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	letter-spacing: 0.04em;
}