/* ===================================================================
 * Artide — Override stylesheet (v2)
 * Applied on top of the original Webnode CSS.
 * ===================================================================*/

:root {
  /* Override the Webnode accent colour variable used across the whole design.
   * Unified red is #cc1212 — applied to every brand surface (header on
   * scroll, slider CTA, accent links, banner backgrounds), so the whole
   * site reads as one tone. */
  --ac-color: #cc1212;
  --ac-color-h: 0;
  --ac-color-s: 82%;
  --ac-color-l: 43%;
  --ac-color-rgb: 204, 18, 18;

  /* Our custom tokens */
  --artide-red: #cc1212;
  --artide-red-old: #f25151;
  --artide-red-dark: #a01010;
  --artide-gold: #ffba1b;
  --artide-gold-old: #c8a24b;
}

/* ── 1. Legacy colour swaps ──────────────────────────────────────── */
/* Inline-style or attribute occurrences we cannot reach via variables. */
[style*="#f25151" i],
[style*="#a01010" i] { color: var(--artide-red) !important; }
[style*="background-color:#f25151" i],
[style*="background-color: #f25151" i],
[style*="background:#f25151" i],
[style*="background: #f25151" i],
[style*="background-color:#a01010" i],
[style*="background-color: #a01010" i],
[style*="background:#a01010" i],
[style*="background: #a01010" i] { background-color: var(--artide-red) !important; }
[style*="border-color:#f25151" i],
[style*="border-color: #f25151" i],
[style*="border-color:#a01010" i],
[style*="border-color: #a01010" i] { border-color: var(--artide-red) !important; }

[style*="#c8a24b" i] { color: var(--artide-gold) !important; }
[style*="background-color:#c8a24b" i],
[style*="background-color: #c8a24b" i],
[style*="background:#c8a24b" i] { background-color: var(--artide-gold) !important; }
[style*="border-color:#c8a24b" i] { border-color: var(--artide-gold) !important; }


/* ── 2. Menu behaviour ───────────────────────────────────────────── */
/* Header structure in Webnode:
 *   <header class="l-h">
 *     <section class="s-hb">  — social icons + hours + contacts (top strip)
 *     <section class="s-hn">  — main navigation menu
 *   </header>
 *
 * Requirements:
 *   - .s-hb stays always visible, always white, always at the top
 *     (never changes on scroll, never moves).
 *   - .s-hn is:
 *       • fully transparent (bg + text) on home at the top of the page;
 *       • solid RED with white text on scroll/hover;
 *       • solid RED with white text on every non-home page.
 */

/* Whole header pinned to the top on every page */
.l-h {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent !important;
  box-shadow: none !important;
  transition: box-shadow 0.35s ease;
}

/* Social bar (top strip) — always WHITE, text dark, never changes. */
.l-h .s-hb,
.l-h .s-hb .s-bg,
.l-h .s-hb .s-bg-l {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
.l-h .s-hb a,
.l-h .s-hb span,
.l-h .s-hb li,
.l-h .s-hb .s-c {
  color: inherit !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Main nav — default: red with white text.
 * This is the "visible" state used on non-home pages and on home
 * once the user starts scrolling.
 *
 * Menu-specific red is #ee1515 (a brighter red than the brand
 * --artide-red #cc1212), per client request. The brand red stays
 * unchanged for banners, CTAs, accent links elsewhere. */
.l-h .s-hn,
.l-h .s-hn .s-bg,
.l-h .s-hn .s-bg-l {
  background: #ee1515 !important;
  background-color: #ee1515 !important;
  transition: background 0.35s ease, opacity 0.35s ease;
}
.l-h .s-hn a,
.l-h .s-hn span,
.l-h .s-hn li,
.l-h .s-hn .s-c {
  color: #ffffff !important;
  text-shadow: none !important;
}
/* Bold ONLY on top-level menu items (PRODOTTI / SERVIZI / AZIENDA
 * / BLOG / CONTATTI). Submenu (level-2 + level-3) keeps regular
 * weight for readability. */
.l-h .s-hn .level-1 > li > .menu-item a,
.l-h .s-hn .level-1 > li > .menu-item span,
.l-h .s-hn .level-1 > li > a,
.l-h .s-hn .level-1 > li > a span {
  font-weight: 700 !important;
}
.l-h .s-hn .level-2 a,
.l-h .s-hn .level-2 span,
.l-h .s-hn .level-3 a,
.l-h .s-hn .level-3 span {
  font-weight: 400 !important;
}
/* Subtle shadow on nav when visible */
.l-h .s-hn { box-shadow: 0 4px 18px rgba(0,0,0,0.12); }

/* HOME, at the top of the page (nav not scrolled): fully transparent
 * (both background and text). On scroll/hover it reverts to the default
 * red+white state above. */
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .s-bg,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .s-bg-l {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Only TOP-LEVEL nav text becomes transparent on home at rest.
 * Submenu (level-2 / level-3) links MUST stay readable when their
 * dropdown is open, otherwise users lose the text the moment the mouse
 * exits the top hover zone but is still over the dropdown. */
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .level-1 > li > .menu-item a,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .level-1 > li > .menu-item span,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .level-1 > li > a,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .level-1 > li > a span {
  color: transparent !important;
  text-shadow: none !important;
}
/* Submenu links are always white (Webnode default) — never transparent. */
.l-h .s-hn .level-2 a,
.l-h .s-hn .level-2 span,
.l-h .s-hn .level-3 a,
.l-h .s-hn .level-3 span {
  color: #fff !important;
}
/* Also make menu icons (burger etc.) blend when invisible */
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn svg,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn img,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .wnd-icon {
  opacity: 0 !important;
}

/* Hide submenu chevrons (.mm-arrow) and the nav separator line when
 * the nav is transparent on home. Use opacity only — never display:none
 * or visibility:hidden — so pointer events keep flowing through the
 * elements and the submenu dropdown still triggers on hover.
 * The .level-2 / .level-3 dropdowns themselves are NEVER hidden by
 * this override; their visibility is driven by Webnode's own
 * .open-class JS toggle. */
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .mm-arrow,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .mm-arrow::before,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .mm-arrow::after {
  opacity: 0 !important;
}
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .wnd-nav-border .s-w::after,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .s-o::after,
body.is-home .l-h:not(.is-scrolled):not(.is-hovering) .s-hn .s-o::before {
  opacity: 0 !important;
}

/* The submenu dropdown panels (.level-2 / .level-3) keep their original
 * Webnode look — we don't override their background. We only make sure
 * that, inside them, links remain readable: when the parent nav is
 * still transparent (home at rest, before scroll/hover triggers), the
 * inherited color: transparent rule would also blank the dropdown links.
 * Restore them to white explicitly. */
.l-h .s-hn .level-2 a,
.l-h .s-hn .level-3 a,
.l-h .s-hn .level-2 .menu-item-text,
.l-h .s-hn .level-3 .menu-item-text {
  color: #fff !important;
  opacity: 1 !important;
}

/* (Hover detection is handled by the override JS via mousemove on the
 * document; we deliberately do NOT add a CSS hover-catch ::before
 * pseudo-element here, because pointer-events: auto on it would
 * intercept mouseover events between the menu item and its submenu
 * dropdown — which would break submenu visibility on hover.) */

/* Hide removed menu items (flagged by JS) */
.l-h .nav-remove,
.l-h .nav-remove-parent {
  display: none !important;
}


/* ── 3. Hero slider ──────────────────────────────────────────────── */
body.is-home main > .sw > .sw-c > section.s-hm,
body.is-home main section.s-hm:not(.s-hm-hidden) {
  display: none !important;
}

/* Slider sized to fit the viewport BELOW the white social bar.
 * The override JS sets --social-bar-h dynamically so the slider always
 * adapts to actual header height (changes on mobile / when social bar
 * wraps). */
#artide-slider {
  --social-bar-h: 50px;
  position: relative;
  width: 100%;
  margin-top: var(--social-bar-h);
  height: calc(100vh - var(--social-bar-h));
  min-height: 460px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
#artide-slider .artide-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  will-change: transform, opacity, clip-path, filter;
}
#artide-slider .artide-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── Transition effects ────────────────────────────────────────── */
/* The active slide always gets a subtle Ken Burns slow-zoom while it's
 * displayed, regardless of which transition is used to reveal it. */
#artide-slider .artide-slide.is-active .artide-slide-media img,
#artide-slider .artide-slide.is-active .artide-slide-media video {
  animation: artide-kenburns 16s ease-in-out forwards;
}
@keyframes artide-kenburns {
  0%   { transform: scale(1.05) translate(-1%, -1%); }
  100% { transform: scale(1.18) translate(2%, 2%); }
}

/* Effect 1 — LIQUID WAVE reveal: clip-path morph that mimics rising water. */
#artide-slider .artide-slide.is-trans-liquid.is-entering {
  animation: artide-liquid-in 1.5s cubic-bezier(.55,.06,.25,1) forwards;
}
@keyframes artide-liquid-in {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); opacity: 0.6; }
  35%  { clip-path: polygon(0 75%, 12% 60%, 25% 78%, 50% 55%, 75% 78%, 88% 60%, 100% 75%, 100% 100%, 0 100%); opacity: 1; }
  70%  { clip-path: polygon(0 35%, 18% 22%, 35% 38%, 55% 18%, 80% 35%, 100% 22%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}
#artide-slider .artide-slide.is-trans-liquid.is-leaving {
  animation: artide-liquid-out 1.5s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes artide-liquid-out {
  0%   { transform: scale(1) translateY(0); filter: blur(0); opacity: 1; }
  100% { transform: scale(0.92) translateY(-8%); filter: blur(14px); opacity: 0; }
}

/* Effect 2 — IRIS ZOOM reveal: circular reveal from centre with depth. */
#artide-slider .artide-slide.is-trans-iris.is-entering {
  animation: artide-iris-in 1.4s cubic-bezier(.45,.05,.2,1) forwards;
}
@keyframes artide-iris-in {
  0%   { clip-path: circle(0% at 50% 50%); transform: scale(1.35); filter: blur(24px) brightness(1.2); }
  60%  { clip-path: circle(80% at 50% 50%); transform: scale(1.05); filter: blur(4px) brightness(1.05); }
  100% { clip-path: circle(150% at 50% 50%); transform: scale(1); filter: blur(0) brightness(1); }
}
#artide-slider .artide-slide.is-trans-iris.is-leaving {
  animation: artide-iris-out 1.4s ease-in forwards;
}
@keyframes artide-iris-out {
  0%   { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(1.4); opacity: 0; filter: blur(18px) brightness(0.4); }
}

