/* =========================================================
   Robo-klas — shared dark-tech theme for app.robo-klas.com
   Matching robo-klas.com Additional CSS
   ========================================================= */
:root{
  --rk-ink:#f5f7fb; --rk-bg:#0b1020; --rk-bg2:#0f1628; --rk-card:#141c35;
  --rk-border:#2a3559; --rk-muted:#9aa3bf;
  --rk-teal:#00e6d0; --rk-purple:#9d4edd; --rk-amber:#fbbf24;
}

/* Shared dark canvas for app-pages that opt-in via .rk-themed on body */
body.rk-themed{
  background:var(--rk-bg);
  color:var(--rk-ink);
  font-family:"Nunito","Inter",sans-serif;
  margin:0;
  min-height:100vh;
  position:relative;
}
body.rk-themed::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:
    radial-gradient(at 25% 10%, rgba(157,78,221,.14) 0%, transparent 50%),
    radial-gradient(at 80% 5%,  rgba(0,230,208,.10) 0%, transparent 50%),
    radial-gradient(at 60% 90%, rgba(251,191,36,.07) 0%, transparent 50%),
    linear-gradient(#0b1020, #0f1628);
  pointer-events:none;
}
body.rk-themed::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

/* Shared nav-bar (same items as WP header) */
.rk-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(11,16,32,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rk-border);
  padding:12px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.rk-nav-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.rk-nav-brand .rk-ico{
  display:inline-block; width:26px; height:26px; border-radius:6px;
  background:#141c35; border:1px solid rgba(255,255,255,.12);
  background-image:
    radial-gradient(circle at 30% 30%, #ffd166 0 5px, transparent 5.5px),
    radial-gradient(circle at 70% 30%, #06d6a0 0 5px, transparent 5.5px),
    radial-gradient(circle at 30% 70%, #ef476f 0 5px, transparent 5.5px),
    radial-gradient(circle at 70% 70%, #118ab2 0 5px, transparent 5.5px);
}
.rk-nav-brand .rk-name{
  font-family:"Fredoka",sans-serif; font-weight:700; font-size:18px;
  background:linear-gradient(135deg,var(--rk-teal),var(--rk-purple));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.rk-nav-links{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.rk-nav-links a{
  color:#dbe1f3; text-decoration:none;
  font-family:"Nunito",sans-serif; font-size:14px; font-weight:600;
  padding:7px 12px; border-radius:8px;
  transition:background .15s, color .15s;
}
.rk-nav-links a:hover{ background:rgba(0,230,208,.1); color:var(--rk-teal); }
.rk-nav-links a.cta-leerling{
  background:linear-gradient(135deg,var(--rk-amber) 0%,#f97316 100%);
  color:#1b1300 !important; font-weight:800;
  border-radius:999px; padding:9px 18px;
  box-shadow:0 0 0 2px rgba(251,191,36,.2), 0 4px 20px rgba(251,191,36,.35);
}
.rk-nav-links a.cta-leerling:hover{ transform:translateY(-1px); color:#1b1300 !important; }
@media(max-width:760px){ .rk-nav-links{ width:100%; justify-content:flex-start; } }

/* Page-content wrapper */
.rk-page{ max-width:1100px; margin:0 auto; padding:40px 20px; color:var(--rk-ink); }
.rk-page h1{
  font-family:"Fredoka",sans-serif; font-size:clamp(30px,4vw,44px);
  background:linear-gradient(135deg,#fff 0%, var(--rk-teal) 40%, var(--rk-purple) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 8px;
}
.rk-page h2{ font-family:"Fredoka",sans-serif; color:#fff; margin:24px 0 10px; font-size:clamp(22px,2.6vw,28px); }
.rk-page h3{ font-family:"Fredoka",sans-serif; color:#fff; margin:16px 0 6px; font-size:18px; }
.rk-page p, .rk-page li{ color:#dbe1f3; line-height:1.55; }
.rk-page a{ color:var(--rk-teal); }
.rk-page a:hover{ color:var(--rk-amber); }

/* Card elements */
.rk-card{
  background:var(--rk-card); border:1px solid var(--rk-border);
  border-radius:16px; padding:22px; margin:16px 0;
}

/* Buttons */
.rk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:12px; font-weight:700;
  text-decoration:none; transition:transform .15s, box-shadow .15s;
  line-height:1;
}
.rk-btn-primary{
  background:linear-gradient(135deg,var(--rk-teal),var(--rk-purple));
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(0,230,208,.35), 0 8px 30px rgba(157,78,221,.3);
}
.rk-btn-primary:hover{ transform:translateY(-2px); }
.rk-btn-amber{
  background:linear-gradient(135deg,var(--rk-amber),#f97316);
  color:#1b1300 !important; font-weight:800;
  box-shadow:0 0 0 2px rgba(251,191,36,.2), 0 8px 30px rgba(251,191,36,.35);
}
.rk-btn-amber:hover{ transform:translateY(-2px); color:#1b1300 !important; }
.rk-btn-outline{
  background:rgba(0,230,208,.08); color:var(--rk-teal) !important;
  border:1.5px solid rgba(0,230,208,.5);
}
.rk-btn-outline:hover{ background:rgba(0,230,208,.18); }

/* Footer (matching WP footer) */
.rk-footer{
  margin-top:60px; padding:20px; border-top:1px solid var(--rk-border);
  background:#070b17; text-align:center;
  color:var(--rk-muted); font-size:12px; font-family:"JetBrains Mono",monospace;
}
.rk-footer a{ color:var(--rk-muted); text-decoration:none; margin:0 8px; }
.rk-footer a:hover{ color:var(--rk-teal); }
.rk-footer .badge-nl{ color:var(--rk-muted); display:block; margin-top:6px; font-size:11px; }