/* =========================================================================
   feedback-wb.css — vaste punten uit de feedback van ttwwoo (V1, nov 2026), voor Werken bij
   (werken-bij.html en werken-bij-vacature.html). Laatste stylesheet op die pagina's. Later samenvoegen met werken-bij.css.
   HUISREGELS
   Kleur   geel = aandacht en interactie; inkt = hoofdknop en voet; steen (--beige) = rustig vlak; wit = basis.
   Hoek    beeld en grote kaart --hoek; knop, label, veld recht (2px); rond alleen voor icoonknoppen.
   Schaduw geen op pagina-elementen; alleen zwevende lagen (venster, menu).
   Hover   wordt geel, nooit een schaduw of omhoogkomen.
   ========================================================================= */
:root {
  --geel-diep: var(--geel); --tegel: var(--beige); --raster-vlak: var(--beige);
  /* weekagenda: alleen steen, geel en inkt */
  --agenda-werk: var(--beige); --agenda-sport: var(--geel); --agenda-team: var(--inkt);
  --agenda-thuis: var(--beige); --agenda-thuis-vlak: var(--wit); --agenda-thuis-lijn: var(--beige); --agenda-thuis-rand: var(--inkt);
  --agenda-vrij: var(--beige); --agenda-teams: var(--wit); --agenda-legenda: var(--inkt);
}

/* 2 · film: geen geel blok en geen schaduw achter de video */
.wb-fo-geel::before { display: none; }
.wb-fo-midden .wb-fo-geel, .wb-fo-geel { margin-bottom: 0; }
.wb-fo-geel + .wb-fo-onder { margin-top: 24px; }
.wb-fo-scherm { box-shadow: none; border-radius: var(--hoek); }
.wb-fo-speel, .wb-strook-speel { box-shadow: none; }

/* 3 · groepschat: geen schaduw, namen zwart */
.wb-chat-scherm { box-shadow: none; background: var(--wit); }
.wb-chat-msg div { box-shadow: none; background: var(--beige); }
.wb-chat-vraag.van-jij > div { box-shadow: none; background: var(--geel); }
.wb-chat-msg b, .wb-chat-msg[data-wie] b { color: var(--inkt); }
.wb-chat-vraag:not(.van-jij) > div { background: var(--inkt); }

/* 4 · weekagenda: steen, geel en inkt; legenda mee */
.wb-agenda .ao5-kader { box-shadow: none; }
.wb-agenda .ao5-dag li.team, .wb-agenda .ao5-dag li.team * { color: var(--wit); }
.wb-agenda .ao5-dag li.sport { color: var(--inkt); }
.wb-agenda .ao5-dag li.werk { box-shadow: inset 0 0 0 1px var(--lijn); }
.wb-agenda .ao5-teams, .wb-agenda .ao5-teams * { color: var(--inkt) !important; }
.wb-agenda .ao5-kop em.thuis { box-shadow: inset 0 0 0 1px var(--inkt); }
.wb-agenda .ao-leg li::before { border-radius: 2px; }
.wb-agenda .ao-leg li.werk::before { box-shadow: inset 0 0 0 1px var(--lijn); }
.wb-agenda .ao-leg li.thuis::before { background: var(--wit); border: 1px solid var(--inkt); }
.wb-ag-blok:hover { box-shadow: none; transform: none; }

/* 5 · stickers: geen zwarte schaduw, geen groene stip */
.wb-nu-open, .wb-band-sticker, .wb-vh-boven .wb-nu-open { box-shadow: none; }
.wb-nu-open i, .wb-nu-open i::after, .wb-band-sticker i, .wb-band-sticker i::after, .wb-sol-knop .stip, .wb-sol-knop .stip::after { display: none; }
.wb-plakknop::before { display: none; }
.wb-plakknop { box-shadow: none; border-radius: 2px; padding-left: 20px; background: var(--inkt); color: var(--wit); border-color: var(--inkt); }

