/* =========================
   TVL Kids – Design tokens
   ========================= */
:root{
  /* Theme tokens voor custom components */
  --tvl-bg: var(--wp--preset--color--bg);
  --tvl-card: var(--wp--preset--color--card);
  --tvl-text: var(--wp--preset--color--text);
  --tvl-muted: var(--wp--preset--color--muted);

  --tvl-primary: var(--wp--preset--color--primary);
  --tvl-secondary: var(--wp--preset--color--secondary);
  --tvl-accent: var(--wp--preset--color--accent);

  --tvl-ok: var(--wp--preset--color--ok);
  --tvl-warn: var(--wp--preset--color--warn);
  --tvl-err: var(--wp--preset--color--err);

  --tvl-radius: 22px;
  --tvl-shadow: 0 14px 40px rgba(20,32,51,.10);

  /* =========================
     COMPAT: plugin tokens (jouw bestaande plugins)
     - Jouw tvl-tafels.css gebruikt: --bg --card --accent --accent-2 etc.
     - Door dit te mappen krijgt de plugin automatisch de theme look.
     ========================= */
  --bg: var(--tvl-bg);
  --card: var(--tvl-card);
  --text: var(--tvl-text);
  --muted: var(--tvl-muted);
  --accent: var(--tvl-primary);
  --accent-2: var(--tvl-secondary);
  --ok: var(--tvl-ok);
  --err: var(--tvl-err);
  --shadow: var(--tvl-shadow);
  --radius: var(--tvl-radius);
}

body{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(255,79,163,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(45,212,255,.22), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(124,58,237,.12), transparent 55%),
    var(--tvl-bg);
  color: var(--tvl-text);
}

/* Header bar */
.tvl-topbar{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,32,51,.10);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(20,32,51,.10);
  padding: 10px 16px;
}

/* Buttons (WordPress) */
.wp-block-button__link{
  background: linear-gradient(90deg, var(--tvl-primary), var(--tvl-secondary));
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(255,79,163,.18);
  border: 0;
}
.wp-block-button__link:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* Cards via Group block met class .tvl-card */
.tvl-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,32,51,.10);
  border-radius: var(--tvl-radius);
  box-shadow: var(--tvl-shadow);
  padding: 18px;
}

/* Rechter “losse” sidebar (optioneel) */
.tvl-sidebar{
  position: fixed;
  right: 18px;
  top: 92px;
  width: 290px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,32,51,.10);
  border-radius: var(--tvl-radius);
  box-shadow: var(--tvl-shadow);
  padding: 16px;
  z-index: 9999;
}

/* Content ruimte vrijhouden voor sidebar op desktop */
@media (min-width: 981px){
  main.wp-block-group{
    padding-right: 330px;
  }
}

/* Op small screens: sidebar onderaan */
@media (max-width: 980px){
  .tvl-sidebar{
    position: static;
    width: auto;
    max-height: none;
    margin-top: 18px;
  }
  main.wp-block-group{
    padding-right: 18px;
  }
}

/* Navigation links als “vriendelijke buttons” */
.tvl-sidebar .wp-block-navigation-item__content{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(20,32,51,.10);
  background: rgba(255,255,255,.62);
  margin-bottom: 10px;
}
.tvl-sidebar .wp-block-navigation-item__content:hover{
  border-color: rgba(255,79,163,.35);
  box-shadow: 0 10px 22px rgba(255,79,163,.12);
}

/* =========================================================
   TVL Tafels plugin (tvl-tafels): mobile layout fix
   - plugin gebruikt: .tvlt-grid { grid-template-columns: repeat(12, ...) }
   - op mobiel willen we 2 rijen van 6
   ========================================================= */
@media (max-width: 782px){
  #tvlt-wrapper .tvlt-grid{
    grid-template-columns: repeat(6, minmax(36px, 1fr)) !important;
    gap: 10px !important;
  }

  /* optioneel: knoppen iets strakker */
  #tvlt-wrapper .tvlt-table-btn{
    padding: 10px 0 !important;
  }
}
/* =========================
   TVL Sidebar ("Oefenen") – kleur & knoppen in TVL-stijl
   ========================= */

/* Sidebar kaart iets meer "glow" */
.tvl-sidebar{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,32,51,.10);
  box-shadow: 0 14px 40px rgba(20,32,51,.10);
}

/* Titel "Oefenen" iets meer in TVL-look */
.tvl-sidebar .wp-block-heading,
.tvl-sidebar h2{
  margin-top: 0;
  background: linear-gradient(90deg, var(--tvl-primary), var(--tvl-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Navigatie-items als echte TVL-buttons */
.tvl-sidebar .wp-block-navigation-item__content{
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  padding: 12px 16px !important;
  border-radius: 16px !important;

  border: 0 !important;
  background: linear-gradient(90deg, var(--tvl-primary), var(--tvl-secondary)) !important;
  color: #fff !important;

  font-weight: 800 !important;
  letter-spacing: .2px;

  box-shadow: 0 12px 26px rgba(255,79,163,.18) !important;
  text-decoration: none !important;

  margin-bottom: 12px !important;
}

/* Hover effect zoals je knoppen */
.tvl-sidebar .wp-block-navigation-item__content:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Actieve pagina (iets "ingedrukt") */
.tvl-sidebar .current-menu-item > .wp-block-navigation-item__content,
.tvl-sidebar .current_page_item > .wp-block-navigation-item__content{
  filter: brightness(.95);
  box-shadow: 0 10px 20px rgba(124,58,237,.18) !important;
}
/* Topbar logo/banner */
.tvl-topbar .tvl-topbar-logo img{
  height: 44px;
  width: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 999px;
  display:block;
}

/* Titel wat kleiner naast het logo */
.tvl-topbar .tvl-topbar-title{
  margin-left: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--tvl-text);
}

/* Mobiel iets kleiner */
@media (max-width: 782px){
  .tvl-topbar .tvl-topbar-logo img{
    height: 38px;
    width: 180px;
  }
  .tvl-topbar .tvl-topbar-title{
    font-size: 16px;
  }
}