/* Effect 3 — DRIFT + ROTATE: incoming slide drifts in from the side
 * with a subtle rotation while the leaving slide drifts out the
 * opposite way. Reads as a kinetic page swipe. */
#artide-slider .artide-slide.is-trans-drift.is-entering {
  animation: artide-drift-in 1.6s cubic-bezier(.2,1.05,.4,1) forwards;
}
@keyframes artide-drift-in {
  0%   { opacity: 0; transform: translateX(35%) scale(1.18) rotate(2.5deg); filter: blur(12px); }
  100% { opacity: 1; transform: translateX(0)   scale(1)    rotate(0);     filter: blur(0); }
}
#artide-slider .artide-slide.is-trans-drift.is-leaving {
  animation: artide-drift-out 1.6s cubic-bezier(.5,0,.6,.4) forwards;
}
@keyframes artide-drift-out {
  0%   { opacity: 1; transform: translateX(0)    scale(1)    rotate(0); }
  100% { opacity: 0; transform: translateX(-35%) scale(0.88) rotate(-2.5deg); filter: blur(8px); }
}

/* Effect 4 — GLITCH SHIFT: chromatic split + flicker. Eye-catching. */
#artide-slider .artide-slide.is-trans-glitch.is-entering {
  animation: artide-glitch-in 1.3s steps(1, end) forwards;
}
@keyframes artide-glitch-in {
  0%   { opacity: 0; transform: translate(-3%, 1%) skewX(-2deg);
         filter: hue-rotate(20deg) saturate(2) blur(2px); }
  18%  { opacity: 1; transform: translate(2%, -1%) skewX(2deg);
         filter: hue-rotate(-20deg) saturate(2) blur(1px); }
  35%  { transform: translate(-1%, 0.5%); filter: hue-rotate(0) saturate(1.4); }
  55%  { transform: translate(1%, 0); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
#artide-slider .artide-slide.is-trans-glitch.is-leaving {
  animation: artide-glitch-out 1.3s steps(1, end) forwards;
}
@keyframes artide-glitch-out {
  0%   { opacity: 1; }
  20%  { opacity: 1; transform: translate(2%, -1%) skewX(1deg); filter: hue-rotate(15deg); }
  60%  { opacity: 0.5; transform: translate(-2%, 1%); filter: blur(6px); }
  100% { opacity: 0; transform: translate(0); }
}

/* Effect 5 — ZOOM BLUR: leaving slide flies forward, entering rushes in. */
#artide-slider .artide-slide.is-trans-zoom.is-entering {
  animation: artide-zoom-in 1.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes artide-zoom-in {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(20px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(0); }
}
#artide-slider .artide-slide.is-trans-zoom.is-leaving {
  animation: artide-zoom-out 1.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes artide-zoom-out {
  0%   { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(1.6);  filter: blur(20px); }
}

/* Tag the slide actively transitioning so its layering is correct. */
#artide-slider .artide-slide.is-entering { z-index: 3; }
#artide-slider .artide-slide.is-leaving  { z-index: 2; }

/* ── 3D transitions ────────────────────────────────────────────── */
/* All 3D effects share a perspective on the slider stage and
 * preserve-3d on the slides so child media + content rotate together. */
#artide-slider {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
#artide-slider .artide-slide {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Effect 6 — FLIP-CARD: 180° flip on Y axis. */
#artide-slider .artide-slide.is-trans-flip-card.is-entering {
  animation: artide-flip-in 1.5s cubic-bezier(.55,.085,.26,1) forwards;
  transform-origin: center center;
}
@keyframes artide-flip-in {
  0%   { opacity: 0; transform: rotateY(-180deg) scale(0.85); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}
#artide-slider .artide-slide.is-trans-flip-card.is-leaving {
  animation: artide-flip-out 1.5s cubic-bezier(.55,.085,.26,1) forwards;
  transform-origin: center center;
}
@keyframes artide-flip-out {
  0%   { opacity: 1; transform: rotateY(0) scale(1); }
  50%  { opacity: 0; }
  100% { opacity: 0; transform: rotateY(180deg) scale(0.85); }
}

