/* ============================================================
   ARCHITETTURA STRUTTURALE — Detail layer  (rev. 3)
   YOOtheme Pro 5 · Style Yard · UIkit 3
   Da incollare in: YOOtheme > Settings > Custom Code > CSS

   Regole di questo file
   - Solo dettaglio: niente layout, griglie, tipografia o colori
     di sezione. Quelli restano nel builder e nello Style.
   - Nessuna classe custom: si aggancia solo alle classi UIkit /
     YOOtheme, così i layout JSON restano 100% nativi.
   - Non sovrascrive ciò che il builder anima (parallax,
     slideshow, scrollspy): niente animation sugli stessi nodi.
   - Linguaggio Yard: spigoli vivi, niente ombre sui contenuti,
     linee da 1px, verde solo come keyline o dettaglio.
   - Movimento: rispondi alle azioni (hover, focus, apertura);
     le animazioni legate allo scroll sono progressive
     enhancement e si spengono con prefers-reduced-motion.

   Indice
   0.  Token
   1.  Base e accessibilità
   2.  Sfondi di sezione
   3.  Barra di navigazione flottante  (con interruttore)
   4.  Header: voci, dropdown, offcanvas
   5.  Bottoni
   6.  Occhielli e titoli
   7.  Hero slideshow
   8.  Immagini, card, didascalie
   9.  Card (card-default, stile "Apple")
   10. Liste, hr, footer, newsletter
   11. Filtri e paginazione
   12. Animazioni legate allo scroll
   13. Movimento ridotto
   ============================================================ */


/* ============================================================
   0. TOKEN
   Allinea i tre colori allo Style. Se sposti il file in
   Style > Custom Less puoi agganciarli alle variabili del tema,
   es. --as-primary: @global-primary-background;
   (verifica che la tua versione di Less le interpoli).
   ============================================================ */

:root {
  --as-primary: #9dc41c;
  --as-ink: #1c1d1a;
  --as-paper: #ffffff;
  --as-muted: #f5f5f3;        /* allinea al fondo "muted" dello Style */

  --as-line: color-mix(in oklab, var(--as-ink) 12%, transparent);
  --as-line-strong: color-mix(in oklab, var(--as-ink) 22%, transparent);
  --as-line-light: rgba(255, 255, 255, 0.14);

  --as-glass-dark: color-mix(in oklab, var(--as-ink) 76%, transparent);
  --as-glass-light: rgba(255, 255, 255, 0.78);
  --as-blur: saturate(150%) blur(18px);
  --as-shadow-glass: 0 10px 36px -12px rgba(0, 0, 0, 0.45);

  --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  --as-ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --as-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* Card: unica eccezione agli spigoli vivi. Metti 0 per
     tornare al rigore Yard mantenendo profondità e movimento. */
  --as-card-radius: 16px;
  --as-card-shadow: 0 1px 2px rgba(20, 22, 18, 0.04),
                    0 6px 16px -8px rgba(20, 22, 18, 0.10);
  --as-card-shadow-hover: 0 2px 6px rgba(20, 22, 18, 0.05),
                          0 28px 56px -20px rgba(20, 22, 18, 0.28);
  --as-fast: 160ms;
  --as-mid: 320ms;
  --as-slow: 520ms;
}


/* ============================================================
   1. BASE E ACCESSIBILITÀ
   ============================================================ */

::selection {
  background: color-mix(in oklab, var(--as-primary) 85%, white);
  color: var(--as-ink);
}

/* Focus a doppio anello: il nero garantisce il contrasto sul
   chiaro (il verde da solo arriva a ~2:1), il verde è la firma.
   Sul fondo scuro basta il verde. */
:focus-visible {
  outline: 2px solid var(--as-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--as-primary);
}

.uk-section-secondary :focus-visible,
.uk-tile-secondary :focus-visible,
.uk-light :focus-visible,
.uk-offcanvas-bar :focus-visible,
.uk-navbar-dropdown :focus-visible {
  outline-color: var(--as-primary);
  box-shadow: none;
}

@supports (scrollbar-width: thin) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--as-line-strong) transparent;
  }
}


/* ============================================================
   2. SFONDI DI SEZIONE
   Ogni ruolo ha una sola texture, così l'alternanza impostata
   nel builder si legge:
   - default   → pulito
   - muted     → reticolo da carta tecnica
   - secondary → grana + alone verde
   - primary   → grana
   Niente "isolation": gli elementi che sconfinano (parallax,
   filigrane) restano visibili sopra la sezione successiva.
   ============================================================ */

.uk-section-muted,
.uk-section-secondary,
.uk-section-primary {
  position: relative;
}

