/* Design tokens moved to tokens.css; this file uses CSS variables only */

/* ===== Slide/Fade animatie voor volledige categorie weergave ===== */
@keyframes fullcatEnter {
  0% { opacity:0; transform:translateX(32px); }
  60% { opacity:1; }
  100% { opacity:1; transform:translateX(0); }
}
/* In: iets langere duur voor rustiger binnenkomst */
.fullcat-animate { animation: fullcatEnter var(--fullcat-enter-duration) cubic-bezier(.25,.8,.35,1); }
/* Uit: tegengestelde richting + korter maar nog steeds smooth */
@keyframes fullcatExit {
  0% { opacity:1; transform:translateX(0); }
  40% { opacity:1; }
  100% { opacity:0; transform:translateX(32px); }
}
.fullcat-exit { animation: fullcatExit var(--fullcat-exit-duration) cubic-bezier(.55,.15,.4,.95) forwards; }
@media (prefers-reduced-motion: reduce) {
  .fullcat-animate, .fullcat-exit { animation: none; }
}
/* ===== Alles Tonen (volledige categorie) weergave ===== */
.fullcat-backbar {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 8px 6px;
  position:sticky; position:-webkit-sticky;
  top:0;
  background:#fff;
  z-index:60;
  /* Promote to its own layer to avoid repaint jank during scroll */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}
.fullcat-backbtn {
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 6px 4px 6px 2px;
  width: auto;
  height: auto;
  border-radius: 6px;
  font-size: 0; /* verwijder eventuele inline-gap; icoon bepaalt grootte */
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.fullcat-backbtn:hover, .fullcat-backbtn:focus-visible { background: var(--nav-mobile-active-bg); outline: none; }
.fullcat-backbtn:active { transform: translateY(1px); }
.fullcat-backbtn__icon { display:block; width:24px; height:24px; }
.fullcat-backbtn__icon path { stroke: currentColor; }
.fullcat-title {
  margin:0;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--color-text);
}
.fullcat-grid {
  --fullcat-min: 150px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap:14px 14px; 
  padding:14px 8px 40px 8px;
 }
.fullcat-grid .oefening-kaart {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  margin: 0 auto; 
  box-shadow: 0 2px 12px rgba(75,189,255,0.10); 
}
/* Zorg dat de flip panel padding hetzelfde blijft als origineel */
.fullcat-grid .kaart-flip-front,
.fullcat-grid .kaart-flip-back { padding: var(--card-pad); }
@media (max-width:700px){
  .fullcat-grid { 
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap:10px 10px; 
    padding:10px 6px 60px 6px; 
  }
  .fullcat-title { font-size:1.15rem; }
  .fullcat-backbtn { padding:6px 2px 6px 0; }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  /* iOS werkt vloeiender als de root scroller is */
  overflow-y: visible;
}
body {
  height: 100%;
  margin: 0;
  /* Paginaniveau scroll zodat de scrollbar rechts staat */
  overflow-y: auto;
  overflow-x: hidden;
  /* Laat verticale pan altijd doorgaan (Safari iOS) */
  touch-action: pan-y;
}

.main-container {
  display: flex;
  flex-direction: row;
  width: 100%; /* geen 100vw i.v.m. body padding-left (sidebar) */
  min-height: 100vh;
  background: transparent; /*#ffffff; /* neutrale paginabackground i.p.v. debugkleur */
  box-sizing: border-box;
  overflow: visible; /* laat body scrollen */
}

/* Navigation column is handled in startpagina-nav.css; keep only main content */

.main-content-fixed {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 100vh;
  /* Geen eigen verticale scroll; de body scrollt */
  overflow-y: visible;
  overflow-x: hidden;
  background: transparent; /* was rood (debug) */
  padding: 0;
  padding-bottom: 15px; /* extra witruimte onderaan op desktop */
  margin: 0;
  position: relative;
  box-sizing: border-box;
  touch-action: pan-y;
}

