/* Home Page Specific Styles */

/* CSS Variables */
:root{
  --ink:#ffffff;
  --chip-face:#0e1117;
  --brand-cyan:#00fff0;
  --brand-green:#00c875;
  --ink-color:#00fff0;     /* stiftkleur */
  --ink-width:12;          /* lijndikte (px) */
  --cycle:5.2s;            /* duur heen + terug (yo-yo) */
  --len:1000;              /* == pathLength hierboven */
}

/* Remove default margins and padding */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Main container - no padding/margin */
main {
  margin: 0 !important;
  padding: 0 !important;
}

/* Home page specific main containers */
.home-main {
  max-width: 100%;
  overflow-x: hidden; 
  padding: 0 1.5rem; 
  box-sizing: border-box;
}

.home-content-main {
  max-width: 100%; 
  overflow-x: hidden; 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
}

/* Hero container - full width black background */
.mcp-hero-container {
  width: 100%;
  background: #000;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* layout: text left, chip right */
.mcp-hero-wrap{
  display:grid; gap:1.25rem; align-items:start;
  grid-template-columns:1fr 1fr;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* White text for hero content */
.mcp-hero-copy h1 {
  color: #ffffff !important;
  margin-bottom: 1rem;
}

.mcp-hero-copy .p-intro {
  color: #ffffff !important;
}

/* Footer image - direct implementation */
.mcp-footer-image-direct {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  line-height: 0 !important;
}

/* Content wrapper with padding */
.mcp-content-wrapper {
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* Animated Title Styles */
/* titel */
.mcp-title{
  font-size: clamp(1.8rem, 4vw, 4rem);
  color:#fff;
  margin:0 0 .4em 0;
  line-height: 1.1;
}

/* het woord dat onderlijnd wordt */
.mcp-underline{
  position:relative;
  display:inline-block;
  padding:0 .06em;
}

/* SVG staat ONDER de tekst */
.mcp-ink{
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-0.28em;          /* ↑ dichter / ↓ verder onder het woord */
  width:112%;
  height:1.2em;
  pointer-events:none;
  overflow:visible;
  z-index:0;               /* tekst erboven */
}

/* ÉÉN doorlopend pad met yo-yo tekenanimatie */
.mcp-stroke{
  fill:none;
  stroke:var(--ink-color);
  stroke-width:var(--ink-width);
  stroke-linecap:round;
  stroke-linejoin:round;

  /* teken-animatie: volledige lengte, heen-en-weer (yo-yo) */
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  animation:mcp-draw var(--cycle) cubic-bezier(.22,.9,.2,1) infinite alternate;
}

/* heen (naar rechts) → en weer (naar links) ← */
@keyframes mcp-draw{
  from { stroke-dashoffset: var(--len); } /* start "links" */
  to   { stroke-dashoffset: 0; }          /* volledig getekend "rechts" */
}

/* Plan Picker Chip Styles */
.mcp-chip-gold{ 
  margin-block-start: clamp(4px, 1vw, 12px); 
  max-width: 100%;
  overflow: hidden;
}

.chip{ 
  position:relative; 
  width: 100%; 
  max-width: 600px; 
  margin:auto; 
}

.die-bg{ 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  border-radius:26px; 
  z-index:0; 
}

/* die with subtle spotlight, no magnetic buttons */
.die{ 
  --mx:50%; 
  --my:50%;
  position:relative; 
  border-radius:34px; 
  padding:14px; 
  overflow:hidden;
  transform-style:preserve-3d; 
  transition: transform .18s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background:
    radial-gradient(220px 220px at var(--mx) var(--my), rgba(0,255,240,.10), rgba(0,255,240,0) 60%),
    linear-gradient(145deg,#2a303a,#12161d);
  box-shadow:
    0 24px 54px rgba(0,0,0,.30),
    inset 0 2px 6px rgba(255,255,255,.06),
    inset 0 -8px 20px rgba(0,0,0,.75);
}

.die::before{
  content:""; 
  position:absolute; 
  inset:10px; 
  border-radius:24px; 
  background:var(--chip-face);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 10px 30px rgba(0,0,0,.8);
}

.die::after{
  content:""; 
  position:absolute; 
  inset:8px; 
  border-radius:22px; 
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; 
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
  border:1px solid transparent;
}

.die-ui{ 
  position:relative; 
  z-index:1; 
  color:var(--ink); 
  padding:18px; 
  box-sizing:border-box; 
}

.die-ui h2{ 
  margin:0 0 .25rem; 
  font-size:1.24rem; 
  line-height:1.25; 
  letter-spacing:.2px;
}

.die-ui .sub{ 
  margin:0 0 .7rem; 
  color:rgba(255,255,255,.85); 
  font-size:.95rem;
}

.label{ 
  font-weight:800; 
  margin:0 0 .35rem; 
  letter-spacing:.25px;
}

.opts{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.5rem; 
  margin:0 0 .7rem;
}

.theme-button{
  padding:.65rem 1rem; 
  background:linear-gradient(90deg,var(--brand-cyan),var(--brand-green));
  border:none; 
  border-radius:.65rem; 
  color:#fff; 
  font-weight:800; 
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 10px 24px rgba(0,200,117,.22), inset 0 1px 0 rgba(255,255,255,.15);
}

.theme-button:hover{ 
  transform:translateY(-1px) scale(1.01);
}

.theme-button:active{ 
  transform:translateY(0) scale(.99);
}

.theme-button:focus-visible{
  outline:none; 
  box-shadow:0 0 0 2px #061a14, 0 0 0 4px rgba(0,255,240,.7), 0 0 0 6px rgba(0,200,117,.6);
}

.theme-button[aria-pressed="true"]{
  box-shadow:
    0 10px 24px rgba(0,200,117,.26),
    0 0 0 2px rgba(0,255,240,.65),
    0 0 0 4px rgba(0,200,117,.45),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* progress */
.prog{ 
  position:relative; 
  height:10px; 
  border-radius:999px; 
  background:rgba(10,12,18,.7); 
  overflow:hidden; 
  margin:.4rem 0 .7rem;
}

.bar{
  height:100%; 
  width:0; 
  border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-cyan) 0%, var(--brand-green) 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 0 12px rgba(0,200,117,.25);
  transition:width .35s ease;
}

.reset{ 
  position:absolute; 
  right:0; 
  top:calc(100% + .35rem); 
  font-size:.85rem; 
  color:rgba(255,255,255,.7); 
  text-decoration:underline; 
  text-underline-offset:2px;
}

/* result */
.result{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box,
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,240,.12), rgba(0,255,240,0)) border-box;
  border:1px solid transparent; 
  border-radius:12px; 
  padding:.9rem; 
  color:#e9f3ff;
  line-height:1.55; 
  margin-top:.6rem;
}

.result p{ 
  margin:.25rem 0 0;
}

.result .theme-button{ 
  display:inline-block; 
  margin-top:.6rem;
}

/* Responsive Styles */
@media (max-width:980px){ 
  .mcp-hero-wrap{ 
    grid-template-columns:1fr; 
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  }
}

/* Tablet specific adjustments */
@media (max-width: 768px) {
  .mcp-hero-wrap {
    padding: 3rem 3rem !important;
    gap: 1rem;
  }

  /* Footer image already optimized - no additional styling needed */
  
  .mcp-content-wrapper {
    padding: 0 25px; /* Match mobile header padding */
  }
  
  .chip {
    max-width: 100%;
    margin: 0;
  }
  
  .die {
    padding: 12px;
    border-radius: 24px;
  }
  
  .die-ui {
    padding: 12px;
  }
  
  .die-ui h2 {
    font-size: 1.1rem;
  }
  
  .opts {
    gap: 0.4rem;
  }
  
  .theme-button {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }

  /* Mobile adjustments for title */
  .mcp-title {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
  }
}

/* Mobile specific adjustments */
@media (max-width: 480px) {
  .mcp-hero-wrap {
    padding: 2rem 2rem !important;
    gap: 0.75rem;
  }
  
  .die {
    padding: 8px;
    border-radius: 20px;
  }
  
  .die-ui {
    padding: 8px;
  }
  
  .die-ui h2 {
    font-size: 1rem;
  }
  
  .die-ui .sub {
    font-size: 0.85rem;
  }
  
  .theme-button {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .mcp-title {
    font-size: clamp(1.2rem, 6vw, 1.8rem);
    line-height: 1.3;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .die{ 
    transition:none; 
    background: linear-gradient(145deg,#2a303a,#12161d); 
  }
  .bar{ 
    transition:none; 
  }
  .mcp-stroke{ 
    animation:none; 
    stroke-dashoffset:0; 
  }
}

/* Author Section Styles */
.author-block {
  padding: 3rem 0;
  max-width: 100%;
  margin: 0;
  width: 100%;
}

.author-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

.author-image-small {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-block h2 {
  text-align: left;
  font-size: 2.5rem;
  margin: 0;
  color: #333;
  line-height: 1.2;
}

.author-image {
  display: block;
  margin: 0 auto 2rem auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.author-text-left {
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.author-text-left p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
}

.author-linkedin-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: #0077b5;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.author-linkedin-btn:hover {
  background: #005885;
  color: white;
}

/* Mission & Vision Styles */
.mission-vision {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.mission, .vision {
  margin-bottom: 2rem;
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.mission h3, .vision h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.mission p, .vision p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}