.uk-section-muted > *,
.uk-section-secondary > *,
.uk-section-primary > * {
  position: relative;
  z-index: 1;
}

/* Reticolo: 1px ogni 88px, sfumato verso il basso */
.uk-section-muted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--as-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--as-line) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

/* Due sezioni muted consecutive: il reticolo non riparte a metà */
.uk-section-muted + .uk-section-muted::before {
  display: none;
}

/* Grana sulle sezioni piene */
.uk-section-secondary::before,
.uk-section-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--as-grain);
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Alone verde solo sullo scuro, dove il verde ha contrasto */
.uk-section-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 70% at 10% 100%,
      color-mix(in oklab, var(--as-primary) 14%, transparent), transparent 68%),
    radial-gradient(45% 60% at 95% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}


/* ============================================================
   3. BARRA DI NAVIGAZIONE FLOTTANTE
   Pillola flottante con due stati:
   - in cima alle pagine con header trasparente: vetro scuro,
     logo inverso e voci chiare (logo e colori gestiti da YOOtheme);
   - quando l'header diventa sticky, e sulle pagine senza header
     trasparente: vetro chiaro, logo normale e voci scure.
   Nel builder, sulle sezioni scure o fotografiche con header
   trasparente, il colore del testo dell'header va su "Chiaro".

   INTERRUTTORE: per spegnere tutta la sezione sostituisci
   "@media all" con "@media not all" nella riga qui sotto.
   Le regole restano nel file ma il browser le ignora.

   Raggio: 999px = pillola. Metti var(--as-card-radius) per
   gli stessi angoli delle card.
   ============================================================ */

@media all {

  :root {
    --as-nav-radius: 999px;
    --as-nav-gap: 1rem;
    --as-nav-height: 56px;
    --as-nav-glass: rgba(255, 255, 255, 0.82);
    --as-nav-glass-dark: color-mix(in oklab, var(--as-ink) 62%, transparent);
    --as-nav-shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                          0 14px 34px -14px rgba(0, 0, 0, 0.55);
    --as-nav-link: color-mix(in oklab, var(--as-ink) 68%, transparent);
    --as-nav-shadow: 0 1px 2px rgba(20, 22, 18, 0.05),
                     0 14px 34px -14px rgba(20, 22, 18, 0.28);
  }

  /* --- Forma comune ai due stati --- */
  .tm-header .uk-navbar-container,
  .tm-header-mobile .uk-navbar-container {
    margin: var(--as-nav-gap) auto 0;
    padding: 0 1.1rem 0 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--as-nav-radius);
    transition: background-color 400ms var(--as-ease),
                border-color 400ms var(--as-ease),
                box-shadow 400ms var(--as-ease);
  }

  .tm-header .uk-navbar-container {
    width: max-content;
    max-width: calc(100% - 2 * var(--as-nav-gap));
  }

  .tm-header-mobile .uk-navbar-container {
    width: calc(100% - 2 * var(--as-nav-gap));
    padding: 0 0.6rem;
  }

  .tm-header .uk-navbar-container > .uk-container,
  .tm-header-mobile .uk-navbar-container > .uk-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .tm-header .uk-navbar {
    column-gap: 2.5rem;
  }

  .tm-header :is(.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle),
  .tm-header-mobile :is(.uk-navbar-item, .uk-navbar-toggle) {
    min-height: var(--as-nav-height);
  }

  /* --- Stato 1: in cima alla pagina, vetro scuro --- */
  .tm-header .uk-navbar-container.uk-navbar-transparent,
  .tm-header-mobile .uk-navbar-container.uk-navbar-transparent {
    border-color: var(--as-line-light);
    background-color: var(--as-nav-glass-dark) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--as-blur);
    backdrop-filter: var(--as-blur);
    box-shadow: var(--as-nav-shadow-dark);
  }

  /* Voci chiare piene: le inattive dello Style sono troppo tenui */
  .tm-header .uk-navbar-transparent.uk-light .uk-navbar-nav > li > a,
  .tm-header .uk-light .uk-navbar-transparent .uk-navbar-nav > li > a,
  .tm-header .uk-navbar-transparent .uk-light > .uk-navbar-nav > li > a,
  .tm-header .uk-navbar-transparent .uk-navbar-nav > li > a.uk-light {
    color: rgba(255, 255, 255, 0.88);
  }

  .tm-header .uk-navbar-transparent.uk-light .uk-navbar-nav > li:is(:hover, .uk-active) > a,
  .tm-header .uk-light .uk-navbar-transparent .uk-navbar-nav > li:is(:hover, .uk-active) > a,
  .tm-header .uk-navbar-transparent .uk-light > .uk-navbar-nav > li:is(:hover, .uk-active) > a,
  .tm-header .uk-navbar-transparent .uk-navbar-nav > li:is(:hover, .uk-active) > a.uk-light {
    color: #fff;
  }

  /* --- Stato 2: barra in vetro chiaro --- */
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent),
  .tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) {
    border-color: var(--as-line);
    background-color: var(--as-nav-glass) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--as-blur);
    backdrop-filter: var(--as-blur);
    box-shadow: var(--as-nav-shadow);
  }

  /* Voci scure sulla barra chiara, anche se UIkit applica il
     testo chiaro per il contenuto che scorre sotto */
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a {
    color: var(--as-nav-link) !important;
  }

  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li:hover > a,
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a:focus-visible,
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a[aria-expanded="true"],
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a,
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) :is(.uk-navbar-item, .uk-navbar-toggle, .uk-logo),
  .tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) :is(.uk-navbar-item, .uk-navbar-toggle, .uk-logo) {
    color: var(--as-ink) !important;
  }

  /* Logo normale sulla barra chiara, anche se UIkit vorrebbe
     mostrare quello inverso */
  :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) .uk-logo-inverse,
  :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) picture:has(.uk-logo-inverse) {
    display: none !important;
  }

  :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) .uk-logo > :not(.uk-logo-inverse):not(picture:has(.uk-logo-inverse)) {
    display: inline-block !important;
  }

  /* Focus: sulla barra chiara serve l'anello scuro */
  .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a:focus-visible,
  :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) :is(.uk-logo, .uk-navbar-item, .uk-navbar-toggle):focus-visible {
    outline-color: var(--as-ink);
    box-shadow: 0 0 0 5px var(--as-primary);
  }

  /* Browser senza sfocatura o utenti che chiedono meno trasparenza */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) {
      background-color: var(--as-paper) !important;
    }
    :is(.tm-header, .tm-header-mobile) .uk-navbar-container.uk-navbar-transparent {
      background-color: var(--as-ink) !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :is(.tm-header, .tm-header-mobile) .uk-navbar-container:not(.uk-navbar-transparent) {
      background-color: var(--as-paper) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    :is(.tm-header, .tm-header-mobile) .uk-navbar-container.uk-navbar-transparent {
      background-color: var(--as-ink) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

}  /* fine interruttore sezione 3 */


/* ============================================================
   4. HEADER: VOCI, DROPDOWN, OFFCANVAS
   Linea verde sotto le voci, menu a tendina in vetro scuro,
   offcanvas mobile. Indipendente dalla barra flottante.
   ============================================================ */

/* Voci di menu: keyline da 2px che si disegna da sinistra.
   Posizionata rispetto al testo, non all'altezza della navbar,
   così non si rompe se cambi l'altezza nello Style. */
.uk-navbar-nav > li > a {
  position: relative;
}

.uk-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 0.85em);
  height: 2px;
  background: var(--as-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--as-mid) var(--as-ease);
}

