/**
 * File:	/custom.css
 * @package css
 * @author  Rino Andriano 
 */
#masthead {
	padding-top: 20px;
	padding-bottom: 20px;
	position: sticky;
	top: 0;
	z-index: 100;
	transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease;
	background-color: #fff;
}

#masthead.is-sticky {
	padding-top: 8px;
	padding-bottom: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

#masthead.is-sticky .custom-logo {
	max-height: 40px;
	width: auto;
	transition: max-height .25s ease;
}

#masthead.is-sticky .site-branding .site-title {
	font-size: 22px;
	line-height: 26px;
	transition: font-size .25s ease, line-height .25s ease;
}

#masthead.absolute {
	position: sticky;
}

@media (max-width: 767px) {
	#masthead {
		position: sticky;
		top: 0;
		transform: translateY(0);
		transition: transform .3s ease;
	}
	#masthead.is-hidden {
		transform: translateY(-100%);
	}
}

/* Intestazioni: Headings Text Color #395337 (le eccezioni, es. titoli
   widget footer bianchi, vincono per specificità di classe) */
h1, h2, h3, h4, h5, h6 {
	color: #395337;
}

/* Nome sito: Secondary #3a7423 ovunque — regola esplicita perché sul
   front-blog .site-title è un h1 e la regola tag sopra vincerebbe
   sull'inherit da .title-wrapper */
.site-branding .site-title {
	color: #3a7423;
}

.hoferhof-topbar {
	background: #395337;
	color: #fff;
}

.hoferhof-topbar-container {
	max-width: 1620px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 6px 25px;
	font-size: 13px;
}

.hoferhof-topbar a {
	color: #fff;
}

.hoferhof-topbar .topbar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
}

.hoferhof-topbar img {
	vertical-align: middle;
}

/* Hamburger mobile: visibile solo <768px */
.site-header .header-dropdown-toggle {
	background: transparent;
	border: none;
	color: #3a7423;
	font-size: 24px;
	padding: 8px 12px;
	display: none;
}

/* Bottone NON aperto (anche se resta in focus/hover dopo il tap
   di chiusura): nessuno sfondo, hamburger sempre leggibile.
   :not(.toggled-on) conta come una classe → pareggia la specificità
   delle regole hover/focus verdi di style.css:2003 e le batte per
   ordine di sorgente. L'outline tastiera (style.css:2007) resta */
.site-header .header-dropdown-toggle:not(.toggled-on),
.site-header .header-dropdown-toggle:not(.toggled-on):hover,
.site-header .header-dropdown-toggle:not(.toggled-on):focus {
	background: transparent;
	border: none;
	color: #3a7423;
}

/* Toggle aperto: solo X bianca su fondo verde (niente fa-bars,
   niente bordo rosa di style.css:2013 e del Customizer accent) */
.site-header .header-dropdown-toggle.toggled-on {
	background: #3a7423;
	border: none;
	color: transparent; /* ripristina il transparent di style.css:2014 */
}

.site-header .header-dropdown-toggle.toggled-on::before {
	content: "\f00d"; /* glifo fa-times, FA 5 già enqueue */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	line-height: 1;
	color: #fff;
}

/* Guard hover/focus: evita che lo stato aperto riprenda il verde
   chiaro #455d58 (style.css:2003) o i bordi (style.css:2018) */
.site-header .header-dropdown-toggle.toggled-on:hover,
.site-header .header-dropdown-toggle.toggled-on:focus {
	background-color: #3a7423;
	border-color: transparent;
}

/* Menu aperto: l'hamburger esce dal layout (display:none, immune
   da qualsiasi cascata sui colori), resta solo la X bianca già
   disegnata come ::before del bottone */
.site-header .header-dropdown-toggle.toggled-on i {
	display: none;
}

@media (max-width: 767px) {
	.site-header .header-dropdown-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Nascondi menu-1 inline e il 3-puntini Priority+ su mobile */
	#masthead .default-navigation .header-menu-wrapper {
		display: none;
	}
}

@media (max-width: 767px) {
	.hoferhof-topbar-container {
		padding: 6px 12px;
		font-size: 12px;
		gap: 10px;
	}
	.hoferhof-topbar .topbar-menu {
		gap: 10px;
	}
	.hoferhof-hide-mobile {
		display: none;
	}
}

.title-wrapper {
	color:#3a7423
}

