/* Top Records — stili di base del child theme.
   Le classi top-* vengono assegnate ai widget nei template (Avanzate › Classi CSS):
   le impostazioni fatte nell'editor Elementor hanno comunque la precedenza. */

:root {
	--top-ink: var(--e-global-color-topink, #141210);
	--top-paper: var(--e-global-color-toppaper, #EFE8DA);
	--top-accent: var(--e-global-color-topaccent, #E8502A);
	--top-dust: var(--e-global-color-topdust, #B8AE9F);
	--top-stone: var(--e-global-color-topstone, #5A5148);
	--top-line: var(--e-global-color-topline, #3A342D);
}

body {
	background: var(--top-paper);
	color: var(--top-ink);
	font-family: "Archivo", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--top-accent); color: var(--top-ink); }

/* Titoli condensati: font-stretch richiede la versione "wdth" di Archivo caricata dal tema. */
.top-display .elementor-heading-title,
.top-display.elementor-widget-theme-post-title .elementor-heading-title {
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

.top-eyebrow .elementor-heading-title,
.top-eyebrow p,
.top-eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Logo testuale con disco "TOP". */
.top-logo .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-stretch: 80%;
	letter-spacing: .04em;
}
.top-logo .elementor-heading-title::before {
	content: "TOP";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--top-accent);
	color: var(--top-ink);
	font-size: 15px;
	font-weight: 900;
	font-stretch: 75%;
	letter-spacing: 0;
}
.top-logo a { color: inherit; text-decoration: none; }

/* Pulsanti */
.top-btn .elementor-button {
	border-radius: 0;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	padding: 0 28px;
	font-weight: 800;
	font-size: 16px;
	transition: transform .15s ease, background-color .15s ease;
}
.top-btn .elementor-button:hover { transform: translateY(-2px); }
.top-btn--light .elementor-button { background: var(--top-paper); color: var(--top-ink); }
.top-btn--ink .elementor-button { background: var(--top-ink); color: var(--top-paper); }
.top-btn--accent .elementor-button { background: var(--top-accent); color: var(--top-ink); }
.top-btn--outline .elementor-button { background: transparent; color: var(--top-paper); border: 1px solid var(--top-paper); font-weight: 600; }
.top-btn--outline-ink .elementor-button { background: transparent; color: var(--top-ink); border: 1px solid var(--top-ink); font-weight: 600; }
.top-btn .elementor-button:focus-visible { outline: 3px solid var(--top-accent); outline-offset: 3px; }

/* Link testuali "→" */
.top-arrow-link a, .top-arrow-link .elementor-heading-title a { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; color: inherit; }

/* Menu nell'header */
.top-nav .elementor-nav-menu--main .elementor-item {
	color: var(--top-paper);
	font-weight: 600;
	font-size: 15px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 14px;
}
.top-nav .elementor-nav-menu--main .elementor-item:hover,
.top-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--top-accent); }
.top-nav .elementor-menu-toggle { color: var(--top-paper); background: transparent; }
.top-nav .elementor-nav-menu--dropdown { background: var(--top-ink); }
.top-nav .elementor-nav-menu--dropdown a { color: var(--top-paper); }

/* Foto d'archivio dell'hero */
.top-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.15) contrast(1.05); }

/* Fascia etichette */
.top-labels .elementor-heading-title { font-stretch: 75%; }

/* Riquadro "caso" */
.top-case { border: 1px solid var(--top-line); }

/* Testi su fondo inchiostro */
.top-on-ink, .top-on-ink p { color: var(--top-paper); }
.top-on-ink .top-muted, .top-on-ink .top-muted p { color: var(--top-dust); }
.top-muted p { color: var(--top-stone); }

/* Footer */
.top-footer a { color: var(--top-paper); text-decoration: none; }
.top-footer a:hover { color: var(--top-accent); }
.top-footer p { margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
	.top-btn .elementor-button { transition: none; }
	.top-btn .elementor-button:hover { transform: none; }
}