/* Effect 7 — CUBE: 90° quarter-cube rotation. */
#artide-slider .artide-slide.is-trans-cube.is-entering {
  animation: artide-cube-in 1.5s cubic-bezier(.6,.04,.3,1) forwards;
  transform-origin: left center;
}
@keyframes artide-cube-in {
  0%   { opacity: 0; transform: rotateY(90deg) translateZ(0); }
  100% { opacity: 1; transform: rotateY(0)     translateZ(0); }
}
#artide-slider .artide-slide.is-trans-cube.is-leaving {
  animation: artide-cube-out 1.5s cubic-bezier(.6,.04,.3,1) forwards;
  transform-origin: right center;
}
@keyframes artide-cube-out {
  0%   { opacity: 1; transform: rotateY(0); }
  100% { opacity: 0; transform: rotateY(-90deg); }
}

/* Effect 8 — FOLD: unfold from the left edge like a folded brochure. */
#artide-slider .artide-slide.is-trans-fold.is-entering {
  animation: artide-fold-in 1.6s cubic-bezier(.4,.0,.2,1) forwards;
  transform-origin: left center;
}
@keyframes artide-fold-in {
  0%   { opacity: 0; transform: perspective(1200px) rotateY(95deg); filter: brightness(0.6); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0);     filter: brightness(1); }
}
#artide-slider .artide-slide.is-trans-fold.is-leaving {
  animation: artide-fold-out 1.6s cubic-bezier(.4,.0,.2,1) forwards;
  transform-origin: right center;
}
@keyframes artide-fold-out {
  0%   { opacity: 1; transform: perspective(1200px) rotateY(0); filter: brightness(1); }
  100% { opacity: 0; transform: perspective(1200px) rotateY(-95deg); filter: brightness(0.5); }
}

/* Effect 9 — DIVE: leaving falls away through Z, entering emerges from the depth. */
#artide-slider .artide-slide.is-trans-dive.is-entering {
  animation: artide-dive-in 1.6s cubic-bezier(.2,1,.3,1) forwards;
}
@keyframes artide-dive-in {
  0%   { opacity: 0; transform: translateZ(-1200px) rotateX(40deg); filter: blur(20px); }
  100% { opacity: 1; transform: translateZ(0)       rotateX(0);     filter: blur(0); }
}
#artide-slider .artide-slide.is-trans-dive.is-leaving {
  animation: artide-dive-out 1.6s cubic-bezier(.7,0,.8,.4) forwards;
}
@keyframes artide-dive-out {
  0%   { opacity: 1; transform: translateZ(0) rotateX(0); }
  100% { opacity: 0; transform: translateZ(1400px) rotateX(-40deg); filter: blur(18px); }
}

/* Effect 10 — TILT: lateral 3D tilt with depth swap. */
#artide-slider .artide-slide.is-trans-tilt.is-entering {
  animation: artide-tilt-in 1.5s cubic-bezier(.45,.1,.25,1) forwards;
  transform-origin: center center;
}
@keyframes artide-tilt-in {
  0%   { opacity: 0; transform: rotateY(35deg) translateZ(-300px) translateX(20%); }
  100% { opacity: 1; transform: rotateY(0)     translateZ(0)      translateX(0); }
}
#artide-slider .artide-slide.is-trans-tilt.is-leaving {
  animation: artide-tilt-out 1.5s cubic-bezier(.45,.1,.25,1) forwards;
}
@keyframes artide-tilt-out {
  0%   { opacity: 1; transform: rotateY(0)      translateZ(0)      translateX(0); }
  100% { opacity: 0; transform: rotateY(-35deg) translateZ(-300px) translateX(-20%); }
}

/* Effect 11 — SPIRAL: combined rotateX + rotateY + translateZ. */
#artide-slider .artide-slide.is-trans-spiral.is-entering {
  animation: artide-spiral-in 1.7s cubic-bezier(.4,.05,.2,1) forwards;
}
@keyframes artide-spiral-in {
  0%   { opacity: 0; transform: rotateY(-180deg) rotateX(40deg) translateZ(-600px) scale(0.5); filter: blur(16px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0) rotateX(0) translateZ(0) scale(1); filter: blur(0); }
}
#artide-slider .artide-slide.is-trans-spiral.is-leaving {
  animation: artide-spiral-out 1.7s cubic-bezier(.55,0,.6,.6) forwards;
}
@keyframes artide-spiral-out {
  0%   { opacity: 1; transform: rotateY(0) rotateX(0) translateZ(0) scale(1); }
  100% { opacity: 0; transform: rotateY(180deg) rotateX(-40deg) translateZ(-600px) scale(0.5); filter: blur(16px); }
}
#artide-slider .artide-slide-media { position: absolute; inset: 0; }
#artide-slider .artide-slide-media img,
#artide-slider .artide-slide-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
#artide-slider .artide-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
}
#artide-slider .artide-slide-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 6vw 16vh;
  color: #fff; text-align: center;
  z-index: 3; pointer-events: none;
}
#artide-slider .artide-slide-content > * { pointer-events: auto; }
#artide-slider .artide-slide-eyebrow {
  font-size: clamp(0.8rem, 1vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 600;
  margin: 0 0 14px;
  opacity: 0;
  transform: translateY(30px) rotate(-2deg);
}
#artide-slider .artide-slide-title {
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 900;
  margin: 0 0 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  color: #fff;
}
#artide-slider .artide-slide-subtitle {
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  max-width: 46ch;
  line-height: 1.5;
  margin: 0 0 32px;
  opacity: 0;
  transform: translateY(40px);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  color: #fff;
}
#artide-slider .artide-slide-cta {
  display: inline-block;
  background: var(--artide-red);
  color: #fff;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(204,18,18,0.35);
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#artide-slider .artide-slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(204,18,18,0.5);
}
@keyframes artide-bounce-in {
  0%  { opacity: 0; transform: translateY(60px) scale(0.85) rotate(-4deg); }
  60% { opacity: 1; transform: translateY(-10px) scale(1.04) rotate(1deg); }
  100%{ opacity: 1; transform: translateY(0)    scale(1)    rotate(0); }
}
@keyframes artide-slide-in {
  0%  { opacity: 0; transform: translateY(40px); }
  100%{ opacity: 1; transform: translateY(0); }
}
@keyframes artide-rubber {
  0% { transform: translateY(30px) rotate(-2deg); opacity: 0; }
  50%{ transform: translateY(-6px) rotate(2deg);  opacity: 1; }
  100%{ transform: translateY(0)    rotate(0);     opacity: 1; }
}
#artide-slider .artide-slide.is-active .artide-slide-eyebrow {
  animation: artide-rubber 0.9s 0.1s cubic-bezier(0.25,0.8,0.3,1.3) forwards;
}
#artide-slider .artide-slide.is-active .artide-slide-title {
  animation: artide-bounce-in 1.1s 0.3s cubic-bezier(0.3,0.9,0.3,1.25) forwards;
}
#artide-slider .artide-slide.is-active .artide-slide-subtitle {
  animation: artide-slide-in 0.9s 0.65s ease forwards;
}
#artide-slider .artide-slide.is-active .artide-slide-cta {
  animation: artide-slide-in 0.8s 0.85s ease forwards;
}
#artide-slider .artide-slider-dots {
  position: absolute; bottom: 34px; left: 0; right: 0;
  display: flex; gap: 10px; justify-content: center; z-index: 4;
}
#artide-slider .artide-slider-dots button {
  width: 38px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.35);
  border: 0; cursor: pointer; padding: 0;
  position: relative; overflow: hidden;
  transition: background 0.2s;
}
#artide-slider .artide-slider-dots button:hover { background: rgba(255,255,255,0.55); }
#artide-slider .artide-slider-dots button.is-active { background: rgba(255,255,255,0.25); }
#artide-slider .artide-slider-dots button.is-active::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform-origin: left;
  animation: artide-dot-fill 15s linear forwards;
}
@keyframes artide-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#artide-slider .artide-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  color: #fff;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
#artide-slider .artide-slider-arrow:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.08);
}
#artide-slider .artide-slider-arrow.prev { left: 24px; }
#artide-slider .artide-slider-arrow.next { right: 24px; }