.uk-navbar-nav > li > a:hover::after,
.uk-navbar-nav > li.uk-active > a::after,
.uk-navbar-nav > li.uk-open > a::after {
  transform: scaleX(1);
}

/* Dropdown in vetro scuro, spigoli vivi */
.uk-navbar-dropdown {
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in oklab, var(--as-ink) 92%, transparent);
  -webkit-backdrop-filter: var(--as-blur);
  backdrop-filter: var(--as-blur);
  box-shadow: var(--as-shadow-glass);
  color: rgba(255, 255, 255, 0.72);
}

.uk-navbar-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--as-primary);
}

.uk-navbar-dropdown-nav > li > a {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--as-fast) var(--as-ease),
              transform 260ms var(--as-ease);
}

/* Trattino che compare a sinistra: la voce si sposta con
   transform, senza ricalcolare il layout */
.uk-navbar-dropdown-nav > li > a::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 10px;
  height: 1px;
  margin-right: 6px;
  background: var(--as-primary);
  opacity: 0;
  transition: opacity var(--as-fast) var(--as-ease);
}

.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus-visible {
  color: #fff;
  transform: translateX(16px);
}

.uk-navbar-dropdown-nav > li.uk-active > a {
  color: #fff;
}

.uk-navbar-dropdown-nav > li > a:hover::before,
.uk-navbar-dropdown-nav > li > a:focus-visible::before {
  opacity: 1;
}

/* Intestazioni di gruppo: filo superiore, niente maiuscolo */
.uk-navbar-dropdown-nav .uk-nav-header {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
  margin-top: 8px;
  color: var(--as-primary);
}

