/*!
Theme Name: Studio Paoloni
Theme URI: https://www.studiodentisticopaoloni.it/
Author: Basta Comunicazione
Author URI: https://www.bastacomunicazione.com/
Description: Tema custom standalone per lo Studio Dentistico Paoloni di Trieste, costruito attorno al metodo F.A.R.O. Design system a token, campi gestiti con Secure Custom Fields.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pao-tema
Tags: custom-logo, custom-menu, featured-images, translation-ready

Tema basato su Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores è distribuito secondo i termini della GNU GPL v2 o successiva.
*/

/* -----------------------------------------------------------------------------
 * INDICE
 * 1. Font
 * 2. Design system (:root)
 * 3. Reset e base
 * 4. Tipografia
 * 5. Utility di layout
 * 6. Accessibilità
 * 7. Bottoni
 * 8. Barra di servizio e navigazione
 * 9. Menu mobile
 * 10. Footer
 * 11. Breakpoint
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 1. FONT — variable font self-hosted, convertiti in woff2 (-60% sul .ttf)
 * -------------------------------------------------------------------------- */

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("assets/fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
 * 2. DESIGN SYSTEM
 * Unica fonte dei valori. Nessun colore, font o spaziatura va scritto
 * altrove in forma letterale: sempre var(--token).
 * Il brand è a DUE colori: non introdurre nuovi valori cromatici.
 * -------------------------------------------------------------------------- */

:root {

	/* ---------- Palette ---------- */
	--pao-primary: #0d5257;             /* teal brand: nav, footer, hero, heading */
	--pao-primary-dark: #062b2e;        /* footer, hover scuro sul teal */
	--pao-primary-light: #f5f5f5;       /* sfondo di sezione alternato */
	--pao-accent: #ffb81c;              /* giallo azione: CTA primarie, eyebrow */
	--pao-whatsapp: #25d366;            /* verde di WhatsApp: solo il bottone fisso */
	--pao-accent-hover: #f0ab12;        /* giallo -6% luminosità, solo hover */
	--pao-accent-soft: #ebebeb;         /* sfondo dei box icona */

	--pao-text-on-primary: #ffffff;
	--pao-text-on-accent: #0d5257;
	--pao-body: #444444;                /* paragrafi */
	--pao-muted: #888888;               /* caption, note, copyright */
	--pao-bg: #ffffff;
	--pao-border: rgba(13, 82, 87, 0.1);        /* bordo card a riposo */
	--pao-border-strong: rgba(13, 82, 87, 0.2); /* bordo card hover, divisori */

	/* Su fondo teal il bianco vive su tre livelli: 1 / 0.65 / 0.40.
	   Headline / body / fine print. Non inventare opacità intermedie. */
	--pao-on-dark: #ffffff;
	--pao-on-dark-muted: rgba(255, 255, 255, 0.65);
	--pao-on-dark-faint: rgba(255, 255, 255, 0.4);
	--pao-on-dark-border: rgba(255, 255, 255, 0.25);

	/* ---------- Tipografia ---------- */
	--pao-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pao-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Scala BASE del design system. Le pagine la superano deliberatamente nei
	   momenti editoriali (h1 home 110px, h2 di sezione 60px): quelli sono
	   valori intenzionali, definiti nei token editoriali qui sotto. */
	--pao-fs-h1: 46px;
	--pao-lh-h1: 1.08;
	--pao-fw-h1: 800;
	--pao-ls-h1: -0.03em;

	--pao-fs-h2: 30px;
	--pao-lh-h2: 1.15;
	--pao-fw-h2: 800;
	--pao-ls-h2: -0.02em;

	--pao-fs-h3: 20px;
	--pao-lh-h3: 1.3;
	--pao-fw-h3: 700;
	--pao-ls-h3: -0.01em;

	--pao-fs-body: 15px;
	--pao-lh-body: 1.6;
	--pao-fw-body: 400;

	--pao-fs-small: 13px;
	--pao-lh-small: 1.5;

	--pao-fs-eyebrow: 11px;
	--pao-ls-eyebrow: 0.09em;

	/* ---------- Tipografia editoriale (fluida) ----------
	   I salti della tabella responsive del design (110→64→44 ecc.) sono resi
	   con clamp() sulla larghezza: dentro le fasce il testo scala, i
	   breakpoint restano per la STRUTTURA (§11 della skill nuovo-sito).
	   Ogni numero dentro calc()/clamp() ha la sua unità: senza, la funzione
	   salta e l'elemento torna alla dimensione naturale, in silenzio. */
	--pao-fs-hero: clamp(44px, 6.2vw, 84px);         /* h1 della home: 84px e' la misura del design */
	--pao-fs-page-title: clamp(44px, 4.4vw, 56px);   /* h1 delle pagine interne */
	--pao-fs-section: clamp(34px, 4.2vw, 60px);      /* h2 di sezione */
	--pao-fs-letter: clamp(60px, 6.8vw, 96px);       /* lettere F/A/R/O */
	--pao-fs-quotemark: clamp(64px, 8.4vw, 120px);   /* virgoletta del report */
	--pao-fs-quote: clamp(26px, 3.7vw, 52px);        /* citazione del report */
	--pao-fs-treatment: clamp(24px, 2.6vw, 34px);    /* titolo trattamento */
	--pao-fs-tech: 26px;                             /* titolo tecnologia */

	/* ---------- Spaziature (base 4px) ---------- */
	--pao-space-1: 4px;
	--pao-space-2: 8px;
	--pao-space-3: 12px;
	--pao-space-4: 16px;
	--pao-space-5: 24px;
	--pao-space-6: 32px;
	--pao-space-7: 48px;
	--pao-space-8: 64px;
	--pao-space-9: 96px;
	--pao-space-10: 128px;

	/* ---------- Layout ---------- */
	--pao-container: 1320px;                       /* max content width */
	--pao-gutter: clamp(20px, 3.4vw, 48px);        /* padding orizzontale sezione */
	--pao-section-y: clamp(72px, 9vw, 140px);      /* ritmo verticale standard */
	--pao-section-y-tight: clamp(64px, 7.6vw, 120px); /* fascia team */
	--pao-nav-h: 110px;                            /* usata da scroll-margin-top */

	/* ---------- Raggi ----------
	   Gli angoli vivi sono riservati alle sezioni full-bleed e alla pagina.
	   La pill 100px è parte dell'identità: ogni bottone, ogni tag. */
	--pao-radius-xs: 6px;
	--pao-radius-sm: 8px;    /* campi form */
	--pao-radius-md: 12px;   /* card servizi, box icona, thumbnail */
	--pao-radius-lg: 20px;   /* card grandi, box recensioni */
	--pao-radius-xl: 28px;   /* foto hero, banner */
	--pao-radius-pill: 100px;

	/* ---------- Ombre ---------- */
	--pao-shadow-sm: 0 1px 2px rgba(13, 82, 87, 0.06);
	--pao-shadow-md: 0 4px 16px rgba(13, 82, 87, 0.08);
	--pao-shadow-lg: 0 12px 32px rgba(13, 82, 87, 0.12);
	--pao-shadow-focus: 0 0 0 3px rgba(13, 82, 87, 0.18);
	--pao-shadow-hero: 0 40px 90px -30px rgba(6, 43, 46, 0.75);

	/* ---------- Movimento ----------
	   Nessun bounce, nessuna spring, nessun autoplay. */
	--pao-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pao-dur-fast: 120ms;   /* hover e press di colore */
	--pao-dur-base: 200ms;   /* transform e ombre */
	--pao-dur-slow: 360ms;   /* apertura accordion */

	/* ---------- Bordi ----------
	   I bordi delle card sono 0.5px, non 1px: quasi invisibili a riposo,
	   si rinforzano in hover. */
	--pao-hairline: 0.5px;
}

/* -----------------------------------------------------------------------------
 * 3. RESET E BASE
 * -------------------------------------------------------------------------- */

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

html {
	color: var(--pao-body);
	font-family: var(--pao-font-body);
	font-size: var(--pao-fs-body);
	line-height: var(--pao-lh-body);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/* Fondo pieno, senza motivo: nel design OGNI sezione dichiara il proprio fondo,
   quindi il body non si vede mai. Un motivo qui comparirebbe solo dietro alle
   sezioni che si dimenticano di dichiararlo, cioe' come sintomo di un errore. */
body {
	margin: 0;
	background-color: var(--pao-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--pao-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

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

/* -----------------------------------------------------------------------------
 * 4. TIPOGRAFIA
 * -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--pao-font-display);
	color: var(--pao-primary);
	margin: 0;
}

h1 {
	font-size: var(--pao-fs-h1);
	line-height: var(--pao-lh-h1);
	font-weight: var(--pao-fw-h1);
	letter-spacing: var(--pao-ls-h1);
}

h2 {
	font-size: var(--pao-fs-h2);
	line-height: var(--pao-lh-h2);
	font-weight: var(--pao-fw-h2);
	letter-spacing: var(--pao-ls-h2);
}

h3 {
	font-size: var(--pao-fs-h3);
	line-height: var(--pao-lh-h3);
	font-weight: var(--pao-fw-h3);
	letter-spacing: var(--pao-ls-h3);
}

p {
	margin: 0;
}

/* Occhiello. Porta spesso la keyword: quando è così va in un tag heading
   mantenendo questa classe (§9 della skill, principio keyword-in-heading). */
.pao-eyebrow {
	font-family: var(--pao-font-body);
	font-size: var(--pao-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--pao-ls-eyebrow);
	text-transform: uppercase;
	color: var(--pao-primary);
	margin: 0;
}

/* Occhiello su fondo scuro: giallo, piu' spaziato. Sta qui e non nel CSS di
   una singola pagina perche' lo usano sia la home sia le pagine interne: e' la
   classe che si dimentica di caricare, e l'occhiello esce del colore sbagliato
   senza che nulla segnali l'errore. */
.pao-eyebrow--accento {
	color: var(--pao-accent);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: var(--pao-space-5);
}

.pao-small {
	font-size: var(--pao-fs-small);
	line-height: var(--pao-lh-small);
	color: var(--pao-muted);
}

/* -----------------------------------------------------------------------------
 * 5. UTILITY DI LAYOUT
 * -------------------------------------------------------------------------- */

/* Il max-width comprende il gutter: cosi' la COLONNA DI CONTENUTO resta larga
   esattamente --pao-container (1320px), come nel design. Senza il calc() il
   contenuto sarebbe largo 1320 meno i due gutter, cioe' 96px in meno, e ogni
   sezione risulterebbe piu' stretta del riferimento. */
.pao-container {
	width: 100%;
	max-width: calc(var(--pao-container) + 2 * var(--pao-gutter));
	margin-inline: auto;
	padding-inline: var(--pao-gutter);
}

.pao-section {
	padding-block: var(--pao-section-y);
}

/* Superficie teal con la texture istituzionale: quadrifoglio con croce
   interna, eco del pittogramma. Non ricolorarla, non ritagliarla. */
.pao-surface-dark {
	background-color: var(--pao-primary);
	/* Ogni blocco puo' portarsi la sua, scritta inline da pao_texture_stile().
	   Chi non la porta ricade sul motivo del tema. */
	background-image: var(--pao-texture, url("assets/img/quadrifoglio-chiaro.svg"));
	background-size: var(--pao-texture-size, 120px);
	color: var(--pao-on-dark);
}

/* Gli occhielli sono heading per ragioni SEO (portano la parola chiave), ma
   non devono ereditare il bianco dei titoli: il :not() li esclude. Senza,
   questa regola batte per specificita' il colore giallo del modificatore, e
   l'occhiello esce bianco senza che nulla segnali l'errore. */
/*
 * Sulle superfici scure le intestazioni EREDITANO il colore invece di riceverne
 * uno fisso. Sembra un dettaglio ed e' la differenza fra un sistema che regge e
 * uno da rattoppare: una scheda chiara dentro una sezione scura - il modulo, il
 * riquadro giallo delle recensioni - dichiara il proprio `color`, e i suoi
 * titoli lo seguono da soli. Con un colore fisso uscivano bianchi su bianco, e
 * ogni scheda nuova avrebbe richiesto una riga in piu' qui.
 *
 * Il `:not()` lascia fuori gli occhielli, che hanno un colore loro.
 */
.pao-surface-dark h1:not(.pao-eyebrow),
.pao-surface-dark h2:not(.pao-eyebrow),
.pao-surface-dark h3:not(.pao-eyebrow) {
	color: inherit;
}

/* I blocchi che possono portarsi una texture scelta dal backend ma che di
   serie non ne hanno: senza scelta restano a fondo pieno, senza `none` da
   dichiarare in ogni singola sezione. */
.pao-metodo,
.pao-report,
.pao-servizi,
.pao-faq,
.pao-contatti,
.pao-ambienti,
.pao-surface-light {
	background-image: var(--pao-texture);
	background-size: var(--pao-texture-size);
	background-repeat: repeat;
}

/* Fondo bianco pieno come nel design: senza, si vedrebbe il body. */
.pao-metodo,
.pao-servizi,
.pao-faq,
.pao-ambienti,
.pao-direttore {
	background-color: var(--pao-bg);
}


.pao-surface-light {
	background-color: var(--pao-primary-light);
}

/* -----------------------------------------------------------------------------
 * 6. ACCESSIBILITÀ
 * -------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--pao-bg);
	border-radius: var(--pao-radius-sm);
	box-shadow: var(--pao-shadow-md);
	clip-path: none;
	color: var(--pao-primary);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: var(--pao-space-5);
	line-height: normal;
	padding: var(--pao-space-3) var(--pao-space-5);
	text-decoration: none;
	top: var(--pao-space-5);
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--pao-accent);
	outline-offset: 2px;
}

/* Gli anchor #staff-<nome> arrivano da altre pagine: senza questo il target
   finisce sotto la nav sticky. */
[id] {
	scroll-margin-top: var(--pao-nav-h);
}

@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;
	}
}

/* -----------------------------------------------------------------------------
 * 7. BOTTONI
 * La pill 100px è identità di brand: nessun bottone quadrato, mai.
 * Press = translateY(1px). Mai scale-down.
 * -------------------------------------------------------------------------- */

.pao-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pao-space-2);
	padding: 14px 28px;
	border: 0;
	border-radius: var(--pao-radius-pill);
	font-family: var(--pao-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--pao-dur-fast) var(--pao-ease-out),
		background-color var(--pao-dur-base) var(--pao-ease-out),
		color var(--pao-dur-base) var(--pao-ease-out),
		box-shadow var(--pao-dur-base) var(--pao-ease-out);
}

