/* ============================================================
   KOM CATERING — Correcties en RUCSS-veilige opmaak

   Twee soorten regels horen hier:
   1. Gerichte layoutfixes voor opmaak die in de pagina-inhoud zelf staat
      (de et_pb_code-modules) en die we daar niet willen aanraken.
   2. Opmaak voor markup die pas door JavaScript ontstaat. WP Rocket's
      Remove Unused CSS ziet die selectors niet in de HTML en gooit ze weg
      uit inline <style>-blokken. In dit bestand overleven ze, omdat het
      op de WP Rocket CSS Safelist staat.

   Elke regel hoort een comment te hebben met: welke pagina of component,
   welk probleem, en hoe het gemeten is.
   ============================================================ */

/* /catering-den-haag/ — horizontale scroll op mobiel, 13 aug 2026.
   `.keuzehulp-tabel` staat op width:100%, maar een tabel krimpt niet
   onder zijn min-content-breedte. Met drie kolommen komt hij op 420 px
   uit in een viewport van 390, wat de hele pagina 50 px liet meeschuiven
   (documentbreedte 440 in plaats van 390).

   Gemeten alternatieven:
     table-layout:fixed  -> geen paginascroll, maar 2 cellen liepen over
                            en de tabel werd 180 px hoger
     scroll op de ouder  -> geen paginascroll, tabel houdt 420 px en
                            schuift binnen zijn eigen kader, hoogte gelijk
   Deze tweede is gekozen. Met :has() hoeft er geen extra div in de
   pagina-inhoud, en de regel raakt alleen de container die de tabel
   direct bevat, niet de andere .wit-sectie-inner-blokken. Browsers
   zonder :has() vallen terug op het oude gedrag.
   Op desktop verandert niets: daar is de ouder 1180 px en de tabel 920. */
@media (max-width: 640px) {
  .kom-page .wit-sectie-inner:has(> .keuzehulp-tabel) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================
   COOKIEYES HUISSTIJL
   Verhuisd op 13 aug 2026 uit mu-plugins/kom-cookiebanner.php, waar het
   een inline <style id="kom-cookiebanner"> was.

   Waarom: WP Rocket's Remove Unused CSS gooide deze regels weg. De
   bannermarkup wordt door CookieYes' JS ingevoegd, dus staat niet in de
   HTML als RUCSS analyseert welke selectors gebruikt worden. Alles met
   .cky- gold daardoor als ongebruikt.

   Gemeten: op /catering-den-haag/ (nog geen blob) kwam .cky-btn-accept
   2x voor en was de knop aubergine; op de homepage (blob aanwezig) 0x en
   was de knop weer CookieYes-groen. Niet mobiel-versus-desktop dus, maar
   wel-of-niet door RUCSS verwerkt.

   Daarom hoort dit in een bestand op de WP Rocket CSS Safelist, niet in
   een inline <style>. Zie ook kom-footer.css, zelfde reden.
   ============================================================ */
/* ── KOM brand kleuren ──────────────────────────────────────────
   Aubergine : #3B1633
   Goud      : #B8A58C
   Saliengroen: #A9BCA2
   Crème     : #F4F1EE
────────────────────────────────────────────────────────────────*/

/* CookieYes CSS-variabelen overschrijven */
:root {
    --cky-color-rgb-primary:        59, 22, 51;   /* #3B1633 */
    --cky-btn-primary-bg:           #3B1633;
    --cky-btn-primary-color:        #ffffff;
    --cky-btn-primary-border:       #3B1633;
    --cky-btn-primary-hover-bg:     #5a2a4d;
    --cky-btn-secondary-bg:         transparent;
    --cky-btn-secondary-color:      #3B1633;
    --cky-btn-secondary-border:     #3B1633;
    --cky-btn-secondary-hover-bg:   #f4f1ee;
    --cky-btn-reject-bg:            transparent;
    --cky-btn-reject-color:         #3B1633;
    --cky-btn-reject-border:        #B8A58C;
    --cky-color-link:               #3B1633;
    --cky-color-always-active:      #A9BCA2;
    --cky-toggle-off-bg:            #d4c9b8;
    --cky-toggle-on-bg:             #A9BCA2;
    --cky-modal-header-bg:          #3B1633;
    --cky-modal-header-color:       #ffffff;
    --cky-modal-bg:                 #ffffff;
    --cky-notice-bg:                #F4F1EE;
    --cky-notice-color:             #3B1633;
    --cky-separator-color:          #e8e0d8;
}

/* Primaire knop (Accepteer alles) */
.cky-btn-accept,
.cky-btn.cky-btn-accept {
    background-color: #3B1633 !important;
    color: #ffffff !important;
    border-color: #3B1633 !important;
    border-radius: 6px !important;
}

/* Secundaire knoppen (Aanpassen / Alles afwijzen) */
.cky-btn-preferences,
.cky-btn.cky-btn-preferences,
.cky-btn-reject,
.cky-btn.cky-btn-reject,
.cky-btn-customize,
.cky-btn.cky-btn-customize,
[data-cky-tag="reject-button"],
[data-cky-tag="settings-button"] {
    background-color: transparent !important;
    color: #3B1633 !important;
    border-color: #B8A58C !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 6px !important;
}

/* Modal header */
.cky-modal-header,
.cky-preference-header {
    background-color: #3B1633 !important;
    color: #ffffff !important;
}
.cky-modal-title,
.cky-preference-title {
    color: #ffffff !important;
}
.cky-modal-close svg,
.cky-preference-close svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}
.cky-modal-close,
.cky-preference-close {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Banner achtergrond */
.cky-consent-bar,
.cky-notice {
    background-color: #F4F1EE !important;
}

/* "Altijd actief" label */
.cky-always-active {
    color: #A9BCA2 !important;
}

/* Toggle aan */
.cky-switch input:checked + .cky-slider,
.cky-switch input:checked ~ .cky-slider {
    background-color: #A9BCA2 !important;
}

/* Links */
.cky-notice a,
.cky-modal a,
.cky-btn-customize {
    color: #3B1633 !important;
}

/* Sluit-knop in modal (X) */
.cky-modal-close {
    border: 1px solid #ffffff !important;
}

/* Revisit-knop linksonder (groen CookieYes-icoontje) */
.cky-revisit-btn,
.cky-change-preferences,
#cky-btn-revisit,
.cky-btn-revisit,
[data-cky-tag="revisit-button"],
[aria-label*="cookie"] {
    background-color: #3B1633 !important;
    border-color: #3B1633 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
.cky-revisit-btn svg,
.cky-btn-revisit svg,
[data-cky-tag="revisit-button"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
}
/* Verberg originele CookieYes revisit-knop */
#cky-btn-revisit,
[data-cky-tag="revisit-button"],
.cky-revisit-btn,
.cky-btn-revisit {
    display: none !important;
}
/* Eigen KOM revisit-knop */
#kom-cky-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3B1633;
    border: none;
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#kom-cky-btn svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
}