/*
Theme Name: New TravelArt
Theme URI: https://www.newtravelart.com/
Author: New TravelArt
Description: Tema custom New TravelArt
Version: 1.22.1
Text Domain: nta
*/

:root {
	/* --- Colori (palette "Flusso 2") --- */
	--nta-cream: #FAF3E0;      /* fondo pagina */
	--nta-teal: #71BCC6;       /* barra menu, footer, blocchi */
	--nta-teal-dark: #316967;  /* hover del menu, stati "confermato" */
	--nta-pink: #F5C8C8;       /* fasce e superfici rosa */
	--nta-gold: #FFEB9F;       /* bottoni */
	--nta-coral: #D16E6D;      /* accento (titoli, badge, avvisi) */
	--nta-coral-dark: #9E3F3E; /* accento per testi piccoli: contrasto AA su bianco e crema */
	--nta-white: #fff;
	--nta-black: #000;

	--nta-text: var(--nta-black);
	--nta-text-muted: #555;
	--nta-text-on-teal: var(--nta-white); /* testo su barra menu e footer (#000 per contrasto massimo) */
	--nta-link: var(--nta-coral-dark);
	--nta-disabled: #ddd;
	--nta-bell-off: #cfcfcf;   /* campanella "Azioni richieste": niente da fare */
	--nta-bell-on: #FFC928;    /* campanella "Azioni richieste": c'è qualcosa da fare */
	--nta-star: #F2B01E;       /* stelle di feedback e recensioni */

	/* --- Tipografia: UNICO punto in cui si decidono le dimensioni ---
	   clamp(min, fluido, max): si adattano da sole allo schermo, niente media query. */
	--nta-font-title: 'Kitchen Whisker', 'Montserrat', Arial, sans-serif;  /* h1, h2 e bottoni */
	--nta-font-accent: var(--nta-font-text);  /* h3, h5, fasce rosa, intestazioni tabelle: var(--nta-font-title) per usare anche qui Kitchen Whisker */
	--nta-font-text: 'Montserrat', Arial, Helvetica, sans-serif;

	--nta-fs-h1: clamp(2.2rem, 1.28rem + 4vw, 3.6rem);      /* 35 → 58px */
	--nta-fs-h2: clamp(1.6rem, 1.12rem + 2.2vw, 2.4rem);    /* 26 → 38px */
	--nta-fs-h3: clamp(1.2rem, 1rem + 0.8vw, 1.4rem);       /* 19 → 22px */
	--nta-fs-h4: 1rem;                                      /* 16px */
	--nta-fs-h5: 1.2rem;                                    /* 19px */
	--nta-fs-h6: 0.8rem;                                    /* 13px */
	--nta-fs-lead: clamp(0.9rem, 0.9rem + 0.5vw, 1.2rem);   /* 14 → 18px: testi in evidenza (hero, fasce) */
	--nta-fs-body: clamp(0.8rem, 0.76rem + 0.2vw, 0.85rem); /* 13 → 14px: p, li */
	--nta-fs-small: 14px;                                   /* etichette, note, menu */
	--nta-fs-xs: 0.6875rem;                                 /* 11px: badge, didascalie (sotto gli 11px su telefono non si legge) */
	--nta-lh-body: 1.65;
	--nta-lh-title: 1;

	/* --- Bordi, angoli, ombre --- */
	--nta-border-width: 2px;
	--nta-border-color: var(--nta-black);
	--nta-border: var(--nta-border-width) solid var(--nta-border-color);
	--nta-block-radius: 13px;  /* card e riquadri */
	--nta-field-radius: 8px;  /* campi, pillole, box piccoli */
	--nta-btn-radius: 6px;     /* bottoni */
	--nta-shadow-color: var(--nta-black);
	--nta-control-shadow: 0 2.4px 0 0 var(--nta-shadow-color); /* bottoni e tessere cliccabili */
	--nta-card-shadow: none;                                  /* riquadri statici: nel design non hanno ombra */
	--nta-press: 2.4px;                                         /* di quanto "affonda" un elemento cliccabile */
	--nta-section-line: inset 0 calc(var(--nta-border-width) * -1) 0 0 var(--nta-border-color); /* riga nera sotto ai blocchi */

	/* --- Bottone (.bottone) --- */
	--nta-btn-bg: var(--nta-gold);
	--nta-btn-bg-active: var(--nta-pink);
	--nta-btn-color: var(--nta-black);
	--nta-btn-font-size: clamp(0.9rem, 1rem + 0.4vw, 1.5rem); /* 14 → 18px */
	--nta-btn-padding: 0.5em 1.1em 0.4em;

	/* --- Layout --- */
	--nta-container-width: 960px;
	--nta-section-padding-y: 0px;   /* home: i blocchi sono alti quanto la finestra */
	--nta-inner-padding-y: 40px;   /* pagine interne: spazio sopra/sotto dei blocchi */
	--nta-menu-offset: 42px;        /* dal bordo alto alla barra del menu (spazio per i bottoni account) */
	--nta-menu-height: 64px;
	--nta-menu-clearance: 136px;    /* spazio lasciato dalla prima sezione sotto al menu */
	--ntra-band-ratio: 30%;         /* altezza delle fasce rosa dentro un blocco */
	--nta-pattern: none;            /* texture di sfondo dei blocchi: url(img/pattern.png) per riattivarla */
}