.pao-btn:active {
	transform: translateY(1px);
}

.pao-btn:focus-visible {
	outline: none;
	box-shadow: var(--pao-shadow-focus);
}

.pao-btn--primario {
	background-color: var(--pao-accent);
	color: var(--pao-text-on-accent);
}

.pao-btn--primario:hover {
	background-color: var(--pao-accent-hover);
}

.pao-btn--secondario {
	background-color: var(--pao-primary);
	color: var(--pao-text-on-primary);
}

.pao-btn--secondario:hover {
	background-color: var(--pao-primary-dark);
}

/* Ghost su fondo scuro: il bordo qui è 1px, non hairline, perché deve reggere
   da solo senza fondo. */
.pao-btn--ghost {
	background-color: transparent;
	color: var(--pao-on-dark);
	border: 1px solid var(--pao-on-dark-border);
}

.pao-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

.pao-btn--sm {
	padding: 10px 18px;
	font-size: 13px;
}

.pao-btn--lg {
	padding: 18px 36px;
	font-size: 16px;
}

/* -----------------------------------------------------------------------------
 * 7bis. BANNER FOTOGRAFICO
 * Lo usano la home (sezione metodo) e Lo studio (sezione tecnologie): sta qui e
 * non nel CSS di una pagina. E' il secondo componente che ho dovuto spostare
 * per questo motivo: se una classe serve a due pagine, sta in style.css.
 * -------------------------------------------------------------------------- */

