/* =====================================================================
   ESL SRL – CSS del sito (spostato dal "CSS personalizzato" di Elementor il 22/10/2026)
   Modifica: Aspetto → Editor file del tema → ESL – Hello Elementor Child → assets/css/esl.css
   ===================================================================== */

/* =====================================================================
   ESL SRL – stili condivisi Homepage A / B
   (Impostazioni sito → CSS personalizzato). Solo ciò che i controlli
   nativi di Elementor non coprono: livelli decorativi, testo in gradiente,
   icone SVG a contorno, pannello del menu mobile.
   ===================================================================== */

/* ---------- base ---------- */
.esl .e-con.e-grid, .esl .e-con.e-grid > .e-con-inner { align-content: stretch; }
.esl .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.esl .elementor-heading-title { margin: 0; }
.esl-layer, .esl-hero-ring, .esl-hero-ruler, .esl-b-blob, .esl-b-ring, .esl-feature-ring,
.esl-footer-stripe { position: absolute !important; pointer-events: none; }
.esl-layer { inset: 0; width: 100% !important; height: 100%; }
.esl-hero-content, .esl-feature-body > *:not(.esl-feature-ring) { position: relative; }

/* icone SVG a contorno (stroke = currentColor) */
.esl-btn .elementor-button-icon svg, .esl-link .elementor-button-icon svg, .esl-form .elementor-button-icon svg { width: 16px; height: 16px; fill: currentColor; }
.esl-btn .elementor-button-icon { display: inline-flex; }