/* =====================================================================
   2. FONT
   (inclusi nel tema, cartella fonts/: niente Google Fonts, più veloce sul telefono)
   ===================================================================== */
@font-face {font-family: 'Kitchen Whisker'; src: url(fonts/kitchen-whisker.woff) format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'Montserrat'; src: url(fonts/montserrat-500.woff2) format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap;}
@font-face {font-family: 'Montserrat'; src: url(fonts/montserrat-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: 'Montserrat'; src: url(fonts/montserrat-700.woff2) format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap;}


/* =====================================================================
   3. BASE E TIPOGRAFIA
   ===================================================================== */
*, *::before, *::after {margin: 0; padding: 0;}

html {scroll-padding-top: 16px;}
body {overflow-x: hidden; font-family: var(--nta-font-text); font-size: var(--nta-fs-body); font-weight: 500; line-height: var(--nta-lh-body); color: var(--nta-text); background: var(--nta-cream);}

img, svg, video {max-width: 100%; height: auto;}
img {vertical-align: middle;}
picture {display: contents;} /* <picture> con WebP: l'immagine si comporta come prima */

h1, h2 {font-family: var(--nta-font-title); font-weight: normal; line-height: var(--nta-lh-title);}
h3, h5 {font-family: var(--nta-font-accent); font-weight: 700; line-height: var(--nta-lh-title);}
h4, h6 {font-family: var(--nta-font-text); font-weight: 700; line-height: 1.3;}

h1 {font-size: var(--nta-fs-h1);}
article > h1 {font-size: var(--nta-fs-h2); margin: 8px 0 24px;} /* titolo di pagine e articoli: grande come h2 */
h2 {font-size: var(--nta-fs-h2); margin: 8px 0 24px; text-align: center;}
h3 {font-size: var(--nta-fs-h3); margin: 20px 0; text-transform: uppercase;}
.ntra-roadmap-card h3 {font-size: var(--nta-fs-h4)}
h4 {font-size: var(--nta-fs-h4); margin: 4px 0;}
h5 {font-size: var(--nta-fs-h5); margin: 0 0 8px;}
h6 {font-size: var(--nta-fs-h6); margin: 0 0 6px;}

h2 strong {color: var(--nta-coral);}
h2 a {color: inherit;}
h2 a:hover {color: var(--nta-coral);}

p, li, dd, details {font-size: var(--nta-fs-body); line-height: var(--nta-lh-body);}
small {font-size: var(--nta-fs-small);}
strong, b {font-weight: 700;}
strong {color: var(--nta-coral-dark);}

a {color: var(--nta-link); font-weight: 700; text-decoration: none; cursor: pointer; transition: color 0.2s ease;}
a:hover {color: var(--nta-coral); text-decoration: underline;}

ul {list-style: square url(img/list.png) inside;}
ul li {margin: 16px 0;}

hr {margin: 0 0 24px; border: none; border-top: 1px dashed rgba(0, 0, 0, 0.6);}

blockquote, figure, address {font-style: normal;}

/* Campi e bottoni nativi: partono "neutri", l'aspetto lo danno le classi */
button, input, select, textarea {font: inherit; color: inherit;}
button {background: none; border: 0; cursor: pointer;}
button:disabled {cursor: not-allowed;}


/* =====================================================================
   4. BOTTONE UNICO: .bottone
   Vale per <a>, <button> e <input type="submit">.
   - .bottone.is-secondary  -> bianco (azioni secondarie: annulla, chiudi, logout)
   - .bottone.active / [aria-current] -> stato selezionato (schede, filtri)
   Per cambiare tutti i bottoni del sito basta questo blocco (o le variabili --nta-btn-*).
   ===================================================================== */
.bottone,
.login input[type=submit] {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
	width: auto; max-width: 100%; margin: 8px 0; padding: var(--nta-btn-padding); box-sizing: border-box;
	font-family: var(--nta-font-title); font-size: var(--nta-btn-font-size); font-weight: normal; line-height: 1.1; text-align: center; text-decoration: none; text-transform: uppercase;
	color: var(--nta-btn-color); background: var(--nta-btn-bg);
	border: var(--nta-border); border-radius: var(--nta-btn-radius); box-shadow: var(--nta-control-shadow);
	cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* Freccia ">" sui bottoni-link, come nel design */
a.bottone::after {content: ""; width: 0.45em; height: 0.45em; border-top: 0.12em solid currentColor; border-right: 0.12em solid currentColor; transform: rotate(45deg); flex: 0 0 auto;}

.bottone:hover, .bottone:focus-visible,
.login input[type=submit]:hover {color: var(--nta-btn-color); text-decoration: none; transform: translateY(var(--nta-press)); box-shadow: 0 0 0 0 var(--nta-shadow-color);}
.bottone:active {background: var(--nta-btn-bg-active);}

.bottone.is-secondary {background: var(--nta-white);}
.bottone.is-secondary:hover {background: var(--nta-btn-bg);}
.bottone.active, .bottone[aria-current] {background: var(--nta-btn-bg);}

.bottone:disabled, .bottone[aria-disabled="true"] {background: var(--nta-disabled); color: var(--nta-text-muted); box-shadow: none; transform: none; cursor: not-allowed;}
.bottone[hidden] {display: none !important;} /* il JS nasconde i bottoni con l'attributo hidden */


/* =====================================================================
   5. UTILITÀ E ACCESSIBILITÀ
   ===================================================================== */
.txt_cent {text-align: center;}

/* Testo solo per screen reader (stesso nome della classe di WordPress) */
.screen-reader-text {position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}

/* Stelle in sola lettura (feedback viaggi, recensioni): .ntra-stars-fill = parte piena */
.ntra-stars {position: relative; display: inline-block; color: var(--nta-disabled); font-size: 1.05em; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: -0.08em;}
.ntra-stars::before, .ntra-stars-fill::before {content: "★★★★★";}
.ntra-stars-fill {position: absolute; top: 0; left: 0; overflow: hidden; color: var(--nta-star);}

/* Contorno ben visibile per chi naviga da tastiera */
:focus-visible {outline: 2.4px solid var(--nta-coral-dark); outline-offset: 2.4px;}

/* Link "Salta al contenuto" (header.php): invisibile finché non riceve il focus */
a[href="#contenuto"] {position: absolute; left: 13px; top: -80px; z-index: 100; padding: 8px 13px; background: var(--nta-white); color: var(--nta-black); border: var(--nta-border); border-radius: var(--nta-btn-radius);}
a[href="#contenuto"]:focus {top: 13px;}

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


/* =====================================================================
   6. TESTATA
   ===================================================================== */
.cont_menu {position: absolute; top: var(--nta-menu-offset); left: 0; z-index: 10; width: 100%; height: var(--nta-menu-height); background: var(--nta-teal); border-top: var(--nta-border); border-bottom: var(--nta-border);}
.menu {position: relative; width: 90%; max-width: var(--nta-container-width); height: 100%; margin: 0 auto;}

/* La barra è fuori dal flusso: la prima sezione parte dal bordo alto e lascia sotto al menu lo spazio --nta-menu-clearance */
main#contenuto > :first-child {padding-top: var(--nta-menu-clearance);}

/* Logo: cerchio rosa che sborda dalla barra */
.logo {position: relative; top: -28px; z-index: 3; float: left; width: 128px; height: 128px; padding: 8px; margin: 0 20px 0 0; border: var(--nta-border); border-radius: 50%; background: var(--nta-pink); transition: transform 0.2s ease;}
.logo a {display: block; height: 100%; border-radius: 50%;}
.logo img {display: block; width: 100%; height: 100%;}
.logo a {position: relative;}
/* Al passaggio del mouse: casetta in trasparenza sopra il logo = "torna alla home" (testata e footer) */
.logo a::after {content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v11h5v-6h4v6h5V9'/%3E%3C/svg%3E") center / 45% no-repeat; opacity: 0; transition: opacity 0.25s ease;}
.logo:hover a::after, .logo a:focus-visible::after {opacity: 1;}

/* Voci del menu */
.cont_menu nav {height: 100%;}
.cont_menu nav ul {display: flex; align-items: center; height: 100%; list-style: none;}
.cont_menu nav li {position: relative; margin: 0; font-size: var(--nta-fs-small);}
.cont_menu nav li a {display: flex; align-items: center; height: var(--nta-menu-height); padding: 0 30px; box-sizing: border-box; color: var(--nta-text-on-teal); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease;}
.cont_menu nav li a:hover, .cont_menu nav li.current-menu-item > a {background: var(--nta-teal-dark); color: var(--nta-white);}

/* Bottone "Richiedi appuntamento" (ultimo elemento del menu): è un .bottone */
.cont_menu nav li.nta-menu-cta {margin-left: auto;}
.cont_menu nav li.nta-menu-cta a.bottone {height: auto; margin: 0; padding: var(--nta-btn-padding); color: var(--nta-btn-color); background: var(--nta-btn-bg); font-size: var(--nta-fs-lead);}
.cont_menu nav li.nta-menu-cta a.bottone:hover {background: var(--nta-btn-bg);}

/* Bottone ☰ del menu mobile (visibile solo sotto i 980px) */
.nav_mobile {display: none; float: right; height: var(--nta-menu-height); padding: 0 16px; color: var(--nta-text-on-teal); font-size: 24px; line-height: 1;}
.nav_mobile[aria-expanded="true"] {background: var(--nta-teal-dark);}
@media (hover: hover) {.nav_mobile:hover {background: var(--nta-teal-dark);}} /* su touch l'hover resterebbe "incollato" dopo il tocco */

/* Bottoni account (login / pannello / logout): sopra la barra, a destra */
.nta-account-bar {position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: flex; gap: 8px;}
.nta-account-bar .bottone {position: relative; margin: 0; padding: 5px 11px 3px; font-size: var(--nta-fs-small);}
.nta-account-bar .bottone.is-admin {background: var(--nta-teal-dark); color: var(--nta-white);}
.nta-account-bar .bottone::after {display: none;}
.nta-account-bar .ntra-hero-dot-badge {top: -7px; right: -7px;}

/* Campanella "Azioni richieste" (inc/user/ntra-required-actions.php): grigia o gialla con "!" rosso */
.nta-account-bar .ntra-bell {padding: 3px 8px 1px;}
/* Selettore lingua IT/EN (solo con Polylang): due bottoni compatti uniti, la lingua attiva piena. */
.nta-lang-switch {display: inline-flex;}
.nta-account-bar .nta-lang-switch .bottone {min-width: 0; padding-inline: 8px; background: var(--nta-white); color: var(--nta-teal-dark);}
.nta-account-bar .nta-lang-switch .bottone + .bottone {margin-left: -1px;}
.nta-account-bar .nta-lang-switch .bottone.active {background: var(--nta-teal-dark); color: var(--nta-white);}
.ntra-bell-icon {width: 18px; height: 18px; vertical-align: middle; fill: var(--nta-bell-off); stroke: var(--nta-text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
.ntra-bell-icon path + path {fill: none;}
.ntra-bell.has-actions .ntra-bell-icon {fill: var(--nta-bell-on); stroke: var(--nta-black); transform-origin: 50% 10%; animation: ntra-bell-ring 1.2s ease-in-out 0.6s 2;}
@keyframes ntra-bell-ring {0%, 100% {transform: rotate(0);} 20% {transform: rotate(14deg);} 40% {transform: rotate(-12deg);} 60% {transform: rotate(8deg);} 80% {transform: rotate(-4deg);}}

/* Desktop: sottomenu a tendina bianca */
@media (min-width: 981px) {
	.cont_menu nav li.menu-item-has-children > a::before {content: ""; width: 5px; height: 5px; margin: 0 6px 3px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);}
	.cont_menu nav ul ul {position: absolute; top: 100%; left: 0; z-index: 20; display: none; flex-direction: column; align-items: stretch; height: auto; min-width: 184px; padding: 5px 0; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-field-radius);}
	.cont_menu nav li:hover > ul, .cont_menu nav li:focus-within > ul {display: flex;}
	.cont_menu nav li li a {height: auto; padding: 8px 14px; color: var(--nta-black);}
	.cont_menu nav li li a:hover {background: var(--nta-gold); color: var(--nta-black);}
}


/* =====================================================================
   7. SOCIAL (icone SVG: ntra_render_social_links() in inc/core/ntra-helpers.php)
   ===================================================================== */
.social ul {display: flex; justify-content: center; gap: 10px; list-style: none;}
.social li {margin: 0;}
.social a {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--nta-black); border: var(--nta-border); border-radius: 50%; background: var(--nta-white); transition: transform 0.15s ease, background-color 0.15s ease;}
.social a:hover {background: var(--nta-gold); color: var(--nta-black); transform: translateY(-2px);}
.social svg {width: 16px; height: 16px; fill: currentColor;}
.ntra-section .social {margin: 8px 0 16px;}


/* =====================================================================
   8. FOOTER
   Griglia a 3 colonne:  logo      | menu + bottone (su 2 colonne)
                         logo      | indirizzo, telefono, email
                         copyright | social                | P.IVA
   La riga bianca verticale fra logo e contenuti è il ::before del contenitore.
   ===================================================================== */
footer {background: var(--nta-teal); color: var(--nta-text-on-teal); border-top: var(--nta-border);}
footer > .ntra-container {display: grid; grid-template-columns: 128px 1fr auto; grid-template-areas: "logo nav nav" "logo info info" "copy social piva"; align-items: center; gap: 16px 32px; padding: 32px 0 24px;}
footer > .ntra-container::before {content: ""; grid-area: 1 / 2 / -1 / 3; justify-self: start; height: 100%; margin-left: -16px; border-left: 2px solid var(--nta-text-on-teal);}
footer a, footer a:hover {color: var(--nta-text-on-teal);}
footer p, footer address, footer li {margin: 0; font-size: var(--nta-fs-small);}

footer .logo {grid-area: logo; float: none; top: 0; justify-self: center; width: 96px; height: 96px; margin: 0;}
footer > .ntra-container > p:first-of-type {grid-area: copy; text-align: center;}
footer > .ntra-container > p:last-child {grid-area: piva; text-align: right;}

footer nav {grid-area: nav;}
footer nav ul.nav_menu {display: flex; flex-wrap: wrap; align-items: center; gap: 5px 24px; list-style: none;}
footer nav li.nta-menu-cta {margin-left: auto;}
footer nav li.nta-menu-cta a.bottone {margin: 0; color: var(--nta-btn-color); font-size: var(--nta-fs-lead);}

footer address {grid-area: info; display: flex; flex-wrap: wrap; gap: 5px 24px;}

footer .social {grid-area: social; display: flex; align-items: center; gap: 11px;}
footer .social a {width: 26px; height: 26px; background: transparent; color: var(--nta-text-on-teal); border-color: var(--nta-text-on-teal);}
footer .social a:hover {background: var(--nta-white); color: var(--nta-black);}
footer .social svg {width: 13px; height: 13px;}

/* Banner cookie (inc/core/ntra-cookie-consent.php): in basso, sopra ai contenuti */
.ntra-cookie-banner {position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: 760px; margin: 0 auto; padding: 16px 20px; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-block-radius); box-shadow: var(--nta-control-shadow);}
.ntra-cookie-banner[hidden] {display: none;}
.ntra-cookie-banner p {flex: 1 1 320px; margin: 0; font-size: var(--nta-fs-small);}
.ntra-cookie-banner-actions {display: flex; gap: 10px;}
.ntra-cookie-banner-actions .bottone {margin: 0;}


/* =====================================================================
   9. SISTEMA A BLOCCHI
   .ntra-section            blocco a tutta larghezza (in home alto quanto la finestra)
   .ntra-section--white/teal/coral/pattern-*   sfondi
   .ntra-section--banded + --band-bottom        blocco con fascia rosa sotto
   .ntra-container          larghezza massima e centratura
   .ntra-cols-1/2/3/4       colonne (col-1-3 / col-2-3 dentro cols-2)
   ===================================================================== */
/* Home a schede: su desktop, finito lo scroll, la pagina si aggancia da sola alla scheda
   più vicina (basta scendere oltre metà per passare alla successiva).
   Lo scroll avviene su <html>, quindi l'aggancio va messo lì.
   mandatory = aggancio sempre | proximity = solo se si è vicini all'inizio di una scheda */
html:has(> body.nta-home) {scroll-behavior: smooth; scroll-padding-top: 0;}
@media (min-width: 981px) and (min-height: 600px) {
	html:has(> body.nta-home) {scroll-snap-type: y proximity;}
	.nta-home .ntra-section {scroll-snap-align: start;}
	.nta-home footer {scroll-snap-align: end;} /* il footer resta raggiungibile */
}

.ntra-section {display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: var(--nta-section-padding-y) 0; box-shadow: var(--nta-section-line);}
.nta-home .ntra-section {min-height: 100vh; min-height: 100dvh;}
body:not(.nta-home) .ntra-section {padding: var(--nta-inner-padding-y) 0;}

/* Sfondi (i "pattern" usano la texture --nta-pattern, spenta di default) */
.ntra-section--white {background: var(--nta-white);}
.ntra-section--teal, .ntra-section--pattern-teal {background: var(--nta-teal) var(--nta-pattern);}
.ntra-section--coral, .ntra-section--pattern-coral {background: var(--nta-pink) var(--nta-pattern);}
.ntra-section--pattern-gold {background: var(--nta-gold) var(--nta-pattern);}
.ntra-section--pattern-grey {background: var(--nta-cream) var(--nta-pattern);}

/* Sui blocchi teal i titoli sono bianchi, come nel design */
.ntra-section--teal > .ntra-container > h2, .ntra-section--pattern-teal > .ntra-container > h2,
.ntra-section--teal h2 strong, .ntra-section--pattern-teal h2 strong {color: var(--nta-white);}

.ntra-container {width: 90%; max-width: var(--nta-container-width); margin: 0 auto;}

.ntra-cols-1, .ntra-cols-2, .ntra-cols-3, .ntra-cols-4 {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px;}
.ntra-cols-1 > * {flex: 0 1 100%;}
.ntra-cols-2 > * {flex: 0 1 calc(50% - 16px);}
.ntra-cols-3 > * {flex: 0 1 calc(33.333% - 22px); align-self: stretch;}
.ntra-cols-4 > * {flex: 0 1 calc(25% - 24px); align-self: stretch;}
.ntra-cols-2 > .ntra-col-1-3 {flex: 0 0 calc(33.333% - 16px);}
.ntra-cols-2 > .ntra-col-2-3 {flex: 0 0 calc(66.666% - 16px);}

/* Blocco con fascia: colonna verticale, la fascia rosa va sotto al contenuto */
.ntra-section--banded {flex-direction: column; align-items: stretch;}
.ntra-section-band, .ntra-section-main {display: flex; align-items: center; width: 100%; min-height: 0; box-sizing: border-box; box-shadow: var(--nta-section-line);}
.ntra-section-band {flex: 0 0 var(--ntra-band-ratio); min-height: 120px; box-shadow: var(--nta-section-line), inset 0 var(--nta-border-width) 0 0 var(--nta-border-color);}
.ntra-section-main {flex: 1 1 auto;}
.ntra-section--band-bottom .ntra-section-band {order: 2;}
.ntra-section--band-bottom .ntra-section-main {order: 1;}

/* Testo della fascia nel font dei titoli, bottone a destra */
.ntra-section-band p {font-family: var(--nta-font-accent); font-weight: 700;line-height: 1.2; text-transform: uppercase;}
.ntra-section-band .ntra-col-1-3 {text-align: right;}


/* =====================================================================
   10. HOME
   ===================================================================== */
/* Hero */
.ntra-hero-body {display: flex; flex: 1; align-items: center; justify-content: center; text-align: center;}
.ntra-hero-body hgroup p {margin: 4px 0 12px; font-size: var(--nta-fs-h4); font-weight: 700;}
.ntra-hero-body h2 {margin-bottom: 16px;}

/* Riquadro account in hero (benvenuto / pallini dell'utente) */
.ntra-hero-plate, .ntra-hero-account {max-width: 368px; margin: 16px auto 0; padding: 12px 16px; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-block-radius); box-shadow: var(--nta-card-shadow);}
.ntra-hero-account p, .ntra-hero-plate-greeting {font-size: var(--nta-fs-body);}
.ntra-hero-account-actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px;}
.ntra-hero-plate-greeting {margin: 8px 0;}

