/* menu_fix.css */

/* 1. Forcem la font del sistema (moderna) per a tota la barra */
.navbar, .navbar-brand, .nav-link, .dropdown-item {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 2. Fixem l'alçada i el farciment (padding) en PÍXELS exactes */
/* Això evita que si canvia la 'line-height' del cos, canvií l'alçada del menú */
.navbar {
    min-height: 60px !important;  /* Alçada mínima fixa */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;   /* Mida de lletra fixa */
}

/* 3. Evitem el salt lateral per la barra de desplaçament (Scrollbar) */
/* Si una pàgina és curta (sense scroll) i l'altra llarga (amb scroll), 
   la web es mou cap a l'esquerra. Això ho soluciona forçant sempre la barra. */
html {
    scrollbar-gutter: stable;
    /* O bé, la versió clàssica si el navegador és vell: */
    /* overflow-y: scroll; */
}
/* --- MEGA MENU DEFINITIU (Amb Script JS) --- */

/* 1. Posicionament del contenidor (Full Width) */
.has-mega-menu {
    position: static !important;
}

.has-mega-menu .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 90vw !important;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 !important; /* El padding el posarem al grid */
    
    border-radius: 0 0 10px 10px;
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background: white;
    display: block; /* Assegurem que es vegi el bloc */
    
    /* Inicialment amagat (Bootstrap ho gestiona, però per si de cas) */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    margin-top: 0px !important;
}

/* Mostrar quan fem hover o click (segons comportament Bootstrap) */
.has-mega-menu:hover .dropdown-menu,
.has-mega-menu .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
}

/* 2. LA GRAELLA (Flexbox o Grid) */
.mega-menu-grid {
    display: flex;       /* Posem les columnes una al costat de l'altra */
    flex-direction: row;
    justify-content: space-between; /* Espaiat automàtic */
    padding: 30px;
    gap: 20px;           /* Espai entre columnes */
    background-color: white;
    border-radius: 0 0 10px 10px;
}

/* 3. LES COLUMNES INDIVIDUALS */
.mega-menu-col {
    flex: 1;             /* Totes les columnes tenen la mateixa amplada inicial */
    min-width: 200px;    /* Amplada mínima */
    margin-bottom: 0;
    padding-left: 0;     /* Treure sagnat de llista */
    border-right: 1px solid #eee; /* Línia separadora */
}

/* Treure la línia de l'última columna */
.mega-menu-col:last-child {
    border-right: none;
}

/* 4. ESTIL DELS ELEMENTS DINS LA COLUMNA */
.mega-menu-col li {
    list-style: none; /* Sense punts */
}

/* Títols (links amb #) */
.mega-menu-col a[href="#"] {
    display: block;
    font-weight: 800;
    color: #004488;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #004488; /* Línia de color sota el títol */
    margin-bottom: 15px;
    padding-bottom: 5px;
    pointer-events: none;
    text-decoration: none;
}

/* Enllaços normals */
.mega-menu-col a:not([href="#"]) {
    display: block;
    padding: 6px 10px;
    color: #555;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
    /* --- NOVES LÍNIES PER GESTIONAR TEXTOS LLARGS --- */
    white-space: normal;  /* Permet saltar de línia automàticament */
    line-height: 1.3;     /* Ajusta l'espai entre línies perquè es llegeixi bé */
    max-width: 100%;      /* Assegura que no surti mai de la seva columna */
}

.mega-menu-col a:not([href="#"]):hover {
    background-color: #f0f4f8;
    color: #004488;
}