/* Stijl van de subpagina's (privacy, voorwaarden, onderwijs en ICT) en van de pagina 'niet gevonden'.
   Komt bovenop site.css. Elementen met data-sub of data-fout horen bij de opbouw van die pagina;
   de tekst in een .prose staat zonder kenmerk, zoals Markdoc hem vroeger maakte. */

/* ---------- subpagina's ---------- */
.progress-container[data-sub] {
  position:fixed;
  top:80px;
  left:0;
  width:100%;
  height:4px;
  background:transparent;
  z-index:99;
}

.progress-bar[data-sub] {
  height:100%;
  background:var(--accent);
  width:0%;
  transition:width .1s ease;
  box-shadow:0 0 10px #e6a23c80;
}

.breadcrumb[data-sub] {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-bottom:1.5rem;
  font-size:.9rem;
  color:#fffc;
  animation:fadeInDown .6s ease-out;
}

.breadcrumb[data-sub] a[data-sub] {
  color:inherit;
  text-decoration:none;
  transition:color .2s;
}

.breadcrumb[data-sub] a[data-sub]:hover {
  color:#fff;
}

.breadcrumb[data-sub] .separator[data-sub] {
  opacity:.5;
}

.hero-meta[data-sub] {
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
  gap:1.5rem;
  color:#ffffffe6;
  font-size:.95rem;
  animation:fadeInUp .8s ease-out .2s both;
}

.meta-item[data-sub] {
  display:flex;
  align-items:center;
  gap:.5rem;
  background:#ffffff1a;
  padding:.4rem 1rem;
  border-radius:50px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);
}

.hero-section[data-sub] {
  position:relative;
  height:70vh;
  min-height:500px;
  max-height:800px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-top:0;
}

.hero-section[data-sub].no-image {
  height:35vh;
  min-height:250px;
  background:var(--primary-gradient);
}

.hero-section[data-sub].no-image .hero-overlay[data-sub] {
  opacity:.2;
}

.hero-image[data-sub] {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.05);
  transition:transform .3s ease-out;
}

.hero-section[data-sub]:hover .hero-image[data-sub] {
  transform:scale(1);
}

.hero-overlay[data-sub] {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom,#00000080,#0000004d,#0009);
}

.hero-content[data-sub] {
  position:relative;
  z-index:2;
  width:100%;
  text-align:center;
  padding:5rem 2rem 2rem;
}

.hero-title[data-sub] {
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
  line-height:1.2;
  margin:0;
  animation:fadeInUp .8s ease-out;
}

.shape-divider[data-sub] {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  line-height:0;
  transform:rotate(180deg);
  z-index:2;
}

.shape-divider[data-sub] svg[data-sub] {
  position:relative;
  display:block;
  width:calc(100% + 1.3px);
  height:60px;
}

.shape-divider[data-sub] .shape-fill[data-sub] {
  fill:#fff;
}

.scroll-indicator[data-sub] {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translate(-50%);
  color:#fff;
  opacity:.8;
  animation:bounce 2s infinite;
  z-index:3;
}

