/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&display=swap');

.ug-signature {
    font-family: 'Caveat', cursive; /* Een inkt-achtig, natuurlijk handschrift */
    font-size: 32px;
    color: #1C1D1B;
    margin-top: 24px;
    letter-spacing: 1px;
    transform: rotate(-2deg); /* Geeft het een iets natuurlijkere, scheve flow */
}

body {
    background-color: #F8F6F2 !important; /* warme off-white */
    color: #1C1D1B !important;
}

body h1, body h2, body h3 {
    color: #1A1A19 !important; /* antraciet voor de titels */
}

p {
    color: #2F302E !important; /* Iets zachter antraciet voor lange teksten */
}

/* ==========================================================================
   HEADER & NAVIGATIE CORRECTIES
   ========================================================================== */

/* Verberg de zoekfunctie/icoon in de header en navigatie volledig */
.main-navigation .search-item,
.site-header .widget_search {
    display: none !important;
}

/* ==========================================================================
   UNIVERSELE LUXE KNOPPEN (GenerateBlocks, WooCommerce & WordPress Standaard)
   ========================================================================== */

/* 1. Basis styling (Uitsluiting van .custom-stijl, .menu-toggle EN .search-submit) */
button:not(.custom-stijl):not(.menu-toggle):not(.search-submit),
input[type="button"]:not(.custom-stijl),
input[type="reset"]:not(.custom-stijl),
input[type="submit"]:not(.custom-stijl):not(.search-submit),
a.button:not(.custom-stijl),
.wp-block-button__link:not(.custom-stijl),
.gb-button:not(.custom-stijl) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 32px !important;
    background-color: #F8F6F2 !important; /* Off-white achtergrond */
    color: #1C1D1B !important; /* Antraciet tekst */
    border: 1px solid #1C1D1B !important; /* Strakke antraciet randlijn */
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.4s ease, border-color 0.4s ease !important;
}

/* 2. Hover state: Fade Hover (Rand en tekst lichter antraciet) */
button:not(.custom-stijl):not(.menu-toggle):not(.search-submit):hover,
input[type="button"]:not(.custom-stijl):hover,
input[type="reset"]:not(.custom-stijl):hover,
input[type="submit"]:not(.custom-stijl):not(.search-submit):hover,
a.button:not(.custom-stijl):hover,
.wp-block-button__link:not(.custom-stijl):hover,
.gb-button:not(.custom-stijl):hover {
    background-color: #F8F6F2 !important; 
    color: #6C6D6B !important; 
    border: 1px solid #6C6D6B !important; 
}

/* 3. SVG Pijltje: Basis animatie setup */
button:not(.custom-stijl):not(.menu-toggle):not(.search-submit) svg,
a.button:not(.custom-stijl) svg,
.wp-block-button__link:not(.custom-stijl) svg,
.gb-button:not(.custom-stijl) .gb-icon svg {
    margin-left: 12px !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 4. SVG Pijltje: Schuift opzij bij hover */
button:not(.custom-stijl):not(.menu-toggle):not(.search-submit):hover svg,
a.button:not(.custom-stijl):hover svg,
.wp-block-button__link:not(.custom-stijl):hover svg,
.gb-button:not(.custom-stijl):hover .gb-icon svg {
    transform: translateX(6px) !important;
}

/* ==========================================================================
   HEADER CORRECTIE
   ========================================================================== */

/* Dunne, strakke streep aan de onderkant van de header */
.site-header  {
    border-bottom: 1px solid #1C1D1B !important; 
}

/* ==========================================================================
   DROPS GRID (RESPONSIVE HTML BLOK)
   ========================================================================== */

/* De container */
.ug-drops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; 
    width: 100%;
    margin-bottom: 40px;
}

/* De individuele kaart */
.ug-drop-card {
    border: 1px solid #D1CFCA; /* Dunne grijze rand */
    background-color: transparent; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* De titel in de kaart - volgt nu jouw globale H3 font styling */
.ug-drop-card h3 {
    padding: 16px !important;
    margin: 0 !important;
    border-bottom: none; /* Lijn verwijderd voor een open ontwerp */
}

/* De afbeelding in de kaart - 1:1 ratio */
.ug-drop-card img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    padding: 0 16px 16px 16px; /* Geen padding boven, H3 heeft al padding onder */
    box-sizing: border-box; 
}

/* Mobiele weergave: 1 kolom */
@media (max-width: 768px) {
    .ug-drops-grid {
        grid-template-columns: 1fr;
        gap: 16px; 
    }
}

/* ==========================================================================
   DE FILOSOFIE GRID (3 KOLOMMEN TEKST)
   ========================================================================== */

/* Sectie witruimte */
.ug-philosophy-section {
    padding: 80px 0; /* Ademruimte boven en onder het hele blok */
    width: 100%;
}

/* De grid container */
.ug-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px; /* Grote, luxe witruimte tussen de tekstkolommen */
    max-width: 1200px; /* Houdt de breedte in lijn met de rest van je site */
    margin: 0 auto;
}

/* De individuele kolom */
.ug-philosophy-item {
    border-top: 1px solid #D1CFCA; /* De strakke 1px designlijn erboven */
    padding-top: 24px; /* Afstand tussen de lijn en de titel */
}

/* Typografie van de titels */
.ug-philosophy-item h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1C1D1B !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase; /* Optioneel: geeft een strak, redactioneel gevoel */
    letter-spacing: 0.05em;
}

/* Typografie van de tekst */
.ug-philosophy-item p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #2F302E !important;
    margin: 0 !important;
}

/* Mobiele weergave: netjes onder elkaar */
@media (max-width: 768px) {
    .ug-philosophy-section {
        padding: 40px 20px; /* Iets minder padding op mobiel */
    }
    
    .ug-philosophy-grid {
        grid-template-columns: 1fr; /* 1 kolom */
        gap: 40px; /* Voldoende ruimte tussen de blokken onder elkaar */
    }
}