/*
Theme Name: Vanny Rosso
Theme URI: https://www.vannyrosso.it/
Author: Vanny Rosso
Description: Tema su misura per vannyrosso.it: siti e applicazioni web a Pesaro. Stile "code" (logo VANNY●ROSSO in monospazio, terminale in home), leggero, senza servizi esterni, contatti solo WhatsApp ed email.
Version: 0.7.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vannyrosso
*/

@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--rosso: #ff5c5c;
	--rosso-testo: #d63a3a;
	--notte: #0e1014;
	--notte-2: #161a21;
	--notte-linea: #262c36;
	--nebbia: #9aa3b2;
	--carta: #f7f6f3;
	--carta-2: #efede8;
	--inchiostro: #14161b;
	--grigio: #5a5f6b;
	--linea: #e2dfd8;
	--wa: #1f8f4e;
	--testo: 720px;
	--largo: 1160px;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--griglia: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 18px/1.65 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--rosso-testo); text-underline-offset: .18em; }
a:hover { color: var(--inchiostro); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-family: var(--mono); letter-spacing: 0; }
p, ul, ol { margin: 0 0 1em; }
code, pre { font-family: var(--mono); }
::selection { background: var(--rosso); color: #fff; }
.sr-only { position: absolute; left: -9999px; }
.sr-only:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }
.wrap { max-width: var(--largo); margin: 0 auto; padding: 0 20px; }

