/* ============================================================
 * CEULEMANS BVBA — Design System
 * ------------------------------------------------------------
 * Versie:   1.0
 * Stack:    Elementor Pro + OceanWP (child) + ACF Pro
 * Inladen:  Via Code Snippets (zie ceulemans-design-system.php)
 *           OF via Site Settings > Custom CSS
 *           OF via child theme style.css
 *
 * Volgorde van toepassing:
 *   1) Globals (CSS variabelen, body, headings)
 *   2) Componenten (buttons, cards, forms, header, footer)
 *   3) Utilities (helpers)
 *   4) Animaties + reduced motion
 * ============================================================ */


/* ============================================================
 * 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 * ============================================================ */

:root {
    /* ---- Kleuren: primair (vastgelegd door klant) ---- */
    --c-primary:           #204B8A;   /* Blauw — bouw, hoofdacties */
    --c-secondary:         #4C9D45;   /* Groen — tuin, success */
    --c-text:              #1A1A1A;   /* Bodytekst (CMYK 63/52/51/100) */

    /* ---- Kleuren: afgeleid ---- */
    --c-primary-dark:      #183A6B;   /* Hover blauw */
    --c-primary-light:     #2E6DB8;   /* Lichter blauw */
    --c-primary-soft:      #E6ECF4;   /* Ultra-licht blauw — section bg */

    --c-secondary-dark:    #3B7D36;   /* Hover groen */
    --c-secondary-light:   #6CB964;   /* Lichter groen */
    --c-secondary-soft:    #E8F3E7;   /* Ultra-licht groen — section bg */

    /* ---- Kleuren: neutraal ---- */
    --c-text-muted:        #6B6B6B;
    --c-text-light:        #FFFFFF;
    --c-bg-white:          #FFFFFF;
    --c-bg-light:          #F7F8FA;
    --c-bg-dark:           #1A1A1A;
    --c-border:            #E5E5E5;

    /* ---- Kleuren: functioneel ---- */
    --c-success:           #4C9D45;
    --c-error:             #DC2626;
    --c-warning:           #F59E0B;

    /* ---- Typografie ---- */
    --font-heading:        'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body:           'Inter', system-ui, -apple-system, sans-serif;

    /* ---- Spacing (8px-base) ---- */
    --space-xs:            4px;
    --space-sm:            8px;
    --space-md:            16px;
    --space-lg:            24px;
    --space-xl:            32px;
    --space-2xl:           48px;
    --space-3xl:           64px;
    --space-4xl:           96px;
    --space-5xl:           128px;

    /* ---- Border radius ---- */
    --radius-sm:           4px;
    --radius-md:           8px;
    --radius-lg:           16px;
    --radius-full:         9999px;

    /* ---- Shadows ---- */
    --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-hover:        0 12px 32px rgba(0, 0, 0, 0.12);

    /* ---- Animatie ---- */
    --duration-fast:       150ms;
    --duration-normal:     300ms;
    --duration-slow:       500ms;
    --ease-default:        cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --container-max:       1200px;
    --container-wide:      1440px;
    --header-height:       80px;
    --header-height-mobile:64px;
    --topbar-height:       40px;
}


/* ============================================================
 * 2. GLOBAL DEFAULTS
 * Body + heading basics. Elementor's Theme Style overschrijft
 * de meeste van deze waardes — we zetten ze hier als safety net.
 * ============================================================ */

body,
.elementor-widget-text-editor,
.elementor-widget-heading {
    font-family: var(--font-body);
    color: var(--c-text);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--font-heading);
    color: var(--c-text);
    font-weight: 700;
}


/* ============================================================
 * 3. KNOPPEN
 * Voorzien voor Elementor Button Widget via class-targeting.
 * Pas in Elementor: Button > Advanced > CSS Classes >
 *   "btn-ceulemans-primary" / "btn-ceulemans-secondary" / etc.
 * ============================================================ */