.uk-navbar-dropdown-nav .uk-nav-header:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Offcanvas mobile */
.uk-offcanvas-bar {
  background: var(--as-glass-dark);
  -webkit-backdrop-filter: var(--as-blur);
  backdrop-filter: var(--as-blur);
  box-shadow: -1px 0 0 var(--as-line-light);
}

.uk-offcanvas-bar .uk-nav > li > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}


/* ============================================================
   5. BOTTONI
   Un solo gesto: il pannello d'inchiostro sale dal basso con
   taglio diagonale. Niente ombre, niente spostamenti, niente
   letter-spacing animato (fa saltare gli elementi vicini).

   ATTENZIONE: se il tuo Style Yard ha già attivo il suo
   riempimento al passaggio del mouse, i due effetti si
   sovrappongono. In quel caso elimina da qui fino a
   "Bottone testuale" e tieni quello nativo.
   ============================================================ */

.uk-button {
  border-radius: 0;
  transition: background-color 220ms var(--as-ease),
              color 220ms var(--as-ease),
              border-color 220ms var(--as-ease);
}

.uk-button-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.uk-button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--as-ink);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path var(--as-slow) var(--as-ease);
}

.uk-button-primary:hover,
.uk-button-primary:focus-visible {
  color: #fff;
  background-color: var(--as-primary);
}

.uk-button-primary:hover::before,
.uk-button-primary:focus-visible::before {
  clip-path: polygon(0 0, 100% -6%, 100% 100%, 0 100%);
}

/* Su fondo scuro il pannello diventa chiaro, altrimenti
   l'inchiostro si confonde con la sezione */
.uk-section-secondary .uk-button-primary::before,
.uk-tile-secondary .uk-button-primary::before {
  background: var(--as-paper);
}

.uk-section-secondary .uk-button-primary:hover,
.uk-section-secondary .uk-button-primary:focus-visible,
.uk-tile-secondary .uk-button-primary:hover,
.uk-tile-secondary .uk-button-primary:focus-visible {
  color: var(--as-ink);
}

/* Bottone testuale: la linea si colora, la freccia avanza */
.uk-button-text::before {
  background: var(--as-line-strong);
  transition: right var(--as-mid) var(--as-ease),
              background-color var(--as-mid) var(--as-ease);
}

.uk-button-text:hover::before {
  background: var(--as-primary);
}

.uk-button-text::after {
  transition: transform var(--as-mid) var(--as-ease);
}

.uk-button-text:hover::after {
  transform: translateX(6px);
}

.uk-light .uk-button-text::before,
.uk-section-secondary .uk-button-text::before,
.el-overlay .uk-button-text::before {
  background: var(--as-line-light);
}


/* ============================================================
   6. OCCHIELLI E TITOLI
   ============================================================ */

/* Occhiello (h6 + primary): trattino tecnico davanti.
   Sul fondo chiaro il testo passa al nero e il verde resta sul
   trattino: il verde su bianco non regge come testo (~2:1).
   Se preferisci il testo verde anche sul chiaro, elimina il
   secondo blocco. */
.uk-h6.uk-text-primary {
  display: flex;
  align-items: center;
  gap: 14px;
}

.uk-h6.uk-text-primary::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--as-primary);
  transform-origin: left center;
}

/* !important necessario: in UIkit .uk-text-primary è già !important */
.uk-section-default .uk-h6.uk-text-primary,
.uk-section-muted .uk-h6.uk-text-primary {
  color: var(--as-ink) !important;
}

.uk-section-default .uk-tile-secondary .uk-h6.uk-text-primary,
.uk-section-muted .uk-tile-secondary .uk-h6.uk-text-primary {
  color: var(--as-primary) !important;
}

/* Il builder imposta l'allineamento sul contenitore: se
   l'occhiello è centrato, centra anche il trattino */
.uk-text-center > .uk-h6.uk-text-primary,
.uk-text-center.uk-h6.uk-text-primary {
  justify-content: center;
}

/* Numeri negli occhielli e nelle didascalie: cifre tabellari */
.uk-h6.uk-text-primary,
.el-title .uk-text-primary,
.el-content .uk-text-primary {
  font-variant-numeric: tabular-nums;
}

/* Titoli linkati: sottolineatura che si apre */
.el-title a {
  text-decoration: none;
  background-image: linear-gradient(var(--as-primary), var(--as-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 380ms var(--as-ease);
}

.el-title a:hover,
.el-title a:focus-visible {
  background-size: 100% 2px;
}


/* ============================================================
   7. HERO SLIDESHOW
   Nessuna animazione su overlay, titolo e immagine: li gestisce
   il builder (parallax del pannello, Ken Burns nativo nelle
   opzioni dello slideshow). Qui solo leggibilità e controlli.
   ============================================================ */

/* Velatura in basso per il contrasto del testo */
.uk-slideshow-items > .el-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(16, 18, 14, 0.55) 0%,
              rgba(16, 18, 14, 0.18) 45%,
              rgba(16, 18, 14, 0) 100%);
}