.pao-banner {
	position: relative;
	height: clamp(220px, 30vw, 340px);
	margin-bottom: clamp(40px, 6vw, 72px);
	border-radius: var(--pao-radius-xl);
	background-color: var(--pao-primary-light);
	overflow: hidden;
}

.pao-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il gradiente e' piu' coperto sul mobile, dove la copy va a piena larghezza:
   senza, il testo bianco finisce sopra la parte chiara della foto. */
.pao-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(13, 82, 87, 0.95) 0%, rgba(13, 82, 87, 0.8) 45%, rgba(13, 82, 87, 0.55) 100%);
}

.pao-banner__copy {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: var(--pao-gutter);
	right: var(--pao-gutter);
	transform: translateY(-50%);
	color: var(--pao-on-dark);
}

.pao-banner__titolo {
	font-family: var(--pao-font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pao-on-dark);
}

.pao-banner__titolo em {
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}

/* --- Banner da md in su --- */
@media (min-width: 900px) {

	.pao-banner__copy {
		right: auto;
		max-width: 30ch;
		left: var(--pao-space-7);
	}

	.pao-banner::after {
		background: linear-gradient(90deg, rgba(13, 82, 87, 0.92) 0%, rgba(13, 82, 87, 0.55) 45%, rgba(13, 82, 87, 0.12) 100%);
	}

	.pao-banner__titolo {
		font-size: 30px;
	}
}

