/*
Theme Name: XVE Theme
Theme URI: https://xve.be
Author: XVE
Author URI: https://xve.be
Description: Modern WordPress theme voor XVE IT, Agency & Dev. Volledig responsive design met Tailwind CSS, custom menu walkers, modal support, en geïntegreerde business unit kleuren. Bevat custom post types voor cases en customer sliders, assessment quiz functionaliteit, en dynamische footer menu's.
Version: 1.3
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: Proprietary
License URI: https://xve.be
Text Domain: xve-be
Tags: business, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, theme-options, threaded-comments, translation-ready

Features:
- Tailwind CSS Framework
- Custom Menu Walkers (Primary, Mobile, Footer)
- Dynamic Footer Menu met Modal Support
- Custom Post Types (Cases, Customer Slider)
- Business Unit Kleuren (IT: Orange, Agency: Green, Dev: Blue)
- Gutenberg Block Editor Support
- Remote Support Modal
- Assessment Quiz Functionaliteit
- Responsive Design (Mobile-first)
- Image Lightbox voor Galleries
- Lucide Icons Integration
- Flatpickr Date Picker

Menu Locations:
- Primary Menu: Hoofdnavigatie in header
- Mobile Menu: Mobiele navigatie
- Footer Menu: Dynamische footer navigatie (2-kolommen layout)

Custom Post Types:
- Cases: Portfolio items met featured images en categorieën
- Customer Slider: Klant testimonials en reviews

Ontwikkeld door XVE.Agency - https://xve.be
*/

/* --- 1. Algemene Animaties --- */
@keyframes cursor-blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0; } 
}

@keyframes color-cycle {
    0%, 20%  { color: #ee731b; }
    25%, 53% { color: #8FCF41; }
    58%, 86% { color: #7eb6dc; }
    91%, 100% { color: #ee731b; }
}

.animate-xve-dot { 
    animation: cursor-blink 3s step-end infinite, color-cycle 9s linear infinite; 
}

/* --- 2. Server Lampjes --- */
@keyframes server-blink {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 15px currentColor; }
}

.server-light-1 { animation: server-blink 2s ease-in-out infinite; }
.server-light-2 { animation: server-blink 3s ease-in-out infinite 0.5s; }
.server-light-3 { animation: server-blink 2.5s ease-in-out infinite 1s; }

/* --- 3. Achtergrond (Pan & Zoom) --- */
@keyframes rotate-pan-zoom {
    0% { transform: rotate(90deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.1); }
    100% { transform: rotate(90deg) scale(1); }
}


/* --- 5. JS Transitions --- */
.unit-transition { transition: all 1000ms cubic-bezier(0.25, 1, 0.5, 1); }
.fade-transition { transition: all 1000ms ease-out; }

/* --- 6. WordPress Admin Bar Fix --- */
body.admin-bar nav {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar nav {
        top: 46px !important;
    }
}

/* Mobile menu also needs to be pushed down */
body.admin-bar #mobile-menu {
    top: 0;
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #mobile-menu {
        padding-top: 46px;
    }
}

/* --- 7. Entry Content Styling (Gutenberg Blocks) --- */
.entry-content {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #334155; /* slate-700 */
}

.entry-content > * + * {
    margin-top: 1.5rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 900;
    color: #0f172a; /* slate-900 */
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content h1 { font-size: 2.5rem; }
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.75rem; }
.entry-content h4 { font-size: 1.5rem; }
.entry-content h5 { font-size: 1.25rem; }
.entry-content h6 { font-size: 1.125rem; }

.entry-content p {
    margin-bottom: 1.25rem;
}

.entry-content strong {
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}

.entry-content em {
    font-style: italic;
}

.entry-content a {
    color: #ee731b; /* xve-it orange */
    text-decoration: none;
    font-weight: 600;
}

.entry-content a:hover {
    text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #334155; /* slate-700 */
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content li {
    margin-bottom: 0.5rem;
    color: #334155; /* slate-700 */
}

.entry-content blockquote {
    border-left: 4px solid #ee731b;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #475569; /* slate-600 */
}

.entry-content code {
    background-color: #f1f5f9; /* slate-100 */
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.875rem;
}

.entry-content pre {
    background-color: #f1f5f9; /* slate-100 */
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.entry-content figure {
    margin: 2rem 0;
}

.entry-content figcaption {
    font-size: 0.875rem;
    color: #64748b; /* slate-500 */
    text-align: center;
    margin-top: 0.5rem;
}

.entry-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #cbd5e1, transparent);
    margin: 2rem 0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.entry-content table th,
.entry-content table td {
    padding: 0.75rem;
    border: 1px solid #e2e8f0; /* slate-200 */
    text-align: left;
}

.entry-content table th {
    background-color: #f8fafc; /* slate-50 */
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}