/* ================================================================
   Smakelijk Achterhoek — huisstijl stylesheet voor Gebiedonline
   Gebaseerd op de echte broncode (cx_/go_ classes, Bootstrap 5)
   ================================================================ */

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

:root {
  --sa-groen-donker: #154D26;
  --sa-groen-diep:   #103E20;
  --sa-groen-mid:    #3E6B45;
  --sa-groen-licht:  #ACCD63;
  --sa-oker:         #E2A93E;
  --sa-terracotta:   #C2603A;
  --sa-creme:        #FAF6EC;
  --sa-groen-tint:   #EDF3DA;
  --sa-tekst:        #283129;
  --sa-tekst-zacht:  #6E7567;
}

/* --- 1. Basis: lettertype + pagina-achtergrond ------------------- */
body.go_page,
.cx_btn-label,
h1, h2, h3, h4, h5, h6,
.go_row-title,
.go_card-title-wrapper,
.navbar-brand {
  font-family: 'Baloo 2', sans-serif !important;
}

body.go_page {
  background-color: var(--sa-creme) !important;
  color: var(--sa-tekst);
}
/* Fotoslider-rijen (grote carrousel-rijen) hebben geen instelbaar
   achtergrondveld en vallen terug op een vaste witte kleur — dat trekken
   we gelijk met de ingestelde thema-achtergrondkleur (crème) */
.go_row.go_section-slider {
  background-color: var(--sa-creme) !important;
}

.go_row-title {
  font-weight: 800 !important;
  color: var(--sa-tekst);
  letter-spacing: -0.01em;
}

/* --- 2. Topmenu (logo + Over ons / Contact / Iets plaatsen / etc.) */
.go_menu-top-bar {
  background-color: var(--sa-creme) !important;
  border-bottom: 1px solid #E8DFC9;
  padding-top: 28px;
  padding-bottom: 28px;
}
.go_navbar-brand img,
.go_logo img {
  max-height: 108px !important;
  height: auto !important;
  width: auto !important;
}
/* Zoek/filter-balk (bv. op Agenda, Adressen): ronde hoeken, kaart-stijl */
.go_search-wrapper {
  background-color: var(--sa-groen-tint) !important;
  border-radius: 22px !important;
  overflow: hidden;
  border: 1px solid #DCE7C8;
}
.go_top-menu .go_topmenu-button {
  color: var(--sa-tekst) !important;
  font-weight: 600;
  font-size: 14px;   /* tekstgrootte van de items */
  padding: 8px 4px;  /* ruimte rond elk item */
}
.go_top-menu {
  gap: 4px;
}
.go_top-menu .go_topmenu-button i {
  color: var(--sa-groen-donker) !important;
  font-size: 16px;   /* icoongrootte */
}
.go_top-menu .go_topmenu-button:hover {
  color: var(--sa-groen-donker) !important;
}

/* --- 3. Hoofdmenu ------------------------------------------------- */
.go_main-menu-bar,
.go_main-menu-bar .go_main-menu-wrapper,
nav.go_hoofdmenu,
nav.go_hoofdmenu .cx_menu-container {
  background-color: var(--sa-creme) !important;
  background-image: none !important;
}
.go_main-menu-bar {
  border-bottom: 1px solid #E8DFC9;
}
.go_hoofdmenu .nav-link,
.go_hoofdmenu .cx_btn-label {
  font-weight: 700 !important;
  font-size: 16px;
  color: var(--sa-tekst) !important;
}
.go_hoofdmenu .nav-link:hover {
  color: var(--sa-groen-donker) !important;
}
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle),
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) {
  color: #ffffff !important;
  background-color: var(--sa-groen-donker) !important;
  border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) span {
  color: #ffffff !important;
}
/* Open dropdownmenu (.show): lichter/omlijnd, zodat het niet identiek oogt
   aan de "huidige pagina"-pil hierboven en er geen twee volle groene
   pillen tegelijk lijken te branden */
