@charset "utf-8";
/* =====================================================================
   ACCESSIBILITÀ – WCAG 2.1 livello AA
   Caricato in <head> (dopo viewport.css) e di nuovo in fondo al <body>
   (dopo makeup.css) così che queste regole abbiano sempre la precedenza.
   ===================================================================== */

/* I colori usano le variabili del brand definite in :root (viewport.css). */

/* INTERRUTTORI: ogni blocco è racchiuso tra "@modulo nome" e "@fine".
   "nome" è la voce corrispondente in accessibility_config.php: se è false,
   il blocco viene tolto automaticamente dalla pagina (accessibility_helpers.php).
   Le regole fuori dai blocchi (.sr-only) restano sempre attive. */

/* ---------------------------------------------------------------------
   Testo solo per screen reader (WCAG 1.1.1, 2.4.4, 3.2.5)
   --------------------------------------------------------------------- */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* @modulo struttura */
/* ---------------------------------------------------------------------
   Skip link (WCAG 2.4.1)
   --------------------------------------------------------------------- */
.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 2147483647;
	padding: 12px 20px;
	background-color: var(--color1);
	color: var(--white) !important;
	font-weight: 700;
	text-decoration: underline !important;
	transform: translateY(-200%);
	transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }
/* @fine */


/* @modulo focus */
/* ---------------------------------------------------------------------
   Focus visibile (WCAG 2.4.7) – SOLO per chi naviga da tastiera.
   Il focus non serve agli screen reader (non vedono lo schermo): serve a chi
   vede ma usa la tastiera. Con il mouse non compare mai.
   - regola :focus: richiesta da MAUVE++ (non riconosce :focus-visible)
   - :focus:not(:focus-visible): il browser la applica ai click del mouse e
     toglie l'indicatore (verificato su MAUVE++: il controllo resta superato)
   Stile: linea sottile nel colore del brand, staccata dall'elemento.
   --------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
iframe:focus,
[tabindex]:not([tabindex="-1"]):focus,
[role="button"]:focus,
[role="option"]:focus {
	outline: 2px solid var(--color1) !important;
	outline-offset: 3px !important;
}
/* su fondi scuri e sopra le foto: linea bianca */
footer a:focus,
footer button:focus,
.ztemplate_rooms .caption-alt a:focus,
.ztemplate_restaurant .caption a:focus,
#language a:focus,
#slideshow_cnt a:focus,
#slideshow_cnt button:focus,
header.ontop:not(.scrolled) #menu-btn:focus,
header.ontop:not(.scrolled) #language_btn:focus {
	outline-color: var(--white) !important;
}
/* click del mouse / tocco: nessun indicatore */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="option"]:focus:not(:focus-visible) {
	outline: none !important;
}
/* @fine */

/* @modulo pulsanti */
/* ---------------------------------------------------------------------
   Controlli trasformati da <div> a <button>: reset dell'aspetto nativo
   (l'aspetto resta identico all'originale)
   --------------------------------------------------------------------- */
#menu-btn,
#language_btn,
#page_error .close {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}
#menu-btn #bars,
#menu-btn .bar,
#menu-btn .varsimple { display: block; }
#language_btn { text-align: center; }
#page_error .close { display: inline-block; color: var(--white); }

header #varsimple_booknow { font-family: inherit; line-height: inherit; text-transform: inherit; letter-spacing: inherit; -webkit-appearance: none; appearance: none; }

#booking .close_btn { padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
#custom_popup .close_btn { padding: 0; -webkit-appearance: none; appearance: none; }
#custom_popup .close_btn:not(:hover) { background-color: transparent; }
#custom_popup .close_btn .bar { display: block; }

/* ---------------------------------------------------------------------
   Pannelli chiusi: non devono essere raggiungibili da tastiera né letti
   dagli screen reader (WCAG 2.4.3, 1.3.2). "visibility" segue la stessa
   transizione già prevista, quindi l'animazione non cambia.
   --------------------------------------------------------------------- */
.slide_menu:not(.fired) { visibility: hidden; }
.slide_menu.fired { visibility: visible; }

#language:not(.fired) { visibility: hidden; }