/* --- Variante hero: H1/H2 stilizzati come H3 ---------------- */
.title-sm {
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.06rem);
  line-height: 1.28;
  font-weight: inherit;
  margin-top: 1rem;  /* fisso, non scala con lo shrink del font su mobile */
}

.entry-header{
	background: rgba(100, 100, 100, 0.1); }


#header-dropdown-toggle{color:white;}

/* decorazioni header*/
.entry-header > .room-title::before,
.entry-header > .room-title::after {
  content: "";
  display: inline-block;
  height: 0.8em; /* proporzionale al font-size del testo */
  aspect-ratio: 66 / 40; /* mantiene le proporzioni originali  */
  width: auto;           
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.entry-header > .room-title::before {
  background-image: url('../images/floral-before.png');
  margin-right: 8px;
}

.entry-header > .room-title::after {
  background-image: url('../images/floral-after.png');
  margin-left: 8px;
}

/* decorazioni non visibili su smartphone*/
@media (max-width: 767px) {
  .entry-header > .room-title::before,
  .entry-header > .room-title::after {
    display: none;
  }
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select  {
	border-radius:10px;
}

/* Bottoni "solidi": angoli arrotondati a pillola (25px). Assorbe la
   vecchia regola input.button e sovrascrive via cascata il
   border-radius:0 upstream (style.css, gruppo button/input/.button/
   .more-link/read-more Stratum). I bottoni trasparenti animati
   (.animated-button, .hoferhof-button, bottoni nei wrapper MPHB con
   rombo ::before/::after) restano senza box arrotondato. */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.more-link,
.stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a {
	border-radius: 25px;
}

form.mphb_sc_search-form {
	color:white;
}

.single-room-type-wrapper .room-excerpt p {
  margin: 0;
}

.single-room-type-wrapper .room-excerpt p::first-letter {
  float: left;
  font-size: 90px;
  line-height: 70px;   /* controlla quante righe "occupa" la lettera */
  padding-right: 10px;
  padding-top: 4px;    /* micro-aggiustamento per l'allineamento con la 1ª riga */
  font-weight: bold;
}

.other-rooms-title {
	display: flex;
 	justify-content: center;
  	align-items: center;
}

/* Container "Altri alloggi": allineato al contenuto della pagina
   (1340px come .single-room-type-wrapper, padding laterali come
   .site-main > .hentry) */
.other-rooms-section {
	max-width: 1340px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

@media (min-width: 768px) {
	.other-rooms-section {
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (min-width: 992px) {
	.other-rooms-section {
		padding-left: 50px;
		padding-right: 50px;
	}
}

/* Griglia "Altri alloggi" sotto la pagina singolo alloggio
   (renderizzata via [mphb_rooms class="other-rooms"], vedi
   hoferhof_other_room_types_html() in inc/mphb-functions.php) */
.mphb_sc_rooms-wrapper.other-rooms .rooms-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
}

.mphb_sc_rooms-wrapper.other-rooms .mphb-room-type:not(:first-of-type) {
	margin-top: 0;
}

/* Titolo dei widget bianco solo nel footer */
.site-footer .widget-title {
	color: #fff;
}

/* link nei footer */
.site-footer a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #f5c451;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #f5c451;
}

/* Margini del Widget del footer (sovrascrive il 1.5em
   bottom di .widget in style.css:3224) */
.site-footer .widget {
	margin-top: 20px;
	margin-bottom: 0px;
}

/* Interlinea dei paragrafi del footer uniformata al testo
   delle pagine (sovrascrive i 40px fissi di style.css:2188) */
.footer-widgets p {
	line-height: 1.6;
}

/* Padding footer responsive (sovrascrive style.css:2062-2072) */
@media (min-width: 768px) {
	.site-footer {
		padding: 40px 20px;
	}
}

@media (min-width: 992px) {
	.site-footer {
		/* top | laterali | bottom */
		padding: 60px 50px 40px;
	}
}

.site-info{
	margin-top: 1em;
}

/* ------------------------------------------------------------------
   Menu lingue footer (menu WP "Footer Languages" → container
   menu-footer-languages-container, via widget "Menu di navigazione"
   in una sidebar footer): icona fa-globe bianca + voci DE/IT/EN
   su unica riga separate da spazio. Nessun colore forzato sui link:
   valgono le regole .site-footer a (bianco/oro).
   ------------------------------------------------------------------ */
.menu-footer-languages-container {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.menu-footer-languages-container::before {
	content: "\f0ac"; /* fa-globe, FA 5 Free solid (già enqueue) */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1em;
	line-height: 1;
}

.menu-footer-languages-container ul.menu {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------
   Header-menu (menu-1 desktop): testo verde scuro, underline animato
   sulla voce attiva/hover, pill hover nei sottomenu, dropdown restyled.
   Include le voci spostate nel dropdown Priority+ (.primary-menu-more).
   ------------------------------------------------------------------ */

/* 1. Testo di default: verde #395337, nessuno sfondo */
.header-menu-container a,
.primary-menu-more a {
	color: #395337;
	text-decoration: none;
	background: none;
}

/* Neutralizza l'accento rosa (#fc9285) su hover/focus/opened */
.header-menu-container li.opened > a,
.header-menu-container li.focus > a,
.header-menu-container li:hover > a,
.primary-menu-more li.opened > a,
.primary-menu-more li.focus > a,
.primary-menu-more li:hover > a {
	color: #395337;
}

/* Le voci correnti/antenati restano verdi anche in hover
   (override di style.css:1533-1542 e del Customizer accent;
   dopo la regola hover per vincere il tie-break a pari specificità) */
.header-menu-container li.current_page_item > a,
.header-menu-container li.current-menu-item > a,
.header-menu-container li.current_page_ancestor > a,
.header-menu-container li.current-menu-ancestor > a,
.primary-menu-more li.current_page_item > a,
.primary-menu-more li.current-menu-item > a,
.primary-menu-more li.current_page_ancestor > a,
.primary-menu-more li.current-menu-ancestor > a {
	color: #395337;
}

/* 2. Underline animato — solo voci di primo livello visibili */
.header-menu-container .header-menu > li > a {
	position: relative;
	display: inline-block;
}

.header-menu-container .header-menu > li > a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 4px;
	background: linear-gradient(90deg, #395337, #83df5f);
	transition: all 0.5s ease-in-out;
}

/* Hover + voce attiva (corrente e antenati): underline pieno */
.header-menu-container .header-menu > li > a:hover::before,
.header-menu-container .header-menu > li:hover > a::before,
.header-menu-container .header-menu .current_page_item > a::before,
.header-menu-container .header-menu .current-menu-item > a::before,
.header-menu-container .header-menu .current_page_ancestor > a::before,
.header-menu-container .header-menu .current-menu-ancestor > a::before {
	width: 100%;
	border-radius: 50%;
}

/* 3. Voci dei sottomenu: effetto pill al passaggio del mouse */
.header-menu-container ul ul a,
.primary-menu-more ul ul a {
	display: block;
	width: auto; /* override dei 200px fissi (style.css:1489) */
	color: #395337;
	padding: 9px 12px;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}

.header-menu-container ul ul li:hover > a,
.header-menu-container ul ul li.focus > a,
.header-menu-container ul ul li.opened > a,
.header-menu-container ul ul .current_page_item > a,
.header-menu-container ul ul .current-menu-item > a,
.primary-menu-more ul ul li:hover > a,
.primary-menu-more ul ul li.focus > a,
.primary-menu-more ul ul li.opened > a,
.primary-menu-more ul ul .current_page_item > a,
.primary-menu-more ul ul .current-menu-item > a {
	background: rgba(127, 34, 61, 0.09);
	color: #7f223d;
	font-weight: 500;
}

/* 4. Contenitore dropdown: angoli arrotondati, ombra, apertura morbida.
   "top" fissato identico nei due stati: anima solo il transform. */
.header-menu-container ul ul,
.primary-menu-more ul ul {
	top: calc(100% + 6px);
	background: #ffffff;
	border-radius: 10px;
	border: 0.5px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
	padding: 6px;
	min-width: 220px;

	/* stato chiuso */
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* stato aperto (hover/focus/opened — vedi js/functions.js:384-394) */
.header-menu-container li.opened > ul,
.header-menu-container li.focus > ul,
.header-menu-container li:hover > ul,
.primary-menu-more li.opened > ul,
.primary-menu-more li.focus > ul,
.primary-menu-more li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ------------------------------------------------------------------
   Megamenu mobile (.header-dropdown-content .main-navigation):
   testo verde scuro + pill sulla voce selezionata/attiva
   (su touch non c'è hover: valgono le classi WP server-side)
   ------------------------------------------------------------------ */

/* Testo base: verde scuro, ereditato da link e toggle "+".
   Scope sul pannello per battere l'eventuale colore-testo
   del Customizer su .main-navigation (inc/customizer.php:582).
   max-width: nel flex-column del wrapper l'elemento clampato
   si ancora a sinistra — su landscape la nav (pill e underline
   comprese) non si estende più a tutto video; nessun effetto
   sui portrait ≤420px */
.header-dropdown-content .main-navigation {
	color: #395337;
	max-width: 420px;
}

/* Neutralizza il rosa #fc9285 su hover e voci correnti/antenati
   (style.css:1368/1390-1395 e inc/customizer.php:442-446) */
.main-navigation li:hover > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_ancestor > a,
.main-navigation li.current-menu-ancestor > a {
	color: #395337;
}

/* Pill sulla voce selezionata/attiva dei SOTTOMENU (livelli 2+,
   il doppio "li" esclude il primo livello). Dopo la regola
   precedente per vincere i tie-break. Geometria: i link hanno
   padding orizzontale 0, quindi ±8px estendono la tinta senza
   spostare il testo (rientrano nei 10px di margine laterale
   del pannello, style.css:1952) */
.main-navigation li li.current_page_item > a,
.main-navigation li li.current-menu-item > a,
.main-navigation li li.current_page_ancestor > a,
.main-navigation li li.current-menu-ancestor > a {
	background: rgba(127, 34, 61, 0.09);
	border-radius: 6px;
	color: #7f223d;
	font-weight: 700;
	margin-left: -8px;
	margin-right: -8px;
	padding-left: 8px;
	padding-right: 8px;
}

/* Livello 1: underline verde come nel menu desktop (curva sotto
   la voce attiva/antenata). Il testo resta verde scuro senza
   grassetto, in coerenza con il desktop.
   bottom:-4px perché i link top-level hanno padding 0: la barra
   non tocca i discendenti e il gap di 10px tra le voci la assorbe */
.main-navigation .primary-menu > li.current_page_item > a,
.main-navigation .primary-menu > li.current-menu-item > a,
.main-navigation .primary-menu > li.current_page_ancestor > a,
.main-navigation .primary-menu > li.current-menu-ancestor > a {
	position: relative;
}

.main-navigation .primary-menu > li.current_page_item > a::before,
.main-navigation .primary-menu > li.current-menu-item > a::before,
.main-navigation .primary-menu > li.current_page_ancestor > a::before,
.main-navigation .primary-menu > li.current-menu-ancestor > a::before {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #395337, #3a7423);
	border-radius: 50%;
}

/* ------------------------------------------------------------------
   Accordion "Servizi": la sezione facilities (li.mphb-room-type-
   facilities) collassa a una "chip" cliccabile nei contesti attivati
   da initFacilitiesAccordion() in js/functions.js. Il gating è la
   classe .facilities-accordion, applicata dal JS SOLO nei contesti
   previsti: sidebar singolo alloggio su mobile, risultati ricerca e
   [mphb_rooms] su tutti i dispositivi. Nessun media query: fuori
   contesto la classe non esiste e queste regole restano inerti.
   ------------------------------------------------------------------ */
/* In modalità accordion la stella di lista (style.css:4512) è rumore:
   la chip parla da sola */
li.mphb-room-type-facilities.facilities-accordion {
	padding-left: 0;
	margin: 8px 0;
}

li.mphb-room-type-facilities.facilities-accordion::before {
	content: none;
}

/* Header-chip: riga intera cliccabile, badge "+" a destra */
li.mphb-room-type-facilities.facilities-accordion .mphb-facilities-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	user-select: none;
	padding: 10px 14px 10px 16px;
	background: #f4f7f1; /* tinta chiara derivata dal verde secondario */
	border: 1px solid #e5e5e5;
	transition: background-color .2s ease, border-color .2s ease;
	/* Allineato al corpo testo del tema (1.2rem → 20.4px), non alla
	   lista attributi (15px): il titolo guida, il contenuto resta denso */
	font-size: 1.2rem;
	font-weight: 700;
	color: #3a7423;
}

li.mphb-room-type-facilities.facilities-accordion .mphb-facilities-title:hover {
	background: #ebf1e6;
	border-color: #3a7423;
}

/* Stato aperto persistente: la chip resta "attiva" finché è aperta */
li.mphb-room-type-facilities.facilities-accordion.facilities-expanded .mphb-facilities-title {
	background: #ebf1e6;
	border-color: #3a7423;
}

li.mphb-room-type-facilities.facilities-accordion .mphb-facilities-title:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 3px;
}

/* Badge circolare con il "+" bianco: impossibile confonderlo con
   un'etichetta o con il titolo di ciò che segue */
li.mphb-room-type-facilities.facilities-accordion .mphb-facilities-title::after {
	content: "\f067"; /* fa-plus, FA 5 già enqueue */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #3a7423;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	margin-left: 12px;
	transition: transform .3s ease, background-color .2s ease;
}

li.mphb-room-type-facilities.facilities-accordion.facilities-expanded .mphb-facilities-title::after {
	transform: rotate(45deg); /* il "+" diventa "×" */
	background: #7f223d; /* verde → burgundy: stesso linguaggio hover link */
}

/* Visibilità guidata dalle sole classi: nessun inline-style JS da
   sincronizzare. Chiuso di default, aperto con .facilities-expanded */
li.mphb-room-type-facilities.facilities-accordion .mphb-attribute-value {
	display: none;
}

li.mphb-room-type-facilities.facilities-accordion.facilities-expanded .mphb-attribute-value {
	display: block;
}

/* ------------------------------------------------------------------
   Bottoni "Prenota" (.mphb-book-button) e .hoferhof-button:
   primo piano #3a7423, hover #7f223d. Bordo ::before, freccia svg
   e pallino ::after usano currentColor → basta cambiare color.
   Le varianti wrapper con button.mphb-book-button battono i
   selettori upstream "color: inherit" di style.css:715-717 (0,3,1)
   e l'accent hover dello slider (style.css:4431, 0,5,0).
   ------------------------------------------------------------------ */
.hoferhof-button,
.mphb-book-button,
.mphb_sc_room-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button,
.mphb_sc_search_results-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button,
.mphb_sc_rooms-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button {
	color: #3a7423;
}

.hoferhof-button:hover,
.mphb-book-button:hover,
.mphb_sc_room-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button:hover,
.mphb_sc_search_results-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button:hover,
.mphb_sc_rooms-wrapper .type-mphb_room_type .mphb-to-book-btn-wrapper button.mphb-book-button:hover {
	color: #7f223d;
}

/* ------------------------------------------------------------------
   Bottoni "solidi" su sfondo pieno (verde #3a7423 → burgundy
   #7f223d in hover, da style.css gruppo .button): primo piano
   sempre bianco. Le regole verdi qui sopra restano riservate ai
   soli bottoni trasparenti animati. Specificità (0,2,0)/(0,3,0) >
   .mphb-book-button (0,1,0)/(0,2,0). Markup plugin: <a|button|input
   class="button … mphb-book-button / mphb-confirm-reservation">
   (search results, loop camere, checkout).
   ------------------------------------------------------------------ */
.button.mphb-book-button,
.mphb-confirm-reservation {
	color: #fff;
}

.button.mphb-book-button:hover,
.button.mphb-book-button:focus,
.mphb-confirm-reservation:hover,
.mphb-confirm-reservation:focus {
	color: #fff;
}

/* ------------------------------------------------------------------
   Accordion nativo riutilizzabile per blocchi HTML a mano
   (widget "HTML personalizzato", blocco HTML di Elementor, ecc.):
   <details class="hoferhof-details">
     <summary>Titolo</summary>
     <div>Contenuto…</div>
   </details>
   Nessun JS: usa il comportamento nativo di <details>/<summary>.
   Look coerente con l'accordion "Servizi" della sidebar (titolo
   verde bold #3a7423, "+" che ruota in "×" quando aperto).
   Attivo su tutti i breakpoint.
   ------------------------------------------------------------------ */
.hoferhof-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	user-select: none;
	font-weight: 700;
	color: #3a7423;
	list-style: none; /* rimuove il triangolo di default */
}

.hoferhof-details > summary::-webkit-details-marker {
	display: none;
}

.hoferhof-details > summary:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 3px;
}

.hoferhof-details > summary::after {
	content: "\f067"; /* fa-plus, FA 5 già enqueue */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 12px;
	color: #3a7423;
	margin-left: 10px;
	transition: transform .3s ease;
}

.hoferhof-details[open] > summary::after {
	transform: rotate(45deg); /* il "+" diventa "×" */
}

/* Outline text in home page */
.elementor-widget-heading.outlined .elementor-heading-title {
    -webkit-text-stroke: 1.5px #7f223d;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

.elementor-widget-heading.outlined.on-dark .elementor-heading-title {
    -webkit-text-stroke: 1.5px #ffffff;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

/* ------------------------------------------------------------------
   Barra azioni rapide mobile (sidebar-actions.php, widget sidebars
   10/11/12/13): fixed bottom, 58px contenuti, sfondo #395337. Visibile
   solo <768px; appare allo scroll verso alto oltre 100px tramite la
   classe .is-visible applicata da updateStickyHeader() (js/functions.js).
   env(safe-area-inset-bottom): su iPhone con home indicator la barra
   non finisce sotto di esso (i 58px restano l'altezza dei contenuti).
   ------------------------------------------------------------------ */
.hoferhof-actions-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: calc(58px + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: #395337;
	z-index: 99; /* sotto #masthead (100) */
	transform: translateY(100%);
	transition: transform .3s ease;
	display: none; /* default: solo smartphone */
}

.hoferhof-actions-bar.is-visible {
	transform: translateY(0);
}

/* Megamenu hamburger aperto: pannello full-screen, la barra non serve */
body.menu-opened .hoferhof-actions-bar {
	transform: translateY(100%);
}

.hoferhof-actions-bar-container {
	height: 100%;
	display: flex;
	align-items: stretch;
}

.hoferhof-actions-bar .hoferhof-actions-widget-area {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

/* Centratura verticale reale: il margine bottom 1.5em di .widget
   (style.css:3214) e il line-box ereditato dal body spostavano i
   contenuti verso l'alto. L'intera catena .widget → wrapper interno
   → .qa-btn è flex in stretch: icona+etichetta centrano esattamente
   e l'intero terzo di barra (58px) resta tappabile */
.hoferhof-actions-bar .widget {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	justify-content: center;
	color: #fff;
}

.hoferhof-actions-bar .widget > * {
	flex: 1 1 auto;
	margin: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	line-height: 1;
}

/* Widget Text: wpautop avvolge il markup in <p> (margin 1.5em di
   style.css:456, blocco non-flex) — il <p> torna anello della
   catena flex, a qualunque profondità tra .widget e .qa-btn */
.hoferhof-actions-bar .widget p {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.hoferhof-actions-bar a {
	color: #fff;
}

@media (max-width: 767px) {
	.hoferhof-actions-bar {
		display: block;
	}
}

/* Pulsanti barra azioni rapide (widget Text o Custom HTML nelle aree
   Azioni rapide 1/2/3/4): icona sopra, etichetta sotto, entrambi
   bianchi (il colore è garantito anche da .hoferhof-actions-bar a) */
.hoferhof-actions-bar .qa-btn {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .3px;
}

.hoferhof-actions-bar .qa-btn i {
	font-size: 19px;
}

/* I <br> di wpautop dentro il flex column sono flex item a altezza
   zero: raddoppiano il gap icona/etichetta — li neutralizziamo */
.hoferhof-actions-bar .qa-btn br {
	display: none;
}

/* ------------------------------------------------------------------
   Gallery slider stanza singola ([mphb_room] → .mphb_sc_room-wrapper)

   Le frecce della gallery FlexSlider (plugin flexslider-fixed.css:
   opacity 0, visibili solo :hover; diamante 45px in style.css
   4210-4312) su touch non sono raggiungibili: qui vengono rese
   sempre visibili e ridotte a 24px su dispositivi senza hover
   (smartphone/tablet) e su viewport <768px. Desktop intatto:
   frecce grandi solo on-hover.

   Specificità (0,6,1)+ > regole upstream coinvolte (plugin 0,3-4,1,
   tema 0,4-5,1): vince a prescindere dall'ordine di enqueue.
   Il rotate(-45deg) del diamante resta ereditato da style.css.
   ------------------------------------------------------------------ */
@media (hover: none), (max-width: 767.98px) {

	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider .flex-direction-nav .flex-nav-prev a,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider .flex-direction-nav .flex-nav-next a {
		opacity: 1;
		width: 24px;
		height: 24px;
	}

	/* Il diamante è disegnato con :before (bordo bianco) e :after
	   (riempimento bianco) a 45px in style.css:4268-4289 */
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-prev a:before,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-prev a:after,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-next a:before,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-next a:after {
		width: 24px;
		height: 24px;
	}

	/* Chevron SVG iniettato via prevText/nextText (inc/mphb-functions.php):
	   nasce 18×15 via attributi, qui riscalato */
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-prev a svg,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-next a svg {
		width: 11px;
		height: 9px;
	}

	/* Azzera lo shift laterale a 55px tipico dell'hover (style.css:4219-4225):
	   su touch il sticky-hover potrebbe lasciare le frecce spostate */
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider:hover ul.flex-direction-nav .flex-nav-prev a {
		left: 10px;
	}

	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider:hover ul.flex-direction-nav .flex-nav-next a {
		right: 10px;
	}

	/* Aspetto identico all'hover desktop (style.css:4291-4305): sfondo
	   trasparente (il riempimento bianco :after collassa) e chevron
	   bianco. Il bordo :before resta: la rotazione ±45° di un quadrato
	   è lo stesso rombo. Base e hover diventano identici: nessun salto
	   visivo da sticky-hover touch */
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-prev a:after,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-next a:after {
		transform: scale(0.01) rotate(45deg);
		opacity: .2;
	}

	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-prev a svg,
	.mphb_sc_room-wrapper .type-mphb_room_type .mphb-flexslider ul.flex-direction-nav .flex-nav-next a svg {
		fill: #fff;
	}
}

/* ------------------------------------------------------------------
   Card alloggi — stesso stile su ricerca, singolo e listing:
   [mphb_search_results] / [mphb_room] / [mphb_rooms]

   Target: il per-room wrapper div.type-mphb_room_type emesso dagli
   override hotel-booking/shortcodes/{search-results,room,rooms}/
   room-content.php. Il wrapper di search_results contiene anche
   results-info, carrello e recommendation: fuori scope, non toccati.
   Il widget stanze (.mphb_widget_rooms-wrapper) resta escluso.

   [mphb_rooms] include volutamente il blocco "Altri alloggi"
   (.other-rooms) e le varianti slider/horizontal del listing.

   Niente margin tra card: la spaziatura esiste già (plugin
   assets/css/mphb.css:352-355, margin-top: 4em sui non-primi;
   griglia other-rooms gap: 40px in custom.css:297-301).

   Le dichiarazioni condivise con la classe riutilizzabile
   .hoferhof-card (fine file) stanno nello stesso blocco: modificare
   bordo/ombra qui aggiorna anche quella.
   ------------------------------------------------------------------ */
.mphb_sc_search_results-wrapper .type-mphb_room_type,
.mphb_sc_room-wrapper .type-mphb_room_type,
.mphb_sc_rooms-wrapper .type-mphb_room_type {
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	overflow: hidden;
	border-radius: 0 0 20px 20px;
}

/* ------------------------------------------------------------------
   Classe riutilizzabile .hoferhof-card

   Stessa veste delle card alloggi (blocco precedente, con cui
   condivide le dichiarazioni base) ma con angoli arrotondati su
   TUTTI i lati: da usare sui wrapper di widget/contenuto di pagina
   per uniformità visiva (Elementor → Avanzate → Classi CSS, blocco
   HTML, ecc.).

   Uso: <div class="hoferhof-card"> … </div>
   Nessun padding interno fornito: lo decide il contenuto, come
   nelle card alloggi (il padding sta nelle sezioni interne).
   ------------------------------------------------------------------ */
.hoferhof-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	overflow: hidden;
	border-radius: 20px;
}

/* ------------------------------------------------------------------
   Widget della sidebar "Pagine interne" (sidebar-8, stampata da
   sidebar-page.php in aside.widget-area.page-sidebar): uniformati
   alla veste card degli alloggi.

   I widget classici WP non hanno un campo "classe CSS" nell'admin,
   quindi .hoferhof-card non è applicabile lì: si interviene sul
   contesto. style.css:3241-3250 fornisce già background #fff,
   border #e5e5e5, padding 40px e border-radius: 4px — qui si
   allineano solo raggio e ombra al look card (specificità pari,
   0,2,0, ma custom.css carica dopo style.css → override garantito).

   Volutamente SENZA overflow: hidden (a differenza delle card
   alloggi): taglierebbe il calendario datepick del form di ricerca,
   che sborda dal widget in posizione assoluta. Il padding 40px
   esistente resta: i widget ne hanno bisogno.
   ------------------------------------------------------------------ */
.page-sidebar .widget {
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}