/*
Theme Name: Carli
Theme URI: https://www.carliagri.it
Author: BIT Services
Author URI: https://bitservices.cloud
Description: Tema custom leggero per Carli macchine agricole (Larciano, PT). Senza page builder, mobile-first, WCAG 2.1 AA. Direzione visiva "Il libretto d'uso": carta bianca, nero e un solo colore, il blu Carli.
Version: 0.2.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.2
License: Proprietary
Text Domain: carli
Update URI: false
*/

/* ===========================================================
   Font: Archivo variabile (assi larghezza e peso), self-hosted.
   =========================================================== */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-latin.woff2") format("woff2");
	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;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
	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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================
   Design token (direzione D "Il libretto d'uso")
   Carta bianca, inchiostro nero, un solo colore: il blu Carli del logo.
   Il giallo macchina è riservato alle avvertenze (icone di errore).
   Scala tipografica corta: 14 · 17 · 20 · 28 · titolo.
   =========================================================== */
:root {
	--paper: #FFFFFF;
	--ink: #14171A;
	--ink-2: #3B434B;        /* testo secondario, 9.6:1 su bianco */
	--hair: #B9C1C8;         /* filetti */
	--blue: #0078C4;         /* blu Carli: campi e testo grande (4.7:1 col bianco) */
	--blue-ink: #00629F;     /* blu per testo piccolo su bianco (6.4:1) */
	--blue-tint: #E6F1FA;
	--warn: #EAA927;         /* giallo macchina, solo avvertenze */

	--t-s: 0.875rem;
	--t-b: 1.0625rem;
	--t-m: 1.25rem;
	--t-l: 1.75rem;
	--t-xl: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);

	--narrow: 75%;           /* larghezza condensata di Archivo per titoli e comandi */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--gutter: 16px;
	--wrap: 1080px;
	--bar-h: 0px;            /* altezza della barra azioni su smartphone */
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);

	color-scheme: light;
}
@media (min-width: 760px) { :root { --gutter: 32px; } }

/* ===========================================================
   Base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-top: calc(64px + var(--admin-bar));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Archivo", "Arial Narrow", Arial, sans-serif;
	font-size: var(--t-b);
	line-height: 1.5;
	overflow-x: clip;
	caret-color: var(--blue-ink);
	padding-bottom: var(--bar-h);
}
::selection { background: var(--blue); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-blue :focus-visible, .on-blue:focus-visible { outline-color: #fff; }
button, a, [role="button"] { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: 12px 16px; background: var(--ink); color: #fff; font-weight: 700;
}
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.nw { white-space: nowrap; }

/* ===========================================================
   Intestazione: barra contatti blu + logo e menu in maiuscolo con il pulsante Contatti
   (dal modello scelto per la home, su tutto il sito).
   =========================================================== */
