/* 
 * Styling voor de Low Code Pro banner module
 */

/* Hero Section */
#hero, [id^="hero-"] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative; /* Needed for particles.js container */
    background: linear-gradient(45deg, rgba(106, 17, 203, 0.8), rgba(37, 117, 252, 0.8)); /* Fallback gradient */
    overflow: hidden; /* Contain particles */
}

#particles-js, .particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* Behind content */
    background-color: #1a1a2e; /* Default dark background for particles */
}

/* Basis hero-content stijlen */
.hero-content {
    position: relative;
    z-index: 2; /* Above particles */
    width: 100%;
    padding: 0 15px;
    pointer-events: none; /* Dit zorgt ervoor dat mouse events door de hero-content gaan */
}

/* Zorg ervoor dat interactieve elementen binnen hero-content wel klikbaar blijven */
.hero-content h1,
.hero-content p,
.hero-content a,
.hero-content button,
.hero-content .btn {
    pointer-events: auto; /* Herstel pointer events voor interactieve elementen */
}

/* Specifieke stijlen op basis van alignment */
.hero-content.alignment-center {
    text-align: center;
    max-width: none; /* Alleen max-width instellen voor gecentreerde tekst */
    margin: 0 auto; /* Auto marges houden de content in het midden */
    width: 100%; /* Volledige breedte gebruiken */
}

.hero-content.alignment-left {
    text-align: left;
    margin-right: auto;
    padding-left: 50px; /* Extra padding links voor betere leesbaarheid */
    max-width: none; /* Geen maximum breedte beperking */
    width: 100%; /* Volledige breedte gebruiken */
}

.hero-content.alignment-right {
    text-align: right;
    margin-left: auto;
    padding-right: 50px; /* Extra padding rechts voor betere leesbaarheid */
    max-width: none; /* Geen maximum breedte beperking */
    width: 100%; /* Volledige breedte gebruiken */
}

/* Specifieke stijlen voor content binnen alignment opties */
.hero-content.alignment-left h1,
.hero-content.alignment-left p,
.hero-content.alignment-right h1,
.hero-content.alignment-right p {
    max-width: none; /* Geen maximum breedte voor elementen */
    width: 100%; /* Volledige beschikbare breedte gebruiken */
}

.hero-content h1 {
    font-size: 4rem; /* Larger hero title */
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    width: 100%; /* Zorg dat koppen volledige breedte gebruiken */
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    width: 100%; /* Zorg dat paragrafen volledige breedte gebruiken */
}

/* Button styling */
.btn {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary-custom {
    background-color: #6a11cb; /* Default primary color */
    color: #fff;
}

.btn-primary-custom:hover {
    background-color: #5810b3; /* Darker primary color on hover */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.btn-lg-custom {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* Animate.css Integration Helpers */
.animate__animated {
    /* Base class already provided by Animate.css */
    /* Add custom delay/duration classes if needed */
}

.animate__delay-1s { --animate-delay: 1s; }
.animate__delay-2s { --animate-delay: 2s; }
.animate__delay-3s { --animate-delay: 3s; }

.animate__slow { --animate-duration: 1.5s; }
.animate__slower { --animate-duration: 2s; }
.animate__fast { --animate-duration: 0.8s; }
.animate__faster { --animate-duration: 0.5s; }

/* Betere container stijlen voor de volledige breedte opties */
.container-fluid .hero-content {
    max-width: none; /* Geen maximum breedte voor container-fluid */
    width: 100%; /* Volledige breedte */
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .hero-content h1 { font-size: 3rem; }
    .hero-content p { font-size: 1.1rem; }
    #hero, [id^="hero-"] { min-height: 80vh; }
    .hero-content.alignment-left { padding-left: 30px; }
    .hero-content.alignment-right { padding-right: 30px; }
}

@media (max-width: 767.98px) {
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1rem; }
    .btn-lg-custom { padding: 0.8rem 2rem; font-size: 1rem; }
    #hero, [id^="hero-"] { min-height: 70vh; }
    .hero-content.alignment-left { padding-left: 20px; }
    .hero-content.alignment-right { padding-right: 20px; }
}

@media (max-width: 575.98px) {
    .hero-content h1 { font-size: 2rem; }
    #hero, [id^="hero-"] { min-height: 60vh; }
    .hero-content.alignment-left { padding-left: 15px; }
    .hero-content.alignment-right { padding-right: 15px; }
}