/* Logo: VANNY●ROSSO */
.marchio { display: inline-flex; align-items: center; gap: .55em; font-family: var(--mono); font-weight: 700; font-size: .95rem; letter-spacing: .32em; color: #fff; text-decoration: none; white-space: nowrap; }
.marchio span:last-child { margin-right: -.32em; }
.marchio:hover { color: #fff; }
.marchio__punto { width: .78em; height: .78em; border-radius: 50%; background: var(--rosso); transition: box-shadow .3s; }
.marchio:hover .marchio__punto { box-shadow: 0 0 0 6px rgba(255, 92, 92, .18); }

/* Intestazione */
.top { position: sticky; top: 0; z-index: 10; background: rgba(14, 16, 20, .92); border-bottom: 1px solid var(--notte-linea); backdrop-filter: blur(8px); }
.admin-bar .top { top: 32px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.nav { display: flex; gap: 26px; }
.nav a { font-family: var(--mono); font-size: .88rem; color: var(--nebbia); text-decoration: none; white-space: nowrap; }
.nav a::before { content: "./"; color: #4a515e; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"], .nav .current-menu-item a { color: #fff; }
.nav a:hover::before, .nav a[aria-current="page"]::before { color: var(--rosso); }
.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; }

@media (max-width: 900px) {
	.menu-btn { display: block; }
	.nav { display: none; position: absolute; left: 0; right: 0; top: 66px; flex-direction: column; gap: 0; background: var(--notte); border-bottom: 1px solid var(--notte-linea); padding: 8px 20px 18px; }
	.nav a { padding: 12px 0; font-size: 1rem; }
	.menu-aperto .nav { display: flex; }
}
@media (max-width: 480px) { .marchio { font-size: .82rem; letter-spacing: .26em; } }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }

/* Testate scure: apertura della home e titolo delle pagine */
section.apertura, .pagina__testa { background: var(--griglia), var(--notte); color: #fff; }
section.apertura { padding: 88px 0 96px; }
.apertura__griglia { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.apertura h1 { color: #fff; }
.apertura .lead { color: var(--nebbia); }
@media (max-width: 900px) { .apertura__griglia { grid-template-columns: 1fr; gap: 40px; } section.apertura { padding: 56px 0 64px; } }

.pagina__testa { padding: 64px 0 56px; }
.pagina__testa h1 { max-width: var(--testo); color: #fff; margin: 0; }
.pagina__percorso { font-family: var(--mono); font-size: .85rem; color: var(--nebbia); margin: 0 0 .9em; }
.pagina__percorso b { color: var(--rosso); font-weight: 400; }

.occhiello { font-family: var(--mono); font-size: .85rem; color: var(--rosso); margin-bottom: 1.1em; }
.occhiello::before { content: "// "; opacity: .6; }
.lead { font-size: 1.22rem; color: var(--grigio); max-width: 38em; }

/* Terminale */
.terminale { background: #0a0c0f; border: 1px solid var(--notte-linea); border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); overflow: hidden; }
.terminale__barra { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--notte-linea); background: var(--notte-2); }
.terminale__barra i { width: 11px; height: 11px; border-radius: 50%; background: #3a404b; }
.terminale__barra i:first-child { background: var(--rosso); }
.terminale__barra span { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--nebbia); }
.terminale__testo { padding: 22px 22px 24px; font-family: var(--mono); font-size: .86rem; line-height: 1.9; color: #e6e8ec; }
.t-riga { display: block; }
.t-riga--voce { display: grid; grid-template-columns: 11ch 1fr; gap: 1ch; padding-left: 2ch; }
.t-riga--fine { margin-top: 1.9em; }
.t-prompt { color: var(--rosso); }
.t-cmd { color: #fff; font-weight: 700; }
.t-desc { color: var(--nebbia); }
.t-cursore { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--rosso); animation: lampeggia 1.1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t-cursore { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 480px) { .terminale__testo { font-size: .78rem; padding: 18px 16px; } .t-riga--voce { grid-template-columns: 1fr; gap: 0; margin-bottom: .4em; line-height: 1.6; } }

/* Testo delle pagine: le sezioni vanno a tutta larghezza, il resto in colonna */
.testo { padding-bottom: 24px; }
.testo > :not(section) { max-width: var(--testo); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.testo > :not(section):first-child { margin-top: 56px; }
.testo h2 { margin-top: 1.6em; }
.stretto:not(.wrap), .wrap.stretto > * { max-width: var(--testo); }

section.fascia { padding: 64px 0; }
section.fascia--velo { background: radial-gradient(rgba(20, 22, 27, .08) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--carta-2); }
section h2 { margin-top: 0; }
.pagina__testa + .testo > section.fascia:first-child { padding-top: 64px; }

/* Home: sezioni numerate come righe di codice */
.home .testo { counter-reset: sezione; }
.home section.fascia { padding: 28px 0 44px; }
.home .fascia > .wrap > h2 { counter-increment: sezione; }
.home .fascia > .wrap > h2::before { content: counter(sezione, decimal-leading-zero) " /"; display: block; font-family: var(--mono); font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--rosso-testo); margin-bottom: .8em; }

/* Pulsanti */
.contatti { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.bottone { display: inline-flex; align-items: center; gap: .6em; padding: 13px 20px; border-radius: 8px; font-family: var(--mono); font-size: .9rem; font-weight: 700; text-decoration: none; border: 1px solid var(--inchiostro); color: var(--inchiostro); background: transparent; transition: background .15s, color .15s, border-color .15s; }
.bottone::after { content: "→"; transition: transform .15s; }
.bottone:hover { background: var(--inchiostro); color: var(--carta); }
.bottone:hover::after { transform: translateX(3px); }
.bottone--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.bottone--wa:hover { background: #17733e; border-color: #17733e; color: #fff; }
.apertura .bottone--secondario, .piede__invito .bottone--secondario { border-color: #3a404b; color: #fff; }
.apertura .bottone--secondario:hover, .piede__invito .bottone--secondario:hover { background: #fff; color: var(--inchiostro); }

/* Schede e griglie */
.griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
@media (min-width: 1000px) { .griglia { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 600px) { .griglia { grid-template-columns: 1fr; } }
.scheda { position: relative; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 26px 24px 24px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.scheda:hover { border-color: var(--rosso); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20, 22, 27, .35); }
.scheda h3 { margin-bottom: .6em; }
.scheda h3::before { content: "> "; color: var(--rosso); }
.scheda h3 a { color: var(--inchiostro); text-decoration: none; }
.scheda h3 a::after { content: ""; position: absolute; inset: 0; }
.scheda p { color: var(--grigio); font-size: .97rem; }
.scheda p:last-child, .scheda ul:last-child { margin-bottom: 0; }
.scheda ul { padding-left: 1.1em; }

.passi { counter-reset: passo; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 36px; }
.passi li { counter-increment: passo; border-top: 1px solid var(--inchiostro); padding-top: 16px; color: var(--grigio); }
.passi li strong { color: var(--inchiostro); }
.passi li::before { content: "step_" counter(passo, decimal-leading-zero); display: block; font-family: var(--mono); font-size: .8rem; color: var(--rosso-testo); margin-bottom: .5em; }

/* Home, "Cosa faccio": finestre di editor col nome del file e i numeri di riga */
.griglia--editor .scheda { background: #0f1217; border-color: var(--notte-linea); padding: 0 18px 22px 52px; overflow: hidden; }
.griglia--editor .scheda:hover { border-color: var(--rosso); box-shadow: 0 18px 40px -22px rgba(255, 92, 92, .55); }
.griglia--editor .scheda::before { content: attr(data-file); display: block; margin: 0 -18px 18px -52px; padding: 9px 14px 9px 62px; font-family: var(--mono); font-size: .74rem; color: var(--nebbia); border-bottom: 1px solid var(--notte-linea); background: radial-gradient(circle, var(--rosso) 0 4px, transparent 4.5px) 10px 50% / 12px 12px no-repeat, radial-gradient(circle, #3a404b 0 4px, transparent 4.5px) 26px 50% / 12px 12px no-repeat, radial-gradient(circle, #3a404b 0 4px, transparent 4.5px) 42px 50% / 12px 12px no-repeat, var(--notte-2); }
.griglia--editor .scheda::after { content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; position: absolute; left: 0; top: 37px; bottom: 0; width: 36px; padding: 18px 8px 0 0; text-align: right; font-family: var(--mono); font-size: .72rem; line-height: 1.62rem; color: #3a404b; border-right: 1px solid var(--notte-linea); pointer-events: none; }
.griglia--editor .scheda h3 a { color: #fff; }
.griglia--editor .scheda h3::before { content: "fn "; color: var(--rosso); }
.griglia--editor .scheda h3::after { content: " {"; color: var(--nebbia); font-weight: 400; }
.griglia--editor .scheda p { color: var(--nebbia); position: relative; padding-bottom: 1.6em; }
.griglia--editor .scheda p::after { content: "}"; position: absolute; left: 0; bottom: 0; font-family: var(--mono); color: var(--nebbia); }

/* Home, "Perché lavorare con me": il comando in testa a ogni scheda */
.griglia--cmd .scheda { border-left: 3px solid var(--rosso); }
.griglia--cmd .scheda::before { content: "$ " attr(data-cmd); display: block; font-family: var(--mono); font-size: .78rem; color: var(--rosso-testo); background: var(--carta-2); margin: -26px -24px 18px; padding: 9px 24px; border-bottom: 1px solid var(--linea); border-radius: 0 12px 0 0; }
.griglia--cmd .scheda h3::before { content: "✓ "; color: var(--wa); }

/* Home, "Alcuni lavori": percorso del progetto */
.griglia--repo .scheda::before { content: "~/lavori/" attr(data-file); display: block; font-family: var(--mono); font-size: .72rem; color: var(--grigio); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--linea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.griglia--repo .scheda h3::before { content: "● "; color: var(--rosso); }
/* Schede a caso (assets/js/tema.js): senza JS restano le prime 4 */
.griglia[data-casuali]:not(.mescolata) > .scheda:nth-child(n+5), .griglia[data-casuali] > .scheda--nascosta { display: none; }

/* Servizi: un blocco per servizio */
.servizio { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 48px 0; border-top: 1px solid var(--linea); }
.servizio:first-of-type { border-top: 0; }
.servizio h2 { font-size: 1.5rem; }
.servizio h2::before { content: "#"; font-family: var(--mono); color: var(--rosso); margin-right: .3em; font-weight: 400; }
.servizio ul { padding-left: 0; list-style: none; }
.servizio li { padding-left: 1.6em; position: relative; margin-bottom: .4em; }
.servizio li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--rosso-testo); }
@media (max-width: 760px) { .servizio { grid-template-columns: 1fr; gap: 8px; } }

/* Lavori: casi studio */
.caso { position: relative; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 0 30px 28px; margin: 0 0 20px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.caso:hover { border-color: var(--rosso); box-shadow: 0 14px 30px -18px rgba(20, 22, 27, .35); }
.caso::before { content: "~/lavori/" attr(data-file); display: block; margin: 0 -30px 24px; padding: 10px 30px 10px 76px; font-family: var(--mono); font-size: .76rem; color: var(--grigio); border-bottom: 1px solid var(--linea); background: radial-gradient(circle, var(--rosso) 0 4px, transparent 4.5px) 22px 50% / 12px 12px no-repeat, radial-gradient(circle, #cfcac1 0 4px, transparent 4.5px) 38px 50% / 12px 12px no-repeat, radial-gradient(circle, #cfcac1 0 4px, transparent 4.5px) 54px 50% / 12px 12px no-repeat, var(--carta-2); }
.caso h2 { font-size: 1.6rem; margin-bottom: .3em; }
.caso dt::after { content: ":"; }
.caso__meta { font-family: var(--mono); font-size: .82rem; color: var(--grigio); }
.caso dl { display: grid; grid-template-columns: 10em 1fr; gap: 10px 24px; margin: 20px 0 0; }
.caso dt { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rosso-testo); padding-top: .35em; }
.caso dd { margin: 0; }
@media (max-width: 600px) { .caso dl { grid-template-columns: 1fr; } .caso dd { margin-bottom: 10px; } }

/* Domande frequenti */
.faq details { border-bottom: 1px solid var(--linea); padding: 18px 0; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; gap: .8em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--mono); color: var(--rosso-testo); width: 1em; flex: none; }
.faq details[open] summary::before { content: "−"; }
.faq details p { margin: .6em 0 0 1.8em; color: var(--grigio); }

/* Due colonne: testo e finestra di codice (Chi sono, Contatti) */
.affianco { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.affianco__testo > :first-child { margin-top: 0; }
.affianco .affianco__testo > .codice { position: static; margin: 28px 0 44px; }
.affianco .codice { position: sticky; top: 96px; }
/* Chi sono: vanny.json e le foto, una sotto l'altra (non fisse: insieme sono più alte dello schermo) */
.affianco__lato { display: grid; gap: 20px; }
.affianco .affianco__lato .codice { position: static; }
@media (max-width: 900px) { .affianco { grid-template-columns: 1fr; gap: 36px; } .affianco .codice { position: static; } }
.lista-plus { padding-left: 0; list-style: none; }
.lista-plus li { padding-left: 1.6em; position: relative; margin-bottom: .6em; }
.lista-plus li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--rosso-testo); }
.nota { font-size: .95rem; color: var(--grigio); margin-top: 24px; }
.coordinate { font-family: var(--mono); font-size: .8rem; color: var(--rosso-testo); }

/* Finestra di codice con numeri di riga e colori: chiavi, testi, numeri, commenti */
.codice { background: #0f1217; border: 1px solid var(--notte-linea); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7); }
.codice::before { content: attr(data-file); display: block; padding: 10px 14px 10px 62px; font-family: var(--mono); font-size: .75rem; color: var(--nebbia); border-bottom: 1px solid var(--notte-linea); background: radial-gradient(circle, var(--rosso) 0 4px, transparent 4.5px) 10px 50% / 12px 12px no-repeat, radial-gradient(circle, #3a404b 0 4px, transparent 4.5px) 26px 50% / 12px 12px no-repeat, radial-gradient(circle, #3a404b 0 4px, transparent 4.5px) 42px 50% / 12px 12px no-repeat, var(--notte-2); }
.codice ol { counter-reset: riga; list-style: none; margin: 0; padding: 16px 16px 18px 0; font-family: var(--mono); font-size: .8rem; line-height: 1.85; color: #e6e8ec; }
.codice li { counter-increment: riga; position: relative; padding-left: 56px; white-space: pre-wrap; min-height: 1.85em; }
.codice li::before { content: counter(riga); position: absolute; left: 0; width: 40px; text-align: right; color: #3a404b; }
.codice b { color: #ff8a8a; font-weight: 400; }
.codice i { color: #9fd8a8; font-style: normal; }
.codice u { color: #f2c46d; text-decoration: none; }
.codice em { color: var(--nebbia); font-style: italic; }
/* Chi sono: le ultime 3 foto di Instagram sotto vanny.json */
.foto-ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 14px 0; }
.foto-ig a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; border: 1px solid var(--notte-linea); }
.foto-ig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.foto-ig a:hover img { transform: scale(1.05); }
.foto-ig__link { margin: 0; padding: 12px 14px 14px; font-family: var(--mono); font-size: .78rem; }
.foto-ig__link a { color: var(--nebbia); text-decoration: none; }
.foto-ig__link a:hover { color: var(--rosso); }
@media (max-width: 480px) { .codice ol { font-size: .74rem; } .codice li { padding-left: 42px; } .codice li::before { width: 30px; } }

/* Privacy e Cookie: un documento .md */
.testo--doc { max-width: 880px; margin: 48px auto 72px; padding: 0 0 12px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.testo--doc::before { content: "~/" attr(data-file); display: block; padding: 10px 24px 10px 76px; margin-bottom: 8px; font-family: var(--mono); font-size: .76rem; color: var(--grigio); border-bottom: 1px solid var(--linea); background: radial-gradient(circle, var(--rosso) 0 4px, transparent 4.5px) 22px 50% / 12px 12px no-repeat, radial-gradient(circle, #cfcac1 0 4px, transparent 4.5px) 38px 50% / 12px 12px no-repeat, radial-gradient(circle, #cfcac1 0 4px, transparent 4.5px) 54px 50% / 12px 12px no-repeat, var(--carta-2); }
.testo--doc > :not(section) { max-width: none; padding-left: 40px; padding-right: 40px; }
.testo--doc > :not(section):first-child { margin-top: 0; }
.testo--doc h2 { font-size: 1.35rem; margin-top: 1.8em; }
.testo--doc h2::before { content: "## "; font-family: var(--mono); font-weight: 400; color: var(--rosso-testo); }
.testo--doc h3 { font-size: 1rem; }
.testo--doc h3::before { content: "### "; font-weight: 400; color: var(--rosso-testo); }
.testo--doc table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.testo--doc th, .testo--doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.testo--doc th { font-family: var(--mono); font-size: .78rem; color: var(--grigio); font-weight: 400; }
@media (max-width: 600px) { .testo--doc { margin: 24px 12px 48px; } .testo--doc > :not(section) { padding-left: 20px; padding-right: 20px; } .testo--doc table { display: block; overflow-x: auto; } }

/* Piè di pagina */
.piede { background: var(--notte); }
.piede__invito { background: var(--griglia), var(--notte); color: #fff; padding: 80px 0; }
.piede__invito h2 { color: #fff; }
.piede__invito h2::before { content: "$ "; font-family: var(--mono); color: var(--rosso); font-weight: 400; }
.piede__invito p { color: var(--nebbia); }
.piede__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 28px; padding-bottom: 36px; border-top: 1px solid var(--notte-linea); font-family: var(--mono); font-size: .78rem; color: var(--nebbia); }
.piede__fondo p { margin: 0; }
.piede__fondo ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.piede__fondo a, .piede__fondo button { color: var(--nebbia); font-family: var(--mono); font-size: .78rem; }
.piede__fondo a:hover { color: #fff; }
.marchio--piede { font-size: .8rem; }