/* Light mode (default) */
:root {
  /* Kleuren */
  --vp-bg: #ffffff;
  --vp-surface: #f7f8fa;
  --vp-text: #121417;
  --vp-muted: #6b7280;
  --vp-primary: #2563eb;
  --vp-accent: #22c55e;
  --vp-border: #e5e7eb;
  --vp-badge-bg: #eef2ff;
  --vp-badge-text: #27314a;
  --vp-success: #16a34a;
  --vp-success-bg: #e9f7ee;
  --vp-warning: #d97706;
  --vp-warning-bg: #fff6e6;
  --vp-danger:  #dc2626;
  --vp-danger-bg:#ffeceb;
  --vp-info:    #2563eb;
  --vp-info-bg: #eaf2ff;

  /* Spacing & vorm */
  --vp-gap:    1.25rem;
  --vp-radius: 12px;
  --vp-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* Dark mode */
:root[data-theme="dark"] {
  --vp-bg: #0b0f14;           /* Hele pagina achtergrond */
  --vp-surface: #1a1f27;      /* Contentblokken, kaarten */
  --vp-text: #e5eef7;
  --vp-muted: #f0f2f4;
  --vp-primary: #5ea1ff;
  --vp-accent: #4ade80;
  --vp-border: #2a3442;       /* Randkleur voor blokken */
  --vp-badge-bg: #223047;
  --vp-badge-text: #dbe7ff;
  --vp-success: #34d399;
  --vp-success-bg: #0e1d18;
  --vp-warning: #f59e0b;
  --vp-warning-bg: #1f1a0d;
  --vp-danger:  #f87171;
  --vp-danger-bg:#2a1416;
  --vp-info:    #60a5fa;
  --vp-info-bg: #0e1a2b;
}

/* Globale toepassing */
html, body {
  background: var(--vp-bg);
  color: var(--vp-text);
}

/* Avatar-knop safe reset (schadeloos) */
.vp-user-toggle{border:0;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;}
.vp-user-toggle img{width:32px;height:32px;border-radius:999px;display:block;object-fit:cover;}

.vp-header, .vp-card, .vp-dropdown, .bbp-forums, .bp-wrap {
  background: var(--vp-surface);
  border-color: var(--vp-border);
}

a { color: var(--vp-primary); }

/* User dropdown: altijd leesbare tekst */
.vp-user-menu {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  color: var(--vp-text);
}

.vp-user-menu a,
.vp-user-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--vp-text) !important;  /* override eventuele oude witte kleur */
  cursor: pointer;
  opacity: 1;                         /* voorkom “uitgegrijsd” effect */
}

.vp-user-menu a:hover,
.vp-user-menu button:hover {
  background: var(--vp-bg);
  color: var(--vp-text);
}

/* (optioneel) scheidingslijntje tussen items */
.vp-user-menu a + a,
.vp-user-menu button + a,
.vp-user-menu a + button {
  border-top: 1px solid var(--vp-border);
}


.vp-user-menu button.vp-theme-toggle-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--vp-text);
    cursor: pointer;
}
.vp-user-menu button.vp-theme-toggle-btn:hover {
    background: var(--vp-surface);
}

/* =========== Basis containers / kaarten =========== */
.vp-card,
.bp-wrap,
#buddypress .item-body,
#buddypress .activity,
.bbp-forums,
.bbp-topic-wrapper,
.bbp-replies {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius, 10px);
}

/* Iets subtielere schaduw in dark mode */
:root[data-theme="dark"] .vp-card,
:root[data-theme="dark"] #buddypress .activity,
:root[data-theme="dark"] .bbp-forums {
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* =========== Tekst & meta =========== */
#buddypress,
#buddypress .activity,
#buddypress .item-body,
#buddypress .acomment-content,
#buddypress .activity-meta,
.bbp-forums,
.bbp-replies {
  color: var(--vp-text);
}
#buddypress .activity-meta,
#buddypress .activity-header,
#buddypress .bp-feedback,
#buddypress .subnav,
.bbp-topic-meta,
.bbp-reply-post-date {
  color: var(--vp-muted);
}

/* =========== Lijsten & tabs =========== */
#buddypress .item-list li,
#buddypress .activity-list li {
  border-bottom: 1px solid var(--vp-border);
}
#buddypress .item-list-tabs,
#buddypress .subnav,
#buddypress .dir-navs {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius, 10px);
}

