/* ============================================================
   OUTLINE DIGITAL — RESPONSIVE (v7 — desktop safe + home mobile)
   - Anti-scrollbar orizzontale SOLO su html/body (non su swiper interno)
   - Slider hero mobile allineato a sinistra
   - Tipografia mobile leggibile
   - Niente regole pesanti che possano rompere desktop/swiper
   ============================================================ */

/* ===== ANTI HORIZONTAL SCROLL (solo html/body) ===== */
html, body {
    overflow-x: hidden;
}
/* clip è meglio di hidden quando supportato (no nuovo block formatting context) */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* Immagini sempre fluid */
img, video, iframe, svg, canvas, picture {
    max-width: 100%;
    height: auto;
}

/* Body tap-highlight verde */
body {
    -webkit-tap-highlight-color: rgba(129, 215, 66, .25);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   HERO SLIDER (homepage) — TYPOGRAPHY responsive
   ============================================================ */

/* Tablet */
@media (max-width: 991px) {
    .ms-slider .ms-sc--t {
        font-size: clamp(2.6rem, 7vw, 4.2rem) !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;
        font-weight: 800 !important;
    }
    .ms-slider .ms-sc--st {
        font-size: 1rem !important;
        letter-spacing: .14em !important;
        font-weight: 700 !important;
    }
    .ms-slider .ms-sc--desc {
        font-size: 1.1rem !important;
        line-height: 1.55 !important;
    }
}

/* ================================================================
   SMARTPHONE — LAYOUT CENTRATO PERFETTAMENTE
   - Tipografia grande e impattante
   - Tutto centrato (eyebrow, titolo, descrizione, CTA)
   ================================================================ */
@media (max-width: 575px) {
    /* Slide e inner: assicurano spazio per il flex centering */
    .ms-slider .swiper-slide {
        position: relative;
    }
    .ms-slider .slide-inner {
        position: relative;
        min-height: 100svh;
    }

    /* Contenuto centrato sia verticalmente che orizzontalmente */
    .ms-slider .ms-slider--cont {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 110px 28px 150px 28px !important;
        text-align: center !important;
        z-index: 2;
    }
    .ms-slider .ms-cont__inner {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* EYEBROW: centrato, lime con glow */
    .ms-slider .ms-sc--st {
        font-size: clamp(.92rem, 3.6vw, 1.05rem) !important;
        letter-spacing: .2em !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        margin: 0 auto 1.2rem auto !important;
        color: #b8ff0c !important;
        text-shadow: 0 0 24px rgba(184, 255, 12, .45);
        text-align: center !important;
    }

    /* TITOLO: GRANDE, IMPATTANTE, CENTRATO */
    .ms-slider .ms-sc--t {
        font-size: clamp(3rem, 14vw, 4.6rem) !important;
        line-height: .94 !important;
        letter-spacing: -.03em !important;
        font-weight: 900 !important;
        margin: 0 auto !important;
        word-break: break-word;
        text-align: center !important;
        max-width: 100%;
        color: #ffffff !important;
        text-shadow:
            0 4px 24px rgba(0, 0, 0, .5),
            0 0 60px rgba(129, 215, 66, .15);
    }

    /* DESCRIZIONE: centrata e leggibile */
    .ms-slider .ms-sc--desc {
        font-size: clamp(1.05rem, 4.2vw, 1.2rem) !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
        color: rgba(245, 247, 240, .96) !important;
        max-width: 30ch;
        margin: 1.6rem auto 0 auto !important;
        text-align: center !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    }
    .ms-slider .ms-sc--desc br { display: none; }

    /* CTA WRAP — centrato orizzontalmente */
    .ms-slider .btn-wrap {
        margin: 2.6rem auto 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
    }

    /* btn-circle: pill moderna con cerchio + label affiancati */
    .ms-slider .btn-circle {
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 14px !important;
        text-decoration: none !important;
        padding: 6px 22px 6px 6px !important;
        background: rgba(255, 255, 255, .06) !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 999px !important;
        transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }
    .ms-slider .btn-circle:hover,
    .ms-slider .btn-circle:active {
        background: rgba(129, 215, 66, .14) !important;
        border-color: rgba(129, 215, 66, .5) !important;
    }
    .ms-slider .btn-circle .ms-btn--circle {
        flex: 0 0 auto;
    }
    .ms-slider .btn-circle .ms-btn--circle .circle {
        width: 56px !important;
        height: 56px !important;
    }
    .ms-slider .btn-circle .ms-btn--label {
        flex: 0 1 auto;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Etichetta: uppercase tracked, button-style */
    .ms-slider .btn-circle .ms-btn__text {
        font-size: .92rem !important;
        font-weight: 700 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        line-height: 1 !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    }
    /* Border underline: nascosto su mobile (già nel pill) */
    .ms-slider .btn-circle .ms-btn__border {
        display: none !important;
    }

    /* Frecce nav touch friendly */
    .ms-nav--prev, .ms-nav--next {
        width: 44px !important;
        height: 44px !important;
    }

    /* Pagination centrato */
    .ms-slider--progress {
        bottom: 36px !important;
        padding: 0 28px !important;
    }
}

/* Smartphone piccolo (iPhone SE, Android compatti) */
@media (max-width: 380px) {
    .ms-slider .ms-slider--cont {
        padding: 100px 22px 140px 22px !important;
    }
    .ms-slider .ms-sc--st {
        font-size: .88rem !important;
        margin-bottom: 1rem !important;
    }
    .ms-slider .ms-sc--t {
        font-size: clamp(2.4rem, 12.5vw, 3.4rem) !important;
    }
    .ms-slider .ms-sc--desc {
        font-size: 1rem !important;
        max-width: 28ch;
        margin-top: 1.3rem !important;
    }
    .ms-slider .btn-wrap {
        margin-top: 2.2rem !important;
    }
    .ms-slider .btn-circle {
        padding: 5px 18px 5px 5px !important;
        gap: 12px !important;
    }
    .ms-slider .btn-circle .ms-btn--circle .circle {
        width: 50px !important;
        height: 50px !important;
    }
    .ms-slider .btn-circle .ms-btn__text {
        font-size: .82rem !important;
        letter-spacing: .12em !important;
    }
    .ms-slider--progress {
        padding: 0 22px !important;
    }
}

/* ============================================================
   PAGE HERO interne (sviluppoapp / sitiweb / e-commerce / ai)
   ============================================================ */
/* ATTENZIONE ALLA NOMENCLATURA DEL TEMA (era invertita).
   In queste pagine .ms-hero-title e' l'H1 usato come SOPRATITOLO (16px
   maiuscoletto su desktop), mentre .ms-hero-subtitle e' il titolo grande
   (60px/900). Le regole precedenti ingrandivano il sopratitolo e rimpicciolivano
   il titolo: su mobile la gerarchia risultava capovolta rispetto al desktop. */
@media (max-width: 991px) {
    .ms-hero-title {
        font-size: clamp(.8rem, 2.2vw, 1rem) !important;
        line-height: 1.3 !important;
        letter-spacing: .12em !important;
    }
    .ms-hero-subtitle {
        font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.02em !important;
    }
}

@media (max-width: 575px) {
    .ms-hero-title {
        font-size: .8125rem !important;
        line-height: 1.3 !important;
        letter-spacing: .12em !important;
    }
    .ms-hero-subtitle {
        font-size: clamp(1.9rem, 8.2vw, 2.6rem) !important;
        line-height: 1.1 !important;
        word-break: break-word;
    }
    .ms-hero-subtitle br { display: none; }
}

@media (max-width: 380px) {
    .ms-hero-subtitle {
        font-size: clamp(1.65rem, 7.6vw, 2.1rem) !important;
    }
}

/* ===== TIPOGRAFIA MOBILE GENERALE ===== */
@media (max-width: 991px) {
    body { line-height: 1.65; }
}
@media (max-width: 575px) {
    body {
        font-size: 16.2px;
        line-height: 1.7;
    }
    p, li { line-height: 1.7; }
    h1 { line-height: 1.1 !important; }
    h2 { line-height: 1.2 !important; }
    h3 { line-height: 1.25 !important; }
}

/* Niente <br> indesiderati nei titoli su mobile */
@media (max-width: 768px) {
    h1 br, h2 br, h3 br,
    .ms-hero-subtitle br {
        display: none;
    }
}

/* ===== SPAZI MOBILE ===== */
@media (max-width: 575px) {
    p + p, p + ul, p + ol, ul + p, ol + p {
        margin-top: 1rem;
    }
    li + li {
        margin-top: .35rem;
    }
}

/* ===== SERVICE SECTIONS — mobile readability ===== */
@media (max-width: 575px) {
    .image-overlay {
        font-size: .7rem !important;
        padding: 5px 12px !important;
    }
    .service-tag {
        font-size: .7rem !important;
        padding: 5px 11px !important;
    }
    .benefit-tag {
        flex-wrap: wrap;
        gap: 8px;
    }
    .benefit-tag span {
        font-size: .8rem;
    }
}

/* ===== FORM RESPONSIVE ===== */
@media (max-width: 575px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
    .wpcf7-submit,
    input[type="submit"],
    button[type="submit"] {
        width: 100%;
        min-height: 52px;
    }
}

/* ===== IFRAME RESPONSIVE ===== */
.elementor-widget-google_maps iframe,
iframe[src*="youtube"],
iframe[src*="google.com/maps"] {
    max-width: 100%;
    border: 0;
}

/* ===== TAP TARGET ===== */
a, button {
    -webkit-tap-highlight-color: rgba(129, 215, 66, .3);
}

/* ===== PRINT ===== */
@media print {
    .cookie-notice-container,
    .od-scroll-progress { display: none !important; }
}

/* ===== UTILS ===== */
table { width: 100%; border-collapse: collapse; }
pre, code {
    white-space: pre-wrap;
    word-break: break-word;
}