/* 6 · knoppen recht (2px), geen pil */
.wb-lb-kies button, .wb-chat .wb-chat-keuzeknop, .wb-sol-knop { border-radius: 2px; }
.wb-lb-kies button:hover { background: var(--geel); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.wb-lb-kies button[aria-pressed="true"]:hover { background: var(--inkt); }
.wb-chat .wb-chat-keuzeknop:hover { background: var(--geel); }

/* 7 · rijen bij Eerst kennismaken: geel vlak bij hover, grotere pijlen */
.wb-sparren-opties a { position: relative; padding-inline: 16px; }
.wb-sparren-opties a:hover, .wb-sparren-opties a:focus-visible { padding-inline: 16px; box-shadow: none; background: var(--geel); }
.wb-sparren-opties svg { width: 30px; height: 30px; }
.wb-sparren-opties a:hover svg, .wb-sparren-opties a:focus-visible svg { transform: translateX(4px); }

/* 9 · formulier wit, gelijk aan de hoofdsite (.formulier.zweef) */
.wb .contact.avond .formulier { background: var(--wit); border: 0; border-radius: var(--hoek); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.wb .contact.avond .formulier.zweef .zv-veld { border-bottom-color: var(--lijn); }
.wb .contact.avond .formulier.zweef .zv-veld :is(input, textarea) { color: var(--inkt); caret-color: var(--inkt); }
.wb .contact.avond .formulier.zweef .zv-groot { color: var(--veld-hint); }
.wb .contact.avond .formulier.zweef :is(.zv-klein, .zv-noot) { color: var(--zacht); }
.wb .contact.avond .formulier.zweef .zv-veld:focus-within { border-bottom-color: var(--inkt); box-shadow: inset 0 -1px 0 var(--inkt); }
.wb .contact.avond .formulier.zweef .zv-veld:focus-within .zv-klein { color: var(--inkt); }
.wb .contact.avond .formulier.zweef .zv-veld:has([aria-invalid="true"]) { border-bottom-color: var(--fout); box-shadow: inset 0 -1px 0 var(--fout); }
.wb .contact.avond .formulier.zweef .zv-veld:has([aria-invalid="true"]) .zv-klein, .wb .contact.avond .formulier.zweef .zv-fout { color: var(--fout); }
.wb .contact.avond .formulier.zweef .zv-uitleg, .wb .contact.avond .formulier .melding { color: var(--zacht); }
.wb .contact.avond .formulier .melding.fout { color: var(--fout); }
.wb .contact.avond .formulier.zweef .zv-uitleg a:hover { color: var(--inkt); }
.wb .contact.avond .formulier.zweef :focus-visible, .wb .contact.avond .formulier :focus-visible { outline-color: var(--inkt); }
.wb .contact.avond .formulier .verstuur { background: var(--inkt); color: var(--wit); border-radius: 2px; }
.wb .contact.avond .formulier .verstuur::before { background: var(--geel); transform: scaleX(0); }
.wb .contact.avond .formulier .verstuur:hover, .wb .contact.avond .formulier .verstuur:focus-visible { background: var(--inkt); color: var(--inkt); }
@media (hover: hover) { .wb .contact.avond .formulier .verstuur:hover::before, .wb .contact.avond .formulier .verstuur:focus-visible::before { transform: scaleX(1); } }
/* upload-velden in het formulier (vacaturepagina): wit, rustig, recht */
.wb-drop { background: var(--wit); border-color: var(--lijn); border-radius: var(--hoek); box-shadow: none; }
.wb-drop:hover, .wb-drop.sleept, .wb-drop:focus-within { background: var(--geel); border-color: var(--inkt); }

/* 8 · dubbele telefoon en mail bij de vraag: staan al in de voet */
.contact.avond .avond-sub a, .contact.avond .avond-sub br { display: none; }

/* 10 · Groeien: geen grote lege ruimte meer; twee voorbeelden staan naast elkaar, zo is de hoogste keuze niet twee keer zo hoog */
@media (min-width: 861px) {
  .wb-gr1 .wb-gr-kaarten:has(.wb-gr-kaart.aan ~ .wb-gr-kaart.aan) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-gr1 .wb-gr-kaarten:has(.wb-gr-kaart.aan ~ .wb-gr-kaart.aan) .wb-gr-kaart.aan { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.wb-gr-kaart { border-color: var(--lijn); }

/* 11 · vacaturepagina, Dit biedt Workx: dezelfde kaartstijl, geen schaduw, geen eigen tint */
.wb-bk-raster li { background: var(--beige); border: 0; border-radius: var(--hoek); box-shadow: none; }
.wb-bk-raster li::before { display: none; }
.wb-bk-raster li.aan, .wb-bk-raster li:hover { box-shadow: none; transform: none; background: var(--geel); }
.wb-bk-raster li.aan .wb-bo2-ico, .wb-bk-raster li:hover .wb-bo2-ico { background: var(--inkt); color: var(--geel); }
.wb-bk .wb-loon { border-radius: var(--hoek); }

/* 12 · logobalk: het label duwt het logo niet meer omhoog; de hoogte per logo komt uit feedback-wb.js */
.logoband-item { position: relative; }
.logoband-item .wc-label { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); margin: 0; white-space: nowrap; }
@media (max-width: 860px) { .logoband-item .wc-label { top: calc(50% + 18px); } }