/*
 Theme Name: Vriendenplek (BuddyX Child)
 Theme URI: https://prwebservices.nl/
 Description: BuddyX child theme voor Vriendenplek. Houd aanpassingen hier zodat BuddyX veilig te updaten blijft.
 Author: Rudy / P.R. Webservices
 Author URI: https://prwebservices.nl/
 Template: buddyx
 Version: 0.1.2
 Text Domain: vriendenplek
*/

/* =====================
   Vriendenplek · Basis
   ===================== */

/* Houd pagina strak aan de bovenkant */
html, body { margin: 0 !important; padding: 0 !important; }

/* Globale variabelen (aanvullend op vp-style.php variabelen) */
:root{
  /* Oppervlak & randen */
  --vp-surface: #ffffff;
  --vp-surface-2: #f8fafc;
  --vp-border: rgba(0,0,0,.12);
  --vp-muted: #6b7280;

  /* Feedback */
  --vp-success: #16a34a;
  --vp-warning: #d97706;
  --vp-danger:  #dc2626;

  /* Buttons */
  --vp-btn-radius: 10px;
  --vp-btn-padding: .6rem 1rem;

  /* Layout helpers */
  --vp-maxw: 1200px;
  --vp-radius: 12px;
  --vp-primary: var(--vp-brand); /* alias voor oudere blokken die --vp-primary gebruikten */
}

/* Donkere modus varianten */
[data-theme="dark"], body.vp-dark{
  --vp-surface: #101318;
  --vp-surface-2: #0b0f14;
  --vp-border: rgba(255,255,255,.12);
  --vp-muted: #9ca3af;

  --vp-success: #22c55e;
  --vp-warning: #f59e0b;
  --vp-danger:  #f87171;
}

/* Houd theme-achtergrond consistent met vp-style.php */
html, body { background: var(--vp-bg); color: var(--vp-text); }


/* =========================================
   Header & Navigatie (licht + donker)
   ========================================= */

/* Kleuren voor header/nav */
:root{
  --vp-nav-bg: var(--vp-brand);
  --vp-nav-fg: #ffffff;
  --vp-nav-fg-hover: rgba(255,255,255,.9);
  --vp-nav-border: rgba(255,255,255,.25);

  --vp-dd-bg: rgba(0,0,0,.9);
  --vp-dd-fg: #fff;
  --vp-dd-hover: rgba(255,255,255,.08);
}
[data-theme="dark"]{
  --vp-nav-bg: #0f172a;
  --vp-nav-fg: #e5e7eb;
  --vp-nav-fg-hover: #ffffff;
  --vp-nav-border: rgba(255,255,255,.25);

  --vp-dd-bg: rgba(15,23,42,.98);
  --vp-dd-fg: #e5e7eb;
  --vp-dd-hover: rgba(255,255,255,.06);
}

/* Header containers (dekt BuddyX varianten) */
.site-header,
#masthead,
.site-header .header-main,
.site-header .navbar,
.main-header,
.header-wrap{
  background: var(--vp-nav-bg) !important;
  border-bottom: 1px solid var(--vp-nav-border);
}

/* Sticky + adminbar offset (ingelogd) */
.site-header{ position: sticky; top: 0; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar .site-header{ top: 46px; } }

/* Zorg dat header-inhoud volledig zichtbaar blijft */
.site-header .header-main{ min-height: 64px; display:flex; align-items:center; }

/* Transparante header forceren naar vaste kleur */
.has-transparent-header .site-header,
.header-transparent .site-header{ background: var(--vp-nav-bg) !important; }

/* Top-level menulinks */
.main-navigation a,
.primary-menu > li > a,
.navbar .menu > li > a{ color: var(--vp-nav-fg) !important; }
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a,
.navbar .menu > li:hover > a,
.navbar .menu > li.current-menu-item > a{
  color: var(--vp-nav-fg-hover) !important; text-decoration: none;
}

