@charset "UTF-8";

/* ===================================================================
 * 1. DEFINIZIONI GLOBALI (VARIABILI)
 * =================================================================== */
:root {
  /* Font */
  --font-primario: 'Poppins', sans-serif;
  --font-heading: 'DM Serif Display', serif;

  /* Palette Colori */
  --nyx-burgundy: #8c1921;
  --nyx-yellow: #fdc50d;
  --nyx-indigo: #6610f2;
  --nyx-white: #ffffff;
  --nyx-white-opaco: #ffffffb9;
  --nyx-white-navbar: #ffffffdd;
  --nyx-gray-100: #f8f9fa;
  --nyx-gray-400: #e3e5e8c9;
  --nyx-gray-700: #495057;
  --nyx-gray-900: #212529;
  --nyx-black: #000000;
  --nyx-orange: #e57d22;

  /* Mappatura Semantica */
  --color-background: var(--nyx-white);
  --color-background-alt: var(--nyx-gray-100);
  --color-text: var(--nyx-gray-700);
  --color-headings: var(--nyx-gray-900);
  --color-primary: var(--nyx-yellow);
  --color-accent: var(--nyx-indigo);
  --color-top-bar-bg: var(--nyx-burgundy);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-headings);
  --color-border: var(--nyx-gray-400);
  --color-border: var(--nyx-gray-900);
}

/* ===================================================================
 * 2. STILI DI BASE (BODY, TYPOGRAPHY, LINKS)
 * =================================================================== */
body {
  font-family: var( --font-primario);
  font-weight: 400;
  line-height: 1.6;
  background-color: var(--color-background);
  color: var(--color-text);
  overflow-x: hidden;
}
html{
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-4 {
  font-family: var(--font-heading);
  color: var(--color-headings);
}
.headings{
    font-size: 52px!important;
    font-weight: 300;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--color-link-hover);
}
.bg-light-gray {
    background-color: var(--nyx-gray-400) !important;
}
footer{
    background-color: var( --nyx-orange);
}
/* Titoli Home */
.home h2{
    font-size: 36px!important;
}

/* ===================================================================
 * CLASSI DI UTILITÀ PER FILTRI IMMAGINE
 * =================================================================== */

/* Applica un filtro bianco e nero */
.filtro-bw {
    filter: grayscale(100%);
    transition: filter 0.4s ease-in-out;
}

/* Al passaggio del mouse, l'immagine torna a colori */
.filtro-bw:hover {
    filter: grayscale(0%);
}

/* Aumenta il contrasto dell'immagine */
.filtro-contrasto {
    /* Puoi modificare il valore (es. 1.5 per più contrasto) */
    filter: contrast(1.2); 
}

/* ===================================================================
 /* HERO SLIDER LAYOUT  HOME
 * =================================================================== */

#heroSlider {
  position: relative;
  overflow: hidden;
  height: 80vh;
  min-height: 600px;
}
/* Colore personalizzato per il pallino attivo dello slider */
.splide__pagination .splide__pagination__page.is-active {
    background: #e57d22;
    transform: scale(1.4); /* opzionale per evidenziarlo un po' di più */
}
/* FRECCE SPLIDE */
.splide__arrow {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.3s ease;
}

.splide__arrow--prev {
    left: 1rem;
}

.splide__arrow--next {
    right: 1rem;
}

.splide__arrow:hover {
    background: #e57d22;
    color: #fff;
}

.splide__arrow i {
    font-size: 1.25rem;
}

/* ===================================================================
 * STILE PULSANTE JQUERY
 * =================================================================== */

.btn-outline-animated {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: 400;
    color: var(--color-text);
    background: none;
    border: 1px solid #cfd2d4;
    text-decoration: none;
    overflow: hidden; /* Nasconde le linee quando sono fuori posto */
    border-radius: 0px!important;
    font-size: 14px;
}

.btn-outline-animated:hover {
    color: #e67e22;
}

