/* jimreeves.eu — de knop "Verzoekje" in de menubalk en het venster erachter (js/verzoek.js).
   De knop staat rechtsboven, op dezelfde plek waar beheerders het tandwiel zien. Elke show geeft
   hem zijn eigen kleur mee via --verzoek-kleur. (Rolf 25-9-2026, ticket 65.) */
.verzoek-knop { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 999px;
  background: var(--verzoek-kleur, #ff5500); color: #fff; font: inherit; font-size: .88rem;
  font-weight: 700; padding: .32rem .9rem .36rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: filter .15s, transform .15s; }
.verzoek-knop:hover, .verzoek-knop:focus-visible { filter: brightness(1.12); transform: translateY(-50%) scale(1.04); outline: 0; }
.verzoek-knop i { font-size: .82em; }
/* Op een telefoon is de menubalk verborgen en bouwt js/nav.js een eigen balk met de naam van de
   pagina en de hamburger. Daar staat een tweede knop in, links van de hamburger (.verzoek-mob);
   de gewone knop zit in de verborgen balk en doet daar niets. (Rolf 25-9-2026.) */
.verzoek-knop.verzoek-mob { position: static; transform: none; margin: 0; flex: none;
  font-size: .85rem; padding: .3rem .8rem .34rem; box-shadow: none; }
.verzoek-knop.verzoek-mob:hover, .verzoek-knop.verzoek-mob:focus-visible { transform: scale(1.04); }
@media (min-width: 768px) { .verzoek-knop.verzoek-mob { display: none; } }
/* de naam in die balk mag inkorten, zodat de knop er altijd naast past */
.nav-mobile .nav-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.verzoek-laag { position: fixed; inset: 0; z-index: 10060; background: rgba(20,19,17,.66);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem 2rem; }
.verzoek-bak { background: #fff; color: #222; border-radius: 12px; width: 100%; max-width: 30rem;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.verzoek-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; background: var(--verzoek-kleur, #ff5500); color: #fff; font-size: 1.05rem; }
.verzoek-kop button { border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 1.2rem;
  line-height: 1; border-radius: 6px; padding: .15rem .6rem .3rem; cursor: pointer; }
.verzoek-kop button:hover { background: rgba(255,255,255,.34); }
/* Het venster heeft altijd een witte achtergrond, ook op een pagina met een donker thema. Elvis
   zet de tekstkleur met .elvis-dark p — één klasse, dus die wint van een losse .verzoek-uit. Alle
   regels hieronder staan daarom twee klassen diep. (Rolf 25-9-2026: de uitleg was daar onleesbaar
   lichtgrijs.) */
.verzoek-bak, .verzoek-bak p, .verzoek-bak label, .verzoek-bak strong { color: #222; }
/* …behalve in de gekleurde balk bovenaan: daar raakte de regel hierboven ook de titel, en dan
   staat er donkere tekst op rood. (Rolf 27-9-2026: "Zwarte tekst op een rode achtergrond oogt
   niet fijn.") */
.verzoek-bak .verzoek-kop, .verzoek-bak .verzoek-kop strong { color: #fff; }
.verzoek-body { padding: 1rem 1.1rem .4rem; overflow-y: auto; }
.verzoek-bak .verzoek-uit { margin: 0 0 1rem; color: #555; line-height: 1.6; font-size: .95rem; }
.verzoek-bak .verzoek-body label { display: block; margin: .7rem 0 .25rem; font-weight: 600; font-size: .92rem; color: #333; }
.verzoek-bak .verzoek-body label em { font-weight: 400; font-style: normal; color: #8a8579; }
.verzoek-body input[type=text], .verzoek-body input[type=email], .verzoek-body textarea {
  /* box-sizing hoort hierbij: zonder dat komt de binnenruimte bovenop de 100% en loopt het veld
     een paar tellen buiten de kaart. In één kolom viel dat weg achter de afgeronde hoek, in twee
     kolommen niet meer. (27-9-2026.) */
  width: 100%; box-sizing: border-box; border: 1px solid #d8d3c8; border-radius: 8px;
  padding: .5rem .7rem; font: inherit; font-size: 1rem; color: #222; background: #fff; }
.verzoek-body input:focus, .verzoek-body textarea:focus { outline: 0; border-color: var(--verzoek-kleur, #ff5500); }
.verzoek-body textarea { resize: vertical; min-height: 4.5rem; }
.verzoek-bak .verzoek-klein { margin: .3rem 0 0; font-size: .82rem; color: #8a8579; }
/* het lokveld voor bots: uit beeld, maar niet display:none — daar trappen ze niet in */
.verzoek-lok { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.verzoek-bak .verzoek-uitslag { margin: .9rem 0 .2rem; font-size: .95rem; min-height: 1.2em; color: #333; }
.verzoek-bak .verzoek-uitslag.fout { color: #c0392b; font-weight: 600; }
.verzoek-bak .verzoek-dank { margin: .6rem 0 1rem; font-size: 1.05rem; line-height: 1.6; color: #222; }
.verzoek-voet { display: flex; gap: .6rem; padding: .8rem 1.1rem 1rem; border-top: 1px solid #eee; }
.verzoek-stuur { border: 0; border-radius: 8px; background: var(--verzoek-kleur, #ff5500); color: #fff;
  font: inherit; font-weight: 700; padding: .5rem 1.2rem; cursor: pointer; }
.verzoek-stuur:hover { filter: brightness(1.1); }
.verzoek-stuur:disabled { opacity: .6; cursor: default; }
.verzoek-annuleer { border: 0; border-radius: 8px; background: #ece9e2; color: #333; font: inherit;
  padding: .5rem 1.1rem; cursor: pointer; }
.verzoek-annuleer:hover { background: #e0dcd2; }
/* Twee kolommen op een breed scherm: de uitleg links, het formulier rechts. Alleen als het in het
   beheer is aangezet, en alleen als er ook echt ruimte is. Onder die breedte valt alles vanzelf
   terug op één kolom. (Rolf 27-9-2026, ticket 65.) */
@media (min-width: 860px) {
  .verzoek-breed .verzoek-bak { max-width: 48rem; }
  .verzoek-breed .verzoek-body { display: grid; grid-template-columns: 17rem 1fr; gap: 0 1.6rem;
    align-items: start; }
  .verzoek-breed .verzoek-intro { position: sticky; top: 0; min-width: 0; }
  .verzoek-breed .verzoek-foto { display: block; width: 100%; height: auto; margin: 0 0 .9rem;
    border-radius: 10px; }
  /* zonder dit groeit de kolom met de invulvelden buiten de kaart: een grid-kolom mag standaard
     niet kleiner worden dan zijn inhoud, en die velden staan op 100% breedte */
  .verzoek-breed .verzoek-velden { min-width: 0; }
  .verzoek-breed .verzoek-bak .verzoek-uit { font-size: 1rem; }
}

/* Op een smal scherm staat de foto boven de uitleg, wat kleiner. */
.verzoek-foto { display: block; width: 8rem; max-width: 40%; height: auto; float: right;
  margin: 0 0 .6rem .8rem; border-radius: 8px; }
@media (min-width: 860px) { .verzoek-breed .verzoek-foto { float: none; width: 100%; max-width: 100%;
  margin: 0 0 .9rem; } }

@media (max-width: 575px) { .verzoek-laag { padding: 2vh .6rem 1rem; } }

/* Staat er nog iets ingevuld dat niet verstuurd is, dan wiebelt de knop elke zeven seconden even.
   Twee stellen beelden, want de knop in de menubalk staat met translateY(-50%) op zijn plek en die
   op de telefoon niet: een animatie zonder die verschuiving zou hem laten springen.
   (Rolf 27-9-2026, ticket 65.) */
@keyframes verzoek-wiebel {
  0%, 86%, 100% { transform: translateY(-50%) scale(1) rotate(0); }
  89%           { transform: translateY(-50%) scale(1.07) rotate(-2.5deg); }
  92%           { transform: translateY(-50%) scale(1.07) rotate(2.5deg); }
  95%           { transform: translateY(-50%) scale(1.04) rotate(-1deg); }
}
@keyframes verzoek-wiebel-mob {
  0%, 86%, 100% { transform: scale(1) rotate(0); }
  89%           { transform: scale(1.07) rotate(-2.5deg); }
  92%           { transform: scale(1.07) rotate(2.5deg); }
  95%           { transform: scale(1.04) rotate(-1deg); }
}
.verzoek-knop.verzoek-onaf { animation: verzoek-wiebel 7s ease-in-out infinite; }
.verzoek-knop.verzoek-mob.verzoek-onaf { animation-name: verzoek-wiebel-mob; }
/* bij aanwijzen niet wiebelen, anders vecht de animatie met de hover-vergroting */
.verzoek-knop.verzoek-onaf:hover, .verzoek-knop.verzoek-onaf:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .verzoek-knop.verzoek-onaf { animation: none; } }

/* --- aanvulling voor WordPress ----------------------------------------------------------------
   Op de live site hing de knop los in de menubalk en stond hij met `position: absolute` rechts
   vastgezet. Hier is hij het laatste item ín het menu, en dan legt absolute hem dwars over de
   andere menu-items heen. Binnen het menu dus gewoon meelopen, en met margin-left:auto helemaal
   naar rechts. (Rolf 9-10-2026: "Hij staat nu nog door de andere navigatie heen" / "moet naar
   rechts".) */
.jr-verzoek-item { display: flex; align-items: center; margin-left: auto; }
.jr-verzoek-item .verzoek-knop { position: static; transform: none; margin: 0 0 0 .8rem; }
.jr-verzoek-item .verzoek-knop:hover,
.jr-verzoek-item .verzoek-knop:focus-visible { transform: scale(1.04); }

/* Op een smal scherm klapt het menu open als een lijst onder elkaar; dan hoort de knop niet
   rechts te blijven plakken maar gewoon de laatste regel te zijn. */
@media (max-width: 768px) {
  .jr-verzoek-item { margin-left: 0; }
  .jr-verzoek-item .verzoek-knop { width: 100%; justify-content: center; margin: .4rem 0; }
}

/* het nootje op de knop, als tekening in de pagina (zie JR_VZ_Voorkant::noot) */
.verzoek-knop .verzoek-noot { flex: 0 0 auto; }