.go_hoofdmenu .dropdown-toggle.show,
.go_hoofdmenu .nav-item.show .nav-link,
nav.go_hoofdmenu .dropdown-toggle.show,
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show {
  color: var(--sa-groen-donker) !important;
  background-color: transparent !important;
  border: 1.5px solid var(--sa-groen-donker);
  border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show span {
  color: var(--sa-groen-donker) !important;
}
/* Dropdown-knop die "actief" is omdat er een kind-pagina open staat: alleen
   de tekst accentueren, geen vaste groene pil (die knop is geen link zelf) */
.go_hoofdmenu .dropdown-toggle.active:not(.show) {
  color: var(--sa-groen-donker) !important;
  background-color: transparent !important;
}
/* Eigen, merk-kleurige focusring in plaats van de standaard blauwe browser-
   focusring (toegankelijkheid blijft behouden, alleen de kleur/stijl wijzigt) */
.go_hoofdmenu .nav-link:focus-visible,
.go_hoofdmenu .dropdown-toggle:focus-visible {
  outline: 2px solid var(--sa-groen-donker) !important;
  outline-offset: 2px;
}
/* Op hover moet de tekst wit blijven zolang de "huidige pagina"-pil groen
   is — anders wordt de tekst onleesbaar (groen op groen) */
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover,
.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle):hover,
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover {
  color: #ffffff !important;
}
/* Open dropdownmenu blijft op hover ook de omlijnde stijl (niet wit) */
.go_hoofdmenu .dropdown-toggle.show:hover,
.go_hoofdmenu .nav-item.show .nav-link:hover,
nav.go_hoofdmenu .dropdown-toggle.show:hover {
  color: var(--sa-groen-donker) !important;
}
.go_hoofdmenu .dropdown-menu {
  border-radius: 18px;
  border: 1px solid #E8DFC9;
}
/* Huidige pagina binnen het geopende "Meer"-dropdownmenu: donkergroene
   rij met witte tekst (was onleesbaar: donkergroen op donkergroen) */
.go_hoofdmenu .dropdown-item.active,
.go_hoofdmenu .dropdown-item.active:hover,
.go_hoofdmenu .dropdown-item.active:focus {
  background-color: var(--sa-groen-donker) !important;
  color: #ffffff !important;
}
.go_hoofdmenu .dropdown-item:hover {
  background-color: var(--sa-groen-tint);
  color: var(--sa-groen-donker);
}

/* "Word lid"-knop in het hoofdmenu (geel), zodra dit als los menu-item
   op het hoofdniveau staat (bv. link naar /wordlid) */
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"] {
  background-color: #EBC26B !important;
  color: #283129 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  margin-left: 4px;
}
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"]:hover {
  background-color: var(--sa-oker) !important;
}
/* Dit menu-item altijd helemaal rechts tonen (vlak voor het vergrootglas),
   ongeacht de volgorde in de menu-instellingen zelf */