/* Stile e posizionamento delle 4 linee */
.btn-outline-animated .line {
    background-color: #e57d22; /* Colore arancione */
    position: absolute;
}
.line-top {
    top: 0; left: 0;
    width: 0; /* Partono con larghezza 0 */
    height: 1px;
}
.line-right {
    top: 0; right: 0;
    width: 1px;
    height: 0; /* Partono con altezza 0 */
}
.line-bottom {
    bottom: 0; right: 0;
    width: 0;
    height: 1px;
}
.line-left {
    bottom: 0; left: 0;
    width: 1px;
    height: 0;
}
/* Stile per il pulsante quando è ATTIVO */
.btn-outline-animated.active {
    color: #e57d22; 
    border-color: transparent;
}

/* Mostra le linee del bordo quando il pulsante è ATTIVO */
.btn-outline-animated.active::before,
.btn-outline-animated.active::after,
.btn-outline-animated.active span::before,
.btn-outline-animated.active span::after {
    transform: scaleX(1) scaleY(1);
    transition: none;
}

/* ===================================================================
 * STILI PAGINA CONTATTI
 * =================================================================== */

 .address-icon {
    width: 312px;
    height: 132px;
    filter: brightness(0) saturate(100%) invert(77%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(100%) contrast(100%);
}

.address-card {
    background-color: var(--nyx-white);
    padding: 2.5rem 2rem;
    height: 100%;
    border: 1px solid var(--nyx-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
}

.address-city {
    font-family: var(--font-primario);
    font-weight: 300; /* Stile più leggero per la città */
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}
.address-card i{
    font-size: 55px;
    color:#e57d22;
    margin-top:22px;
}

.address-details {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.map-section iframe,
.map-section .leaflet-map-div {
    display: block;
    width: 100%;
    height: 500px;
    border: none;
}

/* ===================================================================
 * STILI SEZIONE TEAM CONTATTI (Pagina Contatti)
 * =================================================================== */
.contact-profile-card {
    background-color: var(--nyx-white);
    text-align: center;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    border-radius: 8px;
    overflow: hidden;
}

.contact-profile-image img {
    width: 100%;
    height: auto;
}

.contact-profile-body {
    padding: 1.5rem;
}

.contact-profile-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.contact-profile-role {
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.contact-profile-info {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.contact-profile-info a {
    text-decoration: none;
    color:#e57d22;
}
.contact-profile-image img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.contact-profile-card:hover .contact-profile-image img {
    filter: grayscale(0%);
}
.indirizzi{
    background-color: #e57d22;
}

/* ===================================================================
 * EFFETTO HOVER MENU CON LINEA ANIMATA
 * =================================================================== */


.site-header .navbar-nav .nav-link {
    position: relative;
    padding-bottom: 0.8rem !important; 
}


.site-header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 0%; 
    height: 2px; 
    background-color: #e67e22; 
    
    transition: width 0.3s ease-in-out; 
}

.site-header .navbar-nav .nav-link:hover::after {
    width: 100%;
}



/* ===================================================================
 * 3. LAYOUT HEADER GLOBALE
 * =================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background-color: transparent;
    transition: background-color 0.4s ease, transform 0.4s ease-in-out;
}
body.home .site-header {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 40%,
        rgba(255, 255, 255, 0) 100%
    );
}
.evidence{
    font-weight: 500;
    font-size: 28px
}

.site-header .navbar {
    transition: padding 0.4s ease;
}

.site-header.scrolled .navbar {
    padding-top: 0.15rem;   /* <-- AUMENTATO */
    padding-bottom: 0.15rem; /* <-- AUMENTATO */
}
.site-header.scrolled .custom-logo {
    padding-top: 8px;
    padding-bottom: 8px;
    max-height: 90px;
}

.site-header.scrolled {
    background-color: var(--nyx-white-navbar);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.navbar-hidden {
    transform: translateY(-100%);
}

.custom-logo {
    max-height: 120px; /* <-- AUMENTATO */
    width: auto;
    padding-top:18px;
    padding-bottom:18px;
}

/* STATO DI BASE (header trasparente) */
.site-header .navbar-nav .nav-link {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    /* color: var(--nyx-white);  */
    transition: color 0.4s ease;
}

/* STATO "SCROLLED" (header bianco) */
.site-header.scrolled .navbar-nav .nav-link {
    color: var(--color-text); /* Forza il colore scuro dopo lo scroll */
}

/* STATO HOVER (vale per entrambi gli stati) */
.site-header .navbar-nav .nav-link:hover {
    color: #e57d22 !important;
}

/* Stile per quando il menu mobile è aperto (anche a scroll 0) */
.site-header.mobile-menu-open {
    background-color: var(--nyx-white-navbar);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Colore dei link quando il menu mobile è aperto */
.site-header.mobile-menu-open .navbar-nav .nav-link {
    color: var(--color-text);
}

/* Colore dell'icona hamburger quando il menu mobile è aperto */
.site-header.mobile-menu-open .navbar-light .navbar-toggler-icon {
    filter: none;
}
.site-header.mobile-menu-open .header-logo-container{
    margin-left:17px
}



/* ===================================================================
 * HERO SPLIT SECTION (Stile per layout asimmetrico definitivo)
 * =================================================================== */

.hero-split-section {
    position: relative;
    overflow: hidden; /* Evita che l'immagine crei uno scroll orizzontale */
}

/* Colonna destra con l'immagine, posizionata in modo assoluto */
.hero-image-right-absolute {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* Occupa metà dello schermo a destra */
    height: 100%;
    background-size: cover;
    background-position: center;
}
.text-giustificato {
    text-align: justify;
    -webkit-hyphens: auto; 
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Colonna sinistra con il contenuto */
.hero-content-left {
    min-height: 100vh; /* ALTEZZA SECTION */
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Stile generico per i puntini decorativi */
.dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #a4a0a1;
    margin-right: 8px;
    /* transform: rotate(45deg); */
}

/* Colora il secondo puntino di arancione */
.dots .dot:nth-child(2) {
    background-color: #e57d22; 
}

/* Forma diagonale */
.diagonal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    background-color: #e57d22b5;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 0.9;
}

/* Stili responsive per mobile */
@media (max-width: 991.98px) {
    .hero-image-right-absolute {
        position: relative; /* Su mobile, l'immagine torna nel flusso normale */
        width: 100%;
        min-height: 300px;
    }
    .hero-content-left {
        min-height: 100vh; /* <--ALTEZZA DELLE SECTION */
        min-height: auto;
        text-align: center;
    }
}

/* ===================================================================
 * STILI PER FORME ANIMATE (Versione Finale, Grande e Dinamica)
 * =================================================================== */

.hero-content-left {
    position: relative;
    overflow: hidden;
}

.animated-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
}

.hero-main-text {
    position: relative;
    z-index: 2;
}

.animated-bg-shapes .shape {
    position: absolute;
    border: 1px solid #c1c1c1;
    border-radius: 35px;
    background-color: #f8f9fa;
}

/* Rettangolo 1 */
.animated-bg-shapes .shape-1 {
    width: 600px;  /* <-- INGRANDITO */
    height: 800px; /* <-- INGRANDITO */
    top: -20%;
    left: -150px;
    animation: animate-shape-1 20s ease-in-out infinite;
}

/* Rettangolo 2 */
.animated-bg-shapes .shape-2 {
    width: 450px;  /* <-- INGRANDITO */
    height: 600px; /* <-- INGRANDITO */
    bottom: -30%;
    right: 55%;
    transform: rotate(45deg);
    animation: animate-shape-2 25s ease-in-out infinite;
}

/* Animazioni con movimenti e rotazioni molto più ampi */
@keyframes animate-shape-1 {
    0%   { transform: translateY(0) rotate(0deg) scale(1); }
    50%  { transform: translateY(100px) rotate(40deg) scale(1.5); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes animate-shape-2 {
    0%   { transform: rotate(45deg) scale(1); }
    50%  { transform: rotate(15deg) scale(1.7); }
    100% { transform: rotate(45deg) scale(1); }
}

/* Nascondiamo su mobile */
@media (max-width: 991.98px) {
    .animated-bg-shapes {
        display: none;
    }
}

/* ===================================================================
 * STILI SEZIONE SERVIZI (Versione Finale Unificata)
 * =================================================================== */

.services-section h2 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
}

/* 1. Layout di base con spazio e linea diagonale */
.services-row {
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    column-gap: 6rem;
}

.diagonal-separator-line {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 3px;
    height: 90%;
    background-color: #e57d22;
    transform: translateX(-50%) skewX(-15deg);
    z-index: 1;
    padding:0px;
}

/* 2. Stile della colonna e del contenuto visibile */
.services-row > [class*="col-"] {
    position: relative;
    z-index: 2;
    transition: all 0.4s ease-in-out; /* Transizione per l'effetto focus */
    cursor: pointer;
}

.service-item {
    text-align: center;
}

.service-item h3 {
    margin-bottom: 1rem;
    font-weight: 400;
}

/* 3. EFFETTO FOCUS (sfocatura sull'altra colonna) */


/* 4. EFFETTO ESPANSIONE (lista nascosta) */
.service-item-hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    text-align: left;
    margin-top: -15px;
    /* border-top: 1px solid var(--color-border); */
    padding-top: 0.5rem;
    font-size: 0.9rem;
}
.service-item-hidden a {
    text-decoration: none;
    color: var(--color-text);
}
.service-item-hidden a:hover {
    color: var(--color-primary);
}

/* Quando il mouse è sulla colonna, la lista si espande */
.services-row > [class*="col-"]:hover .service-item-hidden {
    max-height: 900px; 
}


/* 5. FRECCIA ANIMATA */
.expand-arrow {
    margin-top: 1.5rem;
    color: var(--nyx-gray-900);
    animation: bounce-arrow 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

/* Nasconde la freccia durante l'espansione */
.services-row > [class*="col-"]:hover .expand-arrow {
    opacity: 0;
}

@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* ===================================================================
 * EFFETTO HOVER PER LA LINEA DI SEPARAZIONE
 * =================================================================== */

.diagonal-separator-line {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

.services-row:hover .diagonal-separator-line {
    transform: translateX(-50%) skewX(0deg); 
}

/* ===================================================================
 * STILI PER LA LISTA A GRIGLIA ESPANDIBILE
 * =================================================================== */

/* Contenitore della griglia (la nostra lista <ul>) */
.service-item-hidden ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 2 colonne di uguale larghezza */
    gap: 1rem; /* Spazio tra gli elementi della griglia */
    list-style: none;
    padding-left: 0;
}

/* Stile per ogni elemento della griglia (il link <a>) */
.service-item-hidden li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Occupa tutta l'altezza della sua cella */
    min-height: 40px; /* Altezza minima per garantire uniformità */
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px; /* Radius come richiesto */
    text-align: center;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size:13px;
}

/* Effetto al passaggio del mouse */
.service-item-hidden li a:hover {
    background-color: #e67e22; /* Sfondo arancione */
    color: var(--nyx-white);     /* Testo bianco */
    border-color: transparent;   /* Nasconde il bordo */
    transform: scale(1.03);
}

/* ===================================================================
 * STILI SEZIONE EXPERTISE (Versione Compatta)
 * =================================================================== */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* <-- RIDOTTO per avvicinare le card */
}

.expertise-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background-color: var(--nyx-white);
    padding: 0.5rem 0.5rem; /* <-- RIDOTTO per rendere le card più basse */
    height: 100%;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}


.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    background-color: #e67e22;
}
.expertise-card:hover .expertise-title,
.expertise-card:hover .expertise-icon svg,
.expertise-card:hover .expertise-icon img {
    color: var(--nyx-white);
    fill: var(--nyx-white);
    filter: brightness(0) invert(1);
}

.expertise-icon {
    margin-bottom: 1rem; /* <-- RIDOTTO per compattare */
}

.expertise-icon img,
.expertise-icon svg {
    height: 32px;
    width: 32px;
    fill: #e57d22;
    filter: invert(55%) sepia(85%) saturate(1426%) hue-rotate(349deg) brightness(98%) contrast(98%);
    transition: filter 0.3s ease;
}

.expertise-title {
    font-size: 0.9rem; /* Leggermente più grande del precedente 0.3rem per leggibilità */
    font-weight: 700;
    color: var(--color-headings);
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* Responsive per la griglia */
@media (max-width: 991.98px) {
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767.98px) {
    .expertise-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
 * STILI SPECIFICI PER LE CARD DEGLI ARCHIVI
 * =================================================================== */

/* Applica uno stile solo alle card dentro al contenitore principale delle pagine interne */
.site-main-content .expertise-card {
    min-height: 180px; /* Imposta l'altezza minima come richiesto */
}

/* Applica uno stile solo alle icone delle card nelle pagine interne */
.site-main-content .expertise-icon img,
.site-main-content .expertise-icon svg {
    height: 42px; /* <-- AUMENTATA la dimensione dell'icona */
    width: 42px;
}
.site-main-content .expertise-title {
    font-size: 1.1rem; /* <-- AUMENTATA la dimensione del titolo (puoi modificare questo valore) */
    font-weight: 400;
}

/* ==========================================================================
   Stile Unificato Menu e Titoli (Pagine Singole E ARCHIVI)
   ========================================================================== */

/*
 * MODIFICA: Ho combinato i due selettori con una virgola.
 * Ora lo stile si applica sia a #masthead (per le pagine singole)
 * sia al tag <header> (per gli archivi).
*/
body:not(.home):not(.front-page) #masthead:not(.scrolled) .navbar-nav .nav-link span,
body:not(.home):not(.front-page) header:not(.scrolled) .navbar-nav .nav-link span {
    color: #ffffff !important;
}

/* Applichiamo la stessa logica combinata anche all'hover e al focus */
body:not(.home):not(.front-page) #masthead:not(.scrolled) .navbar-nav .nav-link:hover span,
body:not(.home):not(.front-page) header:not(.scrolled) .navbar-nav .nav-link:hover span,
body:not(.home):not(.front-page) #masthead:not(.scrolled) .navbar-nav .nav-link:focus span,
body:not(.home):not(.front-page) header:not(.scrolled) .navbar-nav .nav-link:focus span {
    color: rgba(255, 255, 255, 0.8) !important; 
}


/* Stile per i titoli (questo è già corretto e non va toccato) */
body:not(.home):not(.front-page) .entry-title,
body:not(.home):not(.front-page) .page-title {
    color: #ffffff;
    font-size: 3.5rem;
    margin: 0;
    text-transform: uppercase;
}

/* ===================================================================
 * STILI SEZIONE ABOUT (con Correzioni)
 * =================================================================== */
.about-section-split {
    position: relative;
    overflow: hidden;
    background-color: var(--nyx-white);
    min-height: 65vh;  /* altezza sezione */
}

.about-section-split .row {
    min-height: 65vh; /* altezza sezione */
}

/* L'immagine ora è alta il 100% della sezione, non più l'80% */
.about-image-left-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%; /* Occupa tutta l'altezza della sezione */
    background-size: cover;
    background-position: center;
}

/* La forma arancione rimane uguale */
.diagonal-overlay-about {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40%;
    background-color: #e57d22b5;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
}

.about-content-right {
    padding: 3rem 5rem;
}

/* Stili responsive (rimangono uguali) */
@media (max-width: 991.98px) {
    .about-image-left-absolute {
        position: relative;
        width: 100%;
        min-height: 300px;
    }
    .about-content-right {
        text-align: center;
    }
    .about-section-split {
        min-height: auto;
    }
}

/* ==========================================================================
   STILI FINALI PER HERO SECTION 
   ========================================================================== */

/* --- 1. Contenitore Principale con Immagine --- */
.page-hero {
  position: relative; /* Serve per l'overlay */
  min-height: 450px;
  background-size: cover;
  background-position: center;
  
  /* Allineamento verticale e spaziatura */
  display: flex;
  align-items: flex-end; /* Spinge il contenuto in basso */
  padding-bottom: 80px;  /* Spazio dal fondo come richiesto */
}

/* --- 2. Overlay Scuro per Leggibilità --- */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1; /* Sta sotto al testo */
}

/* --- 3. Contenuto Interno (Titolo e Breadcrumbs) --- */
.page-hero .hero-content {
  position: relative; /* Assicura che stia sopra l'overlay */
  z-index: 2;

  /* Allineamento orizzontale (allineato al logo) */
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  
  /* Spaziatura interna e allineamento testo */
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
}
.breadcrumb-current, .breadcrumbs{
    color:#fff;
}

/* --- 4. Stili del Testo --- */
.page-hero .page-title,
.page-hero .entry-title {
    color: #ffffff;
    font-size: 3.5rem;
    margin: 0;
    text-transform: uppercase;
}

.page-hero .breadcrumbs-container,
.page-hero .breadcrumbs-container a {
    color: #ffffff;
    opacity: 0.8;
}

/* --- Struttura Layout: Contenuto a Sinistra, Sidebar a Destra --- */
.container-with-sidebar {
    display: flex;
    flex-wrap: wrap; /* Va a capo su schermi piccoli */
    gap: 30px; /* Spazio tra contenuto e sidebar */
    padding: 40px 0; /* Spazio sopra e sotto */
    max-width: 1200px; /* Larghezza massima del contenitore */
    margin: 0 auto; /* Centra il contenitore */
    padding-left: 15px; /* Padding per mobile */
    padding-right: 15px; /* Padding per mobile */
}

.main-column {
    flex: 1; /* Il contenuto occupa lo spazio rimanente */
    min-width: 65%; /* Occupa almeno il 65% dello spazio */
}

.sidebar-right {
    flex-basis: 300px; /* Larghezza di base della sidebar */
    flex-grow: 0;
}

/* --- Stile Icona --- */
.competenza-icon {
    max-width: 80px; /* Dimensione massima icona */
    height: auto;
    margin-bottom: 25px; /* Spazio sotto l'icona */
    display: block;
}


/* --- Stile per i Loop in Sidebar (per non farli "fare schifo") --- */
.widget_custom_nav {
    margin-bottom: 30px;
}

.widget_custom_nav .widget-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.widget_custom_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* border: 1px solid #eee; */
}

