/* ==========================================================================
   Rifugio Magià: override "zero JavaScript"
   Sostituiscono, in HTML/CSS puro, i comportamenti che nel sito originale
   erano gestiti da UIkit 2 / Widgetkit / jQuery. base.css resta invariato.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reset degli stili predefiniti degli elementi [popover] */
[popover].uk-modal,
[popover].uk-offcanvas-bar {
  margin: 0; padding: 0; border: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Navbar sticky (originale: data-uk-sticky="{media: 767}")
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .tm-navbar { position: sticky; top: 0; z-index: 980; }
}

/* Il pulsante del menu mobile è un <button>: reset dello stile nativo */
button.uk-navbar-toggle { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* --------------------------------------------------------------------------
   Dropdown "Il rifugio" (originale: data-uk-dropdown + uk-dropdown-center)
   -------------------------------------------------------------------------- */
.uk-navbar-nav > li.uk-parent { position: relative; }
.uk-navbar-nav > li.uk-parent > .uk-dropdown { left: 50%; margin-left: -100px; }
.uk-navbar-nav > li.uk-parent:hover > .uk-dropdown,
.uk-navbar-nav > li.uk-parent:focus-within > .uk-dropdown {
  display: block;
  animation: uk-slide-bottom 0.2s ease-in-out;
}
/* ponte invisibile per non perdere l'hover nello spazio tra voce e dropdown */
.uk-navbar-nav > li.uk-parent > .uk-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px;
}

/* --------------------------------------------------------------------------
   Menu off-canvas mobile (originale: data-uk-offcanvas) → popover
   -------------------------------------------------------------------------- */
