/* ============================================================================
   ZG Translate — styling
   ----------------------------------------------------------------------------
   Uitgangspunten:
   - Alle regels zijn gescoped onder .zg-translate (of .zg-translate__banner).
     Er worden GEEN globale regels op body/html/etc. geplaatst. De enige
     uitzondering is het verbergen van de Google-eigen chrome onderaan dit
     bestand; die elementen injecteert Google buiten onze container en zijn
     daarom onvermijdelijk globaal. Ze zijn zo specifiek mogelijk gehouden.
   - Kleuren/afmetingen komen uit CSS-variabelen met de ZG-huisstijl als
     default. Voor een tweede website hoef je alleen deze variabelen te
     overschrijven, niet de rest van de CSS.
   - Fonts erven van de skin (font: inherit), zodat de component automatisch
     het lettertype van de betreffende site overneemt.
   ============================================================================ */

.zg-translate {
  /* --- Huisstijl-variabelen (pas deze aan per website) --------------------- */
  --zg-primary:        #FA0164;                 /* accent / hover / actief    */
  --zg-primary-soft:   rgba(250, 1, 100, 0.06); /* tint achter actieve taal   */
  --zg-primary-contrast: #ffffff;               /* tekst op accent            */
  --zg-text:           #444444;                 /* basis tekstkleur           */
  --zg-muted:          #6c757d;                 /* subtiele tekst             */
  --zg-surface:        #ffffff;                 /* achtergrond dropdown       */
  --zg-surface-hover:  #f6f6f6;                 /* hover-achtergrond          */
  --zg-border:         #DDDCDD;                 /* randen                     */
  --zg-radius:         0.5rem;                  /* afgeronde hoeken           */
  --zg-shadow:         0 8px 24px rgba(0, 0, 0, 0.12);
  --zg-gap:            0.5rem;
  --zg-panel-width:    360px;                   /* binnen 340–380px           */

  position: relative;
  display: inline-flex;
  align-items: center;
  font: inherit;                                /* neem font van de skin over */
}

/* --- Translate-knop -------------------------------------------------------- */
.zg-translate__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  margin: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--zg-text);
  background: var(--zg-surface);
  border: 1px solid var(--zg-border);
  border-radius: 2rem;                          /* pill: leest als een knop    */
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}

.zg-translate__button:hover,
.zg-translate__button:focus-visible,
.zg-translate__button[aria-expanded="true"] {
  color: var(--zg-primary);
  border-color: var(--zg-primary);
  background-color: var(--zg-surface);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.zg-translate__button:focus-visible {
  outline: 2px solid var(--zg-primary);
  outline-offset: 2px;
}

.zg-translate__icon {
  flex: 0 0 auto;
  display: inline-block;
  color: var(--zg-primary);                     /* globe altijd in accentkleur */
}

/* --- Dropdown / card ------------------------------------------------------- */
.zg-translate__panel {
  position: absolute;
  top: calc(100% + var(--zg-gap));
  right: 0;                                     /* onder de knop, rechts uit  */
  z-index: 1050;                               /* boven navigatie            */
  width: var(--zg-panel-width);
  max-width: calc(100vw - 2rem);
  padding: 0.85rem;
  color: var(--zg-text);
  background: var(--zg-surface);
  border: 1px solid var(--zg-border);
  border-radius: calc(var(--zg-radius) + 0.15rem);
  box-shadow: var(--zg-shadow);
}

/* [hidden] verbergt het paneel; JS toggelt dit attribuut. */
.zg-translate__panel[hidden] {
  display: none;
}

.zg-translate__title {
  margin: 0.15rem 0 0.6rem;
  padding: 0 0.35rem 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--zg-text);
  border-bottom: 1px solid var(--zg-border);
}

/* --- Talenlijst ------------------------------------------------------------ */
.zg-translate__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bullets/nummering uit de skin binnen deze lijst hard uitschakelen. */
.zg-translate__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zg-translate__list li::before,
.zg-translate__list li::marker {
  content: none;
  display: none;
}

