/* ================================================================
   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;
}
.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 > 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;
}
/* Nieuwskaarten ("Het laatste nieuws"): vaste totaalhoogte zodat alle
   kaarten in de rij gelijk zijn, ongeacht het type bericht (aanbod/
   activiteit/bericht hebben van nature andere inhoud/lengte). We laten
   de eigen overlap-opmaak (negative margin-top op de content-wrapper)
   intact en knippen overtollige tekst af i.p.v. de hoogte te forceren
   via flex, wat botst met die overlap. */
/* Deze vaste hoogte/afkap-regels zijn specifiek voor de "Het laatste
   nieuws"-kaarten op de HOMEPAGE (image-top layout, rij #go_row-10030).
   Zonder deze scope raken ze ook de kaarten op andere pagina's, zoals
   de Actueel-lijst (/berichten), die een ander (image-left) layout
   gebruiken — daar zorgde height:430px voor een groot leeg gat. */
#go_row-10030 a.go_card.go_card-with-source {
  height: 430px !important;
  overflow: hidden !important;
  display: block !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-wrapper {
  height: 190px !important;
  overflow: hidden !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* titel en introtekst afkappen op een vast aantal regels, zodat
   kortere/langere berichten niet meer voor uitschietende kaarten
   zorgen */
#go_row-10030 a.go_card.go_card-with-source .go_card-title-wrapper {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#go_row-10030 a.go_card.go_card-with-source .go_card-text-intro {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Gebiedonline zet per berichttype (aanbod/activiteit/bericht) een
   andere margin-top op de content-wrapper (die over de foto overlapt),
   waardoor de categorielabel niet bij elk type op dezelfde hoogte
   begint. Hier op één vaste waarde voor alle typen forceren, met
   verhoogde specificiteit zodat dit zeker boven de eigen regels van
   Gebiedonline uitkomt. */
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-activity .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-service .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-message .cx_template-image-top .cx_template-content-wrapper {
  margin-top: -2.3rem !important;
  position: relative !important;
}
.go_card .category-wrapper {
  color: var(--sa-oker);
  font-weight: 700;
  font-size: 15px;
  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;
}