/* Fixed-size service cards with expandable description */
.svc-card {
  position: relative;
}
.svc-card .svc-desc {
  max-height: 84px; /* ~4-5 lines depending on text size */
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
}
/* soft fade at bottom when clamped */
.svc-card .svc-desc.clamped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}
/* dark mode fallback if needed */
body.bg-primary-dark .svc-card .svc-desc.clamped::after {
  background: linear-gradient(to bottom, rgba(18,18,18,0), rgba(18,18,18,1));
}

/* Hover expansion on desktop */
@media (min-width: 1024px) {
  .svc-card:hover .svc-desc {
    max-height: none;
  }
  .svc-card:hover .svc-desc.clamped::after { display: none; }
}

/* Expanded state (e.g., mobile after tapping three dots) */
.svc-card.expanded .svc-desc {
  max-height: none;
}
.svc-card.expanded .svc-desc.clamped::after { display: none; }

/* Three-dots button styling (uses existing Tailwind classes in markup) */
.svc-more-btn { cursor: pointer; }
/* Basic theme tokens to replace Tailwind custom classes when using CDN
   These mappings restore header readability and dropdown styling */

:root {
  --primary-light: #0FA958;
  --primary-dark: #171717;
  --secondary-white: #FFFFFF;
  --secondary-light: #BDBDBD;
  --secondary-dark: #2D2D2D;
}

/* Center container like typical layouts */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Text colors */
/* Default mappings */
.text-primary-light { color: var(--primary-light) !important; }
.text-primary-dark { color: var(--primary-dark) !important; }
.text-secondary-white { color: var(--secondary-white) !important; }
.text-secondary-light { color: var(--secondary-light) !important; }
.text-secondary-dark { color: var(--secondary-dark) !important; }

/* Background colors */
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-primary-dark { background-color: var(--primary-dark) !important; }
.bg-secondary-white { background-color: var(--secondary-white) !important; }

/* Borders */
.border-primary-light { border-color: var(--primary-light) !important; }
.border-secondary-white { border-color: var(--secondary-white) !important; }

/* Header dropdown fix */
#siteHeader .group:hover .group-hover\:text-primary-light { color: var(--primary-light) !important; }
#siteHeader .group:hover .group-hover\:bg-secondary-white { background-color: var(--secondary-white) !important; }
#siteHeader .group:hover .group-hover\:bg-primary-dark { background-color: var(--primary-dark) !important; }
/* Header2 (nav-header) dropdown layering */
#nav-header ul li ul { z-index: 50; }

/* Contextual overrides: keep green accent visible on dark backgrounds */
.bg-primary-dark .text-primary-light { color: var(--primary-light) !important; }
.bg-primary-dark .border-primary-light { border-color: var(--primary-light) !important; }
.bg-primary-dark .bg-primary-light { background-color: var(--primary-light) !important; }

/* Ensure dropdown menus are above content */
nav #siteHeader ul li ul { z-index: 50; }

/* Utility fallbacks (optional minimal sizes used in header) */
.text-subtitle2 { font-size: 14px; line-height: 20px; }
.text-subtitle1 { font-size: 16px; line-height: 22px; }

/* Add top padding to first section to clear fixed header if needed */
main .page-hero-offset { padding-top: 90px; }

/* Header logo sizing (similar to original template proportions) */

.site-logo {
  width: 220px; /* mobile */
  height: auto;
  display: block;
  max-height: 120px; /* safety cap */
}

@media (min-width: 640px) {
  .site-logo { width: 300px; max-height: 140px; } /* tablet */
}

@media (min-width: 1024px) {
  .site-logo { width: 360px; max-height: 160px; } /* desktop */
}

/* Ensure header row has enough height to center larger logo */
#siteHeader .container { align-items: center; min-height: 120px; }

/* Slightly reduce desktop nav item vertical padding so header doesn't grow too tall */
@media (min-width: 1024px) {
  #siteHeader ul > li > div[class*='py-'] { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* Footer overrides: ensure text is white and links scale on hover */
footer,
.footer-root { color: var(--secondary-white) !important; }

/* Force commonly used text utility classes inside footer to appear white */
footer .text-textColor-light,
footer .text-textColor-dark,
footer .text-secondary-light,
footer .text-secondary-dark,
footer .text-primary-dark,
footer .text-primary-light { color: var(--secondary-white) !important; }

/* Links in both footer variants */
footer a,
.footer-links a,
footer .hover-link { color: var(--secondary-white) !important; transition: transform 0.2s ease, color 0.2s ease; }

footer a:hover,
.footer-links a:hover,
footer .hover-link:hover { transform: scale(1.08); }

/* Keep existing left-indicator animations working nicely when scaled */
.footer-links a::before { will-change: transform, opacity; }

/* Testimonial cards: enforce consistent image height and layout across slides */
.ts-card { align-items: stretch; }
.ts-img { display: block; width: 100%; height: 220px; object-fit: contain; background-color: transparent; }
@media (min-width: 768px) { .ts-img { height: 260px; } }
@media (min-width: 1024px) { .ts-img { height: 300px; } }

/* About page: grayscale map */
.map-grayscale iframe { filter: grayscale(100%); }

/* Our Process viewer enhancements */
.proc-view { position: relative; min-height: 320px; display: block; padding-right: 56px; }
.proc-item { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 640px; will-change: transform, opacity; transition: transform 600ms cubic-bezier(.4,0,.2,1), opacity 600ms cubic-bezier(.4,0,.2,1); transform: translate3d(-50%, -50%, 0); }
.proc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 9999px; padding: 8px 10px; font-weight: 700; }
/* Ghost positions */
.proc-ghost-bottom { opacity: 0.08; transform: translate3d(-50%, -50%, 0) translateY(100px) scale(0.95); filter: none; z-index: 1; pointer-events: none; }
.proc-ghost-top { opacity: 0.08; transform: translate3d(-50%, -50%, 0) translateY(-100px) scale(0.95); filter: none; z-index: 1; pointer-events: none; }
.proc-item:not(.proc-ghost) { z-index: 2; }
.proc-enter { opacity: 0.01; transform: translate3d(-50%, -46%, 0); }
.proc-enter-active { opacity: 1; transform: translate3d(-50%, -50%, 0); }
.proc-exit { opacity: 1; transform: translate3d(-50%, -50%, 0); }
.proc-exit-active { opacity: 0; transform: translate3d(-50%, -54%, 0); }

