/*
Theme Name: AR News
Theme URI: https://www.arnews.it/
Author: Vanny Rosso
Description: Tema su misura per arnews.it: archivio e notizie sulla realtà aumentata e virtuale dal 2012. Copertine generate dal tema (niente immagini da caricare), sezione "Storia della realtà aumentata" per anno, nessun servizio esterno.
Version: 0.1.11
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: arnews
*/

:root {
	--arancio: #f7a742;
	--arancio-testo: #b86a14;
	--bruno: #8f5f2e;
	--grigio: #8e8e93;
	--notte: #15171c;
	--notte-2: #1f2229;
	--notte-linea: #2d313a;
	--nebbia: #a4a9b4;
	--carta: #fbf9f5;
	--carta-2: #f1ede6;
	--inchiostro: #1c1a17;
	--testo-grigio: #5c5a55;
	--linea: #e3ded5;
	--testo: 720px;
	--largo: 1160px;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 18px/1.65 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--arancio-testo); text-underline-offset: .18em; }
a:hover { color: var(--inchiostro); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p, ul, ol { margin: 0 0 1em; }
::selection { background: var(--arancio); 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; }
.stretto { max-width: var(--testo); margin-left: auto; margin-right: auto; }

/* Etichette in monospazio: categoria, anno, autore */
.eti { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-grigio); }
.eti a { color: inherit; text-decoration: none; }
.eti a:hover { color: var(--arancio-testo); }
.eti b { color: var(--arancio-testo); font-weight: 700; }

