/* 
   B4US - Simplify IT
   Global Stylesheet for POC
   
   Questo file definisce l'identità visiva del brand B4US:
   - Colori: Verde Corporate (#28a745) e Grigio Scuro (#4a4a4a)
   - Tipografia: Moderna e pulita (Inter / Outfit)
   - Stile: Professionale, dinamico, orientato all'innovazione
*/

:root {
    --primary-color: #28a745;
    --secondary-color: #4a4a4a;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --nav-height: 100px;
    
    /* Variabili per il testo della navbar */
    --nav-text-size: 1rem;
    --nav-text-weight: 600;
    --nav-text-color: var(--secondary-color);
    --nav-text-hover: var(--primary-color);
    --nav-font-family: 'Inter', sans-serif;
}

/* Navbar Customizations */
.glass-nav {
    height: var(--nav-height) !important;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centra il container max-width */
}

/* Container interno della navbar per garantire costanza */
.nav-container {
    width: 100%;
    max-width: 1280px; /* Corrisponde a 7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-nav a {
    font-family: var(--nav-font-family) !important;
    font-size: var(--nav-text-size) !important;
    font-weight: var(--nav-text-weight) !important;
    color: var(--nav-text-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dark .glass-nav a {
    color: #cbd5e1 !important; /* slate-300 */
}

.glass-nav a:hover {
    color: var(--nav-text-hover) !important;
}

.nav-logo {
    height: 65px !important; 
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.05);
}

/* Pulsante Accedi nella navbar - Testo sempre bianco */
.glass-nav a.bg-primary,
.glass-nav a[href="/login"] {
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
}

.glass-nav a.bg-primary:hover,
.glass-nav a[href="/login"]:hover {
    color: #ffffff !important;
    background-color: #22a03d !important;
}

/* Mobile Menu Button - Assicurati che sia sempre visibile */
#mobile-menu-button {
    display: flex !important;
    z-index: 100;
}

/* Nascondi il menu button su desktop */
@media (min-width: 1024px) {
    #mobile-menu-button {
        display: none !important;
    }
}

/* Desktop Nav Dropdown */
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown:hover .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu .bg-white {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Mobile Menu Dropdown */
#mobile-menu {
    width: 100%;
    z-index: 99;
}

#mobile-menu a {
    color: var(--secondary-color) !important;
}

#mobile-menu a:hover {
    color: var(--primary-color) !important;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Typography & General */
body {
    padding-top: var(--nav-height); /* Spazio per la navbar fissa */
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Descrizione del sito nel CSS (Metadata/Comments) */
/* 
   B4US è una società di consulenza IT all'avanguardia. 
   Il nostro obiettivo è semplificare la tecnologia per le aziende, 
   trasformando la complessità in opportunità di crescita.
   Specializzati in: Cloud Transformation, Cybersecurity, Software Development.
*/

/* Stile globale per le icone Material Symbols */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Stile per le foto del team - Adatta e centra le immagini */
.aspect-\[4\/5\] img {
    object-fit: cover !important;
    object-position: center top !important;
}

/* Icone nella pagina login - Migliora visibilità e allineamento */
input[type="text"] + .material-symbols-outlined,
input[type="password"] + .material-symbols-outlined {
    font-size: 1.25rem !important;
}

button .material-symbols-outlined {
    vertical-align: middle;
}

/* Icone più grandi per meglio visibilità */
.material-symbols-outlined.text-3xl {
    font-size: 2rem !important;
}

.material-symbols-outlined.text-6xl {
    font-size: 4rem !important;
}

/* Animazioni per un tocco moderno */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

main, section {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Forza Light Mode di default */
html {
    background-color: var(--bg-light) !important;
    color: var(--secondary-color) !important;
}

/* Disabilita l'effetto delle classi dark di Tailwind */
:where(.dark *, .dark) {
    --tw-bg-opacity: 1 !important;
    background-color: initial !important;
    color: inherit !important;
}

body {
    background-color: var(--bg-light) !important;
    color: var(--secondary-color) !important;
}