.widget_custom_nav ul li {
    margin: 0;
}

.widget_custom_nav ul li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
    /* border-bottom: 1px solid #eee; */
    transition: all 0.2s ease-in-out;
}

.widget_custom_nav ul li:last-child a {
    border-bottom: none; /* Rimuove il bordo dall'ultimo elemento */
}

.widget_custom_nav ul li a:hover {
    color: #e57d22; /* Usa il tuo colore principale (es. oro) */
    font-weight: normal;
    text-decoration: underline;
}

/* Stile per l'elemento ATTIVO */
.widget_custom_nav ul li.active a {
    color: #e57d22; /* Usa il tuo colore principale (es. oro) */
    font-weight: normal;
    text-decoration: underline;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .container-with-sidebar {
        flex-direction: column;
    }
    .main-column {
        min-width: 100%;
    }
}

/* ===================================================================
 * STILI SEZIONE HIGHLIGHTS
 * =================================================================== */

/* Stile per i pulsanti del filtro */
#highlights-filter .nav-link {
    background-color: #343a40; /* Grigio scuro di default */
    color: var(--nyx-white);
    border: none;
    border-radius: 999px; /* Pasticca */
    padding: 0.5rem 1.5rem;
    margin: 0 0.5rem;
    font-weight: 700;
}

