/* "Gegevens importeren uit een andere bron?"-link onder "Iets
   plaatsen": geen instelling om dit uit te zetten, dus verbergen
   via CSS. -------------------------------------------------------- */
a[href="/webpagina/2086/importeren"] {
  display: none !important;
}

/* Zoekicoon in het hoofdmenu: label "Zoek" toevoegen naast het
   vergrootglas, als knop met gevuld groen vlak (optie 3). --------- */
.go_open-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #2D5A1C !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: 6px 18px !important;
  width: auto !important;
  height: auto !important;
}
.go_open-search .go_icon {
  color: #fff !important;
  position: static !important;
}
.go_open-search::after {
  content: "Zoek";
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

/* ================================================================
   Land van Lobo — huisstijl stylesheet voor Gebiedonline
   Eenvoudige eerste opzet: font, logo, hoofdmenu.
   Rondingen: standaard Gebiedonline (geen border-radius overrides).
   Footer: wit tekst op #12261A (sectie 10).
   Versie: v17 — voorstel volledig doorgevoerd
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Lato:wght@300;400;700&display=swap');

/* --- 1. Basis: lettertype -----------------------------------------
   Nunito voor koppen/hoofdmenu, Lato voor lopende tekst.
   Kleuren: alle tinten afgeleid van het logogroen #3E7A28.
     #12261A  footer, donkere vlakken
     #2D5A1C  koppen (titelkleur)
     #3E7A28  knoppen, actief menu-item
     #DCE8D2  kaders en tegels (tweede kleur)
     #EFF2EA  pagina-achtergrond
     #2E78BF  links en locatie-veld (blauw uit het logo)
     #D4A825  één accentknop per pagina (geel uit het logo)
   Let op: het geel heeft te weinig contrast voor tekst op wit —
   alleen als vlak met donkere tekst (#12261A) erop.
   Het hero-verloop gaat altijd als transparante PNG over de foto
   (maten 1170 en 800 breed); alleen bij een header zoals de
   homepage van Smakelijk Achterhoek kan het als CSS-laag. ---------- */
body.go_page,
body.go_page p,
body.go_page li,
body.go_page a,
body.go_page span,
body.go_page div,
.go_container p {
  font-family: 'Lato', sans-serif !important;
}
/* De tekstkleur staat opzettelijk NIET op a/span/div: Gebiedonline
   zet zelf al witte tekst op zijn donkere vlakken (footer,
   beheerbalk, gevulde knoppen, tooltips). Zou je hier alles
   donkergroen forceren, dan moet je dat wit overal weer met
   uitzonderingen terugzetten. Alleen de lopende tekst krijgt de
   huisstijlkleur; links krijgen die apart (sectie 2). ------------- */
body.go_page,
body.go_page p,
body.go_page li,
.go_container p {
  color: #1E2E1A;
}
h1, h2, h3, h4, h5, h6,
.go_row-title,
.go_card-title-wrapper,
.navbar-brand {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: #2D5A1C;
}

/* --- 2. Topmenu: bovenste regel kleiner, logo groter ---------------
   Compacte utility-strook naar het Smakelijk Achterhoek-model:
   kleiner icoon, minder ruimte tussen icoon en label, vet label —
   zodat de balk niet als tweede hoofdmenu oogt. Achtergrondkleur
   blijft de eigen Land van Lobo-kleur (niet overschreven). -------- */
.go_menu-top-bar {
  font-size: 12px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}
.go_menu-top-bar .nav-link,
.go_menu-top-bar a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  text-align: center !important;
}
.go_menu-top-bar .go_icon,
.go_menu-top-bar i,
.go_menu-top-bar svg {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin-bottom: 2px !important;
}
.go_navbar-brand img,
.go_logo img {
  height: 96px !important;
  max-height: none !important;
  width: auto !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}
.go_navbar-brand,
.go_logo {
  align-items: center !important;
  display: flex !important;
}

