/* Block theme layout helpers */

.wp-site-blocks {
	min-height: 100vh;
}

.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group {
	width: 100%;
}

/*
 * Block gap globale (theme.json): tra main e footer compare margin-block-start (~1.5rem).
 * Il template-part footer (tagName footer nei template) non deve ereditare quello spazio.
 */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * Header sticky (pagine Site Editor): classe aggiunta in PHP su core/template-part slug header.
 * .wp-site-blocks è spesso flex column: align-self:flex-start evita stretch che rompe sticky;
 * l’interno .site-header-sticky non deve essere sticky (regole in style.css).
 */
.fullstack-header-sticky-root {
	position: sticky;
	top: 0;
	z-index: 100;
	align-self: flex-start;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	box-sizing: border-box;
}

.fullstack-header-sticky-root .site-header.site-header-sticky {
	position: static;
	top: auto;
}

/* Fallback se il template è stato alterato senza slug header ma resta il blocco Fullstack */
.wp-site-blocks .wp-block-template-part:has(.wp-block-fullstack-site-header) {
	overflow: visible;
	align-self: flex-start;
}

main.fullstack-site-main {
	padding: 2rem 1rem 4rem;
}

main.fullstack-site-main.fullstack-page-shell {
	padding: 0;
	margin: 0;
}

main.fullstack-site-main.fullstack-page-shell.fullstack-single-main {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: 4rem;
}

.fullstack-page-content-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.fullstack-archive-shell,
.fullstack-search-shell,
.fullstack-404-shell {
	max-width: 1200px;
	margin: 0 auto;
}

.fullstack-archive-query .wp-block-post-template,
.fullstack-search-query .wp-block-post-template {
	list-style: none;
	padding: 0;
}

.fullstack-archive-query .wp-block-post,
.fullstack-search-query .wp-block-post {
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 1rem;
	background: #fff;
}

.fullstack-language-switcher-block {
	display: inline-flex;
}

/* Media & Text (estensione tema): bordo sul box media senza straripare la misura. */
.wp-block-media-text .wp-block-media-text__media {
	box-sizing: border-box;
}

/*
 * Sagoma sotto il media: stesso rettangolo (border-radius inherit), colore/offset/rotate via variabili CSS.
 * overflow:visible sul figure quando attiva (impostato inline dal tema) così la forma può uscire dal box.
 */
.wp-block-media-text .wp-block-media-text__media.fullstack-mt-has-silhouette {
	position: relative;
	isolation: isolate;
}

.wp-block-media-text .wp-block-media-text__media.fullstack-mt-has-silhouette::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--fullstack-mt-silhouette-color);
	border-radius: inherit;
	transform: translate(var(--fullstack-mt-silhouette-x, 0px), var(--fullstack-mt-silhouette-y, 0px))
		rotate(var(--fullstack-mt-silhouette-rotate, 0deg));
	transform-origin: center center;
}

.wp-block-media-text .wp-block-media-text__media.fullstack-mt-has-silhouette > :is(img, video) {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: inherit;
	vertical-align: middle;
}

.fullstack-page-section-form,
.fullstack-page-section-sponsor-logos,
.fullstack-page-section-content-list,
.fullstack-page-section-cta-wrap {
	margin: 1.5rem 0;
}

.fullstack-page-hero-editor__h1-notice {
	margin: 0 0 12px;
}

.fullstack-page-hero-editor,
.fullstack-section-editor {
	border: 1px dashed rgba(34, 53, 100, 0.35);
	border-radius: 1.25rem;
}

.fullstack-page-hero-editor {
	padding: 2rem 1rem;
	background: linear-gradient(135deg, rgba(34, 53, 100, 0.08), rgba(255, 255, 255, 0.95));
}

.fullstack-page-hero-editor__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.fullstack-page-hero-editor__title {
	margin: 0.5rem 0 1rem;
}

.fullstack-page-hero-editor__layout {
	margin-top: 0.5rem;
	border: 1px dashed rgba(34, 53, 100, 0.22);
	border-radius: 0.75rem;
	padding: 0.5rem;
}

.fullstack-page-hero-editor__cluster {
	max-width: 60ch;
	width: 100%;
	box-sizing: border-box;
}

.fullstack-page-hero-editor-cluster--vars .block-editor-inner-blocks .block-editor-block-list__layout > .block-editor-block-list__block:first-child .wp-block-heading {
	color: var(--fullstack-hero-h1-color, inherit);
}

.fullstack-page-hero-editor-cluster--vars .block-editor-inner-blocks .block-editor-block-list__layout > .block-editor-block-list__block:not(:first-child) {
	color: var(--fullstack-hero-text-color, inherit);
}

.fullstack-page-hero-editor-cluster--vars .block-editor-inner-blocks .block-editor-block-list__layout > .block-editor-block-list__block:not(:first-child) .wp-block-button__link {
	color: inherit;
}

.fullstack-page-hero-editor__body {
	max-width: 60ch;
}

.fullstack-page-hero-editor__body.fullstack-page-hero-editor__body--text-color .wp-block-button__link {
	color: inherit;
}

