/*
 * SevenHills — base
 *
 * Reset, primitive di layout, tipografia, bottoni, stati di focus.
 * I token (:root e .sh-scheme--dark) e le classi .sh-t-* sono iniettati
 * inline da inc/design-tokens-sync.php: qui non compare alcun esadecimale.
 */

/* ==== 1. Reset ==== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--sh-bg);
	color: var(--sh-ink);
	font-family: var(--sh-font-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--sh-space-sm);
	font-family: var(--sh-font-display);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

p, ul, ol {
	margin-block: 0 var(--sh-space-sm);
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

ul[class],
ol[class] {
	list-style: none;
	padding-inline-start: 0;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--sh-line);
	margin-block: var(--sh-space-lg);
}

/* ==== 2. Schemi di colore ==== */

/*
 * Un contenitore .sh-scheme ridefinisce i ruoli semantici per il proprio
 * sottoalbero. --sh-c-* (palette grezza) resta invariato: serve dove un
 * colore deve restare fisso a prescindere dallo schema.
 */

.sh-scheme {
	background-color: var(--sh-bg);
	color: var(--sh-ink);
}

/*
 * Dentro una banda alternata il «fondo» È il fondo alternato: si ridefinisce
 * il ruolo, non solo il colore della banda. Altrimenti un componente che
 * dipinge var(--sh-bg) — la banda statistiche, la banda CTA — stenderebbe il
 * bianco sopra il grigio e la banda sparirebbe.
 */
.sh-scheme--alt {
	--sh-bg: var(--sh-bg-alt);
	background-color: var(--sh-bg-alt);
}

/* ==== 3. Primitive di layout ==== */

.sh-container {
	width: 100%;
	max-width: var(--sh-container);
	margin-inline: auto;
	padding-inline: var(--sh-gutter-mobile);
}

.sh-container--narrow {
	max-width: var(--sh-container-narrow);
}

@media (min-width: 768px) {
	.sh-container {
		padding-inline: var(--sh-gutter);
	}
}

.sh-section {
	padding-block: var(--sh-space-section);
}

.sh-stack > * + * {
	margin-block-start: var(--sh-space-sm);
}

.sh-grid {
	display: grid;
	gap: var(--sh-space-md);
}

/*
 * I componenti NON impostano mai una propria max-width: riempiono il
 * contenitore. La larghezza la danno .sh-container nei template PHP o il
 * container di Elementor. Senza questa regola il contenuto rientra due
 * volte e non coincide con i mockup.
 */

/* ==== 4. Tipografia di servizio ==== */

/*
 * Tipografia da .sh-t-eyebrow, generata dai token: qui solo colore e
 * spaziatura, che non appartengono alla scala.
 */
.sh-eyebrow {
	display: block;
	margin-block-end: var(--sh-space-2xs);
	color: var(--sh-red-text);
}

/* Riga di titolo colorata: il rosso può stare su qualunque riga. */
.sh-line--white { color: var(--sh-c-white); }
.sh-line--black { color: var(--sh-c-black); }
.sh-line--red   { color: var(--sh-red); }
.sh-line--ink   { color: var(--sh-ink); }

/*
 * Filetto rosso corto sotto i titoli di sezione; con --top va sopra.
 * Il content va dato a UN solo pseudo-elemento per variante: assegnarlo a
 * entrambi disegna due filetti.
 */
.sh-rule::after,
.sh-rule--top::before {
	display: block;
	width: 60px;
	height: 2px;
	background-color: var(--sh-red);
	content: "";
}

.sh-rule::after {
	margin-block-start: var(--sh-space-sm);
}

.sh-rule--top::before {
	margin-block-end: var(--sh-space-sm);
}

.sh-rule--top::after {
	content: none;
}

.sh-rule--center::after,
.sh-rule--center::before {
	margin-inline: auto;
}

.sh-muted {
	color: var(--sh-muted);
}

/* ==== 5. Bottoni ==== */

.sh-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sh-space-2xs);
	padding: 0.875rem var(--sh-space-md);
	border: 1px solid transparent;
	border-radius: var(--sh-radius-none);
	font-family: var(--sh-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--sh-motion-base) var(--sh-motion-ease),
		color var(--sh-motion-base) var(--sh-motion-ease),
		border-color var(--sh-motion-base) var(--sh-motion-ease);
}

.sh-btn__icon {
	flex: none;
	transition: transform var(--sh-motion-base) var(--sh-motion-ease);
}

.sh-btn:hover .sh-btn__icon {
	transform: translateX(3px);
}

.sh-btn--primary {
	background-color: var(--sh-red);
	color: var(--sh-c-white);
}

.sh-btn--primary:hover,
.sh-btn--primary:focus-visible {
	background-color: var(--sh-red-hover);
}

.sh-btn--outline {
	border-color: currentColor;
	color: var(--sh-ink);
}

