/*
Theme Name: ZeroRing
Description: Tema a blocchi per zeroring.it. Chiaro e lineare in stile "Common": fondo off-white, bordi da 1 px, tipografia svizzera, ciano dosato.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: zeroring
*/

:root {
	--zr-bordo: 1px solid var(--wp--preset--color--bordo);
	--zr-ombra: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--zr-mono: var(--wp--preset--font-family--mono);
	--zr-raggio: 12px;
}

/* Niente spazio tra intestazione, contenuto e piè di pagina: le sezioni hanno già il loro */
.wp-site-blocks > * + * { margin-block-start: 0; }
[class*="zr-"], [class*="zr-"] *, [class*="zr-"]::before, [class*="zr-"]::after { box-sizing: border-box; }

body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--wp--preset--color--ciano-chiaro); }
:focus-visible { outline: 2px solid var(--wp--preset--color--ciano); outline-offset: 2px; }

.zr-mono { font-family: var(--zr-mono); }
.zr-grigio { color: var(--wp--preset--color--grigio); }

/* Codice delle regole: ciano scuro su ciano chiarissimo */
.zr-codice {
	font-family: var(--zr-mono);
	font-size: 0.9em;
	color: var(--wp--preset--color--ciano-scuro);
	background: var(--wp--preset--color--ciano-chiaro);
	border: 1px solid #CFFAFE;
	border-radius: 6px;
	padding: 0.05em 0.4em;
	white-space: nowrap;
}

/* Etichette tecniche */
.zr-etichetta {
	font-family: var(--zr-mono);
	font-size: var(--wp--preset--font-size--etichetta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grigio);
}
.zr-etichetta b { color: var(--wp--preset--color--ciano-scuro); font-weight: 500; }

/* Pill badge */
.zr-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ciano-chiaro);
	border: 1px solid #CFFAFE;
	color: var(--wp--preset--color--ciano-scuro);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}
.zr-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--ciano); }

/* ---------- Intestazione ---------- */
.zr-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: var(--zr-bordo);
}
.admin-bar .zr-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .zr-header { top: 46px; } }

.zr-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
}
.zr-logo:hover { color: var(--wp--preset--color--inchiostro); }
.zr-logo img { width: 28px; height: 28px; }

.zr-header .wp-block-navigation { font-size: 0.875rem; color: var(--wp--preset--color--grigio); }
.zr-header .wp-block-navigation a { color: inherit; text-decoration: none; }
.zr-header .wp-block-navigation a:hover { color: var(--wp--preset--color--inchiostro); }
@media (max-width: 600px) { .zr-header .zr-cta-header { display: none; } }

.wp-element-button, .wp-block-button__link { transition: background-color 150ms ease-out; box-shadow: var(--zr-ombra); }

/* Badge dello store */
.zr-store {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 1rem;
	border: var(--zr-bordo);
	border-radius: 8px;
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--inchiostro);
	box-shadow: var(--zr-ombra);
	text-decoration: none;
	line-height: 1.2;
}
.zr-store svg { width: 20px; height: 20px; flex: none; }
.zr-store small { display: block; font-size: 0.6875rem; color: var(--wp--preset--color--grigio); }
.zr-store strong { font-weight: 600; font-size: 0.9375rem; }

/* ---------- Copertina ---------- */
.zr-hero h1 { max-width: 15ch; margin-top: 1.25rem; }
.zr-hero h1 .zr-h1-secondo { color: var(--wp--preset--color--grigio); }
.zr-sottotitolo { max-width: 34rem; color: var(--wp--preset--color--grigio); font-size: 1.125rem; }
.zr-garanzie { font-size: 0.8125rem; color: var(--wp--preset--color--grigio); }

