/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   BLOCKSY CHILD THEME - CODE VOOR HET MENU EN LOGO
   ========================================================================== */
body {
	background-color: #F3F1EC !important;
}

/* Het logo BOVEN het menu */
header [data-row="middle"] .ct-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important; /* Ruimte tussen logo en menu */
    
    /* Deze twee regels voorkomen dat het menu gigantisch groot wordt bij het scrollen */
    min-height: auto !important;
    height: auto !important;
}

/* 2. Het logo en menu mooi in het midden uitlijnen */
[data-row="middle"] [data-column="start"],
[data-row="middle"] [data-column="middle"] {
    width: 100% !important;
    justify-content: center !important;
    min-height: auto !important;
}

/* 1. Pas de achtergrond toe op de container én alle mogelijke sticky-varianten */
.ct-sticky-container,
[data-sticky],
[data-sticky*="shrink"],
[data-sticky*="yes"] {
    /* De afbeelding als achtergrond aanroepen */
    background-image: url('https://fietsendrager-megastore.nl/wp-content/uploads/2026/06/metallic.png') !important;
    
    /* Zorgt dat de metallic textuur de volledige balk bedekt */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Luxe contrastlijnen aan de randen */
    border: none !important;
    
    /* Schaduwen voor dieptewerking */
    box-shadow: 
        inset 0 0px 2px rgba(255, 255, 255, 0.5), 
        0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Zorg dat de rijen ALTIJD transparant zijn, ook tijdens het scrollen/sticky-status */
[data-row="top"], 
[data-row="middle"],
[data-sticky] [data-row="top"],
[data-sticky] [data-row="middle"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3. Geef de achtergrondbalk van het menu een mooie lichtgrijze kleur */
[data-row="middle"] {
    --shrink-height: auto !important; /* Voorkomt de scroll-fout */
}

[data-column="middle"] [data-items] {
	 /* De bronzen metallic afbeelding als achtergrond aanroepen */
    background-image: url('https://fietsendrager-megastore.nl/wp-content/uploads/2026/06/metallic-brons.png') !important;
    
    /* Zorgt dat de bronzen textuur de volledige tab netjes bedekt */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

#header-menu-2 {
	color: #F3F1EC !important;
}

/* 4. Het Taalmenu rechtsboven (de bruine tab met metallic textuur) */
[data-items="primary"] {
    /* De bronzen metallic afbeelding als achtergrond aanroepen */
    background-image: url('https://fietsendrager-megastore.nl/wp-content/uploads/2026/06/metallic-brons.png') !important;
    
    /* Zorgt dat de bronzen textuur de volledige tab netjes bedekt */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Behoud van je strakke vormgeving */
    border: 1.5px solid #ffffff57 !important;
    border-top: none !important;
    border-radius: 0 0 15px 15px !important; /* Maakt de onderkant rond */
    padding: 8px 24px !important;
    width: max-content !important; /* Zorgt dat de tab niet te breed wordt */
    margin-left: auto !important; /* Duwt de tab helemaal naar rechts */
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 5px 12px rgba(0,0,0,0.35) !important;
    position: relative;
    top: 0px;
    z-index: 99;
}

/* ==========================================================================
   SPECIFIEKE CODE VOOR MOBIEL & TABLET (max 991px)
   ========================================================================== */
@media (max-width: 991px) {
	/* SPECIFIEK: Hamburger menu (primary items) rand en achtergrond volledig weghalen */
    [data-device="mobile"] .ct-container [data-column="start"] [data-items="primary"] {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important; /* Verwijdert eventuele interne vulling */
    }

	/* LOGO: Bronzen achtergrond in de middelste kolom bij data-items volledig weghalen */
    [data-device="mobile"] [data-column="middle"] [data-items],
    .ct-header-mobile [data-column="middle"] *,
    [data-device="mobile"] [data-column="middle"] {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
    }
	
	[data-device="mobile"] [data-column="end"] [data-items="primary"],
    .ct-header-mobile [data-column="end"] {
        
        /* Minder padding zodat het knopje compacter wordt */
        padding: 4px 10px !important; 
        box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
 		margin-right: -10px !important;
    }
    
}