/* =========================================================================
   feedback-wi.css — vaste punten uit de feedback van ttwwoo (V1, nov 2026), voor WorkxIN (workxin.nl, ook /en/).
   Zelfde huisregels als feedback.css op de hoofdsite; laatste stylesheet op deze pagina.
   Kleur   geel = aandacht en interactie; inkt = hoofdknop en voet; steen (--beige) en wit = vlak; geen tussentinten.
   Hoek    foto en grote kaart --hoek; knop, label, veld recht (2px); rond alleen voor icoonknoppen.
   Schaduw geen op pagina-elementen; alleen zwevende lagen (menu, venster) en de tekeningen zelf.
   Hover   wordt geel, nooit een schaduw of omhoogkomen.
   ========================================================================= */

/* 1. Contact: Bellen, Mailen en Adres staan al in de voet */
.wc-gegevens { display: none; }

/* 2. Hoeken en schaduwen */
.wc-form, .wt-wand, .a1 li, .k1 .wi-gedetacheerd li { border-radius: var(--hoek); }
.wc-form, .formulier { box-shadow: none; }
.wt .lid .foto { border-radius: var(--hoek); }
.wf-badges { border-radius: 2px; }
/* gedetacheerd bij: bij aanwijzen niet omhoog en geen schaduw (de zwarte achterkant blijft de uitklap) */
.k1 .wi-gedetacheerd li:hover, .k1 .wi-gedetacheerd li:focus-within, .k1 .wi-gedetacheerd li.open,
.js .k1 .wi-gedetacheerd.in li:hover, .js .k1 .wi-gedetacheerd.in li:focus-within, .js .k1 .wi-gedetacheerd.in li.open { transform: none; box-shadow: none; }
/* rijen en kaarten bij aanwijzen: geel */
.wt-punten li { position: relative; transition: background-color .2s ease; }
@media (hover: hover) { .wt-punten li:hover { background: var(--geel); } }
.wf-tabs button:focus-visible { outline: 2px solid var(--geel); outline-offset: 2px; }

/* 3. Menu: workxadvocaten.nl is een andere website; apart gezet, met pijltje schuin omhoog (feedback-wi.js zet klasse en pijl) */
.hoofdmenu li.wi-extern a { display: inline-flex; align-items: center; gap: 6px; }
.hoofdmenu li.wi-extern .wi-ext-pijl { flex: none; width: 15px; height: 15px; margin-top: -1px; }
@media (min-width: 861px) {
  .wi .hoofdmenu li.wi-extern { margin-left: 8px; padding-left: 24px; border-left: 1px solid var(--lijn); }
}
@media (min-width: 861px) and (max-width: 1100px) { .wi .hoofdmenu li.wi-extern { margin-left: 0; padding-left: 14px; } }
@media (max-width: 860px) {
  .hoofdmenu li.wi-extern { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--lijn); }
  .hoofdmenu li.wi-extern .wi-ext-pijl { width: 22px; height: 22px; }
}

/* 4. Logoband: het label "Ondernemingsraad" duwt het logo niet omhoog; logo's staan optisch op één lijn (feedback-wi.js) */
.wi-klanten .logoband-item { position: relative; }
.wi-klanten .wc-label { position: absolute; left: 50%; top: calc(50% + 21px); transform: translateX(-50%); margin: 0; white-space: nowrap; }
.wi-klanten .logoband-item img, .wi-gedetacheerd .logo-vak img { translate: var(--op-x, 0) var(--op-y, 0); }
@media (max-width: 860px) { .wi-klanten .wc-label { top: calc(50% + 17px); } }
/* de korte tekst bij de band blijft klein en bescheiden */
.wi-klanten p b { font-size: 15px; }
.wi-klanten .logoband-item { height: 74px; }
.wi-klanten .wc-label { top: calc(50% + 22px); }
@media (max-width: 860px) { .wi-klanten .wc-label { top: calc(50% + 19px); } }

/* menu past ook op laptops: minder tussenruimte tot de tekst weer ruim past */
@media (min-width: 861px) and (max-width: 1400px) {
  .wi .kop-balk .wrap { gap: 16px; }
  .wi .hoofdmenu { gap: 16px; font-size: 15px; }
  .wi .hoofdmenu a { font-size: 15px; white-space: nowrap; }
  .wi .kop-balk .taal { flex: none; font-size: 15px; }
}

/* gedetacheerd bij: tussen 861 en 1199 px zijn de tegels smal; de achterkant met twee portretten, tekst en "Lees de ervaring" paste niet meer (viel af) */
@media (min-width: 861px) and (max-width: 1199px) { .k1 .wi-gedetacheerd > li { min-height: 330px; } }