/*!
 * VertexBiz - Template business per Joomla 6
 * Ispirato al Vertex Framework di Shape5
 * Licenza GNU GPL v2 o successiva
 *
 * Le variabili --vx-* sono generate dai parametri del template (inc/helper.php).
 * Per modifiche personali usa css/user.css o il campo "CSS personalizzato".
 */

/* ==========================================================================
   1. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--vx-font-body);
	font-size: var(--vx-font-size);
	line-height: var(--vx-lh);
	color: var(--vx-text);
	background-color: var(--vx-page-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--vx-font-heading);
	font-weight: var(--vx-heading-weight);
	color: var(--vx-heading);
	line-height: 1.25;
	margin: 0 0 .6em;
}

h1, .h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--vx-link); text-decoration: none; text-underline-offset: .18em; }
a:hover { color: var(--vx-primary); text-decoration: underline; }

img { max-width: 100%; height: auto; }

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

.vx-skip {
	position: absolute; left: 1rem; top: -100px; z-index: 1000;
	padding: .6rem 1rem; background: var(--vx-primary); color: #fff; border-radius: var(--vx-radius);
}
.vx-skip:focus { top: 1rem; color: #fff; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pulsanti Bootstrap allineati ai colori del template */
.btn-primary {
	--bs-btn-bg: var(--vx-primary);
	--bs-btn-border-color: var(--vx-primary);
	--bs-btn-hover-bg: color-mix(in srgb, var(--vx-primary) 82%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--vx-primary) 82%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--vx-primary) 72%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--vx-primary) 72%, #000);
}
.btn { border-radius: var(--vx-radius); }

/* ==========================================================================
   2. Contenitore, larghezza fissa / fluida, stile a riquadro
   ========================================================================== */
.vx-container {
	width: var(--vx-cw);
	max-width: var(--vx-cmax);
	margin-inline: auto;
	padding-inline: calc(var(--vx-gutter) / 2 + 5px);
}
.vx-fixed .vx-container { width: 100%; }
.vx-container--full { width: 100%; max-width: none; }

.vx-site { background: var(--vx-body-bg); min-height: 100vh; display: flex; flex-direction: column; }
.vx-body-wide .vx-site { background: transparent; }
.vx-body-wide { background-color: var(--vx-page-bg); }
.vx-body-wide .vx-body { background: var(--vx-body-bg); }

.vx-body-boxed .vx-site {
	width: var(--vx-cw);
	max-width: var(--vx-cmax);
	margin: var(--vx-boxed-margin) auto;
	min-height: calc(100vh - 2 * var(--vx-boxed-margin));
	box-shadow: 0 10px 40px rgba(20, 30, 45, .14);
	overflow: clip;
}
.vx-body-boxed.vx-fixed .vx-site { width: calc(100% - 2rem); margin-top:5px; }
.vx-body-boxed .vx-container { width: 100%; max-width: none; padding-inline: var(--vx-gutter); }

/* ==========================================================================
   3. Toolbar
   ========================================================================== */
.vx-toolbar { background: var(--vx-toolbar-bg); color: var(--vx-toolbar-text); font-size: .875rem; }
.vx-toolbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.vx-toolbar a { color: inherit; }
.vx-toolbar a:hover { color: #fff; }
.vx-toolbar p, .vx-toolbar ul { margin: 0; }
.vx-toolbar ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   4. Intestazione e logo (il mega menu sta nella barra sotto)
   ========================================================================== */
.vx-header { background: var(--vx-header-bg); color: var(--vx-header-text); position: relative; z-index: 101; }

.vx-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	min-height: calc(var(--vx-logo-h, 56px) + 40px);
	transition: min-height .25s ease;
}
.vx-header--logo-right .vx-header__inner { flex-direction: row-reverse; }
.vx-header--logo-center .vx-header__inner { justify-content: center; position: relative; padding-block: 1rem; }
.vx-header--logo-center .vx-header__tools {
	position: absolute; right: calc(var(--vx-gutter) / 2 + 5px); top: 50%; transform: translateY(-50%);
}

.vx-logo { flex: 0 0 auto; line-height: 1; }
.vx-logo__link { display: inline-flex; flex-direction: column; color: inherit; text-decoration: none; }
.vx-logo__link:hover { text-decoration: none; color: inherit; }
.vx-logo__img { display: block; height: var(--vx-logo-h); width: auto; max-width: 100%; transition: height .25s ease; }
.vx-logo__title {
	font-family: var(--vx-font-heading); font-weight: 700; font-size: var(--vx-title-size);
	letter-spacing: -.01em; color: #B22222;
}
.vx-logo__slogan { font-size: .85rem; margin-top: .35rem; opacity: .7; letter-spacing: .02em; }
.vx-header--logo-center .vx-logo__link { align-items: center; text-align: center; }