@media (max-width: 640px) {
  #artide-slider { min-height: 520px; height: 82vh; }
  #artide-slider .artide-slider-arrow { display: none; }
  #artide-slider .artide-slide-title { font-size: 2.1rem; max-width: 16ch; }
  #artide-slider .artide-slide-subtitle { font-size: 0.95rem; }
  #artide-slider .artide-slider-dots { bottom: 18px; }
  #artide-slider .artide-slider-dots button { width: 28px; }
}


/* ── 3.5 Header offset on non-home pages ─────────────────────────── */
/* The header is position: fixed on every page (so the social bar stays
 * pinned at the top). On home the slider fills the viewport behind it.
 * On every other page we must push the content down by the header
 * height, otherwise the menu covers the first part of the page. */
body:not(.is-home) main.l-m {
  padding-top: 130px;
}

/* ── SEO injected paragraphs (intro + outro) ──────────────────── */
/* Both blocks must visually match Webnode's body copy:
 *   - same justified alignment (rest of body uses .wnd-align-justify);
 *   - dark text on a clearly readable background (the outro section is
 *     dropped right before the dark footer-water area; without an
 *     explicit white panel the text would render on the dark .l-w
 *     wrapper and disappear). */
/* SEO intro + outro paragraphs (merged single ruleset).
 * Both blocks are appended inline inside the last body section's
 * editor zone (.ez-c) → they inherit the Webnode body styling
 * (font, size, white background, horizontal padding) automatically.
 * Only minimal overrides are applied here. */
/* Intro stays justified (it sits inline with body copy and reads as
 * a body paragraph). Outro is CENTRED to mirror the CTA above it
 * and read as a clean closing line. */