#booking:not(.fired):not(.fired_2) { visibility: hidden; }
#booking { transition: opacity .6s, transform .6s, top .6s, visibility .6s; }

body:not(.noslide) header:not(.scrolled) .cnt .col:nth-of-type(2) { visibility: hidden; }

#custom_popup:not(.fired) { visibility: hidden; }
/* @fine */

/* @modulo icone_mute */
/* ---------------------------------------------------------------------
   Contenuto generato da CSS che non deve essere letto (WCAG 1.1.1).
   Sintassi "content: X / ''" = testo alternativo vuoto; i browser che non
   la supportano ignorano la regola e mantengono quella originale.
   - ICONE: NON vanno elencate qui. Le versioni "mute" sono generate in
     automatico da accessibility_helpers.php (a11y_icon_mute_tag) leggendo
     viewport/skin/sketch/makeup.css: aggiungi o cambia icone liberamente.
   - Qui restano solo i separatori "/" decorativi (testo, non icone).
   --------------------------------------------------------------------- */
.section_tag:before,
#intro .top_seo:before,
.heading .top_seo:before,
footer .section_tag:before,
#booking .section_tag:before,
.ztemplate .zoption .fieldvalue:before,
.ztemplate_rooms .zoption .fieldvalue:before { content: "/" / ""; }
/* @fine */

/* @modulo struttura */
/* ---------------------------------------------------------------------
   Heading introdotti al posto di <div>/<h3>: stesso aspetto di prima
   --------------------------------------------------------------------- */
h2.title { font-weight: inherit; }
h3.fieldkey { line-height: inherit; font-weight: inherit; }
footer h2.section_title { font-weight: inherit; line-height: inherit; }
/* @fine */

/* @modulo pulizia_html */
/* paragrafi vuoti sostituiti da uno spaziatore (stessa altezza) */
.a11y-spacer { height: 1.5em; }
/* @fine */

/* @modulo link */
/* ---------------------------------------------------------------------
   Link distinguibili non solo con il colore (WCAG 1.4.1 – MAUVE++ F73)
   Verificato su MAUVE++: un link passa se è sottolineato, OPPURE in
   grassetto, OPPURE dentro <nav>. Quindi:
   - link nel testo (paragrafi, contatti…): sottolineati
   - pulsanti "Scopri"/"Prenota": già in grassetto → nessuna sottolineatura
   - menu, lingue, social, note legali, nome hotel: dentro <nav> → nessuna
   - titoli delle sezioni: non sono più link (vedi accessibility_helpers.php)
   viewport.css impone "text-decoration: none !important" su <a>, quindi
   serve !important.
   --------------------------------------------------------------------- */
html body a { text-decoration: underline !important; text-underline-offset: .18em; text-decoration-thickness: 1px; }
html body nav a,
html body [role="navigation"] a,
html body .slide_menu a,
html body #submenu a,
html body .ztemplate .title a,
html body .zsimplebutton a,
html body .zlink a,
html body a.skip-link { text-decoration: none !important; }
html body .zsimplebutton a,
html body .zlink a { font-weight: 700; }

/* titoli delle sezioni: <span> al posto del link, stesso aspetto di prima */
.ztemplate .title .a11y-title { color: var(--color1); }
.ztemplate_offers .title .a11y-title { display: inline-block; font-size: 90%; color: var(--color1); }
.ztemplate_rooms .ztemplate .title .a11y-title { display: inline-block; font-size: 110%; color: var(--white); }
.ztemplate_floated .title .a11y-title { color: var(--white); }
@media (max-width: 768px) {
	.ztemplate_full .title .a11y-title { color: var(--white); }
}
/* @fine */

/* @modulo contrasto */
/* ---------------------------------------------------------------------
   Contrasto (WCAG 1.4.3) – l'arancione è stato scurito (var(--color2), 4.9:1).
   NB: MAUVE++ non risolve var(--…): i valori esadecimali equivalenti sono
   generati automaticamente da accessibility_helpers.php (vedi LEGGIMI).
   --------------------------------------------------------------------- */
/* leggera ombra sulla scritta decorativa sopra la foto */
.scroll_down { text-shadow: 0 0 6px rgba(0, 0, 0, .6); }