/* -----------------------------------------------------------------------------
 * 8. BARRA DI SERVIZIO E NAVIGAZIONE
 * Mobile-first: sotto md esiste solo la barra teal con logo e hamburger.
 * -------------------------------------------------------------------------- */

.pao-topbar {
	display: none; /* Compare da md in su. */
	background-color: var(--pao-bg);
	border-bottom: var(--pao-hairline) solid var(--pao-border);
	color: var(--pao-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.pao-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pao-space-5);
	/* A tutta larghezza come la nav sotto: sono la stessa cornice. */
	padding: 10px var(--pao-gutter);
}

.pao-topbar__meta {
	display: flex;
	align-items: center;
	gap: 28px;
}

.pao-topbar__stato {
	display: inline-flex;
	align-items: center;
}

/* Il pallino segue lo stato reale dello studio, calcolato dagli orari.
   Il verde è l'unico verde del sito: segnala "aperto" e non appartiene alla
   palette di brand, che è a due colori. Non riusarlo altrove. */
.pao-topbar__dot {
	width: 6px;
	height: 6px;
	margin-right: var(--pao-space-2);
	border-radius: 50%;
	background-color: var(--pao-muted);
}

.pao-topbar__dot--aperto {
	background-color: #16a34a;
}

.pao-topbar__dot--chiuso {
	background-color: var(--pao-border-strong);
}

