/*
Theme Name: AGESCI Rovereto 1
Theme URI: https://www.agescirovereto.org/
Author: Gruppo scout AGESCI Rovereto 1
Description: Tema a blocchi per il sito del gruppo scout AGESCI Rovereto 1, basato sul manuale di immagine coordinata AGESCI 2016. Nessun page builder, nessuna dipendenza da plugin per il layout.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agesci-rovereto1
*/

/* ------------------------------------------------------------------
   Il grosso dello stile è in theme.json. Qui solo ciò che theme.json
   non sa esprimere: texture, gagliardetto, tagli a V, sottolineature.
   Le variabili --wp--preset--color--* vengono da theme.json.
   ------------------------------------------------------------------ */

:root {
	--rov1-container: var(--wp--style--global--wide-size, 1080px);
	--rov1-texture: url("assets/img/texture-legno.svg");
	--rov1-taglio: clamp(24px, 4vw, 64px);
	--rov1-accento: var(--wp--preset--color--viola);
}

/* Accento di branca: se la pagina contiene un'intestazione di branca,
   barra dell'hero, pennellate e triangolini prendono il colore della branca. */
body:has(.rov1-intestazione.is-style-branca-lc) { --rov1-accento: var(--wp--preset--color--lc); }
body:has(.rov1-intestazione.is-style-branca-eg) { --rov1-accento: var(--wp--preset--color--eg); }
body:has(.rov1-intestazione.is-style-branca-rs) { --rov1-accento: var(--wp--preset--color--rs); }

body {
	background-image: url("assets/img/carta.svg");
	background-size: 320px 320px;
}

/* Fasce viola con texture legno/velluto (manuale p. 17) */
.has-texture,
.is-style-fascia-texture {
	background-image: var(--rov1-texture);
	background-size: 240px 72px;
}

/* ----------------------------- HEADER ----------------------------- */

/* Copertina in testa a ogni template: contiene la template part header */
.rov1-hero {
	position: relative;
	padding: 0 !important;
}
.rov1-hero.wp-block-cover {
	align-items: stretch;
}
.rov1-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	min-height: inherit;
}
/* Barra viola alla base dell'hero, larga quanto il contenitore (come Roma 1) */
.rov1-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: min(var(--rov1-container), 100% - 2 * var(--wp--style--root--padding-left, 20px));
	height: 10px;
	transform: translateX(-50%);
	background: var(--rov1-accento);
}
.rov1-hero:not(:has(img.wp-block-cover__image-background)) {
	background-color: var(--wp--preset--color--viola);
	background-image: var(--rov1-texture);
	background-size: 240px 72px;
}
/* L'hero tocca il contenuto che segue (es. intestazione di branca) */
.rov1-hero {
	margin-block-end: 0;
}
.rov1-hero + * {
	margin-block-start: 0 !important;
}

.rov1-hero__titolo {
	margin-block: auto !important;
	padding-block: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + 10px);
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}

/* il wrapper della template part non deve ereditare la larghezza contenuto */
.rov1-hero .wp-block-cover__inner-container > .wp-block-template-part {
	max-width: none;
	width: 100%;
}

.rov1-header {
	position: relative;
	z-index: 10;
}
.rov1-header__barra {
	min-height: 90px;
}
.rov1-header__barra > .wp-block-group:first-child {
	flex: 1 1 auto;
	min-width: 0;
}
.rov1-header .wp-block-search {
	flex: 0 1 14rem;
	max-width: 14rem;
}

/* Marchio a gagliardetto: pende dal bordo superiore */
.rov1-marchio {
	flex: 0 0 auto;
	margin: 0 !important;
	align-self: flex-start;
	line-height: 0;
}
.rov1-marchio img {
	display: block;
	width: 62px;
	height: auto;
	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
}
.rov1-marchio a:focus-visible {
	outline: 2px solid var(--wp--preset--color--bianco);
	outline-offset: 3px;
}

