/*
 * servitecbadajoz.com - Hoja de Estilos Principal
 *
 * Esta hoja de estilos define la apariencia base y la estructura
 * para todas las páginas del sitio web, complementando a Tailwind CSS.
*/

/* Estructura base del cuerpo de la página */
body {
    min-height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la pantalla */
    font-family: 'Inter', sans-serif; /* Familia de fuentes principal */
    display: flex;
    flex-direction: column; /* Organiza los elementos principales (header, main, footer) en una columna */
    background-color: #f8f9fa; /* Color de fondo general (bg-light) */
    color: #333; /* Color de texto por defecto (text-dark) */
    margin: 0;
    padding: 0;
}

/* Contenedor principal del contenido */
main {
    flex-grow: 1; /* Permite que el contenido principal crezca para ocupar el espacio disponible */
    width: 100%;
}

/* Estilos para el menú desplegable de navegación */
.dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: #1A2B45; /* Color de fondo (primary) */
    min-width: 180px; /* Ancho mínimo */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 50; /* Asegura que esté por encima de otros elementos */
    border-radius: 5px;
    padding: 10px 0;
    border-top: 2px solid #ffc107; /* Borde superior color secundario */
}

.dropdown-menu a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: none; /* Evita que el texto se ponga en mayúsculas */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.dropdown-menu a:hover {
    background-color: #0F1E30; /* Color de fondo al pasar el ratón (primary-dark) */
    color: #ffc107; /* Color de texto al pasar el ratón (secondary) */
}

/* Muestra el menú desplegable cuando se pasa el ratón por encima del elemento padre */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Ajustes de responsividad para el header en dispositivos pequeños */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
    }

    header nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    header nav li {
        width: 100%;
        text-align: center;
    }

     .dropdown-menu {
        position: static; /* El menú ya no es absoluto en móvil */
        width: 100%;
        box-shadow: none;
        border-top: none;
        background-color: #0F1E30; /* Un poco más oscuro para diferenciar */
    }
}