.topbar { background: var(--blue); color: #fff; font-size: var(--t-s); }
.topbar-in { display: flex; align-items: center; gap: 24px; min-height: 44px; }
.tb-claim { margin: 0 auto 0 0; font-weight: 500; }
.tb-contacts, .lang { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.tb-contacts { gap: 22px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.topbar .tb-k { font-weight: 500; }
.lang { gap: 2px; }
.lang a { justify-content: center; min-width: 44px; }
.lang a span { padding: 2px 8px; }
.lang a[aria-current="true"] span { background: #fff; color: var(--blue-ink); }
@media (hover: hover) and (pointer: fine) { .topbar a:hover .nw, .topbar a:hover > span:not(.tb-k) { text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 899px) { .tb-claim, .tb-mail { display: none; } .tb-contacts { margin-right: auto; gap: 16px; } }
@media (max-width: 479px) { .topbar .lang { display: none; } }

.site-head { position: relative; border-bottom: 1px solid var(--hair); background: var(--paper); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding-block: 8px; }
.brand { display: block; width: 112px; flex: none; }
.brand img { width: 100%; }
.menu-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
	background: none; border: 1.5px solid var(--ink); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.menu-btn:active { transform: scale(0.97); }
.site-nav { display: none; }
.site-nav.is-open {
	display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
	background: var(--paper); border-bottom: 2px solid var(--ink); padding: 8px var(--gutter) 16px;
}
.menu, .lang-panel { list-style: none; margin: 0; padding: 0; }
.menu a {
	display: flex; align-items: center; min-height: 52px; color: var(--ink); text-decoration: none;
	font-weight: 600; font-stretch: var(--narrow); text-transform: uppercase; letter-spacing: 0.03em;
}
.menu li + li a { border-top: 1px solid var(--hair); }
.menu .current-menu-item > a, .menu .current-menu-parent > a, .menu .current-menu-ancestor > a { color: var(--blue-ink); }
.nav-cta {
	display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 0 20px;
	border: 2px solid var(--blue); border-radius: 999px; color: var(--blue-ink); text-decoration: none;
	font-weight: 700; font-stretch: var(--narrow); text-transform: uppercase; letter-spacing: 0.03em;
}
.nav-cta:active { transform: scale(0.97); }
.lang-panel { display: flex; gap: 8px; margin-top: 12px; }
.lang-panel li { flex: 1; }
.lang-panel a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1.5px solid var(--hair); color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-panel a[aria-current="true"] { border-color: var(--blue); color: var(--blue-ink); }
@media (min-width: 1024px) {
	.brand { width: 136px; }
	.head-in { min-height: 84px; }
	.menu-btn, .lang-panel { display: none; }
	.site-nav, .site-nav.is-open { display: flex; position: static; align-items: center; padding: 0; border: 0; }
	.menu { display: flex; align-items: center; }
	.menu a { min-height: 44px; padding: 0 14px; font-size: 0.95rem; }
	.menu li + li a { border-top: 0; border-left: 1px solid var(--hair); }
	.nav-cta { margin: 0 0 0 12px; min-height: 44px; font-size: 0.95rem; }
	@media (hover: hover) and (pointer: fine) {
		.menu a:hover { color: var(--blue-ink); }
		.nav-cta:hover { background: var(--blue); color: #fff; }
	}
}

/* ===========================================================
   Percorso
   =========================================================== */
.crumbs { padding-block: 12px; font-size: var(--t-s); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--ink-2); display: inline-flex; min-height: 32px; align-items: center; }
.crumbs svg { width: 14px; height: 14px; stroke: var(--ink-2); fill: none; stroke-width: 1.75; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ===========================================================
   Pulsanti
   =========================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
	font: inherit; font-weight: 700; font-stretch: var(--narrow); font-size: var(--t-m); line-height: 1.3;
	text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
	transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--blue-ink); }
.btn-link-white { color: #fff; padding-inline: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) {
	.btn-blue:hover { background: var(--blue-ink); }
	.btn-white:hover { background: var(--blue-tint); }
	.btn-link-white:hover { text-decoration-thickness: 2px; }
}

/* ===========================================================
   Sezioni e campi dei moduli
   =========================================================== */
.sec { padding-block: 36px 40px; }
.sec-title {
	margin: 0 0 20px; padding-top: 12px; border-top: 2px solid var(--ink);
	font-size: var(--t-l); font-weight: 700; font-stretch: var(--narrow); line-height: 1.1;
}
.sec-lead { margin: 0 0 24px; max-width: 62ch; }
@media (min-width: 760px) { .sec { padding-block: 48px 56px; } }

.field { margin: 0; }
.field > label, .field > .label { display: block; font-weight: 600; margin-bottom: 6px; }
.hint { margin: 6px 0 0; font-size: var(--t-s); color: var(--ink-2); }
.input, .select, .textarea {
	display: block; width: 100%; min-height: 48px; padding: 10px 12px;
	font: inherit; font-size: 1.0625rem; color: var(--ink); background: #fff;
	border: 1.5px solid var(--ink); border-radius: 0;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-width: 3px; padding: 8.5px 10.5px; }
.textarea { min-height: 120px; resize: vertical; }
.select {
	appearance: none; padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.opt { font-weight: 400; color: var(--ink-2); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--blue); }
.check span { padding-block: 10px; }
.err { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: var(--t-s); font-weight: 700; color: var(--ink); }
.err[hidden] { display: none; }

/* Moduli (scheda, contatti): griglia, stato, campo esca, conferma. */
.form { display: grid; gap: 20px; max-width: 820px; }
@media (min-width: 760px) {
	.form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
	.form .full { grid-column: 1 / -1; }
}
.req-note { margin: 0; font-size: var(--t-s); color: var(--ink-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.form-status { margin: 0; padding: 16px 0 0; border-top: 2px solid var(--ink); font-weight: 600; }
.form-status[hidden] { display: none; }
.form[aria-busy="true"] .btn { opacity: 0.6; cursor: progress; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { max-width: 820px; padding: 20px 0; border-top: 3px solid var(--blue); border-bottom: 3px solid var(--blue); font-size: var(--t-m); font-weight: 600; }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
/* Conferma dopo l'invio (assets/js/modulo.js): dialog nativo, chiudibile con Esc, Chiudi o clic fuori. */
.form-ok { width: min(440px, calc(100% - 2 * var(--gutter))); padding: 28px 28px 24px; border: 1px solid var(--hair); border-top: 4px solid var(--blue); background: #fff; color: var(--ink); }
.form-ok::backdrop { background: rgba(20, 23, 26, 0.45); }
.form-ok h2 { margin: 12px 0 6px; font-size: var(--t-l); font-weight: 800; font-stretch: var(--narrow); line-height: 1.1; }
.form-ok p { margin: 0 0 22px; color: var(--ink-2); }
.form-ok-i { width: 36px; height: 36px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.err svg { width: 20px; height: 20px; flex: none; margin-top: -1px; }

/* ===========================================================
   Contenuti generici (pagine, articoli)
   =========================================================== */
.page-body { padding-block: 32px 56px; }
.page-body h1 { margin: 0 0 24px; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); font-weight: 800; font-stretch: var(--narrow); line-height: 0.98; color: var(--ink-2); text-wrap: balance; }
.entry { max-width: 68ch; }
.entry p { color: var(--ink-2); }
/* News (home.php, single.php): niente date. */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.news-item { display: grid; gap: 16px 28px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 760px) { .news-item { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.news-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.news-item h2 { margin: 0 0 8px; font-size: var(--t-l); font-weight: 700; font-stretch: var(--narrow); line-height: 1.1; }
.news-item h2 a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .news-item h2 a:hover { text-decoration: underline; } }
.news-item p { margin: 0 0 8px; max-width: 64ch; color: var(--ink-2); }
.news-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.news-more .ico { width: 18px; height: 18px; }
.entry-back { margin: 0 0 8px; font-size: var(--t-s); }
.entry-back a { display: inline-flex; min-height: 44px; align-items: center; }
.entry-img { margin: 0 0 24px; max-width: 820px; }
.entry-img img { display: block; width: 100%; height: auto; }

/* ===========================================================
   Piè di pagina (retro di copertina)
   =========================================================== */
.site-foot { background: var(--blue); color: #fff; padding-block: 40px 32px; }
.site-foot a { color: #fff; }
.foot-in { display: grid; gap: 24px; }
.foot-logo { width: 150px; }
.site-foot address { font-style: normal; }
.site-foot p { margin: 0; }
.site-foot .foot-legal { margin-top: 10px; font-size: var(--t-s); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; }
.foot-tel { display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 760px) { .foot-in { grid-template-columns: auto minmax(260px, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; } .foot-links { justify-content: flex-end; } }

/* ===========================================================
   Barra azioni (smartphone): Chiama + azione principale della pagina
   =========================================================== */
.actionbar { display: none; }
@media (max-width: 759px) {
	body.has-actionbar { --bar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
	.actionbar {
		display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		background: var(--paper); border-top: 1px solid var(--ink);
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 6px;
	}
	.actionbar .btn { min-height: 48px; padding: 0 10px; font-size: var(--t-b); }
	.actionbar .btn-call { background: var(--paper); color: var(--ink); }
	.actionbar .btn-call:active { background: var(--blue-tint); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-property: background-color, color, opacity, border-color !important; }
}

/* ===========================================================
   Avviso all'ingresso: popup di Carli o prossimo evento (inc/home.php, assets/js/avviso.js); non copre la pagina.
   Desktop: riquadro in basso a destra. Telefono: barra in basso, sopra la barra azioni della scheda.
   =========================================================== */
.avviso {
	position: fixed; z-index: 50; right: 20px; bottom: calc(20px + var(--bar-h)); width: min(340px, calc(100vw - 40px));
	padding: 16px 48px 16px 18px; background: var(--paper); color: var(--ink);
	border: 1px solid var(--hair); border-top: 0; box-shadow: 0 10px 30px rgba(20, 23, 26, 0.18);
	opacity: 0; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.avviso::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 4px; background: var(--blue); }
.avviso[hidden] { display: none; }
.avviso.is-in { opacity: 1; transform: none; }
.avviso p { margin: 0; }
.avviso-k { font-size: var(--t-s); font-weight: 700; color: var(--blue-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.avviso-h { margin-top: 2px; font-size: var(--t-m); font-weight: 800; font-stretch: var(--narrow); line-height: 1.15; }
.avviso-d { margin-top: 4px; font-size: var(--t-s); color: var(--ink-2); }
.avviso-act { display: flex; flex-wrap: wrap; column-gap: 20px; }
.avviso-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.avviso-go .ico { width: 18px; height: 18px; }
.avviso-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.avviso.has-img:not([hidden]) { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.avviso-img { display: block; width: 72px; height: 72px; margin-top: 2px; object-fit: cover; }
@media (max-width: 599px) { .avviso.has-img:not([hidden]) { grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; } .avviso-img { width: 56px; height: 56px; } }
.avviso-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 599px) {
	.avviso { left: 0; right: 0; bottom: var(--bar-h); width: auto; padding: 12px 52px 10px var(--gutter); border-inline: 0; box-shadow: 0 -6px 20px rgba(20, 23, 26, 0.14); }
	.avviso-h { font-size: var(--t-b); }
	.avviso-go { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .avviso { transition: none; transform: none; } }