/* Gebruikerspagina (/user/ID): compacte profielband met bedrijfskaart.
   Handgeschreven, geen SCSS-build. Secties dragen de classes vk-user-*. */

.vk-user-hero { --vk-green: #244d4e; }
.vk-user-hero .layout__sidebar__row > .block { margin: 0; }

/* Rolchips */
.vk-user-hero .field--name-roles { margin: 0 0 8px; }
.vk-user-hero .field--name-roles .field__items { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-user-hero .field--name-roles .field__item {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--vk-green);
  background: var(--vk-green);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Naam */
.vk-user-hero .block:has(.field-firstname),
.vk-user-hero .block:has(.field-lastname) { display: inline-block; margin: 0 .25em 0 0; vertical-align: baseline; }
.vk-user-hero .field-firstname,
.vk-user-hero .field-lastname { margin: 0; font-family: "PT Serif", serif; font-size: 32px; line-height: 1.2; color: #000; }

/* Contactgegevens */
.vk-user-hero .block:has(.mail),
.vk-user-hero .block:has(.field-phone) { margin: 8px 0 0; font-size: 15px; }
.vk-user-hero .block:has(.mail) { margin-top: 12px; }
.vk-user-hero .mail a,
.vk-user-hero .field-phone a { font-weight: 400; overflow-wrap: anywhere; }
.vk-user-hero .mail::before,
.vk-user-hero .field-phone::before { display: inline-block; min-width: 84px; margin-right: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vk-green); }
.vk-user-hero .mail::before { content: "E-mail"; }
.vk-user-hero .field-phone::before { content: "Telefoon"; }

/* Beschikbare dagen (chips komen uit het thema, zie ook bedrijfspagina) */
.vk-user-hero .block:has(.field-weekday-availability) { margin-top: 20px; }
.vk-user-hero .field-weekday-availability > h3.h { margin: 0 0 8px; font-size: 13px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vk-green); }
.vk-user-hero .vk-day { width: 40px; height: 32px; font-size: 13px; }

/* Bedrijfskaart rechts */
.vk-user-hero .block:has(.field-ref-company) {
  padding: 16px 20px;
  background: #fff;
  border-left: 4px solid var(--vk-green);
  box-shadow: 0 2px 10px 3px rgba(0, 0, 0, .05);
  font-size: 15px;
  line-height: 1.5;
}
.vk-user-hero .field-ref-company h3.h,
.vk-user-hero .field-ref-company .field > h3.h { margin: 0 0 4px; font-size: 13px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vk-green); }
.vk-user-hero .field-ref-company .field { margin: 0 0 8px; }
.vk-user-hero .field-ref-company .address { margin: 0; }
.vk-user-hero .field-ref-company fieldset { margin: 8px 0 0; padding: 0; border: 0; }

.vk-user-extra { font-size: 14px; }

@media (min-width: 768px) {
  .vk-user-hero .layout__cols { flex-wrap: nowrap; align-items: flex-start; }
  .vk-user-hero .layout__sidebar { flex: 2 1 0; width: auto; min-width: 0; }
  .vk-user-hero .layout__content { flex: 1 1 0; width: auto; min-width: 0; }
}
@media (max-width: 767px) {
  .vk-user-hero .field-firstname,
  .vk-user-hero .field-lastname { font-size: 26px; }
  .vk-user-hero .block:has(.field-ref-company) { margin-top: 20px; }
}

/* Bewerkformulier /user/ID/edit: ruimte onder de knop "Opslaan" */
form.user-form .form-actions,
form.user-form #edit-actions { margin-bottom: 64px; }

/* "Handel als deze persoon" (masquerade): knop met ruimte errond */
a.vgk-masquerade,
.vgk-masquerade {
  display: inline-block;
  margin: 1.5rem 0;
}
.vk-user-hero a.vgk-masquerade { margin-top: 1rem; margin-bottom: 1.5rem; }

/* Particuliere klant: "Mijn account verwijderen" onderaan de persoonspagina */
.vgk-delete-account {
  margin: 3rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}
.vgk-delete-account .button { margin: 0; }