/* ============================================================================
   Bruuks Huus — Verenigingen-editor (Taak 5, Iggy)
   ----------------------------------------------------------------------------
   Twee dingen delen dit bestand:
   1. Het front-end editor-formulier + berichtenlijst op page-mijn-vereniging.php.
   2. Een skin voor het standaard wp-login.php (login_enqueue_scripts in
      inc/editor-hooks.php) — bewust GEEN eigen auth-formulier gebouwd, WP-core
      blijft de login-logica doen, wij passen alleen de jas aan.

   Senior-vriendelijk (plan.md Taak 5, letterlijke eis): grote knoppen, hoge
   contrast, ≥16px tekst, geen jargon, duidelijke focus-states. Gebruikt de
   --bh-* brandbook-tokens rechtstreeks (niet de main.css-tokenbrug) zodat dit
   bestand ook zelfstandig op de kale login-pagina werkt.
   ============================================================================ */

/* ---- Formulier-kaart ---- */
.editor-form{
  background:var(--bh-surface);
  border:1px solid var(--bh-border);
  border-radius:var(--bh-radius-lg);
  box-shadow:var(--bh-shadow-md);
  padding:clamp(24px,3.5vw,40px);
  margin-top:34px;
}
.ed-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.ed-row{display:grid; gap:10px}
.ed-row.full{grid-column:1 / -1}

.editor-form label{
  font-family:var(--bh-font); font-weight:var(--bh-w-bold);
  font-size:1rem; color:var(--bh-heading);
}
.editor-form label .req{color:var(--bh-accent); margin-left:3px}
.editor-form .ed-optional{
  font-weight:var(--bh-w-regular); font-size:.9rem; color:var(--bh-text-muted); text-transform:none; letter-spacing:0;
}

.editor-form input[type="text"],
.editor-form input[type="date"],
.editor-form textarea{
  font-family:var(--bh-font); font-size:1.0625rem; color:var(--bh-text-strong);
  background:var(--bh-bg); border:2px solid var(--bh-border); border-radius:var(--bh-radius-md);
  padding:16px 18px; width:100%; min-height:56px;
  transition:border-color var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease);
}
.editor-form textarea{min-height:160px; resize:vertical; line-height:var(--bh-lh-base)}
.editor-form input[type="file"]{
  font-family:var(--bh-font); font-size:1rem; color:var(--bh-text-strong);
  padding:10px 0; width:100%;
}
.editor-form input:focus-visible,
.editor-form textarea:focus-visible{
  outline:none; border-color:var(--bh-focus); box-shadow:0 0 0 4px var(--bh-terracotta-a40);
}

.ed-hint{font-family:var(--bh-font); font-size:.9375rem; color:var(--bh-text-muted); margin:2px 0 0; line-height:var(--bh-lh-snug)}
.ed-hint-warn{color:var(--bh-terracotta); font-weight:var(--bh-w-bold)}

.ed-current-photo{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.ed-current-photo img{width:64px; height:64px; object-fit:cover; border-radius:var(--bh-radius-md); border:1px solid var(--bh-border)}
.ed-current-photo-label{font-size:.875rem; color:var(--bh-text-muted)}

/* Honeypot — off-screen, niet display:none (sommige bots negeren display:none-check niet
   maar wél de aanwezigheid in de accessibility tree; deze aanpak houdt het veld technisch
   "aanwezig" voor scrapers terwijl een mens het nooit ziet of erop kan focussen). */
.bh-hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; margin:0}

.ed-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px}

/* Grote, duidelijke knoppen (senior-vriendelijk: ruime tap-target, hoge contrast). */
.editor-form .btn,
.ed-item-actions .btn{
  font-size:1.0625rem; padding:17px 30px; min-height:56px;
}

/* ---- Flash-melding (PRG-redirect-status) ---- */
.ed-flash{
  font-family:var(--bh-font); font-size:1.0625rem; font-weight:var(--bh-w-semibold);
  color:var(--bh-heading); background:var(--bh-salie-40); border:1px solid var(--bh-border);
  border-radius:var(--bh-radius-md); padding:16px 20px; margin:22px 0 0;
}
.ed-flash--error{color:var(--bh-inkt); background:var(--bh-terracotta-40)}
.ed-flash--ratelimited{color:var(--bh-inkt); background:var(--bh-oranje-40)}

/* ---- "Berichten van jouw vereniging"-lijst ---- */
.ed-list{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:16px}
.ed-item{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  background:var(--bh-surface); border:1px solid var(--bh-border); border-radius:var(--bh-radius-md);
  padding:20px 24px;
}
.ed-item-type{
  display:inline-block; font-family:var(--bh-font); font-weight:var(--bh-w-bold); font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bh-accent); margin:0 0 6px;
}
.ed-item h3{font-size:1.25rem; margin:0 0 4px; color:var(--bh-text-strong)}
.ed-item-meta{font-size:.9375rem; color:var(--bh-text-muted); margin:0}
.ed-item-actions{display:flex; flex-wrap:wrap; gap:12px}
.ed-delete-form{display:inline-flex; margin:0}
.ed-btn-danger{color:var(--bh-terracotta); border-color:var(--bh-terracotta)}
.ed-btn-danger:hover{background:var(--bh-terracotta); color:var(--bh-on-accent)}

@media (max-width:640px){
  .ed-grid{grid-template-columns:1fr}
  .ed-item{flex-direction:column; align-items:flex-start}
  .ed-item-actions{width:100%}
  .ed-item-actions .btn,
  .ed-delete-form{flex:1 1 auto}
}

@media (prefers-reduced-motion: reduce){
  .editor-form input,
  .editor-form textarea{transition:none}
}

/* ============================================================================
   Login-pagina-skin (wp-login.php) — huisstijl i.p.v. WP-standaardblauw.
   ============================================================================ */
body.login{
  font-family:var(--bh-font);
  background:var(--bh-bg) !important; /* WP-core zet een inline achtergrondkleur op body.login — overschrijven vereist !important hier, geen cascade-alternatief beschikbaar. */
}
body.login #login{width:auto; max-width:380px; padding-top:8vh}
body.login h1 a{
  background-image:url("../img/logo/logo-beeldmerk.svg");
  background-size:64px; height:64px; width:64px; margin:0 auto 24px;
}
body.login #loginform{
  background:var(--bh-surface); border:1px solid var(--bh-border); border-radius:var(--bh-radius-lg);
  box-shadow:var(--bh-shadow-md); padding:32px 28px;
}
body.login label{font-weight:var(--bh-w-bold); color:var(--bh-heading); font-size:1rem}
body.login input[type="text"],
body.login input[type="password"]{
  font-size:1.0625rem; border-radius:var(--bh-radius-md); border:2px solid var(--bh-border); padding:14px 16px; min-height:52px;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus{border-color:var(--bh-focus); box-shadow:0 0 0 4px var(--bh-terracotta-a40)}
body.login .button-primary{
  background:var(--bh-action) !important; border-color:var(--bh-action) !important; box-shadow:none !important;
  text-shadow:none !important; border-radius:var(--bh-radius-md); font-weight:var(--bh-w-bold);
  padding:14px 22px !important; height:auto !important; font-size:1.0625rem !important; min-height:52px;
}
body.login .button-primary:hover{background:var(--bh-action-hover) !important; border-color:var(--bh-action-hover) !important}
body.login #nav a,
body.login #backtoblog a{color:var(--bh-heading); font-size:.9375rem}
body.login #login_error{
  border-left-color:var(--bh-terracotta); background:var(--bh-terracotta-40); color:var(--bh-inkt);
  font-size:1rem; border-radius:var(--bh-radius-sm);
}