/* Card del prodotto */
.zr-card {
	background: var(--wp--preset--color--bianco);
	border: var(--zr-bordo);
	border-radius: var(--zr-raggio);
	box-shadow: var(--zr-ombra);
	padding: 1.5rem;
	height: 100%;
}
.zr-prodotto { max-width: 440px; margin-left: auto; padding: 0; overflow: hidden; }
.zr-prodotto-testa { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; border-bottom: var(--zr-bordo); }
.zr-prodotto-testa .zr-logo { font-size: 0.875rem; }
.zr-prodotto-testa .zr-logo img { width: 18px; height: 18px; }
.zr-prodotto-corpo { padding: 1.25rem; }
.zr-campo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--ciano);
	border-radius: 8px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--ciano-chiaro);
	font-family: var(--zr-mono);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ciano-scuro);
}
.zr-cursore { display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--wp--preset--color--ciano-scuro); animation: zr-lampeggia 1s steps(1) infinite; }
@keyframes zr-lampeggia { 50% { opacity: 0; } }
.zr-interruttore { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--wp--preset--color--ciano); }
.zr-interruttore::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--zr-ombra); }
.zr-dato { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: var(--zr-bordo); font-size: 0.875rem; color: var(--wp--preset--color--grigio); }
.zr-dato strong { color: var(--wp--preset--color--inchiostro); font-size: 1.5rem; letter-spacing: -0.02em; }
.zr-lista { list-style: none; margin: 1rem 0 0; padding: 0; font-family: var(--zr-mono); font-size: 0.8125rem; }
.zr-lista li { display: flex; justify-content: space-between; padding: 0.55rem 0; border-top: var(--zr-bordo); }
.zr-lista .zr-fisso { color: var(--wp--preset--color--inchiostro); }
.zr-lista .zr-variabile { color: #94A3B8; }
.zr-lista .zr-esito { font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; color: var(--wp--preset--color--grigio); }
.zr-lista .zr-esito--passa { color: #047857; }

/* ---------- Sezioni ---------- */
.zr-sezione { border-top: var(--zr-bordo); }
/* Titoli stretti ma allineati al bordo sinistro della colonna (non dello schermo): conta sugli schermi larghi */
.zr-sezione.is-layout-constrained > h2:not(.has-text-align-center),
.zr-sezione.is-layout-constrained > .zr-intro,
.zr-sezione.is-layout-constrained > .zr-etichetta:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}
.zr-sezione.is-layout-constrained > h2:not(.has-text-align-center) { max-width: 26ch; }
.zr-sezione.is-layout-constrained > .zr-intro { max-width: 40rem; }
.zr-intro { color: var(--wp--preset--color--grigio); font-size: 1.0625rem; }

/* Bento: 3 card */
.zr-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .zr-bento { grid-template-columns: 1fr; } }
.zr-bento .zr-card { display: flex; flex-direction: column; gap: 0.75rem; }
.zr-bento h3 { margin: 0.25rem 0 0; }
.zr-bento p { margin: 0; color: var(--wp--preset--color--grigio); font-size: 0.9375rem; }
.zr-grafica {
	margin-top: auto;
	border: var(--zr-bordo);
	border-radius: 8px;
	background: var(--wp--preset--color--canvas);
	padding: 0.9rem 1rem;
	font-family: var(--zr-mono);
	font-size: 0.8125rem;
	min-height: 118px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
}
.zr-grafica .zr-fisso { color: var(--wp--preset--color--inchiostro); }
.zr-grafica .zr-variabile { color: #94A3B8; }
.zr-grafica .zr-riga { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.zr-stato { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--wp--preset--color--grigio); font-size: 0.8125rem; white-space: nowrap; }
.zr-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10B981; }
.zr-stato--attesa::before { background: #CBD5E1; }

/* Tabella di confronto */
.zr-tabella-box { background: var(--wp--preset--color--bianco); border: var(--zr-bordo); border-radius: var(--zr-raggio); box-shadow: var(--zr-ombra); overflow-x: auto; }
.zr-tabella { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 640px; }
.zr-tabella th, .zr-tabella td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-bottom: var(--zr-bordo); }
.zr-tabella tr:last-child td { border-bottom: 0; }
.zr-tabella thead th { font-family: var(--zr-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--grigio); background: var(--wp--preset--color--canvas); }
.zr-tabella tbody th { font-weight: 600; width: 24%; }
.zr-tabella td { color: var(--wp--preset--color--grigio); width: 38%; }
.zr-tabella .zr-noi { color: var(--wp--preset--color--inchiostro); font-weight: 500; background: rgba(236, 254, 255, 0.55); }
.zr-tabella thead .zr-noi { color: var(--wp--preset--color--ciano-scuro); background: var(--wp--preset--color--ciano-chiaro); }