.ntra-hero-dots {display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none;}
.ntra-hero-dots li {margin: 0;}
.ntra-hero-dot {position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--nta-black); font-size: var(--nta-fs-xs); text-transform: uppercase;}
.ntra-hero-dot:hover {color: var(--nta-black); text-decoration: none;}
.ntra-hero-dot-icon {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 43px; height: 43px; font-size: 19px; background: var(--ntra-dot-color, var(--nta-teal)); border: var(--nta-border); border-radius: 50%; box-shadow: var(--nta-control-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;}
.ntra-hero-dot:hover .ntra-hero-dot-icon {transform: translateY(var(--nta-press)); box-shadow: none;}

/* Pallino con il numero di novità (hero, bottone Inbox) */
.ntra-hero-dot-badge {position: absolute; top: -2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #999; color: var(--nta-white); font-family: var(--nta-font-text); font-size: var(--nta-fs-xs); font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--nta-white);}
.ntra-hero-dot-badge.is-alert {background: var(--nta-coral-dark);}

/* Card (home: icona + testo + bottone; riusata anche altrove) */
.ntra-card {height: 100%; box-sizing: border-box; padding: 4% 3%; text-align: center; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-block-radius); box-shadow: var(--nta-card-shadow);}
.ntra-card img {width: 80%; margin: 0 auto 8px;}
.ntra-card p {min-height: 72px;}
.ntra-section .ntra-trips-featured {padding: 0;}

/* Recensioni */
.ntra-testimonials {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;}
.ntra-testimonial {flex: 1 1 224px; max-width: 272px; text-align: left;}
.ntra-testimonial p {min-height: 0; font-style: italic;}
.ntra-testimonial cite {display: block; margin-top: 12px; color: var(--nta-text-muted); font-size: var(--nta-fs-small); font-style: normal; font-weight: 700;}

/* Carousel recensioni (inc/reviews/ntra-reviews.php, assets/js/ntra-reviews.js): scorrimento nativo con scroll-snap */
.ntra-reviews-summary {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--nta-fs-small);}
.ntra-reviews-summary li {margin: 0;}
.ntra-reviews-summary a {color: var(--nta-text); text-decoration: none;}
.ntra-reviews-summary a > span:not(.ntra-stars) {color: var(--nta-text-muted);}
.ntra-reviews-viewport {overflow-x: auto; padding: 4px 4px 8px; scroll-snap-type: x mandatory; scrollbar-width: none;}
.ntra-reviews-viewport::-webkit-scrollbar {display: none;}
.ntra-testimonials.ntra-reviews-track {flex-wrap: nowrap; justify-content: flex-start; margin: 0; padding: 0; list-style: none;}
.ntra-reviews-slide {display: flex; flex: 0 0 calc((100% - 48px) / 3); margin: 0; scroll-snap-align: start;}
.ntra-reviews-slide .ntra-testimonial {display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0;}
.ntra-reviews-slide .ntra-testimonial p {display: -webkit-box; margin: 8px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 7;}
.ntra-reviews-slide cite {display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; color: var(--nta-text);}
.ntra-reviews-slide cite small {display: block; color: var(--nta-text-muted); font-weight: 400;}
.ntra-reviews-initial {display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--nta-pink); border: var(--nta-border); border-radius: 50%; font-weight: 700;}
.ntra-reviews-controls {display: flex; justify-content: center; gap: 10px; margin-top: 16px;}
.ntra-reviews-controls .bottone {min-width: 44px; margin: 0;}
.ntra-reviews-controls .bottone[hidden] {display: none;}