/* Grana leggera sulla foto */
.uk-slideshow-items > .el-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--as-grain);
  background-size: 160px 160px;
  opacity: 0.045;
}

.uk-slideshow-items > .el-item > .uk-position-cover {
  z-index: 2;
}

/* Pannello del titolo in vetro scuro: unico punto del sito in
   cui il vetro sta sopra una foto a tutta pagina */
.uk-slideshow-items .el-overlay.uk-tile-secondary,
.uk-slideshow-items .el-overlay.uk-overlay {
  background: var(--as-glass-dark);
  -webkit-backdrop-filter: var(--as-blur);
  backdrop-filter: var(--as-blur);
  border-top: 1px solid var(--as-line-light);
  border-left: 1px solid var(--as-line-light);
  box-shadow: var(--as-shadow-glass);
}

/* Meta sopra il titolo: trattino verde, niente maiuscolo */
.uk-slideshow-items .el-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.uk-slideshow-items .el-meta::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  background: var(--as-primary);
}

/* Slidenav (frecce di slideshow e slider): quadrati con angoli
   arrotondati in vetro scuro, bordo chiaro ben visibile.
   Vale per tutti gli slider del sito.
   Le frecce sono le icone SVG di UIkit: qui si rimpiccioliscono e
   si ispessiscono, così restano nitide. */
:root {
  --as-slidenav-size: 46px;
  --as-slidenav-radius: 10px;
  --as-slidenav-margin: clamp(14px, 2.5vw, 32px);
}

/* Il contenitore di Yard è agganciato al bordo: il margine lo
   stacca (su un elemento posizionato il margine sposta il box) */
.uk-slidenav-container {
  gap: 10px;
  margin: var(--as-slidenav-margin) !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.uk-slidenav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--as-slidenav-size);
  height: var(--as-slidenav-size);
  padding: 0 !important;
  border-radius: var(--as-slidenav-radius);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: color-mix(in oklab, var(--as-ink) 50%, transparent) !important;
  -webkit-backdrop-filter: var(--as-blur);
  backdrop-filter: var(--as-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
              0 8px 24px -10px rgba(0, 0, 0, 0.6);
  color: #fff !important;
  transition: background-color var(--as-fast) var(--as-ease),
              border-color var(--as-fast) var(--as-ease),
              color var(--as-fast) var(--as-ease),
              transform var(--as-fast) var(--as-ease);
}

.uk-slidenav svg {
  width: auto;
  height: 16px;
}

.uk-slidenav svg :is(polyline, path, line) {
  stroke-width: 2.4;
}

.uk-slidenav:hover,
.uk-slidenav:focus-visible {
  background: var(--as-primary) !important;
  border-color: var(--as-primary);
  color: var(--as-ink) !important;
}

.uk-slidenav-previous:hover { transform: translateX(-2px); }
.uk-slidenav-next:hover { transform: translateX(2px); }

.uk-slidenav:active {
  transform: scale(0.94);
}

.uk-slidenav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: none;
}

/* Frecce disattivate (inizio/fine di uno slider non infinito) */
.uk-slidenav.uk-invisible,
.uk-slidenav[aria-disabled="true"] {
  opacity: 0.35;
}

