/* ==========================================================================
   AG73 BUSINESS INTELLIGENCE - CENTRALE STYLESHEET (style.css)
   ========================================================================== */

/* ==========================================================================
   1. ALGEMENE BASIS INSTELLINGEN (VOLLEDIG SCHADUW- EN RANDLOOS)
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Calibri', sans-serif !important; 
}

body { 
    font-family: 'Calibri', sans-serif; 
    
    /* De complete achtergrond is strak en egaal WIT */
    background: #ffffff !important; 
    background-color: #ffffff !important;
    
    color: #111111; 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased;
    overflow: hidden; 
    
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100% !important;
}

/* ==========================================================================
   2. ZICHTBARE & COMPACTE HEADER EN DROPDOWN MENU
   ========================================================================== */
header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    
    /* De achtergrondfoto vult nu uitsluitend nog de headerbalk bovenin */
    background: url('../achtergrond.jpg') no-repeat center center !important; 
    background-size: cover !important; 
    
    z-index: 100000 !important; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); 
    overflow: visible !important; 
    isolation: isolate !important; 
}

.nav-container { 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 !important; 
    
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    
    /* DEFINITIEVE FIX: Dwingt het logo naar exact 20px vanaf de linker schermrand.
       Rechts behouden we 2rem ademruimte voor het menu. */
    padding: 6px 2rem 6px 20px !important; 
    box-sizing: border-box;
    overflow: visible !important;
}

ul.nav-menu { 
    display: flex; 
    list-style: none; 
    gap: 3.5rem; 
    overflow: visible !important;
}

.item { 
    position: relative; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 0.9rem; 
    color: #ffffff !important; /* Wit zodat het hoofdmenu goed afsteekt op de foto */
    padding: 0.2rem 0; 
    pointer-events: auto !important; 
}

.item a {
    text-decoration: none;
    color: #ffffff !important; 
}

.item:hover a,
.item:hover { 
    color: #000000 !important; 
}

/* DEKKEND WIT DROPDOWN SUBMENU */
.drop { 
    display: none; 
    position: absolute; 
    background: #ffffff !important; 
    padding: 0.5rem; 
    border-radius: 14px; 
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 240px; 
    z-index: 999999999 !important; 
    pointer-events: auto !important;
    transform-style: preserve-3d !important;
    backface-visibility: visible !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; 
}

.item:hover .drop { 
    display: block !important; 
}

.drop::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.drop a {
    text-decoration: none;
    color: #555555 !important;
    display: block;
}

.drop p { 
    margin: 0; 
    padding: 0.8rem 1.2rem; 
    font-size: 0.85rem; 
    font-weight: 400; 
    border-radius: 10px; 
    transition: all 0.2s ease; 
}

.drop p:hover { 
    background: rgba(0, 0, 0, 0.04); 
    color: #000000 !important; 
    transform: translateX(4px); 
}