/* Navigatore a pallini (assets/js/ntra-section-nav.js): compare dopo la prima sezione */
.ntra-section-nav {position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 21px; padding: 8px 14px; background: var(--nta-white); border: var(--nta-border); border-radius: 24px; transform: translate(-50%, 0); transition: opacity 0.3s ease, transform 0.3s ease;}
.ntra-section-nav:not(.is-visible) {opacity: 0; pointer-events: none; transform: translate(-50%, 16px);}
.ntra-section-nav::before {content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 2px; background: var(--nta-black); transform: translateY(-50%);}
.ntra-section-nav-dot {position: relative; display: block; width: 11px; height: 11px; background: var(--nta-white); border: var(--nta-border); border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease;}
.ntra-section-nav-dot:hover {background: var(--nta-gold); text-decoration: none;}
.ntra-section-nav-dot.is-active {background: var(--nta-coral); transform: scale(1.35);}
.ntra-section-nav-dot::after {content: ""; position: absolute; inset: -8px;} /* area cliccabile più grande del pallino, invisibile */
.ntra-section-nav-label {position: absolute; left: 50%; bottom: calc(100% + 11px); padding: 3px 8px; background: var(--nta-black); color: var(--nta-white); border-radius: 3px; font-size: var(--nta-fs-xs); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 0.2s ease;}
@media (hover: hover) {.ntra-section-nav-dot:hover .ntra-section-nav-label {opacity: 1;}}
.ntra-section-nav-dot:focus-visible .ntra-section-nav-label {opacity: 1;}
.ntra-section-nav-dot.is-active .ntra-section-nav-label {transform: translateX(-50%) scale(0.74);}
/* Ultimo pallino "Torna su" (data-nav-top): più grande, giallo, con la freccia verso l'alto */
.ntra-section-nav-dot[data-nav-top] {display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--nta-gold);}
.ntra-section-nav-dot[data-nav-top]:hover {background: var(--nta-pink);}
.ntra-section-nav-dot[data-nav-top] svg {width: 12px; height: 12px; fill: none; stroke: var(--nta-black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;}


/* =====================================================================
   11. PAGINE INTERNE: blocchi di page.php e roadmap
   ===================================================================== */
.ntra-page-block {display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: var(--nta-inner-padding-y) 0; box-shadow: var(--nta-section-line);}
.ntra-page-block--band {padding: 40px 0;}

/* Roadmap: strada tratteggiata con tappe tonde e card sotto ogni tappa.
   --ntra-roadmap-y (0-100, dal PHP) = altezza della tappa: coincide con la y del path SVG.
   --ntra-roadmap-dot = diametro dei pallini, da qui si regola tutto il resto. */
.ntra-roadmap {--ntra-roadmap-dot: 51px; display: grid; grid-template-columns: repeat(var(--ntra-roadmap-steps, 1), minmax(0, 1fr)); grid-template-rows: var(--ntra-roadmap-height, 40px) auto; width: 100%; margin: 8px 0; padding-top: calc(var(--ntra-roadmap-dot) / 2); box-sizing: border-box;}
.ntra-roadmap-path {grid-row: 1; grid-column: 1 / -1; width: 100%; height: 100%; overflow: visible;}
.ntra-roadmap-path path {fill: none; vector-effect: non-scaling-stroke; stroke-linecap: butt;}
.ntra-roadmap-road {stroke: var(--nta-black); stroke-width: 9; stroke-dasharray: 18 8;}
.ntra-roadmap-dashes {stroke: var(--nta-white); stroke-width: 4; stroke-dasharray: 14 12; stroke-dashoffset: -2;}
.ntra-roadmap-step {display: grid; grid-row: 1 / 3; grid-template-rows: subgrid; min-width: 0;}
.ntra-roadmap-point {position: relative; grid-row: 1;}
.ntra-roadmap-marker {position: absolute; top: calc(var(--ntra-roadmap-y, 50) * 1%); left: 50%; z-index: 2; width: var(--ntra-roadmap-dot); height: var(--ntra-roadmap-dot); box-sizing: border-box; background: var(--nta-white); border: var(--nta-border); border-radius: 50%; transform: translate(-50%, -50%);}
.ntra-roadmap-marker-inner {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; font-size: var(--nta-fs-h4); font-weight: 700; line-height: 1;}
.ntra-roadmap-marker-inner img {width: 100%; height: 100%; margin: 0; object-fit: cover;}
.ntra-roadmap-card.ntra-card {position: relative; z-index: 1; grid-row: 2; align-self: start; width: min(200px, calc(100% - 11px)); height: auto; margin: calc(var(--ntra-roadmap-height, 40px) * (var(--ntra-roadmap-y, 100) / 100 - 1) + var(--ntra-roadmap-dot) / 2 + 13px) auto 0; padding: 8px 10px;}
.ntra-roadmap-card h3 {margin: 0 0 3px;}
.ntra-roadmap-card.ntra-card p {min-height: 0; margin: 0; font-size: var(--nta-fs-small); line-height: 1.4;}
.ntra-roadmap-card::after {content: ""; position: absolute; top: -14px; left: 50%; border: 6px solid transparent; border-bottom-color: var(--nta-black); transform: translateX(-50%);} /* freccina verso la tappa */


/* =====================================================================
   12. PAGINA CONTATTI ([ntra_contatti])
   ===================================================================== */
.ntra-contact .ntra-cols-2 {align-items: flex-start;}
.ntra-contact .ntra-cols-1 {gap: 19px;}
.ntra-contact .ntra-card {height: auto; text-align: left;}
.ntra-contact .ntra-card p {min-height: 0; margin: 0;}
.ntra-contact .ntra-card h4 {margin: 0 0 3px;}
.ntra-contact .ntra-card a {overflow-wrap: anywhere;}
.ntra-contact-box {display: flex; align-items: center; gap: 16px; padding: 14px 18px;}
.ntra-contact .ntra-contact-box img {flex: 0 0 58px; width: 58px; margin: 0;}
.ntra-contact-form {padding: 19px;}
.ntra-contact .ntra-contact-form h3 {margin: 0 0 13px;}
.ntra-privacy-consent {display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 5px; padding: 10px 12px; text-align: left; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-field-radius); font-size: var(--nta-fs-small); font-weight: 700; line-height: 1.45; cursor: pointer;} /* consenso privacy di tutti i form pubblici */
.ntra-privacy-consent input {flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--nta-teal-dark);}
.ntra-hp {position: absolute; left: -7999px; width: 1px; height: 1px; overflow: hidden;}