/* Browser senza sfocatura o utenti che chiedono meno trasparenza */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uk-slidenav { background: var(--as-ink) !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .uk-slidenav {
    background: var(--as-ink) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Dotnav a trattini (su fondo scuro / foto) */
.uk-light .uk-dotnav > * > *,
.uk-slideshow .uk-dotnav > * > * {
  width: 18px;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  transition: width var(--as-mid) var(--as-ease),
              background-color var(--as-mid) var(--as-ease);
}

.uk-light .uk-dotnav > * > :hover,
.uk-slideshow .uk-dotnav > * > :hover {
  background: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-dotnav > .uk-active > *,
.uk-slideshow .uk-dotnav > .uk-active > * {
  width: 40px;
  background: var(--as-primary);
}


/* ============================================================
   8. IMMAGINI, CARD, DIDASCALIE
   Spigoli vivi, nessuna ombra, nessun sollevamento. Un solo
   segno distintivo all'hover: le tacche d'angolo.
   ============================================================ */

/* Hairline interna che stacca la foto dal fondo chiaro */
.uk-inline-clip {
  box-shadow: inset 0 0 0 1px rgba(20, 22, 18, 0.06);
}

/* Zoom trattenuto (image_transition: scale-up) */
.uk-transition-scale-up {
  transition-duration: 900ms;
  transition-timing-function: var(--as-ease);
}

.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle:focus-within .uk-transition-scale-up {
  transform: scale(1.04);
}

/* Tacche d'angolo: segni di taglio da tavola tecnica */
.uk-inline-clip.uk-transition-toggle::before,
.uk-inline-clip.uk-transition-toggle::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  border-top: 2px solid var(--as-primary);
  opacity: 0;
  transition: opacity 380ms var(--as-ease), transform 380ms var(--as-ease);
}

.uk-inline-clip.uk-transition-toggle::before {
  left: 14px;
  border-left: 2px solid var(--as-primary);
  transform: translate(6px, 6px);
}

.uk-inline-clip.uk-transition-toggle::after {
  right: 14px;
  border-right: 2px solid var(--as-primary);
  transform: translate(-6px, 6px);
}

.uk-inline-clip.uk-transition-toggle:hover::before,
.uk-inline-clip.uk-transition-toggle:hover::after,
.uk-inline-clip.uk-transition-toggle:focus-within::before,
.uk-inline-clip.uk-transition-toggle:focus-within::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Niente tacche sulle gallery con overlay a comparsa */
.uk-inline-clip.uk-transition-toggle:has(.uk-transition-fade)::before,
.uk-inline-clip.uk-transition-toggle:has(.uk-transition-fade)::after {
  content: none;
}

/* Didascalie fisse su foto (non quelle a comparsa di UIkit):
   filo superiore e keyline verde che si disegna all'hover */
.uk-inline-clip .uk-tile-secondary:not([class*="uk-transition-"]) {
  border-top: 1px solid var(--as-line-light);
}

.uk-inline-clip .uk-tile-secondary:not([class*="uk-transition-"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--as-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--as-ease);
}

.uk-transition-toggle:hover .uk-tile-secondary:not([class*="uk-transition-"])::after,
.uk-transition-toggle:focus-within .uk-tile-secondary:not([class*="uk-transition-"])::after {
  transform: scaleX(1);
}


/* ============================================================
   9. CARD (card-default, stile "Apple")
   Si attiva solo dove nel builder scegli panel_style
   "card-default": Yard non la usa, quindi il resto del sito non
   cambia. Superficie bianca su fondo muted, raggio morbido,
   profondità che cresce all'hover, pulsante "+" in basso a
   destra, zoom lento della foto.
   ============================================================ */

.uk-card-default {
  border: 0;
  border-radius: var(--as-card-radius);
  background: var(--as-paper);
  color: var(--as-ink);
  box-shadow: var(--as-card-shadow);
  transition: translate 600ms var(--as-spring),
              box-shadow 600ms var(--as-spring);
}

/* Ritaglio solo sulle card con immagine: le card con moduli
   (es. il form contatti) restano libere, così menu a tendina e
   messaggi di validazione non vengono tagliati */
.uk-card-default:has(.uk-card-media-top, .uk-inline-clip) {
  overflow: hidden;
  overflow: clip;
}

/* Le foto dentro la card seguono il raggio della card */
.uk-card-default .uk-inline-clip,
.uk-card-default .el-image {
  border-radius: 0;
  box-shadow: none;
}

/* Zona immagine: riquadro grigio + fusione "multiply".
   Il bianco dei disegni tecnici prende il grigio del riquadro,
   così si vede dove l'immagine inizia e finisce; linee e colori
   restano intatti. Sulle foto l'effetto è quasi impercettibile. */
.uk-card-default :is(.uk-card-media-top, .uk-inline-clip) {
  background: var(--as-muted);
  isolation: isolate;
}

.uk-card-default .el-image {
  mix-blend-mode: multiply;
}

/* Niente tacche d'angolo dentro le card: qui il segno è il "+" */
.uk-card-default .uk-inline-clip.uk-transition-toggle::before,
.uk-card-default .uk-inline-clip.uk-transition-toggle::after {
  content: none;
}

/* Zoom lento, alla Apple */
.uk-card-default .uk-transition-scale-up {
  transition-duration: 1200ms;
  transition-timing-function: var(--as-spring);
}

.uk-card-default:is(a, .uk-link-toggle):hover .uk-transition-scale-up,
.uk-card-default:is(a, .uk-link-toggle):focus-visible .uk-transition-scale-up {
  transform: scale(1.06);
}

/* Card cliccabile (panel_link): sollevamento e ombra ampia */
.uk-card-default:is(a, .uk-link-toggle) {
  position: relative;
  text-decoration: none;
}

.uk-card-default:is(a, .uk-link-toggle):hover,
.uk-card-default:is(a, .uk-link-toggle):focus-visible {
  translate: 0 -6px;
  box-shadow: var(--as-card-shadow-hover);
}

.uk-card-default:is(a, .uk-link-toggle):active {
  translate: 0 -2px;
  transition-duration: 120ms;
}

/* Il focus segue il raggio della card */
.uk-card-default:focus-visible {
  outline-offset: 4px;
  border-radius: var(--as-card-radius);
}

/* Spazio per il pulsante "+" */
.uk-card-default:is(a, .uk-link-toggle) .uk-card-body {
  padding-right: 72px;
}

/* Pulsante "+": disegnato con due gradienti, ruota e diventa
   scuro all'hover */
.uk-card-default:is(a, .uk-link-toggle)::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--as-ink);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat,
    color-mix(in oklab, var(--as-ink) 7%, transparent);
  transition: rotate 500ms var(--as-spring),
              background-color 300ms var(--as-ease),
              color 300ms var(--as-ease);
}

