/* Ultimo layer: vince su componenti e sezioni senza bisogno di !important. */
@layer utilities {
  @media (min-width: 768px) {
    .u-mobile-only { display: none; }
  }
  @media (max-width: 767px) {
    .u-desktop-only { display: none; }
  }

  /* Con JS / senza JS (classe "js" su <html> da duc_base_js_class()) */
  html:not(.js) .u-js-only, html.js .u-nojs-only { display: none; }

  .u-text-primary { color: var(--color-primary); }
  .u-text-muted { color: var(--color-muted-text); }

  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Movimento ridotto: nel layer più alto vince su componenti e sezioni senza !important */
  @media (prefers-reduced-motion: reduce) {
    html, * { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
  }
}