/* Eén taal-item (button, geen <select>) */
.zg-translate__language,
.zg-translate__reset {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  color: var(--zg-text);
  background: transparent;
  border: 0;
  border-radius: var(--zg-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.zg-translate__language:hover,
.zg-translate__language:focus-visible,
.zg-translate__reset:hover,
.zg-translate__reset:focus-visible {
  background-color: var(--zg-surface-hover);
  color: var(--zg-primary);
  outline: none;
}

/* Actieve/gekozen taal markeren */
.zg-translate__language.is-active {
  color: var(--zg-primary);
  font-weight: 700;
  background-color: var(--zg-primary-soft);    /* subtiele accent-tint */
}

.zg-translate__language.is-active::after {
  content: "\2713";                            /* vinkje */
  margin-left: auto;
  font-weight: 700;
  color: var(--zg-primary);
}

/* Vlag in een vaste kolom zodat alle taal-namen exact uitlijnen. */
.zg-translate__flag {
  flex: 0 0 1.6rem;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.zg-translate__name {
  flex: 1 1 auto;
}

/* --- Reset-knop (terug naar Nederlands) ------------------------------------ */
.zg-translate__reset {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  position: relative;
}

/* Scheidingslijn boven de reset, met dezelfde inspringing als de items. */
.zg-translate__reset::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.35rem;
  right: 0.35rem;
  border-top: 1px solid var(--zg-border);
}

.zg-translate__reset[hidden] {
  display: none;
}

/* --- Disclaimer onderin de dropdown ---------------------------------------- */
.zg-translate__notice {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--zg-text);
  background: var(--zg-banner-bg, #FEF4E1);
  border-radius: var(--zg-radius);
}

/* Info-icoon vóór de disclaimer-tekst. */
.zg-translate__notice::before {
  content: "\24D8";                             /* ⓘ */
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--zg-primary);
}

/* --- Verborgen Google-widget ----------------------------------------------- */
.zg-translate__engine {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Disclaimer-banner
   ========================================================================== */
.zg-translate__banner {
  width: 100%;
  color: var(--zg-text, #444444);
  background: var(--zg-banner-bg, #FEF4E1);     /* zachte, rustige tint       */
  border-bottom: 1px solid var(--zg-border, #DDDCDD);
  font: inherit;
  font-size: 0.85rem;
}

.zg-translate__banner[hidden] {
  display: none;
}

.zg-translate__banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 1140px;                            /* volgt de container-breedte */
  margin: 0 auto;
  padding: 0.6rem 1rem;
}

.zg-translate__banner-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--zg-primary, #FA0164);
}

.zg-translate__banner-text {
  flex: 1 1 auto;
  line-height: 1.4;
}

.zg-translate__banner-text strong {
  display: block;
  margin-bottom: 0.15rem;
}

.zg-translate__banner-close {
  flex: 0 0 auto;
  padding: 0 0.25rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--zg-muted, #6c757d);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.zg-translate__banner-close:hover,
.zg-translate__banner-close:focus-visible {
  color: var(--zg-primary, #FA0164);
}

/* ==========================================================================
   Responsive: op mobiel de dropdown gecentreerd onder de header tonen
   ========================================================================== */
@media (max-width: 575.98px) {
  .zg-translate {
    position: static;                          /* laat paneel t.o.v. header centreren */
  }

  .zg-translate__panel {
    position: absolute;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--zg-panel-width), calc(100vw - 1.5rem));
  }
}

/* ==========================================================================
   Laadindicator tijdens het vertalen
   --------------------------------------------------------------------------
   Dit overlay wordt door translate.js aan de <body> gehangen (buiten
   .zg-translate), daarom gebruiken we hier kleur-fallbacks naast de variabelen.
   ========================================================================== */
.zg-translate__loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
}

.zg-translate__loader[hidden] {
  display: none;
}

.zg-translate__loader-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 2rem;
  color: var(--zg-text, #444444);
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--zg-surface, #ffffff);
  border: 1px solid var(--zg-border, #DDDCDD);
  border-radius: var(--zg-radius, 0.5rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.zg-translate__spinner {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border: 4px solid var(--zg-border, #DDDCDD);
  border-top-color: var(--zg-primary, #FA0164);
  border-radius: 50%;
  animation: zg-translate-spin 0.7s linear infinite;
}

@keyframes zg-translate-spin {
  to { transform: rotate(360deg); }
}

/* Respecteer de voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
  .zg-translate__spinner {
    animation-duration: 1.6s;
  }
}

/* ==========================================================================
   Google Translate — eigen chrome verbergen
   --------------------------------------------------------------------------
   Dit zijn de ENIGE globale selectors in dit bestand. Google injecteert deze
   elementen buiten .zg-translate (aan de <body>), dus ze kunnen niet gescoped
   worden. Ze zijn bewust minimaal en specifiek gehouden.

   De standaard Google-vertaalbalk bovenaan (.goog-te-banner-frame) verbergen
   we volledig; de gebruiker ziet uitsluitend onze eigen dropdown. De ruimte
   die Google reserveert (body { top }) wordt in translate.js weer op 0 gezet,
   zodat er geen lege balk bovenaan de pagina overblijft.
   ========================================================================== */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

/* Voorkom dat Google de tekst-highlight op vertaalde elementen toont */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}