.rov1-header .wp-block-navigation {
	flex: 1 1 auto;
	padding-top: 1.6rem;
	row-gap: 0.4rem;
	font-weight: 700;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.rov1-header .wp-block-navigation a:hover,
.rov1-header .wp-block-navigation a:focus {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.rov1-header .wp-block-search__input {
	min-width: 9rem;
	border: 0;
	background: rgb(255 255 255 / 0.25);
	color: var(--wp--preset--color--bianco);
}
.rov1-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--bianco);
	opacity: 1;
}
.rov1-header .wp-block-search__button {
	margin-left: 0;
	border: 0;
	background: rgb(255 255 255 / 0.25);
	color: var(--wp--preset--color--bianco);
}
.rov1-header .wp-block-navigation__responsive-container.is-menu-open {
	text-shadow: none;
}

@media (max-width: 781px) {
	.rov1-header__barra {
		min-height: 64px;
	}
	.rov1-marchio img {
		width: 44px;
	}
	.rov1-header .wp-block-search {
		display: none;
	}
}

/* ------------------------- TITOLI E TESTI ------------------------- */

/* Titolo di sezione "a pennellata" (Roma 1 / tratto a penna del manuale) */
.is-style-pennellata {
	position: relative;
	padding-bottom: 0.55em;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.is-style-pennellata::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background: var(--rov1-accento);
	-webkit-mask: url("assets/img/pennellata.svg") left bottom / 100% 100% no-repeat;
	mask: url("assets/img/pennellata.svg") left bottom / 100% 100% no-repeat;
}

/* Elenchi con triangolini viola (come Roma 1) */
.entry-content ul:not([class*="is-style"]):not(.wp-block-page-list):not(.wp-block-post-template),
.is-style-triangoli {
	padding-left: 1.4em;
	list-style: none;
}
.entry-content ul:not([class*="is-style"]):not(.wp-block-page-list):not(.wp-block-post-template) > li,
.is-style-triangoli > li {
	position: relative;
	margin-block: 0.35em;
}
.entry-content ul:not([class*="is-style"]):not(.wp-block-page-list):not(.wp-block-post-template) > li::before,
.is-style-triangoli > li::before {
	content: "";
	position: absolute;
	left: -1.2em;
	top: 0.5em;
	border-left: 0.5em solid var(--rov1-accento);
	border-block: 0.3em solid transparent;
}

/* --------------------------- PULSANTI ---------------------------- */

/* Pulsante "AGESCI": bordato viola con freccia (sidebar di Roma 1) */
.wp-block-button.is-style-agesci .wp-block-button__link {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.45em 2.2em;
	border: 2px solid var(--wp--preset--color--viola);
	border-radius: 0;
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--viola);
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.wp-block-button.is-style-agesci .wp-block-button__link::after {
	content: "\203A";
	position: absolute;
	right: 0.7em;
	top: 50%;
	transform: translateY(-52%);
	font-size: 1.3em;
}
.wp-block-button.is-style-agesci .wp-block-button__link:hover,
.wp-block-button.is-style-agesci .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--viola);
	color: var(--wp--preset--color--bianco);
}

/* ------------------------- TAGLI A V ------------------------------ */

/* Taglio a V in basso (buste e cartellina del manuale) */
.is-style-taglio-v {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rov1-taglio)), 50% 100%, 0 calc(100% - var(--rov1-taglio)));
	padding-bottom: calc(var(--wp--preset--spacing--60) + var(--rov1-taglio)) !important;
}
/* Taglio obliquo in alto */
.is-style-taglio-obliquo {
	clip-path: polygon(0 var(--rov1-taglio), 100% 0, 100% 100%, 0 100%);
	padding-top: calc(var(--wp--preset--spacing--60) + var(--rov1-taglio)) !important;
}

/* ---------------------------- CARD -------------------------------- */