.uk-card-default:is(a, .uk-link-toggle):hover::after,
.uk-card-default:is(a, .uk-link-toggle):focus-visible::after {
  rotate: 90deg;
  color: #fff;
  background-color: var(--as-ink);
}

/* Il verde compare solo come sottolineatura del titolo all'hover.
   Vale per le card cliccabili e per le voci cliccabili dentro una
   card (es. articoli correlati nella colonna laterale). */
.uk-card-default .el-title {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color 400ms var(--as-ease);
}

.uk-card-default:is(a, .uk-link-toggle):hover .el-title,
.uk-card-default:is(a, .uk-link-toggle):focus-visible .el-title,
.uk-card-default .uk-link-toggle:is(:hover, :focus-visible) .el-title {
  text-decoration-color: var(--as-primary);
}

/* Testo lungo dentro una card (singolo articolo): immagini del
   contenuto a tutta larghezza della colonna e mai oltre */
.uk-card-default.uk-card-body .el-content img,
.uk-card-default .uk-card-body .el-content img {
  max-width: 100%;
  height: auto;
}

/* Su fondo scuro la card resta chiara e leggibile */
.uk-light .uk-card-default,
.uk-section-secondary .uk-card-default {
  color: var(--as-ink);
}


/* ============================================================
   10. LISTE, HR, FOOTER, NEWSLETTER
   ============================================================ */

/* hr: la linea sfuma invece di tagliare netta */
hr,
.uk-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
              var(--as-line-strong),
              var(--as-line) 60%,
              transparent);
}

.uk-light hr,
.uk-section-secondary hr,
.uk-tile-secondary hr {
  background: linear-gradient(to right,
              rgba(255, 255, 255, 0.28),
              rgba(255, 255, 255, 0.08) 60%,
              transparent);
}

/* Riquadri chiari dentro il footer scuro */
.uk-section-secondary .uk-tile-default hr {
  background: linear-gradient(to right,
              var(--as-line-strong),
              var(--as-line) 60%,
              transparent);
}

.uk-section-secondary .uk-tile-default {
  box-shadow: inset 1px 0 0 var(--as-line), inset 0 1px 0 var(--as-line);
}

/* Link nelle liste (es. indice dei servizi): piccolo avanzamento,
   colore scuro sul chiaro per mantenere il contrasto */
.uk-list .el-link {
  display: inline-block;
  transition: transform 260ms var(--as-ease), color 260ms var(--as-ease);
}

.uk-list .el-link:hover,
.uk-list .el-link:focus-visible {
  transform: translateX(4px);
  color: var(--as-ink);
}

.uk-light .uk-list .el-link:hover,
.uk-section-secondary .uk-list .el-link:hover,
.uk-light .uk-list .el-link:focus-visible,
.uk-section-secondary .uk-list .el-link:focus-visible {
  color: var(--as-primary);
}

/* Campo newsletter: solo filo inferiore */
.uk-input.el-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding-left: 0;
  transition: border-color 260ms var(--as-ease), box-shadow 260ms var(--as-ease);
}

.uk-input.el-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.uk-input.el-input:focus {
  background: transparent;
  border-bottom-color: var(--as-primary);
  box-shadow: 0 1px 0 var(--as-primary);
  outline: none;
}

.uk-form-icon.el-button {
  color: rgba(255, 255, 255, 0.6);
  transition: color 220ms var(--as-ease), transform 220ms var(--as-ease);
}

.uk-form-icon.el-button:hover,
.uk-form-icon.el-button:focus-visible {
  color: var(--as-primary);
  transform: translateX(3px);
}

.js-form-newsletter .message {
  border-left: 2px solid var(--as-primary);
  padding-left: 12px;
}