.artide-seo-intro {
  text-align: justify !important;
  margin: 0 !important;
}
.artide-seo-outro__text {
  text-align: center !important;
  margin: 0 !important;
  max-width: 56rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Maximum-specificity centring for the outro block ──────────────
 * On accent-dark sections (sc-acd, used by /sviluppo-software,
 * /telecontrollo, /automazione, /progettazione, /corsi) Webnode's
 * specific selectors were keeping the outro paragraph left-aligned
 * even with text-align:center !important — too many cascade rules
 * with equal weight. Force-centre everything by:
 *   1. Flexing the wrapper block + b-c so its single <p> child
 *      lands at horizontal centre of the available width.
 *   2. Re-asserting text-align:center on every level.
 *   3. Capping max-width at 50rem so the centring is visually
 *      obvious even when the surrounding section is .wnd-w-wider.
 */
/* Outro wrapper blocks: NO display:flex here — that was causing the
 * heading text and the outro paragraph to render as a single
 * vertical character column when combined with align-items: center
 * on .s-c (each flex child shrunk to content width, then text
 * wrapped letter by letter). Plain block layout + text-align: center
 * keeps wrapping natural and centres the lines. */
.artide-seo-outro-block,
.artide-seo-outro-block .b-c,
.artide-seo-outro-block .b-text-c,
.artide-seo-outro-block .b-cs {
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}
.artide-seo-outro-block p,
.artide-seo-outro-block p.artide-seo-outro__text,
section .artide-seo-outro-block p {
  text-align: center !important;
  max-width: 50rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  float: none !important;
  position: static !important;
}

/* ── Uniform vertical padding inside red banner sections ───────────
 * /corsi works because Webnode set "wnd-p-cc" on its section, which
 * triggers `.s-c { justify-content: center; align-items: center }`.
 * The other red banner pages (/automazione, /sviluppo-software,
 * /telecontrollo, /progettazione) don't have wnd-p-cc, so their
 * .s-c.s-fs flex column defaults to flex-start → top-aligned content.
 *
 * Fix: emulate wnd-p-cc but WITHOUT align-items:center — that one
 * shrinks every flex child to content width and breaks layouts where
 * children rely on full width (heading / outro). We keep
 * align-items: stretch (the default) so children fill the row, and
 * use justify-content: center for vertical centring only. Horizontal
 * centring of TEXT is handled per-child via text-align.
 */
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .b-sp,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .b-sp {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
}
/* Zero out padding on the outer wrappers so the only vertical
 * spacing inside the red banner comes from our own padding rule on
 * .s-c. Without this, Webnode's wnd-s-normal default sneaks an
 * extra ~3-4rem of top padding onto .s-w / .s-o on these pages
 * (/automazione, /sviluppo-software, /telecontrollo,
 * /progettazione), producing the visible top-vs-bottom asymmetry
 * the client reported. */
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block),
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block),
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) > .s-w,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) > .s-w,
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .s-o,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .s-o {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .s-c,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .s-c {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* align-items intentionally left at default (stretch) — children
   * keep full width so headings and paragraphs wrap normally. */
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
/* Tighten the gap between the claim heading and our outro paragraph
 * inside red banners. Webnode's default .b-text wrapper carries a
 * padding-bottom of ~0.875rem on its <p>/<h*> children, plus a
 * default block margin between siblings — together that produced a
 * visibly too-wide gap on /automazione, /sviluppo-software,
 * /telecontrollo, /progettazione (the user reported the heading sat
 * "too far" from the outro on those four pages, while /corsi looked
 * right because /corsi uses .s-hc-c instead of .b-text and has a
 * smaller native bottom margin).
 *
 * Reset every margin/padding on the heading + outro blocks and on
 * their inner h1/h2/h3/p so the only vertical separation between
 * heading and outro comes from a single explicit 0.5rem gap. */
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .ez-c > .b-text,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .ez-c > .b-text {
  margin: 0 !important;
  padding: 0 !important;
}
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .ez-c > .b-text > .b-c,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .ez-c > .b-text > .b-c {
  padding: 0 !important;
}
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .ez-c > .b-text :is(h1,h2,h3,h4,p,span),
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .ez-c > .b-text :is(h1,h2,h3,h4,p,span) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Single, small gap between heading block and outro block */
main > .sw > .sw-c > section.sc-acd:has(.artide-seo-outro-block) .ez-c > .b-text + .b-text,
main > .sw > .sw-c > section.s-hc-claim:has(.artide-seo-outro-block) .ez-c > .b-text + .b-text {
  margin-top: 0.5rem !important;
}
.artide-seo-outro__text a,
.artide-seo-outro__link {
  color: var(--ac-color, #cc1212);
  text-decoration: underline;
  font-weight: 600;
}
.artide-seo-outro__text a:hover,
.artide-seo-outro__link:hover {
  text-decoration: none;
}

/* Compact wrapper block: minimal margin so it sits TIGHT against the
 * CTA above. */
.artide-seo-outro-block {
  margin-top: 0.6rem !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.artide-seo-outro-block .b-c {
  margin: 0 !important;
  padding: 0 !important;
}

/* Last body section before the footer water image: ZERO bottom space
 * (per user request). Three sources of vertical space exist between
 * the closing copy and the water image; we kill all of them.
 *
 *   1. .s-c default 1.25–3.75rem bottom padding from wnd-s-normal
 *   2. trailing .b-sp Webnode spacer block(s) inside .ez-c
 *   3. trailing .b-hr-line horizontal rule blocks
 */
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image):not(.sc-acd):not(.s-hc-claim):not(.wnd-background-image) > .s-w > .s-c,
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image):not(.sc-acd):not(.s-hc-claim):not(.wnd-background-image) .s-c.s-fs {
  padding-bottom: 0 !important;
}
/* Kill every trailing decorative block at the end of that section's
 * editor zone (spacer or hr-line). We hide as many trailing ones as
 * exist (up to 4 levels back) so consecutive spacers all disappear. */
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-sp:last-child,
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-sp:nth-last-child(2),
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-sp:nth-last-child(3),
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-sp:nth-last-child(4),
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-hr-line:last-child,
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-hr-line:nth-last-child(2),
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image) .ez-c > .b-s.b-hr-line:last-child {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Also kill any margin on the section itself + on the water image
 * section's top so they touch directly. */
main > .sw > .sw-c > section.s-basic:has(+ section.wnd-background-image),
main > .sw > .sw-c > section.wnd-background-image {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 56.25em) {
  /* Mobile: nav typically becomes a single bar (~70px) */
  body:not(.is-home) main.l-m { padding-top: 100px; }
}


/* ── 3.6 Sticky-bottom footer ────────────────────────────────────── */
/* Make sure the copyright bar (footer.l-f) is always at the very
 * bottom of the page even when the page content is short. */
html, body { min-height: 100vh; }
.l-w {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.l-w > main.l-m { flex: 1 0 auto; }
.l-w > footer.l-f {
  flex-shrink: 0;
  margin-top: auto;
}


/* ── 4. Shared footer block (injected into every page) ───────────── */
/* The client's target: the water image (second-to-last section of the
 * page) and the address/columns section below should look like ONE
 * continuous scene — the columns sit ON TOP of the dark bottom half
 * of the water image, no visible seam between the two sections.
 *
 * Technique:
 *   - Keep the water-image section (.wnd-background-image) where it is
 *     and grow its height so the image extends further down.
 *   - Pull the address/columns section up into it with negative
 *     margin-top, remove its own dark background so the water shows
 *     through, and raise it on z-index.
 *   - Add a subtle dark gradient overlay on top of the water image
 *     where the columns sit, so the copy stays readable.
 */
.artide-footer-block { position: relative; }
.artide-footer-block .s-c { position: relative; z-index: 10; }

/* Target: the second-to-last section in sw-c that has a background
 * image (the "water" deco) and the very last one (address/columns). */
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) {
  position: relative;
  min-height: 62vh;
  z-index: 1;
}
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg,
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l {
  min-height: 62vh;
}
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg img,
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Bottom dark vignette over the image so the columns underneath
 * remain readable even when they overlap a bright region. */
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Address/columns section: no dark bg of its own, pull up to overlap
 * the water image, raise above the image. The dark fill behind it
 * (for the area below the image) is provided by .l-w background. */
main > .sw > .sw-c > section.s-basic:last-of-type {
  position: relative;
  z-index: 3;
  margin-top: -38vh;
  background: transparent !important;
  background-color: transparent !important;
}
main > .sw > .sw-c > section.s-basic:last-of-type .s-bg,
main > .sw > .sw-c > section.s-basic:last-of-type .s-bg-l {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make sure the column content sits above the water image's vignette */
main > .sw > .sw-c > section.s-basic:last-of-type .s-c,
main > .sw > .sw-c > section.s-basic:last-of-type .s-w {
  position: relative;
  z-index: 4;
}

/* Wrapper background is INTENTIONALLY left transparent (= browser
 * default white, which the underlying page sections cover where they
 * have their own bg). The transparent footer water-image
 * (FOOTER_onda_003.webp) lets the wrapper colour show through wherever
 * its alpha is 0 — combined with no explicit .l-w bg, the area below
 * the waterline simply continues the page's natural background.
 *
 * Only the very last <footer class="l-f"> copyright strip carries an
 * explicit dark colour to delimit the legal/credit area from the
 * page content above. */
/* (no .l-w background-color rule on purpose) */

/* ── 4.1 Hero-image bleed (diffuse-bg pages only) ────────────────
 * Discriminator: a page qualifies only if it has TWO OR MORE
 * <section class="wnd-background-image"> elements — the first is
 * the real hero photo (bleeds to body bg), the last is the footer
 * wave area. Pages with only ONE wnd-background-image section have
 * just the wave (no hero photo) and are left untouched on a default
 * white body. Pages with zero are redirect stubs.
 *
 * As of writing: 5 pages qualify — /automazione, /corsi,
 * /progettazione, /sviluppo-software, /telecontrollo.
 *
 * Per page, the renderer/patcher injects:
 *   1. class "has-hero-bg" on <body>
 *   2. an inline <style> that sets the per-page composite
 *      background-image: a 60% black overlay gradient layered ABOVE
 *      the actual hero photo URL, so the result mirrors Webnode's
 *      .overlay-black filter without needing a pseudo-element.
 *
 * Position is `bottom center` to match Webnode's bgpos-bottom-center
 * helper used on all of these heroes. `attachment: fixed` anchors
 * the bg to the viewport so `cover` sizes against the viewport
 * instead of the (much taller) document. Note: iOS Safari may demote
 * fixed+cover to scroll-like behaviour. */
body.has-hero-bg {
  background-color: #0d0d10;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
}

/* Wave section: nuke its own dark fill so the body bg shows
 * everywhere except where the wave-image's own pixels are opaque. */
body.has-hero-bg main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2),
body.has-hero-bg main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg,
body.has-hero-bg main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l {
  background-color: transparent !important;
}

/* Columns section: redundant safety — already transparent in 3.6
 * but enforce here too since the dark page bg behind them is the
 * whole point of this block. */
body.has-hero-bg main > .sw > .sw-c > section.s-basic:last-of-type,
body.has-hero-bg main > .sw > .sw-c > section.s-basic:last-of-type .s-bg,
body.has-hero-bg main > .sw > .sw-c > section.s-basic:last-of-type .s-bg-l {
  background-color: transparent !important;
}

/* ── 4.2 Universal: wave .s-bg #272727 → white ───────────────────
 * Webnode's `.sc-m .s-bg` pins #272727 on every section with the
 * `sc-m` (medium-dark) scheme. The footer wave section is sc-m, so
 * its .s-bg fills with #272727, which leaks below the wave-image's
 * transparent bottom half as a grey band. Override to white so on
 * traditional white-bg pages the wave appears to "splash" against
 * the page itself. On has-hero-bg / has-hero-fixed pages a more
 * specific selector below restores transparency. */
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg,
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l {
  background-color: #ffffff !important;
}

/* ── 4.3 has-hero-fixed (Option B test) ──────────────────────────
 * Alternative to has-hero-bg: instead of duplicating the hero photo
 * onto body, pin Webnode's existing first wnd-background-image
 * `.s-bg-l` to the viewport. Pros: pixel-identical centring/scaling
 * to what Webnode already renders inside the section (object-fit
 * cover + bgpos-bottom-center) — no second crop to align with the
 * first. Cons: parallax/blur classes may need taming.
 *
 * Currently a TEST: only /sviluppo-software carries the body class.
 * If it works visually we promote the other 4 diffuse-bg pages.
 *
 * Note 1: target selector is `section.wnd-background-image:nth-last-of-type(2)`,
 * matching the second-to-last <section> in the page (the hero).
 * Webnode's last <section> is the wave/columns footer block, so the
 * hero is consistently the penultimate section on every diffuse-bg
 * page (sviluppo-software, automazione, corsi, progettazione,
 * telecontrollo). Using :nth-of-type(2) breaks on pages with
 * additional wnd-background-image sections between header and hero —
 * the rule matches an earlier (wrong) section while the
 * background-transparent rule below correctly targets the real hero,
 * so the bg shows through but is never pinned.
 *
 * Note 2: Webnode's `.bgatt-parallax:not(.parallax) picture img`
 * rule sets `display:none` on the fallback <img> until a JS hook
 * adds `.parallax`. With our fixed wrapper the JS hook does not
 * trigger (the section is yanked out of normal flow), so we
 * re-enable the <img> manually. */
body.has-hero-fixed main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  /* background-image is set per-page via inline <style> next to the
   * artide-hero-bg block — keeps URL extraction in one place. */
}

/* Hide the original <picture> on the fixed .s-bg-l: Webnode renders the
 * hero image either via the picture/img (with parallax JS) or via a
 * background-image set by JS. Both interact badly with our fixed wrapper.
 * We bypass entirely by using the same hero URL as a CSS background
 * applied directly to the .s-bg-l. The <picture> below would otherwise
 * stack on top of our background and re-create the parallax bug. */
body.has-hero-fixed main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l picture {
  display: none !important;
}

/* Wave + columns transparent so the fixed bg shows through */
body.has-hero-fixed main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg,
body.has-hero-fixed main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) .s-bg-l,
body.has-hero-fixed main > .sw > .sw-c > section.s-basic:last-of-type .s-bg,
body.has-hero-fixed main > .sw > .sw-c > section.s-basic:last-of-type .s-bg-l {
  background-color: transparent !important;
}

