/* Testata e fondo pagina v2 su tutto il sito (grafica di Doc/grafica, ottobre 2026).
   Due stati della barra del tema:
   - trasparente sulla foto (.top_bar.hasbg: home, strutture), logo grande che sporge;
   - piena (dopo lo scorrimento e nelle pagine senza foto in alto): blu con la striscia dei colori, logo dentro la barra.
   Il tema passa da #custom_logo_transparent a #custom_logo alternando .hidden: le regole valgono per tutti e due,
   e i link non si spostano. Il magazine ha .hasbg ma una barra piena (css/magazine-masonry.css). */

/* ===== Logo ===== */
body.os-testata-v2 .top_bar #custom_logo_transparent.hidden, body.os-testata-v2 .top_bar #custom_logo.hidden { display: none; }
body.os-testata-v2 .top_bar #custom_logo_transparent:not(.hidden), body.os-testata-v2 .top_bar #custom_logo:not(.hidden) { display: block; width: 104px; height: 104px; margin-top: 16px; border-radius: 50%; background: #fff url("../img/home/logo-onlinesicilia-v2.webp") center/cover no-repeat; box-shadow: 0 0 0 2.5px #FFC83D, 0 12px 30px rgba(10,20,35,.45); }
body.os-testata-v2 .top_bar #custom_logo_transparent img, body.os-testata-v2 .top_bar #custom_logo img { visibility: hidden; width: 100%; height: 100%; max-height: none; }

/* ===== Barra trasparente sulla foto ===== */
/* (!important perché il CSS aggiuntivo del sito ha body.home .top_bar.hasbg con !important) */
body.os-testata-v2 .header_style_wrapper .top_bar.hasbg { background: transparent !important; border-bottom: 0; box-shadow: none; }