/* Centrerende binnencontainer: desktop smalle kolom, mobiel volle breedte */
.content-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px; 
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
/* voorkom dubbele ruimte: eerste kind krijgt geen extra top-margin */
.content-container > *:first-child { margin-top: 0 !important; }
@media (min-width: 1440px) {
  .content-container { max-width: 1280px; }
}
@media (max-width: 700px) {
  .content-container {
    max-width: none; /* volle breedte */
    padding-left: 10px;
    padding-right: 10px;
      padding-top: 8px; 
  }
}


.hero-banner {
  /* zijmarges weg; centrering via .content-container */
  margin: 0 0 0px 0; /* top-ruimte komt nu van .content-container */
  border-radius: 18px;
  overflow: hidden;
  /*background: #fff;*/
  box-sizing: border-box;
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Verwijder extra padding rechts op tabContent binnen de container */
.content-container #tabContent { padding-right: 0 !important; }

/* Animations and full category view */
@keyframes fullcatEnter { 0% { opacity:0; transform:translateX(32px); } 60% { opacity:1; } 100% { opacity:1; transform:translateX(0); } }
.fullcat-animate { animation: fullcatEnter var(--fullcat-enter-duration) cubic-bezier(.25,.8,.35,1); }
@keyframes fullcatExit { 0% { opacity:1; transform:translateX(0); } 40% { opacity:1; } 100% { opacity:0; transform:translateX(32px); } }
.fullcat-exit { animation: fullcatExit var(--fullcat-exit-duration) cubic-bezier(.55,.15,.4,.95) forwards; }
@media (prefers-reduced-motion: reduce) { .fullcat-animate, .fullcat-exit { animation: none; } }

.fullcat-backbar { display:flex; align-items:center; gap:12px; padding:12px 14px 8px 6px; position:sticky; position:-webkit-sticky; top:0; background:#fff; z-index:60; }
.fullcat-backbtn { background: transparent; color: var(--color-primary); border: none; padding: 6px 4px 6px 2px; width: auto; height: auto; border-radius: 6px; font-size: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.fullcat-backbtn:hover, .fullcat-backbtn:focus-visible { background: var(--nav-mobile-active-bg); outline: none; }
.fullcat-backbtn:active { transform: translateY(1px); }
.fullcat-backbtn__icon { display:block; width:24px; height:24px; }
.fullcat-backbtn__icon path { stroke: currentColor; }
.fullcat-title { margin:0; font-size:1.35rem; font-weight:700; letter-spacing:.02em; color:var(--color-text); }

.fullcat-grid { --fullcat-min: 150px; display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap:14px 14px; padding:14px 8px 40px 8px; }
.fullcat-grid .oefening-kaart { flex: 0 0 var(--card-w); width: var(--card-w); height: var(--card-h); margin: 0 auto; box-shadow: 0 2px 12px rgba(75,189,255,0.10); }
.fullcat-grid .kaart-flip-front, .fullcat-grid .kaart-flip-back { padding: var(--card-pad); }
@media (max-width:700px){ .fullcat-grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap:10px 10px; padding:10px 6px 60px 6px; } .fullcat-title { font-size:1.15rem; } .fullcat-backbtn { padding:6px 2px 6px 0; } }

/* Tabs/blocks */
.tab-content { background: #fff; }
.tab-block, .tab-block--green, .tab-block--bgimg { height: 240px; min-height: 240px; max-height: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; box-shadow: 0 4px 24px rgba(75,189,255,0.10); margin-bottom: 18px; position: relative; }
.tab-block--green { background: #00C300; }
.tab-block--bgimg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.tab-block__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; margin-left: 48px; z-index: 1; }
.tab-block__title { font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: 0.03em; margin-bottom: 8px; text-align: left; }
.tab-block__subtitle { font-size: 1.1rem; color: #eaffea; margin-bottom: 12px; text-align: left; }
.tab-block__icon { position: absolute; right: 0; bottom: 0; width: 180px; height: 180px; overflow: hidden; border-bottom-right-radius: 10px; }
.tab-block__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

#tabContent { padding-right: 16px; }

/* Cards list */


@media (max-width:700px){
  .hero-banner {
    margin: 10px 0 12px 0;
    border-radius: 16px;
    padding: 1px;
  }
  /* Hero 2x groter op mobiel */
  /* Toon volledige afbeelding binnen het bestaande blok */
  .hero-banner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
  }
}

.oefeningen-kaarten { display: flex; gap: 5px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; position: relative; isolation: isolate; touch-action: pan-x pan-y; }
.oefeningen-kaarten { contain: paint; overscroll-behavior-x: contain; }
.oefeningen-kaarten::-webkit-scrollbar { display: none; }
.oefening-kaart { border-radius: 16px; flex: 0 0 220px; width: 220px; height: var(--card-h); perspective: 800px; margin: 0 18px 0 0; box-shadow: 0 2px 12px rgba(75,189,255,0.10); border: none; outline: none; background: transparent; position: relative; cursor: pointer; padding: 0; transition: none; overflow: visible; }
.kaart-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(.4,2,.3,1); transform-style: preserve-3d; }
.oefening-kaart:hover .kaart-flip-inner { transform: rotateY(180deg); }
.kaart-flip-front, .kaart-flip-back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 18px; backface-visibility: hidden; }
.kaart-flip-front { z-index: 2; background-color: inherit; }
.kaart-flip-back { background: inherit; z-index: 3; transform: rotateY(180deg); box-shadow: 0 2px 12px rgba(75,189,255,0.10); }
.kaart-flip-front--0, .kaart-flip-back--0, .kaart-title--0, .kaart-desc--0 { background-color: var(--color-card-0); color: var(--color-card-dark); }
.kaart-flip-front--1, .kaart-flip-back--1, .kaart-title--1, .kaart-desc--1 { background-color: var(--color-card-1); color: var(--color-card-dark); }
.kaart-flip-front--2, .kaart-flip-back--2, .kaart-title--2, .kaart-desc--2 { background-color: var(--color-card-2); color: #fff; }
.kaart-flip-front--3, .kaart-flip-back--3, .kaart-title--3, .kaart-desc--3 { background-color: var(--color-card-3); color: var(--color-card-dark); }
.kaart-title { font-size: var(--card-title-size); font-weight: 700; display: block; margin-bottom: 6px; }
.kaart-desc { display: block; font-size: var(--card-desc-size); font-weight: 400; margin-bottom: 2px; }
.kaart-desc--back { text-align: left; }

.action-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.play-btn, .fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); border: none; box-shadow: 0 2px 8px rgba(75,189,255,0.12); cursor: pointer; text-decoration: none; transition: background 0.2s; }
.play-btn__circle { fill: #fff; }
.play-btn__poly { fill: var(--color-primary); }
.play-btn:hover { background: var(--color-primary-dark); }
.fav-btn__star { stroke: #fff; stroke-width: 2; fill: none; transition: fill 0.2s;   transform: scale(0.8);  transform-origin: center;}
.fav-btn.filled .fav-btn__star { fill: #fff; }
.fav-btn:hover { background: var(--color-primary-dark); }
.fav-btn {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.splatter-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6);
  pointer-events: none;
  width: 12px;
  height: 12px;
  animation: favSplatter 5s cubic-bezier(.2,.8,.2,1) forwards;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14));
  opacity: 0.95;
  z-index: 1;
}
.splatter-round { background: var(--splatter-color, #1da5ff); border-radius: 999px; }
.splatter-square { background: var(--splatter-color, #0c6bc2); }
.splatter-ring {
  background: transparent;
  border: 3px solid var(--splatter-color, #0099e6);
  border-radius: 50%;
}
.splatter-star {
  background: var(--splatter-color, #006dd0);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes favSplatter {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(0); filter: blur(1px); }
}

.subtitle { color: var(--color-grey); font-size: 1rem; font-weight: 600; padding-left: 20px; padding-right: 20px; margin-bottom: 10px; letter-spacing: 0.03em; }

.category-container { background-color: #fff; border-radius: 10px; box-shadow: none; padding-top: 10px; padding-bottom: 12px; width: 100%; padding-left: 10px; padding-right: 10px; margin-bottom: 8px; overflow: visible; position: relative; min-height: 250px; box-sizing: border-box; }
/* Reduce main-thread work by skipping offscreen category rendering where supported */
.category-container { content-visibility: auto; contain-intrinsic-size: 1px 320px; }

.category-link { background: transparent; color: var(--color-text); font-weight: 600; font-size: 1.2rem; text-decoration: none; transition: color 0.2s; cursor: pointer; outline: none; padding-left: 18px; padding-right: 18px; display:block; margin-bottom:12px; margin-top:8px; position: relative; display: inline-flex; align-items: center; gap: 10px; }
.category-link .category-title { color: #3f5364; }
.category-link:focus .category-link__showall, .category-link:hover .category-link__showall { opacity: 1; }
.category-link::after { content: ''; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='none' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 70% 70% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='none' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 70% 70% no-repeat; opacity: .55; transition: transform .28s ease, opacity .25s ease; }
.category-link:hover::after, .category-link:focus-visible::after { transform: translateX(3px); opacity: .9; }
.category-link:active::after { transform: translateX(5px) scale(.96); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .category-link::after { transition: opacity .2s ease; } .category-link:hover::after, .category-link:focus-visible::after { transform: none; } }

/* Filters */
.filters-sticky-wrapper { position:sticky; position:-webkit-sticky; top:0; z-index:70; background:#fff; display:flex; flex-direction:column;  width:100%; box-sizing:border-box; transition: border-color .25s ease; border-bottom:1px solid transparent; }
.filters-sticky-wrapper::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:12px; pointer-events:none; opacity:0; transition: opacity .2s ease; }
.filters-sticky-wrapper.is-fixed { position: fixed; z-index: 1000; left: 0; right: auto; }
.filters-sticky-wrapper.scrolled { border-bottom-color:#ffffff;   padding-top: 15px;   padding-left: 16px;  padding-right: 16px;}
.filters-sticky-wrapper.scrolled::after { opacity:1; }
.searchbar { display:flex; align-items:center; gap:6px; background:#f4f7fb; border:1px solid #e5e9f2; border-radius:12px; padding:4px 10px; margin:6px 10px 10px 10px; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.searchbar__icon { display: inline-flex; opacity: 0.8; }
.searchbar__input { flex: 1 1 auto; border: none; background: transparent; outline: none; font-size: 0.95rem; color: var(--color-text); -webkit-appearance: none; appearance: none; }
.searchbar .searchbar__input:focus, .searchbar .searchbar__input:focus-visible, .searchbar input[type="search"]:focus, .searchbar input[type="search"]:focus-visible { outline: none ; box-shadow: none ; border: none; outline-offset: 0 ; }
.searchbar__input::-webkit-search-decoration, .searchbar__input::-webkit-search-cancel-button, .searchbar__input::-webkit-search-results-button, .searchbar__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.searchbar__input::-ms-clear { display: none; width: 0; height: 0; }
.searchbar__input::-ms-reveal { display: none; width: 0; height: 0; }
.searchbar__icon svg { width: 14px; height: 14px; display: block; }
.searchbar__input::placeholder { color: #8da2b5; }
.searchbar__clear { display: none; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; cursor: pointer; }
.searchbar__clear:focus, .searchbar__clear:focus-visible { outline: none; box-shadow: none; }
.searchbar:focus-within { outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.03); border-color: #e5e9f2; }
.searchbar__clear.visible { display: inline-flex; align-items: center; justify-content: center; }
.search-no-results { margin: 8px 12px; color: var(--color-grey); font-size: 0.95rem; }

/* Category filter pill bar */
.category-filters { display:flex; flex-wrap:nowrap; gap:10px; padding:2px 12px 6px 12px; margin:0 4px 0 4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:transparent; }
.category-filters::-webkit-scrollbar { display: none; }
.category-filter-btn { flex: 0 0 auto; border: 1px solid #d9e2ea; background: #fff; color: #2f4656; font-weight: 600; font-size: 0.85rem; letter-spacing: .02em; padding: 8px 20px 9px 20px; border-radius: 28px; cursor: pointer; line-height: 1.05; position: relative; transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; -webkit-tap-highlight-color: transparent; }
.category-filter-btn:hover:not(.active) { background: #f3f7fa; border-color: #d0dbe4; }
.category-filter-btn.active { background: var(--nav-mobile-active-bg); color: var(--color-primary); border-color: var(--nav-mobile-active-border); box-shadow: 0 2px 6px rgba(75,189,255,0.18); }
.category-filter-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.category-filter-btn.active:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 2px var(--color-primary) inset, 0 2px 6px rgba(23,43,54,0.2); }
@media (max-width: 700px) { .filters-sticky-wrapper { top:0; } .category-filters { padding:2px 8px 4px 8px; gap:8px; } .category-filter-btn { font-size:0.78rem; padding:7px 16px 8px 16px; } }
@media (prefers-color-scheme: dark) { .category-filter-btn { background:#1e2730; border-color:#2c3945; color:#dbe7ef; } .category-filter-btn:hover:not(.active) { background:#27323c; border-color:#344452; } .category-filter-btn.active { background:rgba(75,173,255,0.18); border-color: var(--color-primary); color: var(--color-primary); box-shadow:0 2px 10px rgba(0,0,0,0.35); } .category-filter-btn.active:focus-visible { outline:3px solid #fff; box-shadow:0 0 0 2px var(--color-primary) inset, 0 2px 10px rgba(0,0,0,0.4); } }

/* WordPress admin bar overlap fix: geef sticky elementen offset wanneer ingelogd */
@media (min-width: 783px) {
  body.admin-bar .filters-sticky-wrapper,
  body.admin-bar .fullcat-backbar { top: 32px; }
}
@media (max-width: 782px) {
  body.admin-bar .filters-sticky-wrapper,
  body.admin-bar .fullcat-backbar { top: 46px; }
}

/* Cards track + arrows */
.cards-track { position: relative; width: 100%; }
.arrow-btn { position: absolute; top: 50%; transform: translateY(calc(-50% - 1.5px)); width: 48px; height: 48px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; overflow: visible; display:flex; align-items:center; justify-content:center; color:#203341; }
.arrow-btn::before { content: ''; position: absolute; inset: 0; background: var(--arrow-btn-bg); border-radius: 9999px; transform: scale(1); transition: transform .2s ease, background .2s ease; pointer-events: none; z-index: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.arrow-btn--left::before { transform-origin: left center; }
.arrow-btn--right::before { transform-origin: right center; }
.arrow-btn--left { left: var(--arrow-offset); }
.arrow-btn--right { right: var(--arrow-offset); }
.arrow-btn--visible:hover::before, .arrow-btn--visible:focus-visible::before { transform: scale(1.06); background: var(--arrow-btn-bg-hover); }
@media (prefers-reduced-motion: reduce) { .arrow-btn { transition: opacity .2s ease; } .arrow-btn--visible:hover::before, .arrow-btn--visible:focus-visible::before { transform: scaleX(1); } }
.arrow-btn--visible { opacity: 1; pointer-events: auto; }
.arrow-btn svg { display: block; width: 32px; height: 32px; position: relative; z-index: 1; }
.arrow-btn__rect { display: none; }
.arrow-btn__poly { stroke: #203341; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
/* Solid arrow variant */
.arrow-btn__icon { fill: currentColor; stroke: none; }
.arrow-btn--visible:hover .arrow-btn__poly, .arrow-btn--visible:focus-visible .arrow-btn__poly { stroke: #1d2d38; }
.arrow-btn--visible:hover, .arrow-btn--visible:focus-visible { color:#1d2d38; }
@media (max-width: 700px) { .arrow-btn { display: none !important; } }

/* Duidelijke chevrons via SVG-mask (scherp en consistent) */
.arrow-btn svg { display: none !important; }
.arrow-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 4 L16 12 L8 20' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 4 L16 12 L8 20' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / contain no-repeat;
}
.arrow-btn--left::after { transform: translate(-50%, -50%) scaleX(-1); }

/* Desktop UX: toon pijlen bij hover over de track en plaats ze tegen de randen */
@media (min-width: 901px) {
  /* Toon pijlen alleen wanneer JS de "arrow-btn--visible" class zet */
  .cards-track:hover .arrow-btn.arrow-btn--visible { opacity: 1; pointer-events: auto; }
  /* Geen extra ruimte; pijlen overlappen de content licht */
  .cards-track { padding: 0; }
  /* Langwerpige (pill) achtergrond + groter klikvlak op desktop */
  .cards-track .arrow-btn { height: 225px; width: 56px; }
  .cards-track .arrow-btn::before { border-radius: 0px; }
  .cards-track .arrow-btn--left { left: px; }
  .cards-track .arrow-btn--right { right: px; }
  /* Laat content rechts aansluiten op de scrollbar */
  #tabContent { padding-right: 0; }
  .category-container { padding-right: 0; }
}

/* Verwijder extra witruimte achter de laatste kaart (desktop en mobiel) */
.oefeningen-kaarten > .oefening-kaart:last-child { margin-right: 0; }

/* Responsive layout tweaks (non-nav) */
@media (max-width: 768px) { .category-container { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .subtitle { font-size: 1.2rem; padding-left: 10px; padding-right: 10px; } }
@media (max-width: 700px) {
  /* Vermijd 100dvh op mobiel (Android/Chrome) i.v.m. dubbele veeg door UI-bar verandering */
  .main-container { flex-direction: column; height: auto; min-height: 100vh; }
  @supports (height: 100svh) {
    .main-container { min-height: 100svh; }
  }
  :root { --mobile-nav-height: 64px; }
  #tabContent { padding-right: 12px; }
  .oefeningen-kaarten { gap: 2px; padding-left: 6px; padding-right: 6px; padding-bottom: 2px; }
  .oefening-kaart { flex: 0 0 var(--card-w); width: var(--card-w); height: var(--card-h); margin-right: 12px; }
  .kaart-flip-front, .kaart-flip-back { padding: var(--card-pad); }
  .kaart-title { font-size: var(--card-title-size); margin-bottom: 4px; }
  .kaart-desc { font-size: var(--card-desc-size); line-height: 1.2; }
  .kaart-flip-front .kaart-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .kaart-flip-back .kaart-desc, .kaart-flip-back .kaart-desc--back { display: block; -webkit-line-clamp: initial; line-clamp: initial; -webkit-box-orient: initial; overflow: visible; }
  .kaart-flip-back { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .action-row { gap: 12px; margin-top: 8px; }
  .play-btn, .fav-btn { width: 38px; height: 38px; }
  .category-container { padding-bottom: 6px; margin-bottom: 4px; min-height: 240px; }
}
@media (max-width:700px) { :root { --card-w: 172px; --card-h: 175px; --card-pad: 8px; --card-title-size: 0.95em; --card-desc-size: 0.75em; } }
@media (max-width: 600px) { .container { max-width: 98vw; margin: 16px auto 0 auto; padding: 18px 4vw 12px 4vw; } .tab-content { padding: 12px 2px 2px 2px; } }
@media (max-width: 480px) { .subtitle { font-size: 1rem; padding-left: 5px; padding-right: 5px; } }

/* Touch devices: disable card hover flip to avoid artifacts */
@media (hover: none) and (pointer: coarse) { .oefening-kaart:hover .kaart-flip-inner { transform: none; } }






@media (max-width: 700px) { .main-content-fixed { padding-bottom: calc(var(--mobile-nav-height) + 15px); } }

/* iOS override removed; rely on default body scroll to avoid freeze */