/*
 * The Trace, taalkiezer: alle vier varianten (A, B, C, D) in een bestand. Samengevoegd op
 * 29-09-2026 uit Webshop/vertaalmachine/taalkiezer-varianten (basis plus de vier variantbestanden,
 * ongewijzigd behalve waar hieronder AANGEPAST staat). Geladen door inc/tt-taal-js.php, alleen als er
 * een kiezer op de pagina staat. Elke regel hangt aan een variantklasse (.tt-taal--a, --b, --c-menu,
 * --c-balk, --d) of aan .tt-taal-blad, dus de varianten zitten elkaar niet in de weg.
 */


/* ===== tt-taal-basis.css ===== */
/*
 * The Trace, taalkiezer: basis voor alle varianten (A, B, C, D). Opgesteld 28-09-2026.
 * Neem dit bestand altijd mee, plus het CSS-bestand van de gekozen variant.
 *
 * Lettertype: de kop van thetrace.eu staat op Lato (gemeten 28-09-2026: font-family
 * "Lato, Arial, Helvetica, sans-serif" op elke menulink). De kiezer neemt die stapel over,
 * zodat hij niet als een vreemd element in de kop staat. Arial is de terugval. Wil je puur
 * Arial, verander dan alleen --tt-letter.
 *
 * Goud: --tt-goud staat op #C4A84A zoals gevraagd. Let op: de kop van de site gebruikt voor
 * de telbolletjes en het actieve menu-item #CB9500 (gemeten). Wil je dat de kiezer daar
 * exact bij aansluit, zet --tt-goud dan op #CB9500.
 */
.tt-taal,
.tt-taal-blad {
  --tt-zwart: #0d0d0d;
  --tt-goud: #C4A84A;
  --tt-lijn: rgba(255, 255, 255, .12);
  --tt-zacht: rgba(255, 255, 255, .62);
  --tt-letter: Lato, Arial, Helvetica, sans-serif;
  font-family: var(--tt-letter);
}
.tt-taal { position: relative; }
.tt-taal *, .tt-taal *::before, .tt-taal *::after,
.tt-taal-blad *, .tt-taal-blad *::before, .tt-taal-blad *::after { box-sizing: border-box; }

/* Woodmart geeft een <button> een eigen hoogte, achtergrond en hoofdletters: alles terug. */
.tt-taal button,
.tt-taal-blad button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  height: auto;
  min-height: 0;
  line-height: 1;
  letter-spacing: normal;
  cursor: pointer;
  color: inherit;
  font-family: var(--tt-letter);
  -webkit-tap-highlight-color: transparent;
}
/*
 * Woodmart zet op knoppen bij :hover, :focus en :active een lichtgrijze achtergrond
 * (:is(.btn, .button, button, ...) met --btn-bgcolor, #F3F3F3). Op een telefoon blijft
 * :hover na een tik hangen, dus zonder deze regel staat de knop grijs zodra hij open is.
 */
.tt-taal button:hover, .tt-taal button:focus, .tt-taal button:active,
.tt-taal-blad button:hover, .tt-taal-blad button:focus, .tt-taal-blad button:active {
  background-color: transparent;
  box-shadow: none;
}
.tt-taal button:focus-visible, .tt-taal a:focus-visible,
.tt-taal-blad button:focus-visible, .tt-taal-blad a:focus-visible {
  outline: 2px solid var(--tt-goud);
  outline-offset: -2px;
}

.tt-taal__wereld { width: 18px; height: 18px; flex: 0 0 18px; display: block; }
.tt-taal__pijl { width: 10px; height: 6px; flex: 0 0 10px; display: block; transition: transform .15s ease; }
.tt-taal.is-open .tt-taal__pijl { transform: rotate(180deg); }
.tt-taal__vink { width: 16px; height: 16px; flex: 0 0 16px; display: block; }

.tt-taal [hidden], .tt-taal-blad[hidden], .tt-taal-blad [hidden] { display: none !important; }

