/* ============================================================================
   OUTLINE DIGITAL — RIFINITURE
   Solo ritocchi: colori, spaziature, coerenza fra desktop e mobile.
   Nessun cambio di struttura, nessun componente nuovo.
   Non e' collegato a index.html: la home resta com'e'.
   ========================================================================= */

:root {
    --odr-verde: #81d742;
    --odr-verde-chiaro: #b8ff0c;
    --odr-nero: #0a0d0c;
    --odr-bordo: rgba(255, 255, 255, .10);
}
[data-theme="light"] {
    --odr-bordo: rgba(16, 20, 19, .12);
}

/* ---------------------------------------------------------------------------
   1. FOCUS DA TASTIERA
   Il tema azzera l'outline sui pulsanti (button:focus{outline:0}) e la regola
   correttiva in outline-modern.css usa :where(), che ha specificita' zero e
   quindi perde sempre. Qui il selettore ha specificita' reale.
   ------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--odr-verde-chiaro);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   2. BLOCCHI SERVIZIO — coerenza cromatica
   Le cinque immagini hanno temperature molto diverse (foto fredde, illustrazioni
   chiare, un pannello rosso pieno). Un velo appena percettibile sul lato del
   testo le lega fra loro e ammorbidisce lo stacco netto con la colonna scura.
   ------------------------------------------------------------------------ */
.servizio-section .image-content {
    position: absolute;
    filter: saturate(.94);
}
.servizio-section .image-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(10, 13, 12, .55) 0%,
        rgba(10, 13, 12, .16) 22%,
        transparent 55%);
}
.servizio-section.left-image .image-content::after {
    background: linear-gradient(270deg,
        rgba(10, 13, 12, .55) 0%,
        rgba(10, 13, 12, .16) 22%,
        transparent 55%);
}
[data-theme="light"] .servizio-section .image-content::after { opacity: .35; }

/* Sotto i 1024px le colonne si impilano: il velo laterale non ha piu' senso,
   serve invece uno stacco morbido verso il testo che sta sotto. */
@media (max-width: 1024px) {
    .servizio-section .image-content::after,
    .servizio-section.left-image .image-content::after {
        background: linear-gradient(180deg,
            transparent 55%,
            rgba(10, 13, 12, .45) 100%);
    }
}

/* OmegaSuite: il file e' un logo su fondo rosso pieno. Con background-size:cover
   diventava un pannello rosso a tutta altezza, l'elemento piu' fuori palette del
   sito. Con "contain" resta il marchio, senza che il rosso domini la pagina. */
#omegasuite-gestionale .image-content {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    background-color: #101413;
    padding: clamp(2.5rem, 7vw, 7rem);
}
#omegasuite-gestionale .image-content::after { background: none; }
[data-theme="light"] #omegasuite-gestionale .image-content { background-color: #f4f6f4; }

/* ---------------------------------------------------------------------------
   3. BANNER COOKIE
   Era una fascia grigia a tutta larghezza, con testo da 13px, che copriva il
   fondo di ogni pagina. Diventa una scheda compatta in basso a sinistra.
   ------------------------------------------------------------------------ */
#cookie-notice {
    min-width: 0 !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    max-width: 440px;
    background-color: rgba(16, 20, 19, .96) !important;
    border: 1px solid var(--odr-bordo);
    border-radius: 16px;
    box-shadow: 0 20px 60px -18px rgba(0, 0, 0, .7);
    text-align: left !important;
    overflow: hidden;
}
#cookie-notice .cookie-notice-container {
    padding: 20px 22px !important;
    text-align: left !important;
}
#cookie-notice #cn-notice-text {
    display: block;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 14px;
}
#cookie-notice .cn-button {
    margin: 0 8px 0 0 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    line-height: 1.4 !important;
}
/* I due pulsanti hanno la stessa classe E lo stesso colore in linea:
   vanno distinti per id, altrimenti "accetta" e "rifiuta" sono identici. */
#cookie-notice #cn-accept-cookie {
    background-color: var(--odr-verde) !important;
    color: var(--odr-nero) !important;
}
#cookie-notice #cn-refuse-cookie {
    background-color: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
}
#cookie-notice #cn-refuse-cookie:hover {
    background-color: rgba(255, 255, 255, .07) !important;
}
#cookie-notice #cn-notice-text a {
    color: var(--odr-verde) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#cookie-notice .cn-close-icon { top: 14px !important; right: 14px !important; }

@media (max-width: 575px) {
    #cookie-notice {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none;
    }
    #cookie-notice .cookie-notice-container { padding: 16px 18px !important; }
}

/* ---------------------------------------------------------------------------
   4. MAPPA NELLA PAGINA CONTATTI
   L'iframe di Google Maps e' un rettangolo bianco a tutta larghezza in cima a
   una pagina scura. Incorniciarlo e smorzarlo lo fa rientrare nella palette.
   ------------------------------------------------------------------------ */
.ms-contact-map iframe,
iframe[src*="google.com/maps"],
iframe[src*="maps.google"] {
    border-radius: 16px;
    border: 1px solid var(--odr-bordo) !important;
    filter: saturate(.85) contrast(.96);
}

/* ---------------------------------------------------------------------------
   5. COERENZA DEL VERDE
   Nel sito convivono #81d742 e #B8FF0C usati a caso. Il chiaro resta agli
   accenti piccoli (occhielli, frecce), il pieno ai testi e ai bordi.
   ------------------------------------------------------------------------ */
.service-tag,
.cta-link,
.feature-list li::before {
    color: var(--odr-verde);
}
.cta-link .arrow { color: var(--odr-verde-chiaro); }

/* ---------------------------------------------------------------------------
   6. SPAZIATURE SU MOBILE
   Sotto i 576px il testo dei blocchi servizio arrivava troppo vicino ai bordi.
   ------------------------------------------------------------------------ */
@media (max-width: 575px) {
    .servizio-section .text-content { padding: 2.25rem 1.35rem 2.75rem; }
    .servizio-section .service-title { line-height: 1.12; }
    .servizio-section .service-description { margin-bottom: 1.5rem; }
    .servizio-section .feature-list { gap: .35rem; }
}

/* ---------------------------------------------------------------------------
   7. HERO DELLE PAGINE INTERNE — coerenza e leggibilita'
   Le sei pagine con .ms-hero usano foto molto diverse: due sono quasi bianche
   (sala riunioni, mano con smartphone su fondo giallo) e sotto il testo bianco
   diventano illeggibili; le altre sono scure. Il tema prevede un elemento
   .hero-overlay a z-index -1, che pero' il markup non include. Qui il velo si
   disegna in CSS nello stesso punto: sopra all'immagine (z-index -2) e sotto
   al contenuto. La home non usa questa classe e non viene toccata.
   ------------------------------------------------------------------------ */
.ms-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(5, 7, 8, .62) 0%,
            rgba(5, 7, 8, .38) 42%,
            rgba(5, 7, 8, .58) 100%),
        radial-gradient(120% 90% at 50% 50%,
            transparent 30%,
            rgba(5, 7, 8, .35) 100%);
}

[data-theme="light"] .ms-hero::before {
    background: linear-gradient(180deg,
        rgba(5, 7, 8, .52) 0%,
        rgba(5, 7, 8, .34) 45%,
        rgba(5, 7, 8, .50) 100%);
}