/* Smoothly hidden state (avoid display:none to keep transitions) */
.proc-hidden { opacity: 0 !important; pointer-events: none !important; }

/* Glass card for process content */
.proc-card { display: inline-flex; gap: 12px; align-items: flex-start; text-align: left; padding: 18px 22px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0,0,0,0.25); }
.proc-card h6 { margin: 0; }
/* Softer styling for ghost cards to avoid overlap heaviness */
.proc-ghost-top .proc-card,
.proc-ghost-bottom .proc-card { box-shadow: none; background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }

/* Indicators */
.proc-indicators { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; }
.proc-indicators button { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.35); transition: transform .2s ease, background-color .2s ease; }
.proc-indicators button.is-active { transform: scale(1.35); background: var(--primary-light); border-color: var(--primary-light); }

/* Arrow controls vertically centered on the right */
.proc-controls { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.proc-controls .svc-more-btn { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

@media (max-width: 640px) {
  .proc-view { min-height: 280px; padding-right: 48px; }
}
.proc-controls .disabled { opacity: 0.4; pointer-events: none; }
/* Blog cards hover enlarge */
.blog-card { position: relative; will-change: transform; transform: translateZ(0); transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease; }
.blog-card img { transition: transform 320ms cubic-bezier(.22,.61,.36,1); will-change: transform; }
.blog-card:hover { transform: translate3d(0,-4px,0) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,0.22); z-index: 5; }
.blog-card:hover img { transform: scale(1.04); }

/* Global rounded corners for all site CTAs (anchors/buttons with background) */
a.inline-flex[class*="bg-"],
button.inline-flex[class*="bg-"] {
  border-radius: 30px !important;
}

/* === TRAINING SLIDER FIX === */
.training-slider {
    overflow: visible !important;
}

.training-slider .swiper-wrapper {
    overflow: visible !important;
}

.training-slider .swiper-slide {
    display: flex;
    align-items: stretch;
}

.training-slider .slide-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.training-slider img {
    object-position: center top;
}

.ribbon {
    position: absolute;
    top: 30px;                     /* distanziato dall’header */
    right: -60px;
    background: #ff3040;
    color: #ffffff;
    padding: 18px 110px;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(45deg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    z-index: 5 !important;         /* <<< RISOLVE TUTTO */
    border-radius: 6px;
    pointer-events: none;
}


.best-badge {
    display: inline-block;
    background: #00c853;
    color: white;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 0 auto 10px auto; /* centrato */
}

/* Prezzo scontato più visibile */
.price-new {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #00c853; /* verde brillante Sigma */
    display: inline-block;
    animation: pulseFlash 1.6s infinite;
}

/* Prezzo barrato più leggero */
.old-price {
    opacity: 0.7;
}

/* Effetto lampeggio/pulsazione elegante */
@keyframes pulseFlash {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.06); opacity: 0.65; }
    60% { transform: scale(1); opacity: 1; }
}

/* Forza il dropdown di "Join Us" ad essere sopra il banner */
#siteHeader .dropdown-btn + ul {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2000 !important;   /* sopra 999 del banner */
    background: var(--primary-dark);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 0;
}

@media (max-width: 768px) {
    .mobile-header-offset {
        margin-top: 50px; /* altezza approssimativa del banner */
    }
}


  #siteHeader.menu-open {
      top: 0 !important;
  }

/* JOIN US desktop – stile glass */
.joinus-dropdown button {
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.joinus-dropdown ul {
    background: rgba(23,23,23,0.95);
    backdrop-filter: blur(10px);
    min-width: 190px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.joinus-dropdown ul li a {
    font-size: 14px;
    padding: 6px 12px;
}

@media (max-width: 768px) {

    /* Header più compatto */
    #siteHeader {
        top: 50px !important; /* spazio per il banner */
        height: 70px !important;
        padding: 0 !important;
    }

    #siteHeader .container {
        min-height: 70px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Logo mobile normale */
    #siteHeader img {
        max-height: 45px !important;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    .banner-promo {
        top: 0 !important; /* fisso sempre in alto su mobile */
    }
}
#siteHeader {
    overflow: visible !important;
}

@media (min-width: 1024px) {
    #siteHeader .joinus-dropdown {
        position: relative !important;
        z-index: 9999 !important;
    }
    #siteHeader .joinus-dropdown ul {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        z-index: 10000 !important;
    }
}

.presenza-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}