/* Stile per il pulsante attivo */
#highlights-filter .nav-link.active {
    background-color: #e67e22; /* Arancione */
    color: var(--nyx-white);
}

/* Stile per le card degli articoli */
.post-card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.post-card .card-title a {
    color: var(--color-headings);
    text-decoration: none;
}

.post-card .card-title a:hover {
    color: var(--nyx-orange);
}
.post-card-image-link {
    display: block;
    position: relative; /* Contesto per posizionare l'overlay */
    overflow: hidden; /* Nasconde parti dell'overlay che potrebbero fuoriuscire */
}

.post-card-image-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 1. Applichiamo un colore di sfondo solido */
    background-color: rgba(230, 126, 34, 0.85); /* Arancione semitrasparente */

    /* 2. Ritagliamo la forma esatta con clip-path */
    clip-path: polygon(0 0, 30% 0, 10% 100%, 0 100%);
    
    /* 3. L'effetto di transizione rimane uguale */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.post-card-image-link:hover::after {
    opacity: 1; /* Appare al passaggio del mouse */
}
.post-card .post-card-image-link {
    display: block;
    height: 270px;
    overflow: hidden;
}
.post-type-archive-professionista .post-card .post-card-image-link {
     height: 400px;
    
}

.post-card .post-card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.4s ease;
}