.uk-offcanvas-bar[popover] {
  position: fixed; inset: 0 auto 0 0;
  width: 280px; max-width: 100%;
  background: #0f1823;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.uk-offcanvas-bar[popover]:popover-open { transform: translateX(0); }
@starting-style { .uk-offcanvas-bar[popover]:popover-open { transform: translateX(-100%); } }
.uk-offcanvas-bar[popover]::backdrop {
  background: rgba(19, 32, 46, 0.5);
}
/* la pagina scorre a destra insieme al menu, come nell'originale */
.tm-page { transition: translate 0.3s ease-in-out; }
html:has(#offcanvas:popover-open) { overflow: hidden; }
html:has(#offcanvas:popover-open) .tm-page { translate: 280px 0; }

/* Footer sempre in fondo allo schermo quando il contenuto è più corto della finestra
   (es. Attività, scheda Inverno su schermi alti). Nell'originale restava a metà pagina
   con uno spazio vuoto sotto. */
.tm-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.tm-page > #tm-footer { margin-top: auto; }

/* --------------------------------------------------------------------------
   Modali (originale: data-uk-modal) → popover a tutto schermo
   Lo sfondo è un <button> che chiude il modale (click fuori dal dialog).
   -------------------------------------------------------------------------- */
.uk-modal[popover] {
  position: fixed; inset: 0;
  background: rgba(10, 17, 24, 0.6);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.15s linear, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.uk-modal[popover]:popover-open { display: block; opacity: 1; }
.uk-modal[popover]:popover-open .uk-modal-dialog { opacity: 1; transform: translateY(0); }
@starting-style {
  .uk-modal[popover]:popover-open { opacity: 0; }
  .uk-modal[popover]:popover-open .uk-modal-dialog { opacity: 0; transform: translateY(-100px); }
}
html:has(.uk-modal:popover-open) { overflow: hidden; }

.tm-modal-bg {
  position: fixed; inset: 0;
  border: 0; padding: 0; margin: 0;
  background: transparent; cursor: default;
}
.uk-modal .uk-modal-dialog { z-index: 1; }
button.uk-close { border: 0; }

/* --------------------------------------------------------------------------
   Lightbox con navigazione (originale: data-uk-lightbox) → :target
   Ogni immagine ha il suo overlay #id; le frecce linkano le immagini vicine.
   -------------------------------------------------------------------------- */
.tm-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 1010;
  background: rgba(10, 17, 24, 0.6);
  overflow-y: auto;
}
.tm-lightbox:target {
  display: flex; align-items: center; justify-content: center;
  animation: uk-fade 0.15s linear;
}
html:has(.tm-lightbox:target) { overflow: hidden; }
.tm-lightbox .tm-modal-bg { display: block; }
.tm-lightbox .uk-modal-dialog {
  opacity: 1; transform: none;
  width: auto; margin: 15px; max-width: none;
  top: -15px; /* come UIkit: centrato meno il padding di 15px */
  animation: tm-lightbox-in 0.3s ease-out;
}
@keyframes tm-lightbox-in { from { opacity: 0; transform: translateY(-100px); } }
.tm-lightbox .uk-lightbox-content img {
  display: block;
  width: auto; height: auto;
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 70px);
}
.tm-lightbox .uk-modal-caption {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 16px;
  color: #fff; text-align: center;
}
@media (hover: none) { .tm-lightbox .uk-slidenav { display: none; } }

/* --------------------------------------------------------------------------
   Margini tra le righe delle griglie (originale: data-uk-grid-margin)
   -------------------------------------------------------------------------- */
.tm-grid-margin { row-gap: 25px; }
@media (min-width: 1220px) { .tm-grid-margin { row-gap: 40px; } }

/* --------------------------------------------------------------------------
   Comparsa allo scroll (originale: data-uk-scrollspy uk-animation-fade)
   Progressive enhancement: dove non supportato gli elementi sono visibili.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tm-scrollspy-fade > * > .uk-panel {
      animation: uk-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    .tm-scrollspy-fade > :nth-child(3n+2) > .uk-panel { animation-range: entry 8% entry 43%; }
    .tm-scrollspy-fade > :nth-child(3n+3) > .uk-panel { animation-range: entry 16% entry 51%; }
  }
}

/* --------------------------------------------------------------------------
   Switcher e tab (originale: data-uk-switcher / data-uk-tab) → radio button
   Ogni voce di menu è <li><label><input type="radio">…</label></li>: lo stato
   attivo viene da :has(input:checked). In base.css le regole .uk-active di
   .uk-subnav-pill e .uk-tab sono state estese a :has(> label > input:checked).
   Il pannello k si mostra quando è selezionata la voce k (fino a 8 voci).
   Due livelli annidabili: .tm-sw1 (esterno) e .tm-sw2 (interno).
   -------------------------------------------------------------------------- */
.tm-sw-nav label { cursor: pointer; margin: 0; } /* bootstrap.css dà margin-bottom: 5px alle label */
.tm-sw-nav input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.tm-sw-panels > li { display: none; }
.tm-sw1:has(.tm-sw1-nav > li:nth-child(1) input:checked) .tm-sw1-panels > li:nth-child(1),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(2) input:checked) .tm-sw1-panels > li:nth-child(2),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(3) input:checked) .tm-sw1-panels > li:nth-child(3),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(4) input:checked) .tm-sw1-panels > li:nth-child(4),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(5) input:checked) .tm-sw1-panels > li:nth-child(5),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(6) input:checked) .tm-sw1-panels > li:nth-child(6),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(7) input:checked) .tm-sw1-panels > li:nth-child(7),
.tm-sw1:has(.tm-sw1-nav > li:nth-child(8) input:checked) .tm-sw1-panels > li:nth-child(8),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(1) input:checked) .tm-sw2-panels > li:nth-child(1),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(2) input:checked) .tm-sw2-panels > li:nth-child(2),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(3) input:checked) .tm-sw2-panels > li:nth-child(3),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(4) input:checked) .tm-sw2-panels > li:nth-child(4),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(5) input:checked) .tm-sw2-panels > li:nth-child(5),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(6) input:checked) .tm-sw2-panels > li:nth-child(6),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(7) input:checked) .tm-sw2-panels > li:nth-child(7),
.tm-sw2:has(.tm-sw2-nav > li:nth-child(8) input:checked) .tm-sw2-panels > li:nth-child(8) {
  display: block;
  animation: uk-fade 0.25s linear;
}

/* --------------------------------------------------------------------------
   Slider (originale: data-uk-slider, a scorrimento infinito con trascinamento)
   → contenitore con scroll orizzontale e scroll-snap: swipe da touch,
   trackpad o rotellina con Shift. Le frecce usano ::scroll-button
   (Chrome/Edge 135+) e compaiono al passaggio del mouse come nell'originale;
   negli altri browser si scorre senza frecce. Niente ciclo infinito.
   -------------------------------------------------------------------------- */
