/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face { font-family:'Blender'; src: local('Blender'), url('assets/fonts/Blender-Regular.woff2') format('woff2'); font-display: swap }
@font-face { font-family:'Blender Strong'; src: local('Blender Strong'), url('assets/fonts/Blender-Strong.woff2') format('woff2'); font-display: swap }
body {
    font-family: 'Blender','Rubik','Barlow',sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Access Gate */
.access-gate {
    position: fixed;
    inset: 0;
    background: rgba(41, 84, 180, 0.85);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
}

.access-gate.visible { display: flex; }

.access-card {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 32px;
    color: #FFFFFF;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    text-align: center;
    backdrop-filter: blur(10px);
}

.access-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.access-brand .logo-icon { font-size: 20px; }
.access-brand .logo-text { font-weight: 700; letter-spacing: .4px; }

.access-card h2 { font-size: 22px; margin: 8px 0 6px; }
.access-subtitle { opacity: .85; margin-bottom: 18px; }

.code-form { display:flex; flex-direction:column; align-items:center; gap: 16px; }
.code-inputs { display:flex; gap: 10px; }
.code-digit {
    width: 48px; height: 56px;
    text-align: center; font-size: 22px; font-weight: 700; color:#0f172a;
    background: #ffffff; border: 2px solid transparent; border-radius: 12px;
    box-shadow: 0 8px 18px rgba(2,6,23,0.25);
    outline: none;
    transition: border-color .2s ease, transform .08s ease;
}
.code-digit:focus { border-color:#60a5fa; transform: translateY(-1px); }

.access-btn {
    background: linear-gradient(90deg,#10b981,#22c55e);
    color:#fff; font-weight:700; border:0; border-radius: 12px;
    padding: 12px 18px; cursor:pointer; transition: opacity .2s ease, transform .1s ease;
    width: 100%; max-width: 220px; box-shadow: 0 10px 22px rgba(16,185,129,0.35);
}
.access-btn[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none; }
.access-btn:hover:not([disabled]) { transform: translateY(-1px); }

.access-hint { font-size:12px; opacity:.7; }
.access-error { color:#fecaca; font-weight:600; min-height: 18px; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Main Header */
.main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 16px 0;
}

.main-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 0.8;
}

.logo-icon {
    font-size: 24px;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #3A9AEA;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #1e3a8a;
}

/* Dashboard Header Section */
.dashboard-header {
    background: #2954B4;
    color: white;
    padding: 60px 0 80px;
    text-align: center;
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
}

.member-access {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.member-access:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.member-access .icon-star {
    color: white;
    width: 14px;
    height: 14px;
}

.dashboard-header h1 {
    font-size: 48px;
    font-family: 'Blender Strong','Blender','Rubik','Barlow',sans-serif;
    letter-spacing: .03em;
    margin-bottom: 20px;
    color: white;
    line-height: 1.2;
}

.header-description {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.5;
    color: white;
}

.header-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.feature .icon-star {
    color: white;
    width: 16px;
    height: 16px;
}

/* Main Content */
.main-content {
    padding: 80px 0;
    background-color: #ffffff;
}

.courses-section {
    text-align: center;
}

.courses-section h2 {
    font-size: 36px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 16px;
}

.courses-subtitle {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 60px;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* === SCOPE: academy-hero === */
.hero-title{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(22px,5.8vw,78px);line-height:1.05;}
.dashboard-header .hero-title{color:#fff !important}

/* Header navigation */
.header-nav {
    padding: 20px 0 0 0;
    margin-bottom: 20px;
}

.back-to-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.back-to-home:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.back-to-home .icon {
    font-size: 18px;
    font-weight: bold;
}

/* === SCOPE: academy-cards === */
.course-card .card-media{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#eaf1ff;}
.course-card .card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.course-card:hover .card-media img{transform:scale(1.03);}
.course-card .course-badge{position:absolute;top:10px;left:10px;z-index:2}
.course-card .badge-right{right:10px;left:auto}
/* Hide old round icon containers if present */
.course-card .card-icon,.course-card .icon-wrap{display:none !important}

/* === SCOPE: academy-features === */
.feature .icon,.feature .icon svg{color:#FDB541;fill:#FDB541}

/* === SCOPE: academy-css === */
/* Hide global site header ONLY on /academy */
.page-academy header.site-header,
.page-academy .site-header,
.page-academy .global-header,
.page-academy header[role="banner"] {
  display: none !important;
}
.page-academy .hero,
.page-academy main { padding-top: 0 !important; margin-top: 0 !important; }

/* Hero: white, one-line, Quicksand */
/* Using Google Fonts CDN (already loaded in HTML) with local fallback */
.hero-title {
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(22px, 5.8vw, 78px);
  line-height: 1.05;
}

/* Kill any leftover bars/badges on cards */
.course-card .course-header,
.course-card .topbar,
.course-card .label-bar,
.course-card .course-badge,
.course-card .course-duration,
.course-card .badge-right,
.course-card .badge {
  display: none !important;
}

/* Stars gold (works for text star or inline SVG) */
.feature .icon,
.feature .icon svg {
  color: #FDB541;
  fill: #FDB541;
}

/* === SCOPE: course-pages === */
/* Course overview and lesson pages */
.course-overview,
.lesson-page {
  padding: 2rem 0;
}

.breadcrumb {
  margin-bottom: 1.5rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: #3b82f6;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.course-hero {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: white;
  border-radius: 12px;
}

.course-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.course-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.lessons-section h2 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.lessons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lesson-item {
  margin-bottom: 1rem;
}

.lesson-link {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

.lesson-link:hover {
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.lesson-number {
  background: #f59e0b;
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 1rem;
  flex-shrink: 0;
}

.lesson-info {
  flex: 1;
}

.lesson-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
}

.lesson-desc {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.lesson-arrow {
  color: #f59e0b;
  font-size: 1.2rem;
  margin-left: 1rem;
}

/* Lesson page styles */
.lesson-content {
  max-width: 800px;
  margin: 0 auto;
}

.lesson-header {
  margin-bottom: 2rem;
  text-align: center;
}

.lesson-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.lesson-body {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.lesson-body p {
  margin-bottom: 1rem;
}

.lesson-footer {
  text-align: center;
}

.lesson-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav-btn {
  padding: 0.75rem 1.5rem;
  background: #f59e0b;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s;
}

.nav-btn:hover {
  background: #d97706;
}

.mark-done-btn {
  padding: 0.75rem 1.5rem;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.mark-done-btn:hover {
  background: #059669;
}

.mark-done-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
}

/* === SCOPE: djb-reset-hero === */
/* Neutralize any custom 'capsule hero' introduced earlier */
.course-hero { display:none !important; }

/* Keep the overview simple and consistent with site defaults */
.course-overview { max-width:1100px; margin:0 auto; padding:24px; }
.course-title { margin:0 0 4px 0; }
.course-subtitle { margin:0 0 16px 0; opacity:.75; }
.lessons-list { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:780px){ .lessons-list { grid-template-columns:1fr 1fr; } }
.lesson-item{display:block;padding:14px 16px;border-radius:14px;background:#f7f9ff;border:1px solid #e6ecff;text-decoration:none;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lesson-item:hover{transform:translateY(-1px)}
.lesson-item .meta{font-size:12px;opacity:.7;margin-top:4px}
.badge-done{display:inline-block;padding:2px 8px;border-radius:999px;background:#e8f8ec;color:#187f3d;font-size:12px;margin-left:8px}

/* === SCOPE: djb-overview-styles === */
.course-overview{max-width:1100px;margin:0 auto;padding:24px}
.course-title{margin:0 0 4px}
.course-subtitle{margin:0 0 16px;opacity:.75}
.lessons-list{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:780px){.lessons-list{grid-template-columns:1fr 1fr}}
.lesson-item{display:block;padding:14px 16px;border-radius:14px;background:#f7f9ff;border:1px solid #e6ecff;text-decoration:none;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lesson-item:hover{transform:translateY(-1px)}
.lesson-item .meta{font-size:12px;opacity:.7;margin-top:4px}
.badge-done{display:inline-block;padding:2px 8px;border-radius:999px;background:#e8f8ec;color:#187f3d;font-size:12px;margin-left:8px}

/* Nuke any leftover orange capsule hero if present on this page only */
.course-hero,.banner,.capsule{display:none !important}

/* Course Cards */
.course-card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5e7eb;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Locked course styling */
.course-card.locked {
    opacity: 0.7;
    position: relative;
    cursor: not-allowed;
    pointer-events: none;
}

.course-card.locked:hover {
    transform: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.course-card.locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    z-index: 10;
}

.course-card.locked .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card.locked .start-course {
    background: #9ca3af !important;
    color: #6b7280 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.course-card.locked .start-course::after {
    content: ' (Binnenkort)';
    font-size: 0.8em;
    opacity: 0.8;
}

.course-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 30px 20px;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-icon {
    width: 60px;
    height: 60px;
    background-color: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6b7280;
}

.course-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.course-badge.intensive {
    background-color: #ef4444;
}

.course-badge.fundamental {
    background-color: #10b981;
}

.course-badge.advanced {
    background-color: #8b5cf6;
}

.course-badge.accessible {
    background-color: #f59e0b;
}

.course-badge.holistic {
    background-color: #06b6d4;
}

.course-duration {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    z-index: 2;
}

.course-content {
    padding: 24px;
}

.course-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333333 !important;
    margin-bottom: 8px;
}

.course-subtitle {
    font-size: 14px;
    color: #333333 !important;
    font-weight: 500;
    margin-bottom: 12px;
}

.course-description {
    font-size: 14px;
    color: #333333 !important;
    line-height: 1.5;
    margin-bottom: 20px;
}

.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.progress-dots {
    display: flex;
    gap: 4px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
}

.dot:first-child {
    background-color: #3b82f6;
}

.start-course {
    color: #333333 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.start-course:hover {
    color: #333333 !important;
}

.start-course .icon-arrow-right {
    width: 12px;
    height: 12px;
}

/* Footer */
.dashboard-footer {
    background-color: #374151;
    color: white;
    padding: 60px 0;
    text-align: center;
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.support-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.support-info .icon-star {
    color: white;
    width: 18px;
    height: 18px;
}

.dashboard-footer p {
    font-size: 16px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.dashboard-footer p:last-child {
    margin-bottom: 0;
    font-weight: 500;
}

/* Course Icons */
.icon-detox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.icon-balance {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.icon-nutrition {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.icon-mindfulness {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-header h1 {
        font-size: 36px;
    }
    
    .header-description {
        font-size: 18px;
    }
    
    .header-features {
        flex-direction: column;
        gap: 20px;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .courses-section h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .dashboard-header {
        padding: 40px 0 60px;
    }
    
    .dashboard-header h1 {
        font-size: 28px;
    }
    
    .header-description {
        font-size: 16px;
    }
    
    .main-content {
        padding: 60px 0;
    }
    
    .courses-section h2 {
        font-size: 24px;
    }
    
    .course-card {
        margin: 0 10px;
    }
}