/* =============================================================
   Davide Masera — override su Canvas
   Sovrascrive css/custom.css del template.
   Tutto ciò che è specifico del sito sta qui: non toccare style.css.
   ============================================================= */

:root {
	--dm-ink:        #141a21;
	--dm-ink-soft:   #2a343f;
	--dm-surface:    #f1f3f5;
	--dm-line:       #dde2e6;
	--dm-accent:     #0f6e8c;
	--dm-accent-dk:  #0b5670;
	--dm-amber:      #c08a2e;
	--dm-body:       "Montserrat", sans-serif;
	--dm-display:    "Nova Square", sans-serif;
}

/* --- Tipografia ------------------------------------------------ */

body {
	font-family: var(--dm-body);
}

.primary-menu .menu-link,
.button,
.btn {
	font-family: var(--dm-display);
	text-transform: none;
	font-size:1rem;
}

h1, h2, h3, h4, h5, h6,
.heading-block h1,
.heading-block h2,
.heading-block h3 {
	font-family: var(--dm-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dm-ink);
}

body {
	color: var(--dm-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

p { max-width: 68ch; }
.text-center p,
.mx-auto p { margin-left: auto; margin-right: auto; }

/* Colore d'accento del tema al posto del turchese Canvas */
.text-primary,
a { color: var(--dm-accent); }
a:hover { color: var(--dm-accent-dk); }

.btn-primary,
.button.button-primary {
	background-color: var(--dm-accent);
	border-color: var(--dm-accent);
}
.btn-primary:hover,
.button.button-primary:hover {
	background-color: var(--dm-accent-dk);
	border-color: var(--dm-accent-dk);
}
.btn-outline-primary {
	color: var(--dm-accent);
	border-color: var(--dm-accent);
}
.btn-outline-primary:hover {
	background-color: var(--dm-accent);
	border-color: var(--dm-accent);
	color: #fff;
}

/* --- Header light: statico, sempre bianco ------------------------ */

#header.full-header #header-wrap {
	background-color: #fff;
	box-shadow: 0 1px 16px rgba(20, 26, 33, .08);
}
#header.full-header .primary-menu .menu-link,
#header.full-header .primary-menu .menu-link div {
	color: var(--dm-ink);
}
#header.full-header .primary-menu .menu-item:hover > .menu-link,
#header.full-header .primary-menu .menu-item.current > .menu-link {
	color: var(--dm-accent);
}

/* --- Logo immagine ---------------------------------------------- */

/* #logo a { display: block; line-height: 1; }
#logo img {
	height: 46px;
	width: auto;
	max-width: none;
	display: block;
}
 */

 #logo img {
	max-height: 46px;
	width: auto;
}
@media (max-width: 575.98px) {
	/*#logo img { height: 36px !important; }*/

}

/* Hamburger sempre scuro: l'header è sempre chiaro */
#header .cnvs-hamburger-inner,
#header .cnvs-hamburger-inner::before,
#header .cnvs-hamburger-inner::after {
	background-color: var(--dm-ink);
}

/* --- Menu mobile: pannello bianco, testo scuro ------------------- */

@media (max-width: 991.98px) {

	.container.visual{
		padding:1em;
	}

	#header .primary-menu .menu-container {
		background-color: #fff;
		border-top: 1px solid var(--dm-line);
		padding: .5rem 0;
	}

	#header .primary-menu .menu-item .menu-link,
	#header .primary-menu .menu-item .menu-link div {
		color: var(--dm-ink);
	}
	#header .primary-menu .menu-item + .menu-item {
		border-top: 1px solid var(--dm-line);
	}
	#header .primary-menu .menu-item .menu-link:hover,
	#header .primary-menu .menu-item .menu-link:hover div,
	#header .primary-menu .menu-item.current > .menu-link,
	#header .primary-menu .menu-item.current > .menu-link div {
		color: var(--dm-accent);
		background-color: transparent;
	}

	/* Sottomenu, se in futuro ne aggiungi */
	#header .primary-menu .sub-menu-container {
		background-color: var(--dm-surface);
	}
	#header .primary-menu .sub-menu-container .menu-link,
	#header .primary-menu .sub-menu-container .menu-link div {
		color: var(--dm-ink-soft);
	}
}

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