/* Nel design il neretto ce l'ha il telefono, che e' l'unica voce cliccabile
   della barra. Ora che ogni voce puo' stare da entrambi i lati, la regola
   diventa quella vera: cliccabile = in evidenza. L'indirizzo, che link non e',
   resta leggero come prima. */
.pao-topbar a {
	color: var(--pao-primary);
	font-weight: 700;
	text-decoration: none;
	transition: opacity var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-topbar a:hover {
	opacity: 0.7;
}

.pao-nav {
	position: sticky;
	top: 0;
	z-index: 50;
}

.pao-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pao-space-5);
	/*
	 * A tutta larghezza, come nel design: niente max-width e niente
	 * centratura. La barra non e' contenuto, e' la cornice del sito - il
	 * marchio sta all'angolo e le azioni all'angolo opposto, a qualsiasi
	 * larghezza. Il respiro glielo da' solo il gutter, che e' lo stesso
	 * delle sezioni (48px larghi, 20px stretti: gli stessi valori
	 * dell'handoff).
	 */
	padding: var(--pao-space-4) var(--pao-gutter);
}

.pao-nav__brand {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

/* I file del logo sono ritagliati sul disegno, senza margine attorno: queste
   altezze sono percio' quelle del disegno, non di una scatola che lo contiene.
   Un logo esportato con del margine si vedrebbe piu' piccolo. */
.pao-nav__brand img {
	height: 39px;
	width: auto;
}

.pao-nav__menu {
	display: none; /* Compare da md in su. */
}

.pao-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--pao-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pao-nav__lista a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	border-radius: var(--pao-radius-pill);
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--pao-dur-fast) var(--pao-ease-out),
		color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-nav__lista a:hover,
.pao-nav__lista .current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--pao-on-dark);
}

.pao-nav__azioni {
	display: flex;
	align-items: center;
	gap: var(--pao-space-4);
	flex-shrink: 0;
}

.pao-nav__tel {
	display: none; /* Compare da lg: sotto ruberebbe spazio alla CTA. */
	align-items: center;
	gap: var(--pao-space-2);
	padding: 10px 16px;
	color: var(--pao-on-dark);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* Touch target 44px minimo (§11). */
/*
 * Sotto sm il bottone della barra sparisce.
 * A 390px la riga chiede 422px: marchio 185 + bottone 122 + hamburger 44, piu'
 * spazi e gutter. Qualcosa deve cedere, e cede il bottone: l'hamburger e' a un
 * dito di distanza e il pannello che apre contiene sia "Prenota visita" sia il
 * numero di telefono, quindi l'azione non si perde - si sposta di un tocco.
 * L'hamburger invece non ha alternative: senza, il menu diventa irraggiungibile.
 * (Nell'handoff il problema non si pone: e' un prototipo statico, senza menu
 * mobile, dove a quella larghezza le voci spariscono e basta.)
 */
.pao-nav__azioni > .pao-btn {
	display: none;
}

.pao-nav__hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pao-on-dark-border);
	border-radius: var(--pao-radius-pill);
	background-color: transparent;
	color: var(--pao-on-dark);
	cursor: pointer;
	transition: background-color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-nav__hamburger:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.pao-nav__hamburger-chiudi {
	display: none;
}

