/* Het helpcentrum in groepen (Oscar, 16 okt 2026), naar het voorbeeld van
   Klussendirect: per groep een rij met een kaart met sfeerbeeld en een kaart
   met tekening per onderwerp, en de groep op volledig scherm. */
.grm-hub *{box-sizing:border-box}
.grm-hub [hidden]{display:none!important}
.grm-hub__rijen{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:4px max(20px,calc(50vw - 620px)) 8px}
.grm-hub__rij{margin:0 0 40px}
.grm-hub .grm-help__contact{margin-left:calc(50% - 50vw + max(20px,calc(50vw - 620px)))!important;margin-right:calc(50% - 50vw + max(20px,calc(50vw - 620px)))!important}
.grm-hub__rijkop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
.grm-hub .grm-hub__rijkop h2{margin:0 0 4px;padding:0;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(21px,2.4vw,27px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--grm-ink,#041E42)}
.grm-hub .grm-hub__rijkop p{margin:0;padding:0;font-size:14.5px;line-height:1.5;color:var(--grm-ink-500,#55636E)}
.grm-hub__rijacties{display:flex;align-items:center;gap:8px;flex:none}
.grm-hub .grm-hub__pijl{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:0;border:1.5px solid var(--grm-line,#D7DEE7);border-radius:50%;background:#fff;color:var(--grm-ink,#041E42);cursor:pointer}
.grm-hub .grm-hub__pijl:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-accent,#1668C7)}
.grm-hub .grm-hub__pijl .material-symbols-rounded{font-size:22px}
.grm-hub a.grm-hub__alles{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:var(--grm-accent,#1668C7);color:#fff!important;font-size:13.5px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.grm-hub a.grm-hub__alles:hover{background:var(--grm-brand,#103A63)}
.grm-hub a.grm-hub__alles .material-symbols-rounded{font-size:17px}
.grm-hub__baan{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:2px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.grm-hub__baan::-webkit-scrollbar{display:none}
.grm-hub a.grm-hub__kaart{position:relative;flex:0 0 250px;height:300px;border-radius:18px;overflow:hidden;scroll-snap-align:start;display:block;color:#fff!important;text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease}
.grm-hub a.grm-hub__kaart:hover{transform:translateY(-3px)}
.grm-hub a.grm-hub__kaart--groep{flex-basis:320px;background:var(--grm-hub-foto,linear-gradient(150deg,#1668C7 0%,#103A63 70%)) center/cover no-repeat,#103A63}
.grm-hub a.grm-hub__kaart--groep::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,66,.05) 20%,rgba(4,30,66,.88) 100%);pointer-events:none}
.grm-hub__kaarttx{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:18px}
.grm-hub__oog{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--grm-cta,#E8833A);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff}
.grm-hub__kaarttx strong{font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#fff}
.grm-hub__kaarttx em,.grm-hub__tegeltx em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:13px;font-weight:700}
.grm-hub__kaarttx em .material-symbols-rounded,.grm-hub__tegeltx em .material-symbols-rounded{font-size:17px}
.grm-hub a.grm-hub__tegel{display:flex;flex-direction:column;background:#fff;color:var(--grm-ink,#041E42)!important;border:1px solid #E3E9F1;box-shadow:0 1px 2px rgba(4,30,66,.04)}
.grm-hub a.grm-hub__tegel:hover{border-color:#C5D3E6;box-shadow:0 16px 30px -20px rgba(4,30,66,.45)}
.grm-hub__art{display:block;flex:0 0 150px;height:150px;padding:10px 10px 0;background:#EDF2F8}
.grm-hub__tegel--lucht .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--lucht{background:#E6F2FC}
.grm-hub__tegel--oranje .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--oranje{background:#FDF0E4}
.grm-hub__tegel--groen .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--groen{background:#E7F6EE}
.grm-hub__tegel--geel .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--geel{background:#FDF6E1}
.grm-hub__tegel--roze .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--roze{background:#FCEBF1}
.grm-hub__tegel--blauw .grm-hub__art,.grm-hub__blokart.grm-hub__tegel--blauw{background:#EDF2F8}
.grm-hub__art svg{display:block;width:100%;height:100%;transition:transform .3s ease}
.grm-hub a.grm-hub__tegel:hover .grm-hub__art svg{transform:scale(1.04)}
.grm-hub__tegeltx{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;padding:14px 16px 16px}
.grm-hub__tegeltx strong{font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:16.5px;font-weight:800;line-height:1.25;color:var(--grm-ink,#041E42)}
.grm-hub__tegelsub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.45;color:var(--grm-ink-500,#55636E)}
.grm-hub__tegeltx em{margin-top:auto;color:var(--grm-accent,#1668C7)}
.grm-hub__zoek{max-width:900px;margin:0 auto;padding:0 20px 20px}

html.grm-hub-open,html.grm-hub-open body{overflow:hidden!important}
.grm-hub__vol{position:fixed;inset:0;z-index:100050;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#fff;color:var(--grm-ink,#041E42)}
.grm-hub__voltop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:58px;padding:0 max(20px,calc((100% - 1000px) / 2 + 20px));background:#fff;border-bottom:1px solid #E3E9F1}
.grm-hub__vol a.grm-hub__terug{display:inline-flex;align-items:center;gap:6px;padding:8px 13px 8px 9px;border-radius:10px;background:#EDF2F8;color:var(--grm-ink,#041E42)!important;font-size:14px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.grm-hub__vol a.grm-hub__terug:hover{background:#DCE6F2}
.grm-hub__vol a.grm-hub__terug .material-symbols-rounded{font-size:19px}
.grm-hub__volkop{flex:1;min-width:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-hub__volhero{position:relative;display:flex;align-items:flex-end;min-height:clamp(220px,34vh,340px);background:var(--grm-hub-foto,linear-gradient(150deg,#1668C7 0%,#103A63 70%)) center/cover no-repeat,#103A63}
.grm-hub__volhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,66,.12) 15%,rgba(4,30,66,.84) 100%)}
.grm-hub__volherotx{position:relative;z-index:2;width:100%;max-width:1000px;margin:0 auto;padding:24px 20px}
.grm-hub__volherotx span{display:inline-block;margin:0 0 8px;padding:4px 11px;border-radius:999px;background:var(--grm-cta,#E8833A);font-size:12px;font-weight:700;color:#fff}
.grm-hub__vol .grm-hub__volherotx h1,.grm-hub__vol .grm-hub__volherotx h2{margin:0 0 6px;padding:0;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(28px,4.2vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff}
.grm-hub__vol .grm-hub__volherotx p{margin:0;max-width:640px;font-size:15.5px;line-height:1.5;color:#fff;opacity:.92}
.grm-hub__volnav{position:sticky;top:58px;z-index:4;display:flex;gap:8px;overflow-x:auto;padding:12px max(20px,calc((100% - 1000px) / 2 + 20px));background:#fff;border-bottom:1px solid #EEF2F7;scrollbar-width:none}
.grm-hub__volnav::-webkit-scrollbar{display:none}
.grm-hub__vol .grm-hub__volnav a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 11px;border:1.5px solid #DCE6F2;border-radius:999px;background:#F5F8FC;color:var(--grm-ink,#041E42)!important;font-size:13.5px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.grm-hub__vol .grm-hub__volnav a .material-symbols-rounded{font-size:18px;color:var(--grm-accent,#1668C7)}
.grm-hub__vol .grm-hub__volnav a:hover,.grm-hub__vol .grm-hub__volnav a.is-aan{border-color:var(--grm-accent,#1668C7);color:var(--grm-accent,#1668C7)!important;background:#EAF2FC}
.grm-hub__volin{max-width:1000px;margin:0 auto;padding:12px 20px 70px}
.grm-hub__blok{margin:0 -18px 10px;padding:26px 18px 18px;border-radius:20px;scroll-margin-top:118px}
.grm-hub__blok.is-licht{animation:grm-hub-licht 2.4s ease}
@keyframes grm-hub-licht{0%{background:#DCE8F7;box-shadow:0 0 0 2px var(--grm-accent,#1668C7)}55%{background:#EEF4FB;box-shadow:0 0 0 2px rgba(22,104,199,.35)}100%{background:rgba(238,244,251,0);box-shadow:0 0 0 2px rgba(22,104,199,0)}}
@media (prefers-reduced-motion:reduce){.grm-hub__blok.is-licht{animation:none;background:#EEF4FB;box-shadow:0 0 0 2px var(--grm-accent,#1668C7)}}
.grm-hub__blokkop{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.grm-hub__blokart{flex:0 0 auto;width:96px;height:64px;padding:4px;border-radius:12px;background:#EDF2F8}
.grm-hub__blokart svg{display:block;width:100%;height:100%}
.grm-hub__vol .grm-hub__blokkop h3{margin:0 0 4px;padding:0;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.25;color:var(--grm-ink,#041E42)}
.grm-hub__vol .grm-hub__blokkop p{margin:0;font-size:14.5px;line-height:1.5;color:var(--grm-ink-500,#55636E)}
.grm-hub__lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.grm-hub__lijst>li{margin:0;padding:0;list-style:none}
.grm-hub__lijst>li:has(details[open]){grid-column:1/-1}
.grm-hub__vraag{height:100%}
.grm-hub__vraag>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:14px 16px;border:1.5px solid #DCE6F2;border-radius:14px;background:#F5F8FC;cursor:pointer;list-style:none;font-size:15px;font-weight:600;line-height:1.4;color:var(--grm-ink,#041E42)}
.grm-hub__vraag>summary::-webkit-details-marker{display:none}
.grm-hub__vraag>summary:hover{border-color:var(--grm-accent,#1668C7);background:#EAF2FC}
.grm-hub__chev{flex:none;font-size:22px;color:var(--grm-accent,#1668C7);transition:transform .2s ease}
.grm-hub__vraag[open]>summary{height:auto;border-color:var(--grm-accent,#1668C7);background:#EAF2FC;border-radius:14px 14px 0 0}
.grm-hub__vraag[open] .grm-hub__chev{transform:rotate(180deg)}
.grm-hub__antw{padding:16px 18px 18px;border:1.5px solid var(--grm-accent,#1668C7);border-top:0;border-radius:0 0 14px 14px;background:#fff;font-size:15px;line-height:1.65;color:#25324A}
.grm-hub__antw a{color:var(--grm-accent,#1668C7);font-weight:600;text-decoration:underline}
.grm-hub__volvoet{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:26px 0 0;padding:18px 20px;border-radius:16px;background:#F5F8FC}
.grm-hub__volvoet>.material-symbols-rounded{font-size:30px;color:var(--grm-accent,#1668C7)}
.grm-hub__volvoet p{flex:1 1 260px;margin:0;font-size:14.5px;line-height:1.5;color:var(--grm-ink-500,#55636E)}
.grm-hub__volvoet p strong{color:var(--grm-ink,#041E42)}
.grm-hub__volvoet a{color:var(--grm-accent,#1668C7);font-weight:700}
.grm-hub__vol a.grm-hub__terugknop{display:inline-flex;align-items:center;padding:10px 16px;border-radius:10px;background:var(--grm-accent,#1668C7);color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important}
html.wp-toolbar body.admin-bar .grm-hub__vol{top:32px}
@media(max-width:782px){html.wp-toolbar body.admin-bar .grm-hub__vol{top:46px}}
@media(max-width:900px){.grm-hub .grm-hub__pijl{display:none}}
@media(max-width:640px){
  .grm-hub__rijen{padding:4px 16px 4px}
  .grm-hub .grm-help__contact{margin-left:calc(50% - 50vw + 16px)!important;margin-right:calc(50% - 50vw + 16px)!important;margin-top:28px;padding:18px 16px;gap:12px}
  .grm-hub__rij{margin-bottom:30px}
  .grm-hub__rijkop{align-items:flex-start;flex-direction:column;gap:10px}
  .grm-hub a.grm-hub__kaart{flex-basis:72vw;height:280px}
  .grm-hub a.grm-hub__kaart--groep{flex-basis:80vw}
  .grm-hub__art{flex-basis:130px;height:130px}
  .grm-hub__voltop{height:54px;padding:0 12px}
  .grm-hub__volnav{top:54px;padding:10px 12px}
  .grm-hub__volherotx{padding:20px 16px}
  .grm-hub__volin{padding:8px 16px 50px}
  .grm-hub__blok{margin:0 -10px 8px;padding:20px 10px 14px;scroll-margin-top:106px}
  .grm-hub__blokart{width:72px;height:48px}
  .grm-hub__lijst{grid-template-columns:1fr}
  .grm-hub__zoek{padding:0 16px 16px}
}