/* ============================================================
   11. FILTRI E PAGINAZIONE
   Validi per tutte le griglie con filtro (stile "subnav") e per
   la paginazione dei blog/categorie.
   ============================================================ */

/* Filtro: voci inattive più chiare, keyline verde sotto l'attiva */
.uk-subnav > li[uk-filter-control] > a {
  position: relative;
  padding-bottom: 6px;
  transition: color var(--as-fast) var(--as-ease);
}

.uk-subnav > li[uk-filter-control]:not(.uk-active) > a {
  color: color-mix(in oklab, currentColor 65%, transparent);
}

.uk-subnav > li[uk-filter-control] > a:hover,
.uk-subnav > li[uk-filter-control] > a:focus-visible {
  color: var(--as-ink);
}

.uk-subnav > li[uk-filter-control] > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--as-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--as-mid) var(--as-ease);
}

.uk-subnav > li[uk-filter-control] > a:hover::after,
.uk-subnav > li[uk-filter-control].uk-active > a::after {
  transform: scaleX(1);
}

.uk-subnav > li[uk-filter-control]:not(.uk-active) > a:hover::after {
  background: var(--as-line-strong);
}

/* Paginazione: quadrati con filo sottile, pagina attiva scura */
.uk-pagination > li > a,
.uk-pagination > li > span {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--as-line);
  border-radius: 0;
  transition: border-color var(--as-fast) var(--as-ease),
              background-color var(--as-fast) var(--as-ease),
              color var(--as-fast) var(--as-ease);
}

.uk-pagination > li > a:hover,
.uk-pagination > li > a:focus-visible {
  border-color: var(--as-ink);
  color: var(--as-ink);
}

.uk-pagination > .uk-active > * {
  background: var(--as-ink);
  border-color: var(--as-ink);
  color: #fff;
}

.uk-pagination > .uk-disabled > * {
  opacity: 0.4;
}

/* Occhielli dinamici con più voci (es. elenco di tag): vanno a
   capo in modo ordinato invece di sbordare dalla card */
.el-meta {
  overflow-wrap: anywhere;
}

.el-meta a {
  white-space: nowrap;
}


/* ============================================================
   12. ANIMAZIONI LEGATE ALLO SCROLL
   Solo nei browser che le supportano. Partono quando l'elemento
   entra nello schermo, non al caricamento della pagina.
   ============================================================ */

@supports (animation-timeline: view()) {

  /* Barra di avanzamento della lettura */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1200;
    transform-origin: left center;
    background: var(--as-primary);
    animation: as-progress linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes as-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Il trattino dell'occhiello si allunga quando entra */
  .uk-h6.uk-text-primary::before {
    animation: as-tick linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }

  @keyframes as-tick {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Parallasse interna delle foto nelle card e negli slider.
     Lo scale evita che ai bordi compaia il fondo. Non tocca le
     immagini a cui il builder applica già il suo parallax. */
  .uk-inline-clip:not(.uk-card .uk-inline-clip) picture {
    display: block;
    animation: as-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  @keyframes as-parallax {
    from { transform: translate3d(0, -2.5%, 0) scale(1.06); }
    to   { transform: translate3d(0, 2.5%, 0) scale(1.06); }
  }

  /* Card: entrano leggermente rimpicciolite e in dissolvenza.
     Usa "scale", così non interferisce con "translate" dell'hover. */
  .uk-card-default {
    animation: as-card-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  @keyframes as-card-in {
    from { opacity: 0; scale: 0.94; }
    to   { opacity: 1; scale: 1; }
  }

  /* Didascalie fisse: dissolvenza all'ingresso. Mai su quelle a
     comparsa di UIkit, che resterebbero sempre visibili. */
  .uk-inline-clip .uk-tile-secondary:not([class*="uk-transition-"]) {
    animation: as-fade linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 70%;
  }

  @keyframes as-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* ============================================================
   13. MOVIMENTO RIDOTTO
   Spegne tutto ciò che questo file anima, comprese le
   animazioni legate allo scroll (che non dipendono dalla durata).
   Le animazioni del builder si attenuano dalle sue opzioni.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }

  body::before,
  .uk-h6.uk-text-primary::before,
  .uk-inline-clip picture,
  .uk-card-default,
  .uk-inline-clip .uk-tile-secondary {
    animation: none !important;
  }

  .uk-card-default:hover,
  .uk-card-default:focus-visible {
    translate: none !important;
  }

  body::before {
    display: none;
  }

  .uk-inline-clip picture {
    transform: none !important;
  }

  .uk-transition-toggle:hover .uk-transition-scale-up {
    transform: none;
  }
}