/*
Theme Name: CTT Trasporti
Theme URI: https://www.ctt-trasporti.com/
Author: C.T.T. Srl Casa di Spedizioni
Description: Tema su misura per C.T.T. Srl Casa di Spedizioni. Sezioni e pagine pronte da inserire dall'editor, modulo preventivo integrato con archivio delle richieste, caratteri caricati in locale.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ctt-trasporti
*/

:root {
	--ctt-rosso: var(--wp--preset--color--rosso, #D3121C);
	--ctt-rosso-logo: var(--wp--preset--color--rosso-logo, #ED1C24);
	--ctt-ink: var(--wp--preset--color--inchiostro, #131C2F);
	--ctt-grigio: var(--wp--preset--color--grigio, #586174);
	--ctt-linea: var(--wp--preset--color--linea, #DADFE7);
	--ctt-chiaro: var(--wp--preset--color--chiaro, #EEF1F5);
	--ctt-bianco: var(--wp--preset--color--bianco, #FFFFFF);
	--ctt-notte-testo: var(--wp--preset--color--notte-testo, #A9B2C4);
	--ctt-notte-linea: var(--wp--preset--color--notte-linea, #2B3752);
	--ctt-notte-puntini: #36446A;
	--ctt-accento-su-blu: #FF6166;
	--ctt-display: var(--wp--preset--font-family--display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
	--ctt-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
:where(h1, h2, h3) { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ctt-rosso); outline-offset: 2px; }
[id] { scroll-margin-top: 90px; }

/* Le sezioni a tutta larghezza si toccano senza spazi bianchi */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; margin-block-end: 0; }
/* Margine laterale delle sezioni anche su WordPress 6.5 (che lo azzera nei gruppi annidati) */
.wp-block-post-content > .alignfull.has-global-padding {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* ---------- Intestazione ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.ctt-header {
	background: var(--ctt-bianco);
	border-bottom: 1px solid var(--ctt-linea);
}
.ctt-header-inner { min-height: 68px; gap: 24px; }
.ctt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.ctt-brand img { width: 40px; height: 40px; display: block; }
.ctt-brand span {
	font-family: var(--ctt-display);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: 0.08em;
	color: var(--ctt-ink);
}
.ctt-site-logo img { max-height: 52px; width: auto; }
.ctt-nav { margin-left: auto; }
.ctt-nav .wp-block-navigation-item__content { color: var(--ctt-grigio); }
.ctt-nav .wp-block-navigation-item__content:hover { color: var(--ctt-ink); }
.ctt-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--ctt-linea) !important;
	border-radius: 4px;
	padding: 6px 0;
	min-width: 260px !important;
}
.ctt-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 16px; }
.ctt-header-cta { flex-shrink: 0; }
@media (max-width: 480px) { .ctt-header .ctt-header-cta { display: none !important; } }

/* ---------- Elementi comuni ---------- */
.ctt-eyebrow {
	font-family: var(--ctt-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ctt-rosso);
}
.ctt-eyebrow a { color: inherit; text-decoration: none; }
.ctt-lead { font-size: 1.15rem; max-width: 56ch; }
.ctt-sec { padding-block: clamp(56px, 8vw, 96px); }
.ctt-sec-bianco { background: var(--ctt-bianco); border-block: 1px solid var(--ctt-linea); }
.ctt-sec-head { margin-bottom: 36px; }
.ctt-sec-head > * { max-width: 62ch; }
.ctt-sec-head p:not(.ctt-eyebrow) { color: var(--ctt-grigio); }
.ctt-sec-head > * + * { margin-block-start: 12px; }

/* ---------- Bande blu ---------- */
.ctt-band { background: var(--ctt-ink); color: #F2F4F8; }
.ctt-band :where(h1, h2, h3) { color: #F2F4F8; }
.ctt-band a:where(:not(.wp-element-button)) { color: #F2F4F8; }
.ctt-band .ctt-eyebrow { color: var(--ctt-notte-testo); }
.ctt-band .ctt-lead, .ctt-band p.ctt-muted { color: var(--ctt-notte-testo); }
.ctt-band h1 em, .ctt-band h2 em { font-style: normal; color: var(--ctt-rosso-logo); }
.ctt-band .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: #F2F4F8;
	border: 2px solid var(--ctt-notte-linea);
	font-family: var(--ctt-mono);
	font-weight: 500;
}
.ctt-band .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #F2F4F8; }

.ctt-hero { padding-block: clamp(48px, 7vw, 88px); }
.ctt-hero-cols { align-items: center; gap: 40px; }
.ctt-hero-text > * + * { margin-block-start: 24px; }
.ctt-hero-small { padding-block: clamp(44px, 6vw, 72px); }
.ctt-hero-small-inner > * + * { margin-block-start: 18px; }
.ctt-hero-small h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 24ch; }
.ctt-hero-small .ctt-lead { max-width: 62ch; }

/* Mappa */
.ctt-map { width: 100%; max-width: 520px; margin-left: auto; }
.ctt-map svg { display: block; width: 100%; height: auto; }
.m-dots { fill: none; stroke: var(--ctt-notte-puntini); stroke-width: 4.6; stroke-linecap: round; }
.m-route { fill: none; stroke: #F2F4F8; stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; }
.m-route.sea { stroke-dasharray: 4 5; }
.m-stop { fill: var(--ctt-ink); stroke: #F2F4F8; stroke-width: 2; }
.m-hub { fill: var(--ctt-rosso-logo); }
.m-ring { fill: none; stroke: var(--ctt-rosso-logo); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ctt-ring 2.6s ease-out infinite; }
@keyframes ctt-ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
.m-name, .m-km, .m-hubname { paint-order: stroke; stroke: var(--ctt-ink); stroke-width: 4px; stroke-linejoin: round; }
.m-name { fill: #F2F4F8; font-family: var(--ctt-display); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.m-km { fill: var(--ctt-notte-testo); font-family: var(--ctt-mono); font-size: 11px; }
.m-hubname { fill: #F2F4F8; font-family: var(--ctt-display); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; }
@media (max-width: 781px) { .ctt-map { margin-left: 0; } }

/* ---------- Numeri ---------- */
.ctt-stats-band { background: var(--ctt-bianco); border-bottom: 1px solid var(--ctt-linea); }
.ctt-stats { gap: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ctt-stat { padding: 28px 20px 26px; border-left: 1px solid var(--ctt-linea); }
.ctt-stat > * { margin: 0; }
.ctt-stat:first-child { border-left: 0; padding-left: 0; }
.ctt-stat-num {
	font-family: var(--ctt-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 4vw, 3rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ctt-stat-label { color: var(--ctt-grigio); font-size: 0.95rem; margin-top: 4px !important; }
@media (max-width: 700px) {
	.ctt-stats { grid-template-columns: 1fr 1fr !important; }
	.ctt-stat { padding: 20px 16px; }
	.ctt-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
	.ctt-stat:nth-child(n+3) { border-top: 1px solid var(--ctt-linea); }
}

/* ---------- Schede servizi ---------- */
.ctt-grid { gap: 16px; }
.ctt-card {
	background: var(--ctt-bianco);
	border: 1px solid var(--ctt-linea);
	border-radius: 4px;
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
}
.ctt-card > * { margin: 0; }
.ctt-card > * + * { margin-block-start: 12px; }
.ctt-card h3 { display: flex; align-items: center; gap: 12px; }
.ctt-card h3::before { content: ""; width: 12px; height: 12px; background: var(--ctt-rosso); flex-shrink: 0; }
.ctt-card p:not(.ctt-spec):not(.ctt-more) { color: var(--ctt-grigio); }
.ctt-spec {
	margin-top: auto !important;
	padding-top: 14px;
	border-top: 1px dashed var(--ctt-linea);
	font-family: var(--ctt-mono);
	font-size: 0.82rem;
}
.ctt-more { font-weight: 600; }
.ctt-more a { color: var(--ctt-rosso); text-decoration: none; }
.ctt-more a:hover { text-decoration: underline; }
.ctt-card-link { padding: 18px 20px; }
.ctt-card-link h3 { font-size: 1.15rem; }

/* Settori */
.ctt-settori {
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid var(--ctt-linea);
	gap: 10px 28px !important;
	align-items: baseline !important;
}
.ctt-settori > * { margin: 0 !important; }
.ctt-settori .ctt-eyebrow { color: var(--ctt-grigio); }
.ctt-settore { font-family: var(--ctt-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.03em; text-transform: uppercase; }

/* ---------- Testi a due colonne ---------- */
.ctt-due-col { gap: 56px; }
.ctt-testo > * + * { margin-block-start: 18px; }
.ctt-testo p:not(.ctt-eyebrow):not(.ctt-address):not(.ctt-maplink):not(.ctt-intro) { color: var(--ctt-grigio); }
.ctt-testo p { max-width: 58ch; }
.ctt-testo p.ctt-intro { color: var(--ctt-ink); font-size: 1.15rem; }

/* ---------- Tabelle ---------- */
.wp-block-table.is-style-ctt-scheda { margin: 0; overflow-x: auto; }
.wp-block-table.is-style-ctt-scheda table { border-collapse: collapse; width: 100%; border-top: 2px solid var(--ctt-ink); }
.wp-block-table.is-style-ctt-scheda td,
.wp-block-table.is-style-ctt-scheda th { border: 0; border-bottom: 1px solid var(--ctt-linea); padding: 14px 0; vertical-align: top; text-align: left; }
.wp-block-table.is-style-ctt-scheda td:first-child {
	width: 38%;
	padding-right: 16px;
	font-family: var(--ctt-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ctt-grigio);
	padding-top: 17px;
}
.wp-block-table.is-style-ctt-scheda td:last-child { font-weight: 500; }

.wp-block-table.is-style-ctt-registro { margin: 0; overflow-x: auto; border: 1px solid var(--ctt-linea); border-radius: 4px; background: var(--ctt-bianco); }
.wp-block-table.is-style-ctt-registro table { border-collapse: collapse; width: 100%; min-width: 480px; }
.wp-block-table.is-style-ctt-registro thead { border-bottom: 0; }
.wp-block-table.is-style-ctt-registro th,
.wp-block-table.is-style-ctt-registro td { border: 0; border-bottom: 1px solid var(--ctt-linea); padding: 14px 18px; text-align: left; vertical-align: top; }
.wp-block-table.is-style-ctt-registro th {
	font-family: var(--ctt-mono);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ctt-grigio);
	background: var(--ctt-chiaro);
}
.wp-block-table.is-style-ctt-registro tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-ctt-registro td:last-child { font-family: var(--ctt-mono); font-size: 0.9rem; white-space: nowrap; }

/* ---------- Contatti ---------- */
.ctt-address {
	font-family: var(--ctt-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.1;
	text-transform: uppercase;
}
.ctt-maplink a { color: var(--ctt-rosso); font-weight: 600; }

/* ---------- Invito al preventivo ---------- */
.ctt-cta { padding-block: 44px; }
.ctt-cta-inner { gap: 20px 40px; }
.ctt-cta-inner > div:first-child > * + * { margin-block-start: 8px; }
.ctt-cta h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* ---------- Piè di pagina ---------- */
.ctt-footer { background: var(--ctt-ink); color: var(--ctt-notte-testo); font-size: 0.92rem; padding-block: 40px 28px; }
.ctt-footer a { color: var(--ctt-notte-testo); text-decoration: none; }
.ctt-footer a:hover { color: #F2F4F8; }
.ctt-footer strong { color: #F2F4F8; font-weight: 600; }
.ctt-footer-cols { gap: 32px; }
.ctt-footer-cols p { margin: 0 0 6px; }
.ctt-footer-title { font-family: var(--ctt-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #F2F4F8; margin-bottom: 12px !important; }
.ctt-footer-bottom { border-top: 1px solid var(--ctt-notte-linea); margin-top: 28px !important; padding-top: 18px; font-size: 0.85rem; }

/* ---------- Pagine di testo ---------- */
.ctt-pagina-testo { padding-block: clamp(40px, 6vw, 72px); }
.ctt-pagina-testo .wp-block-post-content { max-width: 72ch; }

/* ---------- Modulo preventivo ---------- */
.ctt-preventivo { color: var(--ctt-ink); }
.ctt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ctt-cmr {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	background: var(--ctt-linea);
	border: 1px solid var(--ctt-linea);
	border-radius: 4px;
	overflow: hidden;
}
.ctt-box {
	background: var(--ctt-bianco);
	padding: 10px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	grid-column: span 3;
}
.ctt-box.ctt-w2 { grid-column: span 2; }
.ctt-box.ctt-w6 { grid-column: span 6; }
.ctt-box:focus-within { box-shadow: inset 0 0 0 2px var(--ctt-rosso); }
.ctt-box-h { display: flex; gap: 8px; align-items: baseline; }
.ctt-n { font-family: var(--ctt-mono); font-size: 0.72rem; color: var(--ctt-rosso); min-width: 1.4em; }
.ctt-box-h label, .ctt-box-h .ctt-lbl {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ctt-grigio);
}
.ctt-box input, .ctt-box select, .ctt-box textarea {
	border: 0;
	background: transparent;
	color: var(--ctt-ink);
	font: 500 1.02rem var(--wp--preset--font-family--body);
	padding: 4px 0;
	width: 100%;
	min-width: 0;
	outline: none;
	box-shadow: none;
}
.ctt-box textarea { resize: vertical; min-height: 64px; }
.ctt-box select { cursor: pointer; }
.ctt-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }
.ctt-radios label { display: flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.ctt-radios input { width: auto; accent-color: var(--ctt-rosso); }
.ctt-q-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.ctt-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; max-width: 60ch; }
.ctt-band .ctt-privacy { color: var(--ctt-notte-testo); }
.ctt-privacy input { accent-color: var(--ctt-rosso); margin-top: 4px; }
.ctt-invia { cursor: pointer; border: 0; }
.ctt-esito { border-radius: 3px; padding: 18px 20px; margin-bottom: 20px; border: 1px solid var(--ctt-linea); border-left: 4px solid var(--ctt-rosso-logo); background: var(--ctt-bianco); color: var(--ctt-ink); }
.ctt-esito-ok { border-left-color: #1F9D55; }
@media (max-width: 760px) {
	.ctt-cmr { grid-template-columns: 1fr; }
	.ctt-box, .ctt-box.ctt-w2, .ctt-box.ctt-w6 { grid-column: span 1; }
}