/* ---- Generieke basis voor alle Ceulemans-knoppen ---- */
.btn-ceulemans-primary,
.btn-ceulemans-secondary,
.btn-ceulemans-outline,
.btn-ceulemans-ghost,
.btn-ceulemans-stihl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl) !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid transparent !important;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default) !important;
}

@media (max-width: 767px) {
    .btn-ceulemans-primary,
    .btn-ceulemans-secondary,
    .btn-ceulemans-outline,
    .btn-ceulemans-ghost,
    .btn-ceulemans-stihl {
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
}

/* ---- Primary: blauw ---- */
.btn-ceulemans-primary,
.btn-ceulemans-primary .elementor-button {
    background-color: var(--c-primary) !important;
    color: var(--c-text-light) !important;
    border-color: var(--c-primary) !important;
}

.btn-ceulemans-primary:hover,
.btn-ceulemans-primary:focus,
.btn-ceulemans-primary .elementor-button:hover {
    background-color: var(--c-primary-dark) !important;
    border-color: var(--c-primary-dark) !important;
    color: var(--c-text-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---- Secondary: groen ---- */
.btn-ceulemans-secondary,
.btn-ceulemans-secondary .elementor-button {
    background-color: var(--c-secondary) !important;
    color: var(--c-text-light) !important;
    border-color: var(--c-secondary) !important;
}

.btn-ceulemans-secondary:hover,
.btn-ceulemans-secondary:focus,
.btn-ceulemans-secondary .elementor-button:hover {
    background-color: var(--c-secondary-dark) !important;
    border-color: var(--c-secondary-dark) !important;
    color: var(--c-text-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---- Outline: voor "Lees meer", "Bekijk alle..." ---- */
.btn-ceulemans-outline,
.btn-ceulemans-outline .elementor-button {
    background-color: transparent !important;
    color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}

.btn-ceulemans-outline:hover,
.btn-ceulemans-outline:focus,
.btn-ceulemans-outline .elementor-button:hover {
    background-color: var(--c-primary) !important;
    color: var(--c-text-light) !important;
    transform: translateY(-1px);
}

/* ---- Outline-light: outline voor donkere achtergronden (hero) ---- */
.btn-ceulemans-outline-light,
.btn-ceulemans-outline-light .elementor-button {
    background-color: transparent !important;
    color: var(--c-text-light) !important;
    border: 2px solid var(--c-text-light) !important;
    padding: var(--space-md) var(--space-xl) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--duration-normal) var(--ease-default) !important;
}

.btn-ceulemans-outline-light:hover {
    background-color: var(--c-text-light) !important;
    color: var(--c-primary) !important;
}

/* ---- Ghost: subtiel, voor sub-acties ---- */
.btn-ceulemans-ghost,
.btn-ceulemans-ghost .elementor-button {
    background-color: transparent !important;
    color: var(--c-primary) !important;
    border-color: transparent !important;
    padding: var(--space-sm) var(--space-md) !important;
}

.btn-ceulemans-ghost:hover {
    background-color: var(--c-primary-soft) !important;
    color: var(--c-primary-dark) !important;
}

/* ---- Stihl shop knop (top bar / header) ---- */
.btn-ceulemans-stihl,
.btn-ceulemans-stihl .elementor-button {
    background-color: var(--c-secondary) !important;
    color: var(--c-text-light) !important;
    border-color: var(--c-secondary) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
}

.btn-ceulemans-stihl:hover {
    background-color: var(--c-secondary-dark) !important;
    border-color: var(--c-secondary-dark) !important;
}

.btn-ceulemans-stihl::after {
    content: ' →';
    font-size: 1.1em;
}


/* ============================================================
 * 4. CARDS
 * Generieke card-stijl. Toepassen via CSS Class op Elementor
 * containers: "ceulemans-card"
 * ============================================================ */

.ceulemans-card {
    background-color: var(--c-bg-white) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.ceulemans-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* ---- Categoriekaart: foto + titel + subtle overlay ---- */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.category-card img,
.category-card .elementor-widget-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-default);
}

.category-card:hover img {
    transform: scale(1.05);
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(32, 75, 138, 0) 0%,
        rgba(32, 75, 138, 0) 50%,
        rgba(32, 75, 138, 0.7) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.category-card .category-card-title {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    z-index: 2;
    color: var(--c-text-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
}

/* ---- Nieuwskaart: "Lees meer" knop IN de fotokader ---- */
.news-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--c-bg-white);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-default);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.news-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-default);
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-readmore {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    background-color: var(--c-primary);
    color: var(--c-text-light);
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.news-card-content {
    padding: var(--space-lg);
}

.news-card-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.news-card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text);
    margin-bottom: var(--space-sm);
}


/* ============================================================
 * 5. FORMULIEREN (Forminator)
 * Selectors targeting Forminator's standaard structure.
 * ============================================================ */

.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui input[type="url"],
.forminator-ui textarea,
.forminator-ui select {
    background-color: var(--c-bg-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    color: var(--c-text) !important;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default) !important;
}

.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(32, 75, 138, 0.15) !important;
    outline: none !important;
}

