/*
Theme Name: Hello Elementor Child
Author: Elementor Team
Template: hello-elementor
Version: 1.3.0
Description: Hello Elementor Child theme optimized for hybrid Gutenberg/Elementor workflow.
*/

/* =========================================
   1. ROOT VARIABELEN & RESPONSIVE BASE
   ========================================= */

/* --- Responsive Base Font Size (1rem basis) --- */
html {
    font-size: 100%; /* Standaard (meestal 16px) op desktop */
}

@media (max-width: 1024px) {
    html {
        font-size: 93.75%; /* ~15px op tablets/kleine laptops */
    }
}

@media (max-width: 767px) {
    html {
        font-size: 87.5%; /* ~14px op mobiel */
    }
}

:root {
    /* --- Kleuren --- */
	--color-bg: var(--e-global-color-fe6ef90, #E9E5DC);
	--color-border: var(--e-global-color-ed9efc9, #3f38271a);
    --color-text-primary: var(--e-global-color-text, #3F3827);
	--color-text-secondary: var(--e-global-color-6954626, #3F382780);
    --color-accent-primary: var(--e-global-color-primary, #283409);
    --color-accent-secondary: var(--e-global-color-9ad8b28, #6E7B4B);
	--color-active: var(--e-global-color-secondary, #CFC7B2);
    --color-white: var(--e-global-color-6991cca, #ffffff);
	--color-black: #16140E;
	
	/* --- Categorie Thema Kleuren (Master Palet) --- */
    --theme-water-main: #55aba5;
    --theme-water-bg:   #e6f5f4;
    --theme-water-text: var(--color-black);

    --theme-hout-main:  #8dae61;
    --theme-hout-bg:    #f1f6eb;
    --theme-hout-text:  var(--color-black);

    --theme-metaal-main: #a8adb1;
    --theme-metaal-bg:   #f5f6f7;
    --theme-metaal-text: var(--color-black);

    --theme-vuur-main:  #d94f3d;
    --theme-vuur-bg:    #fcf0ee;
    --theme-vuur-text:  var(--color-white);

    --theme-aarde-main: #e8c547;
    --theme-aarde-bg:   #fdf9e8;
    --theme-aarde-text: var(--color-black);
    
    /* --- DEFAULT THEMA --- */
    --current-theme-main: var(--color-accent-primary); 
    --current-theme-bg:   var(--color-bg);
    --current-theme-text: var(--color-white);

    /* --- Border Radius (nu in rem voor betere schaling) --- */
    --br-sm: 0.375rem;  /* was 6px */
    --br-md: 0.875rem;  /* was 14px */
    --br-lg: 1rem;      /* was 16px */
    --br-xl: 1.5rem;    /* was 24px */

    /* --- Typografie Schaling --- */
    /* Clamp blijft nuttig voor extra vloeiendheid bovenop de basis schaling */
    --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); 
    --fs-h1: clamp(2rem, 1.6rem + 2vw, 3rem);
    --fs-h2: clamp(1.625rem, 1.4rem + 1.125vw, 2.25rem);
}

/* =========================================
   2. GLOBALE STYLING (BASE)
   ========================================= */

@media (max-width: 767px) {
    body {
        padding-bottom: 60px !important; 
    }
}

body {
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--e-global-color-text, var(--color-text-primary));
    -webkit-font-smoothing: antialiased;
}

.content {
	padding-top: 6em !important;
	padding-bottom: 6em !important;
}

.content.page {
	padding-top: 6em !important;
	padding-bottom: 8em !important;
}

@media (max-width: 1024px) {
	.content {
		padding-top: 4em !important;
		padding-bottom: 4em !important;
	}
	.content.page {
		padding-top: 4em !important;
		padding-bottom: 6em !important;
	}
}

@media (max-width: 767px) {
	.content {
		padding-top: 4em !important;
		padding-bottom: 4em !important;
	}
	.content.page {
		padding-top: 4em !important;
		padding-bottom: 6em !important;
	}
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4, h5 a, h6 a {
    color: var(--e-global-color-primary) !important;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-primary-font-weight) !important;
    letter-spacing: var(--e-global-typography-primary-letter-spacing) !important;
	line-height: 1.6 !important;
	transition: color 0.3s ease  !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4:hover, h5 a:hover, h6 a:hover {
    color: var(--color-accent-secondary) !important;
}

.elementor-widget-loop-grid .elementor-grid {
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
}

/* --- Algemene Link Styling & Utility Class --- */

/* Definieer de stijl in een herbruikbare selector */
.elementor-widget-theme-post-content p a,
.elementor-widget-theme-post-content li a,
.elementor-widget-text-editor a,
.link-style a .elementor-button-text { 
	font-family: var(--e-global-typography-3c01987-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-3c01987-font-weight) !important;
    letter-spacing: var(--e-global-typography-3c01987-letter-spacing);
	
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--e-global-color-secondary, var(--color-accent-secondary)) !important;
    text-underline-offset: 0.3em  !important;
    text-decoration-thickness: 1px !important;
    transition: all 0.3s ease  !important;
    color: var(--color-accent-primary)  !important;
	text-transform: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Hover styles */
.elementor-widget-theme-post-content p a:hover,
.elementor-widget-theme-post-content li a:hover,
.elementor-widget-text-editor a:hover,
.link-style a:hover .elementor-button-text {
    text-underline-offset: 0.15em  !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: currentColor !important;
    color: var(--color-accent-secondary) !important; 
    background-color: transparent !important;
}


/* =========================================
   3. GUTENBERG CONTENT BINNEN ELEMENTOR
   Target: .elementor-widget-theme-post-content
   ========================================= */

.elementor-widget-theme-post-content {
    display: flex;
    flex-direction: column !important;
    row-gap: 1em !important;
    font-size: var(--fs-body);
}

.elementor-widget-theme-post-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-widget-theme-post-content > h2,
.elementor-widget-theme-post-content > h3 {
    margin-top: 1.5em !important;
}

/* --- 3.1 Lijsten (ul, ol) --- */
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
    padding-left: 1.5em;
}

.elementor-widget-theme-post-content li {
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}

.elementor-widget-theme-post-content li::marker {
    color: var(--e-global-color-secondary, var(--color-accent-secondary));
    font-weight: 700;
}

/* --- 3.2 Quotes (blockquote) --- */
.elementor-widget-theme-post-content blockquote {
    font-style: italic;
    border-left: 4px solid var(--e-global-color-secondary, var(--color-accent-secondary));
    padding: 0.5em 0 0.5em 1.5em;
    margin: 0 !important;
}

.elementor-widget-theme-post-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   4. BUTTONS & FILE DOWNLOADS
   ========================================= */

.elementor-widget-theme-post-content .wp-block-buttons {
    gap: 1rem !important;
    flex-wrap: wrap;
	margin-top: 1em !important;
	margin-bottom: 1em !important;
}

/* --- 4.1 Basis Button Styling (Primair) --- */
/* Dit is de standaard knop: Donkergroene achtergrond & rand, witte tekst */
.elementor-widget-theme-post-content .wp-element-button,
.elementor-widget-theme-post-content .wp-block-button__link,
.elementor-widget-theme-post-content .gform_button {
    background-color: var(--color-accent-primary) !important; /* #283409 */
    border: 2px solid var(--color-accent-primary) !important; /* #283409 */
    color: var(--color-white) !important;
    
    padding: 0.8em 1.2em !important;
    border-radius: var(--br-md) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2 !important;
    text-align: center;
    width: auto !important;
}

/* --- 4.2 Secundaire Knop (Outline) --- */
/* De tweede knop in een groep wordt automatisch een outline knop */
/* Achtergrond transparant, rand & tekst donkergroen (#283409) */
.elementor-widget-theme-post-content .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link {
    background-color: transparent !important;
    border-color: var(--color-accent-primary) !important; /* #283409 */
    color: var(--color-accent-primary) !important;        /* #283409 */
}

/* --- 4.3 Hover Staat (Geldt voor BEIDE: Primair & Outline) --- */
/* Achtergrond & rand worden lichter groen (#6E7B4B), tekst wit */
.elementor-widget-theme-post-content .wp-element-button:hover,
.elementor-widget-theme-post-content .wp-block-button__link:hover,
.elementor-widget-theme-post-content .gform_button:hover,
/* Zorg dat secundaire hover ook expliciet wordt overschreven */
.elementor-widget-theme-post-content .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link:hover {
    background-color: var(--color-accent-secondary) !important; /* #6E7B4B */
    border-color: var(--color-accent-secondary) !important;     /* #6E7B4B */
    color: var(--color-white) !important;
    transform: translateY(-2px);
    opacity: 1 !important; /* Zorg dat hover altijd volledig zichtbaar is */
}

/* --- 4.4 Active/Disabled Staat (De 4e knop in je plaatje) --- */
/* Als je op een knop klikt (:active) of als hij disabled is */
.elementor-widget-theme-post-content .wp-element-button:active,
.elementor-widget-theme-post-content .wp-block-button__link:active,
.elementor-widget-theme-post-content .gform_button:active,
.elementor-widget-theme-post-content .wp-element-button:disabled,
.elementor-widget-theme-post-content .gform_button:disabled {
    background-color: transparent !important;
    border-color: var(--color-active) !important; /* #CFC7B2 */
    color: var(--color-text-primary) !important;         /* #3F3827 */
    opacity: 0.5 !important;
    transform: none !important; /* Geen beweging bij klik/disabled */
}

/* --- 4.5 File Block (Download) --- */
.elementor-widget-theme-post-content .wp-block-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    background-color: rgba(0,0,0,0.03);
    padding: 1.5em;
    border-radius: var(--br-xl);
}

.elementor-widget-theme-post-content .wp-block-file .wp-element-button {
    margin: 0 !important;
    white-space: nowrap;
}

/* =========================================
   5. TABELLEN (Scroll Shadows)
   ========================================= */

.elementor-widget-theme-post-content .wp-block-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    background:
        linear-gradient(to right, #E9E5DC 30%, rgba(233, 229, 220, 0)),
        linear-gradient(to left, #E9E5DC 30%, rgba(233, 229, 220, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: #E9E5DC;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
}

.elementor-widget-theme-post-content .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px; 
    background-color: transparent;
    font-size: 0.9em;
}

.elementor-widget-theme-post-content .wp-block-table td,
.elementor-widget-theme-post-content .wp-block-table th {
    padding: 0.75em;
    border: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    vertical-align: top;
    min-width: 120px;
}

.elementor-widget-theme-post-content .wp-block-table th {
    background-color: rgba(0,0,0,0.05);
    font-weight: 700;
}

/* =========================================
   6. MEDIA: AFBEELDINGEN, VIDEO & GALERIJEN
   ========================================= */

.elementor-widget-theme-post-content figure,
.elementor-widget-theme-post-content .wp-block-embed,
.elementor-widget-theme-post-content .wp-block-gallery {
    margin: 0 !important;
    max-width: 100%;
	margin-top: 1em !important;
	margin-bottom: 1em !important;
}

.elementor-widget-theme-post-content img {
    height: auto !important;
    max-width: 100% !important;
    display: block;
    border-radius: var(--br-md) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.elementor-widget-theme-post-content .wp-block-gallery .wp-block-image,
.elementor-widget-theme-post-content .wp-block-gallery-item {
    border-radius: var(--br-md) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.elementor-widget-theme-post-content .wp-block-gallery .wp-block-image img,
.elementor-widget-theme-post-content .wp-block-gallery-item img {
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

.elementor-widget-theme-post-content figure::before,
.elementor-widget-theme-post-content figure a::before {
    border-radius: var(--br-md) !important;
}

.elementor-widget-theme-post-content .wp-block-embed,
.elementor-widget-theme-post-content .wp-block-embed__wrapper,
.elementor-widget-theme-post-content video,
.elementor-widget-theme-post-content iframe {
    border-radius: var(--br-md) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    display: block;
}

.elementor-widget-theme-post-content figcaption {
    text-align: center;
    font-size: 0.9em;
    color: var(--e-global-color-text, #666);
    margin-top: 0.8em;
    font-style: italic;
}

/* =========================================
   7. GRAVITY FORMS (Basis Styling)
   ========================================= */

.elementor-widget-theme-post-content .gform_wrapper {
    background-color: var(--e-global-color-white, #ffffff);
    padding: 2.5em;
    border-radius: var(--br-lg) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03) !important;
    margin: 0 !important;
}


.elementor-widget-theme-post-content .gform_title {
	margin-top: 0;
}

.elementor-widget-theme-post-content .gfield_label {
    font-weight: 600 !important;
    color: var(--e-global-color-primary, #3F3827) !important;
    margin-bottom: 0.5em !important;
}

.elementor-widget-theme-post-content .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.elementor-widget-theme-post-content .gform_wrapper textarea,
.elementor-widget-theme-post-content .gform_wrapper select {
    background-color: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 12px 16px !important;
    border-radius: var(--br-sm) !important;
    font-size: 1rem !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.elementor-widget-theme-post-content .gform_wrapper input:focus,
.elementor-widget-theme-post-content .gform_wrapper textarea:focus,
.elementor-widget-theme-post-content .gform_wrapper select:focus {
    background-color: #ffffff !important;
    border-color: var(--e-global-color-secondary, #6E7B4B) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(110, 123, 75, 0.1) !important;
}

/* =========================================
   8. MEDIA & TEKST (Side-by-side)
   ========================================= */

.elementor-widget-theme-post-content .wp-block-media-text {
    margin: 0 !important; /* Onze row-gap regelt de witruimte */
}

/* De afbeelding container binnen het blok */
.elementor-widget-theme-post-content .wp-block-media-text__media {
    margin: 0; /* Reset */
}

/* De afbeelding zelf */
.elementor-widget-theme-post-content .wp-block-media-text__media img {
    border-radius: var(--br-md) !important; /* 14px via variabele */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    width: 100%;
    height: auto;
    object-fit: cover; /* Zorgt dat plaatje de container mooi vult */
}

/* De content ernaast */
.elementor-widget-theme-post-content .wp-block-media-text__content {
    padding: 0 0 0 8%; /* Lekker wat ruimte tussen plaatje en tekst (als plaatje links staat) */
    font-size: var(--fs-body);
}

/* Correctie als plaatje rechts staat (media-text align right) */
.elementor-widget-theme-post-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding: 0 8% 0 0; 
}

/* Mobiele aanpassingen (als het blok stapelt) */
@media (max-width: 767px) {
    .elementor-widget-theme-post-content .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
        display: block !important; 
    }
    
    .elementor-widget-theme-post-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        margin-bottom: 1.5em; /* Ruimte tussen plaatje en tekst op mobiel */
    }

    .elementor-widget-theme-post-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        padding: 0 !important; /* Geen zij-padding nodig op mobiel */
    }
}


/* =========================================
   9. CATEGORIE THEMA'S (Dynamic Scoping)
   ========================================= */

/* --- Overige (Terugval naar default of specifiek thema) --- */
/* Nu gebruikt het de default kleuren, maar je kunt hier ook een thema toewijzen */
body.category-overige, .category-overige {
    --current-theme-main: var(--color-accent-primary);
	--current-theme-bg:   var(--color-bg);
    --current-theme-text: var(--color-white);
}

/* --- Thema 1: Water (Blauw/Teal) --- */
/* Gekoppeld aan: Ademhaling (Rust, flow, lucht) */
body.category-ademhaling, .category-ademhaling {
    --current-theme-main: var(--theme-water-main);
    --current-theme-bg:   var(--theme-water-bg);
    --current-theme-text: var(--theme-water-text);
}

/* --- Thema 2: Hout (Groen) --- */
/* Gekoppeld aan: Voeding & Beweging (Gezondheid, natuur, groei) */
body.category-voeding-beweging, .category-voeding-beweging {
    --current-theme-main: var(--theme-hout-main);
    --current-theme-bg:   var(--theme-hout-bg);
    --current-theme-text: var(--theme-hout-text);
}

/* --- Thema 3: Metaal (Grijs/Zilver) --- */
/* Gekoppeld aan: Mindset & Mindfulness (Helderheid, structuur) */
body.category-mindset-mindfulness, .category-mindset-mindfulness {
    --current-theme-main: var(--theme-metaal-main);
    --current-theme-bg:   var(--theme-metaal-bg);
    --current-theme-text: var(--theme-metaal-text);
}

/* --- Thema 4: Vuur (Rood) --- */
/* Gekoppeld aan: Relaties & Seksualiteit (Passie, warmte) */
body.category-relaties-seksualiteit, .category-relaties-seksualiteit {
    --current-theme-main: var(--theme-vuur-main);
    --current-theme-bg:   var(--theme-vuur-bg);
    --current-theme-text: var(--theme-vuur-text);
}

/* --- Thema 5: Aarde (Geel/Oker) --- */
/* Gekoppeld aan: Pierre Persoonlijk (Gronding, basis) */
body.category-pierre-persoonlijk, .category-pierre-persoonlijk {
    --current-theme-main: var(--theme-aarde-main);
    --current-theme-bg:   var(--theme-aarde-bg);
    --current-theme-text: var(--theme-aarde-text);
}

/* --- Categorie Achtergrond (Basis) --- */
.post {
    background-color: var(--current-theme-bg) !important;
/* 	border-top: 1px solid var(--e-global-color-6954626); */
	border-bottom: 1px solid var(--color-border);
}

/* --- Categorie Achtergrond (Gradient Overlay) --- */
.post::before {

}

/* --- Categorie Tags/Badges --- */ 
.custom-cat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Ruimte tussen de badges */
}

.cat-badge {
    background-color: var(--current-theme-main) !important;
    border-radius: var(--br-sm);
    padding: 6px 10px 6px 12px;
	display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    line-height: 1;
    transition: all 0.2s ease;
}

.cat-badge:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* --- De SVG Icoon Styling --- */
.cat-badge svg.cat-badge-icon {
    width: 12px!important;
    fill: var(--current-theme-text);
    top: -1px;           /* Kleine optische correctie om verticaal uit te lijnen */
}

/* Kleine correctie voor de tekst ernaast */
.cat-badge .cat-name {
    position: relative;
	color: var(--current-theme-text) !important;
    font-family: var(--e-global-typography-accent-font-family) !important;
    font-size: 0.65em !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
	display: block !important;
}



/* =========================================
   10. ARCHIVE
   ========================================= */

/* --- H2 Styling --- */
.elementor-location-archive h2 a {
	font-size: 1.25em !important;
    line-height: 1.5 !important;
}

/* --- Excerpt Styling --- */
.elementor-location-archive .custom-smart-excerpt p {
    margin-bottom: 0 !important;
}

/* --- Link Styling --- */
.elementor-location-archive .link-style .elementor-button {
	background: transparent !important;
	padding: 0 !important;
}

.elementor-location-archive .link-style a .elementor-button-text {
	text-underline-offset: 0.6em !important;
}
.elementor-location-archive .link-style a:hover .elementor-button-text {
    text-underline-offset: 0.5em !important;
}

.elementor-location-archive .link-style a .elementor-button-icon svg {
    width: 12px!important;
    fill: var(--color-accent-primary);
    top: -1px;
	transition: all 0.2s ease;
}

.elementor-location-archive .link-style a:hover .elementor-button-icon svg {
    transform: translateX(2px);
	fill: var(--color-accent-secondary);
}