/* ── 4.4 has-hero-fade ───────────────────────────────────────────
 * Test approach (alternative to has-hero-fixed/has-hero-bg). Stack a
 * white linear-gradient on top of each Webnode bg-image section so
 * the photo blends into white toward its bottom edge. The gradient
 * is painted by a `::after` pseudo-element absolutely positioned
 * inside `.s-bg-l` (which Webnode already renders with
 * `position: absolute`, so it forms a containing block for its
 * descendants). The top 60% of the section keeps the photo
 * untouched; the bottom 40% fades into solid white, producing a
 * soft "image dissolves into white" transition into whatever sits
 * below.
 *
 * Why an overlay and not `mask-image`: a mask makes pixels
 * transparent, revealing whatever is behind `.s-bg-l` (which on
 * Webnode pages may not be white — there can be a dark `.s-bg`
 * wrapper, an `overlay-black` layer, or the section's own bg). An
 * overlay paints actual white pixels on top, so the visual is
 * identical regardless of what sits behind.
 *
 * Currently scoped via body class `has-hero-fade`, present only on
 * /sviluppo-software for the test. */
body.has-hero-fade main > .sw > .sw-c > section.wnd-background-image .s-bg-l::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, #ffffff 100%);
  pointer-events: none;
  z-index: 5;
}

/* ── 4.5 Auto breadcrumb above H1 ────────────────────────────────
 * Injected by injectBreadcrumb() in artide-overrides.js, which reads
 * the current page name and parent category straight from the
 * Webnode nav (.wnd-active leaf + first .wnd-with-submenu ancestor)
 * and inserts a `.artide-breadcrumb` element directly before each
 * page's H1. Always uppercase, always above. Replaces the
 * inconsistent manual <h3>SERVIZI→...</h3> blocks that some Webnode
 * pages embed in mixed positions (before or after the H1, with
 * different markup and inline styles per page). */
.artide-breadcrumb {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--ac-color, #cc1212);
  margin: 0 0 0.6em 0;
  text-transform: uppercase;
}