/* Focus zichtbaar (toetsenbord) */
.primary-menu > li > a:focus,
.navbar .menu > li > a:focus{
  outline: 2px solid var(--vp-nav-fg);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dropdowns */
.primary-menu .sub-menu,
.navbar .sub-menu{
  background: var(--vp-dd-bg) !important;
  border: 1px solid var(--vp-nav-border);
  border-radius: 10px; padding:.4rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.primary-menu .sub-menu a,
.navbar .sub-menu a{ color: var(--vp-dd-fg) !important; padding:.55rem .85rem; border-radius:8px; }
.primary-menu .sub-menu a:hover,
.navbar .sub-menu a:hover{ background: var(--vp-dd-hover) !important; }

/* Iconen / hamburger / header-acties */
.header-actions a,
.header-actions button,
.menu-toggle,
.navbar-toggle,
.offcanvas-toggle{
  color: var(--vp-nav-fg) !important;
  border-color: var(--vp-nav-border) !important;
}

/* Offcanvas / mobiel menu */
.offcanvas{ background: var(--vp-nav-bg); color: var(--vp-nav-fg); }
.offcanvas .menu a{ color: var(--vp-nav-fg); }
.offcanvas .menu a:hover{ color: var(--vp-nav-fg-hover); }

/* Zoekveld in header */
.site-header input[type="search"]{
  background: rgba(255,255,255,.14);
  color: var(--vp-nav-fg);
  border: 1px solid var(--vp-nav-border);
}
[data-theme="dark"] .site-header input[type="search"]{ background: rgba(255,255,255,.08); }

/* Branding links */
.site-branding a, .site-title a{ color: var(--vp-nav-fg) !important; }
.site-branding a:hover{ color: var(--vp-nav-fg-hover) !important; }


/* ===============================
   Globale UI (knoppen, formulieren,
   kaarten, alerts, paginatie, etc.)
   =============================== */

/* Links */
a { color: var(--vp-link); text-decoration: none; }
a:hover { opacity:.9; text-decoration: none; }
a:focus { outline: 2px solid color-mix(in srgb, var(--vp-link) 50%, transparent); outline-offset: 2px; }

/* Buttons primair */
.button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"],
.bp-primary-action,
.btn,
.button.is-primary {
  background: var(--vp-brand) !important;
  border: 1px solid var(--vp-brand) !important;
  color: #fff !important;
  border-radius: var(--vp-btn-radius) !important;
  padding: var(--vp-btn-padding) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: filter .15s ease, transform .02s ease;
}
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.bp-primary-action:hover { filter: brightness(.92); }
.button:active,
.wp-block-button__link:active,
input[type="submit"]:active { transform: translateY(1px); }
.button:focus,
.wp-block-button__link:focus,
input[type="submit"]:focus {
  outline: 2px solid color-mix(in srgb, var(--vp-brand) 45%, transparent);
  outline-offset: 2px;
}

/* Secundair / outline */
.button.secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.bp-secondary-action,
.btn-outline {
  background: transparent !important;
  color: var(--vp-brand) !important;
  border: 1px solid var(--vp-brand) !important;
}
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .bp-secondary-action,
[data-theme="dark"] .btn-outline {
  color: #e5e7eb !important;
  border-color: color-mix(in srgb, var(--vp-brand) 70%, #fff 10%);
}

/* Gevaar/waarschuwing/succes (optioneel) */
.button.danger, .btn-danger, .bp-danger { background: var(--vp-danger) !important; border-color: var(--vp-danger) !important; }
.button.warning, .btn-warning { background: var(--vp-warning) !important; border-color: var(--vp-warning) !important; }
.button.success, .btn-success { background: var(--vp-success) !important; border-color: var(--vp-success) !important; }

/* Disabled */
button[disabled], .button[disabled], .is-disabled,
input[disabled][type="submit"] { opacity:.6; cursor:not-allowed; filter: grayscale(.1); }

/* Formulieren */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="search"],
select, textarea {
  background: var(--vp-surface);
  color: var(--vp-text);
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  padding: .6rem .75rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--vp-brand) 70%, var(--vp-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-brand) 25%, transparent);
  outline: none;
}
::placeholder { color: color-mix(in srgb, var(--vp-text) 55%, transparent); }

/* Cards / containers */
.card, .bp-card, .widget, .bb-card, .entry-content .wp-block-group,
.activity-item, .bp-wrap, .bp-card-wrap {
  background: var(--vp-surface);
  color: var(--vp-text);
  border: 1px solid var(--vp-border);
  border-radius: 12px;
}
.card, .bp-card, .bb-card, .entry-content .wp-block-group { padding: 1rem; }

/* Activity inhoudsvlakken */
.activity-content, .activity-inner, .item-body, .bp-activity-content {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: 12px;
  padding: 1rem;
}

/* Badges / tags */
.badge, .tag, .tag-cloud-link, .bb-badge {
  display:inline-block;
  border:1px solid var(--vp-border);
  background: var(--vp-surface-2);
  color: var(--vp-text);
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.85rem;
}