.tm-slider .uk-slider-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.tm-slider .uk-slider-container::-webkit-scrollbar { display: none; }
.tm-slider .uk-slider { display: flex; flex-wrap: nowrap; justify-content: safe center; }
.tm-slider .uk-slider > * { position: relative; flex: none; scroll-snap-align: start; }

.tm-slider .uk-slider-container::scroll-button(*) {
  position: absolute; top: 50%; z-index: 1;
  width: 50px; height: 50px; margin-top: -25px;
  border: 0; background: none;
  color: #ffffff;
  font: 50px/48px FontAwesome;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease-in-out;
}
.tm-slider .uk-slider-container::scroll-button(left) { content: "\f104" / "Precedente"; left: 25px; }
.tm-slider .uk-slider-container::scroll-button(right) { content: "\f105" / "Successivo"; right: 25px; }
.tm-slider:hover .uk-slider-container::scroll-button(*):enabled { opacity: 1; }
.tm-slider .uk-slider-container::scroll-button(*):hover,
.tm-slider .uk-slider-container::scroll-button(*):focus-visible { color: rgba(255, 255, 255, 0.7); transform: scale(0.9); }
@media (hover: none) { .tm-slider .uk-slider-container::scroll-button(*) { display: none; } }

/* --------------------------------------------------------------------------
   Slideshow (originale: data-uk-slideshow con autoplay, kenburns, frecce, dotnav)
   Senza JS:
   - autoplay: ogni slide ha la stessa animazione ciclica (durata n × 7 s)
     sfasata di 7 s; i pallini usano la stessa temporizzazione, così restano
     sincronizzati. Pausa al passaggio del mouse, come l'originale.
   - Ken Burns: zoom 1 → 1.2 in 15 s, con l'origine che cambia per ogni slide.
   - frecce e pallini sono <label> di radio nascosti (.tm-ss-r, figli diretti
     di .tm-ss): al primo click l'autoplay si ferma e resta la foto scelta.
   Varianti per numero di slide: .tm-ss-n3, .tm-ss-n6.
   -------------------------------------------------------------------------- */
