/* HerpenOnline.nl - modern responsive stylesheet (same look, new foundation) */

@font-face {
  font-family: "herpenonline";
  src: url("fonts/herpenonline.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* ---------- icon font ---------- */
[class^="icon-"], [class*=" icon-"] {
  font-family: "herpenonline" !important;
  font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1; speak: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-fax:before { content: "\e91e"; }
.icon-rolodex:before { content: "\e916"; }
.icon-factory:before { content: "\e911"; }
.icon-joker-mask:before { content: "\e912"; }
.icon-bowling-pin-ball:before { content: "\e914"; }
.icon-soccer-court:before { content: "\e913"; }
.icon-envelope:before { content: "\e90f"; }
.icon-home:before { content: "\e909"; }
.icon-office:before { content: "\e915"; }
.icon-newspaper:before { content: "\e90a"; }
.icon-phone:before { content: "\e90b"; }
.icon-location:before { content: "\e91f"; }
.icon-menu:before { content: "\e90e"; }
.icon-earth:before { content: "\e919"; }
.icon-link:before { content: "\e91a"; }
.icon-arrow-right:before { content: "\e910"; }
.icon-arrow-left:before { content: "\e91b"; }
.icon-mail:before { content: "\e90c"; }
.icon-facebook:before { content: "\e91c"; }
.icon-facebook2:before { content: "\e90d"; }
.icon-twitter:before { content: "\e91d"; }
.icon-herpen-online-logo .path1:before { content: "\e903"; color: #7451ba; }
.icon-herpen-online-logo .path2:before { content: "\e904"; margin-left: -2.06640625em; color: #9974d6; }
.icon-herpen-online-logo .path3:before { content: "\e905"; margin-left: -2.06640625em; color: #fff; }


/* ---------- Glas: de nieuwe look ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.glas{margin:0;overflow-x:clip;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;background:#1b0b3a}
body.glas::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgb(20 8 50/.15),rgb(20 8 50/.45)),#2b1a52 url(img/bg.jpg) center/cover no-repeat}
.glas img{max-width:100%;height:auto}
.glas a{color:inherit;text-decoration:none}
.glas :focus-visible{outline:3px solid #fff;outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#4a2c8a;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.in{max-width:1200px;margin:0 auto;padding:0 20px}
.glass{background:rgb(52 28 100/.5);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgb(255 255 255/.25);border-radius:28px;box-shadow:0 20px 50px rgb(20 5 50/.3)}

/* menubalk */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem clamp(16px,3vw,48px);border-radius:0;border-width:0 0 1px 0;box-shadow:none}
.top .logo{display:block;line-height:0}.top .logo img{display:block;height:44px;width:auto}
.top nav{display:flex;gap:.25rem;flex-wrap:wrap}
.top nav a{padding:.55rem 1rem;border-radius:999px;font-weight:600;font-size:.95rem;transition:background .2s}
.top nav a:hover{background:rgb(255 255 255/.2)}
.top nav a[aria-current]{background:rgb(255 255 255/.28)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:rgb(255 255 255/.16);cursor:pointer;padding:0;place-content:center;gap:5px}
.burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* zoekbalk */
.search{display:flex;margin-top:1.4rem;max-width:560px;background:rgb(255 255 255/.92);border-radius:999px;padding:.4rem;box-shadow:0 10px 30px rgb(20 5 50/.3)}
.search input{flex:1;border:0;font:inherit;font-size:1.05rem;padding:.7rem 1.1rem;color:#1f1238;min-width:0;background:transparent;outline:0}
.search button{border:0;background:#6341a4;color:#fff;font:inherit;font-weight:700;padding:.7rem 1.5rem;border-radius:999px;cursor:pointer}
.zoek .search{margin-top:0;margin-bottom:1.2rem}

/* startpagina */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:end;padding:clamp(3rem,10vh,7rem) 0 1.5rem}
.intro{padding:clamp(1.5rem,4vw,3rem);min-width:0}
.intro h1{font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.05;letter-spacing:-.02em;font-weight:750;max-width:18ch;margin:0}
.intro p{margin:1rem 0 0;font-size:1.15rem;max-width:42ch;color:#efe8ff}
.next{padding:1.2rem;display:grid;gap:.8rem;min-width:0}
.next h2{font-size:1.15rem;font-weight:650;padding:.2rem .4rem;margin:0}
.ev{display:grid;grid-template-columns:62px 1fr;gap:.9rem;align-items:center;padding:.6rem;border-radius:18px;background:rgb(255 255 255/.1)}
a.ev:hover{background:rgb(255 255 255/.2)}
.ev img{width:62px;height:62px;border-radius:14px;object-fit:cover}
.ev b{display:block;font-size:.95rem}.ev span{font-size:.85rem;color:#e3d7fb}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding-bottom:2rem}
.tile{border-radius:22px;padding:1.2rem .6rem 1rem;text-align:center;transition:transform .2s,background .2s}
.tile:hover{transform:translateY(-4px);background:rgb(255 255 255/.28)}
.tile i{display:block;font-size:2.4rem;margin-bottom:.5rem}
.tile b{font-size:.98rem}
.tilewrap{display:none}
.sec{background:linear-gradient(#2b1a52,#4b2f8a);padding:3.5rem 0 4rem}
.sec h2.t{font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 1.5rem;letter-spacing:-.01em}
.sec .news-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.more{margin:2rem 0 0}.pill{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;font-weight:700}
.pill:hover{background:rgb(255 255 255/.28)}
.gtext{margin-top:2.5rem;padding:1.6rem 1.8rem;border-radius:24px}

/* nieuwskaarten */
.news-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.gart>.news-list{padding:0 1.4rem 1.6rem}
.gcard{position:relative;display:block;height:100%;border-radius:24px;overflow:hidden;background:rgb(255 255 255/.1);border:1px solid rgb(255 255 255/.18);transition:transform .25s,background .2s}
.gcard:hover{transform:translateY(-4px);background:rgb(255 255 255/.16)}
.gcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gcard.no-img{padding-top:5.5rem;background:linear-gradient(135deg,rgb(116 81 186/.55),rgb(43 26 82/.6))}
.gcard h2{margin:0;padding:1.1rem 1.2rem 1.3rem;font-size:1.1rem;line-height:1.3;font-weight:650}
.date-tile{display:grid;grid-template-columns:auto;background:#fff;color:#4a2c8a;border-radius:14px;text-align:center;padding:.4rem .2rem;line-height:1;width:58px;box-shadow:0 6px 16px rgb(20 5 50/.35)}
.date-tile .day{font-weight:800;font-size:1.4rem}
.date-tile .month{font-size:.72rem;font-weight:700;color:#7451ba;margin-top:.2rem}
.date-tile .year{display:none}
.gcard .date-tile{position:absolute;left:14px;top:14px}

/* gewone pagina's */
.gpage{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;padding:2rem 0 3rem}
.top-banner{display:flex;justify-content:center;padding-top:1.2rem}
.top-banner img{border-radius:12px;max-width:100%;height:auto}
.gart{background:rgb(40 20 82/.72);overflow:hidden}
.kop{padding:1.6rem 1.8rem 0}
.kop h1{margin:0;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:750}
.kop h1 i{margin-right:.4rem;font-size:.8em;color:#d8c9f7}
.kop h1.small{font-size:clamp(1.5rem,3vw,2.2rem)}
.kop .hero{display:block;padding:0;margin:1.2rem 0 0}
.kop .hero:empty{display:none}
.kop .hero img{display:block;width:100%;border-radius:20px;max-height:420px;object-fit:cover}
.text{padding:1.2rem 1.8rem 1.6rem;color:#f3edff}
.text>:first-child{margin-top:0}
.text p,.contain p{margin:0 0 1rem}
.text h2,.text h3,.contain h2,.contain h3{line-height:1.25;color:#fff}
.text a,.contain a{color:#d9c8ff;text-decoration:underline;text-underline-offset:2px}
.text img,.contain img{border-radius:14px;margin-block:.5rem}
.text table,.contain table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse}
.text td,.contain td{padding:.25rem .6rem;vertical-align:top}
.text ul,.text ol,.contain ul,.contain ol{padding-left:1.4rem}
.text::after,.contain::after{content:"";display:table;clear:both}
.text iframe,.contain iframe{width:100%;height:300px;border:0;border-radius:14px}
.years{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:1rem 1.8rem 1.6rem}
.years a{display:block;padding:.55rem 1.1rem;border-radius:999px;background:rgb(255 255 255/.14);font-weight:600}
.years a:hover,.years a[aria-current]{background:#fff;color:#4a2c8a}
.years i{margin-right:.3em}
.news-detail{display:flex;gap:1.2rem;padding:1.4rem 1.8rem 1.8rem}
.news-detail .side{flex:0 0 58px;display:flex;flex-direction:column;gap:1rem}
.news-detail .contain{flex:1;min-width:0;color:#f3edff}
.news-detail .article-img{float:right;margin:0 0 1rem 1rem;max-width:min(50%,360px);border-radius:16px}
.back-btn{display:grid;place-items:center;width:58px;height:44px;border-radius:14px;background:rgb(255 255 255/.16);font-size:1.4rem}
.back-btn:hover{background:#fff;color:#4a2c8a}
.organisatie{list-style:none;margin:0;padding:.6rem 1.4rem 1.6rem;display:grid;gap:.6rem}
.organisatie a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-radius:18px;background:rgb(255 255 255/.1);font-weight:650;border:1px solid rgb(255 255 255/.14)}
.organisatie a:hover{background:rgb(255 255 255/.22)}
.organisatie i{flex:none}
.org{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.org .naw-col{padding:0 1.8rem 1.4rem}
.org .text{padding-bottom:.4rem}
.org .logo-img{max-width:260px;margin:0 0 1rem;background:#fff;border-radius:14px;padding:.6rem}
.naw{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.naw a,.naw .addr{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem 1rem;border-radius:16px;background:rgb(255 255 255/.1);font-weight:600;overflow-wrap:anywhere}
.naw a:hover{background:rgb(255 255 255/.22)}
.naw i{flex:none;font-size:1.15rem;width:1.3rem}
@media(min-width:900px){.org{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.org .naw-col{padding:1.2rem 1.8rem 1.4rem 0}}

/* agenda-zijbalk */
.aside{background:rgb(52 28 100/.5);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgb(255 255 255/.25);border-radius:28px;padding:1.2rem;box-shadow:0 20px 50px rgb(20 5 50/.3)}
.aside h2{margin:0 0 .8rem;font-size:1.15rem;padding:0 .3rem}
.aside .banner-mid{display:block;max-width:300px;margin:0 auto 1.2rem}
.aside .banner-mid img{width:100%;border-radius:16px;aspect-ratio:3/2;object-fit:contain;background:#fff}
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.agenda-item{display:grid;grid-template-columns:1fr auto;column-gap:.75rem;align-items:start;padding:.8rem .9rem;border-radius:18px;background:rgb(255 255 255/.1)}
a.agenda-item:hover{background:rgb(255 255 255/.2)}
.agenda-when{grid-column:1/-1;display:flex;justify-content:space-between;gap:.5rem;font-weight:700;font-size:.85rem;color:#e3d7fb}
.agenda img{grid-column:2;grid-row:2/span 2;width:64px;height:64px;object-fit:cover;border-radius:12px;margin-top:.4rem}
.agenda h3{grid-column:1;margin:.4rem 0 0;font-size:1rem;overflow-wrap:anywhere}
.agenda p{grid-column:1;margin:.25rem 0 0;font-size:.88rem;color:#e3d7fb}
.agenda-item:not(:has(img)) h3,.agenda-item:not(:has(img)) p{grid-column:1/-1}

/* voet */
.foot{background:#16092e;padding:1.4rem 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;font-size:.95rem}
.foot a{display:block;padding:.4rem .2rem}.foot a:hover{text-decoration:underline}
.foot i{margin-right:.4rem}

@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.tiles{grid-template-columns:repeat(3,1fr)}.gpage{grid-template-columns:minmax(0,1fr)}.top nav a{padding:.5rem .6rem;font-size:.85rem}}
@media(max-width:700px){
.top{flex-wrap:wrap}.top .logo img{height:34px}.burger{display:grid}
.top nav{display:none;width:100%;flex-direction:column;padding:.4rem 0 .6rem;gap:0}.top.open nav{display:flex}
.top nav a{padding:.8rem .4rem;border-radius:12px;font-size:1rem}
.intro h1,.intro p{display:none}.intro{padding:1rem}.intro .search{margin-top:0;max-width:none}
.hero{padding:1.2rem 0 1.8rem}.tiles-d{display:none}.tilewrap{display:block;margin-top:2.5rem}.tiles{padding-bottom:0}
.news-detail{flex-direction:column}.news-detail .side{flex-direction:row;align-items:center}
.kop,.text,.years,.news-detail{padding-left:1.1rem;padding-right:1.1rem}
.org .naw-col{padding-left:1.1rem;padding-right:1.1rem}
}
@media(max-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}.sec .news-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* nieuwsbericht: grote afbeelding met de titel erop */
.ndhero{position:relative;background:#2b1a52}
.ndhero img{display:block;width:100%;aspect-ratio:21/9;max-height:560px;object-fit:cover}
.ndhero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgb(20 8 50/.88));pointer-events:none}
.ndhero h1{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;padding:1.4rem 1.8rem 1.5rem;font-size:clamp(1.7rem,4vw,3rem);line-height:1.08;letter-spacing:-.02em;font-weight:780;text-shadow:0 2px 18px rgb(20 5 50/.55);overflow-wrap:anywhere}
.ndhero+.news-detail{padding-top:1.6rem}
@media(max-width:700px){.ndhero img{aspect-ratio:4/3}.ndhero h1{padding:1rem 1.1rem 1.1rem}}

.aside-g .banner-mid{display:block;max-width:300px;margin:0 auto 1rem}
.aside-g .banner-mid img{width:100%;border-radius:18px;aspect-ratio:3/2;object-fit:contain;background:#fff}

/* uitklapmenu */
.top nav .dd{position:relative;display:flex;align-items:center}
.top nav .dd>a{padding-right:.2rem}
.ddt{width:30px;height:36px;border:0;border-radius:10px;background:none;color:#fff;cursor:pointer;padding:0;margin-left:-.1rem}
.ddt::after{content:"";display:block;margin:0 auto;width:7px;height:7px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px)}
.ddt:hover{background:rgb(255 255 255/.2)}
.top nav .sub{display:none;position:absolute;top:100%;left:0;min-width:250px;max-height:70vh;overflow:auto;padding:.5rem;border-radius:18px;background:rgb(43 22 86/.97);border:1px solid rgb(255 255 255/.25);box-shadow:0 20px 50px rgb(20 5 50/.45);z-index:30}
.top nav .dd:nth-last-child(-n+2) .sub{left:auto;right:0}
.top nav .dd.open .sub{display:block}
@media(hover:hover){.top nav .dd:hover .sub{display:block}}
.top nav .sub a{display:block;padding:.6rem .9rem;border-radius:12px;font-weight:600;font-size:.95rem}
.top nav .sub a:hover{background:rgb(255 255 255/.18)}
/* tablet en telefoon: knop voor het menu, niets te breed */
@media(max-width:900px){
.top{flex-wrap:wrap}.burger{display:grid}
.top nav{display:none;width:100%;flex-direction:column;padding:.4rem 0 .6rem;gap:0}.top.open nav{display:flex}
.top nav a{padding:.8rem .4rem;border-radius:12px;font-size:1rem}
.top nav .dd{flex-wrap:wrap}.top nav .dd>a{flex:1}
.ddt{width:48px;height:44px}
.top nav .sub,.top nav .dd:nth-last-child(-n+2) .sub{position:static;width:100%;min-width:0;max-height:none;margin:0 0 .4rem;box-shadow:none;background:rgb(255 255 255/.08);border:0;border-radius:14px}
}
.top{position:relative;z-index:40}

/* voet onderaan, ook als de pagina kort is */
body.glas{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.glas>.top{flex:none}
body.glas>.in,body.glas>main{flex:1 0 auto;width:100%}
body.glas>.foot{flex:none;margin-top:auto}

/* Menu als glazen bubbels (desktop); pijltje bij uitklapbare items */
@media(min-width:901px){
.top nav{gap:.45rem}
.top nav>a,.top nav .dd{background:rgb(255 255 255/.14);border:1px solid rgb(255 255 255/.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.top nav>a:hover,.top nav .dd:hover,.top nav .dd.open{background:rgb(255 255 255/.32);border-color:rgb(255 255 255/.6);box-shadow:0 6px 18px rgb(20 5 50/.3);transform:translateY(-1px)}
.top nav>a[aria-current],.top nav .dd:has(>a[aria-current]){background:rgb(255 255 255/.26);border-color:rgb(255 255 255/.5)}
.top nav .dd>a,.top nav .dd>a:hover,.top nav .dd>a[aria-current]{background:none}
.ddt:hover{background:none}
.ddt::after{transition:transform .2s}
.top nav .dd:hover .ddt::after,.top nav .dd.open .ddt::after{transform:rotate(-135deg) translateY(-2px)}
}

.ev-none{margin:.2rem 0;opacity:.8}