/* Alerts / feedback */
.notice, .bb-notice, .bp-feedback, .message {
  border-radius:12px; padding: .9rem 1rem; border:1px solid var(--vp-border);
  background: var(--vp-surface-2); color: var(--vp-text);
}
.notice-success, .bp-feedback.success, .message.success {
  border-color: color-mix(in srgb, var(--vp-success) 45%, var(--vp-border));
  background: color-mix(in srgb, var(--vp-success) 10%, var(--vp-surface-2));
}
.notice-warning, .bp-feedback.warning, .message.warning {
  border-color: color-mix(in srgb, var(--vp-warning) 45%, var(--vp-border));
  background: color-mix(in srgb, var(--vp-warning) 12%, var(--vp-surface-2));
}
.notice-error, .bp-feedback.error, .message.error {
  border-color: color-mix(in srgb, var(--vp-danger) 45%, var(--vp-border));
  background: color-mix(in srgb, var(--vp-danger) 10%, var(--vp-surface-2));
}

/* Paginatie */
.pagination .page-numbers,
.page-links .post-page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 2.25rem; height:2.25rem;
  padding: 0 .5rem;
  border:1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--vp-surface);
  color: var(--vp-text);
  margin:.15rem;
}
.pagination .page-numbers:hover,
.page-links .post-page-numbers:hover { background: var(--vp-surface-2); }
.pagination .page-numbers.current,
.page-links .post-page-numbers.current {
  background: var(--vp-brand); color:#fff; border-color: var(--vp-brand);
}

/* Responsieve embeds (video/iframes) */
.wp-block-embed, .wp-block-embed__wrapper { max-width: 100% !important; }
#buddypress .activity-content iframe,
#buddypress .activity-inner iframe,
.entry-content iframe{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}
@supports (aspect-ratio: 16 / 9){
  #buddypress .activity-content iframe,
  #buddypress .activity-inner iframe,
  .entry-content iframe{ aspect-ratio: 16 / 9; }
}

/* Live preview van linkkaarten alleen tonen bij content */
#vpe-live-preview:empty { display:none; }

/* Layout helpers */
.vp-bar, .site-container, .container { max-width: var(--vp-maxw); margin-inline:auto; }

/* Toggle-knopje (optioneel, voor [vp_theme_toggle]) */
#vp-theme-toggle { transition: background .2s, border-color .2s }
[data-theme="dark"] #vp-theme-toggle { border-color: rgba(255,255,255,.2); color:#e5e7eb }

/* === NAV: definitief zonder sticky (stabiel, geen afkappen) ============== */

/* Header zichtbaar houden + geen cropping van dropdowns */
.site-header,
#masthead { overflow: visible !important; }

.site-header .header-main,
.site-header .navbar {
  height: auto !important;
  min-height: 72px;                /* zet op 80–88px als je meer verticale ruimte wilt */
  display: flex;
  align-items: center;
}

/* Sticky UIT (klassieke flow) */
.site-header {
  position: static !important;
  top: auto !important;
  z-index: 10;
  box-shadow: none !important;
}

/* Adminbar-offset via body padding (alleen ingelogd) */
@media (min-width: 783px){ body.admin-bar { padding-top: 32px !important; } }
@media (max-width: 782px){ body.admin-bar { padding-top: 46px !important; } }

/* Zorg voor royale klikzone en geen “halve” tekst */
.primary-menu > li > a,
.navbar .menu > li > a {
  line-height: 1.2 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Dropdowns altijd boven content tonen en niet afkappen */
.primary-menu .sub-menu,
.navbar .sub-menu {
  position: absolute;    /* BuddyX heeft dit meestal al; dit verzekert 't */
  z-index: 9999;
}

/* === Fix: BuddyX mobiel menu clipping / z-index / hoogte ================= */

/* 1) Als het mobiele menu open is: .site mag NIET clippen */
.mobile-menu-opened .site { overflow: visible !important; }

/* 2) Offcanvas-paneel altijd bovenaan en volledig zichtbaar */
.mobile-menu-opened .offcanvas,
.mobile-menu-opened .mobile-menu,
.mobile-menu-opened .offcanvas-menu,
.mobile-menu-opened .bb-mobile-menu {
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  z-index: 100000;           /* boven header en content */
  width: min(85vw, 360px);   /* typische slide-in breedte */
  max-width: 100%;
  background: var(--vp-nav-bg);
  color: var(--vp-nav-fg);
  overflow-y: auto;          /* lijst moet kunnen scrollen */
  -webkit-overflow-scrolling: touch;
}

/* 3) Donkere achtergrond achter het menu (overlay) */
.mobile-menu-opened .offcanvas-backdrop,
.mobile-menu-opened .menu-overlay,
.mobile-menu-opened .dark-mark,
.mobile-menu-opened .mobile-menu-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,.6);
}