.pao-nav__hamburger[aria-expanded="true"] .pao-nav__hamburger-apri {
	display: none;
}

.pao-nav__hamburger[aria-expanded="true"] .pao-nav__hamburger-chiudi {
	display: inline-flex;
}

/* -----------------------------------------------------------------------------
 * 9. MENU MOBILE
 * Pannello a tutto schermo sotto la barra. Non era progettato nell'handoff:
 * costruito con gli elementi esistenti, nessun componente nuovo.
 * -------------------------------------------------------------------------- */

.pao-menu-mobile {
	position: fixed;
	inset: 0;
	z-index: 49;
	padding-top: 76px; /* Altezza della barra: il logo resta visibile sopra. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pao-menu-mobile__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--pao-space-8);
	min-height: 100%;
	padding: var(--pao-space-8) var(--pao-gutter) var(--pao-space-9);
}

.pao-menu-mobile__lista {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pao-menu-mobile__lista a {
	display: block;
	padding: var(--pao-space-3) 0;
	border-bottom: var(--pao-hairline) solid var(--pao-on-dark-border);
	color: var(--pao-on-dark);
	font-family: var(--pao-font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: var(--pao-ls-h2);
	text-decoration: none;
}

.pao-menu-mobile__azioni {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-3);
}

.pao-menu-mobile__azioni .pao-btn {
	width: 100%;
}

/* Blocca lo scroll della pagina mentre il pannello è aperto. */
body.pao-menu-aperto {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * 10. FOOTER
 * -------------------------------------------------------------------------- */

.pao-footer {
	background-color: var(--pao-primary-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.5);
	padding: var(--pao-space-7) 0 28px;
}

.pao-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pao-space-5);
	/*
	 * Il footer, a differenza della barra in alto, nel design e' contenuto.
	 * Il limite comprende il gutter perche' box-sizing e' border-box: con il
	 * solo --pao-container il padding rosicchierebbe il contenuto da dentro e
	 * il footer risulterebbe piu' stretto delle sezioni. Stesso calcolo di
	 * .pao-container, che ha gia' avuto questo problema.
	 */
	max-width: calc(var(--pao-container) + 2 * var(--pao-gutter));
	margin-inline: auto;
	padding-inline: var(--pao-gutter);
	font-size: 13px;
}

.pao-footer__logo {
	height: 45px;
	width: auto;
}

.pao-footer__payoff {
	font-family: var(--pao-font-display);
	font-size: 15px;
	font-style: italic;
	font-weight: 400;
	color: var(--pao-on-dark-muted);
}

/* Il wrap qui è esplicito e non ereditato: senza, la riga dei link ha un
   min-content di circa 465px, sfonda il viewport e genera scroll orizzontale
   su TUTTA la pagina. */
.pao-footer__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.pao-footer__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -----------------------------------------------------------------------------
 * PAGINE DI SOLO TESTO (privacy, cookie, pagine legali)
 * Usano il template di default: il contenuto arriva dall'editor e resta com'e'
 * scritto. Qui si regolano solo la misura della colonna e il respiro attorno.
 * -------------------------------------------------------------------------- */

.pao-testo {
	/* Stesso limite delle altre pagine, gutter compreso: cosi' il testo parte
	   dove partono le sezioni del resto del sito. */
	max-width: calc(var(--pao-container) + 2 * var(--pao-gutter));
	margin-inline: auto;
	padding-inline: var(--pao-gutter);
	padding-block: var(--pao-space-8) var(--pao-space-9);
}

/* La 404 e' l'unica pagina di solo testo scritta da noi, quindi qui il respiro
   fra titolo e testo lo diamo: nelle pagine legali il contenuto arriva
   dall'editor e resta come il cliente l'ha approvato. */
.pao-404 h1 {
	margin-bottom: var(--pao-space-5);
}

.pao-404 p {
	max-width: 60ch;
}

/* I due bottoni della 404, uno accanto all'altro e a capo sui telefoni. */
.pao-404__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pao-space-4);
	margin-top: var(--pao-space-6);
}