.rov1-card {
	height: 100%;
	width: 100%;
	box-shadow: 0 1px 2px rgb(29 29 27 / 0.08), 0 4px 16px rgb(29 29 27 / 0.06);
}
/* il core aggiunge padding ai gruppi con sfondo: sulle card no */
.rov1-card.has-background {
	padding-top: 0;
	padding-inline: 0;
}
.rov1-card > .wp-block-group {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	box-sizing: border-box;
}
.rov1-card .wp-block-image img {
	display: block;
	margin-inline: auto;
}
.rov1-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Icone a tratto di penna */
.rov1-icona img {
	width: 96px;
	height: 96px;
}

/* -------------------------- VARIE --------------------------------- */

.rov1-data {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
}

.rov1-footer a {
	text-decoration-color: rgb(255 255 255 / 0.5);
}
.rov1-footer a:hover {
	text-decoration-color: currentColor;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--viola);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* Citazioni: piccole, in corsivo, firma sotto in piccolo */
.wp-block-quote cite {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--wp--preset--color--viola-medio);
}

/* Citazione nell'hero (Baden-Powell) */
.rov1-citazione {
	margin-block: var(--wp--preset--spacing--20);
	font-size: 1rem;
	line-height: 1.55;
}
.rov1-citazione cite {
	display: block;
	margin-top: 0.75rem;
	color: inherit;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------------------------- SLIDER ------------------------------
   Galleria con stile "Slider" dentro un gruppo .rov1-slider:
   le immagini fanno da sfondo, il testo sta su un pannello semi-trasparente. */

.rov1-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(440px, 68vh, 680px);
	overflow: hidden;
	margin-block-start: 0 !important;
	background: var(--wp--preset--color--viola-scuro);
}
.rov1-slider > .wp-block-gallery.is-style-slider {
	position: absolute !important;
	inset: 0;
	display: block !important;
	max-width: none !important;
	margin: 0 !important;
}
.wp-block-gallery.is-style-slider > figure.wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.wp-block-gallery.is-style-slider:not(.rov1-js) > figure:first-child,
.wp-block-gallery.is-style-slider > figure.is-attiva {
	opacity: 1;
}
.wp-block-gallery.is-style-slider > figure img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
.wp-block-gallery.is-style-slider figcaption {
	display: none;
}

.rov1-slider__pannello {
	position: relative;
	z-index: 2;
	/* viola AGESCI semi-trasparente: con testo bianco il contrasto resta ≥ 7:1 */
	background-color: rgb(70 38 120 / 0.86) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.rov1-slider__controlli {
	position: absolute;
	right: max(20px, (100% - var(--rov1-container)) / 2);
	bottom: calc(var(--wp--preset--spacing--20) + var(--rov1-taglio, 0px));
	z-index: 3;
	display: flex;
	gap: 0.4rem;
	align-items: center;
}
.rov1-slider__pallino,
.rov1-slider__pausa {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 2px solid var(--wp--preset--color--bianco);
	border-radius: 50%;
	background: rgb(33 22 56 / 0.5);
	cursor: pointer;
}
.rov1-slider__pallino {
	width: 0.9rem;
	height: 0.9rem;
}
.rov1-slider__pallino[aria-current="true"] {
	background: var(--wp--preset--color--lc);
	border-color: var(--wp--preset--color--lc);
}
.rov1-slider__pausa {
	position: relative;
	margin-left: 0.4rem;
}
/* icona pausa (due barre) / play (triangolo) */
.rov1-slider__pausa::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 10px;
	border-inline: 3px solid var(--wp--preset--color--bianco);
	box-sizing: border-box;
}
.rov1-slider__pausa[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	margin-left: 9px;
	border-inline: 0;
	border-left: 9px solid var(--wp--preset--color--bianco);
	border-block: 6px solid transparent;
}
.rov1-slider__controlli button:focus-visible {
	outline: 2px solid var(--wp--preset--color--lc);
	outline-offset: 2px;
}
@media (max-width: 781px) {
	.rov1-slider__controlli {
		top: var(--wp--preset--spacing--20);
		bottom: auto;
	}
}