.vx-header__tools { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.vx-header-right p { margin: 0; }

/* Elementi fissi allo scorrimento.
   Modo "intestazione": logo e barra restano fissi, il banner tra i due scorre via.
   --vx-header-h è calcolata dallo script in base all'altezza reale dell'intestazione. */
.vx-sticky-header .vx-header { position: sticky; top: 0; z-index: 110; }
.vx-sticky-header .vx-megabar { position: sticky; top: var(--vx-header-h, 0px); }
.vx-sticky-bar .vx-megabar { position: sticky; top: 0; }
.vx-header-shadow .vx-megabar { box-shadow: 0 6px 20px rgba(20, 30, 45, .08); }
.vx-header-shadow .vx-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.vx-shrink.vx-scrolled .vx-header__inner { min-height: calc(var(--vx-logo-h, 56px) * .7 + 20px); }
.vx-shrink.vx-scrolled .vx-logo__img { height: calc(var(--vx-logo-h) * .7); }

/* Ricerca */
.vx-search form { display: flex; }
.vx-search input[type="search"], .vx-search input[type="text"] {
	border: 1px solid rgba(0, 0, 0, .15); border-radius: var(--vx-radius); padding: .45rem .75rem;
	font: inherit; font-size: .9rem; min-width: 200px; background: #fff; color: var(--vx-text);
}
.vx-search .awesomplete { width: 100%; }

/* Pulsante hamburger (visibile sotto il punto di rottura tablet) */
.vx-burger {
	display: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--vx-radius);
	background: var(--vx-primary); color: #fff; cursor: pointer;
}
.vx-burger__bars, .vx-burger__bars::before, .vx-burger__bars::after {
	display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.vx-burger__bars::before, .vx-burger__bars::after { content: ""; position: absolute; left: 0; }
.vx-burger__bars::before { top: -6px; }
.vx-burger__bars::after { top: 6px; }

/* ==========================================================================
   5. Mega menu
   ========================================================================== */
.vx-megabar {
	position: relative; z-index: 100;
	background: var(--vx-mm-bg); color: var(--vx-mm-text);
	font-family: var(--vx-mm-font);
}
.vx-megabar__inner { display: flex; align-items: stretch; min-height: var(--vx-mm-height); }
.vx-mmw-container .vx-megabar__inner { position: relative; }

/* Animazioni (valore iniziale del pannello) */
.vx-anim-fade  { --vx-mm-from: none; }
.vx-anim-slide { --vx-mm-from: translateY(-14px); }
.vx-anim-rise  { --vx-mm-from: translateY(14px); }
.vx-anim-zoom  { --vx-mm-from: scale(.96); }
.vx-anim-flip  { --vx-mm-from: perspective(1000px) rotateX(-16deg); }
.vx-anim-none  { --vx-mm-from: none; --vx-mm-dur: 0ms; }

/* Barra delle voci principali (anche per il modulo di fallback) */
.vx-mega,
.vx-megabar--module .vx-megabar__inner > ul {
	display: flex; flex-wrap: wrap; flex: 1 1 auto; margin: 0; padding: 0; list-style: none;
}
.vx-megabar--center .vx-mega, .vx-megabar--center.vx-megabar--module .vx-megabar__inner > ul { justify-content: center; }
.vx-megabar--right .vx-mega, .vx-megabar--right.vx-megabar--module .vx-megabar__inner > ul { justify-content: flex-end; }
.vx-megabar--left .vx-mega > li:first-child > .vx-mega__link { margin-inline-start: calc(var(--vx-mm-pad) * -1); }

.vx-mega__item, .vx-megabar--module .vx-megabar__inner > ul > li { display: flex; position: static; }
.vx-mega__item.is-dropdown,
.vx-mmw-auto .vx-mega__item,
.vx-megabar--module .vx-megabar__inner > ul > li { position: relative; }

.vx-mega__link,
.vx-megabar--module .vx-megabar__inner > ul > li > a,
.vx-megabar--module .vx-megabar__inner > ul > li > span {
	position: relative; display: flex; align-items: center; gap: .45rem;
	min-height: var(--vx-mm-height); padding: 0 var(--vx-mm-pad);
	font-family: inherit; font-size: var(--vx-mm-size); font-weight: var(--vx-mm-weight);
	text-transform: var(--vx-mm-transform); letter-spacing: var(--vx-mm-spacing);
	color: inherit; background: none; border: 0; text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.vx-mega__item:hover > .vx-mega__link,
.vx-mega__item.is-open > .vx-mega__link,
.vx-mega__link:focus-visible,
.vx-megabar--module .vx-megabar__inner > ul > li:hover > a {
	background: var(--vx-mm-hover-bg); color: var(--vx-mm-hover-text); text-decoration: none;
}
.vx-mega__link:focus-visible { outline-offset: -3px; }

/* Evidenziazione voce attiva */
.vx-mm-ind-underline .vx-mega__link::after {
	content: ""; position: absolute; left: var(--vx-mm-pad); right: var(--vx-mm-pad); bottom: 0; height: 3px;
	background: var(--vx-mm-active); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.vx-mm-ind-underline .vx-mega__item.active > .vx-mega__link::after,
.vx-mm-ind-underline .vx-mega__item:hover > .vx-mega__link::after,
.vx-mm-ind-underline .vx-mega__item.is-open > .vx-mega__link::after { transform: scaleX(1); }
.vx-mm-ind-background .vx-mega__item.active > .vx-mega__link { background: var(--vx-mm-active); color: #fff; }

.vx-mega__caret {
	width: .38em; height: .38em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform var(--vx-mm-dur) ease;
}
.vx-mega__item.is-open > .vx-mega__link .vx-mega__caret { transform: translateY(1px) rotate(-135deg); }
.vx-mega__icon { font-size: 1em; }
.vx-mega__thumb { height: 1.4em; width: auto; }
.vx-mega__home { display: block; }

/* Pannello mega */
.vx-mega__panel {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
	background: var(--vx-mm-panel-bg); color: var(--vx-mm-panel-text);
	border-top: 3px solid var(--vx-mm-panel-border);
	border-radius: 0 0 var(--vx-radius) var(--vx-radius);
	box-shadow: var(--vx-mm-shadow);
	font-family: var(--vx-font-body); font-size: var(--vx-mm-sub-size); font-weight: 400;
	text-transform: none; letter-spacing: 0; text-align: left;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: var(--vx-mm-from); transform-origin: top center;
	transition: opacity var(--vx-mm-dur) ease, transform var(--vx-mm-dur) ease, visibility 0s linear var(--vx-mm-dur);
}
.vx-mmw-full .vx-mega__panel { border-radius: 0; }
.vx-mmw-auto .vx-mega__panel { right: auto; width: max-content; max-width: min(1000px, 94vw); }
.vx-mmw-auto .vx-mega__item.vx-open-left > .vx-mega__panel { left: auto; right: 0; }

.vx-mega__item.is-open > .vx-mega__panel,
.vx-mega__item:focus-within > .vx-mega__panel,
body:not(.vx-js) .vx-mega__item:hover > .vx-mega__panel {
	opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s;
}

.vx-mega__inner { padding: 1.75rem calc(var(--vx-gutter) / 2 + 10px); }
.vx-mmw-full .vx-mega__inner { padding-inline: 0; }
.vx-mega__cols {
	display: grid; gap: 1.5rem 2.25rem;
	grid-template-columns: repeat(var(--vx-cols, 4), minmax(0, 1fr));
}
.vx-mmw-auto .vx-mega__cols { grid-template-columns: repeat(var(--vx-cols, 4), minmax(170px, 240px)); }
.vx-mega__col { min-width: 0; }
.vx-mega__col--list { grid-column: 1 / -1; }
.vx-mega__cols:has(.vx-mega__col--module) .vx-mega__col--list { grid-column: auto; }

.vx-mega__img img { display: block; width: 100%; height: auto; border-radius: var(--vx-radius); margin-bottom: .75rem; }

.vx-mega__heading {
	display: block; margin-bottom: .6rem; padding-bottom: .55rem;
	font-family: var(--vx-mm-font); font-size: var(--vx-mm-head-size); font-weight: 700;
	color: var(--vx-mm-panel-head); text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--vx-mm-panel-text) 16%, transparent);
}
a.vx-mega__heading:hover, .vx-mega__col.active > .vx-mega__heading { color: var(--vx-mm-panel-hover); text-decoration: none; }

.vx-mega__sub { list-style: none; margin: 0; padding: 0; }
.vx-mega__sub > li > a, .vx-mega__sub > li > span {
	display: block; padding: .32rem 0; color: inherit; text-decoration: none;
	transition: color .15s ease, transform .15s ease;
}
.vx-mega__sub > li > a:hover { color: var(--vx-mm-panel-hover); transform: translateX(3px); }
.vx-mega__sub > li.current > a, .vx-mega__sub > li.active > a { color: var(--vx-mm-panel-hover); font-weight: 600; }
.vx-mega__sub .vx-mega__sub { padding-left: .9rem; margin-bottom: .3rem; font-size: .95em; border-left: 1px solid color-mix(in srgb, var(--vx-mm-panel-text) 14%, transparent); }
.vx-mega__list { columns: var(--vx-list-cols, 1); column-gap: 2.25rem; }
.vx-mega__list > li { break-inside: avoid; }
.vx-mega__desc { display: block; font-size: .85em; opacity: .72; line-height: 1.4; margin: -.1rem 0 .4rem; }
.vx-mega__heading + .vx-mega__desc { margin-top: -.3rem; }
.vx-mega__col--module .vx-module__title { font-size: var(--vx-mm-head-size); }

/* Dropdown classico (modo dropdown, classe vx-dropdown o modulo di fallback) */
.vx-drop,
.vx-megabar--module .vx-megabar__inner ul ul {
	position: absolute; top: 100%; left: 0; z-index: 300;
	min-width: var(--vx-submenu-w); margin: 0; padding: .45rem 0; list-style: none;
	background: var(--vx-mm-panel-bg); color: var(--vx-mm-panel-text);
	border-top: 3px solid var(--vx-mm-panel-border); border-radius: 0 0 var(--vx-radius) var(--vx-radius);
	box-shadow: var(--vx-mm-shadow);
	font-family: var(--vx-font-body); font-size: var(--vx-mm-sub-size); font-weight: 400; text-transform: none; letter-spacing: 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: var(--vx-mm-from); transform-origin: top left;
	transition: opacity var(--vx-mm-dur) ease, transform var(--vx-mm-dur) ease, visibility 0s linear var(--vx-mm-dur);
}
.vx-drop .vx-drop,
.vx-megabar--module .vx-megabar__inner ul ul ul { top: -.45rem; left: 100%; border-top: 0; border-radius: var(--vx-radius); }
.vx-drop li, .vx-megabar--module .vx-megabar__inner ul ul li { position: relative; }
.vx-drop__link,
.vx-drop li > span,
.vx-megabar--module .vx-megabar__inner ul ul a {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
	padding: .55rem 1.15rem; color: inherit; background: none; border: 0; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.vx-drop__link:hover, .vx-drop li.active > .vx-drop__link,
.vx-megabar--module .vx-megabar__inner ul ul a:hover {
	background: color-mix(in srgb, var(--vx-mm-panel-hover) 9%, transparent); color: var(--vx-mm-panel-hover); text-decoration: none;
}
.vx-drop .vx-mega__caret { transform: rotate(-45deg); }

li.is-open > .vx-drop,
li:focus-within > .vx-drop,
body:not(.vx-js) li:hover > .vx-drop,
.vx-megabar--module li:hover > ul,
.vx-megabar--module li:focus-within > ul,
.vx-megabar--module li.is-open > ul {
	opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s;
}
.vx-mega__item.vx-open-left > .vx-drop { left: auto; right: 0; }
.vx-drop li.vx-open-left > .vx-drop { left: auto; right: 100%; }

/* ==========================================================================
   6. Banner
   ========================================================================== */
.vx-banner { position: relative; z-index: 1; background: var(--vx-bottom-bg); color: #fff; }
.vx-banner .vx-container--full { padding-inline: 0; }
.vx-banner img { display: block; width: 100%; }
.vx-banner .moduletable, .vx-banner .custom { margin: 0; }

/* ==========================================================================
   7. Righe di moduli (top_row, middle, bottom_row ...)
   ========================================================================== */
.vx-grid {
	display: flex; flex-wrap: wrap;
	margin-inline: calc(var(--vx-gutter) / -2);
	row-gap: var(--vx-gutter);
}
.vx-col {
	flex: 0 0 var(--vx-col, 100%);
	max-width: var(--vx-col, 100%);
	padding-inline: calc(var(--vx-gutter) / 2);
	min-width: 0;
}
.vx-grid--equal > .vx-col { display: flex; flex-direction: column; }
.vx-grid--equal > .vx-col > .vx-module:last-child { flex: 1 1 auto; }
.vx-col > .vx-module + .vx-module { margin-top: var(--vx-gutter); }

.vx-row { padding-block: calc(var(--vx-gutter) * 1.6); }
.vx-row--top-row1 { background: color-mix(in srgb, var(--vx-page-bg) 55%, #fff); }
.vx-row--top-row2 { background: var(--vx-body-bg); }
.vx-row--top-row3 { background: color-mix(in srgb, var(--vx-page-bg) 55%, #fff); }
.vx-row--top-row1 + .vx-row--top-row2,
.vx-row--top-row2 + .vx-row--top-row3 { border-top: 1px solid rgba(0, 0, 0, .05); }

/* Righe interne all'area contenuti: niente fascia, solo spaziatura */
.vx-body .vx-row { padding-block: 0; background: none; }
.vx-row--above-columns, .vx-row--middle-top { margin-bottom: var(--vx-gutter); }
.vx-row--middle-bottom, .vx-row--below-columns { margin-top: var(--vx-gutter); }

/* ==========================================================================
   8. Corpo pagina e colonne
   ========================================================================== */
.vx-body { flex: 1 0 auto; padding-block: calc(var(--vx-gutter) * 1.4); }

.vx-columns, .vx-main-inner { display: grid; gap: var(--vx-gutter); align-items: start; }
.vx-left { grid-area: left; }
.vx-main { grid-area: main; min-width: 0; }
.vx-right { grid-area: right; }
.vx-inset-left { grid-area: ileft; }
.vx-content { grid-area: content; min-width: 0; }
.vx-inset-right { grid-area: iright; }
.vx-content:focus { outline: none; }

.vx-sidebar > .vx-module + .vx-module { margin-top: var(--vx-gutter); }

/* Colonna sinistra in cima all'area centrale (opzione "Colonna sinistra sopra il componente") */
.vx-left--top { margin-bottom: var(--vx-gutter); }
.vx-left--top.vx-left--row {
	display: grid; gap: var(--vx-gutter); align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.vx-left--top.vx-left--row > .vx-module + .vx-module { margin-top: 0; }
.vx-left--top + .vx-row--middle-top { margin-top: 0; }
.vx-left-on-top .vx-above-content + .vx-left--top { margin-top: 0; }
.vx-above-content, .vx-below-content { margin-block: 0 var(--vx-gutter); }
.vx-below-content { margin-block: var(--vx-gutter) 0; }

.vx-breadcrumbs { background: var(--vx-body-bg); border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: .875rem; }
.vx-breadcrumbs .breadcrumb { margin: 0; padding-block: .75rem; background: none; }

/* ==========================================================================
   9. Moduli (stile "vertex") e suffissi
   ========================================================================== */
.vx-module__title {
	position: relative; font-size: 1.15rem; margin: 0 0 1.1rem; padding-bottom: .7rem;
}
.vx-module__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px;
	background: var(--vx-accent); border-radius: 2px;
}
.vx-module__content > :last-child { margin-bottom: 0; }

/* Menu verticali nelle colonne */
.vx-module .mod-menu { display: block; list-style: none; margin: 0; padding: 0; }
.vx-module .mod-menu li { border-bottom: 1px solid rgba(0, 0, 0, .07); }
.vx-module .mod-menu li:last-child { border-bottom: 0; }
.vx-module .mod-menu a, .vx-module .mod-menu span { display: block; padding: .55rem 0; color: var(--vx-text); }
.vx-module .mod-menu a:hover, .vx-module .mod-menu .current > a { color: var(--vx-primary); text-decoration: none; }
.vx-module .mod-menu ul { list-style: none; padding-left: 1rem; margin: 0; font-size: .95em; }
.vx-module .mod-menu ul li { border: 0; }

/* Stile predefinito dei moduli nelle colonne */
.vx-modules-card .vx-sidebar .vx-module {
	background: #fff; padding: 1.4rem; border-radius: var(--vx-radius);
	box-shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 8px 24px rgba(20, 30, 45, .07);
}
.vx-modules-border .vx-sidebar .vx-module {
	padding: 1.4rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--vx-radius);
}

/* Suffissi classe modulo */
.vx-box, .vx-box-primary, .vx-box-accent, .vx-box-dark, .vx-box-light, .vx-box-border {
	padding: 1.6rem; border-radius: var(--vx-radius);
}
.vx-box { background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 8px 24px rgba(20, 30, 45, .08); }
.vx-box-light { background: color-mix(in srgb, var(--vx-page-bg) 60%, #fff); }
.vx-box-border { border: 1px solid rgba(0, 0, 0, .12); }
.vx-box-primary { background: var(--vx-primary); color: #fff; }
.vx-box-accent { background: var(--vx-accent); color: #1b1b1b; }
.vx-box-dark { background: var(--vx-bottom-bg); color: var(--vx-footer-text); }
.vx-box-primary .vx-module__title, .vx-box-dark .vx-module__title,
.vx-box-primary a, .vx-box-dark a { color: #fff; }
.vx-box-accent .vx-module__title { color: #1b1b1b; }
.vx-box-accent .vx-module__title::after { background: #1b1b1b; }
.vx-center { text-align: center; }
.vx-center .vx-module__title::after { left: 50%; transform: translateX(-50%); }
.vx-title-plain .vx-module__title { padding-bottom: 0; }
.vx-title-plain .vx-module__title::after { display: none; }
.vx-flush { padding: 0 !important; }

/* ==========================================================================
   10. Contenuti Joomla
   ========================================================================== */
.vx-component .page-header h1, .vx-component .page-header h2 { margin-bottom: .4em; }
.vx-component .article-info { font-size: .85rem; color: color-mix(in srgb, var(--vx-text) 70%, #fff); margin-bottom: 1.2rem; }
.vx-component .article-info dd { display: inline-block; margin: 0 1rem 0 0; }
.vx-component .blog-item, .vx-component .com-content-category-blog__item {
	padding-bottom: var(--vx-gutter); margin-bottom: var(--vx-gutter); border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.vx-component .readmore .btn { margin-top: .5rem; }
.vx-component .pagination { margin-top: var(--vx-gutter); }
.vx-component .page-link { color: var(--vx-link); }
.vx-component .active > .page-link { background: var(--vx-primary); border-color: var(--vx-primary); color: #fff; }
.vx-component blockquote {
	margin: 1.5em 0; padding: .5em 0 .5em 1.25em; border-left: 3px solid var(--vx-accent); font-size: 1.1em;
}
.vx-component table { width: 100%; }
.vx-component .item-image img, .vx-component figure img { border-radius: var(--vx-radius); }

/* Griglia del blog (Colonne / Masonry impostati nel menu o nella categoria) */
.blog-items[class*="columns-"] { display: grid; gap: var(--vx-abox-gap); align-items: stretch; }
.blog-items.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-items.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-items.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-items.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.blog-items.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.blog-items[class*="columns-"] > .blog-item { margin-bottom: 0; }
.blog-items.masonry-2 { columns: 2; column-gap: var(--vx-abox-gap); }
.blog-items.masonry-3 { columns: 3; column-gap: var(--vx-abox-gap); }
.blog-items.masonry-4 { columns: 4; column-gap: var(--vx-abox-gap); }
.blog-items[class*="masonry-"] > .blog-item { break-inside: avoid; }

/* ==========================================================================
   10b. Articoli in box
   Attivati da "Articoli in box" o dalla classe pagina vx-articles-box.
   ========================================================================== */
.vx-abox-article .vx-component .com-content-article,
.vx-abox-article .vx-component .item-page,
.vx-abox-blog .vx-component .com-content-category-blog .blog-item,
.vx-abox-featured .vx-component .blog-featured .blog-item,
.vx-abox-list .vx-component .com-content-category.category-list {
	position: relative;
	background: var(--vx-abox-bg);
	color: var(--vx-abox-text);
	padding: var(--vx-abox-pad);
	border-radius: var(--vx-abox-radius);
	box-shadow: var(--vx-abox-shadow);
	border-top: var(--vx-abox-bt);
	border-right: var(--vx-abox-br);
	border-bottom: var(--vx-abox-bb);
	border-left: var(--vx-abox-bl);
	margin-bottom: var(--vx-abox-gap);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Bordi: tutti i lati o un lato solo */
body { --vx-abox-bt: 0 none; --vx-abox-br: 0 none; --vx-abox-bb: 0 none; --vx-abox-bl: 0 none; }
.vx-abox-sides-all { --vx-abox-bt: var(--vx-abox-border); --vx-abox-br: var(--vx-abox-border); --vx-abox-bb: var(--vx-abox-border); --vx-abox-bl: var(--vx-abox-border); }
.vx-abox-sides-top { --vx-abox-bt: var(--vx-abox-border); }
.vx-abox-sides-left { --vx-abox-bl: var(--vx-abox-border); }
.vx-abox-sides-bottom { --vx-abox-bb: var(--vx-abox-border); }

/* Nei box il separatore del blog non serve */
.vx-abox-blog .com-content-category-blog .blog-item,
.vx-abox-featured .blog-featured .blog-item { padding-bottom: var(--vx-abox-pad); }
.vx-abox-blog .com-content-category-blog .blog-item:last-child,
.vx-abox-featured .blog-featured .blog-item:last-child { margin-bottom: var(--vx-abox-gap); }
.vx-abox-blog .blog-items[class*="columns-"] > .blog-item,
.vx-abox-featured .blog-items[class*="columns-"] > .blog-item { margin-bottom: 0; display: flex; flex-direction: column; }
.vx-abox-blog .blog-items[class*="columns-"] > .blog-item .readmore,
.vx-abox-featured .blog-items[class*="columns-"] > .blog-item .readmore { margin-top: auto; }

/* Titoli nei box */
:is(.vx-abox-article .item-page, .vx-abox-blog .com-content-category-blog .blog-item, .vx-abox-featured .blog-featured .blog-item) :is(h1, h2, h3) { color: var(--vx-abox-title); }
:is(.vx-abox-article .item-page, .vx-abox-blog .com-content-category-blog .blog-item, .vx-abox-featured .blog-featured .blog-item) :is(h1, h2, h3) a { color: inherit; }
:is(.vx-abox-article .item-page, .vx-abox-blog .com-content-category-blog .blog-item, .vx-abox-featured .blog-featured .blog-item) > :last-child { margin-bottom: 0; }

/* Immagine a filo del box (solo immagini non flottanti in apertura) */
.vx-abox-bleed.vx-abox-blog .com-content-category-blog .blog-item > .item-image:first-child:not(.float-start):not(.float-end):not(.left):not(.right),
.vx-abox-bleed.vx-abox-featured .blog-featured .blog-item > .item-image:first-child:not(.float-start):not(.float-end):not(.left):not(.right),
.vx-abox-bleed.vx-abox-article .item-page > .item-image:first-child:not(.float-start):not(.float-end):not(.left):not(.right) {
	margin: calc(var(--vx-abox-pad) * -1) calc(var(--vx-abox-pad) * -1) var(--vx-abox-pad);
	overflow: hidden;
	border-radius: var(--vx-abox-radius) var(--vx-abox-radius) 0 0;
}
.vx-abox-bleed .blog-item > .item-image:first-child img,
.vx-abox-bleed .item-page > .item-image:first-child img { display: block; width: 100%; border-radius: 0; }

/* Effetto al passaggio del mouse (blog e in evidenza) */
.vx-abox-hover-lift :is(.vx-abox-blog .com-content-category-blog, .vx-abox-featured .blog-featured) .blog-item:hover {
	transform: translateY(-4px); box-shadow: var(--vx-abox-shadow-hover);
}
.vx-abox-hover-shadow :is(.vx-abox-blog .com-content-category-blog, .vx-abox-featured .blog-featured) .blog-item:hover {
	box-shadow: var(--vx-abox-shadow-hover);
}
.vx-abox-hover-border :is(.vx-abox-blog .com-content-category-blog, .vx-abox-featured .blog-featured) .blog-item:hover {
	border-color: var(--vx-abox-hover-border);
}

/* ==========================================================================
   11. Righe inferiori e footer
   ========================================================================== */
.vx-bottom { background: var(--vx-bottom-bg); color: var(--vx-footer-text); }
.vx-bottom .vx-row + .vx-row { border-top: 1px solid rgba(255, 255, 255, .07); }
.vx-bottom h1, .vx-bottom h2, .vx-bottom h3, .vx-bottom h4, .vx-bottom .vx-module__title { color: #fff; }
.vx-bottom a { color: #fff; }
.vx-bottom a:hover { color: var(--vx-accent); }
.vx-bottom .vx-module .mod-menu li { border-color: rgba(255, 255, 255, .08); }
.vx-bottom .vx-module .mod-menu a { color: var(--vx-footer-text); }
.vx-bottom .vx-module .mod-menu a:hover { color: #fff; }

.vx-footer { background: var(--vx-footer-bg); color: var(--vx-footer-text); font-size: .875rem; margin-top: auto; }
.vx-footer__inner {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: .75rem 2rem; padding-block: 1.4rem;
}
.vx-footer a { color: var(--vx-footer-text); }
.vx-footer a:hover { color: #fff; }
.vx-footer p { margin: 0; }
.vx-footer__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ==========================================================================
   12. Menu mobile off-canvas
   ========================================================================== */
.vx-offcanvas {
	position: fixed; top: 0; bottom: 0; z-index: 1001;
	width: min(var(--vx-offcanvas-w), 88vw);
	background: #fff; color: var(--vx-text);
	overflow-y: auto; overscroll-behavior: contain;
	transition: transform .28s ease, visibility 0s linear .28s;
	visibility: hidden;
}
.vx-offcanvas--right { right: 0; transform: translateX(100%); }
.vx-offcanvas--left { left: 0; transform: translateX(-100%); }
.vx-offcanvas-open .vx-offcanvas { transform: none; visibility: visible; transition-delay: 0s; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }

.vx-offcanvas__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.25rem; background: var(--vx-primary); color: #fff;
}
.vx-offcanvas__title { font-family: var(--vx-font-heading); font-weight: 700; }
.vx-offcanvas__close {
	width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, .15); color: #fff;
	font-size: 1.6rem; line-height: 1; border-radius: var(--vx-radius); cursor: pointer;
}

.vx-offcanvas__menu ul { list-style: none; margin: 0; padding: 0; }
.vx-offcanvas__menu li { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .07); display: flex; flex-wrap: wrap; align-items: center; }
.vx-offcanvas__menu li > a, .vx-offcanvas__menu li > span {
	flex: 1 1 auto; display: block; padding: .8rem 1.25rem; color: var(--vx-text); font-weight: 600; text-decoration: none;
}
.vx-offcanvas__menu li.active > a { color: var(--vx-primary); }
.vx-offcanvas__menu li > ul { flex: 0 0 100%; display: none; background: color-mix(in srgb, var(--vx-page-bg) 50%, #fff); }
.vx-offcanvas__menu li.vx-expanded > ul { display: block; }
.vx-offcanvas__menu li li > a { padding-left: 2rem; font-weight: 400; }
.vx-offcanvas__menu li li li > a { padding-left: 2.75rem; }
.vx-sub-toggle {
	flex: 0 0 48px; height: 48px; border: 0; background: none; cursor: pointer; color: var(--vx-text);
	border-left: 1px solid rgba(0, 0, 0, .07);
}
.vx-sub-toggle::before {
	content: ""; display: inline-block; width: .5em; height: .5em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.vx-expanded > .vx-sub-toggle::before { transform: rotate(-135deg); }
.vx-offcanvas__modules { padding: 1.25rem; }

.vx-overlay {
	position: fixed; inset: 0; z-index: 1000; background: rgba(10, 18, 28, .5);
	opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.vx-offcanvas-open .vx-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.vx-offcanvas-open { overflow: hidden; }

/* ==========================================================================
   13. Torna su, badge anteprima, pagina errore
   ========================================================================== */
.vx-totop {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
	width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: var(--vx-primary); color: #fff; font-size: 1.2rem; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease;
}
.vx-totop.is-visible { opacity: 1; transform: none; }

.vx-preview-badge {
	position: fixed; left: 1rem; bottom: 1rem; z-index: 1002;
	padding: .55rem .9rem; border-radius: var(--vx-radius);
	background: #1b1b1b; color: #fff; font-size: .8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.vx-preview-badge a { color: var(--vx-accent); margin-left: .5rem; }

.vx-error__box { text-align: center; padding-block: 4rem; max-width: 720px; }
.vx-error__code { font-family: var(--vx-font-heading); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; color: var(--vx-primary); line-height: 1; margin-bottom: .2em; }
.vx-error__message { color: color-mix(in srgb, var(--vx-text) 70%, #fff); }
.vx-error__debug { text-align: left; margin-top: 2rem; overflow-x: auto; }

.vx-component-view { background: #fff; padding: 1.5rem; }

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

@media print {
	.vx-toolbar, .vx-megabar, .vx-header__tools, .vx-sidebar, .vx-bottom, .vx-totop, .vx-offcanvas, .vx-overlay { display: none !important; }
	.vx-columns, .vx-main-inner { display: block; }
}