/*
 Theme Name:   Willemeen Neon Theme
 Template:     willemeen
 Version:      1.0.4
*/

  :root{
    --ink:#0A0D12;
    --ink-2:#12161D;
    --ink-3:#181D26;
    --line: rgba(160,190,230,.16);
    --paper:#F2F4F7;
    --paper-2:#E7EBF1;
    --text-dark:#12161D;
    --text-light:#EEF2F7;
    --text-light-dim: rgba(238,242,247,.62);
    --neonblue:#2A05FF;
    --neonblue-glow: rgba(42, 5, 255,.35);
    --magenta:#E23E70;
    --neonpink:#ff14ed;
    --yellow:#F0BE1F;
    --teal:#1B8FA6;
    --neongreen:#39ff14;
    --orange:#E56A26;
    --tape: rgba(238,242,247,.5);
    --shadow: 0 24px 48px -18px rgba(0,0,0,.6);
    --radius: 3px;
    --ease: cubic-bezier(.2,.8,.2,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  .jongeren-page html{ scroll-behavior:smooth; }
  .jongeren-page body{margin:0; }
  .jongeren-page { position:relative; z-index:1;  }
  .jongeren-page body::before{ display:block; }
  .jongeren-page img{ max-width:100%; display:block; }
  .jongeren-page a{ color:inherit; border-bottom: solid 0 rgba(0,0,0,0) }
  .jongeren-page h1,h2,h3{ margin:0; padding: 0;  }
  .jongeren-page p{ margin:0; font-size: 1rem; }

  .jongeren-page a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 3px solid var(--neonblue);
    outline-offset: 3px;
  }

  .jongeren-page .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--neonblue); color:#fff; padding:.75rem 1rem;
     font-weight:700; z-index:999;
  }
  .jongeren-page .skip-link:focus{ left:1rem; top:1rem; }

  .jongeren-wrap{ max-width:1180px; margin:0 auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

  /* ---------- HERO ---------- */
  .jongeren-page .hero{ position:relative; padding-block: clamp(3rem, 4vw, 6.5rem) clamp(3rem, 3vw, 5.5rem); overflow:hidden; }
  .jongeren-page .hero__grid{ display:grid; grid-template-columns: 1.35fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items:end; }
  @media (max-width: 880px){ .hero__grid{ grid-template-columns: 1fr; } }

  .jongeren-page .hero__badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.3rem; }
  .jongeren-page .badge{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
    padding:.35rem .7rem; border-radius:999px; border:2px solid var(--neonpink);
    color:var(--neonpink); background: rgba(0,0,0,0);
  }
  .jongeren-page .badge {transition:color .25s ease, border-color .25s ease,transform .25s ease;}
  .jongeren-page .badge--solid{ background:var(--neonblue); color:#fff; border-color:var(--neonblue); }

  .jongeren-page .hero h1{ font-size: clamp(2.7rem, 7.2vw, 4.9rem); line-height:.95; color:var(--text-light); margin:0; display:block; }
  .jongeren-page .hero h1:after{display:none;}
  .jongeren-page .hero h1::after{display:none;}
  .jongeren-page .hero h1:before{display:none;}
  .jongeren-page .hero h1::before{display:none;}
  .jongeren-page .hero h1 em{ font-style:normal; background: var(--neonblue); color:#fff; padding: 0 .18em; display:inline-block; transform: rotate(-1.2deg); vertical-align:baseline; }
  .jongeren-page .hero__lede{ margin-top:1.6rem; max-width:50ch; line-height:1.6; color:var(--text-light); }
  .jongeren-page .hero__lede strong{ color:var(--text-light); }

  .jongeren-page .hero__photo{ position:relative; transform: rotate(3deg); }
  .jongeren-page .hero__photo-frame{ background:var(--paper); padding: .6rem .6rem 2.6rem; box-shadow:var(--shadow); position:relative; }
  .jongeren-page .hero__photo-frame img{ width:100%; aspect-ratio: 4/3; object-fit:cover;}
  .jongeren-page .hero__photo-frame::after{
    content:""; position:absolute; inset:0; background:var(--neonblue); mix-blend-mode:multiply; opacity:.05; margin:.6rem .6rem 2.6rem;
  }
  .jongeren-page .hero__photo-cap{ position:absolute; left:.6rem; right:.6rem; bottom:.75rem; font-size:.72rem; color:var(--text-dark); }
  .jongeren-page .hero__tape{ position:absolute; width:70px; height:26px; background:var(--tape); box-shadow: 0 2px 6px rgba(0,0,0,.3); top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); }

/* ---------- HERO MOBILE ---------- */
@media (max-width: 880px) {
  .jongeren-page .hero__grid { grid-template-columns: 1fr;gap: 2.5rem; }
  .jongeren-page .hero__photo { width: 92%; max-width: 520px; margin: 0 auto;transform: rotate(1deg);}
  .jongeren-page .hero__photo-frame img {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;}
}

@media (max-width: 560px) {
  .jongeren-page .hero__photo {width: 100%;transform: rotate(0deg);}
  .jongeren-page .hero__photo-frame {padding: .45rem .45rem 2.4rem;}
  .jongeren-page .hero__photo-frame img {aspect-ratio: 5 / 4;}
}

  /* ---------- SIBS ---------- */
  .jongeren-page .sibs{ max-width:1180px; margin:0 auto; }
  .jongeren-page .sibs__board{ position:relative; background:var(--paper); color:var(--text-dark); padding:clamp(1.5rem,4vw,3rem); box-shadow:var(--shadow); transform:rotate(-.45deg); }
  .jongeren-page .sibs__board::before{ content:""; position:absolute; width:78px; height:24px; background:var(--tape); top:-12px; left:10%; transform:rotate(-4deg); }
  .jongeren-page .sibs__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
  .jongeren-page .sibs h2{ font-size:clamp(1.8rem,4vw,2.8rem); line-height:.98; }
  .jongeren-page .sibs__lede{ margin-top:1rem; max-width:58ch; line-height:1.6; font-size: .9rem; }
  .jongeren-page .sibs__p{ margin-top:1rem; max-width:58ch; line-height:1.5; font-size: .8rem; font-weight: 300; }
  .jongeren-page .sibs__note{ margin-top:.7rem; padding-top: .7rem; font-size:.7rem; line-height:1.5; color:rgba(18,22,29,.7); border-top:2px dashed var(--neonpink); }
  .jongeren-page .sibs__idea{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px dashed rgba(18,22,29,.35); line-height:1.55; font-size:.66rem; }
  .jongeren-page .sibs__idea strong{ display:block; font-size:.88rem; margin-bottom:.25rem;  }
  .jongeren-page .sibs .hero__photo-frame {transform: rotate(1.2deg);}
  .jongeren-page .sibs .hero__photo-frame::before { content: ""; position: absolute; width: 55px; height: 18px; background: var(--tape); top: -9px;left: 50%; transform: translateX(-50%) rotate(-3deg);}
  @media (max-width:760px){ .jongeren-page .sibs__grid{ grid-template-columns:1fr; } }

  /* ---------- SECTION INTROS ---------- */
  .jongeren-page .section-intro{ max-width:62ch; margin-bottom: clamp(1.8rem,4vw,2.6rem); }
  .jongeren-page .eyebrow{
    display:inline-block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.6rem; }
  .jongeren-page > section:nth-of-type(odd) .eyebrow{ font-weight: 600; font-style:normal; background: var(--neonpink); color:#fff; padding: 0 .18em; display:inline-block; transform: rotate(-1.2deg); }
  .jongeren-page > section:nth-of-type(even) .eyebrow{ font-weight: 600; font-style:normal; background: var(--neonblue); color:#fff; padding: 0 .18em; display:inline-block; transform: rotate(-1.2deg); }

  .jongeren-page .section-intro h2{ font-size: clamp(1.9rem,4vw,2.7rem); line-height:1.02; color:var(--text-light); }
  .jongeren-page .section-intro p{ margin-top:.9rem; color:var(--text-light); line-height:1.6; }
  .jongeren-page .section-intro.prikbord{ margin-bottom: 0;}

  /* ---------- RECURRING EVENTS (neon signage) ---------- */
  .jongeren-page .recur{ padding-block: clamp(1rem,3vw,1.5rem) clamp(3rem,6vw,4.5rem); }
  .jongeren-page .recur__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  @media (max-width: 980px){ .jongeren-page .recur__grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .jongeren-page .recur__grid{ grid-template-columns: 1fr; } }

  .jongeren-page .recur-card{
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
    border:1px solid var(--line); border-radius:2px; padding:1.5rem;
    display:flex; flex-direction:column; gap:.9rem; height:100%;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); 
  }
  .jongeren-page .recur-card:hover{ border-color: var(--neonblue); box-shadow: 0 0 0 3px var(--neonblue-glow), 0 24px 40px -20px rgba(46,140,255,.35); transform: translateY(-4px); }
  .jongeren-page .recur-card__tag{
    align-self:flex-start; font-size:.68rem; letter-spacing:.08em; 
    color:var(--paper); border:1px solid var(--neonblue); background:var(--neonblue); padding:.25rem .55rem; border-radius:2px; transform: rotate(1.2deg);
  }
  .jongeren-page .recur-card h3{ font-size:1.55rem; line-height:1; color:var(--text-light); }
  .jongeren-page .recur-card__meta{ font-size:.68rem; color: var(--neonblue); letter-spacing:.02em; }
  .jongeren-page .recur-card p{ color:var(--text-light-dim); font-size:.8rem; line-height:1.55; }
  .jongeren-page .recur-card__link{
    margin-top:auto; font-size:.6rem;  letter-spacing:.04em;
    color:var(--text-light); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; border-top:1px dashed var(--line); padding-top:.8rem;
  }
  .jongeren-page .recur-card__link:hover{ color:var(--neongreen); }

  .jongeren-page .recur__more{ margin-top:1.6rem; text-align:center; }
  .jongeren-page .recur__more a{ font-size:.82rem; letter-spacing:.05em; text-decoration:underline; text-underline-offset:3px; font-weight: 600; background: var(--paper); color:var(--ink); padding: 0.8em; display:inline-block; }
  .recur-card:nth-child(1) { transform: rotate(-.6deg); }
  .recur-card:nth-child(2) { transform: rotate(.5deg); }
  .recur-card:nth-child(3) { transform: rotate(-.4deg); }
  .recur-card:nth-child(4) { transform: rotate(.7deg); }

  /* ---------- START HERE ---------- */
  .jongeren-page .start-here{ padding-block: clamp(1rem,3vw,1.5rem) clamp(3rem,6vw,4.5rem); }
  .jongeren-page .start-here__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch;}
  @media (max-width:760px){ .start-here__grid{ grid-template-columns:1fr !important; } }
  .jongeren-page .start-card{
    position:relative; min-height:245px; height: 100%; padding:1.5rem; display:flex; flex-direction:column;
    color:var(--paper); background:var(--neonblue); text-decoration:none; border-radius:4px;
    box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .jongeren-page .start-card:hover{ transform:translateY(-5px) rotate(-.4deg) ; box-shadow:0 28px 50px -18px rgba(0,0,0,.72); }
  .jongeren-page .start-card:hover .start-card__arrow{ text-decoration: underline; }
  .jongeren-page .start-card:nth-child(2){ background:var(--neongreen); transform:rotate(.8deg); color:var(--ink) }
  .jongeren-page .start-card:nth-child(2):hover{transform:translateY(-3px) rotate(-.9deg) ;}
  .jongeren-page .start-card:nth-child(3){ background:var(--neonpink); color:#fff; transform:rotate(-.5deg); }
  .jongeren-page .start-card:nth-child(3):hover{transform:translateY(-7px) rotate(-1.1deg) ;}
  .jongeren-page .start-card:nth-child(4){ background:var(--ink); color:#fff; transform:rotate(-.5deg); }
  .jongeren-page .start-card:nth-child(4):hover{transform:translateY(-2px) rotate(-.6deg) ;}
  .jongeren-page .start-card:nth-child(5){ background:var(--neonblue); color:#fff; transform:rotate(-.5deg); }
  .jongeren-page .start-card:nth-child(5):hover{transform:translateY(-9px) rotate(.3deg) ;}
  .jongeren-page .start-card:nth-child(6){ background:var(--paper); transform:rotate(.8deg); color:var(--ink); }
  .jongeren-page .start-card:nth-child(6):hover{transform:translateY(-6px) rotate(.7deg) ;}
  .jongeren-page .start-card__number{ font-size:.74rem; font-weight:700; letter-spacing:.08em; }
  .jongeren-page .start-card h3{ margin-top:1.2rem; font-size:clamp(1.8rem,3vw,2.35rem); line-height:.98; }
  .jongeren-page .start-card p{ margin-top:.8rem; max-width:27ch; line-height:1.5; font-size:.96rem; }
  .jongeren-page .start-card__arrow{ margin-top:auto;  font-size:.76rem; font-weight:700; letter-spacing:.04em; padding: 1rem 0; }

  /* ---------- FLYERS SECTION (media-activiteiten) ---------- */
  .jongeren-page .flyers{ padding-block: clamp(1rem,3vw,1.5rem) clamp(3rem,6vw,5rem); display:flex; flex-direction:column; gap: clamp(3rem, 5.5vw, 4.5rem); }

  .jongeren-page .flyer{
    position:relative; background:var(--paper); color:var(--text-dark);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: clamp(1.6rem,3.5vw,2.8rem);
    transform: rotate(var(--tilt, -1deg)); transition: transform .4s var(--ease);
    opacity:0; translate: 0 24px;
  }
  .jongeren-page .flyer.is-visible{ animation: pin-in .6s var(--ease) forwards; }
  @keyframes pin-in{
    from{ opacity:0; translate:0 24px; transform: rotate(0deg); }
    to{ opacity:1; translate:0 0; transform: rotate(var(--tilt,-1deg)); }
  }
  .jongeren-page .flyer:hover{ transform: rotate(0deg) translateY(-3px); }
  .jongeren-page .flyer::before{
    content:""; position:absolute; top:-14px; left:38px; width:64px; height:24px;
    background:var(--tape); box-shadow:0 3px 6px rgba(0,0,0,.3); transform:rotate(-4deg);
  }

  .jongeren-page .flyer__layout{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem,3vw,2.6rem); align-items:start; }
  .jongeren-page .flyer:nth-of-type(even) .flyer__layout{ direction:rtl; }
  .jongeren-page .flyer:nth-of-type(even) .flyer__layout > *{ direction:ltr; }
  @media (max-width: 820px){ .flyer__layout{ grid-template-columns:1fr  !important; } .flyer:nth-of-type(even) .flyer__layout{ direction:ltr; } }

  .jongeren-page .flyer__tag{
    display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:#fff; background:var(--accent); padding:.3rem .6rem; border-radius:1px; margin-bottom:1rem;
  }
  .jongeren-page .flyer__title{ font-size: clamp(2rem, 4.2vw, 3rem); line-height:.97; }
  .jongeren-page .flyer__desc{ margin-top:1rem; font-size:1rem; line-height:1.6; color: rgba(18,22,29,.78); max-width:52ch; }

  .jongeren-page .flyer__actions{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
  .jongeren-page .btn{
    letter-spacing:.05em; font-size:.8rem;
    text-decoration:none; padding:.65rem 1.1rem; border-radius:2px; display:inline-flex; align-items:center; gap:.4rem;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .jongeren-page .btn--solid{ background:var(--text-dark); color:var(--paper); }
  .jongeren-page .btn--solid:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--accent); }
  .jongeren-page .btn--ghost{ color:var(--text-dark); border:2px solid rgba(18,22,29,.35); }
  .jongeren-page .btn--ghost:hover{ border-color:var(--text-dark); transform: translateY(-2px); }
  .jongeren-page .btn--link{ color:var(--text-dark); text-decoration:underline; text-underline-offset:3px; padding:.65rem 0; }

  .jongeren-page .flyer__media{ position:relative; }
  .jongeren-page .duotone{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio: 4/3; box-shadow: inset 0 0 0 6px var(--paper); }
  .jongeren-page .duotone img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15); }
  .jongeren-page .duotone::after{ content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:multiply; opacity:.68; }
  .jongeren-page .duotone::before{
    content:""; position:absolute; inset:0; z-index:2; mix-blend-mode:overlay; opacity:.5;
    background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.3px); background-size:5px 5px;
  }

  .jongeren-page .tabs{ margin-top:1.6rem; display:flex; gap:0; flex-wrap:wrap; border-top:1px dashed rgba(18,22,29,.35); padding-top:0; }
  .jongeren-page .tab{
    flex:1 1 64px; min-width:52px; text-align:center; text-decoration:none; color:var(--text-dark);
    font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
    padding: .8rem .3rem; border-right:1px dashed rgba(18,22,29,.35);
    writing-mode: vertical-rl; transform:rotate(180deg);
    transition: background .2s, transform .2s; background: var(--paper);
  }
  .jongeren-page .tab:last-child{ border-right:none; }
  .jongeren-page .tab:hover{ background: var(--accent); color:#fff; }
  .jongeren-page .tabs__note{ writing-mode: horizontal-tb; transform:none; flex:1 1 100%; text-align:left; padding-top:.6rem; font-size:.68rem; color: rgba(18,22,29,.55); border-right:none; }
  @media (max-width: 800px) {.jongeren-page .tab:nth-of-type(n+4) {display: none !important; }
}

  .jongeren-page .accent-magenta{ --accent: var(--magenta); }
  .jongeren-page .accent-yellow{ --accent: var(--yellow); }
  .jongeren-page .accent-teal{ --accent: var(--teal); }
  .jongeren-page .accent-orange{ --accent: var(--orange); }

  /* ---------- CTA ---------- */
  .jongeren-page .cta{ padding-top: 0; padding-bottom: clamp(3rem,7vw,5.5rem); }
  .jongeren-page .cta__card{
    background:var(--paper); color:var(--text-dark); border-radius:var(--radius); box-shadow:var(--shadow);
    padding: clamp(2rem,5vw,3.5rem); text-align:center; transform:rotate(-.6deg); position:relative;
  }
  .jongeren-page .cta__card::before{
    content:""; position:absolute; top:-14px; left:calc(50% - 32px); width:64px; height:24px;
    background:var(--tape); box-shadow:0 3px 6px rgba(0,0,0,.3); transform:rotate(2deg);
  }
  .jongeren-page .cta h2{ margin-top:.8rem; font-size:clamp(2rem,5vw,3.2rem); line-height:1.02; max-width:28ch; margin-inline:auto; }
  .jongeren-page .cta p.cta__sub{ margin-top:.9rem; color:rgba(18,22,29,.7); max-width:48ch; margin-inline:auto; line-height:1.55; }
  .jongeren-page .cta__actions{ margin-top:1.8rem; display:flex; justify-content:center; }
  .jongeren-page .cta__btn{
    letter-spacing:.06em; font-size:.95rem;
    background:var(--neonblue); color:#fff; text-decoration:none; padding:1rem 2rem; border-radius:2px;
    box-shadow: 0 8px 0 0 var(--text-dark); transition: transform .15s, box-shadow .15s;
  }
  .jongeren-page .cta__btn:hover{ transform: translateY(4px); box-shadow: 0 4px 0 0 var(--text-dark); }
  .jongerenpage .cta::after{content: ""; display: block; position: absolute; left: auto; right: 0; transform: scale(-1); height: 100%; width: 25%;
    background-image: url(../img/dist.png); background-repeat: no-repeat; }

  @media (prefers-reduced-motion: reduce){
    .jongeren-page .flyer{ opacity:1; translate:0 0; animation:none !important; }
    html{ scroll-behavior:auto; }
  }

  .invisible{ display: none;}

.jongeren-page,
.jongeren-page * {
    font-family: "Diagramm", sans-serif;
}