/* ===== Barra piena ===== */
body.os-testata-v2 .header_style_wrapper .top_bar:not(.hasbg), body.os-testata-v2.blog .header_style_wrapper .top_bar { position: relative; padding-bottom: 4px !important; background: #182439 !important; border-bottom: 0; box-shadow: 0 10px 28px rgba(10,20,35,.28); }
body.os-testata-v2.blog .header_style_wrapper { background: transparent; }
body.os-testata-v2 .header_style_wrapper .top_bar:not(.hasbg)::after, body.os-testata-v2.blog .header_style_wrapper .top_bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #F6CA5A 0 43%, #D06032 43% 57.25%, #2A5D8E 57.25% 71.5%, #3E6A47 71.5% 85.75%, #5639A2 85.75%); }

/* La striscia sta dentro la barra (padding-bottom), così lo script del tema, che sposta il contenuto
   dell'altezza della barra, ne tiene conto. Le pagine Elementor che iniziano con un titolo prendono
   uno stacco: il CSS aggiuntivo del sito azzera il padding in alto di tutte le sezioni Elementor */
body.os-testata-v2 .elementor > :is(.elementor-top-section, .e-con):first-child:has(.elementor-widget-heading) { padding-top: 56px !important; }
@media (max-width: 767px) {
	body.os-testata-v2 .elementor > :is(.elementor-top-section, .e-con):first-child:has(.elementor-widget-heading) { padding-top: 32px !important; }
}

/* ===== Menu ===== */
body.os-testata-v2 #main_menu { display: flex; align-items: center; }
body.os-testata-v2 .top_bar #main_menu > li > a { color: #fff; font-family: Raleway, system-ui, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.os-testata-v2 .top_bar #main_menu > li > a:hover { color: #FFE590; }
body.os-testata-v2 .top_bar #main_menu > li.current-menu-item > a, body.os-testata-v2 .top_bar #main_menu > li.current-menu-ancestor > a { color: #fff; font-weight: 700; text-decoration: none; box-shadow: inset 0 -3px 0 #FFC83D; padding-bottom: 4px; }
/* Nella barra piena la voce attiva è una pillola gialla fatta d'ombre, che non occupa spazio */
body.os-testata-v2 .top_bar:not(.hasbg) #main_menu > li.current-menu-item > a, body.os-testata-v2.blog .top_bar #main_menu > li.current-menu-item > a,
body.os-testata-v2 .top_bar:not(.hasbg) #main_menu > li.current-menu-ancestor > a, body.os-testata-v2.blog .top_bar #main_menu > li.current-menu-ancestor > a { color: #182439; background: #F6CA5A; border-radius: 999px; padding-bottom: 0; box-shadow: -5px 0 0 8px #F6CA5A, 5px 0 0 8px #F6CA5A; }
body.os-testata-v2 .top_bar:not(.hasbg) #main_menu > li.current-menu-item > a::before, body.os-testata-v2.blog .top_bar #main_menu > li.current-menu-item > a::before,
body.os-testata-v2 .top_bar:not(.hasbg) #main_menu > li.current-menu-ancestor > a::before, body.os-testata-v2.blog .top_bar #main_menu > li.current-menu-ancestor > a::before { display: none; }
/* Il menu deve stare accanto al logo, altrimenti scende sotto: voci un po' più vicine,
   16 px sotto i 1240 px e 15 px sotto i 1200 (lì il tema blocca la testata a 960 px) */
@media (min-width: 961px) {
	body.os-testata-v2 .top_bar #main_menu > li { padding-left: 6px; padding-right: 6px; }
	/* Il menu completo è già nella barra: niente hamburger, come nella grafica */
	body.os-testata-v2 .top_bar #logo_right_wrapper #mobile_nav_icon { display: none !important; }
}
@media (max-width: 1239px) {
	body.os-testata-v2 .top_bar #main_menu > li > a { font-size: 16px; }
}
@media (max-width: 1199px) {
	body.os-testata-v2 .top_bar #main_menu > li > a { font-size: 15px; margin-right: 8px; }
}

/* «Dove dormire» = la voce con il sottomenu dei soggiorni; :has() lo trova subito, senza aspettare lo script.
   Con .top_bar vince sulle regole della voce attiva: resta arancio anche nelle pagine dei soggiorni.
   (!important sul padding: nelle pagine con barra piena lo script del tema lo azzera nello stile in linea) */
body.os-testata-v2 .top_bar #main_menu > li:has(> .sub-menu a[href*="soggiorni-selezionati"]) { order: 99; }
body.os-testata-v2 .top_bar #main_menu > li:has(> .sub-menu a[href*="soggiorni-selezionati"]) > a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px !important; border-radius: 999px; background: #E0571F; color: #fff; font-weight: 800; box-shadow: 0 8px 18px rgba(224,87,31,.35); }
body.os-testata-v2 .top_bar #main_menu > li:has(> .sub-menu a[href*="soggiorni-selezionati"]) > a:hover { background: #C84A16; color: #fff; }
body.os-testata-v2 .top_bar #main_menu > li:has(> .sub-menu a[href*="soggiorni-selezionati"]) > a::after { display: none; }
body.os-testata-v2 .top_bar #main_menu > li:has(> .sub-menu a[href*="soggiorni-selezionati"]) > a::before { content: ""; display: block; position: static; flex: none; width: 18px; height: 18px; margin: 0; opacity: 1; transform: none; transition: none; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M24,200V56M24,168H232v32M232,168V120a32,32,0,0,0-32-32H104v80' fill='none' stroke='%23fff' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='64' cy='128' r='22' fill='%23fff' opacity='0.35'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M24,200V56M24,168H232v32M232,168V120a32,32,0,0,0-32-32H104v80' fill='none' stroke='%23fff' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='64' cy='128' r='22' fill='%23fff' opacity='0.35'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ===== Lente: tonda, prima di «Dove dormire» nel menu e prima di «Dormire» su mobile ===== */
body.os-testata-v2 #main_menu > li.osh-menu-cerca { order: 98; margin-right: 10px; }
body.os-testata-v2 .top_bar .osh-cerca-apri { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; line-height: 1; box-shadow: none; cursor: pointer; transition: background-color .2s; }
body.os-testata-v2 .top_bar:not(.hasbg) .osh-cerca-apri, body.os-testata-v2.blog .top_bar .osh-cerca-apri { background: #293857; }
body.os-testata-v2 .top_bar .osh-cerca-apri:hover { background: rgba(255,255,255,.28); }
body.os-testata-v2 .top_bar .osh-cerca-apri svg { display: block; }
body.os-testata-v2 .osh-dormire-mobile, body.os-testata-v2 .top_bar .osh-cerca-apri.osh-cerca-mobile { display: none; }

/* ===== Tablet e desktop: logo più piccolo nella barra piena, hamburger tondo fino a 960 px ===== */
@media (min-width: 768px) {
	body.os-testata-v2 .top_bar:not(.hasbg) #custom_logo:not(.hidden), body.os-testata-v2 .top_bar:not(.hasbg) #custom_logo_transparent:not(.hidden),
	body.os-testata-v2.blog .top_bar #custom_logo:not(.hidden), body.os-testata-v2.blog .top_bar #custom_logo_transparent:not(.hidden) { width: 80px; height: 80px; margin: 11px 12px 0; box-shadow: 0 0 0 2.5px #F6CA5A; }
	/* Dove la barra era trasparente, allo scorrimento il logo si rimpicciolisce (classe messa dallo script) */
	html.osh-con-foto body.os-testata-v2:not(.blog) .top_bar.scroll #custom_logo:not(.hidden) { animation: osh-logo-scorre .25s ease-out; }
	body.os-testata-v2 .top_bar #logo_right_wrapper #mobile_nav_icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 6px 0 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; }
	body.os-testata-v2 .top_bar:not(.hasbg) #logo_right_wrapper #mobile_nav_icon { background: #293857; }
	body.os-testata-v2 .top_bar #logo_right_wrapper #mobile_nav_icon span { position: static; margin: 0; color: #fff; }
}
@keyframes osh-logo-scorre { from { width: 104px; height: 104px; margin: 16px 0 0; } }

/* ===== Mobile: logo 72 px, lente, «Dormire» e hamburger a destra ===== */
@media (max-width: 767px) {
	body.os-testata-v2 .top_bar #custom_logo_transparent:not(.hidden), body.os-testata-v2 .top_bar #custom_logo:not(.hidden) { width: 72px; height: 72px; margin-top: 14px; box-shadow: 0 0 0 2px #FFC83D, 0 8px 22px rgba(10,20,35,.45); }
	body.os-testata-v2 .top_bar #logo_right_wrapper #mobile_nav_icon { position: static; top: auto; display: inline-flex !important; align-items: center; justify-content: center; border: 0; width: 48px; height: 48px; margin: 0; padding: 0; border-radius: 50%; background: #FFC83D; color: #14243B; line-height: 1; }
	body.os-testata-v2 .top_bar #logo_right_wrapper #mobile_nav_icon span { display: block; position: static; margin: 0; color: #14243B; font-size: 20px; line-height: 1; }
	/* padding-top: centro dei pulsanti (48 px) allineato al centro del logo (72 px) e della fascia */
	body.os-testata-v2 .top_bar #logo_right_wrapper #logo_right_button { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: auto; padding-top: 12px; }
	body.os-testata-v2 .osh-dormire-mobile.is-in-testata { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: #E0571F; color: #fff; font-family: Raleway, system-ui, sans-serif; font-weight: 800; font-size: 14px; line-height: 1; text-decoration: none; }
	body.os-testata-v2 .top_bar .osh-cerca-apri.osh-cerca-mobile.is-in-testata { display: inline-flex; width: 48px; height: 48px; }
}

/* ===== Pannello di ricerca a tutto schermo ===== */
html.osh-ricerca-aperta { overflow: hidden; }
.osh-pannello-cerca { position: fixed; inset: 0; z-index: 100000; background: rgba(24,36,57,.94); font-family: Raleway, system-ui, sans-serif; }
.osh-pannello-cerca[hidden] { display: none; }
.osh-pannello-cerca *, .osh-pannello-cerca *::before, .osh-pannello-cerca *::after { box-sizing: border-box; }
.osh-pannello-cerca__dentro { position: relative; height: 100%; max-width: 760px; margin: 0 auto; padding: 22vh 24px 0; }
.osh-pannello-cerca__chiudi { position: fixed; top: 24px; right: 24px; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: 400 32px/48px Raleway, system-ui, sans-serif; text-align: center; cursor: pointer; }
.osh-pannello-cerca__chiudi:hover { background: rgba(255,255,255,.26); }
.osh-pannello-cerca__form { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 8px 8px 24px; border-radius: 999px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.osh-pannello-cerca__form svg { flex: none; color: #5A6577; }
.osh-pannello-cerca__form input { flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 10px 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font: 500 17px/1.3 Raleway, system-ui, sans-serif; color: #14243B; -webkit-appearance: none; appearance: none; }
.osh-pannello-cerca__form input::placeholder { color: #5A6577; opacity: 1; }
.osh-pannello-cerca__form button { flex: none; width: auto; height: auto; margin: 0; padding: 14px 28px; border: 0; border-radius: 999px; background: #E0571F; color: #fff; font: 800 15px/1.2 Raleway, system-ui, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; }
.osh-pannello-cerca__form button:hover { background: #C84A16; }
@media (max-width: 767px) {
	.osh-pannello-cerca__dentro { padding: 96px 16px 0; }
	.osh-pannello-cerca__chiudi { top: 16px; right: 16px; }
	.osh-pannello-cerca__form { gap: 8px; padding: 6px 6px 6px 18px; }
	.osh-pannello-cerca__form input { font-size: 16px; }
	.osh-pannello-cerca__form button { padding: 13px 18px; font-size: 14px; }
}

/* ===== Onda arancio sopra il footer (come nella home Elementor), su tutte le pagine ===== */
body.os-testata-v2 #footer_wrapper { position: relative; }
body.os-testata-v2 #footer_wrapper::before { content: ""; position: absolute; left: 0; right: 0; top: -49px; height: 50px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath transform='rotate(180 500 50)' fill='%23c24e05' d='M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
@media (max-width: 767px) {
	body.os-testata-v2 #footer_wrapper::before { top: -35px; height: 36px; }
}