/* ── Force unified icon colour across browsers ───────────────────
 * Webnode renders the small column icons (numero verde, orologio,
 * documento, badge, scudo, ecc.) via <embed type="image/svg+xml"> +
 * an inline JS hook (checkAndChangeSvgColor) that re-paints them.
 * Chrome runs the hook OK and they appear in the brand red. Firefox
 * occasionally fails to re-paint, leaving the icon in its source
 * gold colour. Browsers also handle <embed> SVG colouring
 * differently for cross-origin SVG.
 *
 * Bullet-proof fallback: apply a CSS colour filter that converts the
 * source pixel into #cc1212 regardless of the SVG's own fill. The
 * filter chain was generated from black → #cc1212. Works on every
 * modern browser and doesn't depend on the JS hook running. */
.b-img.wnd-type-icon embed[type="image/svg+xml"],
.b-img.wnd-type-icon img[src$=".svg"],
.b-img.wnd-type-icon svg {
  filter: brightness(0) saturate(100%) invert(11%) sepia(96%) saturate(7124%)
          hue-rotate(353deg) brightness(99%) contrast(118%) !important;
}
footer.l-f {
  background: #0e0e10 !important;
  position: relative;
  z-index: 5;
}

/* Footer colour swap — per client request:
 * In the footer area (two injected footer sections + <footer class="l-f">)
 * the elements that were PREVIOUSLY RED (#cc1212 / --ac-color) must now
 * render in GOLD #ffba1b. All other elements (white address/phone text,
 * black body copy, etc.) must be left untouched.
 */
footer.l-f,
main > .sw > .sw-c > section.s-basic:nth-last-of-type(-n+2):not(:first-of-type) {
  --ac-color: var(--artide-gold) !important;
  --ac-color-h: 40;
  --ac-color-s: 100%;
  --ac-color-l: 55%;
  --ac-color-rgb: 255, 186, 27;
}

/* Inline styles that hard-code the old red hex still need a direct
 * override — CSS variables don't apply when colour is written literally. */
footer.l-f [style*="#cc1212" i],
footer.l-f [style*="#f25151" i],
main > .sw > .sw-c > section.s-basic:nth-last-of-type(-n+2):not(:first-of-type) [style*="#cc1212" i],
main > .sw > .sw-c > section.s-basic:nth-last-of-type(-n+2):not(:first-of-type) [style*="#f25151" i] {
  color: var(--artide-gold) !important;
}


/* ── 5. Preview banner tweaks ────────────────────────────────────── */
/* Preview banner lives pinned to bottom-right so it doesn't affect
 * header layout. No more body padding-top, no more header offset. */
#preview-banner { backdrop-filter: blur(6px); }

/* Hide the "Artide srl © 2022 | … | P.IVA / CF: …" copyright line
 * from the footer (client request). The rest of the legal block
 * (copyright year + privacy/cookie links) stays. */
footer.l-f .s-f-cr { display: none !important; }


/* ── 5.x Traditional dark footer (replaces water-image hero) ──────
 * Per client decision: drop the water/wave image hero above the
 * footer columns — too complex to maintain consistently across
 * pages with diffuse-bg backgrounds (sviluppo-software,
 * telecontrollo, automazione, progettazione, corsi). Replace with
 * a flat dark background that spans the footer columns section
 * AND the <footer class="l-f"> copyright strip below.
 *
 * Customisation hooks (CSS variables on :root): override globally
 * to change the whole site's footer at once.
 *   --footer-bg-color  default #0e0e10 (near-black)
 *   --footer-bg-image  default `none`. Set to e.g.
 *                      `url('/artide.it/assets/img/footer-bg.jpg')`
 *                      to use a background image instead of the
 *                      solid colour. The image will be sized
 *                      `cover`, positioned centre.
 */
:root {
  --footer-bg-color: #0e0e10;
  --footer-bg-image: none;
}

/* 1. Hide the legacy water-hero section (purely decorative — no
 *    text content on any page). It's the second-to-last <section>
 *    in main when present (only on pages that had a water image). */
main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(2) {
  display: none !important;
}