.go_hoofdmenu .navbar-nav > .nav-item:has(> a.nav-link[href="/wordlid"]) {
  position: absolute !important;
  right: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
.go_hoofdmenu .cx_menu-container {
  position: relative !important;
}
/* Bootstrap's "me-auto" op de menulijst zelf duwt het zoekicoon helemaal
   naar de rand — dat overschrijven we zodat ze dicht bij elkaar komen */
nav.go_hoofdmenu ul.navbar-nav.me-auto {
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
}
.go_hoofdmenu .collapse.navbar-collapse {
  justify-content: flex-start !important;
}

/* --- 4. Knoppen (algemeen: word lid, versturen, bewerken, etc.) -- */
.btn.btn-primary,
.go_button {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 800 !important;
  background-color: var(--sa-groen-donker) !important;
  border-color: var(--sa-groen-donker) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
}
.btn.btn-primary:hover,
.go_button:hover {
  background-color: #0F3A1D !important;
  border-color: #0F3A1D !important;
}

/* Uitzondering: kleine beheer-knoppen (potlood/bewerken) — niet
   meenemen in de pil-stijl, anders wordt de bewerk-UI onleesbaar. */
.go_webpage-controls .btn,
a[href*="cmd=open"].btn {
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

/* --- 5. Homepage-blokken (WORD LID / DOE MEE / NIEUWSBRIEF) ------ */
.go_block.cx_card .go_card.go_block-content {
  /* achtergrondkleur bewust NIET forceren: die stel je zelf per blok in */
  border-radius: 28px !important;
  transition: transform .15s ease;
}
.go_block.cx_card .go_card.go_block-content:hover {
  transform: translateY(-2px);
}
.go_block-text p strong {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* --- 6. Nieuws-/aanbodkaarten ("Het laatste nieuws") ------------- */
.go_card.go_card-with-border {
  border-radius: 22px !important;
  border-color: #EFE7D4 !important;
  background-color: var(--sa-groen-tint) !important;
}
.go_card .category-wrapper {
  color: var(--sa-oker);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.go_card .go_card-title-wrapper {
  font-weight: 700 !important;
  color: var(--sa-tekst);
}
.go_card .go_source-name-wrapper {
  font-weight: 600;
  color: var(--sa-tekst-zacht);
  font-size: 13px;
}
.go_card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Link "Bekijk al het nieuws" */
.go_link {
  color: var(--sa-groen-donker) !important;
  font-weight: 700;
}
.go_link:hover {
  color: var(--sa-terracotta) !important;
}

/* --- 7. Productgroepen-tegels ("Wat zoek je vandaag?") ----------- */
.go_row.Verkooppunten .go_block.cx_card .go_card {
  border-radius: 20px !important;
  transition: transform .15s ease;
}
.go_row.Verkooppunten .go_block.cx_card .go_card:hover {
  transform: translateY(-2px);
}

/* --- 8. Kaart (Leaflet) — kleine correcties ---------------------- */
.leaflet-popup-content-wrapper {
  border-radius: 18px !important;
  font-family: 'Baloo 2', sans-serif;
}
.go_map-commissaris {
  box-shadow: 0 3px 10px rgba(0,0,0,.25) !important;
}
/* Kaart-embed op de homepage: afgeronde hoeken */
#cxMap,
.leaflet-container {
  border-radius: 20px !important;
  overflow: hidden;
}

/* --- 9. Links algemeen -------------------------------------------- */
.go_container a:not(.btn):not(.go_button):not(.card) {
  color: var(--sa-groen-donker);
}
.go_container a:not(.btn):not(.go_button):not(.card):hover {
  color: var(--sa-terracotta);
}

/* --- 11. Aanbod/zoekpagina (/aanbod) ------------------------------ */
/* "Uitgebreid zoeken" (btn-secondary, niet btn-primary!): witte tekst */
.btn.btn-secondary.go_button {
  background-color: var(--sa-groen-donker) !important;
  border-color: var(--sa-groen-donker) !important;
  color: #ffffff !important;
}
.btn.btn-secondary.go_button:hover {
  background-color: #0F3A1D !important;
  border-color: #0F3A1D !important;
}

/* Bewerken / Kopiëren / Verwijderen (go_button-secondary, andere class!) */
.btn.btn-secondary.go_button-secondary {
  background-color: var(--sa-groen-tint) !important;
  border-color: var(--sa-groen-tint) !important;
  color: var(--sa-groen-donker) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.btn.btn-secondary.go_button-secondary:hover {
  background-color: #DCE7C8 !important;
  border-color: #DCE7C8 !important;
}

/* Adreskaarten op het /aanbod-overzicht (rasterweergave) */
a.card.go_card.go_card-no-border {
  background-color: var(--sa-groen-tint) !important;
  border-radius: 22px !important;
  overflow: hidden;
}
a.card.go_card.go_card-no-border .card-body {
  background-color: var(--sa-groen-tint) !important;
}

/* Detailpagina van een adres (/aanbod/{id}/...): hoofdkaart + reacties */
.go_wall-wrapper .card.go_card.go_wall-card {
  background-color: var(--sa-groen-tint) !important;
  border-radius: 22px !important;
  overflow: hidden;
}
/* De donkergroene contactstrook onderin de kaart: ronde hoeken onderaan */
.go_contact-wrapper {
  border-radius: 0 0 22px 22px !important;
  overflow: hidden;
}
#comments.card.go_card.go_comments-wrapper {
  background-color: var(--sa-groen-tint) !important;
  border-radius: 22px !important;
}

/* Contactregel op de detailpagina (e-mail/website/telefoon): niet afbreken */
.go_contact-wrapper .go_card-meta-line {
  white-space: nowrap;
}

/* --- 11b. Vangnet: overige blokken/kaarten (bv. Word lid / Doneer-
   pagina) die geen .cx_card of andere specifieke klasse hebben en
   daardoor de gele Gebiedonline-standaardkleur + scherpe hoeken
   behielden i.p.v. de huisstijl-kaartstijl ------------------------- */
.card.go_card,
.go_block .go_card,
.go_block-content {
  /* achtergrondkleur bewust NIET forceren: die vul je zelf per blok in
     via het CMS — hier alleen vormgeving (hoeken/rand) */
  border-radius: 22px !important;
  border-color: #EFE7D4 !important;
}
/* QR-code afbeeldingen: eigen witte kaart binnen het getinte blok,
   zodat de code goed scanbaar blijft (contrast) */
.go_block img,
.go_card img {
  border-radius: 14px !important;
}
/* Titels binnen deze blokken (bv. "Word lid", "Doneer") volgen dezelfde
   Baloo 2 kop-stijl als de rest van de site */
.go_block-title,
.go_block h1, .go_block h2, .go_block h3,
.go_card-title, .go_card .card-title {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 800 !important;
  color: var(--sa-tekst) !important;
}

/* --- 9b. QR-code / lidmaatschap-blok (CSS Class: sa-qr-blok)
   Blok heeft een target-url, is dus zelf klikbaar: geef het ook de
   uitstraling van een klikbare kaart (hover-lift + pointer) --------- */
.sa-qr-blok .go_block-content,
.go_block-content.sa-qr-blok,
.sa-qr-blok.go_block-content,
a.sa-qr-blok,
.sa-qr-blok {
  padding: 32px 32px 36px !important;
  cursor: pointer;
  text-align: center !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-qr-blok .go_block-content:hover,
.go_block-content.sa-qr-blok:hover,
.sa-qr-blok.go_block-content:hover,
a.sa-qr-blok:hover,
.sa-qr-blok:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21,77,38,.12);
}
.sa-qr-blok img {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 4px 14px rgba(21,77,38,.10) !important;
  display: inline-block !important;
}
/* tekst onder de QR ook centreren, zodat het geheel als één
   gecentreerde kaart oogt */
.sa-qr-blok .go_block-text,
.sa-qr-blok p {
  text-align: center !important;
}

/* --- 9c. Blokken zonder QR maar wél met een target-url (CSS Class:
   sa-link-blok) — zelfde klikbare kaart-uitstraling, zonder de
   beeld-specifieke styling van sa-qr-blok --------------------------- */
.sa-link-blok .go_block-content,
.go_block-content.sa-link-blok,
.sa-link-blok.go_block-content,
a.sa-link-blok,
.sa-link-blok {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-link-blok .go_block-content:hover,
.go_block-content.sa-link-blok:hover,
.sa-link-blok.go_block-content:hover,
a.sa-link-blok:hover,
.sa-link-blok:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21,77,38,.12);
}

/* --- 10. Footer ---------------------------------------------------
   Let op: de footer-classes stonden niet in de aangeleverde bron-HTML
   (die liep af bij het laatste kaart-icoon). Zodra je de footer-HTML
   erbij plakt, vul ik dit blok exact aan. Als voorlopige gok (te
   verifiëren): */
footer,
.go_footer {
  background-color: var(--sa-groen-diep) !important;
  color: #CFE3BE !important;
}
footer a,
.go_footer a {
  color: #CFE3BE !important;
}
footer a:hover,
.go_footer a:hover {
  color: var(--sa-groen-licht) !important;
}