.post-card:hover .post-card-image-link img {
    filter: grayscale(100%);
    transform: scale(1.05);
}
.highlights-section .nav-item{
    margin:0px 8px 0px 8px
}
/* ===================================================================
 * STILI PER SINGLE POST (single.php)
 * =================================================================== */

.post-sidebar {
    position: sticky;
    top: 140px; /* Si attacca sotto l'header sticky */
}

/* Rende l'immagine di copertina quadrata */
.post-featured-image-square {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.post-featured-image-square::before {
    content: "";
    display: block;
    padding-top: 100%; /* Crea un box quadrato (altezza pari alla larghezza) */
}
.post-featured-image-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Effetto 'cover' */
}

.post-meta-details p {
    font-size: 0.9rem;
}
.post-meta-details i {
    color: var(--color-primary);
}

.post-navigation a {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text);
}
.post-navigation a:hover {
    color: var(--color-primary);
}



 /* ===================================================================
 * STILI PER SINGLE PROFESSIONISTA 
 * =================================================================== */

.professional-sidebar {
    background-color: var(--nyx-white);
    padding: 0rem 2rem;
    border: 1px solid var(--nyx-gray-200);
    border-radius: 8px;
}

.professional-title {
    font-size: 1.5rem;
    font-weight: 500;
    padding-left:5px;
}

