/*
Theme Name:  Non buttare il PC
Template:    astra
Description: Tema figlio di Astra per la landing nonbuttareilpc.it. Da usare con il plugin NBP Diagnosi PC.
Author:      Antonio De Cosmi
Author URI:  https://antoniodecosmi.it
Version:     1.2.0
Text Domain: nonbuttareilpc
*/

:root {
	--nb-ink: #15233b;
	--nb-muted: #4e5c74;
	--nb-line: #c9d2dc;
	--nb-soft: #e8edf2;
	--nb-surface: #ffffff;
	--nb-tag: #f4c53d;
	--nb-go: #16643f;
	--nb-warn: #b3312a;
	--nb-wide: 72rem;
}

/* ---------- Base della landing ---------- */

body.nb-landing {
	margin: 0;
	background: var(--nb-surface);
	color: var(--nb-ink);
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.nb-landing *, .nb-landing *::before, .nb-landing *::after { box-sizing: border-box; }
.nb-landing img { max-width: 100%; height: auto; }
.nb-landing a { color: var(--nb-ink); text-underline-offset: .2em; }
.nb-landing a:focus-visible,
.nb-landing summary:focus-visible { outline: 3px solid var(--nb-tag); outline-offset: 3px; border-radius: 2px; }

.nb-wrap { max-width: var(--nb-wide); margin: 0 auto; padding: 0 1.25rem; }
.nb-narrow { max-width: 46rem; }

.nb-skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: .6rem 1rem;
	background: var(--nb-ink);
	color: #fff !important;
	border-radius: .3rem;
}
.nb-skip:focus { top: 1rem; }

/* ---------- Header ---------- */

.nb-top .nb-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.nb-brand {
	font-weight: 800;
	font-stretch: 125%;
	font-size: 1.1rem;
	text-decoration: none;
}
.nb-top-tel { font-weight: 600; white-space: nowrap; }

/* ---------- Hero ---------- */

.nb-hero { padding: clamp(2rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem); }
.nb-hero h1 {
	max-width: 11ch;
	margin: 0 0 1.5rem;
	font-size: clamp(2.7rem, 9vw, 6.25rem);
	font-weight: 800;
	font-stretch: 125%;
	line-height: .98;
	letter-spacing: -.015em;
	color: var(--nb-ink);
}
.nb-lead {
	max-width: 36ch;
	margin: 0 0 2rem;
	font-size: clamp(1.2rem, 2.3vw, 1.5rem);
	line-height: 1.45;
}
.nb-hero-note { margin: 1rem 0 0; color: var(--nb-muted); }

/* ---------- Pulsanti ---------- */

.nb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: .95rem 1.6rem;
	border: 2px solid var(--nb-ink);
	border-radius: .4rem;
	background: var(--nb-ink);
	color: #fff !important;
	font-size: 1.15rem;
	font-weight: 800;
	text-decoration: none;
}
.nb-btn--go { background: var(--nb-go); border-color: var(--nb-go); }
.nb-btn--ghost { background: transparent; color: var(--nb-ink) !important; }

/* ---------- Sezioni ---------- */

.nb-sec { padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.nb-sec h2 {
	max-width: 22ch;
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 4.2vw, 2.9rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.08;
	color: inherit;
}
.nb-sec p { max-width: 62ch; }
.nb-sec h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: inherit; }

/* Diagnosi */
.nb-diag { background: var(--nb-soft); }
.nb-diag .nb-wrap { display: grid; gap: 2rem; }
@media (min-width: 900px) {
	.nb-diag .nb-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
	.nb-diag-intro { position: sticky; top: 2rem; }
}

