/*
Theme Name:   TerraMove Child 2026
Theme URI:    https://www.terramove.it/
Description:  Tema child di Astra per il restyling 2026 di TerraMove: palette blu notte e arancio, font Plus Jakarta Sans ospitato sul sito, componenti per Elementor (classi tm-*), barra contatti su mobile.
Author:       TerraMove S.r.l.
Template:     astra
Version:      1.0.10
Requires PHP: 7.4
Text Domain:  terramove-child-2026
*/

/* ==========================================================================
   1. Font (ospitati nel tema, niente Google Fonts)
   ========================================================================== */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Colori e misure (un solo posto da cambiare)
   ========================================================================== */
:root {
	--tm-navy: #0F172A;        /* blu notte: testi, header menu, sezioni scure */
	--tm-navy-2: #1E293B;
	--tm-orange: #EA580C;      /* arancio del marchio: linee, accenti, titoli grandi */
	--tm-orange-dark: #C2410C; /* arancio per pulsanti con testo bianco (contrasto AA) */
	--tm-orange-darker: #9A3412;
	--tm-orange-light: #FB923C;/* arancio su fondo scuro */
	--tm-orange-tint: #FFF1E8;
	--tm-bg: #FFFFFF;
	--tm-bg-soft: #F8FAFC;
	--tm-line: #E2E8F0;
	--tm-muted: #475569;
	--tm-muted-on-dark: #CBD5E1;
	--tm-radius: 24px;
	--tm-radius-sm: 14px;
	--tm-shadow: 0 12px 30px rgba(15, 23, 42, .12);
	--tm-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   3. Base
   ========================================================================== */
html { scroll-behavior: smooth; }
body,
button,
input,
select,
textarea { font-family: var(--tm-font); }
body { color: var(--tm-navy); }
h1, h2, h3, h4, h5, h6,
.elementor-heading-title { font-family: var(--tm-font); letter-spacing: -.025em; }
a { color: var(--tm-orange-dark); }
a:hover, a:focus { color: var(--tm-orange-darker); }
:focus-visible { outline: 3px solid var(--tm-orange-light); outline-offset: 2px; }

/* ==========================================================================
   4. Header Astra (come l'attuale: bianco, menu blu notte, linea arancio)
   ========================================================================== */
.ast-primary-header-bar { background: #fff !important; }
.ast-primary-header-bar,
.main-header-bar {
	border-bottom: 3px solid var(--tm-orange) !important;
	box-shadow: 0 4px 18px rgba(15, 23, 42, .14) !important;
}
.site-header { position: relative; z-index: 50; box-shadow: none !important; border: 0 !important; }
.ast-site-title-wrap { display: none !important; }
.main-header-menu .menu-link { color: var(--tm-navy); font-weight: 600; }
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: var(--tm-orange) !important; }
.main-header-menu-toggle { background: var(--tm-orange) !important; border-radius: 12px; }
.ast-header-button-1 .ast-custom-button,
.ast-custom-button {
	background: var(--tm-orange-dark) !important;
	border-color: var(--tm-orange-dark) !important;
	color: #fff !important;
	border-radius: 12px;
	font-weight: 700;
}
.ast-custom-button:hover { background: var(--tm-orange-darker) !important; }
@media (max-width: 544px) {
	.ast-primary-header-bar .custom-logo-link img,
	.ast-mobile-header-logo img { max-width: 170px !important; height: auto !important; }
}

/* ==========================================================================
   5. Pulsanti – classe sul widget Pulsante di Elementor
   ========================================================================== */
.tm-btn .elementor-button,
.tm-btn-outline .elementor-button,
.tm-btn-light .elementor-button,
.tm-btn-dark .elementor-button {
	border-radius: var(--tm-radius-sm);
	font-family: var(--tm-font);
	font-weight: 700;
	min-height: 52px;
	padding: 15px 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.tm-btn .elementor-button { background: var(--tm-orange-dark); color: #fff; border: 1px solid var(--tm-orange-dark); }
.tm-btn .elementor-button:hover { background: var(--tm-orange-darker); }
.tm-btn-outline .elementor-button { background: transparent; color: currentColor; border: 1px solid currentColor; }
.tm-btn-light .elementor-button { background: #fff; color: var(--tm-navy); border: 1px solid #fff; }
.tm-btn-dark .elementor-button { background: var(--tm-navy); color: #fff; border: 1px solid var(--tm-navy); }

/* ==========================================================================
   6. Etichette e testi
   ========================================================================== */
/* Piccola etichetta arancio sopra i titoli di sezione */
.tm-kicker,
.tm-kicker .elementor-heading-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase;
	color: var(--tm-orange-dark) !important;
}
/* "Pillola" su fondo scuro (es. "Mobilità senza confini") */
.tm-eyebrow,
.tm-eyebrow .elementor-heading-title {
	display: inline-block;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #FED7AA !important;
	background: rgba(234, 88, 12, .16);
	border: 1px solid rgba(251, 146, 60, .35);
	padding: 6px 14px;
	border-radius: 999px;
	letter-spacing: 0 !important;
}
/* Parola evidenziata nel titolo: <span class="tm-accent">…</span> */
.tm-accent { color: var(--tm-orange); }
.tm-hero .tm-accent, .tm-dark .tm-accent { color: var(--tm-orange-light); }

/* ==========================================================================
   7. Sezioni e riquadri – classe sul Contenitore di Elementor
   ========================================================================== */
/* Hero blu notte arrotondato, staccato dai bordi */
.tm-hero {
	background: var(--tm-navy);
	color: #fff;
	border-radius: 32px;
	overflow: hidden;
}
.tm-hero .elementor-heading-title,
.tm-hero h1, .tm-hero h2, .tm-hero h3 { color: #fff; }
.tm-hero p, .tm-hero .elementor-widget-text-editor { color: var(--tm-muted-on-dark); }
.tm-hero img { border-radius: var(--tm-radius); }

/* Sezione scura generica */
.tm-dark { background: var(--tm-navy); color: #fff; }
.tm-dark .elementor-heading-title { color: #fff; }
.tm-dark p { color: var(--tm-muted-on-dark); }

/* Sezione con fondo chiaro */
.tm-soft { background: var(--tm-bg-soft); }

/* Riquadro bianco con bordo */
.tm-card {
	background: #fff;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	overflow: hidden;
}
.tm-card--orange { background: var(--tm-orange-dark); color: #fff; border-color: var(--tm-orange-dark); }
.tm-card--orange .elementor-heading-title, .tm-card--orange p { color: #fff; }
.tm-card--navy { background: var(--tm-navy); color: #fff; border-color: var(--tm-navy); }
.tm-card--navy .elementor-heading-title { color: #fff; }
.tm-card--main { border: 2px solid var(--tm-orange); } /* sede operativa */

/* Pillole delle categorie nell'hero (Scooter · Auto · Furgoni · Mezzi da lavoro) */
.tm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-pills a,
.tm-pill .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	text-decoration: none;
}
.tm-pills a:first-child,
.tm-pill--active .elementor-button { background: #fff; color: var(--tm-navy); font-weight: 700; }

/* Schede tariffe scooter */
.tm-plan {
	position: relative;
	background: #fff;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	padding: 28px;
}
.tm-plan--featured { background: #FFF7F2; border: 2px solid var(--tm-orange); }
.tm-plan--featured::before {
	content: "Il più scelto";
	position: absolute;
	top: -13px;
	left: 24px;
	background: var(--tm-orange);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
}
.tm-price,
.tm-price .elementor-heading-title {
	font-size: clamp(40px, 4vw, 52px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.03em !important;
}

/* Griglia a mosaico "Non solo scooter" */
.tm-bento {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.tm-bento > .e-con-inner { display: contents; }
.tm-span-2 { grid-column: span 2; }
.tm-row-2 { grid-row: span 2; min-height: 520px; }
@media (max-width: 767px) {
	.tm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-bento > * { grid-column: span 2; }
	.tm-row-2 { grid-row: auto; min-height: 360px; }
}

/* Numero dei passaggi (1, 2, 3) */
.tm-step-num,
.tm-step-num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--tm-navy);
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
}

/* Banda finale arancio */
.tm-cta-band {
	background: var(--tm-orange-dark);
	color: #fff;
	border-radius: 28px;
}
.tm-cta-band .elementor-heading-title { color: #fff; }
.tm-cta-band p { color: #FFEDD5; }

/* Riquadro mappa in attesa del consenso cookie */
.tm-map {
	min-height: 380px;
	border-radius: var(--tm-radius);
	background: #F1F5F9;
	overflow: hidden;
}
.tm-map iframe { width: 100%; min-height: 380px; border: 0; display: block; }

/* ==========================================================================
   8. Promo del momento – scorrimento orizzontale dei volantini
   Mettere la classe tm-scroller sul contenitore (o sul widget shortcode
   del gruppo Advanced Ads): lo script trova da solo l'elenco da scorrere.
   ========================================================================== */
.tm-scroller { position: relative; }
.tm-scroller__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	padding: 8px 4px 16px;
	scrollbar-width: thin;
}
.tm-scroller__item {
	flex: 0 0 290px !important;
	max-width: 290px;
	scroll-snap-align: start;
	margin: 0 !important;
}
.tm-scroller__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top;
	border-radius: 20px;
	border: 1px solid var(--tm-line);
	box-shadow: var(--tm-shadow);
}
.tm-scroller__nav { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.tm-scroller__nav button {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid #CBD5E1;
	background: #fff;
	color: var(--tm-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.tm-scroller__nav button:last-child { background: var(--tm-navy); border-color: var(--tm-navy); color: #fff; }
.tm-scroller__nav button[disabled] { opacity: .4; cursor: default; }
@media (max-width: 767px) {
	.tm-scroller__item { flex-basis: 250px !important; max-width: 250px; }
	.tm-scroller__nav { display: none; }
}

/* ==========================================================================
   9. Pagina Preventivi – solo il layout intorno al plugin (#tm-prev invariato)
   ========================================================================== */
.tm-prev-layout {
	border: 1px solid var(--tm-line);
	border-radius: 32px;
	overflow: hidden;
}
.tm-prev-info { background: var(--tm-navy); color: #fff; }
.tm-prev-info .elementor-heading-title { color: #fff; }
.tm-prev-info p { color: var(--tm-muted-on-dark); }
/* La colonna del plugin resta senza sfondo: il plugin usa il suo (chiaro o scuro) */
.tm-prev-plugin { background: transparent !important; }

/* ==========================================================================
   10. Barra contatti fissa su mobile (inserita da functions.php)
   ========================================================================== */
.tm-mobilebar { display: none; }
@media (max-width: 767px) {
	.tm-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--tm-line);
		box-shadow: 0 -6px 18px rgba(15, 23, 42, .12);
	}
	.tm-mobilebar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		border-radius: var(--tm-radius-sm);
		font-weight: 700;
		text-decoration: none;
		color: #fff;
	}
	.tm-mobilebar__wa { background: var(--tm-orange-dark); }
	.tm-mobilebar__tel { background: var(--tm-navy); }
	body.tm-has-mobilebar { padding-bottom: 76px; }
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer,
.tm-footer { background: var(--tm-navy); color: var(--tm-muted-on-dark); }
.site-footer a,
.tm-footer a { color: var(--tm-muted-on-dark); }
.site-footer a:hover,
.tm-footer a:hover { color: #fff; }

/* ==========================================================================
   12. Utilità
   ========================================================================== */
.tm-rounded { border-radius: var(--tm-radius); overflow: hidden; }
.tm-rounded img { border-radius: var(--tm-radius); }
.tm-shadow { box-shadow: var(--tm-shadow); }
.tm-muted, .tm-muted p { color: var(--tm-muted); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}