.forminator-ui .forminator-error input,
.forminator-ui .forminator-error textarea,
.forminator-ui .forminator-error select {
    border-color: var(--c-error) !important;
}

.forminator-ui label {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--c-text) !important;
    margin-bottom: var(--space-sm) !important;
}

.forminator-ui button[type="submit"],
.forminator-ui .forminator-button {
    background-color: var(--c-primary) !important;
    color: var(--c-text-light) !important;
    padding: var(--space-md) var(--space-xl) !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default) !important;
}

.forminator-ui button[type="submit"]:hover,
.forminator-ui .forminator-button:hover {
    background-color: var(--c-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}


/* ============================================================
 * 6. HEADER (top bar + main header)
 * Top bar wordt typisch via een aparte Elementor section in
 * Theme Builder gebouwd. Class op de section: "ceulemans-topbar"
 * ============================================================ */

.ceulemans-topbar {
    background-color: var(--c-primary) !important;
    color: var(--c-text-light) !important;
    min-height: var(--topbar-height);
    font-family: var(--font-body);
    font-size: 14px;
}

.ceulemans-topbar a {
    color: var(--c-text-light) !important;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.ceulemans-topbar a:hover {
    opacity: 0.8;
    color: var(--c-text-light) !important;
}

.ceulemans-topbar .topbar-info {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.ceulemans-topbar .topbar-info-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

@media (max-width: 767px) {
    .ceulemans-topbar {
        font-size: 13px;
    }
    .ceulemans-topbar .topbar-info {
        gap: var(--space-md);
    }
    /* Op mobile: tekst-labels verbergen, enkel iconen tonen voor compactheid */
    .ceulemans-topbar .topbar-text-label {
        display: none;
    }
}

/* ---- Main header — sticky shadow on scroll ---- */
.ceulemans-header {
    background-color: var(--c-bg-white);
    transition: box-shadow var(--duration-normal) var(--ease-default);
}

.ceulemans-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

/* ---- Menu items styling ---- */
.ceulemans-menu .elementor-nav-menu > li > a,
.ceulemans-menu .elementor-nav-menu a {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--c-text) !important;
    transition: color var(--duration-fast) var(--ease-default) !important;
}

.ceulemans-menu .elementor-nav-menu > li > a:hover,
.ceulemans-menu .elementor-nav-menu .current-menu-item > a {
    color: var(--c-primary) !important;
}


/* ============================================================
 * 7. FOOTER
 * Class op de footer Theme Builder template: "ceulemans-footer"
 * ============================================================ */

.ceulemans-footer {
    background-color: var(--c-bg-dark) !important;
    color: var(--c-text-light) !important;
    font-family: var(--font-body);
}

.ceulemans-footer h2,
.ceulemans-footer h3,
.ceulemans-footer h4,
.ceulemans-footer .elementor-heading-title {
    color: var(--c-text-light) !important;
    font-family: var(--font-heading);
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.ceulemans-footer a {
    color: var(--c-text-light) !important;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.ceulemans-footer a:hover {
    opacity: 0.7;
    color: var(--c-text-light) !important;
}

.ceulemans-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-muted);
    font-size: 13px;
    padding-top: var(--space-lg);
    margin-top: var(--space-2xl);
}


/* ============================================================
 * 8. HERO
 * Class op de hero section: "ceulemans-hero"
 * ============================================================ */

.ceulemans-hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .ceulemans-hero {
        min-height: 480px;
    }
}

@media (max-width: 767px) {
    .ceulemans-hero {
        min-height: 400px;
    }
}

/* Donkere gradient-overlay voor leesbaarheid van witte tekst */
.ceulemans-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.ceulemans-hero > .elementor-container {
    position: relative;
    z-index: 2;
}

.ceulemans-hero .elementor-heading-title {
    color: var(--c-text-light) !important;
}


/* ============================================================
 * 9. EYEBROW / OVERLINE & LABELS
 * Voor kleine labels boven titels: "SINDS 1983", "PROMO" etc.
 * Toepassen als CSS Class: "eyebrow"
 * ============================================================ */

.eyebrow,
.eyebrow .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--c-primary) !important;
    margin-bottom: var(--space-sm) !important;
}