.sh-btn--outline:hover,
.sh-btn--outline:focus-visible {
	background-color: var(--sh-ink);
	color: var(--sh-bg);
}

.sh-btn--ghost {
	border-color: var(--sh-red);
	color: var(--sh-red-text);
}

.sh-btn--ghost:hover,
.sh-btn--ghost:focus-visible {
	background-color: var(--sh-red);
	color: var(--sh-c-white);
}

.sh-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2xs);
	margin-block-start: var(--sh-space-md);
}

/* ==== 6. Pill di filtro ==== */

/*
 * Primitiva condivisa: la usano il widget griglia auto, la galleria e i
 * filtri d'archivio. Negli archivi sono link, nei widget sono bottoni.
 */
.sh-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem var(--sh-space-sm);
	/* Il bordo è ciò che rende riconoscibile il controllo: serve il 3:1 del token dedicato. */
	border: 1px solid var(--sh-control-border);
	background: none;
	color: var(--sh-ink);
	font-family: var(--sh-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--sh-motion-fast) var(--sh-motion-ease),
		border-color var(--sh-motion-fast) var(--sh-motion-ease),
		color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-pill:hover {
	border-color: var(--sh-red);
	color: var(--sh-red-text);
}

.sh-pill--active,
.sh-pill[aria-pressed="true"],
.sh-pill[aria-current="true"] {
	background-color: var(--sh-red);
	border-color: var(--sh-red);
	color: var(--sh-c-white);
}

/* ==== 7. Focus e accessibilità ==== */

:focus-visible {
	outline: 2px solid var(--sh-focus);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sh-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--sh-space-sm);
	z-index: 999;
	padding: var(--sh-space-2xs) var(--sh-space-sm);
	background-color: var(--sh-red);
	color: var(--sh-c-white);
	font-weight: 500;
	text-decoration: none;
	transition: inset-block-start var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-skip-link:focus {
	inset-block-start: var(--sh-space-2xs);
}

/* Contenuto Elementor rimasto senza chi lo renda. */
.sh-orphan {
	padding-block: var(--sh-space-lg);
}

.sh-orphan__text {
	color: var(--sh-muted);
}

.sh-orphan__admin {
	padding: var(--sh-space-sm);
	border: 1px dashed var(--sh-red);
	color: var(--sh-ink);
	font-size: 0.875rem;
}

/* Suggerimento di modifica, visibile solo a chi può modificare il contenuto. */
.sh-edit-hint {
	padding: var(--sh-space-sm);
	border: 1px dashed var(--sh-red);
	color: var(--sh-ink);
	font-size: 0.875rem;
}

.sh-edit-hint a {
	color: var(--sh-red-text);
}

/* Avviso mostrato solo dentro l'editor Elementor, mai in pagina. */
.sh-editor-notice {
	padding: var(--sh-space-sm);
	border: 1px dashed var(--sh-red);
	color: var(--sh-red-text);
	font-size: 0.875rem;
	text-align: center;
}

/* ==== 8. Media ==== */

.sh-media {
	position: relative;
	overflow: hidden;
	background-color: var(--sh-bg-alt);
}

.sh-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* aspect-ratio su ogni box media: è la difesa contro il CLS. */
.sh-media--3-2  { aspect-ratio: 3 / 2; }
.sh-media--4-3  { aspect-ratio: 4 / 3; }
.sh-media--16-9 { aspect-ratio: 16 / 9; }
.sh-media--portrait { aspect-ratio: 3 / 4; }

.sh-icon {
	flex: none;
}

/* ==== 9. Movimento ridotto ==== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==== Difesa dal colore dei link del kit Elementor ====
 *
 * «Impostazioni sito → Tipografia → Link» genera `.elementor-kit-N a`, che
 * ha la stessa forza dei selettori del tema e si carica DOPO base.css e
 * layout.css: a parità vince il kit, e con un link nero footer e bottoni
 * sparivano sul fondo scuro. Le regole qui ripetono la classe (o il
 * contenitore) solo per pesare di più: i colori sono quelli di sopra.
 */
.sh-btn.sh-btn--primary {
	color: var(--sh-c-white);
}

.sh-btn.sh-btn--outline {
	color: var(--sh-ink);
}

.sh-btn.sh-btn--outline:hover,
.sh-btn.sh-btn--outline:focus-visible {
	color: var(--sh-bg);
}

.sh-btn.sh-btn--ghost {
	color: var(--sh-red-text);
}

.sh-btn.sh-btn--ghost:hover,
.sh-btn.sh-btn--ghost:focus-visible {
	color: var(--sh-c-white);
}

.sh-pill.sh-pill {
	color: var(--sh-ink);
}

.sh-pill.sh-pill:hover {
	color: var(--sh-red-text);
}

.sh-pill.sh-pill--active,
.sh-pill.sh-pill[aria-pressed="true"],
.sh-pill.sh-pill[aria-current="true"] {
	color: var(--sh-c-white);
}