/* --------------------- CAPITOLI A FISARMONICA ---------------------
   Blocco "Dettagli" con classe rov1-capitolo (pagina Storia). Nessun JS. */

.rov1-storia {
	font-size: 0.875rem;
	line-height: 1.6;
}
.rov1-storia .wp-block-quote {
	font-size: inherit;
}
.rov1-storia h3 {
	font-size: 0.9375rem;
}
.wp-block-details.rov1-capitolo {
	margin-block-start: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--viola-chiaro);
}
.wp-block-details.rov1-capitolo > summary {
	position: relative;
	padding: 0.5rem 2.25rem 0.5rem 0;
	color: var(--wp--preset--color--viola-scuro);
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.wp-block-details.rov1-capitolo > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.rov1-capitolo > summary::after {
	content: "";
	position: absolute;
	right: 0.6rem;
	top: 50%;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid var(--rov1-accento);
	border-bottom: 2px solid var(--rov1-accento);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s;
}
.wp-block-details.rov1-capitolo[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}
.wp-block-details.rov1-capitolo > summary:hover {
	color: var(--wp--preset--color--viola);
}
.wp-block-details.rov1-capitolo[open] {
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Pannello compatto, ancorato a sinistra: lascia libero il soggetto delle foto */
.rov1-slider > .rov1-slider__pannello.alignwide {
	width: min(600px, 100%);
	margin-left: max(0px, (100% - var(--rov1-container)) / 2) !important;
	margin-right: auto !important;
}
.rov1-slider .rov1-citazione {
	font-size: 0.9375rem;
	line-height: 1.5;
}
.rov1-slider h1 {
	font-size: var(--wp--preset--font-size--large);
}
/* Mobile: foto in alto, testo sotto (non sopra), così la foto si vede */
@media (max-width: 781px) {
	.rov1-slider {
		display: block;
		min-height: 0;
		background-color: var(--wp--preset--color--viola);
		padding-top: 0 !important;
		padding-inline: 0 !important;
	}
	.rov1-slider > .wp-block-gallery.is-style-slider {
		position: relative !important;
		height: min(62vw, 320px);
	}
	.rov1-slider > .rov1-slider__pannello.alignwide {
		width: 100%;
		margin: 0 !important;
		background-color: var(--wp--preset--color--viola) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.rov1-slider .rov1-citazione {
		font-size: 0.9375rem;
	}
}

/* Anteprima video: link a YouTube invece dell'iframe (niente cookie di terze parti) */
.rov1-video a {
	position: relative;
	display: block;
}
.rov1-video a::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgb(70 38 120 / 0.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6l10 6-10 6z'/%3E%3C/svg%3E") center / 34px no-repeat;
	transition: transform 0.2s;
}
.rov1-video a:hover::after,
.rov1-video a:focus-visible::after {
	transform: scale(1.08);
}

/* Pulsante del menu su mobile: icona a tre righe + scritta "Menu", bordato */
.rov1-header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.8rem 0.45rem 0.6rem;
	border: 2px solid var(--wp--preset--color--bianco);
	background: rgb(33 22 56 / 0.35);
	color: var(--wp--preset--color--bianco);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;
}
.rov1-header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}
.rov1-header .wp-block-navigation__responsive-container-open svg {
	width: 26px;
	height: 26px;
}
.rov1-header .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--lc);
	outline-offset: 2px;
}
/* il pulsante "chiudi" dentro il menu aperto: più grande */
.rov1-header .wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}
@media (max-width: 599px) {
	.rov1-header .wp-block-navigation {
		padding-top: 1.1rem;
	}
}
/* Menu aperto su mobile: voci grandi e ben distanziate */
.rov1-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 1.5rem;
	background-image: var(--rov1-texture);
	background-size: 240px 72px;
}
.rov1-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}
.rov1-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgb(255 255 255 / 0.2) !important;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.25rem;
}
.rov1-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.85rem 0 !important;
}