/* --- 3. Hoofdmenu: vetgedrukt -------------------------------------- */
.go_hoofdmenu .nav-link {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* Actief item krijgt een donkergroen vlak; de tekst erft de donkere
   kleur en is dan onleesbaar — expliciet wit maken (incl. het
   dropdown-pijltje). ---------------------------------------------- */
.go_hoofdmenu .nav-link.active,
.go_hoofdmenu .nav-item.active > .nav-link,
.go_hoofdmenu .nav-link.show,
.go_hoofdmenu .nav-link:hover,
.go_hoofdmenu .nav-link.active span,
.go_hoofdmenu .nav-item.active > .nav-link span,
.go_hoofdmenu .nav-link.show span,
.go_hoofdmenu .nav-link:hover span,
.go_hoofdmenu .navbar-nav > .active > a span,
.go_hoofdmenu .navbar-nav > .active > .nav-link span,
.go_hoofdmenu .nav-item.dropdown.active > .nav-link,
.go_hoofdmenu .nav-item.dropdown.active > .nav-link span,
.go_hoofdmenu .nav-item.dropdown > .nav-link.active,
.go_hoofdmenu .nav-item.dropdown > .nav-link.active span {
  color: #fff !important;
}
/* Geopend dropdown-item krijgt géén gevuld vlak maar een omlijning
   met donkergroene tekst (zoals Smakelijk Achterhoek), bij Lobo
   met rechte hoeken. ---------------------------------------------- */
.go_hoofdmenu .dropdown-toggle.show,
.go_hoofdmenu .nav-item.dropdown.show > .nav-link {
  background-color: transparent !important;
  border: 2px solid #2D5A1C !important;
  border-radius: 0 !important;
  color: #2D5A1C !important;
}
.go_hoofdmenu .dropdown-toggle.show span,
.go_hoofdmenu .nav-item.dropdown.show > .nav-link span {
  color: #2D5A1C !important;
}
.go_hoofdmenu .dropdown-toggle.show::after,
.go_hoofdmenu .nav-item.dropdown.show > .nav-link::after {
  border-top-color: #2D5A1C !important;
}
.go_hoofdmenu .nav-link.active::after,
.go_hoofdmenu .nav-item.active > .nav-link::after,
.go_hoofdmenu .nav-link:hover::after {
  border-top-color: #fff !important;
}

/* Hover krijgt hetzelfde groene vlak als het actieve item; zonder
   achtergrond werden de letters wit op de lichte balk en dus
   onleesbaar. ------------------------------------------------------ */
.go_hoofdmenu .nav-link:hover {
  background-color: #3E7A28 !important;
}

/* --- 4. Driekleur-lijn onder het hoofdmenu -------------------------
   Bindt elke pagina zichtbaar aan het logo. Topmenu en hoofdmenu
   staan in dezelfde tint als de pagina (#EFF2EA, via de netwerk-
   instellingen), dus deze lijn is de enige scheiding. ------------- */
.go_hoofdmenu {
  border-bottom: none !important;
  position: relative !important;
}
/* De menubalk is zelf niet schermbreed (1296px in een 1440px venster),
   dus een lijn binnen die balk stopt links en rechts. Met 100vw en een
   negatieve verschuiving loopt hij van rand tot rand. ------------- */
.go_hoofdmenu::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 4px !important;
  background-image: linear-gradient(to right, #3E7A28 0% 33.3%, #2E78BF 33.3% 66.6%, #D4A825 66.6% 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* --- 5. Links in het blauw van de rivieren -------------------------
   Gebiedonline heeft geen instelling voor linkkleur. ------------- */
body.go_page .go_container a,
body.go_page .go_wall-card-content a,
body.go_page .go_property a,
body.go_page .go_block-text a {
  color: #2E78BF !important;
}
body.go_page .go_container a:hover,
body.go_page .go_wall-card-content a:hover,
body.go_page .go_property a:hover,
body.go_page .go_block-text a:hover {
  color: #3E7A28 !important;
}
/* Uitzondering: een link die zelf een knop of gekleurd blok IS, mag
   de blauwe linkkleur niet krijgen — blauw op groen is onleesbaar.
   Dit is de enige uitzondering die nodig is. --------------------- */
body.go_page a.go_button,
body.go_page a.go_button *,
body.go_page a.btn-primary:not(.go_plaats-item),
body.go_page a.btn-primary:not(.go_plaats-item) *,
body.go_page a.go_block-content,
body.go_page a.go_block-content * {
  color: #fff !important;
}
/* Behalve waar het blok zelf geen gevuld vlak heeft. ------------- */
body.go_page a.go_plaats-item,
body.go_page a.go_plaats-item * {
  color: #1E2E1A !important;
}
body.go_page a.go_plaats-item:hover,
body.go_page a.go_plaats-item:hover * {
  color: #3E7A28 !important;
}

/* --- 6. Locatie en categorie op de kaarten in blauw ---------------
   De enige twee velden die Gebiedonline op elke overzichtskaart
   zet; consequent in dezelfde kleur. ------------------------------ */
.go_card-meta-line i.fa-map-marker-alt,
.go_card .category-wrapper,
.go_card-meta-line i.fa-clock {
  color: #2E78BF !important;
}
.go_card .category-wrapper {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

/* --- 7. Knoppen ----------------------------------------------------
   Primaire actie gevuld groen, nevenactie omlijnd in hetzelfde
   groen. Zo komen ze niet meer uit twee huisstijlen. -------------- */
.go_button,
a.go_button,
.btn-primary.go_button {
  background-color: #3E7A28 !important;
  border-color: #3E7A28 !important;
  color: #fff !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.go_button:hover,
a.go_button:hover {
  background-color: #2D5A1C !important;
  border-color: #2D5A1C !important;
  color: #fff !important;
}
.go_button-secondary,
a.go_button-secondary {
  background-color: transparent !important;
  border: 2px solid #3E7A28 !important;
  color: #3E7A28 !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.go_button-secondary:hover,
a.go_button-secondary:hover {
  background-color: #3E7A28 !important;
  color: #fff !important;
}
/* Tekst binnen de knop erft anders de donkere basiskleur. -------- */
.go_button span,
a.go_button span {
  color: #fff !important;
}
.go_button-secondary span {
  color: #3E7A28 !important;
}
.go_button-secondary:hover span {
  color: #fff !important;
}

/* --- 8. Geel als accentknop ----------------------------------------
   Eén opvallende actie: "Word lid". Geel heeft te weinig contrast
   voor tekst op wit, dus altijd als vlak met donkere tekst. Blauw
   voor het menu-item, zodat het geel alleen in de hero staat. ---- */
.go_hoofdmenu .navbar-nav > .nav-item:has(> a.nav-link[href="/wordlid"]) > .nav-link {
  background-color: #2E78BF !important;
  color: #fff !important;
  border-radius: 3px !important;
}
.go_hoofdmenu .navbar-nav > .nav-item:has(> a.nav-link[href="/wordlid"]) > .nav-link span {
  color: #fff !important;
}
.go_hoofdmenu .navbar-nav > .nav-item:has(> a.nav-link[href="/wordlid"]) > .nav-link:hover {
  background-color: #2D6499 !important;
}

/* --- 9. Zoekblok in de tweede kleur -------------------------------
   Het hele blok licht op tegen de pagina-achtergrond, zoals bij
   Smakelijk Achterhoek. ------------------------------------------ */
.go_search-wrapper {
  background-color: #DCE8D2 !important;
  padding: 24px 28px !important;
}
.go_search-wrapper .form-control,
.go_search-wrapper input[type="text"],
.go_search-wrapper input[type="search"] {
  background-color: #fff !important;
  border: 1px solid #BFCFB2 !important;
}
.go_search-wrapper .go_icon,
.go_search-wrapper i {
  color: #3E7A28 !important;
}
/* Filterknoppen: wit met groene rand, aangeklikt gevuld groen. --- */
.go_filter-button {
  background-color: #fff !important;
  border: 1px solid #BFCFB2 !important;
  color: #2D5A1C !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.go_filter-button[aria-pressed="true"] {
  background-color: #3E7A28 !important;
  border-color: #3E7A28 !important;
  color: #fff !important;
}

/* --- 10. Footer ---------------------------------------------------
   Achtergrond #12261A via de netwerkinstellingen. De basisregel in
   sectie 1 maakt alle tekst donker, ook hier — daarom expliciet
   wit. Losse knoppen en kopjes boven de kolommen kunnen niet: de
   kolommen komen uit het footer-menu en zijn alleen links. ------- */
.go_footer-web,
.go_footer-web p,
.go_footer-web li,
.go_footer-web a,
.go_footer-web span,
.go_footer-web div,
.go_footer-web h1,
.go_footer-web h2,
.go_footer-web h3 {
  color: #fff !important;
}
.go_footer-web a:hover {
  color: #DCE8D2 !important;
}
/* Nieuwsbrief: veld en knop op één lijn en even hoog — standaard
   verspringen ze onder elkaar. ----------------------------------- */
.go_footer-newsletter-subscription-wrapper .row {
  display: flex !important;
  align-items: center !important;  flex-wrap: wrap !important;
}
/* Kop, ondertitel en formulier zijn drie losse kinderen van dezelfde
   kolom. Gewenst resultaat: één regel met de ondertitel, het veld en
   de knop, verticaal gecentreerd. De kop "Blijf op de hoogte!" valt
   weg — de ondertitel zegt hetzelfde in één regel. ----------------- */
.go_footer-newsletter-subscription-wrapper .row > .col {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  justify-content: flex-start !important;
}
.go_footer-newsletter-subscription-wrapper h3 {
  display: none !important;
}
.go_footer-newsletter-subscription-wrapper p {
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_form {
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.go_footer-newsletter-subscription-wrapper .cx_fieldlines,
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar {
  margin: 0 !important;
}
/* De rij met het veld en de knoppenbalk nemen standaard de volle
   breedte, waardoor ze onder elkaar vallen. Beide op automatische
   breedte zetten zodat ze naast elkaar staan. --------------------- */
.go_footer-newsletter-subscription-wrapper .cx_form > .row,
.go_footer-newsletter-subscription-wrapper .cx_form > .cx_grid-row {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar.w-100,
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar {
  width: auto !important;
  display: block !important;
}
.go_footer-newsletter-subscription-wrapper .cx_fieldline,
.go_footer-newsletter-subscription-wrapper .cx_fieldline-content {
  margin: 0 !important;
  padding: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .form-control {
  height: 44px !important;
  margin: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_btn,
.go_footer-newsletter-subscription-wrapper .btn {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  background-color: #D4A825 !important;
  border-color: #D4A825 !important;
  color: #12261A !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_btn span,
.go_footer-newsletter-subscription-wrapper .btn span {
  color: #12261A !important;
}
/* Op mobiel past de ene regel niet: laat ondertitel, veld en knop
   weer onder elkaar vallen en het veld de volle breedte nemen. ---- */
@media (max-width: 767px) {
  .go_footer-newsletter-subscription-wrapper .row > .col {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .go_footer-newsletter-subscription-wrapper p {
    white-space: normal !important;
    flex-basis: 100% !important;
  }
  .go_footer-newsletter-subscription-wrapper .cx_form {
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .go_footer-newsletter-subscription-wrapper .cx_form > .row,
  .go_footer-newsletter-subscription-wrapper .cx_form > .cx_grid-row {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .go_footer-newsletter-subscription-wrapper .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }
  .go_footer-newsletter-subscription-wrapper .cx_btn,
  .go_footer-newsletter-subscription-wrapper .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}