/*
 * De cookiemelding van YOOtheme als balk onderaan. Zie
 * includes/class-cookiebalk.php voor het waarom.
 *
 * De !important-regels zijn nodig omdat YOOtheme de breedte als inline stijl
 * op het element zet (width: 550px) en de plaats via uk-position-* klassen met
 * een transform.
 */

.tm-consent.uk-position-fixed {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

.tm-consent .uk-notification-message {
  margin: 0;
  border-radius: 0;
  border-top: 1px solid #f2e2d4;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #fff;
  box-shadow: 0 -4px 18px rgba(36, 30, 25, 0.12);
}

.tm-consent .uk-notification-message > p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #241e19;
}

.tm-consent .uk-notification-message > p a {
  color: #8f3c10;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De drie knoppen: twee even brede knoppen naast elkaar, de instellingen eronder. */
.tm-consent [uk-grid] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
}

.tm-consent [uk-grid] > * {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.tm-consent [uk-grid] > :nth-child(1),
.tm-consent [uk-grid] > :nth-child(2) {
  flex: 1 1 0;
}

.tm-consent [uk-grid] > :nth-child(3) {
  flex: 1 1 100%;
  text-align: center;
}

/*
 * Accepteren en Afwijzen in precies dezelfde vorm. Donkergroen en niet oranje:
 * witte tekst op het oranje haalt geen 4,5:1, op het groen 8,9:1.
 */
.tm-consent [data-consent-button="accept"],
.tm-consent [data-consent-button="reject"] {
  min-height: 44px;
  line-height: 42px;
  font-size: 15px;
  border: 0 !important;
  border-radius: 500px;
  background: #3a4f38 !important;
  color: #fff !important;
}

.tm-consent [data-consent-button="accept"]:hover,
.tm-consent [data-consent-button="reject"]:hover {
  background: #2c3d2a !important;
}

.tm-consent [data-consent-button="accept"]:focus-visible,
.tm-consent [data-consent-button="reject"]:focus-visible {
  outline: 2px solid #241e19;
  outline-offset: 2px;
}

.tm-consent [data-consent-button="settings"] {
  width: auto !important;
  min-height: 0;
  padding: 4px 0;
  border: 0 !important;
  background: none !important;
  font-size: 14px;
  line-height: 1.4;
  color: #5f5750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * Zolang de balk staat, ruimte onderaan de pagina: anders valt de paginering
 * of de voettekst eronder en kan wie de melding laten staan er niet bij.
 * Ruimte onderaan verschuift niets wat erboven staat, dus het geeft geen
 * verspringing. Het thema zet `hidden` op de balk na een keuze (nagemeten
 * 22 oktober 2026), en na een eerdere keuze staat hij er helemaal niet.
 */
body:has(.tm-consent:not([hidden])) {
  padding-bottom: 180px;
}

/*
 * Vanaf tabletbreedte: tekst links, knoppen rechts. Tot 640 rekte de
 * telefoonopmaak uit tot knoppen van 400 breed (UX-review, 22 oktober 2026).
 * De zijruimte volgt de paginacontainer van het thema: 30 op een tablet, 40
 * vanaf 960.
 */
@media (min-width: 640px) {
  body:has(.tm-consent:not([hidden])) {
    padding-bottom: 110px;
  }

  .tm-consent .uk-notification-message {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px max(30px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(30px, env(safe-area-inset-left));
  }

  .tm-consent .uk-notification-message > p {
    flex: 1;
    margin: 0;
  }

  .tm-consent [uk-grid] {
    flex-wrap: nowrap;
    align-items: center;
  }

  .tm-consent [uk-grid] > :nth-child(1),
  .tm-consent [uk-grid] > :nth-child(2),
  .tm-consent [uk-grid] > :nth-child(3) {
    flex: 0 0 auto;
  }

  .tm-consent [data-consent-button="accept"],
  .tm-consent [data-consent-button="reject"] {
    min-width: 140px;
    padding: 0 24px;
  }
}

@media (min-width: 960px) {
  body:has(.tm-consent:not([hidden])) {
    padding-bottom: 80px;
  }

  .tm-consent .uk-notification-message {
    padding-left: 40px;
    padding-right: 40px;
  }
}