/* Taalkeuze WPML (inc/fk-wpml.php) - los bestand, wordt niet door de SCSS-build overschreven */

/* header: menu + taalkeuze + hamburger naast elkaar */
#menu_header.fk_has_lang { display: flex; align-items: center; justify-content: flex-end; }
#menu_header.fk_has_lang .mk_menu { width: auto; float: none; flex: 1 1 auto; }
#menu_header.fk_has_lang .mk_mobile_menu_button { float: none; }

/* uitklapmenu */
.fk_lang { position: relative; margin-left: 20px; font-family: 'ashemore', 'sans-serif', 'Arial'; z-index: 1000; }

.fk_lang_toggle { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 4px; background-color: #fff; border: 2px solid #7C8663; border-radius: 30px; color: #0D262D; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: 0.3s; }
.fk_lang_toggle:hover, .fk_lang.open .fk_lang_toggle, .fk_lang_toggle:focus-visible { border-color: #0D262D; outline: none; }

.fk_lang_flag { display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(13, 38, 45, 0.15); flex: 0 0 auto; }

.fk_lang_arrow { display: block; width: 10px; height: 10px; background: url('../../images/down-arrow.svg') no-repeat center / contain; transition: 0.3s; }
.fk_lang.open .fk_lang_arrow { transform: rotate(180deg); }

.fk_lang_list { position: absolute; top: calc(100% + 10px); right: 0; min-width: 170px; margin: 0; padding: 8px 0; list-style: none; text-align: left; background-color: #fff; border-top: 3px solid #7C8663; box-shadow: 0 10px 30px rgba(13, 38, 45, 0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: 200ms; }
.fk_lang_list::before { content: ""; position: absolute; top: -13px; left: 0; width: 100%; height: 10px; } /* hover-brug tussen knop en lijst */
.fk_lang.open .fk_lang_list { opacity: 1; visibility: visible; transform: translateY(0); }

@media (hover: hover) {
    .fk_lang:hover .fk_lang_list { opacity: 1; visibility: visible; transform: translateY(0); }
}

.fk_lang_list li { list-style: none; margin: 0; }
.fk_lang_list a { display: flex; align-items: center; gap: 10px; padding: 8px 15px; color: #0D262D; font-size: 15px; font-weight: 700; text-decoration: none; transition: 0.2s; }
.fk_lang_list a:hover { background-color: #f0f0f0; color: #7C8663; }
.fk_lang_list li.active a { color: #7C8663; }

/* mobiel menu: rij met vlaggen */
.fk_lang_mobile { display: flex; justify-content: center; gap: 15px; width: 100%; float: left; padding: 10px 0 20px 0; }
.fk_lang_mobile a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; opacity: 0.6; transition: 0.3s; }
.fk_lang_mobile a:hover, .fk_lang_mobile a.active { opacity: 1; }
.fk_lang_mobile .fk_lang_flag { width: 34px; height: 34px; box-shadow: 0 0 0 2px transparent; }
.fk_lang_mobile a.active .fk_lang_flag { box-shadow: 0 0 0 2px #7C8663; }

/* kleine schermen: taalkeuze alleen in het mobiele menu (logo + hamburger hebben de ruimte nodig) */
@media only screen and (max-width: 640px) {
    #menu_header .fk_lang { display: none; }
}

/* vertaalde teksten in CSS (lang-attribuut wordt door WPML per taal gezet) */
html[lang^="en"] .formulier .mk_rij .mk_kolom.mk_kolom_1.mk_kolom_1_1::after { content: "Submit without obligation!"; }
html[lang^="de"] .formulier .mk_rij .mk_kolom.mk_kolom_1.mk_kolom_1_1::after { content: "Unverbindlich einreichen!"; }

/* "optioneel" bij niet-verplichte formuliervelden (_formulieren.scss) */
html[lang^="en"] .gform_wrapper .gform_fields .gfield:not(.gfield_contains_required)::after { content: "optional"; }
html[lang^="de"] .gform_wrapper .gform_fields .gfield:not(.gfield_contains_required)::after { content: "optional"; }

/* melding voor ingelogde gebruikers op een nog niet openbare vertaling */
.fk_lang_preview { position: fixed; left: 20px; bottom: 20px; z-index: 99999; max-width: calc(100% - 40px); padding: 10px 15px; background-color: #0D262D; border-left: 4px solid #7C8663; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); }