.tm-ss { position: relative; }
.tm-ss-r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tm-ss .uk-slideshow { aspect-ratio: 16 / 9; }
.tm-ss .uk-slideshow > li { height: 100%; visibility: hidden; }
.tm-ss .uk-slideshow > li > img {
  visibility: inherit;
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.tm-ss label.uk-slidenav, .tm-ss .uk-dotnav label { margin-bottom: 0; cursor: pointer; } /* bootstrap: label margin-bottom 5px */
.tm-ss .uk-dotnav { --tm-dot: rgba(19, 32, 46, 0.25); --tm-dot-on: #13202e; }
.tm-ss .uk-dotnav-contrast { --tm-dot: rgba(255, 255, 255, 0.5); --tm-dot-on: #ffffff; }
@media (hover: none) { .tm-ss .uk-slidenav { display: none !important; } }

.tm-ss:hover :is(.uk-slideshow > li, .uk-slideshow > li > img, .uk-dotnav label) { animation-play-state: paused; }

@keyframes tm-kenburns-once { from { transform: scale(1); } to { transform: scale(1.2); } }

/* 3 slide: ciclo di 21 s */
@keyframes tm-ss3-slide {
  0% { opacity: 0; visibility: hidden; } /* hidden anche durante il delay: frecce delle slide nascoste non cliccabili */
  2.381%, 33.333% { opacity: 1; visibility: visible; }
  35.714% { opacity: 0; visibility: visible; }
  35.762%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes tm-ss3-kenburns {
  0% { transform: scale(1); animation-timing-function: ease-in; }
  71.429%, 100% { transform: scale(1.2); }
}
@keyframes tm-ss3-dot {
  0%, 35.714%, 100% { background: var(--tm-dot); transform: scale(0.8); }
  2.381%, 33.333% { background: var(--tm-dot-on); transform: scale(1); }
}
.tm-ss-n3 .uk-slideshow > li { animation: tm-ss3-slide 21s linear infinite both; }
.tm-ss-n3 .uk-slideshow > li > img { animation: tm-ss3-kenburns 21s linear infinite both; }
.tm-ss-n3 .uk-dotnav label { animation: tm-ss3-dot 21s linear infinite both; }
.tm-ss-n3 .uk-slideshow > li:nth-child(1), .tm-ss-n3 .uk-slideshow > li:nth-child(1) > img, .tm-ss-n3 .uk-dotnav > li:nth-child(1) > label { animation-delay: -0.5s; }
.tm-ss-n3 .uk-slideshow > li:nth-child(2), .tm-ss-n3 .uk-slideshow > li:nth-child(2) > img, .tm-ss-n3 .uk-dotnav > li:nth-child(2) > label { animation-delay: 6.5s; }
.tm-ss-n3 .uk-slideshow > li:nth-child(3), .tm-ss-n3 .uk-slideshow > li:nth-child(3) > img, .tm-ss-n3 .uk-dotnav > li:nth-child(3) > label { animation-delay: 13.5s; }
/* 6 slide: ciclo di 42 s */
@keyframes tm-ss6-slide {
  0% { opacity: 0; visibility: hidden; } /* hidden anche durante il delay: frecce delle slide nascoste non cliccabili */
  1.190%, 16.667% { opacity: 1; visibility: visible; }
  17.857% { opacity: 0; visibility: visible; }
  17.881%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes tm-ss6-kenburns {
  0% { transform: scale(1); animation-timing-function: ease-in; }
  35.714%, 100% { transform: scale(1.2); }
}
@keyframes tm-ss6-dot {
  0%, 17.857%, 100% { background: var(--tm-dot); transform: scale(0.8); }
  1.190%, 16.667% { background: var(--tm-dot-on); transform: scale(1); }
}
.tm-ss-n6 .uk-slideshow > li { animation: tm-ss6-slide 42s linear infinite both; }
.tm-ss-n6 .uk-slideshow > li > img { animation: tm-ss6-kenburns 42s linear infinite both; }
.tm-ss-n6 .uk-dotnav label { animation: tm-ss6-dot 42s linear infinite both; }
.tm-ss-n6 .uk-slideshow > li:nth-child(1), .tm-ss-n6 .uk-slideshow > li:nth-child(1) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(1) > label { animation-delay: -0.5s; }
.tm-ss-n6 .uk-slideshow > li:nth-child(2), .tm-ss-n6 .uk-slideshow > li:nth-child(2) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(2) > label { animation-delay: 6.5s; }
.tm-ss-n6 .uk-slideshow > li:nth-child(3), .tm-ss-n6 .uk-slideshow > li:nth-child(3) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(3) > label { animation-delay: 13.5s; }
.tm-ss-n6 .uk-slideshow > li:nth-child(4), .tm-ss-n6 .uk-slideshow > li:nth-child(4) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(4) > label { animation-delay: 20.5s; }
.tm-ss-n6 .uk-slideshow > li:nth-child(5), .tm-ss-n6 .uk-slideshow > li:nth-child(5) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(5) > label { animation-delay: 27.5s; }
.tm-ss-n6 .uk-slideshow > li:nth-child(6), .tm-ss-n6 .uk-slideshow > li:nth-child(6) > img, .tm-ss-n6 .uk-dotnav > li:nth-child(6) > label { animation-delay: 34.5s; }
.tm-ss .uk-slideshow > li:nth-child(1) > img { transform-origin: 0 50%; }
.tm-ss .uk-slideshow > li:nth-child(2) > img { transform-origin: 100% 0; }
.tm-ss .uk-slideshow > li:nth-child(3) > img { transform-origin: 0 100%; }
.tm-ss .uk-slideshow > li:nth-child(4) > img { transform-origin: 50% 0; }
.tm-ss .uk-slideshow > li:nth-child(5) > img { transform-origin: 50% 50%; }
.tm-ss .uk-slideshow > li:nth-child(6) > img { transform-origin: 100% 100%; }

/* modalità manuale (dopo un click su freccia o pallino) */
.tm-ss:has(> .tm-ss-r:checked) :is(.uk-slideshow > li, .uk-slideshow > li > img, .uk-dotnav label) { animation: none; }
.tm-ss:has(> .tm-ss-r:checked) .uk-slideshow > li { opacity: 0; visibility: hidden; }
.tm-ss:has(> .tm-ss-r:checked) .uk-dotnav label { background: var(--tm-dot); transform: scale(0.8); }
.tm-ss:has(> .tm-ss-r:nth-of-type(1):checked) .uk-slideshow > li:nth-child(1),
.tm-ss:has(> .tm-ss-r:nth-of-type(2):checked) .uk-slideshow > li:nth-child(2),
.tm-ss:has(> .tm-ss-r:nth-of-type(3):checked) .uk-slideshow > li:nth-child(3),
.tm-ss:has(> .tm-ss-r:nth-of-type(4):checked) .uk-slideshow > li:nth-child(4),
.tm-ss:has(> .tm-ss-r:nth-of-type(5):checked) .uk-slideshow > li:nth-child(5),
.tm-ss:has(> .tm-ss-r:nth-of-type(6):checked) .uk-slideshow > li:nth-child(6) {
  opacity: 1; visibility: visible; z-index: 10;
  animation: uk-fade 0.5s linear;
}
.tm-ss:has(> .tm-ss-r:nth-of-type(1):checked) .uk-slideshow > li:nth-child(1) > img,
.tm-ss:has(> .tm-ss-r:nth-of-type(2):checked) .uk-slideshow > li:nth-child(2) > img,
.tm-ss:has(> .tm-ss-r:nth-of-type(3):checked) .uk-slideshow > li:nth-child(3) > img,
.tm-ss:has(> .tm-ss-r:nth-of-type(4):checked) .uk-slideshow > li:nth-child(4) > img,
.tm-ss:has(> .tm-ss-r:nth-of-type(5):checked) .uk-slideshow > li:nth-child(5) > img,
.tm-ss:has(> .tm-ss-r:nth-of-type(6):checked) .uk-slideshow > li:nth-child(6) > img {
  animation: tm-kenburns-once 15s ease-in forwards;
}
.tm-ss:has(> .tm-ss-r:nth-of-type(1):checked) .uk-dotnav > li:nth-child(1) > label,
.tm-ss:has(> .tm-ss-r:nth-of-type(2):checked) .uk-dotnav > li:nth-child(2) > label,
.tm-ss:has(> .tm-ss-r:nth-of-type(3):checked) .uk-dotnav > li:nth-child(3) > label,
.tm-ss:has(> .tm-ss-r:nth-of-type(4):checked) .uk-dotnav > li:nth-child(4) > label,
.tm-ss:has(> .tm-ss-r:nth-of-type(5):checked) .uk-dotnav > li:nth-child(5) > label,
.tm-ss:has(> .tm-ss-r:nth-of-type(6):checked) .uk-dotnav > li:nth-child(6) > label {
  background: var(--tm-dot-on); transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .tm-ss .uk-slideshow > li > img { animation: none !important; }
}

/* Quirk di UIkit (data-uk-grid-margin) nelle card di Dormire: sotto i 768 px
   anche la PRIMA colonna riceveva uk-grid-margin (margin-top 25 px). */
@media (max-width: 767px) {
  .tm-grid-margin-quirk > :first-child { margin-top: 25px; }
}

/* Fix (approvato dall'utente) del bug dell'originale nella tabella tariffe di
   Dormire: su mobile la tabella, centrata con uk-flex-center, usciva a sinistra
   (prima colonna tagliata) e faceva scorrere tutta la pagina in orizzontale.
   Con "safe center" la tabella resta centrata quando ci sta, altrimenti parte
   da sinistra e scorre dentro il suo riquadro. */
.uk-overflow-container.uk-flex-center { justify-content: safe center; }
/* Stesso bug: la frase "Il prezzo è solo indicativo…" è un elemento flex senza
   larghezza e non andava a capo, allargando la pagina. Su desktop non cambia nulla. */
#tm-bottom-c .uk-grid > h3 { max-width: 100%; }

/* --------------------------------------------------------------------------
   Parallasse dello sfondo (originale: data-uk-parallax="{bg: -200}")
   L'immagine (variabile --tm-bg) sta in un ::before che riproduce il
   dimensionamento di UIkit: cover su (larghezza + 2×200) × (altezza + 200),
   allineata in alto, che scorre di -200 px mentre il blocco attraversa il viewport.
   Progressive enhancement: senza animation-timeline lo sfondo resta fermo.
   -------------------------------------------------------------------------- */
/* overflow: clip (non hidden) per non creare un contenitore di scroll: la view
   timeline deve seguire lo scroll della pagina */
.tm-parallax-bg.tm-parallax-bg { position: relative; overflow: clip; isolation: isolate; view-timeline: --tm-parallax block; }
.tm-parallax-bg::before {
  content: ""; position: absolute; z-index: -1;
  left: -200px; right: -200px; top: 0; bottom: -200px;
  background: var(--tm-bg) 50% 0 / cover no-repeat;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tm-parallax-bg::before {
      animation: tm-parallax-200 linear both;
      animation-timeline: --tm-parallax;
      animation-range: cover 232px cover calc(100% + 82px); /* corsa di 1350 px come UIkit (misurata sull'originale) */
    }
  }
}
@keyframes tm-parallax-200 { from { transform: translateY(0); } to { transform: translateY(-200px); } }

/* Margine tra le righe di un flex che va a capo (originale: data-uk-margin) */
.tm-flex-margin { row-gap: 25px; }

/* --------------------------------------------------------------------------
   Contatti: mappe statiche (al posto degli iframe Google) e link meteo/webcam
   -------------------------------------------------------------------------- */
.tm-mappa { display: block; position: relative; overflow: hidden; border-radius: 3px; }
.tm-mappa img { display: block; width: 100%; height: auto; transition: transform 0.3s ease-out; }
.tm-mappa:hover img, .tm-mappa:focus-visible img { transform: scale(1.02); }
.tm-mappa-dove img { height: 480px; object-fit: cover; object-position: 58% 50%; } /* su schermi stretti resta inquadrato il rifugio con la sua etichetta */
.tm-mappa-azioni .uk-button, .tm-link-meteo .uk-button { height: auto; min-height: 40px; line-height: 1.3; padding-top: 10px; padding-bottom: 8px; }
.tm-mappa-azioni { margin-top: 20px; }
.tm-link-meteo { gap: 15px; flex-wrap: wrap; }
.tm-link-meteo .uk-button { min-width: min(260px, 100%); }
/* Telefono ed email cliccabili, con lo stesso aspetto del testo nero originale */
.tm-link-nero, .tm-link-nero:hover, .tm-link-nero:focus { color: #000; text-decoration: none; }

/* Fix (approvato dall'utente) del bug dell'originale: sotto i 768 px i titoli
   con icona erano su una riga sola con "…" ("Dove sia…", "Come ra…"). */
@media (max-width: 767px) {
  .tm-panel-icon.uk-text-center > :is(h1, h2, h3) { white-space: normal; overflow: visible; text-overflow: clip; hyphens: auto; overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   HOME
   -------------------------------------------------------------------------- */

/* Slideshow a tutto schermo: variante .tm-ss-n5 (5 slide, fade 0,4 s, ciclo 35 s).
   pauseOnHover: false nell'originale → .tm-ss-nopause */
@keyframes tm-ss5-slide {
  0% { opacity: 0; visibility: hidden; }
  1.143%, 20.000% { opacity: 1; visibility: visible; }
  21.143% { opacity: 0; visibility: visible; }
  21.171%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes tm-ss5-kenburns {
  0% { transform: scale(1); animation-timing-function: ease-in; }
  42.857%, 100% { transform: scale(1.2); }
}
@keyframes tm-ss5-dot {
  0%, 21.143%, 100% { background: var(--tm-dot); transform: scale(0.8); }
  1.143%, 20.000% { background: var(--tm-dot-on); transform: scale(1); }
}
.tm-ss-n5 .uk-slideshow > li { animation: tm-ss5-slide 35s linear infinite both; }
.tm-ss-n5 .uk-slideshow > li > img { animation: tm-ss5-kenburns 35s linear infinite both; }
.tm-ss-n5 .uk-dotnav label { animation: tm-ss5-dot 35s linear infinite both; }
.tm-ss-n5 .uk-slideshow > li:nth-child(1), .tm-ss-n5 .uk-slideshow > li:nth-child(1) > img, .tm-ss-n5 .uk-dotnav > li:nth-child(1) > label { animation-delay: -0.4s; }
.tm-ss-n5 .uk-slideshow > li:nth-child(2), .tm-ss-n5 .uk-slideshow > li:nth-child(2) > img, .tm-ss-n5 .uk-dotnav > li:nth-child(2) > label { animation-delay: 6.6s; }
.tm-ss-n5 .uk-slideshow > li:nth-child(3), .tm-ss-n5 .uk-slideshow > li:nth-child(3) > img, .tm-ss-n5 .uk-dotnav > li:nth-child(3) > label { animation-delay: 13.6s; }
.tm-ss-n5 .uk-slideshow > li:nth-child(4), .tm-ss-n5 .uk-slideshow > li:nth-child(4) > img, .tm-ss-n5 .uk-dotnav > li:nth-child(4) > label { animation-delay: 20.6s; }
.tm-ss-n5 .uk-slideshow > li:nth-child(5), .tm-ss-n5 .uk-slideshow > li:nth-child(5) > img, .tm-ss-n5 .uk-dotnav > li:nth-child(5) > label { animation-delay: 27.6s; }
.tm-ss-nopause:hover :is(.uk-slideshow > li, .uk-slideshow > li > img, .uk-dotnav label) { animation-play-state: running; }

/* Slideshow a tutto schermo: altezza 100vh (classe uk-slideshow-fullscreen),
   immagini a opacità 0.9 come .tm-slideshow-fullscreen .uk-cover-background */
.tm-ss .uk-slideshow.uk-slideshow-fullscreen { aspect-ratio: auto; }
.tm-slideshow-fullscreen .tm-ss .uk-slideshow > li > img { opacity: 0.9; }
/* Nell'originale il JS sticky avvolgeva la navbar in .uk-sticky-placeholder, quindi
   la regola del tema ".tm-navbar + .tm-block-fullheight" (altezza 100vh - 300px)
   non scattava mai. Qui la navbar è sorella diretta: la neutralizziamo. */
@media (min-width: 768px) {
  .tm-navbar + .tm-block-fullheight > .uk-container,
  .tm-navbar + .tm-block-fullheight > .uk-container .uk-slideshow-fullscreen,
  .tm-navbar + .tm-block-fullheight > .uk-container .uk-slideshow-fullscreen > li { height: 100vh; }
}

/* Comparsa dal basso allo scroll (originale: scrollspy uk-animation-slide-bottom) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tm-scrollspy-slide > * > .uk-panel {
      animation: uk-fade-bottom linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    .tm-scrollspy-slide > :nth-child(3n+2) > .uk-panel { animation-range: entry 8% entry 43%; }
    .tm-scrollspy-slide > :nth-child(3n+3) > .uk-panel { animation-range: entry 16% entry 51%; }
  }
}

/* Griglia "Le attività" filtrabile (originale: data-uk-grid con gutter '40 80' e
   filtro Estate/Inverno, posizionamento a colonne indipendenti calcolato via JS).
   Qui: due colonne statiche (gli elementi sono distribuiti come li disponeva UIkit),
   filtro con radio. Spaziatura: 80 px orizzontale, 40 px verticale. Sotto i 768 px
   una colonna sola: le colonne diventano display: contents e "order" ripristina
   l'ordine originale. */
.tm-filtro-griglia { display: flex; margin-left: -80px; }
.tm-filtro-griglia > .tm-filtro-col { flex: none; width: 50%; }
.tm-filtro-griglia .tm-filtro-item { box-sizing: border-box; padding-left: 80px; padding-bottom: 40px; }
@media (max-width: 767px) {
  .tm-filtro-griglia { flex-direction: column; }
  .tm-filtro-griglia > .tm-filtro-col { display: contents; }
}
.tm-filtro:has(.tm-sw-nav input[value="estate"]:checked) .tm-filtro-item:not([data-filtro="estate"]),
.tm-filtro:has(.tm-sw-nav input[value="inverno"]:checked) .tm-filtro-item:not([data-filtro="inverno"]) { display: none; }
.tm-filtro .tm-filtro-item { animation: uk-fade 0.3s linear; }
/* Allineamento all'originale: la griglia aveva margin-top 40 px e la sua altezza
   non includeva il padding inferiore dell'ultima riga; le voci del filtro erano alte
   27 px per via del trucco "1Estate" con la prima lettera nascosta. */
.tm-filtro-griglia { margin-top: 40px; margin-bottom: -40px; }
.tm-filtro .uk-subnav label { padding-bottom: 3px; }