/* pulsante primario: leggero sollevamento come nel design */
.esl-btn-primary .elementor-button { transition: background-color .18s, border-color .18s, transform .18s; }
.esl-btn-primary:not(.gsap-fill-horizontal):not(.gsap-fill-vertical) .elementor-button:hover { transform: translateY(-1px); }
.esl-btn .elementor-button:focus-visible { outline: 2px solid #8EC5FF; outline-offset: 3px; }

/* ---------- header ---------- */
.esl-header-right { width: auto !important; flex-shrink: 0; }
.esl-logo, .esl-nav { flex-shrink: 0; }
.esl-header { left: 0; right: 0; top: 0; }
.esl-logo img { width: auto !important; }
.esl-nav .elementor-nav-menu--main .esl-menu-mobile { display: none !important; }
.esl-nav .elementor-menu-toggle { width: 44px; height: 44px; border-style: solid; border-color: rgba(255,255,255,.3); padding: 0; place-items: center; }
/* il pulsante del menu compare solo dove il menu diventa a tendina (≤1024px) */
@media (max-width: 1024px) { .esl-nav .elementor-menu-toggle { display: grid; } }
.esl-nav-light .elementor-menu-toggle { border-color: rgba(22,36,86,.2); }
.esl-nav .elementor-nav-menu--dropdown { background: transparent !important; padding: 0 16px; box-shadow: none; border: 0; }
.esl-nav .elementor-nav-menu--dropdown > .elementor-nav-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 24px;
  background: #fff; border-top: 1px solid #DBEAFE; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.esl-nav .elementor-nav-menu--dropdown a { justify-content: flex-start; }
.esl-nav .elementor-nav-menu--dropdown .esl-menu-cta > a { justify-content: center; background: #295FDC !important; color: #fff !important; border-radius: 8px; padding: 16px 23px !important; font-size: 14.4px; font-weight: 700; }
.esl-nav .elementor-nav-menu--dropdown .esl-menu-phone { position: relative; }
.esl-nav .elementor-nav-menu--dropdown .esl-menu-phone > a { padding-left: 24px !important; }
.esl-nav .elementor-nav-menu--dropdown .esl-menu-phone::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #155DFC; z-index: 1; pointer-events: none;
  -webkit-mask: url(/wp-content/uploads/2026/10/esl-icon-phone-solid.svg) center / contain no-repeat; mask: url(/wp-content/uploads/2026/10/esl-icon-phone-solid.svg) center / contain no-repeat; }

/* ---------- hero A ---------- */
.esl-hero-media { opacity: .65; }
.esl-hero-gradient { background: linear-gradient(90deg, rgba(7,38,111,.98) 0%, rgba(7,38,111,.82) 46%, rgba(7,38,111,.1) 100%); }
.esl-hero-ring { border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }
.esl-hero-ring-1 { width: 680px !important; height: 680px; right: -120px; bottom: -200px; }
.esl-hero-ring-2 { width: 480px !important; height: 480px; right: -20px; bottom: -100px; border-color: rgba(255,255,255,.15); }
.esl-hero-ruler { left: 0; right: 0; bottom: 0; height: 8px; width: 100% !important; opacity: .6;
  background: repeating-linear-gradient(90deg, #fff 0, #fff 2px, transparent 2px, transparent 24px); }
.esl-hero-a .esl-hl { color: #8EC5FF; }
@media (max-width: 639px) {
  .esl-hero-checks .elementor-icon-list-items { flex-direction: column; align-items: flex-start; gap: 12px; }
  .esl-hero-checks .elementor-icon-list-item { margin: 0 !important; }
}

/* ---------- hero B ---------- */
.esl-tech-grid { opacity: .45;
  background-image: linear-gradient(rgba(41,95,220,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(41,95,220,.08) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: linear-gradient(to right, #000, transparent 70%); mask-image: linear-gradient(to right, #000, transparent 70%); }
.esl-gradient-text { background: linear-gradient(100deg, #07266F, #295FDC 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.esl-badge { border: 1px solid #BEDBFF; background: #fff; border-radius: 8px; padding: 8px 16px; }
.esl-badge .elementor-icon-list-icon i { border-radius: 50%; box-shadow: 0 0 0 5px rgba(41,95,220,.12); color: #155DFC !important; }
.esl-stat-mid { border-left: 1px solid rgba(22,36,86,.1); border-right: 1px solid rgba(22,36,86,.1); padding: 0 16px; }
.esl-stat-last { padding-left: 16px; }
.esl-hero-visual { position: relative; }
.esl-b-blob { left: 10%; top: 5%; width: 80% !important; height: 80%; border-radius: 50%; background: rgba(21,93,252,.12); filter: blur(64px); }
.esl-b-ring { border-radius: 50%; }
.esl-b-ring-1 { inset: 7%; width: auto !important; border: 1px solid rgba(142,197,255,.5); }
.esl-b-ring-2 { inset: 16%; width: auto !important; border: 1px dashed rgba(142,197,255,.7); }
.esl-b-object { position: absolute !important; inset: 0; width: 100% !important; height: 100%; }
.esl-b-object .elementor-widget-container, .esl-b-object img { width: 100%; height: 100% !important; object-fit: contain; }
.esl-b-object img { filter: drop-shadow(0 35px 35px rgba(7,38,111,.2)); }
.esl-glass-card { position: absolute !important; right: 0; bottom: 7%; width: 288px !important; padding: 24px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.7); border-left: 4px solid #155DFC; background: rgba(255,255,255,.14);}
 
@media (max-width: 639px) { .esl-glass-card { width: 256px !important; padding: 20px; } }

  .esl-glass-card-hero-c {   padding: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.3); border-left: 2px solid #155DFC; background: rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(7,38,111,.12); -webkit-backdrop-filter: blur(5px) saturate(140%); backdrop-filter: blur(5px) saturate(140%); }

/* ---------- marchi ---------- */
.esl-brand-marquee { flex: 1 1 auto; min-width: 0; width: 100%; }
.esl-brand-marquee .tm-marquee__sep { line-height: 1; }
.esl-brands .esl-brand-track .elementor-icon-list-item { white-space: nowrap; }

/* ---------- chi siamo ---------- */
.esl-claims { align-content: stretch !important; }
.esl-claim-a { transition: background-color .15s; }
.esl-claim-a:hover { background-color: #EFF6FF !important; }
.esl-claim .elementor-icon { border-radius: 8px; }

/* ---------- servizi ---------- */
.esl-svc-fig { position: relative; }
.esl-fill-img { position: absolute !important; inset: 0; width: 100% !important; height: 100%; }
.esl-fill-img .elementor-widget-container, .esl-fill-img img { width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; }
.esl-svc-card .esl-fill-img img { transition: transform .5s; }
.esl-svc-card:hover .esl-fill-img img { transform: scale(1.05); }
.esl-link .elementor-button-icon svg { width: 16px; height: 16px; }
.esl-link .elementor-button-icon { transition: transform .15s; }
.esl-svc-card:hover .esl-link .elementor-button-icon { transform: translateX(4px); }
@media (min-width: 1025px) { .esl-svc-intro { justify-self: end; margin-left: auto; } }

/* ---------- priorità ---------- */
.esl-feature-media { position: relative; }
.esl-feature-shade { background: linear-gradient(to top, rgba(22,36,86,.7), transparent); }
.esl-field-badge { position: absolute !important; left: 24px; bottom: 24px; width: auto !important; padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(22,36,86,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.esl-badge-title { display: block; color: #8EC5FF; font-weight: 700; }
.esl-feature-body { position: relative; }
.esl-feature-ring { right: -112px; top: 40px; width: 320px !important; height: 320px; border-radius: 50%; border: 1px solid rgba(81,162,255,.2); }

/* ---------- contatti ---------- */
.esl-contact-item .elementor-icon-box-description { word-break: break-all; }
.esl-form .elementor-field-group { margin-bottom: 0; }
.esl-form .elementor-field-textual { padding: 13.6px 14.4px; min-height: 0; }
.esl-form textarea.elementor-field-textual { min-height: 112px; resize: vertical; }
.esl-form .elementor-field-textual:focus { border-color: #295FDC !important; box-shadow: 0 0 0 3px rgba(41,95,220,.12); }
.esl-form .elementor-field-type-acceptance label { color: #62748E; font-weight: 400; font-size: 12px; }
.esl-form input[type=checkbox] { accent-color: #155DFC; }

/* ---------- footer ---------- */
.esl-footer-stripe { left: 0; right: 0; top: 0; height: 4px; width: 100% !important;
  background: repeating-linear-gradient(90deg, #295FDC 0, #295FDC 3px, transparent 3px, transparent 26px); }
.esl-footer .esl-il .elementor-icon-list-icon { display: none; }
.esl-footer-privacy a { color: inherit; }
.esl-footer .elementor-widget-image img { width: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .esl * { transition: none !important; }
}

/* ---------- marchi: equilibrio visivo dei loghi (stessa "massa" percepita) ---------- */
.esl-brand-marquee .tm-marquee__logo[aria-label="Heidenhain"], .esl-brand-marquee .tm-marquee__logo:has(img[alt="Heidenhain"]) { height: calc(var(--tm-mq-logo-h, 24px) * .66); }
.esl-brand-marquee .tm-marquee__logo[aria-label="Fagor"], .esl-brand-marquee .tm-marquee__logo:has(img[alt="Fagor"]) { height: calc(var(--tm-mq-logo-h, 24px) * 1.05); }
.esl-brand-marquee .tm-marquee__logo[aria-label="Mitutoyo"], .esl-brand-marquee .tm-marquee__logo:has(img[alt="Mitutoyo"]) { height: calc(var(--tm-mq-logo-h, 24px) * .95); }


/* ---------- Versione B: header (16/10) ---------- */
.esl-nav-underline .elementor-nav-menu--main .elementor-item { position: relative; }
.esl-nav-underline .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; opacity: 1;
  background: var(--e-global-color-eslbrnd, #295FDC); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.esl-nav-underline .elementor-nav-menu--main .elementor-item:hover::after,
.esl-nav-underline .elementor-nav-menu--main .elementor-item:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.esl-header-phone-b a { display: inline-flex; align-items: center; }

/* ---------- Versione B: carousel servizi (16/10) ---------- */
.esl-svc-carousel { padding-left: max(32px, calc((100% - 1280px) / 2)) !important; padding-right: 0 !important; }
@media (max-width: 767px) { .esl-svc-carousel { padding-left: 20px !important; padding-right: 20px !important; } }
.esl-services .tm-carousel__nav { padding: 0 max(32px, calc((100% - 1280px) / 2)); }
@media (max-width: 767px) { .esl-services .tm-carousel__nav { padding: 0 20px; } }
/* card servizi B: anteprima 3:2 (4:3 tagliato un po' in altezza) */
.esl-svc-card-b .esl-svc-fig { aspect-ratio: 3 / 2; min-height: 0 !important; height: auto; }
@media (prefers-reduced-motion: reduce) { .esl-nav-underline .elementor-item::after { transition: none; } }
/* riserva senza plugin/JS: card in griglia flessibile */
.esl-svc-carousel:not(.tm-carousel) { flex-wrap: wrap !important; padding-right: 32px !important; }
.esl-svc-carousel:not(.tm-carousel) > .e-con { width: calc((100% - 60px) / 4) !important; }
@media (max-width: 1024px) { .esl-svc-carousel:not(.tm-carousel) > .e-con { width: calc((100% - 20px) / 2) !important; } }
@media (max-width: 767px) { .esl-svc-carousel:not(.tm-carousel) { padding-right: 20px !important; } .esl-svc-carousel:not(.tm-carousel) > .e-con { width: 100% !important; } }
/* header B: pulsanti telefono e Contattaci perfettamente allineati */
.esl-header-b .esl-cta .elementor-button { display: flex; align-items: center; }

/* frecce carousel: niente colori del tema al tocco */
.tm-carousel__nav .tm-carousel__arrow, .tm-carousel__nav .tm-carousel__arrow:focus, .tm-carousel__nav .tm-carousel__arrow:active { background: transparent; color: var(--tm-carousel-accent, #295FDC); border-color: var(--tm-carousel-accent, #295FDC); }
@media (hover: hover) { .tm-carousel__nav .tm-carousel__arrow:hover:not(:disabled) { background: var(--tm-carousel-accent, #295FDC); color: #fff; } }
.tm-carousel__nav .tm-carousel__arrow:focus-visible { background: var(--tm-carousel-accent, #295FDC); color: #fff; }


/* Image reveal (TM Animations) su immagini "a riempimento": la maschera occupa tutto il riquadro */
.esl-fill-img .tm-img-mask { display: block !important; width: 100% !important; height: 100% !important; }