@keyframes fadeInUp {
  0% {
    opacity:0;
    transform:translateY(30px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes bounce {
  0%,20%,50%,80%,to {
    transform:translate(-50%) translateY(0);
  }
  40% {
    transform:translate(-50%) translateY(-10px);
  }
  60% {
    transform:translate(-50%) translateY(-5px);
  }
}

.page-content[data-sub] {
  padding:5rem 0;
  min-height:50vh;
}

.prose[data-sub] {
  max-width:65ch;
  margin:0 auto;
  font-size:1.125rem;
  line-height:1.8;
  color:#374151;
}

.prose[data-sub] h1 {
  font-size:2.5rem;
  margin-top:3rem;
  margin-bottom:1.5rem;
  color:#111827;
  font-weight:700;
  line-height:1.2;
}

.prose[data-sub] h2 {
  font-size:2rem;
  margin-top:3.5rem;
  margin-bottom:1.5rem;
  color:#111827;
  font-weight:700;
  line-height:1.3;
  padding-bottom:.5rem;
  border-bottom:2px solid #e5e7eb;
}

.prose[data-sub] h3 {
  font-size:1.5rem;
  margin-top:2.5rem;
  margin-bottom:1rem;
  color:#1f2937;
  font-weight:600;
}

.prose[data-sub] p {
  margin-bottom:2rem;
  line-height:1.8;
  color:#374151;
}

.prose[data-sub] p:first-of-type {
  font-size:1.25rem;
  color:#1f2937;
  line-height:1.7;
}

.prose[data-sub] a {
  color:var(--link-color);
  font-weight:var(--link-weight);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:all .2s;
}

.prose[data-sub] a:hover {
  border-bottom-color:var(--link-color);
  filter:brightness(1.1);
}

.prose[data-sub] ul,.prose[data-sub] ol {
  margin-bottom:2rem;
  padding-left:2rem;
}

.prose[data-sub] li {
  margin-bottom:.75rem;
  line-height:1.7;
}

.prose[data-sub] li::marker {
  color:var(--primary);
}

.prose[data-sub] strong {
  font-weight:700;
  color:#111827;
}

.prose[data-sub] em {
  font-style:italic;
  color:#4b5563;
}

.prose[data-sub] blockquote {
  border-left:4px solid var(--primary);
  padding:2rem;
  margin:3rem 0;
  font-style:italic;
  color:#374151;
  background:rgba(var(--primary-rgb, 19, 183, 158),.05);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-radius:0 16px 16px 0;
  position:relative;
  overflow:hidden;
}

.prose[data-sub] blockquote:before {
  content:'"';
  position:absolute;
  top:-10px;
  left:10px;
  font-size:5rem;
  color:var(--primary);
  opacity:.1;
  font-family:serif;
}

.prose[data-sub] blockquote p {
  margin-bottom:0;
}

.prose[data-sub] code {
  background:#f3f4f6;
  padding:.2rem .4rem;
  border-radius:4px;
  font-size:.9em;
  color:#dc2626;
  font-family:Courier New,monospace;
}

.prose[data-sub] pre {
  background:#1f2937;
  color:#e5e7eb;
  padding:1.5rem;
  border-radius:8px;
  overflow-x:auto;
  margin:2rem 0;
}

.prose[data-sub] pre code {
  background:none;
  color:inherit;
  padding:0;
}

.prose[data-sub] img {
  border-radius:12px;
  box-shadow:0 10px 30px #0000001a;
  margin:2.5rem 0;
  width:100%;
  height:auto;
  transition:transform .3s ease,box-shadow .3s ease;
}

.prose[data-sub] img:hover {
  transform:scale(1.02);
  box-shadow:0 15px 40px #00000026;
}

.prose[data-sub] hr {
  border:none;
  border-top:2px solid #e5e7eb;
  margin:3rem 0;
}

.cta-section[data-sub] {
  margin-top:5rem;
  text-align:center;
  padding:3rem 0;
}

.btn[data-sub] {
  display:inline-block;
  padding:1rem 2.5rem;
  border-radius:50px;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  transition:all .3s ease;
}

.btn-primary[data-sub] {
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 14px #00000026;
}

.btn-primary[data-sub]:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px #0003;
  filter:brightness(1.1);
}

.scroll-top-btn[data-sub] {
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 15px #0003;
  z-index:90;
  opacity:0;
  visibility:hidden;
  transform:translateY(20px);
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}

.scroll-top-btn[data-sub].visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top-btn[data-sub]:hover {
  background:var(--primary-light, #16d4b7);
  transform:scale(1.1);
}

@keyframes fadeInDown {
  0% {
    opacity:0;
    transform:translateY(-20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.reveal-on-scroll[data-sub] {
  opacity:0;
  transform:translateY(30px);
  transition:all .8s cubic-bezier(.4,0,.2,1);
}

.reveal-on-scroll[data-sub].in-view {
  opacity:1;
  transform:translateY(0);
}

.prose[data-sub] img.reveal-on-scroll {
  transform:scale(.95) translateY(20px);
}

.prose[data-sub] img.reveal-on-scroll.in-view {
  transform:scale(1) translateY(0);
}

@media(max-width:768px) {
  .hero-section[data-sub] {
    height:50vh;
    min-height:350px;
  }
  .hero-title[data-sub] {
    font-size:2rem;
  }
  .page-content[data-sub] {
    padding:3rem 0;
  }
  .prose[data-sub] {
    font-size:1rem;
    padding:0 1.5rem;
  }
  .prose[data-sub] h1 {
    font-size:2rem;
  }
  .prose[data-sub] h2 {
    font-size:1.5rem;
  }
  .prose[data-sub] h3 {
    font-size:1.25rem;
  }
  .cta-section[data-sub] {
    padding:2rem 0;
  }
  .scroll-top-btn[data-sub] {
    bottom:1.5rem;
    right:1.5rem;
    width:44px;
    height:44px;
  }
  .breadcrumb[data-sub] {
    display:none;
  }
  .progress-container[data-sub] {
    top:65px;
  }
}


/* ---------- niet gevonden ----------
   De animatie heet hier stuiter-fout: de subpagina's hebben al een bounce, en die mag deze niet
   overschrijven. */
.error-page[data-fout] {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(var(--primary-rgb, 19, 183, 158),.05),rgba(var(--accent-rgb, 230, 162, 60),.05));
  padding:2rem;
}

.error-content[data-fout] {
  text-align:center;
  max-width:600px;
}

.error-icon[data-fout] {
  font-size:5rem;
  margin-bottom:1rem;
  animation:stuiter-fout 2s ease-in-out infinite;
}

@keyframes stuiter-fout {
  0%,to {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

.error-code[data-fout] {
  font-size:clamp(6rem,15vw,10rem);
  font-weight:800;
  background:var( --primary-gradient, linear-gradient(135deg, #13b79e, #e6a23c) );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0;
  line-height:1;
}

.error-title[data-fout] {
  font-size:clamp(1.5rem,4vw,2rem);
  color:var(--text-heading, #1d1d1f);
  margin:1rem 0;
  font-family:var(--font-heading, "Poppins", sans-serif);
}

.error-message[data-fout] {
  font-size:1.125rem;
  color:var(--text-muted, #86868b);
  line-height:1.7;
  margin-bottom:2rem;
}

.error-tips[data-fout] {
  background:rgba(var(--primary-rgb, 19, 183, 158),.1);
  padding:1rem 1.5rem;
  border-radius:12px;
  margin-bottom:2rem;
}

.error-tips[data-fout] p[data-fout] {
  margin:0;
  color:var(--text-main, #48484a);
}

.btn[data-fout] {
  display:inline-flex;
  align-items:center;
  padding:1rem 2rem;
  font-size:1rem;
  font-weight:600;
  border-radius:50px;
  text-decoration:none;
  transition:all .3s ease;
}

.btn-primary[data-fout] {
  background:var( --primary-gradient, linear-gradient(135deg, #13b79e, #0d9b85) );
  color:#fff;
}

.btn-primary[data-fout]:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 30px #13b79e4d;
}