/* =========== Knoppen =========== */
#buddypress .button,
#buddypress a.button,
#buddypress input[type="submit"],
.bbp-submit-wrapper .button,
button.vp-theme-toggle-btn {
  background: var(--vp-primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .55rem .9rem;
}
#buddypress .button:hover,
#buddypress a.button:hover,
#buddypress input[type="submit"]:hover,
.bbp-submit-wrapper .button:hover,
button.vp-theme-toggle-btn:hover {
  filter: brightness(1.05);
}
#buddypress .button.secondary,
#buddypress a.button.outline {
  background: transparent;
  color: var(--vp-primary);
  border-color: var(--vp-primary);
}

/* Focus states (toegankelijkheid) */
#buddypress .button:focus,
#buddypress a.button:focus,
#buddypress input[type="submit"]:focus,
.bbp-submit-wrapper .button:focus,
button.vp-theme-toggle-btn:focus,
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--vp-primary);
  outline-offset: 2px;
}

/* =========== Forms (zoeken, reageren, instellingen) =========== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--vp-bg);
  color: var(--vp-text);
  border: 1px solid var(--vp-border);
  border-radius: 8px;
}
input::placeholder,
textarea::placeholder {
  color: var(--vp-muted);
}

/* =========== Dropdowns / menus =========== */
.vp-user-menu,
#buddypress .action .generic-button .ab-dropdown,
#buddypress .filter select {
  background: var(--vp-surface);
  color: var(--vp-text);
  border: 1px solid var(--vp-border);
  border-radius: 10px;
}

/* =========== Activity stream specifieke tweaks =========== */
#buddypress .activity-list .activity-content {
  background: var(--vp-surface);
  border-top: 1px solid var(--vp-border);
}
#buddypress .acomment-content {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: 8px;
}
#buddypress .activity-meta a {
  color: var(--vp-muted);
}
#buddypress .activity-meta a:hover {
  color: var(--vp-primary);
}

/* =========== BBPress topics/replies =========== */
.bbp-forum-header,
.bbp-topic-header,
.bbp-reply-header {
  background: var(--vp-bg);
  border-bottom: 1px solid var(--vp-border);
}
.bbp-pagination,
.bbp-breadcrumb {
  color: var(--vp-muted);
}

/* =========== Alerts / feedback =========== */
#buddypress .bp-feedback {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-left: 4px solid var(--vp-accent);
  border-radius: 8px;
}

/* =========== Links algemeen =========== */
a { color: var(--vp-primary); }
a:hover { text-decoration: underline; }

/* =========== Nice-to-have =========== */
:root { color-scheme: light dark; }
html, body { background: var(--vp-bg); }

.vp-badge{
  display:inline-block;
  padding:.25rem .5rem;
  font-size:.75rem;
  line-height:1;
  border-radius:999px;
  background:var(--vp-badge-bg);
  color:var(--vp-badge-text);
  border:1px solid var(--vp-border);
}

/* Variaties */
.vp-badge--success{ background:var(--vp-success-bg); color:var(--vp-success); border-color:transparent; }
.vp-badge--warning{ background:var(--vp-warning-bg); color:var(--vp-warning); border-color:transparent; }
.vp-badge--danger{  background:var(--vp-danger-bg);  color:var(--vp-danger);  border-color:transparent; }
.vp-badge--info{    background:var(--vp-info-bg);    color:var(--vp-info);    border-color:transparent; }

/* Kleine status‑puntjes (bijv. online/offline) */
.vp-dot{width:.55rem;height:.55rem;border-radius:999px;display:inline-block;}
.vp-dot--success{ background:var(--vp-success); }
.vp-dot--warning{ background:var(--vp-warning); }
.vp-dot--danger{  background:var(--vp-danger); }
.vp-dot--info{    background:var(--vp-info); }

/* --- BLOG ALIGN FIX (scoped) --- */
.blog .site-main,
.home.blog .site-main,
.single-post .site-main,
.page .site-main {
  text-align: start !important; /* LTR = links, RTL = rechts */
}

.blog .entry-content,
.single-post .entry-content,
.page .entry-content {
  text-align: start !important;
}

/* Zorg dat content-blokken binnen posts niet centreren door generieke regels */
.entry-content > * {
  text-align: start;
}

/* Alleen kaarten centreren als je het expliciet vraagt */
.vp-card { text-align: initial; }
.vp-card--center { text-align: center; }