/* Riga legale: e' fine print, quindi sta al terzo livello di opacita' del
   design system (0.40) e non a quello della riga dei link sopra. Stesso
   limite di larghezza del footer, calcolato col gutter dentro. */
.pao-footer__legale {
	max-width: calc(var(--pao-container) + 2 * var(--pao-gutter));
	margin: var(--pao-space-5) auto 0;
	padding-inline: var(--pao-gutter);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
	color: var(--pao-on-dark-faint);
	/* Spazio per il bottone WhatsApp, che e' fisso nell'angolo e sta proprio
	   sopra l'ultima riga: da telefono le righe arrivano al bordo destro e ci
	   finirebbero sotto. Da md la riga finisce molto prima e non serve.
	   72px: il bottone occupa gli 80px in fondo (56 di tondo + 24 di margine)
	   e il footer ne mette gia' 28 suoi. */
	padding-bottom: 72px;
}

/* La nota sulle immagini va a capo per conto suo: e' un blocco, non un pezzo
   di frase in coda ai recapiti. */
.pao-footer__legale span {
	display: block;
}

@media (min-width: 900px) {

	.pao-footer__legale {
		padding-bottom: 0;
	}
}

.pao-footer a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-footer a:hover {
	color: var(--pao-on-dark);
}

/* -----------------------------------------------------------------------------
 * 11. BREAKPOINT
 * Sistema standard: sm 640 · md 900 (switch mobile/desktop) · lg 1200 · xl 1600.
 * Valori letterali, mobile-first, nessuna soglia ad hoc.
 * -------------------------------------------------------------------------- */

/* --- md: da qui in su è desktop --- */
@media (min-width: 640px) {

	.pao-nav__azioni > .pao-btn {
		display: inline-flex;
	}
}

@media (min-width: 900px) {

	.pao-topbar {
		display: block;
	}

	.pao-nav__menu {
		display: block;
	}

	.pao-nav__inner {
		padding-block: var(--pao-space-5);
	}

	.pao-nav__brand img {
		height: 45px;
	}

	.pao-nav__hamburger {
		display: none;
	}

	.pao-menu-mobile {
		display: none !important;
	}
}

/* --- lg: navigazione a piena taglia ---
   Fra md e lg la barra resta compatta (logo 56px, voci 13px, telefono
   nascosto). Nel design questo avveniva a 1100px con un breakpoint dedicato,
   perché la barra andava in overflow prima delle griglie di contenuto: qui lo
   stesso effetto si ottiene dentro le soglie standard. */
@media (min-width: 1200px) {

	.pao-nav__brand img {
		height: 58px;
	}

	.pao-nav__lista a {
		padding: 12px 18px;
		font-size: 14px;
	}

	.pao-nav__tel {
		display: inline-flex;
	}
}

/* -----------------------------------------------------------------------------
 * Bottone WhatsApp fisso
 *
 * Sta sotto la navigazione (z-index 50) e sotto il menu mobile (49), che lo
 * copre da solo quando e' aperto: nessuna regola in piu' per nasconderlo.
 * Il verde e' quello di WhatsApp e non un colore del brand: e' il segnale che
 * fa riconoscere il bottone a colpo d'occhio.
 * -------------------------------------------------------------------------- */

.pao-whatsapp {
	position: fixed;
	z-index: 48;
	right: var(--pao-space-5);
	/* La safe area tiene il bottone sopra la barra di sistema degli iPhone. */
	bottom: calc(var(--pao-space-5) + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--pao-radius-pill);
	background-color: var(--pao-whatsapp);
	color: #fff;
	box-shadow: var(--pao-shadow-lg);
	transition:
		transform var(--pao-dur-base) var(--pao-ease-out),
		box-shadow var(--pao-dur-base) var(--pao-ease-out);
}

.pao-whatsapp:hover,
.pao-whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--pao-shadow-hero);
}

@media (prefers-reduced-motion: reduce) {

	.pao-whatsapp {
		transition: none;
	}

	.pao-whatsapp:hover,
	.pao-whatsapp:focus-visible {
		transform: none;
	}
}

/* Le due varianti dell'opzione "Dove mostrarlo". */
.pao-whatsapp--solo-desktop {
	display: none;
}

@media (min-width: 900px) {

	.pao-whatsapp--solo-mobile {
		display: none;
	}

	.pao-whatsapp--solo-desktop {
		display: inline-flex;
	}
}