/* Testi bianchi sopra la foto (MENU, lingua, Prenota, nome hotel sotto il
   logo): sfumatura scura in testata, visibile solo finché l'header è
   trasparente; allo scroll scompare.
   Contrasto reale nel caso peggiore (foto completamente bianca):
   MENU/IT circa 8:1, nome hotel (testo grande, 24px) circa 4:1 (minimo 3:1).
   NB: MAUVE++ non calcola i gradienti: su questi 3 testi la verifica è
   manuale (vedi LEGGIMI). */
header:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 280px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
	opacity: 1;
	transition: opacity .4s;
}
header.scrolled:before,
body.noslide header:before { opacity: 0; }

/* Durante il caricamento, prima che arrivi la foto, la testata ha già un
   fondo scuro: niente passaggio bianco -> foto e testi bianchi leggibili. */
#slideshow_cnt { background-color: #24323c; }

/* nome hotel nella barra in alto: compare solo a header bianco (scrolled),
   ma MAUVE++ lo valuta anche quando è invisibile sopra la foto. Il fondo
   bianco è identico a quello dell'header, quindi non cambia nulla a vista. */
header .hotel_name a { color: var(--color1); background-color: var(--color1); }

/* scritta decorativa "SCROLL" generata da CSS (non è contenuto) */
.scroll_down .scroll_label:before { content: "SCROLL" / ""; }

/* banner cookie iubenda: colori equivalenti ma leggibili da MAUVE++
   (#ffffff1f non viene interpretato) e verde "Accetta" più scuro (4.5:1) */
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn,
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn { background-color: #1f1f1f !important; color: var(--white) !important; }
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-btn-primary.iubenda-cs-accept-btn { background-color: #0B7A0F !important; color: var(--white) !important; }
/* @fine */

/* @modulo caroselli */
/* ---------------------------------------------------------------------
   Pulsante pausa/riproduci per i caroselli automatici (WCAG 2.2.2)
   --------------------------------------------------------------------- */
#slideshow_cnt,
section#rooms { position: relative; }

.a11y-carousel-toggle {
	position: absolute;
	z-index: 20;
	left: 20px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--white);
	border-radius: 50%;
	background-color: #1E1E1E;
	color: var(--white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
}
.a11y-carousel-toggle:before {
	font-family: var(--font-icon);
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	content: '\f04c' / '';
}
.a11y-carousel-toggle[aria-pressed="true"]:before { content: '\f04b' / ''; }
section#rooms .a11y-carousel-toggle { bottom: 22px; }
/* nascosto finché lo slider non è inizializzato (nessun JS = nessun autoplay) */
.a11y-carousel-toggle[hidden] { display: none; }
/* Visibile SOLO quando riceve il focus da tastiera (scelta grafica).
   Con il mouse lo scorrimento si ferma passando sopra il carosello
   (pauseOnHover di slick). NB: per WCAG 2.2.2 la soluzione pienamente
   conforme è il pulsante sempre visibile. */
.a11y-carousel-toggle:not(:focus) {
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
}

/* slick: pallini di navigazione con area cliccabile più comoda */
.slick-dots li button { cursor: pointer; }

/* ---------------------------------------------------------------------
   Movimento ridotto (WCAG 2.3.3 – buona pratica)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.scroll_down:after { animation: none !important; }
	*, *:before, *:after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}
/* @fine */

/* @modulo perf_slideshow */
/* ---------------------------------------------------------------------
   PRESTAZIONI – niente "salti" di layout (CLS) prima che i caroselli
   siano inizializzati: si vede solo la prima slide (come dopo l'avvio)
   invece di tutte le slide una sotto l'altra.
   --------------------------------------------------------------------- */
#slideshow .slide:not(.slick-initialized) > .elem ~ .elem,
.ztemplate_rooms.carousel .box:not(.slick-initialized) > .elem ~ .elem { display: none; }
.gallery ul:not(.slick-initialized) { display: flex; overflow: hidden; }
.gallery ul:not(.slick-initialized) > li { flex: 0 0 25%; }
@media (max-width: 768px) { .gallery ul:not(.slick-initialized) > li { flex-basis: 33.333%; } }
@media (max-width: 480px) { .gallery ul:not(.slick-initialized) > li { flex-basis: 100%; } }
/* @fine */