.dm-hero { position: relative; }
.dm-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,26,33,.55) 0%, rgba(20,26,33,.30) 45%, rgba(20,26,33,.70) 100%);
}
.dm-hero > .container { position: relative; z-index: 2; }

.dm-hero h1 {
	color: #fff;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	margin-bottom: .4rem;
}
.dm-hero .dm-hero-sub {
	color: rgba(255,255,255,.82);
	font-family: var(--dm-body);
	font-size: clamp(.85rem, 1.6vw, 1rem);
	letter-spacing: .22em;
	text-transform: lowercase;
}

/* --- Fascia annunci --------------------------------------------- */

.dm-annuncio {
	background: var(--dm-ink);
	color: #fff;
}
.dm-annuncio h3 { color: #fff; margin-bottom: .35rem; }
.dm-annuncio p { color: rgba(255,255,255,.72); margin-bottom: 0; }
.dm-annuncio .dm-tag { color: var(--dm-amber); }

/* --- Etichette di categoria/collana ------------------------------ */

.dm-tag {
	display: inline-block;
	font-family: var(--dm-body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--dm-accent);
	margin-bottom: .5rem;
}
.dm-tag-amber { color: var(--dm-amber); }

/* --- Card racconti / libri --------------------------------------- */

.dm-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--dm-line);
	border-radius: 4px;
	overflow: hidden;
}
.dm-card-media {
	background: var(--dm-surface);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.dm-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dm-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.6rem 1.5rem 1.4rem;
}
.dm-card-body h3 {
	font-size: 1.35rem;
	margin-bottom: .6rem;
}
.dm-card-body p {
	font-size: .95rem;
	margin-bottom: 1.2rem;
	max-width: none;
}
.dm-card-actions {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
}

/* Elenco capitoli dentro la card racconto */
.dm-chapters {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
	border-top: 1px solid var(--dm-line);
}
.dm-chapters li { border-bottom: 1px solid var(--dm-line); }
.dm-chapters a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 0;
	font-size: .9rem;
	color: var(--dm-ink-soft);
	text-decoration: none;
}
.dm-chapters a:hover { color: var(--dm-accent); }
.dm-chapters .dm-chapter-n {
	color: #98a3ad;
	font-variant-numeric: tabular-nums;
}

/* --- Card libro (copertina verticale, stile vetrina) -------------- */

.dm-book { text-align: left; }
.dm-book .dm-card-media {
	aspect-ratio: 2 / 3;
	background: var(--dm-surface);
}
.dm-book .dm-card-media img { object-fit: contain; padding: 1.25rem; }

/* --- Divisione per collana --------------------------------------- */

.dm-collection-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: .9rem;
	margin-bottom: 2.2rem;
	border-bottom: 2px solid var(--dm-ink);
}
.dm-collection-head h2 { margin: 0; font-size: 1.9rem; }
.dm-collection-head .dm-count {
	font-family: var(--dm-body);
	font-size: .85rem;
	color: #7a8791;
}

/* --- Fascia scura generica ---------------------------------------- */

.dm-band-dark { background: var(--dm-ink); }
.dm-band-dark h2,
.dm-band-dark h3 { color: #fff; }
.dm-band-dark p { color: rgba(255,255,255,.72); }

.dm-band-soft { background: var(--dm-surface); }

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

#footer.dm-footer {
	background: var(--dm-surface);
	color: rgba(255,255,255,.66);
	border-top: none;
}
#footer.dm-footer a { color: rgba(255,255,255,.85); }
#footer.dm-footer a:hover { color: #fff; }
#footer.dm-footer #copyrights {
	background: transparent;
	padding: 2.5rem 0;
	font-size: .9rem;
}

/* --- Form contatti -------------------------------------------------- */

.dm-form label {
	display: block;
	font-size: .85rem;
	font-weight: 500;
	color: var(--dm-ink);
	margin-bottom: .35rem;
}
.dm-form .form-control {
	border-radius: 3px;
	border-color: var(--dm-line);
	padding: .7rem .9rem;
}
.dm-form .form-control:focus {
	border-color: var(--dm-accent);
	box-shadow: 0 0 0 3px rgba(15,110,140,.15);
}

/* --- Accessibilità / motion ---------------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--dm-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}