/* =====================================================================
   13. RESPONSIVE
   (le dimensioni dei testi si adattano da sole: qui solo impaginazione)
   ===================================================================== */
@media (max-width: 980px) {
	.ntra-reviews-slide {flex-basis: calc((100% - 24px) / 2);} /* recensioni: due per volta */
	:root {--nta-menu-height: 56px; --nta-inner-padding-y: 48px; --nta-menu-clearance: 168px;}

	/* Menu a tendina: si apre col bottone ☰ (aria-expanded, assets/js/ntra-menu.js) */
	.menu {width: 100%;}
	/* Logo: più piccolo e appena sopra la barra, così non tocca i bottoni account (sopra)
	   né il titolo della prima sezione (sotto). Sborda di 36px sotto la barra. */
	.logo {z-index: 5; width: 96px; height: 96px; top: -4px; margin-left: 5%;} /* z-index: resta sopra il menu aperto */
	.nav_mobile {display: block;}
	.cont_menu nav {position: absolute; top: 100%; left: 0; right: 0; z-index: 4; height: auto;}
	.cont_menu nav ul.nav_menu {display: none; flex-direction: column; align-items: stretch; height: auto; padding-top: 40px; background: var(--nta-teal); border-bottom: var(--nta-border);} /* padding-top: spazio per la parte del logo che sborda, le voci partono sotto */
	.nav_mobile[aria-expanded="true"] + nav ul.nav_menu {display: flex;}
	.cont_menu nav li {border-top: 1px solid rgba(255, 255, 255, 0.4);}
	.cont_menu nav li a {height: 45px; padding: 0 5%;}
	.cont_menu nav ul ul {display: block; height: auto;}
	.cont_menu nav li li a {padding-left: calc(5% + 16px);}
	.cont_menu nav li.nta-menu-cta {margin: 0; padding: 11px 5%; text-align: center;}
	.cont_menu nav li.nta-menu-cta a.bottone {width: 100%;}
	.nta-account-bar {right: 5%;}

	.ntra-section {padding: 72px 0 40px;}
	/* Blocchi con fascia: lo spazio va dentro la parte colorata (.ntra-section-main), non attorno,
	   così il colore arriva al bordo e le card non toccano la fascia rosa */
	.ntra-section--banded {padding: 0;}
	.ntra-section--banded .ntra-section-main {padding: var(--nta-inner-padding-y) 0;}
	main#contenuto > .ntra-section--banded:first-child > .ntra-section-main {padding-top: 0;} /* hero: lo spazio sopra lo dà già --nta-menu-clearance */
	.ntra-cols-2 > *, .ntra-cols-3 > *, .ntra-cols-4 > * {flex: 1 1 100%;}
	.ntra-cols-2 > .ntra-col-1-3, .ntra-cols-2 > .ntra-col-2-3 {flex: 1 1 100%; max-width: 60%; margin: 0 auto;}
	.ntra-section-band {padding: 24px 0;}
	.ntra-section-band .ntra-col-2-3, .ntra-section-band .ntra-col-1-3 {max-width: 100%; text-align: center;}
	.ntra-card img {width: 35%;}
	.ntra-card p {min-height: 0;}

	.ntra-hero-account, .ntra-hero-plate {width: 90%; max-width: 272px;}
	.ntra-hero-dots {gap: 10px;}
	.ntra-hero-dot-icon {width: 37px; height: 37px; font-size: 16px;}
	.ntra-section-nav {display: none;} /* su telefono e tablet copriva card e bottoni mentre si scorre (come lo scroll a schede, solo desktop) */

	footer > .ntra-container {grid-template-columns: 1fr; grid-template-areas: "logo" "nav" "info" "social" "piva" "copy"; justify-items: center; text-align: center;}
	footer > .ntra-container::before {display: none;}
	footer > .ntra-container > p:last-child {text-align: center;}
	footer nav ul.nav_menu, footer address {justify-content: center;}
	footer nav li.nta-menu-cta {flex-basis: 100%; margin: 8px 0 0;}
	footer .social {flex-direction: column;}

	/* Roadmap: sotto i 980px diventa un elenco verticale */
	.ntra-roadmap {position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 0;}
	.ntra-roadmap-path {display: none;}
	.ntra-roadmap::before {content: ""; position: absolute; top: calc(var(--ntra-roadmap-dot) / 2); bottom: calc(var(--ntra-roadmap-dot) / 2); left: calc(var(--ntra-roadmap-dot) / 2 - 4px); width: 5px; border: var(--nta-border); background: repeating-linear-gradient(to bottom, var(--nta-white) 0 10px, var(--nta-black) 10px 16px);}
	.ntra-roadmap-step {position: relative; display: block; min-height: var(--ntra-roadmap-dot);}
	.ntra-roadmap-point {position: static;}
	.ntra-roadmap-marker {top: 0; left: 0; transform: none;}
	.ntra-roadmap-card.ntra-card {width: auto; margin: 0 0 0 calc(var(--ntra-roadmap-dot) + 13px); text-align: left;}
	.ntra-roadmap-card::after {display: none;}
}

@media (max-width: 480px) {
	.ntra-cols-2 > .ntra-col-1-3, .ntra-cols-2 > .ntra-col-2-3 {max-width: 90%;}
	.ntra-testimonial {flex-basis: 100%; max-width: 100%;}
	.ntra-reviews-slide {flex-basis: 88%;} /* una per volta, con un accenno della successiva */
	.nta-account-bar {gap: 5px;}
	.nta-account-bar .bottone {display: inline-flex; align-items: center; min-height: 30px; padding: 3px 8px 1px; font-size: var(--nta-fs-xs);} /* bottoni piccoli ma comodi da toccare */
	.nta-account-btn-label {display: none;} /* Inbox: resta solo l'icona con il badge */
	.nta-account-bar .ntra-bell {justify-content: center; min-width: 30px; padding: 2px 5px 0;}
	.ntra-bell-icon {width: 15px; height: 15px;}
}