.eyebrow.eyebrow-light,
.eyebrow.eyebrow-light .elementor-heading-title {
    color: var(--c-text-light) !important;
}

.eyebrow.eyebrow-secondary,
.eyebrow.eyebrow-secondary .elementor-heading-title {
    color: var(--c-secondary) !important;
}

.category-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-primary);
    background-color: var(--c-primary-soft);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}


/* ============================================================
 * 10. UTILITIES (helpers)
 * Klein setje text/bg utilities voor wanneer Elementor's
 * ingebouwde controls niet volstaan.
 * ============================================================ */

.text-primary    { color: var(--c-primary) !important; }
.text-secondary  { color: var(--c-secondary) !important; }
.text-muted      { color: var(--c-text-muted) !important; }
.text-light      { color: var(--c-text-light) !important; }

.bg-primary      { background-color: var(--c-primary) !important; }
.bg-primary-soft { background-color: var(--c-primary-soft) !important; }
.bg-secondary    { background-color: var(--c-secondary) !important; }
.bg-secondary-soft { background-color: var(--c-secondary-soft) !important; }
.bg-light        { background-color: var(--c-bg-light) !important; }
.bg-dark         { background-color: var(--c-bg-dark) !important; }


/* ============================================================
 * 11. ANIMATIES
 * Subtiele fade-up + scale-on-hover utilities.
 * Voor scroll-reveals: gebruik Elementor's Motion Effects
 * (Advanced > Motion Effects > Entrance Animation: Fade In Up)
 * ============================================================ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp var(--duration-slow) var(--ease-default) both;
}

.fade-up-delay-1 { animation-delay: 100ms; }
.fade-up-delay-2 { animation-delay: 200ms; }
.fade-up-delay-3 { animation-delay: 300ms; }
.fade-up-delay-4 { animation-delay: 400ms; }


/* ============================================================
 * 12. REDUCED MOTION (toegankelijkheid — verplicht)
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
 * 13. RESPONSIVE SECTION PADDING (helpers)
 * Toepassen op Elementor sections via CSS Class.
 * ============================================================ */

.section-pad-default {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.section-pad-large {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

.section-pad-small {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

@media (max-width: 1023px) {
    .section-pad-default,
    .section-pad-large {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
}

@media (max-width: 767px) {
    .section-pad-default,
    .section-pad-large {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    .section-pad-small {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
}


/* ============================================================
 * EINDE
 * ============================================================ */