/* 2. Footer columns section (address + Servizi + Prodotti +
 *    Site Link + Ultime News): drop the legacy negative pull-up,
 *    apply the new dark fill + optional image. Leave a generous
 *    gap above (margin-top) so the dark band visibly separates
 *    from the page body content above. */
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide {
  margin-top: 7rem !important;  /* ~112px gap above the dark band */
  background-color: var(--footer-bg-color) !important;
  background-image: var(--footer-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide .s-bg,
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide .s-bg-l {
  background: transparent !important;
}
/* Zero out outer-wrapper padding/margin so the only vertical
 * spacing inside the footer band comes from the explicit padding
 * rule on .s-c — same trick used for the red claim banner. Without
 * this, Webnode's wnd-s-normal default sneaks asymmetric padding
 * onto .s-w / .s-o and the columns sit visibly off-centre. */
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide > .s-w,
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide .s-o {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The dark band reads visually as a single block but is actually
 * two stacked sections: the columns section (this one) + the
 * <footer class="l-f"> copyright strip. To make the visible
 * top/bottom padding symmetric (i.e. distance from dark-top edge
 * to "Artide srl" == distance from "Privacy Policy" to dark-bottom
 * edge), give each section the OUTER padding only on its outer
 * edge: columns gets padding-top, copyright strip gets padding-
 * bottom. Inner edges meet with a smaller, equal padding so the
 * mid-band separation between columns content and copyright text
 * stays comfortable but doesn't dominate. */
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide .s-c {
  padding-top: 3rem !important;
  padding-bottom: 1.5rem !important;
}
/* Remove the default <a> underline from the column-header links
 * (Artide srl / Servizi / Prodotti / Site Link / Ultime News)
 * inside the footer-columns section. They're identifiable by the
 * bold styling: either inline `style="font-weight: bold;"` (Servizi
 * + Prodotti) or wrapping inside `<strong>` (Artide srl, Site Link,
 * Ultime News). The regular sub-links keep their default underline. */
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide a[style*="font-weight: bold"],
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide strong > a,
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide a > strong,
main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide a:has(strong) {
  text-decoration: none !important;
}
footer.l-f .s-w,
footer.l-f .s-o {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
footer.l-f .s-c {
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

/* 4. Diffuse-bg pages (sviluppo-software, telecontrollo, automazione,
 *    progettazione, corsi) carry multiple wnd-background-image
 *    sections that paint dark imagery edge-to-edge through the page.
 *    On these pages the 7rem gap above the dark footer band would
 *    expose the white default body bg → a jarring white "interference"
 *    strip between the dark page content and the dark footer.
 *
 *    Detect these pages via :has() (any body whose <main> contains
 *    two or more sibling wnd-background-image sections) and tint
 *    the body bg to the footer dark colour. On white-bg pages
 *    (single or zero wnd-background-image sections) the rule
 *    doesn't match, so the gap above the footer stays white as
 *    intended for visual separation.
 *
 *    Also reset background-image to none. These pages still carry
 *    the legacy `has-hero-bg` body class + an inline <style> in
 *    the <head> that sets a body background-image (the old "diffuse
 *    hero" effect: a 60% black overlay layered above the section's
 *    photo, painted on body and shown through gaps). With the new
 *    flat dark footer that effect was unwanted: the body image was
 *    visible in the 7rem gap above the footer WITHOUT the section's
 *    blur/overlay filter, producing a visible "raw image" artefact
 *    next to the same image rendered with filters in the section
 *    above. Resetting background-image to none keeps only the flat
 *    dark colour. */
body:has(main > .sw > .sw-c > section.wnd-background-image ~ section.wnd-background-image) {
  /* Override BOTH bg-image AND bg-color from the legacy
   * `body.has-hero-bg` rule (still set on these pages). Without
   * the explicit bg-color reset, body.has-hero-bg's
   * `background-color: #0d0d10` was winning and the body stayed
   * dark — which made the 7rem gap above the dark footer band
   * blend with the band, producing the "no visible gap" result
   * the client reported. Force white so the gap renders as a
   * clean separator on diffuse-bg pages too, matching white-bg
   * pages. */
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Belt-and-braces override: even if the :has() rule above doesn't
 * match for any reason (older/odd DOM, JS wrapping, etc.), the
 * body classes themselves are deterministic — has-hero-bg and
 * has-hero-fixed are still present on the deployed gh-pages HTML
 * for the diffuse-bg pages. Override their bg directly so the body
 * is reliably white on every page that carries either class. */
body.has-hero-bg,
body.has-hero-fixed,
body.has-hero-fade {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* On diffuse-bg pages, the client wants the 7rem gap above the
 * dark footer band to show the SAME background imagery as the
 * section above it (with the section's blur + overlay filters)
 * rather than a flat white strip. Move the 7rem of vertical space
 * INTO the section right above the (hidden) water-hero by giving
 * its .s-c an extra padding-bottom; the section's bg image (already
 * filtered by the existing wnd-background-image rules) fills that
 * area naturally. Then drop the margin-top above the dark footer
 * band on these pages so we don't double-up the gap. */
body.has-hero-bg main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(3) .s-c,
body.has-hero-fixed main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(3) .s-c,
body.has-hero-fade main > .sw > .sw-c > section.wnd-background-image:nth-last-of-type(3) .s-c {
  padding-bottom: 7rem !important;
}
body.has-hero-bg main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide,
body.has-hero-fixed main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide,
body.has-hero-fade main > .sw > .sw-c > section.s-basic.sc-cd.sc-a.wnd-w-wide {
  margin-top: 0 !important;
}

/* 3. Copyright strip below the columns: same dark fill so the
 *    whole footer area reads as one continuous block. */
footer.l-f {
  background-color: var(--footer-bg-color) !important;
  background-image: var(--footer-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* ── 6. Polish ───────────────────────────────────────────────────── */
a { transition: color 0.15s ease, opacity 0.15s ease; }
button { font-family: inherit; }


/* ── 7. Bento grid (categoria prodotti) ──────────────────────────
 * Asymmetric tile grid for /prodotti/ category navigation, with
 * cinematic hover effects:
 *   - Card lifts 4px + soft shadow
 *   - Bg image cover, scales 1.08 on hover (slow ease-out)
 *   - Linear-gradient overlay lightens to reveal more image
 *   - Title slides up; subtitle fades in from collapsed height
 *   - Red CTA "Scopri →" fades up with arrow nudge
 *
 * Layout (12-col grid, desktop):
 *   Row 1: Casa dell'Acqua + Erogatore d'Acqua (2× span-6, 16:9)
 *   Row 2: Totem + Tessere + Pur.Acqua + Pur.Aria (4× span-3)
 *   Row 3: Compattatori + Trituratori (2× span-6, 21:9 panoramic)
 *
 * Row 1 vs Row 3 both use span-6 but with different aspect ratios:
 * the first two span-6 cards (hero) use 16:9 to give them more
 * vertical presence; the bottom two span-6 (peripheral products)
 * use 21:9 for a flatter "banner strip" feel.
 *
 * Mobile (≤920px): collapses to 2-col grid; the row-1 hero cards
 * each take the full width (span 2). */
.artide-bento-wrap {
  margin: 0 auto;
  padding: 0;
}
.artide-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 1.5rem;
}
.artide-bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none !important;
  background: #1a1a1a;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
}
/* Cursor: native pointer for <a> cards (Casa dell'Acqua only),
 * default for <div class="artide-bento-card is-static"> cards
 * (the other 7 categories — clickable detail pages will be added
 * later when their dedicated schede are produced). */
a.artide-bento-card { cursor: pointer; }
.artide-bento-card.is-static { cursor: default; }
.artide-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.artide-bento-card.span-6 { grid-column: span 6; aspect-ratio: 21 / 9; }
.artide-bento-card.span-3 { grid-column: span 3; aspect-ratio: 1 / 1; }
/* First two span-6 cards (row 1 hero) use 16:9 so they're taller
 * and feel more like product hero cards. */
.artide-bento-card.span-6:nth-child(-n+2) { aspect-ratio: 16 / 9; }

@media (max-width: 920px) {
  .artide-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    padding: 0 1rem;
  }
  .artide-bento-card.span-6,
  .artide-bento-card.span-6:nth-child(-n+2) {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
  .artide-bento-card.span-3 {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
}

.artide-bento-card picture,
.artide-bento-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.artide-bento-card img {
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.artide-bento-card:hover img {
  transform: scale(1.08);
}

.artide-bento-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.40) 45%,
    rgba(0, 0, 0, 0.05) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}
.artide-bento-card:hover .artide-bento-grad {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.20) 60%,
    rgba(0, 0, 0, 0.00) 100%);
}

.artide-bento-content {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 2;
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.artide-bento-card:hover .artide-bento-content {
  transform: translateY(-0.4rem);
}
.artide-bento-card.span-3 .artide-bento-content {
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
}

.artide-bento-title {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.artide-bento-card.span-6 .artide-bento-title {
  font-size: 1.95rem;
}
.artide-bento-card.span-3 .artide-bento-title {
  font-size: 1.1rem;
  line-height: 1.2;
}

.artide-bento-subtitle {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}
.artide-bento-card.span-3 .artide-bento-subtitle {
  font-size: 0.78rem;
}
.artide-bento-card:hover .artide-bento-subtitle {
  opacity: 1;
  max-height: 6rem;
  margin-top: 0.4rem;
}

.artide-bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-color, #cc1212);
  margin-top: 0;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.4s ease 0.05s,
              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
              margin-top 0.4s ease;
}
.artide-bento-card:hover .artide-bento-cta {
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.55rem;
}
.artide-bento-cta::after {
  content: "\2192";
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.artide-bento-card:hover .artide-bento-cta::after {
  transform: translateX(0.35rem);
}