/**
 * Skuola Corporate — telaio: header, barra titolo, footer.
 *
 * Il telaio c'è su ogni pagina, quindi questo foglio è sempre caricato (inc/enqueue.php).
 * Navigazione e ricerca, che sono blocchi core, stanno in assets/css/blocks/; qui resta la
 * geometria dell'header che li contiene.
 *
 * Le misure vengono dai computed style della produzione in docs/baseline/, non dai sorgenti
 * del tema legacy; fra parentesi i selettori di Melinda da cui vengono.
 */

/* -------------------------------------------------------------------------- */
/*  Header — telaio comune ai due stati                                       */
/*                                                                            */
/*  Melinda ha due assi indipendenti: sovrapposto (22 pagine su 23) o nel     */
/*  flusso (i 12 progetti), testo bianco (9 pagine) o scuro. Qui la base è    */
/*  sovrapposto + bianco, e `.is-flow` e `.is-dark` sono i modifier.          */
/* -------------------------------------------------------------------------- */
.skuola-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.skuola-header__bar {
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--wp--custom--rule--header);
	color: var(--wp--preset--color--white);
	transition: background-color 0.4s, box-shadow 0.4s;
}

.skuola-header__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	min-height: var(--skuola-header-bar-h);
	max-width: 1740px;
	margin: 0 auto;
	padding-left: var(--skuola-gutter);
	padding-right: var(--skuola-gutter);
	box-sizing: border-box;
}

/* Logo: .logo-w ha padding 10px 0 e l'immagine è resa a 110×34. */
.skuola-header__logo {
	padding-top: 10px;
	padding-bottom: 10px;
}

.skuola-header__logo img,
.skuola-header__logo .wp-block-site-logo img {
	width: 110px;
	height: 34px;
	display: block;
}

.skuola-header__end {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

/* -------------------------------------------------------------------------- */
/*  Header — stato allo scroll (.is-solid)                                    */
/*  Melinda: js--fixed-header aggiunge __fixed oltre mezza schermata di scroll */
/*  (main.js: `C >= q/2`). Barra bianca alta 60px con ombra, testo #1b1b1b.    */
/* -------------------------------------------------------------------------- */
.skuola-header.is-solid .skuola-header__bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
	box-shadow: var(--wp--preset--shadow--header);
	animation: skuola-header-in 0.4s;
}

.skuola-header.is-solid .skuola-header__row {
	min-height: var(--skuola-header-h-solid);
}

/* La barra admin del backoffice sta sopra: la fissa scende di 32px (28 su mobile). */
.admin-bar .skuola-header.is-solid .skuola-header__bar {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .skuola-header.is-solid .skuola-header__bar {
		top: 46px;
	}
}

