/*
Theme Name: Wim van Gastel
Description: Portfoliosite voor kunstschilder Wim van Gastel, met galerij waar eigen foto's van werk in geplaatst kunnen worden en aanmelding voor de lessen in de Kunstkamer.
Author: Wim van Gastel
Version: 1.0
Text Domain: wvg
*/
:root{--paper:#eceef0;--ink:#14161a;--blue:#2340d8;--pink:#e0357a;--yellow:#f2c230;--teal:#1fa59a;--muted:#555b66;--line:#c9cdd3;--head:"Bricolage Grotesque",system-ui,sans-serif;--body:"Source Serif 4",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.7 var(--body)}
img{max-width:100%;height:auto;display:block}a{color:var(--blue)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
h1,h2,h3{font-family:var(--head);line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(3rem,10vw,8rem);font-weight:800}h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700}h3{font-size:1.3rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.sec{padding:5rem 0}
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{font:800 1.2rem var(--head);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.6rem}
.logo i{width:22px;height:22px;display:grid;grid-template:1fr 1fr/1fr 1fr}
.logo i b:nth-child(1){background:var(--blue)}.logo i b:nth-child(2){background:var(--pink)}.logo i b:nth-child(3){background:var(--yellow)}.logo i b:nth-child(4){background:var(--teal)}
.nav ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0}
.nav a{font:600 1rem var(--head);color:var(--ink);text-decoration:none;padding:.3rem 0;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--pink)}
.nav-toggle{display:none;font:600 1rem var(--head);background:none;border:2px solid var(--ink);padding:.4rem .8rem;cursor:pointer}
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--ink)}
#pixels{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;padding-top:7rem;padding-bottom:5rem;pointer-events:none}
.hero h1{background:var(--paper);display:inline;padding:.05em .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p{background:var(--paper);display:inline-block;max-width:34rem;padding:.6rem .9rem;margin:1.6rem 0 0;font-size:1.25rem}
.hero .acties{pointer-events:auto;margin-top:1.4rem}
.knop{display:inline-block;font:700 1.05rem var(--head);background:var(--ink);color:#fff;border:2px solid var(--ink);padding:.8rem 1.5rem;text-decoration:none;cursor:pointer;margin-right:.6rem}
.knop:hover{background:var(--pink);border-color:var(--pink)}.knop.licht{background:var(--paper);color:var(--ink)}.knop.licht:hover{background:var(--yellow);border-color:var(--ink)}
.over{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.over p{max-width:36rem}
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tegel{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--line);border:2px solid var(--ink)}
.tegel img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tegel:hover img{transform:scale(1.04)}
.tegel .bijschrift{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;background:var(--paper);border-top:2px solid var(--ink);font:600 .95rem/1.3 var(--head)}
.tegel .bijschrift small{display:block;font:400 .85rem var(--body);color:var(--muted)}
.tegel .verkocht{position:absolute;top:.6rem;right:.6rem;background:var(--yellow);border:2px solid var(--ink);padding:.1rem .5rem;font:700 .8rem var(--head)}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.filter a{font:600 .95rem var(--head);text-decoration:none;color:var(--ink);border:2px solid var(--ink);padding:.3rem .9rem}
.filter a.actief,.filter a:hover{background:var(--ink);color:#fff}
.leeg{border:2px dashed var(--muted);padding:2rem;color:var(--muted)}
.lessen{background:var(--ink);color:#fff;border-top:2px solid var(--ink)}
.lessen a{color:var(--yellow)}
.lessen .rooster{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.feiten{list-style:none;padding:0;margin:1.5rem 0 0}
.feiten li{padding:.7rem 0;border-top:1px solid #444}.feiten strong{font-family:var(--head);display:block;color:var(--yellow);font-size:.95rem}
form.aanmelden{background:var(--paper);color:var(--ink);padding:1.8rem;border:2px solid var(--yellow)}
form label{display:block;font:600 .95rem var(--head);margin:0 0 1rem}
form input,form select,form textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem;font:1rem var(--body);border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
form .hp{position:absolute;left:-9999px}
.melding{padding:1rem 1.2rem;margin-bottom:1.2rem;font:600 1rem var(--head);border:2px solid var(--ink)}
.melding.ok{background:var(--teal);color:#fff}.melding.fout{background:var(--pink);color:#fff}
.contact{display:flex;flex-wrap:wrap;gap:3rem}
.site-foot{border-top:2px solid var(--ink);padding:2rem 0;font-size:.95rem;color:var(--muted)}
.inhoud{max-width:44rem;padding:4rem 0}.inhoud img{margin:1.5rem 0}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,16,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:1rem}
.lb.open{display:flex}.lb img{max-height:80vh;object-fit:contain}
.lb p{color:#fff;font:600 1rem var(--head);margin:.8rem 0 0;text-align:center}
.lb button{position:absolute;top:1rem;right:1rem;font:700 1.1rem var(--head);background:var(--paper);border:0;padding:.5rem 1rem;cursor:pointer}
.lb .vorige,.lb .volgende{top:50%;right:auto}.lb .vorige{left:1rem}.lb .volgende{right:1rem}
.expo{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.expo li{display:grid;grid-template-columns:13rem 1fr;gap:2rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.expo-datum{font:700 1.15rem var(--head)}.expo-datum small{display:block;font:400 .95rem var(--body);color:var(--muted)}
.expo-foto{max-width:30rem;margin:.6rem 0 1rem}.expo-foto img{width:100%;border:2px solid var(--ink)}
.expo h3{margin:0 0 .2rem}.expo .plek{margin:0 0 .6rem;color:var(--muted)}.expo p{margin:0 0 .6rem;max-width:40rem}
@media(max-width:800px){.expo li{grid-template-columns:1fr;gap:.4rem}}
@media(max-width:800px){.over,.lessen .rooster{grid-template-columns:1fr;gap:2rem}.sec{padding:3.5rem 0}
.nav-toggle{display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav.open{display:block}.nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem}.nav li a{display:block;padding:.7rem 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}