/* --- AVATAR IN USERMENU --- */
.vp-user-toggle{
  border:0; background:transparent; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; cursor:pointer; vertical-align:middle;
}
.vp-user-toggle img,
img.avatar {
  width:32px; height:32px; border-radius:999px; object-fit:cover; display:block;
}

/* === Blog/post layout reset (alleen voor posts/pages) === */
.blog .site-main,
.home.blog .site-main,
.archive .site-main,
.single-post .site-main,
.page .site-main {
  display: block !important;
  text-align: start !important; /* LTR = links */
}

/* Elk artikel op blog/archief/single mag niet “rechts gaan hangen” */
.blog .site-main > article,
.home.blog .site-main > article,
.archive .site-main > article,
.single-post .site-main > article,
.page .site-main > article {
  margin-inline: 0 !important;   /* geen auto-margins naar rechts */
  float: none !important;
  text-align: start !important;
  width: auto;                    /* geen geforceerde breedte */
}

/* Als posts de class .vp-card hebben: toch gewoon links uitlijnen */
.blog .site-main > article.vp-card,
.home.blog .site-main > article.vp-card,
.archive .site-main > article.vp-card,
.single-post .site-main > article.vp-card {
  text-align: start !important;
}

/* Globale kaart: niet standaard centreren */
.vp-card { text-align: initial; }   /* alleen centreren met .vp-card--center */

/* Veiligheidje voor content in artikelen */
.entry-content > * { text-align: start; }
.entry-content img { max-width: 100%; height: auto; display: block; }

/* === Cap & center: titel, meta, spacer, content === */
:root { --vp-maxw-content: 760px; } /* pas aan naar smaak (680–840px is fijn) */

/* Blogoverzicht, enkel bericht en pagina's */
.blog .site-main > h1,
.blog .site-main > .vp-meta,
.blog .site-main > .vp-spacer,
.blog .site-main > .entry-content,
.single-post .site-main > h1,
.single-post .site-main > .vp-meta,
.single-post .site-main > .vp-spacer,
.single-post .site-main > .entry-content,
.page .site-main > h1,
.page .site-main > .vp-meta,
.page .site-main > .vp-spacer,
.page .site-main > .entry-content {
  max-width: var(--vp-maxw-content);
  margin-inline: auto;      /* horizontaal centreren */
  padding-inline: 16px;     /* ademruimte aan zijkanten */
  width: 100%;
  text-align: start;        /* tekst netjes links (in LTR) */
}

/* Zorg dat deze elementen niet stiekem full-width blijven drukken */
.blog .site-main > .vp-spacer,
.single-post .site-main > .vp-spacer,
.page .site-main > .vp-spacer {
  display: block;
}

/* Veiligheidje: als site-main per ongeluk flex/grid is, gedraag je als normale blok */
.blog .site-main,
.single-post .site-main,
.page .site-main {
  display: block;
}

/* Kaarten centreren alleen als je het expliciet vraagt */
.vp-card { text-align: initial; }
.vp-card--center { text-align: center; }

/* --vp-maxw-content gedefinieerd bovenaan dit bestand */

.vp-content{
  max-width: var(--vp-maxw-content);
  margin-inline: auto;
  padding-inline: 16px;
  text-align: start;
}

/* Activity stream: avatar links + nette layout */
#buddypress .activity-list .activity-item {
  display: grid;
  grid-template-columns: 64px 1fr; /* 64px geeft wat extra lucht */
  gap: 14px;
  align-items: start;
}

/* Zorg dat bekende blokken rechts in de content-kolom vallen */
#buddypress .activity-list .activity-header,
#buddypress .activity-list .activity-inner,
#buddypress .activity-list .activity-meta,
#buddypress .activity-list .activity-comments {
  grid-column: 2;
}

/* Avatar-kolom links */
#buddypress .activity-list .activity-avatar {
  grid-column: 1;
  width: 64px !important;
  min-width: 64px !important;
  display: block !important;
}

.activity-update-form #whats-new-avatar img {
    width: 50px !important;    /* Kleinere vaste maat */
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: inline-block;
    box-shadow: none;
}

#buddypress .activity-list .activity-avatar img {
    width: 64px !important;
    height: 64px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block;
}

/* Soms staat avatar per ongeluk op display:none in thema’s */
#buddypress .activity-list .activity-avatar {
  display: block !important;
}