@keyframes skuola-header-in {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.skuola-header.is-solid .skuola-header__bar {
		animation: none;
	}
	.skuola-header__bar {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/*  Header — modifier                                                         */
/* -------------------------------------------------------------------------- */
/* Testo scuro su primo blocco chiaro (Melinda: local_header--color_scheme=dark). */
.skuola-header.is-dark .skuola-header__bar,
.skuola-header.is-flow .skuola-header__bar {
	color: var(--wp--preset--color--heading);
}

/* Header nel flusso invece che sovrapposto (i 12 progetti, il 404): occupa i suoi 90.19px, e il
   wrapper li conserva quando la barra passa a fixed, così il contenuto non salta. */
.skuola-header.is-flow {
	position: relative;
	min-height: var(--skuola-header-h);
}

/* Icone «mods»: glifo 18px in una casella da 68, cioè 50 di aria a destra. Da 1200px l'unica è la
   lente, a 50px dal bordo del contenitore (x=1312 su 1380); il menu si ferma 60px prima. */
.skuola-header__end .wp-block-navigation__responsive-container-open,
.skuola-header__end .wp-block-search__button {
	padding: 7px 50px 7px 0;
	color: inherit;
	background: none;
	border: 0;
	min-width: 0;
	line-height: 0;
}

.skuola-header__end .wp-block-navigation__responsive-container-open svg,
.skuola-header__end .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	fill: currentColor;
}

@media (max-width: 1199px) {
	.skuola-header__end {
		flex-direction: row-reverse;
	}

	.skuola-header__end .wp-block-navigation__responsive-container-open {
		padding-top: 20px;
	}
	/* Aria fra lente e burger: 68px sotto i 768, 85 sopra — da 768 Melinda infila fra le due un
	   separatore `.mods_el __separator` che vale 17px. */
	.skuola-header__end .wp-block-search__button {
		padding-right: 68px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.skuola-header__end .wp-block-search__button {
		padding-right: 85px;
	}
}

/* -------------------------------------------------------------------------- */
/*  Barra titolo (blocco skuola/page-title di skuola-core)                    */
/*  Melinda .t-w: tre livelli sovrapposti — sfondo cover, velo, contenuto —   */
/*  con padding 150px/180px e breadcrumb ancorato a 60px dal fondo. Con       */
/*  l'header sovrapposto il contenuto parte a 240.2px = 90.19 + 150.          */
/* -------------------------------------------------------------------------- */
.skuola-page-title {
	position: relative;
	overflow: hidden;
	padding-top: calc(150px + var(--skuola-header-h));
	padding-bottom: 180px;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--hero);
}

.skuola-page-title__bg,
.skuola-page-title__overlay {
	position: absolute;
	inset: 0;
}

.skuola-page-title__bg {
	background-color: var(--wp--preset--color--hero);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.skuola-page-title__overlay {
	z-index: 2;
}

/* `flow-root` tiene dentro il margine inferiore del titolo: senza, sfugge e la barra si accorcia
   di 20px (`.t-w_cnt` misura 106.4 = 86.4 + 20). `width: 100%` perché in `is-full-height` questo è
   un figlio flex, e i margini automatici gli toglierebbero lo stiramento. */
.skuola-page-title__inner {
	position: relative;
	z-index: 3;
	display: flow-root;
	width: 100%;
	max-width: var(--skuola-col);
	margin: 0 auto;
	box-sizing: border-box;
}

/* Corpo del titolo dall'`h1` di theme.json (72/1.2/-0.02em, 36 sotto i 768): qui solo il
   componente. */
.skuola-page-title__h {
	margin: 0 0 20px;
	color: var(--wp--preset--color--white);
}

.skuola-page-title__desc {
	max-width: 60%;
	margin: 20px 0 30px;
	font-size: var(--wp--preset--font-size--60);
	line-height: 32px;
	color: var(--wp--preset--color--white);
}

/* Sottotitolo a due colonne: solo `/lavora-con-noi/`, l'unico `_skuola_title_desc` con markup.
   Soglia 595px e proporzioni 25/75 sono di Melinda; il testo sta prima nel DOM e l'inversione lo
   porta a destra su schermo largo, sotto il bollino su schermo stretto. */
.skuola-page-title__desc-grid {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
}

/* Le larghezze non stanno in media query: in Melinda sono `75%`/`25%` senza soglia, quindi
   valgono anche impilate. `border-box` o le due colonne sommano più del contenitore. */
.skuola-page-title__desc-txt,
.skuola-page-title__desc-badge {
	box-sizing: border-box;
}

.skuola-page-title__desc-txt {
	width: 75%;
	padding: 1%;
}

.skuola-page-title__desc-badge {
	width: 25%;
	padding-top: 2%;
}

.skuola-page-title__desc-badge img {
	max-width: 100%;
	height: auto;
}

@media (min-width: 595px) {
	.skuola-page-title__desc-grid {
		flex-direction: row-reverse;
	}
}

.skuola-page-title__breadcrumb {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	z-index: 2;
	max-width: var(--skuola-col);
	margin: 0 auto;
	box-sizing: border-box;
	font-size: var(--wp--preset--font-size--10);
	line-height: 1;
	letter-spacing: 0.275px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.skuola-page-title__breadcrumb a {
	color: var(--wp--preset--color--white);
	opacity: 0.7;
	text-decoration: none;
}

.skuola-page-title__breadcrumb a:hover {
	opacity: 1;
}

@media (max-width: 767px) {
	.skuola-page-title__inner,
	.skuola-page-title__breadcrumb {
		padding-left: var(--wp--preset--spacing--10);
		padding-right: var(--wp--preset--spacing--10);
	}
	.skuola-page-title__desc {
		max-width: none;
	}
	/* `static`: la distanza dal titolo la dà il margine del sottotitolo (30px) o, se non c'è, del
	   titolo (20px); un margine proprio la sommerebbe. */
	.skuola-page-title__breadcrumb {
		position: static;
	}
}

/* -------------------------------------------------------------------------- */
/*  Footer                                                                    */
/*  Melinda: da 992px .main-f-inner è position:fixed e il contenuto gli       */
/*  scorre sopra. Qui è position:sticky sul footer: stesso risultato, senza   */
/*  JS e senza calcolare l'altezza (Melinda la scrive col jQuery di main.js). */
/* -------------------------------------------------------------------------- */
/* Il padding orizzontale va sul figlio, non sulla barra: il `.container` di Melinda è max 1740
   *con* i 60 dentro, quindi oltre 1740px di viewport il testo resta allineato al logo. */
.skuola-footer__bar > p {
	margin: 0;
	padding-left: var(--skuola-gutter);
	padding-right: var(--skuola-gutter);
}

/* 28px di padding e nessun margine invece dei 21+15 di Melinda: la somma è la stessa, 78.6
   misurati. `:last-child` non è decorativo — il core azzera il margine finale con
   `:root :where(.is-layout-constrained) > :last-child` (0,2,0), che batte classe+tipo; sta in una
   regola a sé perché quella specificità sul padding vincerebbe sulle media query qui sotto. */
.skuola-footer__bar > p:last-child {
	margin-bottom: 15px;
}

@media (min-width: 768px) {
	.skuola-footer__bar > p {
		padding-right: 50%;
	}
}

@media (max-width: 767px) {
	.skuola-footer__bar > p {
		text-align: center;
	}
}

@media (min-width: 992px) {
	.skuola-footer {
		position: sticky;
		bottom: 0;
		z-index: 0;
	}
	/* Tutto ciò che sta sopra il footer deve passargli davanti, o il footer fisso si vede in
	   trasparenza invece di essere scoperto dallo scorrimento. L'header ha già il suo z-index. */
	.wp-site-blocks > *:not(.skuola-footer):not(.skuola-header) {
		position: relative;
		z-index: 1;
	}

	.wp-site-blocks > main {
		background-color: var(--wp--preset--color--white);
	}
}

/* -------------------------------------------------------------------------- */
/*  Barra titolo — stati aggiunti in F6                                       */
/*                                                                            */
/*  Misure da docs/baseline/components/post-*.json e categoria-*.json          */
/*  (produzione, 2026-08-24). Gli archivi usano la stessa barra delle pagine;  */
/*  gli articoli aggiungono altezza piena, sfondo fisso e la data.            */
/* -------------------------------------------------------------------------- */

/* Melinda centra col `text-align` dell'option; il blocco lo porta come `has-text-align-*`. */
.skuola-page-title.has-text-align-center {
	text-align: center;
}

.skuola-page-title.has-text-align-right {
	text-align: right;
}

/* `__full-height` in Melinda è JavaScript: centra il contenuto nell'altezza intera se la barra ci
   sta, altrimenti la lascia con i padding di sempre. Qui lo fa un padding **simmetrico** di metà
   somma, (150 + header + 180) / 2 = 210.095, con `border-box` perché `min-height` misurerebbe il
   solo contenuto. Il titolo cade a 210 invece di 240 quando non ci sta: voce in DEVIATIONS. */
.skuola-page-title.is-full-height {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	padding-top: calc((150px + var(--skuola-header-h) + 180px) / 2);
	padding-bottom: calc((150px + var(--skuola-header-h) + 180px) / 2);
}

/* `__parallax`: Melinda trasla lo sfondo a un quarto dello scorrimento; a scorrimento zero è
   `background-attachment: fixed`, che è anche il computed della produzione su 178 articoli di 182. */
.skuola-page-title.is-parallax .skuola-page-title__bg {
	background-attachment: fixed;
}

/* Data dell'articolo: `.t-w_desc.__post` di Melinda. */
.skuola-page-title__meta {
	max-width: 60%;
	margin: 45px auto 30px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	opacity: 0.7;
}

.skuola-page-title__date::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 7px;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain;
}