/* 4) Adminbar-offset wanneer ingelogd (anders schuurt het bovenaan) */
.admin-bar.mobile-menu-opened .offcanvas,
.admin-bar.mobile-menu-opened .mobile-menu,
.admin-bar.mobile-menu-opened .offcanvas-menu,
.admin-bar.mobile-menu-opened .bb-mobile-menu { top: 32px; }
@media (max-width: 782px){
  .admin-bar.mobile-menu-opened .offcanvas,
  .admin-bar.mobile-menu-opened .mobile-menu,
  .admin-bar.mobile-menu-opened .offcanvas-menu,
  .admin-bar.mobile-menu-opened .bb-mobile-menu { top: 46px; }
}

/* 5) Zorg dat de hamburger/close zichtbaar blijft op de overlay */
.mobile-menu-opened .menu-toggle,
.mobile-menu-opened .mobile-menu-close,
.mobile-menu-opened .offcanvas-toggle {
  position: relative; z-index: 100010;
}

/* 6) Kleine UX: tikken buiten het paneel moet kunnen (overlay ligt er echt boven) */
.mobile-menu-opened body { overflow: hidden; } /* achtergrond niet scrollen */

/* === MOBIEL MENU — items zichtbaar maken =============================== */

/* 1) Zorg dat het paneel zelf en de tekstkleur goed staan */
.mobile-menu-opened .offcanvas,
.mobile-menu-opened .bb-mobile-menu,
.mobile-menu-opened .mobile-menu {
  color: var(--vp-nav-fg) !important;      /* basis-tekstkleur */
}

/* 2) Haal verstop-animaties/opacity weg op de lijst */
.mobile-menu-opened .offcanvas .menu,
.mobile-menu-opened .bb-mobile-menu .menu,
.mobile-menu-opened .mobile-menu .menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 3) Items en links: tonen en goed contrasteren */
.mobile-menu-opened .offcanvas .menu li,
.mobile-menu-opened .bb-mobile-menu .menu li,
.mobile-menu-opened .mobile-menu .menu li {
  display: block !important;
}

.mobile-menu-opened .offcanvas .menu a,
.mobile-menu-opened .bb-mobile-menu .menu a,
.mobile-menu-opened .mobile-menu .menu a {
  color: var(--vp-nav-fg) !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  filter: none !important;
  padding: 12px 16px !important;
}

.mobile-menu-opened .offcanvas .menu a:hover,
.mobile-menu-opened .bb-mobile-menu .menu a:hover,
.mobile-menu-opened .mobile-menu .menu a:hover {
  color: var(--vp-nav-fg-hover) !important;
  background: rgba(255,255,255,.06);
}

/* 4) Iconen mee laten kleuren met de tekst */
.mobile-menu-opened .offcanvas .menu i,
.mobile-menu-opened .offcanvas .menu svg,
.mobile-menu-opened .bb-mobile-menu .menu i,
.mobile-menu-opened .bb-mobile-menu .menu svg,
.mobile-menu-opened .mobile-menu .menu i,
.mobile-menu-opened .mobile-menu .menu svg {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* === MOBIEL MENU · zichtbare links voor .main-navigation a ============== */

/* Paneel zelf in je nav-kleuren houden */
.mobile-menu-opened .main-navigation,
.mobile-menu-opened .main-navigation .menu,
.mobile-menu-opened .main-navigation .sub-menu{
  background: #1A6482;
}

/* Links in het mobiele menu duidelijk zichtbaar */
.mobile-menu-opened .main-navigation a,
.mobile-menu-opened .main-navigation .menu a,
.mobile-menu-opened .main-navigation .sub-menu a{
  color: var(--vp-nav-fg) !important;          /* licht op donker */
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  filter: none !important;
  padding: 12px 16px !important;
  display: block !important;
}

/* Hover/active states */
.mobile-menu-opened .main-navigation a:hover,
.mobile-menu-opened .main-navigation .menu a:hover,
.mobile-menu-opened .main-navigation .sub-menu a:hover{
  color: var(--vp-nav-fg-hover) !important;
  background: rgba(255,255,255,.08);
}

/* Iconen gelijk met de tekst mee laten kleuren */
.mobile-menu-opened .main-navigation a i,
.mobile-menu-opened .main-navigation a svg{
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Zorg dat niets wordt “geknipt” in mobiele toestand */
.mobile-menu-opened .site{ overflow: visible !important; }