/*
Theme Name: Namascè
Template: twentytwentyfour
Version: 1.0.0
*/

body {
	--namasce-page-bg-color:      var(--wp--preset--color--base);
	--namasce-page-bg-image:      url('./assets/images/background-pattern.png');
	--namasce-page-bg-position:   top center;
	--namasce-page-bg-repeat:     repeat;
	--namasce-page-bg-size:       auto;

	background-color: var(--namasce-page-bg-color);
}

/*
 * Pattern di pagina come layer fisso al viewport. NON usiamo
 * `background-attachment: fixed` perché iOS Safari lo ignora (lo tratta come
 * `scroll`), sfasando il pattern tra header sticky e body. Un elemento in
 * `position: fixed` è invece supportato ovunque.
 */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color:    var(--namasce-page-bg-color);
	background-image:    var(--namasce-page-bg-image);
	background-position: var(--namasce-page-bg-position);
	background-repeat:   var(--namasce-page-bg-repeat);
	background-size:     var(--namasce-page-bg-size);
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	flex-shrink: 0;
}

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 10;
}

/*
 * Stesso pattern dell'header, ma come pseudo `absolute` ancorato all'header
 * sticky: poiché l'header resta al top del viewport, il pattern (origine
 * `top center`) coincide pixel-perfect con quello fisso del body — senza
 * dipendere da `background-attachment: fixed` (rotto su iOS).
 */
.wp-site-blocks > header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color:    var(--namasce-page-bg-color);
	background-image:    var(--namasce-page-bg-image);
	background-position: var(--namasce-page-bg-position);
	background-repeat:   var(--namasce-page-bg-repeat);
	background-size:     var(--namasce-page-bg-size);
}

a:focus,
button:focus {
	outline: none;
}

/* Full-bleed: override del break-out built-in di WP che esce dal padding ma
   non garantisce viewport-width se il container `.has-global-padding` è esso
   stesso constrained a `wideSize`. Stesso scope del default (figlio diretto),
   ma forza 100vw + margini negativi centrati. */
.has-global-padding > .alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}