.professional-role {
    font-size: 1rem;
    font-style: italic;
}


.contact-link i, .contact-link a{
    font-size: 1.2rem;
    width: 30px;
    color: #e57d22!important;
}

.contact-link:hover {
    color: #000;
}

.team-category-title {
    font-weight: 300;
    font-size: 2rem;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}

.people-section {
    position: relative; /* Contesto per il posizionamento */
    overflow: hidden;
    padding: 8rem 0; 
}

/* Creiamo un livello di sfondo virtuale per l'immagine */
.people-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Proprietà dell'immagine di sfondo */
    background-image: url('../images/galleria-bg.jpg'); /* <-- Inserito qui */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    /* Filtri applicati solo allo sfondo */
    filter: grayscale(100%); /* <-- Filtro bianco e nero */
    opacity: 0.5; /* <-- Opacità */
    
    z-index: 0; /* Lo mettiamo dietro a tutto */
}

 .people-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 8rem 0;
    background-attachment: fixed; 
 
}

.people-bg-shape-orange {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #e57d22b8; /* Mantenuto il tuo colore */
    clip-path: polygon(0 0, 70% 0, 35% 100%, 0 100%); /* Mantenuta la tua forma */
    z-index: 1;
}

.people-content-box {
    position: relative;
    z-index: 2;
    background-color: #ffffffa6; /* Leggermente più opaco per leggibilità */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    
    /* Correzione: larghezza responsiva con un massimo */
    width: 90%;
    max-width: 1400px;
    
    /* Mantenuto il tuo padding personalizzato */
    padding: 2rem 2rem 2rem 11%; 
}