/* Registri: dashboard con ricerca */
.zr-registri { padding: 0; overflow: hidden; }
.zr-registri-testa { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: var(--zr-bordo); background: var(--wp--preset--color--canvas); }
.zr-cerca {
	flex: 1 1 260px;
	max-width: 360px;
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.55rem 0.85rem 0.55rem 2.2rem;
	border: var(--zr-bordo);
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.7rem center / 16px;
	color: var(--wp--preset--color--inchiostro);
}
.zr-cerca:focus { outline: none; border-color: var(--wp--preset--color--ciano); box-shadow: 0 0 0 3px var(--wp--preset--color--ciano-chiaro); }
.zr-conteggio { font-size: 0.8125rem; }
.zr-elenco { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.zr-elenco li { display: grid; grid-template-columns: minmax(9rem, 1fr) 12rem 14rem; gap: 1rem; align-items: center; padding: 0.8rem 1.25rem; border-bottom: var(--zr-bordo); font-size: 0.9375rem; }
.zr-elenco li:last-child { border-bottom: 0; }
.zr-elenco .zr-paese { font-weight: 600; }
.zr-elenco .zr-paese small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--wp--preset--color--grigio); }
.zr-tipo { font-size: 0.75rem; white-space: nowrap; padding: 0.15rem 0.55rem; border-radius: 999px; border: var(--zr-bordo); color: var(--wp--preset--color--grigio); background: var(--wp--preset--color--canvas); }
.zr-tipo--registro { background: var(--wp--preset--color--ciano-chiaro); border-color: #CFFAFE; color: var(--wp--preset--color--ciano-scuro); }
.zr-elenco a { font-size: 0.875rem; white-space: nowrap; text-decoration: none; font-weight: 500; justify-self: end; }
.zr-elenco .zr-tipo { justify-self: start; }
.zr-elenco li.zr-vuoto { display: block; }
.zr-elenco a:hover { text-decoration: underline; }
.zr-vuoto { padding: 1.5rem 1.25rem; color: var(--wp--preset--color--grigio); }
@media (max-width: 720px) {
	.zr-elenco li { grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }
	.zr-elenco .zr-tipo { grid-row: 2; justify-self: start; }
	.zr-elenco a { grid-row: 1; grid-column: 2; }
}

/* ---------- Puntini (come in Common) ---------- */
/* Griglia di puntini dietro le anteprime: ogni puntino è un numero della serie */
.zr-puntini { position: relative; isolation: isolate; height: 100%; }
.zr-puntini > .zr-card { position: relative; }
.zr-puntini::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -28px -32px;
	background-image: radial-gradient(circle, var(--zr-punto, #00A3C4) 2.6px, transparent 3.1px);
	background-size: 13px 13px;
	background-position: center;
}
/* Serie bloccata: puntini ciano, più fitti al centro */
.zr-puntini--serie::before {
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
	opacity: 0.85;
}
/* Rete della comunità: puntini grigi con una zona ciano, come una mappa di segnalazioni */
.zr-puntini--rete::before { --zr-punto: #CBD5E1; }
.zr-puntini--rete::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -28px -32px;
	background-image: radial-gradient(circle, #00A3C4 2.6px, transparent 3.1px);
	background-size: 13px 13px;
	background-position: center;
	-webkit-mask-image: radial-gradient(circle at 82% 22%, #000 0, #000 18%, transparent 34%), radial-gradient(circle at 12% 85%, #000 0, transparent 22%);
	mask-image: radial-gradient(circle at 82% 22%, #000 0, #000 18%, transparent 34%), radial-gradient(circle at 12% 85%, #000 0, transparent 22%);
}
/* Quattro puntini agli angoli, come segni di registro */
.zr-angoli {
	position: relative;
	padding: 48px 40px;
	background:
		radial-gradient(circle, #0F172A 2.5px, transparent 3px) left top / 8px 8px no-repeat,
		radial-gradient(circle, #0F172A 2.5px, transparent 3px) right top / 8px 8px no-repeat,
		radial-gradient(circle, #0F172A 2.5px, transparent 3px) left bottom / 8px 8px no-repeat,
		radial-gradient(circle, #0F172A 2.5px, transparent 3px) right bottom / 8px 8px no-repeat;
}
.zr-angoli--stretto { padding: 36px 32px; }
@media (max-width: 600px) { .zr-angoli { padding: 32px 18px; } .zr-puntini::before, .zr-puntini--rete::after { inset: -20px -14px; } }

/* ---------- Frecce: torna su e sezione successiva ---------- */
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Oltre 1920 px le frecce restano dentro una cornice di 1920 px, non nell'angolo dello schermo */
.zr-frecce { position: fixed; right: max(clamp(12px, 2vw, 28px), calc((100vw - 1920px) / 2 + 28px)); bottom: clamp(12px, 2vw, 28px); z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.zr-freccia {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--bianco);
	border: var(--zr-bordo);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
	color: var(--wp--preset--color--inchiostro);
	cursor: pointer;
	transition: opacity 160ms ease-out, transform 160ms ease-out, background-color 160ms ease-out;
}
.zr-freccia:hover { background: var(--wp--preset--color--inchiostro); color: #fff; }
.zr-freccia svg { width: 18px; height: 18px; }
.zr-freccia[hidden] { display: grid; opacity: 0; transform: translateY(6px); pointer-events: none; }

/* ---------- Slogan a tutta pagina ---------- */
.zr-manifesto { background: var(--wp--preset--color--bianco); }
.zr-manifesto-testo {
	margin: 0 auto;
	text-align: center;
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--inchiostro);
	text-wrap: balance;
}
.zr-manifesto-testo span { color: var(--wp--preset--color--ciano-scuro); }

/* ---------- Comunità: livelli e badge ---------- */
.zr-comunita-griglia { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .zr-comunita-griglia { grid-template-columns: 1fr; } }
.zr-vantaggi { display: grid; gap: 1rem; }
.zr-vantaggio { display: grid; grid-template-columns: 40px 1fr; gap: 0.25rem 1rem; align-items: start; }
.zr-vantaggio h3 { margin: 0; font-size: 1.0625rem; }
.zr-vantaggio p { margin: 0; grid-column: 2; color: var(--wp--preset--color--grigio); font-size: 0.9375rem; }
.zr-icona { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--wp--preset--color--ciano-chiaro); border: 1px solid #CFFAFE; color: var(--wp--preset--color--ciano-scuro); }
.zr-icona svg { width: 20px; height: 20px; }

.zr-profilo-testa { display: flex; align-items: center; gap: 0.9rem; }
.zr-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--wp--preset--color--ciano) 0 68%, var(--wp--preset--color--bordo) 68% 100%); }
.zr-avatar span { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; color: var(--wp--preset--color--inchiostro); }
.zr-profilo-testa strong { display: block; font-size: 1.125rem; letter-spacing: -0.01em; }
.zr-barra-livello { height: 8px; border-radius: 999px; background: var(--wp--preset--color--canvas); border: var(--zr-bordo); overflow: hidden; margin-top: 1.25rem; }
.zr-barra-livello span { display: block; height: 100%; width: 68%; border-radius: 999px; background: linear-gradient(90deg, var(--wp--preset--color--ciano), var(--wp--preset--color--ciano-scuro)); }
.zr-barra-testo { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--wp--preset--color--grigio); }
.zr-badge-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.25rem; }
.zr-badge { text-align: center; padding: 0.85rem 0.5rem; border: var(--zr-bordo); border-radius: 10px; background: var(--wp--preset--color--canvas); font-size: 0.75rem; color: var(--wp--preset--color--grigio); line-height: 1.3; }
.zr-badge i { display: block; font-style: normal; font-size: 1.375rem; line-height: 1; margin-bottom: 0.4rem; color: var(--wp--preset--color--ciano-scuro); }
.zr-badge--bloccato { opacity: 0.45; }
.zr-livelli { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.zr-livelli span { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: var(--zr-bordo); color: var(--wp--preset--color--grigio); }
.zr-livelli .zr-attuale { background: var(--wp--preset--color--inchiostro); border-color: var(--wp--preset--color--inchiostro); color: #fff; }

/* ---------- Piè di pagina ---------- */
.zr-footer { border-top: var(--zr-bordo); background: var(--wp--preset--color--bianco); color: var(--wp--preset--color--grigio); font-size: 0.875rem; }
.zr-footer h4 { font-family: var(--zr-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--inchiostro); margin: 0 0 0.75rem; }
.zr-footer ul { list-style: none; margin: 0; padding: 0; }
.zr-footer li { margin: 0.4rem 0; }
.zr-footer a { color: var(--wp--preset--color--grigio); text-decoration: none; }
.zr-footer a:hover { color: var(--wp--preset--color--inchiostro); }
.zr-footer .zr-presto { font-size: 0.75rem; color: #94A3B8; }

/* ---------- Entrata allo scorrimento (solo con JS e senza riduzione del movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.zr-js .zr-entra { opacity: 0; transform: translateY(8px); transition: opacity 180ms ease-out, transform 180ms ease-out; transition-delay: var(--zr-ritardo, 0ms); }
	.zr-js .zr-entra.is-visibile { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .zr-cursore { animation: none; } }