/* HARDGECODEERDE AFMETINGEN LOGO & HARTSLAG CONTAINER */
.logo-container {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    height: 35px !important; 
    max-height: 35px !important;
    width: auto !important; 
    flex-shrink: 0 !important;
    overflow: visible !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.header-logo {
    height: 35px !important; 
    max-height: 35px !important;
    width: auto !important;  
    object-fit: contain !important;
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.logo-heartbeat-wrapper {
    position: relative;
    background-color: transparent;
    display: block;
    flex-grow: 1; 
    margin: 0 0 0 2rem; 
    height: 35px; 
    overflow: hidden; 
}

/* ==========================================================================
   3. HOOFDINDELING VAN DE PAGINA (SYNCHROON MEEVERSCHOVEN OP DE 20PX AS)
   ========================================================================== */
.hero-section { 
    width: 100% !important;
    max-width: 100% !important; 
    margin: 47px 0 0 0 !important; 
    
    /* GECORRIGEERD: Links ook op 20px gezet. Hierdoor lijnt de complete tekst- 
       en formulierkant weer vlijmscherp en loodrecht uit onder het logo! */
    padding: 2.5rem 2rem 0 20px !important; 
    
    display: grid !important; 
    grid-template-columns: 1.15fr 0.85fr !important; 
    gap: 6rem !important; 
    align-items: stretch !important; 
    flex-grow: 1 !important; 
    box-sizing: border-box !important;
    overflow: visible !important; 
}

.hero-text {
    width: 100% !important;
    height: 100% !important; 
    overflow-y: scroll !important; 
    background: transparent !important; 
    
    /* GECORRIGEERD: De padding-left staat strak op 0. 
       Hierdoor start de tekst direct op de uiterste linkerrand onder het logo! */
    padding: 2rem 2rem 2rem 0 !important; 
    
    box-sizing: border-box !important;
    display: block !important;
    box-shadow: none !important; 
    border: none !important; 
}

.hero-text h1 {
    color: #000000 !important; 
}

.hero-text::-webkit-scrollbar {
    width: 6px;
}
.hero-text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}
.hero-text::-webkit-scrollbar-thumb {
    background-color: rgba(213, 118, 75, 0.4); 
    border-radius: 10px;
}
.hero-text::-webkit-scrollbar-thumb:hover {
    background-color: #D3764B;
}

.tag {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #D3764B; 
    margin-bottom: 1.5rem;
}

.text-frame {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    isolation: isolate !important;
    display: block !important;
}

/* ==========================================================================
   4. RECHTERKOLOM: VISUALS EN ORANJE BADGE (100% SCHADUW- EN RANDLOOS)
   ========================================================================== */
.hero-visual { 
    position: relative !important; 
    width: 100% !important; 
    height: 100% !important;
    min-height: 0 !important; 
    z-index: 1 !important; 
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.image-wrapper {
    width: 100% !important;
    height: 100% !important; 
    max-height: 550px !important; 
    border-radius: 24px !important;
    overflow: visible !important; 
    position: relative !important; 
    z-index: 2 !important;
    background: transparent !important; 
    border: none !important; 
    outline: none !important;
    box-shadow: none !important; 
    padding: 0 !important; 
    margin: 0 !important;
}

.image-wrapper img {
    width: 100% !important;
    height: 100% !important; 
    object-fit: contain !important; 
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.badge { 
    position: absolute !important; 
    bottom: 30px !important; 
    left: -25px !important;  
    background: #EE6101 !important; 
    padding: 1.2rem 1.8rem !important; 
    font-size: 0.85rem !important; 
    font-weight: 600 !important; 
    letter-spacing: 2px !important;
    color: white !important; 
    z-index: 10 !important; 
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   5. BREDE FOOTER TAAKBALK (VERTICAAL GECENTREERD EN OP DE 20PX AS)
   ========================================================================== */
.hero-footer {
    width: 100% !important;
    height: 55px !important; 
    max-height: 55px !important;
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important; 
    box-sizing: border-box !important;
    flex-shrink: 0 !important; 
    margin: 0 !important;
    padding: 0 !important;
}

.footer-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* GECORRIGEERD: Boven/onder padding teruggebracht naar 15px zodat alles 
       weer prachtig ademend in het verticale midden tussen de lijn en het scherm zweeft. 
       Links ook vlijmscherp meegeschoven naar 20px voor de rechte as van boven naar beneden! */
    padding: 15px 2rem 15px 20px !important;
    
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    box-sizing: border-box !important;
}

.footer-graphs {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    height: 25px !important;
}

/* HARDGECODEERDE AFMETINGEN GRAFIEKBOXEN */
#microChartBox {
    width: 100px !important;
    height: 25px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 25px !important;
max-height: 25px !important;
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
}
#microDonutBox {
width: 25px !important;
height: 25px !important;
min-width: 25px !important;
max-width: 25px !important;
min-height: 25px !important;
max-height: 25px !important;
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
}
#microChartBox canvas,
#microDonutBox canvas {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
background: transparent !important;
}
/* BEZOEKERTELLER (RUSTIG DONKERGRIJS CONFORM HUISSTIJL) */
.footer-counter {
position: relative !important;
bottom: auto !important;
right: auto !important;
display: inline-block !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
line-height: 25px !important;
z-index: 10000 !important;
color: #444444 !important;
}
.footer-counter span {
color: #D3764B !important;
font-weight: bold !important;
margin-left: 5px !important;
display: inline-block !important;
}
/* ==========================================================================
6. MOBIEL RESPONSIVE STYLING
========================================================================== */
@media (max-width: 968px) {
body { overflow: auto; height: auto; }
.hero-section { grid-template-columns: 1fr; text-align: center; margin-top: 80px; padding: 1rem 1rem 0; gap: 4rem; height: auto; overflow: visible; }
.hero-text { width: 100%; height: auto !important; overflow-y: visible !important; padding: 2rem !important; background: transparent !important; border-radius: 24px; box-shadow: none !important; border: none !important; }
.hero-text p { margin: 0 auto 3rem !important; }
.hero-visual { max-width: 450px; margin: 0 auto; }
.image-wrapper { height: 500px; }
ul.nav-menu { gap: 1.5rem; }
.badge { left: 20px; bottom: 20px; }
.hero-text ul, .hero-text ol { padding-left: 0; list-style-position: inside; }
.hero-footer { position: static; height: auto !important; }
.footer-content { position: static; margin: 20px auto; justify-content: center; padding: 10px 1rem !important; }
}