/* ==========================================================================
   MAIN GENERAL CSS - Core Identity & Global Framework
   Project: C4P LABS - Engineering Hub
   Author: Antonio D’Onofrio
   Description: Il framework CSS globale del laboratorio. Gestisce l'identità
                visiva primaria, la struttura dell'header, la sidebar
                universale e le classi utility condivise tra tutti i progetti.
   ========================================================================== */

/* 1. IMPORTAZIONE FONT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&family=Mountains+of+Christmas:wght@700&family=Playfair+Display:wght@700;900&family=Inter:wght@400;600;800&display=swap');

/* 2. VARIABILI E RESET */
:root {
    --dev-signature: "Antonio D’Onofrio";
    --primary-blue: #2563eb;
    --primary-rose: #e11d48;
    --slate-900: #0f172a;
    --slate-600: #475569;
    --slate-50: #f8fafc;
}

body {
    background-color: var(--slate-50);
    color: var(--slate-900);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* 3. TIPOGRAFIA */
.sans-font { font-family: 'Montserrat', sans-serif; }
.serif-font { font-family: 'Playfair Display', serif; }
.christmas-font { font-family: 'Mountains of Christmas', cursive; }
.btn-shadow { box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3); }

/* 4. HEADER E LOGO */
.main-header {
    background: white;
    border-bottom: 3px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.logo-wrapper {
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.logo-img {
    height: 50px;
    width: 50px;
    object-fit: contain;
    border-radius: 50%;
}

/* 5. MENU MOBILE E EFFETTI */
#side-menu { transition: transform 0.3s ease-in-out; }
#side-menu.open { transform: translateX(0); }

/* 6. OVERLAY & CANVAS(Z-index corretto a 140) */
.overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 140; 
    display: none;
}

.overlay-active {
    display: block !important;
}

#efxCanvas.efx {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* 7. UTILS */

/* SHAKE */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-8px); }
}

.shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}


/* 8. RESPONSIVE GLOBALE */

@media (max-width: 768px) {
    .serif-font { font-size: 1.2rem !important; }
    .christmas-font { font-size: 1.3rem !important; }
    .main-header { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .logo-img { height: 48px; width: 48px; }
}

@media (max-width: 480px) {
    .serif-font {
        font-size: 1.1rem !important;
        white-space: normal !important; /* Meglio normal su mobile molto piccolo */
    }
    .logo-img { height: 44px !important; width: 44px !important; }
}