/* Windows 10 */
.nb-win10 { background: var(--nb-ink); color: #fff; }
.nb-win10 p { color: #dfe5ec; }

/* Pacchetti: il prezzo è un cartellino, come il risultato della diagnosi */
.nb-pack-list { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 2px solid var(--nb-ink); }
.nb-pack-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .75rem 2rem;
	align-items: center;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--nb-line);
}
.nb-pack-list p { margin: .3rem 0 0; color: var(--nb-muted); }
.nb-price {
	position: relative;
	justify-self: start;
	padding: .45rem 1rem .45rem 1.9rem;
	background: var(--nb-tag);
	font-weight: 800;
	white-space: nowrap;
	clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
}
.nb-price::before {
	content: "";
	position: absolute;
	top: 50%;
	left: .85rem;
	width: .5rem;
	height: .5rem;
	margin-top: -.25rem;
	border-radius: 50%;
	background: var(--nb-surface);
}
@media (max-width: 600px) {
	.nb-pack-list li { grid-template-columns: 1fr; }
}

/* Come funziona: è una sequenza, quindi numerata */
.nb-step-list {
	counter-reset: nbstep;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	margin: 2rem 0 0;
	padding: 0;
}
.nb-step-list li { counter-increment: nbstep; border-top: 2px solid var(--nb-ink); padding-top: 1rem; }
.nb-step-list li::before {
	content: counter(nbstep);
	display: block;
	margin-bottom: .4rem;
	font-size: 2.6rem;
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
}
.nb-step-list p { margin: .4rem 0 0; color: var(--nb-muted); }

/* Chi sono */
.nb-about { background: var(--nb-soft); }
.nb-about-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 760px) {
	.nb-about-grid { grid-template-columns: 18rem minmax(0, 1fr); }
}
.nb-about-img { display: block; width: 100%; max-width: 18rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .5rem; }

/* FAQ */
.nb-faq details { border-bottom: 1px solid var(--nb-line); }
.nb-faq details:first-of-type { border-top: 2px solid var(--nb-ink); }
.nb-faq summary {
	position: relative;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-size: 1.2rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	font-weight: 400;
}
.nb-faq details[open] summary::after { content: "\2212"; }
.nb-faq details p { margin: 0 0 1.2rem; }

/* Chiusura */
.nb-final { background: var(--nb-tag); }
.nb-final .nb-btn:focus-visible { outline-color: var(--nb-ink); }
.nb-final-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Footer ---------- */

.nb-foot { padding: 2.5rem 0 7rem; font-size: .95rem; color: var(--nb-muted); }
.nb-foot-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) {
	.nb-foot-grid { grid-template-columns: 1fr auto; }
	.nb-foot-grid > div:last-child { text-align: right; }
}
.nb-foot p { margin: 0 0 .4rem; }

/* ---------- Barra contatti su mobile ---------- */

.nb-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	gap: .5rem;
	padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
	background: var(--nb-surface);
	border-top: 1px solid var(--nb-line);
}
.nb-mobilebar a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	border-radius: .4rem;
	font-weight: 800;
	text-decoration: none;
}
.nb-mb-wa { background: var(--nb-go); color: #fff !important; }
.nb-mb-tel { border: 2px solid var(--nb-ink); }
@media (min-width: 900px) {
	.nb-mobilebar { display: none; }
	.nb-foot { padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.nb-landing) { scroll-behavior: smooth; }
}

/* ---------- Pagina assistenza remota ---------- */

.nb-remote h1 {
	max-width: 16ch;
	margin: 0 0 1rem;
	font-size: clamp(2.2rem, 6vw, 3.8rem);
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1.02;
}
.nb-remote .nb-step-list { grid-template-columns: 1fr; gap: 1.5rem; max-width: 46rem; }
.nb-remote .nb-step-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }
.nb-remote .nb-step-list li::before { grid-row: span 3; margin: 0; }
.nb-remote .nb-step-list .nb-btn { justify-self: start; margin-top: .9rem; }
.nb-rules {
	max-width: 46rem;
	margin: 3rem 0 0;
	padding: 1.5rem;
	background: var(--nb-soft);
	border-left: 6px solid var(--nb-go);
	border-radius: 0 .4rem .4rem 0;
}
.nb-rules h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.nb-rules ul { margin: 0; padding-left: 1.2rem; }
.nb-rules li + li { margin-top: .45rem; }
.nb-alert {
	max-width: 46rem;
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 2px solid var(--nb-warn);
	border-radius: .4rem;
	font-weight: 600;
}
.nb-remote .nb-step-list li > * { grid-column: 2; }