/* Intestazione */
.testa { position: sticky; top: 0; z-index: 10; background: rgba(21, 23, 28, .94); border-bottom: 1px solid var(--notte-linea); backdrop-filter: blur(8px); }
.admin-bar .testa { top: 32px; }
.testa .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.marchio { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marchio img { height: 46px; width: auto; display: block; }
.marchio:hover { color: #fff; }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { font-family: var(--mono); font-size: .85rem; color: var(--nebbia); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"], .nav .current-menu-item a { color: var(--arancio); }
.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: 68px; flex-direction: column; align-items: stretch; 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: 782px) { .admin-bar .testa { top: 46px; } }

/* Copertina generata: tinta per categoria (--h), mirino da realtà aumentata agli angoli, anno in filigrana */
.copertina { position: relative; overflow: hidden; display: block; aspect-ratio: 16 / 9; color: #fff; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1px, transparent 1.6px) 0 0 / 20px 20px, linear-gradient(135deg, hsl(var(--h) 62% 46%), hsl(calc(var(--h) + 28) 55% 24%)); }
.copertina::before, .copertina::after, .copertina__mirino::before, .copertina__mirino::after { content: ""; position: absolute; width: 14%; height: 24%; border: 3px solid rgba(255, 255, 255, .75); }
.copertina::before { top: 9%; left: 6%; border-right: 0; border-bottom: 0; }
.copertina::after { bottom: 9%; right: 6%; border-left: 0; border-top: 0; }
.copertina__mirino::before { top: 9%; right: 6%; border-left: 0; border-bottom: 0; }
.copertina__mirino::after { bottom: 9%; left: 6%; border-right: 0; border-top: 0; }
.copertina__anno { position: absolute; right: 10%; bottom: 2%; font-family: var(--mono); font-weight: 700; font-size: clamp(3.5rem, 14cqw, 8rem); line-height: 1; letter-spacing: -.05em; color: rgba(255, 255, 255, .18); }
.copertina__cat { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); max-width: 70%; font-family: var(--mono); font-size: clamp(.9rem, 2.6cqw, 1.3rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.copertina--foto { background: var(--notte-2); }
.copertina--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.copertina--foto::before, .copertina--foto::after, .copertina--foto .copertina__mirino::before, .copertina--foto .copertina__mirino::after { display: none; }

/* Schede */
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; container-type: inline-size; }
.scheda { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.scheda .copertina { border-radius: 10px; }
.scheda .copertina:hover { filter: brightness(1.06); }
.scheda h2, .scheda h3 { font-size: 1.15rem; margin: 0; }
.scheda h2 a, .scheda h3 a { color: var(--inchiostro); text-decoration: none; }
.scheda h2 a:hover, .scheda h3 a:hover { color: var(--arancio-testo); }
.scheda p { color: var(--testo-grigio); font-size: .95rem; margin: 0; }
.scheda--grande { grid-column: span 2; }
@media (max-width: 900px) { .griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .griglia { grid-template-columns: 1fr; } .scheda--grande { grid-column: auto; } }

/* Fasce */
section.fascia { padding: 56px 0; }
section.fascia--scura { background: var(--notte); color: #fff; }
.fascia__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.fascia__testa h2 { margin: 0; }
.fascia__testa a { font-family: var(--mono); font-size: .85rem; }

/* Home: apertura */
.apertura { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--notte); color: #fff; padding: 72px 0 64px; }
.apertura__griglia { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.apertura h1 { color: #fff; margin-bottom: .4em; }
.apertura .lead { color: var(--nebbia); font-size: 1.2rem; max-width: 36em; }
.apertura img { width: 100%; max-width: 360px; justify-self: center; }
.apertura .bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 900px) { .apertura__griglia { grid-template-columns: 1fr; } .apertura img { max-width: 220px; } .apertura { padding: 48px 0; } }

.bottone { display: inline-flex; align-items: center; gap: .5em; padding: 12px 20px; border-radius: 8px; font-family: var(--mono); font-size: .9rem; font-weight: 700; text-decoration: none; border: 1px solid var(--arancio); color: var(--notte); background: var(--arancio); transition: background .15s, color .15s; }
.bottone:hover { background: #ffbf6b; color: var(--notte); }
.bottone--vuoto { background: transparent; color: #fff; border-color: #4a4f5a; }
.bottone--vuoto:hover { background: #fff; color: var(--notte); border-color: #fff; }

/* Anni e categorie come etichette */
.chip-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-lista a { display: inline-block; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--linea); background: #fff; font-family: var(--mono); font-size: .85rem; color: var(--inchiostro); text-decoration: none; }
.chip-lista a:hover, .chip-lista a[aria-current="page"] { border-color: var(--arancio); color: var(--arancio-testo); }
.chip-lista small { color: var(--grigio); margin-left: .4em; }
.fascia--scura .chip-lista a { background: var(--notte-2); border-color: var(--notte-linea); color: var(--nebbia); }
.fascia--scura .chip-lista a:hover { color: var(--arancio); border-color: var(--arancio); }

/* Testate di pagine e archivi */
.pagina__testa { background: var(--notte); color: #fff; padding: 56px 0 48px; }
.pagina__testa h1 { color: #fff; margin: 0; max-width: 20em; }
.pagina__testa .eti { color: var(--nebbia); margin-bottom: 1em; }
.pagina__testa .eti b { color: var(--arancio); }
.pagina__testa .desc { color: var(--nebbia); max-width: 40em; margin: 1em 0 0; }
.contenuto { padding: 48px 0 64px; }

/* Articolo */
.articolo__testa { position: relative; overflow: hidden; color: #fff; padding: 72px 0 64px; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 1.6px) 0 0 / 20px 20px, linear-gradient(135deg, hsl(var(--h) 62% 40%), hsl(calc(var(--h) + 28) 55% 20%)); }
.articolo__testa--foto { background: var(--notte); }
.articolo__testa .wrap { position: relative; z-index: 1; }
.articolo__testa h1 { color: #fff; margin: 0 0 .5em; max-width: 18em; }
.articolo__testa .eti { color: rgba(255, 255, 255, .8); margin-bottom: 1.2em; }
.articolo__testa .eti b, .articolo__testa .eti a:hover { color: #fff; }
.articolo__testa .copertina__anno { right: 4%; bottom: -2%; font-size: clamp(5rem, 18vw, 16rem); color: rgba(255, 255, 255, .1); }
.articolo__testa::before, .articolo__testa::after { content: ""; position: absolute; width: 56px; height: 56px; border: 3px solid rgba(255, 255, 255, .5); }
.articolo__testa::before { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.articolo__testa::after { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }
.articolo__foto { margin: -32px auto 0; max-width: 900px; padding: 0 20px; position: relative; z-index: 1; }
.articolo__foto img { width: 100%; border-radius: 10px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
.articolo__firma { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.avviso { max-width: var(--testo); margin: 40px auto 0; padding: 14px 18px; border-left: 4px solid var(--arancio); background: var(--carta-2); border-radius: 0 8px 8px 0; font-size: .95rem; color: var(--testo-grigio); }
.avviso p { margin: 0; }

.testo { max-width: var(--testo); margin: 40px auto 0; }
.testo > :first-child { margin-top: 0; }
.testo h2 { margin-top: 1.5em; font-size: 1.5rem; }
.testo figure { margin: 1.5em 0; }
.testo figure.video { aspect-ratio: 16 / 9; }
.testo figure.video iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.testo figure.wp-block-image img { border-radius: 8px; }
.testo figure.size-small { max-width: 320px; }
.testo figcaption { font-size: .85rem; color: var(--testo-grigio); margin-top: .4em; }
.testo iframe:not(figure.video iframe) { max-width: 100%; }
.testo img.alignleft { float: left; margin: .3em 1.2em .6em 0; }
.testo img.alignright { float: right; margin: .3em 0 .6em 1.2em; }
.testo .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.testo blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--arancio); color: var(--testo-grigio); }

.articolo__piede { max-width: var(--testo); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--linea); }
.articolo__tag { margin-bottom: 16px; }
.prossimi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.prossimi a { display: block; text-decoration: none; color: var(--inchiostro); padding: 14px 16px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.prossimi a:hover { border-color: var(--arancio); }
.prossimi a span { display: block; font-family: var(--mono); font-size: .75rem; color: var(--grigio); margin-bottom: .3em; }
.prossimi a + a { text-align: right; }
@media (max-width: 560px) { .prossimi { grid-template-columns: 1fr; } .prossimi a + a { text-align: left; } }

/* Storia per anno */
.storia__anni { position: sticky; top: 68px; z-index: 5; background: var(--carta); padding: 12px 0; margin: 0 0 24px; border-bottom: 1px solid var(--linea); }
.admin-bar .storia__anni { top: 100px; }
.storia__anno { margin-top: 48px; }
.storia__anno h2 { font-family: var(--mono); font-size: 2.6rem; color: var(--arancio-testo); letter-spacing: -.04em; margin-bottom: .2em; }
.storia__anno h2 small { font-family: var(--sans); font-size: .95rem; color: var(--grigio); font-weight: 400; letter-spacing: 0; margin-left: .8em; }
.storia__lista { list-style: none; margin: 0; padding: 0; }
.storia__lista li { display: grid; grid-template-columns: 7ch 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.storia__lista time { font-family: var(--mono); font-size: .85rem; color: var(--grigio); }
.storia__lista a { color: var(--inchiostro); text-decoration: none; font-weight: 600; }
.storia__lista a:hover { color: var(--arancio-testo); }
.storia__lista .eti { display: block; margin-top: .2em; font-size: .72rem; }
@media (max-width: 560px) { .storia__lista li { grid-template-columns: 1fr; gap: 2px; } }

/* Ricerca */
.cerca { display: flex; gap: 8px; max-width: 480px; }
.cerca input[type="search"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; font-size: 1rem; background: #fff; }
.cerca button { padding: 11px 16px; border: 0; border-radius: 8px; background: var(--arancio); font: inherit; font-family: var(--mono); font-weight: 700; cursor: pointer; }
.piede .cerca input[type="search"] { background: var(--notte-2); border-color: var(--notte-linea); color: #fff; }

/* Paginazione */
.paginazione { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; font-family: var(--mono); font-size: .9rem; }
.paginazione .page-numbers { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 6px; text-decoration: none; color: var(--inchiostro); background: #fff; }
.paginazione .page-numbers.current { background: var(--arancio); border-color: var(--arancio); }
.paginazione .page-numbers.dots { border: 0; background: none; }

/* Piè di pagina */
.piede { background: var(--notte); color: var(--nebbia); padding: 48px 0 32px; margin-top: 64px; }
.piede__griglia { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.piede h3 { color: #fff; font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8em; }
.piede p { font-size: .95rem; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin: 0 0 .5em; }
.piede a { color: var(--nebbia); }
.piede a:hover { color: var(--arancio); }
.piede__fondo { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--notte-linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: .8rem; }
.piede__fondo ul { display: flex; flex-wrap: wrap; gap: 16px; }
.piede__fondo li { margin: 0; }
.piede__fondo button { background: none; border: 0; padding: 0; color: var(--nebbia); font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 800px) { .piede__griglia { grid-template-columns: 1fr; gap: 28px; } }

/* 404 e vuoto */
.vuoto { text-align: center; padding: 48px 0; color: var(--testo-grigio); }

/* Effetti 0.1.2: vetro, sfocatura, bagliori. Con prefers-reduced-motion niente movimento. */
.testa { background: rgba(21, 23, 28, .76); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom-color: rgba(255, 255, 255, .08); }
@media (max-width: 900px) { .nav { background: rgba(21, 23, 28, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } }

.apertura { position: relative; overflow: hidden; isolation: isolate; }
.apertura::before, .apertura::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.apertura::before { width: 460px; height: 460px; right: -80px; top: -140px; background: rgba(247, 167, 66, .38); }
.apertura::after { width: 380px; height: 380px; left: -120px; bottom: -180px; background: rgba(80, 130, 255, .26); }
.apertura img { padding: 26px; border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bottone { box-shadow: 0 6px 24px rgba(247, 167, 66, .35); transition: background .15s, color .15s, transform .2s, box-shadow .2s; }
.bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(247, 167, 66, .5); }
.bottone--vuoto { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bottone--vuoto:hover { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(255, 255, 255, .15); }

.scheda .copertina { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; box-shadow: 0 2px 6px rgba(28, 26, 23, .08); }
.scheda:hover .copertina { transform: translateY(-4px) scale(1.015); box-shadow: 0 18px 40px rgba(28, 26, 23, .22); filter: brightness(1.06); }
.copertina::before, .copertina::after, .copertina__mirino::before, .copertina__mirino::after { transition: transform .35s ease, border-color .35s ease; }
.scheda:hover .copertina::before, .scheda:hover .copertina__mirino::before { transform: translate(-4px, -4px); }
.scheda:hover .copertina::after, .scheda:hover .copertina__mirino::after { transform: translate(4px, 4px); }
.copertina__cat { padding: .35em .7em; border-radius: 8px; background: rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); }

section.fascia--scura { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(60% 120% at 85% 0%, rgba(247, 167, 66, .16), transparent 60%), var(--notte); }
.fascia--scura .chip-lista a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s, background .2s, border-color .2s, color .2s; }
.fascia--scura .chip-lista a:hover { transform: translateY(-2px); background: rgba(247, 167, 66, .14); }

.avviso { background: linear-gradient(135deg, rgba(247, 167, 66, .16), rgba(247, 167, 66, .05)); border: 1px solid rgba(247, 167, 66, .3); border-left: 4px solid var(--arancio); box-shadow: 0 8px 28px rgba(184, 106, 20, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
	.bottone, .scheda .copertina, .copertina::before, .copertina::after, .copertina__mirino::before, .copertina__mirino::after, .fascia--scura .chip-lista a { transition: none; }
	.bottone:hover, .scheda:hover .copertina, .fascia--scura .chip-lista a:hover { transform: none; }
	.scheda:hover .copertina::before, .scheda:hover .copertina__mirino::before, .scheda:hover .copertina::after, .scheda:hover .copertina__mirino::after { transform: none; }
}

/* 0.1.8: schede a vetro. Pannello semitrasparente su bagliori sfocati; la copertina sta dentro il pannello. */
section.fascia:not(.fascia--scura) { position: relative; overflow: hidden; isolation: isolate; }
section.fascia:not(.fascia--scura)::before, section.fascia:not(.fascia--scura)::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
section.fascia:not(.fascia--scura)::before { width: 520px; height: 520px; left: -160px; top: 10%; background: rgba(247, 167, 66, .30); }
section.fascia:not(.fascia--scura)::after { width: 480px; height: 480px; right: -140px; bottom: 4%; background: rgba(80, 130, 255, .20); }
.scheda { padding: 10px 10px 20px; border-radius: 16px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 30px rgba(28, 26, 23, .07); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.scheda > :not(.copertina) { margin-left: 8px; margin-right: 8px; }
.scheda .copertina { border-radius: 9px; }
.scheda:hover { background: rgba(255, 255, 255, .8); transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(28, 26, 23, .16); }
.scheda:hover .copertina { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .scheda { transition: none; } .scheda:hover { transform: none; } }

/* 0.1.10: nelle schede la categoria è una pillola, la data è testo normale sotto/accanto. */
.scheda .articolo__firma { align-items: center; gap: 6px 12px; text-transform: none; font-family: var(--sans); letter-spacing: 0; }
.scheda .articolo__firma b { display: inline-block; padding: .22em .8em; border-radius: 999px; background: rgba(184, 106, 20, .12); border: 1px solid rgba(184, 106, 20, .22); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; transition: background .2s, border-color .2s; }
.scheda .articolo__firma a:hover b { background: rgba(184, 106, 20, .22); border-color: rgba(184, 106, 20, .4); }
.scheda .articolo__firma time { font-size: .85rem; color: var(--testo-grigio); text-transform: lowercase; }