#people-filter .nav-link {
    background-color: #e9ecef;
    color: #495057;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

#people-filter .nav-link.active {
    background-color: #e67e22;
    color: var(--nyx-white);
}

.profile-card {
    text-align: center;
    max-width: 250px;
    margin: 10px 5px;
}

/* Contenitore dell'immagine con altezza fissa, bordo e ombra */
.profile-card .profile-card-image-link {
    display: block;
    height: 320px;
    margin-bottom: 1rem;
    border: 5px solid var(--nyx-white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Stile dell'immagine per riempire il contenitore in modalità "cover" */
.profile-card .profile-card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stili per il testo sotto l'immagine (invariati) */
.profile-name {
    margin-top: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-name a {
    text-decoration: none;
    color: inherit;
}

.profile-role {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.7;
}
/* Nasconde le frecce di Splide quando sono disabilitate */
.splide__arrow[disabled] {
    display: none;
}
/* Sezione people home */
.people-section .nav-item{
    margin:0px 8px 0px 8px
}

/* ===================================================================
 * LAYOUT COLONNA PROFILO E POSIZIONAMENTO PULSANTE
 * =================================================================== */

.profile-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 352px; 
}

.profile-content-wrapper .entry-content {
    flex-grow: 1;
}

.profile-content-wrapper .btn-outline-animated {
    margin-top: auto;   
    margin-left: auto;  
    display: block;     
    width: fit-content; 
}

/* ===================================================================
 * STILI SEZIONE KEY DATA
 * =================================================================== */

.key-data-section .headings {
    font-weight: 300;
}

.animated-counter {
    font-weight: 800; /* Stile Extrabold */
    
    /* Effetto gradiente sul testo */
    background: linear-gradient(45deg, #e67e22, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* ===================================================================
 * STILI SEZIONE IMAGE STRIP (con Flexbox personalizzato)
 * =================================================================== */

.image-strip-container {
    display: flex;
    width: 100%;
    height: 280px;
}

.image-strip-item {
    flex: 1; /* Ogni immagine occupa una frazione uguale dello spazio */
    overflow: hidden; /* Nasconde le parti dell'immagine che escono */
}

.img-strip-item-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aggiungiamo il responsive per mobile */
@media (max-width: 767.98px) {
    .image-strip-container {
        flex-wrap: wrap; /* Manda a capo le immagini */
        height: auto; /* L'altezza diventa automatica */
    }
    .image-strip-item {
        flex-basis: 50%; /* Ogni immagine occupa il 50% della larghezza (2 per riga) */
        height: 200px; /* Diamo un'altezza fissa su mobile */
    }
}

/* ===================================================================
 * 4. COMPONENTI (PULSANTI, ETC.)
 * =================================================================== */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--nyx-black) !important;
}
.btn-primary:hover {
  /* Aggiungere una variabile per l'hover se si vuole un colore diverso */
  filter: brightness(0.9);
}

/* ===================================================================
 * STILI FOOTER
 * =================================================================== */

footer{
    background-color: var( --nyx-orange);
}

.site-footer .footer-widget-content,
.site-footer .footer-widget-content p,
.site-footer .footer-widget-content li,
.site-footer .footer-widget-content a{
    font-weight: 300;
}
.site-footer .footer-widget-content a{
    color:#ffffff;
}

/* Barra inferiore bianca */
.footer-bottom {
    background-color: var(--nyx-white);
    color: var(--color-text);
}

.copyright-text p {
    font-size: 0.8rem;
    
    color: #6c757d; /* Grigio secondario */
}
.footer-bottom .custom-logo {
    max-height: 60px;
    width: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    margin:0px;
}
.footer-widget-title{
    color:#fff;
}

/* ===================================================================
 * EFFETTO HOVER LINK FOOTER CON LINEA ANIMATA
 * =================================================================== */


.site-footer .footer-widget-content a {
    position: relative;
    display: inline-block; /* Necessario per posizionare correttamente lo pseudo-elemento */
    padding-bottom: 8px; /* Crea un po' di spazio sotto per la linea */
    text-decoration: none;
}


.site-footer .footer-widget-content a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    
    width: 0%; /* Parte con larghezza zero */
    height: 1px; /* Spessore 1px */
    background-color: var(--nyx-white); /* Colore della linea (bianco su sfondo scuro) */
    
    transition: width 0.3s ease-in-out;
}

/* 3. Al passaggio del mouse, la linea si allarga al 100% */
.site-footer .footer-widget-content a:hover::after {
    width: 100%;
}

/* ===================================================================
 * 5. TEMPLATE DI PAGINA (PAGE.PHP)
 * =================================================================== */