.tt-taal__lijst { margin: 0; padding: 0; list-style: none; }
.tt-taal__lijst li { margin: 0; padding: 0; list-style: none; border: 0; }
.tt-taal__lijst li::before { content: none; }
.tt-taal__lijst a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 15px 16px;          /* 15 + 18 + 15 = 48 px, ook als het thema min-height wegzet */
  color: #fff;
  font: 400 15px/18px var(--tt-letter);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}
.tt-taal__lijst a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.tt-taal__naam { flex: 1 1 auto; }
.tt-taal__afk { flex: 0 0 auto; color: var(--tt-zacht); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.tt-taal__lijst a[aria-current],
.tt-taal__lijst a[aria-current]:hover { color: var(--tt-goud); font-weight: 700; }

/* ===== AANGEPAST 29-09-2026, gemeten op staging =====
 * 1. Woodmart geeft een knop bij :focus en :active een andere tekstkleur (in het uitschuifmenu werd
 *    LANGUAGE grijs na een tik). Hier terug naar wit; de goudregels per variant staan hieronder en
 *    winnen omdat ze later komen met dezelfde specificiteit.
 * 2. Woodmart tekent op elke knop en link een gestippelde witte focusrand met !important, gestuurd
 *    door de variabelen --wd-otl-* (gemeten: rgb(255,255,255) dotted 2px). Door die variabelen hier
 *    te zetten houdt de kiezer overal dezelfde gouden rand, zonder tegen !important in te vechten.
 */
.tt-taal .tt-taal__knop:is(:hover, :focus, :active),
.tt-taal .tt-taal__rij:is(:hover, :focus, :active),
.tt-taal-blad .tt-taal-blad__dicht:is(:hover, :focus, :active) { color: #fff; }
.tt-taal, .tt-taal-blad { --wd-otl-style: solid; --wd-otl-width: 2px; --wd-otl-color: #C4A84A; --wd-otl-offset: -2px; }

/* ===== variant-a-code-in-de-kop.css ===== */
/*
 * Variant A: wereldbol plus taalcode in de kop, met een uitklaplijst.
 * Plek: telefoon en tablet in de rechterkolom van de mobiele kop, voor het hartje.
 *       Desktop in de hoofdrij, tussen het zoekveld en het hartje.
 * Nodig: tt-taal-basis.css en tt-taal-kiezer.js.
 */
.tt-taal--a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.tt-taal--a .tt-taal__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tt-taal--a .tt-taal__knop:hover .tt-taal__code,
.tt-taal--a.is-open .tt-taal__code { color: var(--tt-goud); }

/* Telefoon en tablet: de pijl weglaten scheelt 16 px in een volle kop. */
@media (max-width: 1024px) {
  .tt-taal--a .tt-taal__pijl { display: none; }
  .tt-taal--a .tt-taal__knop { padding: 0 6px; gap: 5px; }
}

.tt-taal--a .tt-taal__lijst {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  width: 232px;
  margin-top: 6px;
  padding: 6px 0;
  background: var(--tt-zwart);
  border: 1px solid var(--tt-lijn);
  border-top: 2px solid var(--tt-goud);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ===== variant-b-vlag-met-onderblad.css ===== */
/*
 * Variant B: vlag plus taalcode in de kop. Op telefoon en tablet schuift er een blad
 * van onderen in met grote regels; op desktop is het een uitklaplijst met vlaggen.
 * Plek: dezelfde als variant A.
 * Nodig: tt-taal-basis.css en tt-taal-kiezer.js. Het blad wordt op telefoon en tablet door
 * tt-taal-kiezer.js onder <body> gezet, daarom staan de bladregels los van .tt-taal.
 *
 * Vlaggen: als SVG in de CSS (data-URI), zodat er geen losse bestanden of id-botsingen zijn.
 * Engels draagt de Britse vlag; dat is een keuze en geen feit, zie het overzicht.
 */
.tt-taal--b { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tt-taal--b .tt-taal__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tt-taal--b .tt-taal__knop:hover .tt-taal__code,
.tt-taal--b.is-open .tt-taal__code { color: var(--tt-goud); }
@media (max-width: 1024px) {
  .tt-taal--b .tt-taal__pijl { display: none; }
  .tt-taal--b .tt-taal__knop { padding: 0 6px; gap: 6px; }
}

.tt-vlag {
  display: inline-block;
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

/* ---------- Blad onderin (telefoon en tablet) ---------- */
.tt-taal-blad {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tt-taal-blad__sluier { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.tt-taal-blad__vlak {
  position: relative;
  background: var(--tt-zwart);
  border-top: 2px solid var(--tt-goud);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);
}
.tt-taal-blad__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 4px 0 20px;
  border-bottom: 1px solid var(--tt-lijn);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tt-taal-blad .tt-taal-blad__dicht { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; }
.tt-taal-blad__dicht svg { width: 16px; height: 16px; display: block; }
.tt-taal-blad__lijst a { min-height: 56px; padding: 19px 20px; gap: 14px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tt-taal-blad__lijst .tt-vlag { width: 30px; height: 20px; }
html.tt-taal-blad-open, html.tt-taal-blad-open body { overflow: hidden; }

/* ---------- Uitklaplijst (desktop) ---------- */
@media (min-width: 1025px) {
  .tt-taal-blad { position: absolute; inset: auto; top: 100%; right: 0; display: block; z-index: 1000; width: 260px; margin-top: 6px; }
  .tt-taal-blad__sluier, .tt-taal-blad__kop { display: none; }
  .tt-taal-blad__vlak { border: 1px solid var(--tt-lijn); border-top: 2px solid var(--tt-goud); padding: 6px 0; max-height: none; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
  .tt-taal-blad__lijst a { min-height: 48px; padding: 15px 16px; font-size: 15px; border-bottom: 0; }
  .tt-taal-blad__lijst .tt-vlag { width: 24px; height: 16px; }
}

/* ---------- Vlaggen ---------- */
.tt-vlag--en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E")}
.tt-vlag--nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23AE1C28'/%3E%3Crect y='.6667' width='3' height='.6667' fill='%23FFFFFF'/%3E%3Crect y='1.3333' width='3' height='.6667' fill='%2321468B'/%3E%3C/svg%3E")}
.tt-vlag--de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23000000'/%3E%3Crect y='.6667' width='3' height='.6667' fill='%23DD0000'/%3E%3Crect y='1.3333' width='3' height='.6667' fill='%23FFCE00'/%3E%3C/svg%3E")}
.tt-vlag--fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='1' height='2' fill='%23002654'/%3E%3Crect x='1' width='1' height='2' fill='%23FFFFFF'/%3E%3Crect x='2' width='1' height='2' fill='%23CE1126'/%3E%3C/svg%3E")}
.tt-vlag--pl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='1' fill='%23ffffff'/%3E%3Crect y='1' width='3' height='1' fill='%23dc143c'/%3E%3C/svg%3E")}
.tt-vlag--it{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23FFFFFF'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E")}
.tt-vlag--et{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%230072CE'/%3E%3Crect y='.6667' width='3' height='.6667' fill='%23000000'/%3E%3Crect y='1.3333' width='3' height='.6667' fill='%23FFFFFF'/%3E%3C/svg%3E")}
.tt-vlag--es{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E")} /* 30-09-2026, burgervlag zonder wapen */
.tt-vlag--cs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23D7141A'/%3E%3Crect width='3' height='1' fill='%23FFFFFF'/%3E%3Cpath d='M0,0 1.5,1 0,2z' fill='%2311457E'/%3E%3C/svg%3E")} /* 01-10-2026 */

/* ===== variant-c-rustig-in-menu-en-bovenbalk.css ===== */
/*
 * Variant C: rustig. Geen knop in de kop op telefoon en tablet.
 * Plek: telefoon en tablet in het uitschuifmenu, direct onder het zoekveld, als een regel
 *       die openklapt. Desktop in de dunne bovenbalk naast CONTACT US, als tekstlink.
 * Nodig: tt-taal-basis.css en tt-taal-kiezer.js.
 */

/* ---------- In het uitschuifmenu (telefoon en tablet) ---------- */
.tt-taal--c-menu { display: block; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tt-taal--c-menu .tt-taal__rij {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
}
.tt-taal--c-menu .tt-taal__label { flex: 1 1 auto; }
.tt-taal--c-menu .tt-taal__huidig { color: var(--tt-goud); font-weight: 700; text-transform: none; font-size: 14px; }
.tt-taal--c-menu .tt-taal__lijst { background: #0a0a0a; border-top: 1px solid rgba(255, 255, 255, .06); padding: 4px 0; }
.tt-taal--c-menu .tt-taal__lijst a { padding: 15px 20px 15px 48px; font-size: 14px; }

/* ---------- In de bovenbalk (desktop) ----------
 * Let op: de site heeft de regel  #menu-top-bar-right li > a { min-height: 0 !important }
 * (gemeten 28-09-2026). Die raakt ook onze taalregels, daarom rust hun hoogte van 48 px
 * op de opvulling (15 + 18 + 15) en niet op min-height.
 */
.tt-taal--c-balk { display: flex; align-items: center; list-style: none; }
.tt-taal--c-balk .tt-taal__knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -7px 0;              /* 44 px raakbaar, maar de balk blijft 31 px hoog */
  padding: 0 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.tt-taal--c-balk .tt-taal__wereld { width: 15px; height: 15px; flex-basis: 15px; }
.tt-taal--c-balk .tt-taal__knop:hover,
.tt-taal--c-balk.is-open .tt-taal__knop { color: var(--tt-goud); }
.tt-taal--c-balk .tt-taal__lijst {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 1000;
  width: 232px;
  padding: 6px 0;
  background: var(--tt-zwart);
  border: 1px solid var(--tt-lijn);
  border-top: 2px solid var(--tt-goud);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ===== variant-d-zwevende-knop.css ===== */
/*
 * Variant D: zwevende knop rechtsonder.
 * Plek: vast in beeld. Telefoon en tablet 16 px boven de werkbalk van Woodmart (55 px hoog,
 *       gemeten), desktop 24 px uit de hoek. Tracey zit LINKSonder (gemeten), dus die raakt
 *       hij niet; de koopbalk die op een productpagina onderin verschijnt wel, zie het overzicht.
 * Nodig: tt-taal-basis.css en tt-taal-kiezer.js.
 */
.tt-taal--d {
  position: fixed;
  right: 16px;
  bottom: calc(55px + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 340;               /* onder de werkbalk (350) en de laden (400/500) van Woodmart */
}
@media (min-width: 1025px) {
  .tt-taal--d { right: 24px; bottom: 24px; }
}
/*
 * Op een productpagina schuift Woodmart bij het scrollen een koopbalk in (.wd-sticky-btn-shown).
 * Gemeten 28-09-2026: telefoon 42 px boven de werkbalk, tablet 95 px boven de werkbalk,
 * desktop 95 px onderin. Zonder deze regels ligt de knop OP die koopbalk. Met deze regels
 * springt hij omhoog zodra de koopbalk verschijnt. De hoogtes zijn van het thema overgenomen,
 * dus bij een andere koopbalk (Bricks) moeten ze mee.
 */
.tt-taal--d { transition: bottom .2s ease; }
body:has(.wd-sticky-btn-shown) .tt-taal--d { bottom: calc(55px + 42px + 16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) and (max-width: 1024px) {
  body:has(.wd-sticky-btn-shown) .tt-taal--d { bottom: calc(55px + 95px + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1025px) {
  body:has(.wd-sticky-btn-shown) .tt-taal--d { bottom: calc(95px + 16px); }
}
.tt-taal--d .tt-taal__zweef,
.tt-taal--d .tt-taal__zweef:hover,
.tt-taal--d .tt-taal__zweef:focus,
.tt-taal--d .tt-taal__zweef:active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 52px;
  background: var(--tt-zwart);
  border: 1px solid var(--tt-goud);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.tt-taal--d.is-open .tt-taal__zweef { color: var(--tt-goud); }
.tt-taal--d .tt-taal__lijst {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 232px;
  padding: 6px 0;
  background: var(--tt-zwart);
  border: 1px solid var(--tt-lijn);
  border-bottom: 2px solid var(--tt-goud);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .55);
}