.fullstack-section-editor {
	position: relative;
	padding: 3rem 0;
	background-repeat: no-repeat;
}

/* Stessa logica del frontend: section flex column, inner che cresce (allineamento contenuto). */
.fullstack-section-editor.wp-block-fullstack-section {
	display: flex;
	flex-direction: column;
	min-height: 300px;
}
.fullstack-section-editor.wp-block-fullstack-section > .fullstack-page-section-inner {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	align-self: stretch;
}

.fullstack-section-editor__media-note {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0 1rem 1rem;
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	background: rgba(34, 53, 100, 0.85);
	color: #fff;
	font-size: 0.75rem;
}

.fullstack-editor-media-field {
	margin-bottom: 1rem;
}

.fullstack-editor-media-field__label {
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.fullstack-editor-media-field__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.fullstack-editor-media-field__meta {
	font-size: 12px;
	opacity: 0.8;
	word-break: break-word;
}

.fullstack-editor-media-field__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

/* Wrapper blocco Statistiche: bordo/sfondo/dimensioni da supports Gutenberg */
.wp-block-fullstack-stats.fullstack-block-stats {
	box-sizing: border-box;
	max-width: 100%;
}

.wp-block-fullstack-media-set.fullstack-block-media-set {
	box-sizing: border-box;
	max-width: 100%;
}

/* Editor: blocco Statistiche — heading + paragrafo nativi */
.fullstack-stats-editor-intro {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
	background: #fafafa;
	text-align: center;
}

.fullstack-stats-editor-intro .block-editor-block-list__layout {
	margin: 0;
}

/* Editor: ripetitori Stats / Media set (Card + toolbar come pattern Gutenberg) */
.fullstack-editor-block-divider {
	margin: 16px 0;
	border: none;
	border-top: 1px solid #e0e0e0;
}

.fullstack-editor-block-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.fullstack-editor-block-section-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1e1e1e;
}

/* Griglia 3 colonne (~⅓) nell’editor; stack su viewport stretti */
.fullstack-stats-editor-items,
.fullstack-media-set-editor-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

@media (max-width: 1080px) {
	.fullstack-stats-editor-items,
	.fullstack-media-set-editor-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.fullstack-stats-editor-items,
	.fullstack-media-set-editor-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fullstack-editor-repeater-item-wrap {
	margin: 0;
	min-width: 0;
}

/* Controlli stretti: evita che Select/Text fuoriescano dalla cella */
.fullstack-stats-editor-items .components-base-control,
.fullstack-media-set-editor-items .components-base-control {
	max-width: 100%;
}

.fullstack-stats-editor-items .components-text-control__input,
.fullstack-stats-editor-items .components-select-control__input,
.fullstack-media-set-editor-items .components-text-control__input,
.fullstack-media-set-editor-items .components-select-control__input {
	max-width: 100%;
	box-sizing: border-box;
}

.fullstack-editor-repeater-add-below {
	margin-top: 4px;
}

.fullstack-editor-repeater-card__header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
}

.fullstack-editor-repeater-card__title {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1e1e1e;
	letter-spacing: 0.02em;
}

/* Icone = SVG stroke monocromatico nero (#1e1e1e nel JS); dashicons non è nel canvas */
.fullstack-editor-repeater-actions .fullstack-editor-repeater-icon {
	display: block;
	flex-shrink: 0;
	pointer-events: none;
	fill: none;
	stroke: #1e1e1e;
}

.fullstack-editor-repeater-actions .components-button:disabled .fullstack-editor-repeater-icon,
.fullstack-editor-repeater-actions .components-button[aria-disabled='true'] .fullstack-editor-repeater-icon {
	stroke: #757575;
	opacity: 0.55;
}

.fullstack-editor-repeater-card--fallback {
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	margin-bottom: 0;
}

.fullstack-editor-repeater-card--fallback .fullstack-editor-repeater-card__header-inner {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
}

.fullstack-editor-repeater-card--fallback .fullstack-editor-repeater-card__body {
	padding: 12px 16px;
}

.fullstack-editor-repeater-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.fullstack-editor-repeater-collapsed-hint {
	margin: 0 0 12px;
	max-width: 42rem;
}

.fullstack-editor-repeater-card.is-collapsed {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/*
 * Editor (Gutenberg): blocchi Fullstack con anteprima SSR (CTA, content list, header, ecc.)
 * rendono link reali; senza pointer-events il click naviga invece di selezionare il blocco.
 * Solo nel canvas dell’editor: su front-end i link restano cliccabili.
 */
.block-editor-block-list__layout [class*='wp-block-fullstack-'] a[href],
.block-editor-block-list__layout [class*='wp-block-fullstack-'] a[href]:hover,
.block-editor-block-list__layout [class*='wp-block-fullstack-'] a[href]:focus {
	pointer-events: none;
	cursor: default;
}

/*
 * Anteprima CTA: sopra le aree “vuote” delle Section (offset / pointer-events) così il click
 * colpisce il blocco CTA; la selezione è rinforzata in JS (selectBlock differito).
 */
.block-editor-block-list__layout .fullstack-cta-editor-preview {
	position: relative;
	z-index: 5;
	isolation: isolate;
}