/*
Theme Name:   HCCR (Hello Elementor Child)
Theme URI:    https://hccr.be
Description:  Kindthema voor Hello Elementor met de huisstijl van de Midden West-Vlaamse Hobby Computer Club. Bevat de clubkleuren, typografie, agenda- en herbekijken-componenten.
Author:       Midden West-Vlaamse Hobby Computer Club
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hccr
*/

/* =========================================================
   1. Design tokens — de clubkleur en afgeleiden
   ========================================================= */
:root{
  --hccr-brand:#005C5B;
  --hccr-brand-deep:#073540;
  --hccr-brand-lift:#0A8C86;
  --hccr-heading:#0A4746;
  --hccr-body:#61757A;
  --hccr-wash:#F8FCFC;
  --hccr-tint:#E7F3F5;
  --hccr-line:#E3EEEE;
  --hccr-hero-ink:#C9E1E4;
  --hccr-radius:12px;
  --hccr-shadow:0 1px 2px rgba(10,71,70,.05), 0 8px 24px -14px rgba(10,71,70,.22);
  --hccr-shadow-lg:0 2px 4px rgba(10,71,70,.05), 0 20px 46px -22px rgba(10,71,70,.34);
}

/* =========================================================
   2. Basis
   ========================================================= */
body{
  font-family:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.62; color:var(--hccr-body); background:#fff;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--hccr-heading); letter-spacing:-.028em; line-height:1.14; text-wrap:balance;
}
a{color:var(--hccr-brand);}
:focus-visible{outline:3px solid var(--hccr-brand-lift); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

/* =========================================================
   3. Hulpklassen — in te vullen bij "CSS Classes" in Elementor
   ========================================================= */
.hccr-eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hccr-brand-lift); margin-bottom:14px;
}
.hccr-grad{
  background:linear-gradient(112deg, var(--hccr-brand-deep) 0%, #04494F 42%, var(--hccr-brand) 72%, #0B7F7C 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hccr-grad::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 88% 18%, rgba(120,220,214,.16), transparent 68%);
}
.hccr-grad > *{position:relative; z-index:1;}
.hccr-grad h1,.hccr-grad h2,.hccr-grad h3{color:#fff;}
.hccr-grad p{color:var(--hccr-hero-ink);}
.hccr-grad .hccr-eyebrow{color:#8FC4C7;}

.hccr-card{
  background:#fff; border:1px solid var(--hccr-line); border-radius:var(--hccr-radius);
  box-shadow:var(--hccr-shadow); transition:transform .22s, box-shadow .22s;
  padding:28px;
}
.hccr-card:hover{transform:translateY(-3px); box-shadow:var(--hccr-shadow-lg);}

/* =========================================================
   4. Agenda- en archiefkaarten (shortcodes)
   ========================================================= */

/* Hello Elementor onderstreept links in de inhoud. Binnen onze
   kaarten is de hele kaart al klikbaar, dus daar hoeft dat niet. */

.hccr-event__thumb{position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center;}
.hccr-event__thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}

/* Terugvaltegel wanneer een evenement geen uitgelichte afbeelding heeft */
.hccr-fallback{position:absolute; inset:0; display:grid; place-items:center;
  background-repeat:no-repeat; background-size:15px 15px, 100% 100%;}
.hccr-fallback svg{width:54px; height:54px; color:rgba(255,255,255,.72);}
.hccr-tone-1{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),linear-gradient(135deg,#0A6E6B,#12A79E);}
.hccr-tone-2{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),linear-gradient(135deg,#073540,#0C7E92);}
.hccr-tone-3{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),linear-gradient(135deg,#005C5B,#3A9A7E);}
.hccr-tone-4{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),linear-gradient(135deg,#0B4F62,#1795A0);}

/* =========================================================
   6. Kop en menu — bovenop de opmaak van Hello Elementor
   ========================================================= */
.site-header{
  background:#fff; border-bottom:1px solid var(--hccr-line);
  position:sticky; top:0; z-index:100;
}
body.admin-bar .site-header{top:32px;}
.site-header .header-inner{
  max-width:1180px; margin:0 auto; padding:0 40px; min-height:74px;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
}
.site-header .site-branding{display:flex; flex-direction:column; justify-content:center; gap:1px;}
.site-header .site-title{font-size:18px; font-weight:800; line-height:1.15; margin:0; letter-spacing:-.01em;}
.site-header .site-title a{color:var(--hccr-heading); text-decoration:none;}
.site-header .site-description{font-size:11.5px; font-weight:600; color:#5A6E72; margin:0;}

@media (min-width:993px){
  .site-header .site-navigation ul.menu{
    display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;
  }
  .site-header .site-navigation ul.menu > li > a{
    font-size:15px; font-weight:600; color:#5A6E72; text-decoration:none;
    padding-bottom:3px; border-bottom:2px solid transparent; transition:color .18s;
  }
  .site-header .site-navigation ul.menu > li > a:hover{color:var(--hccr-heading);}
  .site-header .site-navigation ul.menu > li.current-menu-item > a{
    color:var(--hccr-heading); border-bottom-color:var(--hccr-brand);
  }
  .site-header .site-navigation ul.menu > li > a[href*="lid-worden"]{
    background:var(--hccr-brand); color:#fff; border-radius:9px;
    padding:11px 21px; border-bottom:0; font-weight:700;
  }
  .site-header .site-navigation ul.menu > li > a[href*="lid-worden"]:hover{color:#fff;}
  /* merk links, menu rechts op één rij */
  .site-header .header-inner{flex-direction:row; flex-wrap:nowrap;}
  .site-header .site-branding{flex:0 0 auto;}
  .site-header .site-description{white-space:nowrap;}
  .site-header .site-navigation{margin-left:auto; flex:0 0 auto;}
  .site-header .site-navigation ul.menu{flex-wrap:nowrap; gap:22px;}
  .site-header .site-navigation ul.menu > li{white-space:nowrap;}
  .site-header .site-navigation-toggle-holder,
  .site-header .site-navigation-dropdown{display:none !important;}
}
@media (min-width:993px) and (max-width:1300px){
  .site-header .site-navigation ul.menu{gap:16px;}
  .site-header .site-navigation ul.menu > li > a{font-size:14.5px;}
}

/* =========================================================
   7. Secties over de volle breedte
   ========================================================= */
body{overflow-x:clip;}
.site-main{max-width:1180px;}
.hccr-bleed{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.hccr-inner{max-width:1180px; margin:0 auto; padding:0 40px;}
body{background:#EEF3F2;}

/* Paginakop: een donkere kaart op de lichte achtergrond, zoals op Onderwerpen
   en Mijn bijeenkomsten (stijl A, 29 okt 2026). .hccr-pagekaart is dezelfde kop
   voor pagina's die hem zelf opbouwen. Het bovenschrift wordt een pil (datum). */
.hccr-pagehead.hccr-bleed, .hccr-pagekaart{
  width:auto; max-width:1072px; box-sizing:border-box; margin:32px auto 20px;
  padding:28px 32px; border-radius:20px; background:#073540; color:#fff;
}
.hccr-pagehead.hccr-grad::after{display:none;}
.hccr-pagehead .hccr-inner{max-width:none; padding:0;}
.hccr-pagehead h1, .hccr-pagekaart h1{margin:0 0 8px; font-size:32px; line-height:1.2; color:#fff;}
.hccr-pagehead p, .hccr-pagekaart p{max-width:62ch; margin:0; font-size:16px; line-height:1.6; color:#D6E7E5;}
.hccr-pagehead p + p{margin-top:10px;}
.hccr-pagehead p.hccr-eyebrow{
  display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:999px; background:#0F4A57;
  color:#fff; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
}
.hccr-pagekaart{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 24px;}
.hccr-pagekaart__txt{flex:1 1 460px; min-width:0;}
.hccr-pagekaart p.hccr-pagekaart__pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.hccr-pagekaart__pill{padding:4px 12px; border-radius:999px; background:#0F4A57; color:#fff; font-size:14px; font-weight:600;}
.hccr-pagekaart__actions{display:flex; flex-wrap:wrap; gap:10px;}
a.hccr-pagekaart__btn, a.hccr-pagekaart__btn:visited{display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border-radius:12px; background:#0F8A86; color:#fff; font-weight:700; text-decoration:none;}
a.hccr-pagekaart__btn:hover, a.hccr-pagekaart__btn:focus{background:#0B6A72; color:#fff;}
a.hccr-pagekaart__btn--ghost, a.hccr-pagekaart__btn--ghost:visited{border:1px solid #2E6B73; background:transparent; font-weight:600;}
a.hccr-pagekaart__btn--ghost:hover, a.hccr-pagekaart__btn--ghost:focus{background:#0B4A55;}
@media (max-width:600px){
  .hccr-pagehead.hccr-bleed, .hccr-pagekaart{margin:20px 0 16px; padding:22px 18px;}
  .hccr-pagehead h1, .hccr-pagekaart h1{font-size:26px;}
}

/* De speler op een sessiepagina: een eigen donkere kaart onder de kop. */
.hccr-speler.hccr-bleed{width:auto; max-width:1072px; margin:0 auto; border-radius:20px; background:#0A2A33; overflow:hidden;}
.hccr-speler .hccr-inner{max-width:none; padding:16px;}

/* Tabbalk: witte pil met tabs, de gekozen tab donker (zoals Onderwerpen). */
.hccr-tabbar{display:flex; flex-wrap:wrap; gap:6px; padding:6px; border-radius:16px; background:#fff;}
.hccr-tabbar button.hccr-tabbar__tab, .hccr-tabbar button.hccr-tabbar__tab:hover, .hccr-tabbar button.hccr-tabbar__tab:focus,
.hccr-tabbar a.hccr-tabbar__tab, .hccr-tabbar a.hccr-tabbar__tab:visited{
  display:inline-flex; align-items:center; gap:4px; min-height:48px; margin:0; padding:0 16px; border:0; border-radius:12px;
  background:transparent; color:#073540; font:inherit; font-size:15px; font-weight:700; line-height:1.2;
  text-transform:none; letter-spacing:normal; text-decoration:none; white-space:nowrap; box-shadow:none; cursor:pointer;
}
.hccr-tabbar button.hccr-tabbar__tab:hover, .hccr-tabbar a.hccr-tabbar__tab:hover{background:#EEF3F2;}
.hccr-tabbar button.hccr-tabbar__tab[aria-pressed="true"], .hccr-tabbar a.hccr-tabbar__tab[aria-current="page"]{background:#073540; color:#fff;}
.hccr-tabbar__n{margin-left:4px; padding:1px 8px; border-radius:999px; background:#EEF3F2; color:#4A6B71; font-size:13px;}
.hccr-tabbar [aria-pressed="true"] .hccr-tabbar__n{background:#2E5C66; color:#fff;}
.hccr-tabbar button:focus-visible, .hccr-tabbar a:focus-visible{outline:3px solid #f0b400; outline-offset:2px;}
@media (max-width:600px){
  .hccr-tabbar{align-self:stretch;}
  .hccr-tabbar button.hccr-tabbar__tab, .hccr-tabbar a.hccr-tabbar__tab{flex:1 1 auto; white-space:normal; justify-content:center;}
}

/* Elke pagina heeft haar eigen titelbanner; de themakop is dubbelop. */
.page .site-main > .page-header,
.page .site-main > .entry-header,
.page .site-main > header.entry-header,
.page h1.entry-title{display:none;}

/* =========================================================
   9. Knoppen en voettekst
   ========================================================= */
.hccr-button{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:15.5px; padding:13px 24px; border-radius:9px;
  background:var(--hccr-brand); color:#fff; border:2px solid var(--hccr-brand);
  margin:0 10px 10px 0; transition:transform .18s, box-shadow .18s, background .18s;
}
.hccr-button:hover{color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,92,91,.7);}
.hccr-button.is-outline{background:transparent; color:var(--hccr-brand); border-color:#CBE0DF; box-shadow:none;}
.hccr-button.is-outline:hover{color:var(--hccr-brand); border-color:var(--hccr-brand); background:var(--hccr-wash);}

.site-footer{background:var(--hccr-brand-deep); color:#9FBCBE; padding:44px 0; margin-top:0;}
.site-footer .footer-inner{max-width:1180px; margin:0 auto; padding:0 40px;}
.site-footer a{color:#9FBCBE; text-decoration:none;}
.site-footer a:hover{color:#fff;}
.site-footer .site-title, .site-footer .site-title a{color:#fff; font-size:17px; font-weight:800;}
.site-footer .site-description{color:#9FBCBE; font-size:13px;}

/* Hello onderstreept links via ".page-content a" — dat weegt zwaarder dan
   een enkele klasse, dus matchen we hier even specifiek terug. */
.hccr-button, .hccr-button:hover, .hccr-button:focus,
.page-content a.hccr-button, .page-content a.hccr-button:hover,
.entry-content a.hccr-button, .entry-content a.hccr-button:hover{
  text-decoration:none;
}

@media (max-width:900px){
  
  .hccr-inner{padding:0 22px;}
  
  .site-footer .footer-inner{padding:0 22px;}
}

/* WordPress zet automatisch <p>-tags rond losse regels en laat daarbij
   soms een lege paragraaf achter. In een grid telt die mee als kolom,
   waardoor de volgende kolom naar een nieuwe rij springt. */
p:empty{display:none;}

/* =========================================================
   11. Eigen voettekst (vervangt de kale versie van Hello)
   ========================================================= */
.site-footer{display:none !important;}
.hccr-footer{background:var(--hccr-brand-deep); color:#9FBCBE; font-size:15px; padding:58px 0 26px;}
.hccr-footer .hccr-inner{max-width:1180px;}
.hccr-footer__cols{display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:40px;}
.hccr-footer b{color:#fff; display:block; margin-bottom:12px; font-weight:700; font-size:15.5px;}
.hccr-footer p{margin:0; max-width:34ch; color:#9FBCBE;}
.hccr-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.hccr-footer a{color:#9FBCBE; text-decoration:none;}
.hccr-footer a:hover{color:#fff; text-decoration:underline;}
.hccr-colophon{
  border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:20px;
  font-size:13.5px; display:flex; gap:22px; justify-content:space-between; flex-wrap:wrap;
}
@media (max-width:900px){
  .hccr-footer__cols{grid-template-columns:1fr 1fr; gap:30px;}
  .hccr-footer{padding:44px 0 22px;}
}
@media (max-width:560px){ .hccr-footer__cols{grid-template-columns:1fr;} }

/* =========================================================
   12. Uitklapmenu op tablet en telefoon
   ========================================================= */
@media (max-width:1024px){
  .site-navigation-dropdown{
    background:#fff;
    box-shadow:0 18px 40px -22px rgba(10,71,70,.55);
    border-top:1px solid var(--hccr-line);
  }
  .site-navigation-dropdown ul.menu{margin:0; padding:0; list-style:none;}
  .site-navigation-dropdown ul.menu li a,
  .site-navigation-dropdown .menu li a{
    display:block; color:var(--hccr-heading); background:transparent;
    font-weight:600; font-size:16.5px; text-decoration:none;
    padding:16px 22px; border-bottom:1px solid var(--hccr-line);
  }
  .site-navigation-dropdown ul.menu li a:hover,
  .site-navigation-dropdown .menu li a:hover{
    background:var(--hccr-wash); color:var(--hccr-brand);
  }
  .site-navigation-dropdown ul.menu li.current-menu-item a,
  .site-navigation-dropdown .menu li.current-menu-item a{
    background:var(--hccr-tint); color:var(--hccr-brand); font-weight:700;
    box-shadow:inset 3px 0 0 var(--hccr-brand);
  }
  .site-navigation-dropdown ul.menu li a[href*="lid-worden"]{color:var(--hccr-brand); font-weight:700;}
  .site-navigation-toggle button, .site-navigation-toggle{color:var(--hccr-heading);}
}

/* =========================================================
   14. Clublogo in de kop
   Het logo bevat de clubnaam al, dus de sitenaam en de
   ondertitel eronder zijn dubbelop.
   ========================================================= */
.site-header .site-branding img,
.site-header .custom-logo-link img{
  height:52px; width:auto; max-width:100%; display:block;
}
.site-header .site-title,
.site-header .site-description{display:none;}
.site-header .site-branding{gap:0;}

@media (max-width:1024px){
  .site-header .site-branding img,
  .site-header .custom-logo-link img{height:44px;}
}
@media (max-width:480px){
  .site-header .site-branding img,
  .site-header .custom-logo-link img{height:38px;}
}
/* Gsm en tablet: logo en menuknop op één rij; het uitgeklapte menu eronder. */
@media (max-width:992px){
  .site-header .header-inner{flex-wrap:wrap; padding:0 16px; gap:0 12px; min-height:64px;}
  .site-header .site-branding{flex:1 1 0; min-width:0;}
  .site-header .site-branding .custom-logo-link{display:block; max-width:100%;}
  .site-header .site-branding img, .site-header .custom-logo-link img{max-width:100%; height:auto; max-height:44px;}
  .site-header .site-navigation-toggle-holder{flex:0 0 auto; margin-left:auto; padding:0;}
  .site-header .site-navigation-dropdown{flex:0 0 100%; order:9;}
}

/* =========================================================
   15. Menu inklappen zodra het logo en het menu niet meer
   naast elkaar passen. Het logo is breder dan de tekstversie
   die er eerst stond, dus dat gebeurt al onder 1200 pixels.
   ========================================================= */
@media (min-width:993px) and (max-width:1200px){
  /* Hello's eigen regel voor "menu inklappen op tablet" telt vier klassen en
     is dus specifieker dan een gewone selector. We herhalen die klassen en
     zetten er body voor, anders wint Hello en blijft de knop verborgen. */
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder,
  body .site-header .site-navigation-toggle-holder{display:flex !important;}
  body .site-header .site-navigation:not(.site-navigation-dropdown){display:none !important;}
  body .site-header .site-navigation-dropdown{display:block !important;}
}

/* Het logo (373 px breed op 52 px hoog) plus zeven menu-items vroegen
   1183 px, terwijl de kop 1100 px binnenwerks heeft. We halen die ruimte
   uit het logo en de tussenruimte, niet uit de tekstgrootte — het menu
   moet leesbaar blijven. */
@media (min-width:1201px){
  .site-header .site-branding img,
  .site-header .custom-logo-link img{height:44px;}
  .site-header .site-navigation ul.menu{gap:16px;}
  .site-header .site-navigation ul.menu > li > a{font-size:15px;}
  .site-header .site-navigation ul.menu > li > a[href*="lid-worden"]{padding:11px 18px;}
}

/* De shortcode bouwt de kaarten met <span>-elementen zodat ze binnen een
   <a> geldig blijven. Een span is inline, waardoor horizontale padding de
   blokjes erin niet opschuift — vandaar dat datum en titel tegen de rand
   plakten. Expliciet als blok tonen lost dat op. */
.hccr-event__thumb{display:block;}

.hccr-event__thumb{display:grid; place-items:center;}

/* Kaartje en kaart eronder in dezelfde kolom houden lucht tussen zich. */

/* =========================================================
   21. Lid worden: formulier links, rekening rechts
   ========================================================= */

/* Kaarten onder elkaar met gelijke tussenruimte (privacybeleid). */
.hccr-stack{display:grid; gap:20px; margin:26px 0;}

/* =========================================================
   23. Ledensite — opnames
   ========================================================= */

.hccr-opn__datum{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hccr-brand-lift); margin-bottom:6px;
}

/* De speler op een detailpagina staat op een donkere band, zodat het beeld
   los komt van de pagina — net als in de zaal met het licht uit. */
.hccr-speler iframe, .hccr-speler video{
  display:block; width:100%; aspect-ratio:16/9; height:auto; border:0;
  border-radius:12px; background:#000;
}
.hccr-opn__tekst{max-width:70ch; margin:38px 0 30px; font-size:17px;}

/* =========================================================
   24. Kopbalk over de volle breedte
   Op hccr.be zit er een .header-inner in de kop die de inhoud smal houdt.
   De ledensite draait een Hello-versie zonder dat wikkeltje, waardoor de
   balk zelf op 1140px bleef staan en bij het scrollen niet doorliep.
   Daar geven we de balk de volle breedte en houden we alleen de inhoud smal.
   ========================================================= */
.site-header:not(:has(.header-inner)){
  max-width:none;
  width:100%;
  padding-left:max(22px, calc(50% - 570px));
  padding-right:max(22px, calc(50% - 570px));
}

/* Lucht tussen de laatste rij en de voettekst. */

.hccr-opn__tekst ~ p:last-child{margin-bottom:84px;}

/* =========================================================
   25. Submenu — zelfde letter als de rest van de site
   Hello geeft het uitklapmenu zijn eigen opmaak mee; die valt op
   naast de kop, dus zetten we hem hier gelijk.
   ========================================================= */
.site-header .site-navigation ul.menu ul,
.site-header .site-navigation ul.menu ul li,
.site-header .site-navigation ul.menu ul a{
  font-family:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
}
.site-header .site-navigation ul.menu ul{
  background:#fff; border:1px solid var(--hccr-line); border-radius:10px;
  box-shadow:var(--hccr-shadow-lg); padding:8px; min-width:232px; margin-top:8px;
}
.site-header .site-navigation ul.menu ul li{border:0;}
.site-header .site-navigation ul.menu ul a{
  display:block; padding:9px 14px; border-radius:7px;
  font-size:15px; font-weight:600; color:var(--hccr-heading); text-decoration:none;
  white-space:nowrap;
}
.site-header .site-navigation ul.menu ul a:hover,
.site-header .site-navigation ul.menu ul a:focus-visible{
  background:var(--hccr-tint); color:var(--hccr-brand);
}

/* =========================================================
   26. Eigen hamburgermenu
   Deze Hello-versie levert zelf geen knop voor kleine schermen. We
   voegen er een toe zodra het menu niet meer naast het logo past —
   gemeten, niet op een vast schermformaat, want het menu groeit mee
   met het aantal werkjaren.
   ========================================================= */
.hccr-menuknop{
  display:none; flex:none; width:44px; height:44px; padding:0; margin-left:auto;
  background:transparent; border:1px solid var(--hccr-line); border-radius:9px;
  cursor:pointer; align-items:center; justify-content:center; gap:5px;
  flex-direction:column;
}
.hccr-menuknop span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--hccr-heading); transition:transform .22s, opacity .18s;
}
.hccr-menuknop:hover{border-color:var(--hccr-brand);}
.hccr-menuknop:focus-visible{outline:3px solid var(--hccr-brand-lift); outline-offset:2px;}

/* Zodra de knop nodig is, verhuist het menu naar een uitklappaneel. */
.site-header.hccr-krap .hccr-menuknop{display:flex;}
.site-header.hccr-krap .site-navigation{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--hccr-line);
  box-shadow:0 18px 34px -24px rgba(10,71,70,.5);
  padding:10px 22px 18px;
}
.site-header.hccr-krap.is-open{position:relative;}
.site-header.hccr-krap.is-open .site-navigation{display:block;}
.site-header.hccr-krap .site-navigation ul.menu{
  flex-direction:column; align-items:stretch; gap:0; width:100%;
}
.site-header.hccr-krap .site-navigation ul.menu > li{width:100%;}
.site-header.hccr-krap .site-navigation ul.menu > li > a{
  display:block; padding:13px 4px; border-bottom:1px solid var(--hccr-line); font-size:16.5px;
}
/* In het uitklappaneel staat het submenu gewoon open, ingesprongen. */
.site-header.hccr-krap .site-navigation ul.menu ul{
  position:static; display:block; opacity:1; visibility:visible; transform:none;
  border:0; box-shadow:none; padding:0 0 6px 14px; margin:0; min-width:0; background:transparent;
}
.site-header.hccr-krap .site-navigation ul.menu ul a{padding:10px 4px; font-weight:500;}

/* Kruisje wanneer het paneel open staat. */
.site-header.is-open .hccr-menuknop span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header.is-open .hccr-menuknop span:nth-child(2){opacity:0;}
.site-header.is-open .hccr-menuknop span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Correcties op het uitklappaneel.
   De knop kreeg een roze achtergrond mee van de oude themastijlen, en
   Hello zet elk menu-item op flex-in-een-rij, waardoor het submenu naast
   "Archief" belandde in plaats van eronder. */
.hccr-menuknop{background:transparent !important; box-shadow:none !important;}
.site-header.hccr-krap .site-navigation ul.menu > li{display:block;}
.site-header.hccr-krap .site-navigation ul.menu > li > a{border-bottom:0;}
.site-header.hccr-krap .site-navigation ul.menu > li + li{border-top:1px solid var(--hccr-line);}
.site-header.hccr-krap .site-navigation ul.menu li.menu-item-has-children > a{font-weight:700;}
/* Het pijltje dat Hello bij een submenu zet, heeft hier geen functie meer. */
.site-header.hccr-krap .site-navigation .sub-arrow,
.site-header.hccr-krap .site-navigation ul.menu span[class*="arrow"]{display:none;}

/* Melding wanneer er nog geen opname of nog geen bijeenkomsten zijn. */
.hccr-geenopname{
  background:var(--hccr-wash); border:1px dashed var(--hccr-line); border-radius:var(--hccr-radius);
  padding:28px 30px; margin:34px 0 84px; color:var(--hccr-body); font-size:16px;
}

/* Het pijltje dat Hello achter een menu-item met submenu zet, staat in het
   uitklappaneel onder de hele lijst en heeft daar geen betekenis. */
.site-header.hccr-krap .site-navigation ul.menu > li::after{content:none;}
/* Op breed scherm hoort het bij de rest van de kop qua kleur. */
.site-header .site-navigation ul.menu > li.menu-item-has-children::after{color:var(--hccr-body);}

/* =========================================================
   27 · Artikelarchief — de sorteerbare tabel van Ons Kompjoeterblad
   ========================================================= */

  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--hccr-line); border-radius:var(--hccr-radius);
  box-shadow:var(--hccr-shadow);
}
  background:var(--hccr-tint); color:var(--hccr-heading);
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
}


@media (max-width:700px){
}

/* ===========================================================================
 * Leden-AI: sessietabs en ledenstartpagina (zie functions.php)
 * ======================================================================== */
/*
 * Session tabs, built to the "Sessie" artboard of the redesign canvas.
 * Colours from the mockup: ink #073540, muted #4A6B71, link #0B6A72, button #005C5B,
 * band #EEF3F2, lines #DDE9E8. Font is inherited from the theme.
 *
 * The parent theme (Hello Elementor) styles every <button> with a pink border, centred text
 * and pink hover/focus, with a 0.3s transition. Every button rule here is scoped to
 * ".hccr-st button.<class>" and sets all states, so the theme's rules never win.
 */
.hccr-st {
	--st-ink: #073540;
	--st-muted: #4A6B71;
	--st-link: #0B6A72;
	--st-btn: #005C5B;
	--st-band: #EEF3F2;
	--st-line: #DDE9E8;
	/* full-width light band, like the theme's .hccr-bleed bands */
	margin: 0 calc(50% - 50vw);
	background: var(--st-band);
	color: var(--st-ink);
	font-size: 17px;
	line-height: 1.75;
}
.hccr-st__wrap {
	max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; box-sizing: border-box;
	display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
}
.hccr-st__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hccr-st__aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Tab bar: white pill bar, active tab dark */
.hccr-st__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 16px; background: #fff; }
.hccr-st button.hccr-st__tab,
.hccr-st button.hccr-st__tab:hover,
.hccr-st button.hccr-st__tab:focus {
	min-height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: 12px;
	background: transparent; color: var(--st-ink); font: inherit; font-size: 16px; font-weight: 700;
	line-height: 1.2; text-align: center; text-transform: none; letter-spacing: normal; white-space: nowrap;
	box-shadow: none; cursor: pointer; transition: background-color .12s, color .12s;
}
.hccr-st button.hccr-st__tab:hover { background: var(--st-band); }
.hccr-st button.hccr-st__tab[aria-selected="true"],
.hccr-st button.hccr-st__tab[aria-selected="true"]:hover,
.hccr-st button.hccr-st__tab[aria-selected="true"]:focus { background: var(--st-ink); color: #fff; }
.hccr-st button:focus-visible, .hccr-st a:focus-visible, .hccr-st input:focus-visible {
	outline: 3px solid #f0b400; outline-offset: 2px;
}

/* Panel card */
.hccr-st__card { background: #fff; border-radius: 20px; padding: 32px; }
.hccr-st__pane { display: flex; flex-direction: column; gap: 16px; }
.hccr-st__pane[hidden] { display: none; }
.hccr-st__pane:focus-visible { outline: none; }
.hccr-st__pane p { margin: 0; }
.hccr-st__ptitle { margin: 0; font-size: 22px; font-weight: 700; color: var(--st-ink); }
.hccr-st.is-js .hccr-st__ptitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hccr-st:not(.is-js) .hccr-st__pane + .hccr-st__pane { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--st-line); }

/* Samenvatting */
.hccr-st__badge {
	align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #FBF4E8;
	font-size: 13px; font-weight: 700; line-height: 1.4; color: #7A4A0E;
}
.hccr-st__intro p, .hccr-st__text { margin: 0; font-size: 17px; line-height: 1.75; color: var(--st-ink); }
.hccr-st__h { margin: 8px 0 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--st-ink); }
/* The theme removes list markers, so the bullets are drawn here. */
.hccr-st ul.hccr-st__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hccr-st ul.hccr-st__points li {
	position: relative; margin: 0; padding: 0 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--st-ink);
}
.hccr-st ul.hccr-st__points li::before {
	content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--st-btn);
}

/* Hoofdstukken */
.hccr-st__chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hccr-st a.hccr-st__chapter {
	display: flex; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 12px;
	background: var(--st-band); color: var(--st-ink); text-decoration: none;
}
.hccr-st a.hccr-st__chapter:hover { background: var(--st-line); color: var(--st-ink); }
.hccr-st__time { min-width: 64px; font-weight: 700; color: var(--st-link); font-variant-numeric: tabular-nums; }
.hccr-st__ctitle { font-size: 17px; }

/* Quiz */
.hccr-quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hccr-quiz__q[hidden] { display: none; }
.hccr-quiz__q legend { display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0 0 14px; }
.hccr-quiz__count { font-size: 14px; font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: .6px; line-height: 1.4; }
.hccr-quiz__text { font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--st-ink); }
.hccr-quiz__opts { display: flex; flex-direction: column; gap: 14px; }
.hccr-st button.hccr-quiz__opt,
.hccr-st button.hccr-quiz__opt:hover,
.hccr-st button.hccr-quiz__opt:focus,
.hccr-st button.hccr-quiz__opt:disabled {
	display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 18px;
	border: 2px solid var(--st-line); border-radius: 12px; background: #fff; color: var(--st-ink);
	font: inherit; font-size: 17px; font-weight: 400; line-height: 1.4; text-align: left;
	text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: none; opacity: 1;
	cursor: pointer; transition: border-color .12s, background-color .12s;
}
.hccr-st button.hccr-quiz__opt:hover:not(:disabled) { border-color: var(--st-btn); }
.hccr-st button.hccr-quiz__opt:disabled { cursor: default; }
.hccr-st button.hccr-quiz__opt.is-right { background: #E3F4EF; border: 2px solid var(--st-btn); }
.hccr-st button.hccr-quiz__opt.is-wrong { background: #FBEDEA; border: 2px solid #A33A2A; }
.hccr-st button.hccr-quiz__opt.is-answer { background: #E3F4EF; border: 2px dashed var(--st-btn); }
.hccr-quiz__fb { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hccr-quiz__fb[hidden] { display: none; }
.hccr-quiz__feedback { font-size: 16px; line-height: 1.6; color: var(--st-ink); }
.hccr-quiz__ok, .hccr-quiz__no { font-weight: 700; }
.hccr-quiz__fb .hccr-quiz__ok, .hccr-quiz__fb.is-ok .hccr-quiz__no { display: none; }
.hccr-quiz__fb.is-ok .hccr-quiz__ok { display: inline; }
.hccr-st a.hccr-quiz__watch { color: var(--st-link); }
.hccr-st a.hccr-quiz__watch:hover { color: var(--st-ink); }
.hccr-st button.hccr-quiz__next, .hccr-st button.hccr-quiz__next:hover, .hccr-st button.hccr-quiz__next:focus,
.hccr-st button.hccr-quiz__again, .hccr-st button.hccr-quiz__again:hover, .hccr-st button.hccr-quiz__again:focus {
	min-height: 52px; margin: 0; padding: 0 24px; border: 0; border-radius: 12px;
	background: var(--st-btn); color: #fff; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: background-color .12s;
}
.hccr-st button.hccr-quiz__next:hover, .hccr-st button.hccr-quiz__again:hover { background: var(--st-ink); }
.hccr-quiz__end { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hccr-quiz__end[hidden] { display: none; }
.hccr-quiz__score { font-size: 21px; font-weight: 700; color: var(--st-ink); }
.hccr-st:not(.is-js) .hccr-quiz__next, .hccr-st:not(.is-js) .hccr-quiz__end { display: none; }

/* Aside: previous / next */
.hccr-st__nav { display: flex; flex-direction: column; gap: 10px; }
.hccr-st a.hccr-st__navlink {
	display: block; padding: 14px 16px; border-radius: 14px; background: #fff;
	color: var(--st-ink); font-size: 15px; line-height: 1.5; text-decoration: none;
}
.hccr-st a.hccr-st__navlink:hover { background: var(--st-line); color: var(--st-ink); }
.hccr-st__navlabel { display: block; font-size: 13px; color: var(--st-muted); }
.hccr-st__navdate { display: block; font-size: 14px; font-weight: 700; color: var(--st-link); }

/* Question box inside the tab (compact layout from the mockup) */
.hccr-st .hccr-ai { margin: 0; padding: 0; border: 0; background: transparent; color: var(--st-ink); font-family: inherit; font-size: 17px; }
.hccr-st .hccr-ai__form { display: flex; flex-direction: column; gap: 14px; }
.hccr-st .hccr-ai__label { font-size: 17px; font-weight: 700; color: var(--st-ink); }
.hccr-st .hccr-ai__row { display: flex; flex-wrap: wrap; gap: 10px; }
.hccr-st input.hccr-ai__q, .hccr-st input.hccr-ai__q:focus {
	flex: 999 1 320px; min-width: 0; height: 52px; margin: 0; padding: 0 16px; box-sizing: border-box;
	border: 2px solid var(--st-line); border-radius: 12px; background: #fff;
	font: inherit; font-size: 17px; color: var(--st-ink); box-shadow: none;
}
.hccr-st input.hccr-ai__q:focus { border-color: var(--st-btn); outline: none; }
.hccr-st .hccr-ai button.hccr-ai__send, .hccr-st .hccr-ai button.hccr-ai__send:hover, .hccr-st .hccr-ai button.hccr-ai__send:focus {
	flex: 1 1 140px; height: 52px; min-height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: 12px;
	background: var(--st-btn); color: #fff; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer;
}
.hccr-st .hccr-ai button.hccr-ai__send:hover { background: var(--st-ink); }
.hccr-st .hccr-ai__help { margin: 0; font-size: 15px; line-height: 1.6; color: var(--st-muted); }
.hccr-st .hccr-ai__bar { margin: 0; gap: 16px; }
.hccr-st .hccr-ai__opt { font-size: 15px; color: var(--st-ink); }
.hccr-st .hccr-ai__left { margin-left: auto; font-size: 14px; color: var(--st-muted); }
.hccr-st .hccr-ai__log:not(:empty) { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--st-line); }
.hccr-st .hccr-ai__question { background: var(--st-band); border-left: 0; border-radius: 12px; }

@media (max-width: 600px) {
	.hccr-st { font-size: 16px; }
	.hccr-st__wrap { padding: 20px 16px 40px; gap: 20px; }
	.hccr-st__card { padding: 20px; border-radius: 16px; }
	.hccr-st button.hccr-st__tab, .hccr-st button.hccr-st__tab:hover, .hccr-st button.hccr-st__tab:focus { flex: 1 1 40%; padding: 0 10px; font-size: 15px; }
	.hccr-quiz__text { font-size: 19px; }
	.hccr-st .hccr-ai__left { margin-left: 0; }
}

/* The band is the last block of the page: no white strip between it and the footer. */
body.hccr-has-tabs main#content, body.hccr-has-tabs main#content.site-main, body.hccr-has-tabs main#content .page-content { padding-bottom: 0; margin-bottom: 0; }
.hccr-has-tabs .page-content > .hccr-st:last-child { margin-bottom: 0; }
.hccr-has-tabs .post-tags, .hccr-has-tabs #comments { display: none; }

/*
 * Members' homepage, built to the "Main" artboard of the redesign canvas.
 * Colours: ink #073540, muted #4A6B71, link #0B6A72, button #005C5B, hero button #0F8A86,
 * hero text #D6E7E5 / #8FC4C7, band #EEF3F2, lines #DDE9E8. Font inherited from the theme.
 * Buttons are scoped ".hccr-home button.<class>" with all states, so Hello Elementor's pink
 * button styles never win.
 */
.hccr-home {
	--h-ink: #073540; --h-muted: #4A6B71; --h-link: #0B6A72; --h-btn: #005C5B;
	--h-band: #EEF3F2; --h-line: #DDE9E8;
	margin: 0 calc(50% - 50vw);
	background: var(--h-band);
	color: var(--h-ink);
	font-size: 17px;
	line-height: 1.6;
}
.hccr-home__wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
.hccr-home p { margin: 0; }
.hccr-home a { text-decoration: none; }
.hccr-home a:focus-visible, .hccr-home button:focus-visible, .hccr-home input:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }

/* 1. Hero */
.hccr-home__hero { background: var(--h-ink); color: #fff; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.hccr-home__intro { display: flex; flex-direction: column; gap: 6px; }
.hccr-home__hello { font-size: 17px; font-weight: 600; color: #8FC4C7; }
.hccr-home h1.hccr-home__title { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 800; color: #fff; }
.hccr-home__lead { font-size: 17px; line-height: 1.6; color: #D6E7E5; max-width: 720px; }

.hccr-home .hccr-ai--hero { margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-family: inherit; font-size: 17px; }
.hccr-home .hccr-ai--hero .hccr-ai__form { display: flex; flex-direction: column; gap: 14px; }
.hccr-home .hccr-ai--hero .hccr-ai__row { display: flex; flex-wrap: wrap; gap: 12px; }
.hccr-home .hccr-ai--hero input.hccr-ai__q, .hccr-home .hccr-ai--hero input.hccr-ai__q:focus {
	flex: 999 1 420px; min-width: 0; height: 56px; margin: 0; padding: 0 20px; box-sizing: border-box;
	border: 2px solid #8FC4C7; border-radius: 14px; background: #fff; color: var(--h-ink);
	font: inherit; font-size: 18px; box-shadow: none;
}
.hccr-home .hccr-ai--hero input.hccr-ai__q:focus { border-color: #fff; outline: none; }
.hccr-home .hccr-ai--hero button.hccr-ai__send, .hccr-home .hccr-ai--hero button.hccr-ai__send:hover, .hccr-home .hccr-ai--hero button.hccr-ai__send:focus {
	flex: 1 1 160px; height: 56px; min-height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 14px;
	background: #0F8A86; color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: background-color .12s;
}
.hccr-home .hccr-ai--hero button.hccr-ai__send:hover { background: #0B6A72; }
.hccr-home .hccr-ai__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hccr-home .hccr-ai__chipslabel { font-size: 15px; color: #D6E7E5; }
.hccr-home button.hccr-ai__chip, .hccr-home button.hccr-ai__chip:hover, .hccr-home button.hccr-ai__chip:focus {
	min-height: 44px; margin: 0; padding: 8px 16px; border: 1px solid #2E6B73; border-radius: 999px;
	background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 400; line-height: 1.3;
	text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: background-color .12s, border-color .12s;
}
.hccr-home button.hccr-ai__chip:hover { background: #0B4A55; border-color: #8FC4C7; }
.hccr-home .hccr-ai--hero .hccr-ai__bar { margin: 0; gap: 16px; }
.hccr-home .hccr-ai--hero .hccr-ai__opt { color: #D6E7E5; font-size: 15px; }
.hccr-home .hccr-ai--hero .hccr-ai__left { margin-left: auto; font-size: 14px; color: #D6E7E5; }
.hccr-home .hccr-ai--hero select.hccr-ai__model { color: var(--h-ink); }
/* The answer appears in a white card inside the dark band. */
.hccr-home .hccr-ai--hero .hccr-ai__log:not(:empty) { background: #fff; color: var(--h-ink); border-radius: 16px; padding: 28px; margin-top: 6px; }
.hccr-home .hccr-ai--hero .hccr-ai__question { background: var(--h-band); border-left: 0; border-radius: 12px; color: var(--h-ink); }
.hccr-home .hccr-ai--hero .hccr-ai__wait { color: var(--h-muted); }

/* Cards */
.hccr-home__card { background: #fff; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.hccr-home h2.hccr-home__label { margin: 0; font-size: 15px; font-weight: 700; color: var(--h-muted); text-transform: uppercase; letter-spacing: .6px; line-height: 1.4; }
.hccr-home__pill { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--h-band); font-weight: 700; font-size: 15px; color: var(--h-btn); }
.hccr-home__nexttitle { font-size: 26px; font-weight: 800; line-height: 1.25; }
.hccr-home__desc { font-size: 16px; line-height: 1.7; color: #3A5A60; }

.hccr-home__small { font-size: 13px; color: var(--h-muted); }
.hccr-home__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hccr-home a.hccr-home__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--h-btn); color: #fff; font-weight: 700; font-size: 16px; }
.hccr-home a.hccr-home__btn:hover { background: var(--h-ink); color: #fff; }
.hccr-home a.hccr-home__btn--soft { background: var(--h-band); color: var(--h-ink); font-weight: 600; padding: 0 18px; }
.hccr-home a.hccr-home__btn--soft:hover { background: var(--h-line); color: var(--h-ink); }

/* Recordings */
.hccr-home__recs { display: flex; flex-direction: column; gap: 16px; }
.hccr-home__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.hccr-home h2.hccr-home__h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--h-ink); }
.hccr-home a.hccr-home__more { font-size: 16px; font-weight: 600; color: var(--h-link); }
.hccr-home a.hccr-home__more:hover { color: var(--h-ink); }
.hccr-home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.hccr-home a.hccr-home__rec { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; color: var(--h-ink); }
.hccr-home a.hccr-home__rec:hover { box-shadow: 0 0 0 2px var(--h-line); color: var(--h-ink); }
.hccr-home__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #F4F8F7 0%, #E3EEEC 100%); }
.hccr-home img.hccr-home__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hccr-home__card16 { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; padding: 0 24px; box-sizing: border-box; overflow: hidden; }
.hccr-home__card16::after { content: ""; position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: var(--h-ink); clip-path: polygon(0 0, 100% 0, 100% 83%); }
.hccr-home__bar { position: relative; width: 28px; height: 3px; background: #7FD4CF; }
.hccr-home__cdate { position: relative; font-size: 13px; font-weight: 600; color: var(--h-link); }
.hccr-home__ctitle { position: relative; font-size: 22px; font-weight: 800; line-height: 1.2; max-width: 62%; }
.hccr-home__recbody { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.hccr-home__rectitle { font-weight: 700; font-size: 17px; line-height: 1.35; }
.hccr-home__recmeta { font-size: 14px; color: var(--h-muted); }
.hccr-home__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E3F4EF; color: var(--h-btn); font-size: 13px; font-weight: 700; }

.hccr-home__recbody { flex: 1; }
.hccr-home__thumb { position: relative; }
.hccr-home__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(15, 138, 134, .92); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(7, 53, 64, .3); transition: transform .12s; }
.hccr-home__play svg { margin-left: 3px; }
.hccr-home a.hccr-home__rec:hover .hccr-home__play { transform: scale(1.08); }

/* Tiles */
.hccr-home__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.hccr-home a.hccr-home__tile { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 20px; background: #fff; color: var(--h-ink); }
.hccr-home a.hccr-home__tile:hover { box-shadow: 0 0 0 2px var(--h-line); color: var(--h-ink); }
.hccr-home__tiletitle { font-weight: 800; font-size: 19px; }
.hccr-home__tiletext { font-size: 15px; color: var(--h-muted); line-height: 1.5; }

/* The band runs from the menu to the footer. */
body.hccr-has-home main#content, body.hccr-has-home main#content.site-main, body.hccr-has-home main#content .page-content { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
body.hccr-has-home .page-header { display: none; }

@media (max-width: 600px) {
	.hccr-home__wrap { padding: 20px 16px 40px; gap: 24px; }
	.hccr-home__hero { padding: 24px 20px; border-radius: 16px; }
	.hccr-home h1.hccr-home__title { font-size: 27px; }
	.hccr-home__card { padding: 24px 20px; }
	.hccr-home__nexttitle { font-size: 22px; }
	.hccr-home .hccr-ai--hero .hccr-ai__left { margin-left: 0; }
}
/* Answer text spacing inside the hero (the general "p { margin: 0 }" above removes it). */
.hccr-home .hccr-ai--hero .hccr-ai__answer p { margin: 0 0 10px; }
.hccr-home .hccr-ai--hero .hccr-ai__src-title { margin: 14px 0 6px; }
.hccr-home .hccr-ai--hero .hccr-ai__turn + .hccr-ai__turn { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--h-line); }

/* ===========================================================================
 * Ledenadministratie-pagina's in de stijl van de ledenstartpagina
 * (body.hccr-admin-page: Mijn contactgegevens, Mijn lidmaatschap, Bijeenkomsten)
 * ======================================================================== */
body.hccr-admin-page main#content { padding-bottom: 64px; margin-bottom: 0; }
body.hccr-admin-page main#content .page-content { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
body.hccr-admin-page .page-header { display: none; }
body.hccr-admin-page .page-content > p a { color: #0B6A72; font-weight: 600; }
@media (max-width: 600px) {
	body.hccr-admin-page main#content .page-content { padding-top: 20px; }
}

/* "Je was erbij": one badge everywhere (homepage, year pages, session header, links) */
.hccr-erbij { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #E3F4EF; color: #005C5B; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }

.hccr-erbij--inline { margin-left: 8px; vertical-align: middle; }
.hccr-erbij--head { margin-left: 12px; vertical-align: middle; }
.hccr-erbij--block { display: flex; width: max-content; margin: 10px 0 0; }
.hccr-st__navlink .hccr-erbij { display: flex; width: max-content; margin: 6px 0 0; }
/* session documents */
.hccr-st__docs { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 20px; border-radius: 18px; background: #fff; }
.hccr-st h2.hccr-st__docsh { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #4A6B71; line-height: 1.4; }
.hccr-st a.hccr-st__doc { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #EEF3F2; color: #073540; text-decoration: none; }
.hccr-st a.hccr-st__doc:hover { background: #DDE9E8; color: #073540; }
.hccr-st a.hccr-st__doc:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-st__docicon { flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #005C5B; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.hccr-st__doctitle { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.hccr-st__docmeta { display: block; font-size: 13px; color: #4A6B71; }

/* ===========================================================================
 * Mijn gegevens: Contactgegevens, Lidmaatschap, Bijeenkomsten (stijl A, 29 okt 2026)
 * Zie hccr_dv_mijn_contact(), hccr_dv_mijn_lidmaatschap(), hccr_dv_mijn_bijeenkomsten().
 * ======================================================================== */
.hccr-mg{max-width:1072px; margin:0 auto; display:flex; flex-direction:column; gap:20px; color:#073540;}
.hccr-mg .hccr-pagekaart{margin:32px 0 0; max-width:none;}
.hccr-mg .hccr-tabbar{align-self:flex-start;}
.hccr-mg__card{padding:22px 24px; border-radius:20px; background:#fff;}
.hccr-mg h2.hccr-mg__label{margin:0 0 8px; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4A6B71;}
.hccr-mg__dl{display:grid; grid-template-columns:minmax(140px, 220px) minmax(0, 1fr); column-gap:24px; margin:0;}
.hccr-mg__dl dt, .hccr-mg__dl dd{margin:0; padding:14px 0; border-bottom:1px solid #EEF3F2;}
.hccr-mg__dl dt{font-size:14px; font-weight:600; color:#4A6B71;}
.hccr-mg__dl dd{font-weight:600; color:#073540; overflow-wrap:anywhere;}
.hccr-mg__dl dt:nth-last-of-type(1), .hccr-mg__dl dd:last-of-type{border-bottom:0;}
.hccr-mg p.hccr-mg__note{margin:0; font-size:15px; color:#4A6B71;}
.hccr-mg p.hccr-mg__msg{margin:0; padding:20px 24px; border-radius:20px; background:#fff; color:#073540;}

.hccr-mg__now{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px;}
.hccr-mg__nowtxt{flex:1 1 280px;}
.hccr-mg p.hccr-mg__big, .hccr-mg dd.hccr-mg__big{margin:0; font-size:22px; font-weight:800; color:#073540;}
.hccr-mg p.hccr-mg__small{margin:2px 0 0; font-size:15px; color:#61757A;}
.hccr-mg__facts{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin:0;}
.hccr-mg__facts dt{font-size:13px; color:#61757A;}
.hccr-mg__facts dd{margin:0; font-weight:700; color:#073540;}

.hccr-mg__sec{display:flex; flex-direction:column; gap:12px;}
.hccr-mg__head h2{margin:8px 4px 0; font-size:22px; font-weight:800; color:#073540;}
.hccr-mg__tablewrap{border-radius:20px; background:#fff; overflow-x:auto;}
.hccr-mg table.hccr-mg__table{width:100%; min-width:680px; margin:0; border:0; border-collapse:collapse; background:transparent; font-size:15px;}
.hccr-mg__table thead th{padding:12px 18px; border:0; border-bottom:1px solid #EEF3F2; background:transparent; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4A6B71; text-align:left;}
.hccr-mg__table td, .hccr-mg__table tbody th{padding:12px 18px; border:0; border-bottom:1px solid #EEF3F2; background:transparent; color:#33474C; text-align:left; vertical-align:middle; font-weight:400;}
.hccr-mg__table tbody th{color:#073540; font-weight:600;}
.hccr-mg table.hccr-mg__table tbody > tr > *, .hccr-mg table.hccr-mg__table tbody > tr:nth-child(odd) > *, .hccr-mg table.hccr-mg__table tbody > tr:hover > *{background:transparent;}
.hccr-mg table.hccr-mg__table tbody + tbody{border-top:0;}
.hccr-mg table.hccr-mg__table tbody > tr.hccr-mg__group > *{background:#F5F9F8; color:#073540; font-weight:700; font-size:14px;}
.hccr-mg__yhead{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; justify-content:space-between; padding:8px 4px 0;}
.hccr-mg__yhead h2{margin:0; font-size:22px; font-weight:800; line-height:1.25; color:#073540;}
.hccr-mg__ymeta{font-size:14px; color:#4A6B71;}
.hccr-mg table.hccr-mg__table--bk{table-layout:fixed;}
.hccr-mg__table--bk thead th:nth-child(1){width:120px;}
.hccr-mg__table--bk thead th:nth-child(3){width:120px;}
.hccr-mg__table--bk thead th:nth-child(4){width:130px;}
.hccr-mg__table--bk thead th:nth-child(5){width:140px;}
.hccr-mg__table tbody:last-child tr:last-child > *{border-bottom:0;}
.hccr-mg__table .hccr-mg__num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.hccr-mg__wj{display:block; font-weight:700; color:#073540;}
.hccr-mg__ref{display:block; font-size:12px; font-weight:400; color:#61757A;}
.hccr-mg__paid{display:block;}
.hccr-mg__via{display:block; font-size:12px; color:#61757A;}
.hccr-mg__date{white-space:nowrap; font-variant-numeric:tabular-nums;}
.hccr-mg__none{color:#9AB0B3;}
.hccr-mg a.hccr-mg__play{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; background:#E3F2EF; color:#0A4746; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;}
.hccr-mg a.hccr-mg__play:hover{background:#0F8A86; color:#fff;}
.hccr-mg__table--bk .hccr-nps-pill__tip{left:auto; right:0;}

.hccr-mg__st{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;}
.hccr-mg__st--groen{background:#E3F2EF; color:#0A4746;}
.hccr-mg__st--oranje{background:#FDF0DD; color:#7A4A06;}
.hccr-mg__st--rood{background:#FBE4E1; color:#8E2A1E;}
.hccr-mg__st--grijs{background:#EEF3F2; color:#4A6B71;}

.hccr-mg__old{border-radius:20px; background:#fff;}
.hccr-mg__old > summary{display:flex; align-items:center; min-height:48px; padding:6px 18px; color:#0A4746; font-weight:700; cursor:pointer;}
.hccr-mg__old > summary:focus-visible{outline:3px solid #f0b400; outline-offset:2px; border-radius:20px;}
.hccr-mg__old .hccr-mg__tablewrap{border-radius:0 0 20px 20px; border-top:1px solid #EEF3F2;}
.hccr-mg__legend{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:18px 24px; border-radius:20px; background:#fff;}
.hccr-mg__legend h2.hccr-mg__label{margin:0;}

@media (max-width:600px){
  .hccr-mg__dl{grid-template-columns:minmax(0, 1fr);}
  .hccr-mg__dl dt{padding-bottom:0; border-bottom:0;}
  .hccr-mg__dl dd{padding-top:2px;}
  .hccr-mg__card{padding:18px;}
}

/* ===========================================================================
 * Alle opnames (stijl A, 29 okt 2026) — zie hccr_ao_render() in functions.php.
 * Elke opname is één link met een kaart en een lijstrij; .is-lijst kiest welke.
 * ======================================================================== */
.hccr-ao{max-width:1072px; margin:0 auto; display:flex; flex-direction:column; gap:20px; color:#073540;}
.hccr-ao [hidden]{display:none !important;}
.hccr-ao .hccr-pagekaart{margin:32px 0 0; max-width:none;}
.hccr-ao__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;}
.hccr-ao__view{display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:#fff;}
.hccr-ao__view button, .hccr-ao__view button:hover, .hccr-ao__view button:focus{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0; padding:0 14px; border:0; border-radius:10px;
  background:transparent; color:#073540; font:inherit; font-size:14px; font-weight:700; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer;
}
.hccr-ao__view button:hover{background:#EEF3F2;}
.hccr-ao__view button[aria-pressed="true"]{background:#073540; color:#fff;}
.hccr-ao__view button:focus-visible{outline:3px solid #f0b400; outline-offset:2px;}

.hccr-ao__filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding:18px 20px; border-radius:20px; background:#fff;}
.hccr-ao__field{flex:0 1 220px; display:flex; flex-direction:column; gap:6px;}
.hccr-ao__field--q{flex:1 1 320px; min-width:0;}
.hccr-ao__field label{font-size:14px; font-weight:700; color:#073540;}
.hccr-ao input.hccr-ao__q, .hccr-ao select.hccr-ao__jaar{
  width:100%; height:48px; margin:0; padding:0 14px; box-sizing:border-box; border:1px solid #C9D8D6; border-radius:12px;
  background:#fff; color:#073540; font:inherit; font-size:16px; box-shadow:none;
}
.hccr-ao input.hccr-ao__q:focus, .hccr-ao select.hccr-ao__jaar:focus{border-color:#0F8A86; outline:2px solid #0F8A86; outline-offset:1px;}
.hccr-ao button.hccr-ao__doc, .hccr-ao button.hccr-ao__doc:hover, .hccr-ao button.hccr-ao__doc:focus{
  min-height:48px; margin:0; padding:0 16px; border:1px solid #C9D8D6; border-radius:12px; background:#fff; color:#073540;
  font:inherit; font-size:15px; font-weight:600; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer;
}
.hccr-ao button.hccr-ao__doc[aria-pressed="true"]{border-color:#0F8A86; background:#E3F2EF; color:#0A4746; font-weight:700;}
.hccr-ao button.hccr-ao__doc[aria-pressed="true"]::before{content:"\2713\00a0";}
.hccr-ao button.hccr-ao__reset, .hccr-ao button.hccr-ao__reset:hover, .hccr-ao button.hccr-ao__reset:focus{
  min-height:48px; margin:0; padding:0 6px; border:0; background:transparent; color:#0A4746; font:inherit; font-size:15px;
  font-weight:600; text-decoration:underline; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer;
}
.hccr-ao p.hccr-ao__result{margin:0; font-size:15px; color:#4A6B71;}
.hccr-ao h2.hccr-ao__label{margin:0; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4A6B71;}
.hccr-ao p.hccr-ao__muted{margin:0; font-size:15px; color:#61757A;}

/* Binnenkort gepland */
.hccr-ao__planned{display:flex; flex-direction:column; gap:6px; padding:22px 24px; border-radius:20px; background:#fff;}
.hccr-ao__pgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; margin-top:10px;}
.hccr-ao__pwat{display:flex; flex-direction:column; gap:2px;}
.hccr-ao__pthead{display:none;}
.hccr-ao__pitem{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid #DCE6E4; border-radius:14px;}
.hccr-ao__pico, .hccr-ao__pkort, .hccr-ao__pstatus, .hccr-ao__ptijd{display:none;}
.hccr-ao__pdag{align-self:flex-start; padding:3px 10px; border-radius:999px; background:#EEF3F2; color:#0A4746; font-size:13px; font-weight:600;}
.hccr-ao a.hccr-ao__ptitle{color:#073540; font-size:16px; font-weight:700; line-height:1.3; text-decoration:none;}
.hccr-ao a.hccr-ao__ptitle:hover{text-decoration:underline;}
.hccr-ao__ples{font-size:14px; color:#4A6B71;}
.hccr-ao button.hccr-ao__askbtn, .hccr-ao button.hccr-ao__askbtn:hover, .hccr-ao button.hccr-ao__askbtn:focus{
  align-self:flex-start; min-height:44px; margin:4px 0 0; padding:0 16px; border:0; border-radius:12px; background:#E3F2EF; color:#0A4746;
  font:inherit; font-size:15px; font-weight:700; white-space:nowrap; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer;
}
.hccr-ao button.hccr-ao__askbtn:hover{background:#CFE9E4;}

/* Werkjaren en opnames */
.hccr-ao__empty{padding:28px 24px; border-radius:20px; background:#fff; text-align:center;}
.hccr-ao__empty p{margin:0 0 8px; color:#4A6B71;}
.hccr-ao__empty strong{color:#073540;}
.hccr-ao button.hccr-ao__reset2{min-height:46px; margin-top:8px; padding:0 20px; border:0; border-radius:12px; background:#0F8A86; color:#fff; font:inherit; font-weight:700; cursor:pointer;}
.hccr-ao__year{display:flex; flex-direction:column; gap:12px;}
.hccr-ao__yhead{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; justify-content:space-between; padding:8px 4px 0;}
.hccr-ao h2{margin:0; font-size:22px; font-weight:800; color:#073540; line-height:1.25;}
.hccr-ao__ymeta{font-size:14px; color:#4A6B71;}
.hccr-ao__grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;}
.hccr-ao__thead, .hccr-ao__row{display:none;}
.hccr-ao a.hccr-ao__item{display:block; color:#073540; text-decoration:none;}
.hccr-ao__card{display:flex; gap:14px; height:100%; box-sizing:border-box; padding:12px; border-radius:20px; background:#fff; transition:box-shadow .15s;}
.hccr-ao a.hccr-ao__item:hover .hccr-ao__card{box-shadow:0 6px 20px rgba(7,53,64,.10);}
.hccr-ao a.hccr-ao__item:focus-visible{outline:3px solid #f0b400; outline-offset:2px; border-radius:20px;}
.hccr-ao__thumb{position:relative; flex:0 0 168px; height:95px; border-radius:12px; overflow:hidden; background:#E3EEEC;}
.hccr-ao__img, .hccr-ao__img img, .hccr-ao__img .hccr-fallback{display:block; width:100%; height:100%; object-fit:cover; margin:0; border-radius:0;}
.hccr-ao__img .hccr-fallback{display:flex; align-items:center; justify-content:center;}
.hccr-ao__img .hccr-fallback svg{width:36%; height:auto;}
.hccr-ao__play{position:absolute; right:8px; bottom:8px; width:32px; height:32px; border-radius:50%; background:#0F8A86; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25);}
.hccr-ao__body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px;}
.hccr-ao__date{font-size:13px; font-weight:700; letter-spacing:.02em; color:#0F7A76;}
.hccr-ao__title{font-size:17px; font-weight:700; line-height:1.3;}
.hccr-ao__les{font-size:14px; color:#4A6B71;}
.hccr-ao__desc{font-size:14px; line-height:1.45; color:#33474C; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hccr-ao__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.hccr-ao__tag{padding:2px 9px; border-radius:999px; background:#EEF3F2; color:#2E5C66; font-size:12px; font-weight:600; white-space:nowrap;}
.hccr-ao__tag--erbij{background:#E3F2EF; color:#0A4746; font-weight:700;}
.hccr-ao__tag--gemist, .hccr-ao__tag--gepland{background:#FDF0DD; color:#7A4A06; font-weight:700;}
.hccr-ao__tags .hccr-nps-pill__txt{padding:2px 9px; font-size:12px;}

/* Weergave Lijst: dezelfde links als tabelrijen. */
.hccr-ao.is-lijst .hccr-ao__grid{display:block; border-radius:20px; background:#fff; overflow-x:auto;}
.hccr-ao.is-lijst .hccr-ao__card{display:none;}
.hccr-ao.is-lijst .hccr-ao__thead, .hccr-ao.is-lijst .hccr-ao__row{
  display:grid; grid-template-columns:64px 96px minmax(0, 1fr) 56px 160px 48px 104px 24px; align-items:center;
  column-gap:14px; min-width:820px; padding:10px 16px; border-bottom:1px solid #EEF3F2;
}
.hccr-ao.is-lijst .hccr-ao__thead{padding-top:12px; padding-bottom:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4A6B71;}
.hccr-ao.is-lijst .hccr-ao__item:last-child .hccr-ao__row{border-bottom:0;}
.hccr-ao.is-lijst a.hccr-ao__item:hover .hccr-ao__row{background:#F5F9F8;}
.hccr-ao__mini{display:block; width:64px; height:36px; border-radius:8px; overflow:hidden; background:#E3EEEC;}
.hccr-ao__mini .hccr-fallback svg{width:18px;}
.hccr-ao__c{min-width:0; font-size:14px; color:#33474C;}
.hccr-ao__c--dat{font-variant-numeric:tabular-nums;}
.hccr-ao__c--wat{display:flex; flex-direction:column;}
.hccr-ao__rtit{font-size:15px; font-weight:700; line-height:1.3; color:#073540;}
.hccr-ao__rles{font-size:13px; color:#4A6B71;}
.hccr-ao__ok{color:#0A4746; font-weight:700;}
.hccr-ao__none{color:#9AB0B3;}
.hccr-ao__c--nps .hccr-nps-pill__tip{left:auto; right:0;}
.hccr-ao__arrow{color:#073540; font-weight:700;}
.hccr-ao.is-lijst .hccr-ao__pgrid{display:block; margin:10px -24px -22px; overflow-x:auto;}
.hccr-ao.is-lijst .hccr-ao__pthead, .hccr-ao.is-lijst .hccr-ao__pitem{
  display:grid; grid-template-columns:64px 96px minmax(0, 1fr) 80px 110px 150px; grid-template-areas:"ico dat wat st uur ask";
  align-items:center; column-gap:14px; min-width:760px; padding:10px 16px; border:0; border-top:1px solid #EEF3F2; border-radius:0;
}
.hccr-ao.is-lijst .hccr-ao__pthead{padding-top:12px; padding-bottom:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4A6B71;}
.hccr-ao.is-lijst .hccr-ao__pico{grid-area:ico; display:flex; align-items:center; justify-content:center; width:64px; height:36px; border-radius:8px; background:#DCE6E4; color:#2E5C66;}
.hccr-ao.is-lijst .hccr-ao__pdate{grid-area:dat;}
.hccr-ao.is-lijst .hccr-ao__pdag{display:none;}
.hccr-ao.is-lijst .hccr-ao__pkort{display:inline; font-size:14px; color:#33474C; font-variant-numeric:tabular-nums;}
.hccr-ao.is-lijst .hccr-ao__pwat{grid-area:wat;}
.hccr-ao.is-lijst a.hccr-ao__ptitle{font-size:15px;}
.hccr-ao.is-lijst .hccr-ao__ples{font-size:13px;}
.hccr-ao.is-lijst .hccr-ao__pstatus{grid-area:st; display:block;}
.hccr-ao.is-lijst .hccr-ao__ptijd{grid-area:uur; display:block; font-size:14px; color:#33474C;}
.hccr-ao.is-lijst .hccr-ao__pask{grid-area:ask; justify-self:end;}
.hccr-ao.is-lijst button.hccr-ao__askbtn{margin:0; min-height:40px; font-size:14px;}

/* Vraag aan de lesgever: venster */
dialog.hccr-ao__dlg{width:min(560px, calc(100vw - 32px)); max-width:none; padding:0; border:0; border-radius:20px; background:#fff; color:#073540; box-shadow:0 20px 60px rgba(7,53,64,.3);}
dialog.hccr-ao__dlg::backdrop{background:rgba(7,53,64,.55);}
.hccr-ao__dlgform{display:flex; flex-direction:column; gap:14px; margin:0; padding:24px 26px;}
.hccr-ao__dlghead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.hccr-ao__dlgdate{display:inline-block; padding:3px 10px; border-radius:999px; background:#EEF3F2; color:#0A4746; font-size:13px; font-weight:600;}
.hccr-ao h2.hccr-ao__dlgtitle{margin:8px 0 4px; font-size:20px; line-height:1.3;}
.hccr-ao p.hccr-ao__dlgles{margin:0; font-size:14px; color:#61757A;}
.hccr-ao button.hccr-ao__dlgclose, .hccr-ao button.hccr-ao__dlgclose:hover, .hccr-ao button.hccr-ao__dlgclose:focus{flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:12px; background:#EEF3F2; color:#073540; font:inherit; font-size:22px; line-height:1; box-shadow:none; cursor:pointer;}
.hccr-ao__dlgask{display:flex; flex-direction:column; gap:10px;}
.hccr-ao__dlgask label{font-size:14px; font-weight:700;}
.hccr-ao__dlgask textarea{width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid #C9D8D6; border-radius:12px; font:inherit; font-size:16px; color:#073540; resize:vertical;}
.hccr-ao__dlgask textarea:focus{border-color:#0F8A86; outline:2px solid #0F8A86; outline-offset:1px;}
.hccr-ao p.hccr-ao__dlgmsg{margin:0; color:#8E2A1E; font-weight:600;}
.hccr-ao p.hccr-ao__dlgok{margin:0; padding:14px 16px; border-radius:14px; background:#E3F2EF; color:#073540; font-weight:600;}
.hccr-ao__dlgrow{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px;}
.hccr-ao button.hccr-ao__btn, .hccr-ao button.hccr-ao__btn:hover, .hccr-ao button.hccr-ao__btn:focus{min-height:46px; margin:0; padding:0 20px; border:0; border-radius:12px; background:#0F8A86; color:#fff; font:inherit; font-weight:700; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer;}
.hccr-ao button.hccr-ao__btn:hover{background:#0B6A72;}
.hccr-ao button.hccr-ao__btn--soft, .hccr-ao button.hccr-ao__btn--soft:hover, .hccr-ao button.hccr-ao__btn--soft:focus{border:1px solid #C9D8D6; background:transparent; color:#073540; font-weight:600;}
.hccr-ao button.hccr-ao__btn:disabled{opacity:.6; cursor:default;}

/* Vraagvak onderaan */
.hccr-ao__ask{display:flex; flex-direction:column; gap:12px; padding:28px 32px; border-radius:20px; background:#073540; color:#fff;}
.hccr-ao__ask h2.hccr-ao__label{color:#A9D6D0;}
.hccr-ao__ask p.hccr-ao__muted{color:#D6E7E5;}
.hccr-ao__ask .hccr-ai{margin:0;}

@media (max-width:760px){
  .hccr-ao__grid{grid-template-columns:minmax(0, 1fr);}
  .hccr-ao__thumb{flex-basis:120px; height:68px;}
  .hccr-ao__card{gap:12px;}
  .hccr-ao__view{display:none;}
}
/* Alle opnames: vraagvak zoals in het ontwerp */
.hccr-ao__ask .hccr-ai--hero { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-family: inherit; font-size: 17px; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__form { display: flex; flex-direction: column; gap: 14px; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__row { display: flex; flex-wrap: wrap; gap: 12px; }
.hccr-ao__ask .hccr-ai--hero input.hccr-ai__q, .hccr-ao__ask .hccr-ai--hero input.hccr-ai__q:focus { flex: 999 1 380px; min-width: 0; height: 56px; margin: 0; padding: 0 20px; box-sizing: border-box; border: 2px solid #8FC4C7; border-radius: 14px; background: #fff; color: #073540; font: inherit; font-size: 18px; box-shadow: none; }
.hccr-ao__ask .hccr-ai--hero input.hccr-ai__q:focus { border-color: #fff; outline: none; }
.hccr-ao__ask .hccr-ai--hero button.hccr-ai__send, .hccr-ao__ask .hccr-ai--hero button.hccr-ai__send:hover, .hccr-ao__ask .hccr-ai--hero button.hccr-ai__send:focus { flex: 1 1 160px; height: 56px; min-height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 14px; background: #0F8A86; color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: background-color .12s; }
.hccr-ao__ask .hccr-ai--hero button.hccr-ai__send:hover { background: #0B6A72; }
.hccr-ao__ask .hccr-ai--hero button.hccr-ai__send:focus-visible, .hccr-ao__ask .hccr-ai--hero input.hccr-ai__q:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__chips { display: none; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__bar { margin: 0; gap: 16px; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__opt, .hccr-ao__ask .hccr-ai--hero .hccr-ai__left { color: #D6E7E5; font-size: 14px; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__left { margin-left: auto; }
.hccr-ao__ask .hccr-ai--hero select.hccr-ai__model { color: #073540; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__log:not(:empty) { margin-top: 6px; padding: 28px; border-radius: 16px; background: #fff; color: #073540; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__question { background: #EEF3F2; border-left: 0; border-radius: 12px; color: #073540; }
.hccr-ao__ask .hccr-ai--hero .hccr-ai__answer p { margin: 0 0 10px; }
/* Document in een overlay (sessiepagina) */
html.hccr-pdf-open { overflow: hidden; }
dialog.hccr-pdf { width: min(1000px, 100vw - 32px); height: calc(100vh - 32px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 20px; background: #EEF3F2; color: #073540; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.hccr-pdf[open] { display: flex; }
dialog.hccr-pdf::backdrop { background: rgba(6, 24, 27, .72); }
.hccr-pdf__bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; background: #073540; color: #fff; }
dialog.hccr-pdf h2.hccr-pdf__title { margin: 0; flex: 1 1 240px; min-width: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #fff; }
.hccr-pdf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
dialog.hccr-pdf .hccr-pdf__btn, dialog.hccr-pdf .hccr-pdf__btn:hover, dialog.hccr-pdf .hccr-pdf__btn:focus { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px; border: 2px solid #8FC4C7; border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: none; }
dialog.hccr-pdf .hccr-pdf__btn:hover { background: #0B4A55; }
dialog.hccr-pdf .hccr-pdf__btn--main, dialog.hccr-pdf .hccr-pdf__btn--main:hover, dialog.hccr-pdf .hccr-pdf__btn--main:focus { border-color: #0F8A86; background: #0F8A86; }
dialog.hccr-pdf .hccr-pdf__btn--main:hover { background: #0B6A72; border-color: #0B6A72; }
dialog.hccr-pdf .hccr-pdf__btn[disabled], dialog.hccr-pdf .hccr-pdf__btn[aria-disabled="true"] { opacity: .45; cursor: default; }
dialog.hccr-pdf .hccr-pdf__close, dialog.hccr-pdf .hccr-pdf__close:hover, dialog.hccr-pdf .hccr-pdf__close:focus { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; box-shadow: none; cursor: pointer; transition: none; }
dialog.hccr-pdf .hccr-pdf__close:hover { background: rgba(255,255,255,.2); }
dialog.hccr-pdf :focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-pdf__body { flex: 1 1 auto; overflow: auto; padding: 24px; }
dialog.hccr-pdf p.hccr-pdf__msg { margin: 40px auto; max-width: 480px; text-align: center; font-size: 17px; color: #4A6B71; }
.hccr-pdf__pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hccr-pdf__slot { width: 100%; max-width: 860px; border-radius: 4px; background: #fff; box-shadow: 0 2px 10px rgba(7,53,64,.15); overflow: hidden; }
dialog.hccr-pdf img.hccr-pdf__page { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 600px) {
	dialog.hccr-pdf { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
	.hccr-pdf__bar { padding: 10px 12px 10px 16px; }
	dialog.hccr-pdf h2.hccr-pdf__title { flex-basis: 100%; font-size: 17px; }
	.hccr-pdf__body { padding: 12px; }
}
@media print {
	@page { margin: 10mm; }
	html.hccr-pdf-open, html.hccr-pdf-open body { overflow: visible !important; background: #fff !important; }
	html.hccr-pdf-open body > *:not(dialog.hccr-pdf) { display: none !important; }
	html.hccr-pdf-open dialog.hccr-pdf { position: static; display: block; width: auto; height: auto; max-height: none; border-radius: 0; box-shadow: none; background: #fff; overflow: visible; }
	html.hccr-pdf-open dialog.hccr-pdf::backdrop { display: none; }
	html.hccr-pdf-open .hccr-pdf__bar, html.hccr-pdf-open p.hccr-pdf__msg { display: none !important; }
	html.hccr-pdf-open .hccr-pdf__body { padding: 0; overflow: visible; }
	html.hccr-pdf-open .hccr-pdf__pages { display: block; }
	html.hccr-pdf-open .hccr-pdf__slot { max-width: none; box-shadow: none; border-radius: 0; page-break-after: always; break-after: page; }
	html.hccr-pdf-open .hccr-pdf__slot:last-child { page-break-after: auto; break-after: auto; }
	html.hccr-pdf-open img.hccr-pdf__page { width: 100%; height: auto; }
}

/* Startpagina v2: nieuwste opname groot, volgende bijeenkomst + meldingen naast elkaar */
.hccr-home__grid--feat { display: flex; flex-wrap: wrap; gap: 24px; grid-template-columns: none; }
.hccr-home a.hccr-home__rec--big { flex: 2 1 560px; min-width: 0; border-radius: 20px; }
.hccr-home__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hccr-home__side a.hccr-home__rec { flex: 1; }
.hccr-home__side .hccr-home__thumb { aspect-ratio: 16 / 7.5; }
.hccr-home__side .hccr-home__recbody { padding: 14px 18px 16px; gap: 4px; }
.hccr-home__rec--big .hccr-home__play { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.hccr-home__rec--big .hccr-home__play svg { width: 36px; height: 36px; }
.hccr-home__rec--big .hccr-home__recbody { padding: 20px 24px 24px; }
.hccr-home__rec--big .hccr-home__rectitle { font-size: 22px; font-weight: 800; }
.hccr-home__rec--big .hccr-home__recmeta { font-size: 15px; }
.hccr-home__new { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: #073540; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.hccr-home__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; }
.hccr-home__duo:empty { display: none; }
.hccr-home__duo .hccr-home__card { padding: 28px; gap: 14px; }
.hccr-home__duo .hccr-home__nexttitle { font-size: 24px; }

/* Meldingen (startpagina en /waarschuwingen/) */
.hccr-al__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.hccr-al a.hccr-al__all { font-size: 15px; font-weight: 600; color: #0B6A72; }
.hccr-al__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hccr-al button.hccr-al__chip, .hccr-al button.hccr-al__chip:hover, .hccr-al button.hccr-al__chip:focus { min-height: 44px; margin: 0; padding: 0 16px; border: 2px solid #DDE9E8; border-radius: 999px; background: #fff; color: #073540; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; transition: none; }
.hccr-al button.hccr-al__chip:hover { border-color: #8FC4C7; }
.hccr-al button.hccr-al__chip[aria-pressed="true"], .hccr-al button.hccr-al__chip[aria-pressed="true"]:hover, .hccr-al button.hccr-al__chip[aria-pressed="true"]:focus { border-color: #073540; background: #073540; color: #fff; }
.hccr-al :focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-al__list { display: flex; flex-direction: column; gap: 8px; }
.hccr-al__item { border-radius: 14px; background: #FBF4E8; --al-ink: #7A4A0E; }
.hccr-al__item--updates { background: #EAF3F6; --al-ink: #0B5A75; }
.hccr-al__item[hidden] { display: none; }
.hccr-al summary.hccr-al__sum { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 14px; box-sizing: border-box; list-style: none; cursor: pointer; }
.hccr-al summary.hccr-al__sum::-webkit-details-marker { display: none; }
.hccr-al__icon { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--al-ink); }
.hccr-al__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hccr-al .hccr-al__kind { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--al-ink); }
.hccr-al__title { font-size: 16px; font-weight: 700; line-height: 1.35; color: #073540; }
.hccr-al__chev { flex: 0 0 18px; margin-top: 10px; color: #4A6B71; transition: transform .15s; }
.hccr-al details[open] .hccr-al__chev { transform: rotate(180deg); }
.hccr-al__body { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px 62px; }
.hccr-al p.hccr-al__tip { margin: 0; font-size: 15px; line-height: 1.55; color: #073540; }
.hccr-al a.hccr-al__src { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--al-ink); text-decoration: underline; text-underline-offset: 3px; }
.hccr-al p.hccr-al__empty { margin: 0; padding: 16px; border-radius: 14px; background: #EEF3F2; color: #4A6B71; }
.hccr-al p.hccr-al__empty[hidden] { display: none; }
.hccr-al p.hccr-al__note { margin: 0; font-size: 13px; color: #4A6B71; }

/* Pagina /waarschuwingen/ */
.hccr-alp { max-width: 820px; margin: 0 auto; padding: 32px 0 48px; display: flex; flex-direction: column; gap: 20px; color: #073540; }
.hccr-alp h1.hccr-alp__title { margin: 0 0 6px; font-size: 34px; font-weight: 800; line-height: 1.2; color: #073540; }
.hccr-alp p.hccr-alp__lead { margin: 0; font-size: 17px; line-height: 1.6; color: #4A6B71; }
.hccr-alp__list { display: flex; flex-direction: column; gap: 12px; }
.hccr-alp__item { display: flex; gap: 16px; padding: 22px; border-radius: 20px; }
.hccr-alp__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hccr-alp h2.hccr-alp__h { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; color: #073540; }
.hccr-alp p.hccr-al__tip { font-size: 16px; }
.hccr-alp p.hccr-alp__note { margin: 0; font-size: 15px; line-height: 1.6; color: #4A6B71; }
.hccr-alp p.hccr-alp__note a { color: #0B6A72; }

@media (max-width: 600px) {
	.hccr-home__duo { grid-template-columns: 1fr; }
	.hccr-home__duo .hccr-home__card { padding: 24px 20px; }
	.hccr-home__rec--big .hccr-home__rectitle { font-size: 19px; }
	.hccr-al__body { padding-left: 14px; }
	.hccr-alp { padding: 20px 0 32px; }
	.hccr-alp h1.hccr-alp__title { font-size: 28px; }
	.hccr-alp__item { padding: 18px 16px; gap: 12px; }
}

.hccr-home__recsum { font-size: 16px; line-height: 1.6; color: #3A5A60; margin-top: 4px; }
.hccr-home__rec--big .hccr-home__badge { margin-top: 4px; }
@media (max-width: 600px) { .hccr-home__recsum { font-size: 15px; } }

/* Vraagbox: Verder zoeken op het web */
.hccr-web { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #DDE9E8; }
a.hccr-web__btn, a.hccr-web__btn:visited { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 2px solid #DDE9E8; border-radius: 12px; background: #fff; color: #073540; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
a.hccr-web__btn:hover { border-color: #073540; color: #073540; }
a.hccr-web__btn:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-web__note { font-size: 13px; color: #4A6B71; }

/* Vraagbox (basis; verhuisd uit de plugin HCCR Leden-AI) */
.hccr-ai {
	--hccr-ai-accent: #005c5b;
	--hccr-ai-bg: #f5f7fa;
	--hccr-ai-line: #d5dbe3;
	--hccr-ai-text: #073540;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.55;
	color: var(--hccr-ai-text);
	background: var(--hccr-ai-bg);
	border: 1px solid var(--hccr-ai-line);
	border-radius: 12px;
	padding: 20px;
	margin: 24px 0;
}
.hccr-ai__title { font-size: 1.3em; margin: 0 0 6px; }
.hccr-ai__intro, .hccr-ai__note { margin: 0 0 16px; color: #475463; font-size: .9em; }
.hccr-ai__turn { margin-bottom: 20px; }
.hccr-ai__question {
	background: #fff; border-left: 4px solid var(--hccr-ai-accent);
	padding: 10px 14px; margin: 0 0 10px; font-weight: 500; border-radius: 0 8px 8px 0;
}
.hccr-ai__answer p { margin: 0 0 10px; }
.hccr-ai__cite {
	display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 1px;
	font-size: .8em; line-height: 1.6; text-align: center; vertical-align: .1em;
	background: var(--hccr-ai-accent); color: #fff !important; border-radius: 1em; text-decoration: none;
}
.hccr-ai__cite:focus-visible, .hccr-ai__src-link:focus-visible, .hccr-ai__send:focus-visible {
	outline: 3px solid #f0b400; outline-offset: 2px;
}
.hccr-ai__src-title { font-weight: 700; margin: 12px 0 4px; }
.hccr-ai__sources { margin: 0; padding-left: 1.4em; }
.hccr-ai__sources li { margin-bottom: 10px; }
.hccr-ai__src-link { color: var(--hccr-ai-accent); font-weight: 500; white-space: nowrap; }
.hccr-ai__excerpt { display: block; color: #5b6774; font-size: .85em; font-style: italic; }
.hccr-ai__wait { color: #5b6774; font-style: italic; }
.hccr-ai__error { color: #a4161a; font-weight: 500; }
.hccr-ai__debug { font-size: .75em; color: #7a8591; margin-top: 6px; }
.hccr-ai textarea.hccr-ai__q {
	width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px;
	border: 2px solid var(--hccr-ai-line); border-radius: 8px; background: #fff; resize: vertical;
}
.hccr-ai textarea.hccr-ai__q:focus { border-color: var(--hccr-ai-accent); outline: none; }
.hccr-ai__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.hccr-ai__opt { font-size: .9em; display: inline-flex; align-items: center; gap: 6px; }
.hccr-ai__opt input { width: 20px; height: 20px; }
.hccr-ai__left { font-size: .85em; color: #5b6774; margin-left: auto; }
.hccr-ai button.hccr-ai__send,
.hccr-ai button.hccr-ai__send:hover,
.hccr-ai button.hccr-ai__send:focus {
	font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; margin: 0; padding: 10px 22px;
	border: 0; border-radius: 9px; background: var(--hccr-ai-accent); color: #fff; cursor: pointer;
	min-height: 48px; text-transform: none; letter-spacing: normal; box-shadow: none; transition: background-color .12s;
}
.hccr-ai button.hccr-ai__send:hover { background: #073540; }
.hccr-ai button.hccr-ai__send:disabled { opacity: .6; cursor: wait; }
.hccr-ai select.hccr-ai__model { font: inherit; font-size: 15px; padding: 6px 8px; border: 2px solid var(--hccr-ai-line); border-radius: 8px; color: var(--hccr-ai-text); background: #fff; }
@media (max-width: 600px) {
	.hccr-ai { padding: 14px; font-size: 17px; }
	.hccr-ai__left { margin-left: 0; }
	.hccr-ai button.hccr-ai__send { width: 100%; }
}

/* Onderwerpen voorstellen en stemmen */
.hccr-tp { max-width: 880px; margin: 0 auto; padding: 32px 0 56px; display: flex; flex-direction: column; gap: 24px; color: #073540; }
.hccr-tp h1.hccr-tp__h1 { margin: 0 0 6px; font-size: 34px; font-weight: 800; line-height: 1.2; color: #073540; }
.hccr-tp p.hccr-tp__lead { margin: 0; font-size: 17px; line-height: 1.6; color: #4A6B71; }
.hccr-tp__card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: #fff; }
.hccr-tp h2.hccr-tp__label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #4A6B71; }
.hccr-tp h2.hccr-tp__h2 { margin: 0; font-size: 22px; font-weight: 800; color: #073540; }
.hccr-tp__list { display: flex; flex-direction: column; gap: 10px; }
.hccr-tp__item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; border: 1px solid #DDE9E8; border-radius: 14px; scroll-margin-top: 120px; }
.hccr-mb-keuze{cursor:pointer;position:relative}
.hccr-mb-keuze input{position:absolute;opacity:0;width:1px;height:1px}
.hccr-mb-keuze:has(input:checked){border:2px solid #0F8A86;padding:13px 15px;background:#F4F8F7}
.hccr-mb-keuze:has(input:checked) .hccr-tp__count{background:#E3F4EF;color:#005C5B}
.hccr-mb-keuze:has(input:focus-visible){outline:3px solid #F0B400;outline-offset:2px}
.hccr-mb-aanvraag__set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.hccr-mb-aanvraag__set legend{margin:0 0 10px}
.hccr-mb-aanvraag [data-eigen],.hccr-mb-aanvraag [data-ander],.hccr-mb-aanvraag [data-nee]{display:flex;flex-direction:column;gap:8px}
.hccr-mb-aanvraag [hidden]{display:none!important}
.hccr-tp__item:target, .hccr-tp__item.is-target { border-color: #0F8A86; box-shadow: 0 0 0 2px #0F8A86; }
.hccr-tp button.hccr-tp__vote, .hccr-tp button.hccr-tp__vote:hover, .hccr-tp button.hccr-tp__vote:focus { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; min-height: 60px; margin: 0; padding: 0; border: 2px solid #DDE9E8; border-radius: 14px; background: #fff; color: #005C5B; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-tp__vote:hover { border-color: #8FC4C7; }
.hccr-tp button.hccr-tp__vote[aria-pressed="true"] { border-color: #005C5B; background: #005C5B; color: #fff; }
.hccr-tp button.hccr-tp__vote:disabled { opacity: .6; cursor: wait; }
.hccr-tp__n { font-size: 16px; font-weight: 800; line-height: 1.1; }
.hccr-tp__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hccr-tp p.hccr-tp__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.hccr-tp__pill { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #E3F4EF; color: #005C5B; font-size: 13px; font-weight: 700; vertical-align: 2px; }
.hccr-tp p.hccr-tp__desc { margin: 0; font-size: 15px; line-height: 1.55; color: #3A5A60; }
.hccr-tp p.hccr-tp__by, .hccr-tp p.hccr-tp__muted, .hccr-tp span.hccr-tp__muted { margin: 0; font-size: 14px; line-height: 1.5; color: #4A6B71; }
.hccr-tp form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hccr-tp form[hidden] { display: none; }
.hccr-tp label.hccr-tp__lab { font-size: 15px; font-weight: 700; color: #073540; }
.hccr-tp .hccr-tp__in, .hccr-tp .hccr-tp__in:focus { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 2px solid #DDE9E8; border-radius: 12px; background: #fff; color: #073540; font: inherit; font-size: 17px; box-shadow: none; }
.hccr-tp .hccr-tp__in:focus { border-color: #0B6A72; outline: none; }
.hccr-tp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.hccr-tp button.hccr-tp__btn, .hccr-tp button.hccr-tp__btn:hover, .hccr-tp button.hccr-tp__btn:focus { min-height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 12px; background: #005C5B; color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-tp__btn:hover { background: #073540; }
.hccr-tp button.hccr-tp__btn--soft, .hccr-tp button.hccr-tp__btn--soft:hover, .hccr-tp button.hccr-tp__btn--soft:focus { background: #EEF3F2; color: #073540; }
.hccr-tp button.hccr-tp__btn:disabled { opacity: .55; cursor: not-allowed; }
.hccr-tp :focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-tp__hint { padding: 14px 16px; border-radius: 14px; background: #EEF3F2; }
.hccr-tp p.hccr-tp__hinth { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.hccr-tp__hint ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.6; }
.hccr-tp__hint a { color: #0B6A72; font-weight: 600; }
.hccr-tp__help, .hccr-tp__done { display: flex; flex-direction: column; gap: 10px; }
.hccr-tp__help:empty, .hccr-tp__done:empty, .hccr-tp__tdone:empty { display: none; }
.hccr-tp p.hccr-tp__err { margin: 0; color: #A4161A; font-weight: 600; }
.hccr-tp p.hccr-tp__ok { margin: 0; padding: 14px 16px; border-radius: 14px; background: #E3F4EF; color: #005C5B; font-weight: 600; }
section.hccr-tp__card[hidden] { display: none; }
.hccr-tp__count { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; min-height: 60px; border-radius: 14px; background: #EEF3F2; color: #4A6B71; }
.hccr-tp__cl { font-size: 12px; }
.hccr-tp__pill--done { background: #EEF3F2; color: #4A6B71; }
.hccr-tp a.hccr-tp__rec { align-self: flex-start; font-size: 15px; font-weight: 700; color: #0B6A72; }
.hccr-tp__opt { font-weight: 400; color: #4A6B71; }
.hccr-tp label.hccr-tp__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: #073540; cursor: pointer; }
.hccr-tp label.hccr-tp__check input { width: 22px; height: 22px; margin: 0; }
.hccr-tp fieldset.hccr-tp__fs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 14px 16px; border: 1px solid #DDE9E8; border-radius: 14px; }
.hccr-tp fieldset.hccr-tp__fs legend { padding: 0 6px; }
.hccr-tp__other { display: flex; flex-direction: column; gap: 8px; }
.hccr-tp__other[hidden], .hccr-tp p.hccr-tp__for[hidden] { display: none; }
.hccr-tp__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.hccr-tp__two > div { display: flex; flex-direction: column; gap: 8px; }
.hccr-tp button.hccr-tp__link, .hccr-tp button.hccr-tp__link:hover, .hccr-tp button.hccr-tp__link:focus { align-self: flex-start; min-height: 36px; margin: 0; padding: 0; border: 0; background: none; color: #0B6A72; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-tp__pill--wait { background: #FBF4E8; color: #7A4A0E; }
.hccr-tp p.hccr-tp__hintp { margin: 8px 0 0; font-size: 14px; color: #3A5A60; }
.hccr-tp p.hccr-tp__for { margin: 0; padding: 10px 14px; border-radius: 12px; background: #E3F4EF; color: #005C5B; font-weight: 700; }
.hccr-tp label.hccr-tp__check input[type=radio] { width: 22px; height: 22px; margin: 0; }
@media (max-width: 600px) {
	.hccr-tp { padding: 20px 0 40px; }
	.hccr-tp h1.hccr-tp__h1 { font-size: 28px; }
	.hccr-tp__card { padding: 20px 16px; }
}

/* Startpagina: blok onderwerpen */
.hccr-tph__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.hccr-tph a.hccr-tph__all { font-size: 15px; font-weight: 600; color: #0B6A72; }
.hccr-tph ol.hccr-tph__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hccr-tph ol.hccr-tph__list li { display: flex; margin: 0; padding: 0; }
.hccr-tph ol.hccr-tph__list li > a { flex: 1; }
.hccr-tph a.hccr-tph__item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 14px; border: 1px solid #DDE9E8; border-radius: 14px; color: #073540; text-decoration: none; }
.hccr-tph a.hccr-tph__item:hover { border-color: #8FC4C7; }
.hccr-tph a.hccr-tph__item:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-tph__n { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: #E3F4EF; color: #005C5B; font-size: 12px; line-height: 1.2; }
.hccr-tph__n strong { font-size: 18px; font-weight: 800; }
.hccr-tph__title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.hccr-tph__pill { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #073540; color: #fff; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.hccr-tph p.hccr-tph__note { margin: 0; font-size: 15px; line-height: 1.55; color: #4A6B71; }
.hccr-tph__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Tevredenheid (NPS): pil met uitleg, blok op de sessiepagina */
.hccr-nps-pill { position: relative; display: inline-flex; align-self: flex-start; }
.hccr-nps-pill__txt { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #E3F4EF; color: #005C5B; font-size: 13px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hccr-nps-pill--good .hccr-nps-pill__txt { background: #EEF3F2; color: #073540; }
.hccr-nps-pill--low .hccr-nps-pill__txt { background: #FBF4E8; color: #7A4A0E; }
.hccr-home__rec--big .hccr-nps-pill { margin-top: 4px; }
.hccr-home__rec--big .hccr-nps-pill__txt { padding: 5px 12px; font-size: 14px; }
.hccr-nps-pill__tip { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: 290px; max-width: 80vw; padding: 12px 14px; border-radius: 12px; background: #073540; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: 0 8px 24px rgba(7,53,64,.25); }
.hccr-nps-pill__tip strong { display: block; margin-bottom: 4px; font-weight: 700; }
.hccr-nps-pill__tip em { display: block; margin-top: 6px; font-style: normal; color: #8FC4C7; }
.hccr-nps-pill:hover .hccr-nps-pill__tip, a:focus-visible .hccr-nps-pill__tip { display: block; }

.hccr-nps { gap: 12px; }
.hccr-nps__top { display: flex; align-items: center; gap: 12px; }
.hccr-nps__score { font-size: 40px; font-weight: 900; line-height: 1; color: #073540; font-variant-numeric: tabular-nums; }
.hccr-nps__band { padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.hccr-nps__band--top { background: #E3F4EF; color: #005C5B; }
.hccr-nps__band--good { background: #EEF3F2; color: #073540; }
.hccr-nps__band--low { background: #FBF4E8; color: #7A4A0E; }
.hccr-nps__sub { font-size: 14px; color: #4A6B71; }
.hccr-nps__split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #EEF3F2; }
.hccr-nps__f { background: #005C5B; }
.hccr-nps__m { background: #8FC4C7; }
.hccr-nps__l { background: #C9792B; }
.hccr-st ul.hccr-nps__legend { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: #073540; }
.hccr-st ul.hccr-nps__legend li { display: flex; align-items: center; gap: 10px; margin: 0; }
.hccr-nps__legend li span:nth-child(2) { flex: 1; }
.hccr-nps__legend strong { font-variant-numeric: tabular-nums; }
.hccr-nps__sw { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; }
.hccr-nps__hist { display: flex; flex-direction: column; gap: 6px; }
.hccr-nps__histhead { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #4A6B71; }
.hccr-nps__histhead span:first-child { font-weight: 700; color: #073540; }
.hccr-nps__histhead strong { color: #073540; }
.hccr-nps__bars, .hccr-nps__axis { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.hccr-nps__bars { align-items: end; height: 112px; }
.hccr-nps__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.hccr-nps__cnum { font-size: 12px; font-weight: 700; color: #073540; }
.hccr-nps__bar { width: 100%; border-radius: 4px 4px 0 0; }
.hccr-nps__bar.is-zero { opacity: .25; }
.hccr-nps__axis { padding-top: 4px; border-top: 1px solid #DDE9E8; font-size: 12px; font-weight: 700; color: #4A6B71; text-align: center; }
.hccr-st p.hccr-nps__n { margin: 0; font-size: 15px; color: #073540; }
.hccr-nps__how { border-radius: 12px; background: #EEF3F2; padding: 0 14px; }
.hccr-nps__how summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #073540; cursor: pointer; }
.hccr-st .hccr-nps__how p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #073540; }

/* Mijn bijeenkomsten: NPS-pil met uitleg die naar links opent, zonder afgeknipt te worden */
.hccr-bijeenkomsten .hccr-nps-pill__tip { left: auto; right: 0; }
.hccr-st p.hccr-nps__n { margin: 0; font-size: 15px; line-height: 1.5; color: #073540; }
.hccr-nps__present { display: block; font-size: 14px; color: #4A6B71; }

/* Vraag aan de lesgever (kaart Volgende bijeenkomst) en Mijn voorstellen en vragen */
.hccr-q { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid #DDE9E8; }
.hccr-q__mine { display: flex; flex-direction: column; gap: 8px; }
.hccr-q__mine[hidden], .hccr-q__form[hidden], .hccr-q__msg[hidden], .hccr-q button.hccr-q__open[hidden] { display: none; }
.hccr-q__label { font-size: 14px; font-weight: 700; color: #4A6B71; }
.hccr-q__list { display: flex; flex-direction: column; gap: 8px; }
.hccr-q__list .hccr-mine__item { padding: 12px 14px; background: #EEF3F2; }
.hccr-q button.hccr-q__open, .hccr-q button.hccr-q__open:hover, .hccr-q button.hccr-q__open:focus { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 18px; border: 2px solid #005C5B; border-radius: 12px; background: #fff; color: #005C5B; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-q button.hccr-q__open:hover { background: #E3F4EF; }
.hccr-q__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hccr-q label.hccr-q__lab { font-size: 16px; font-weight: 700; color: #073540; }
.hccr-q .hccr-q__in, .hccr-q .hccr-q__in:focus { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 2px solid #DDE9E8; border-radius: 12px; background: #fff; color: #073540; font: inherit; font-size: 17px; box-shadow: none; resize: vertical; }
.hccr-q .hccr-q__in:focus { border-color: #0B6A72; outline: none; }
.hccr-q p.hccr-q__note { margin: 0; font-size: 14px; line-height: 1.5; color: #4A6B71; }
.hccr-q__row { display: flex; flex-wrap: wrap; gap: 10px; }
.hccr-q button.hccr-q__btn, .hccr-q button.hccr-q__btn:hover, .hccr-q button.hccr-q__btn:focus { min-height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 12px; background: #005C5B; color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-q button.hccr-q__btn--soft, .hccr-q button.hccr-q__btn--soft:hover, .hccr-q button.hccr-q__btn--soft:focus { background: #EEF3F2; color: #073540; }
.hccr-q button.hccr-q__btn:disabled { opacity: .55; cursor: not-allowed; }
.hccr-q p.hccr-q__msg { margin: 0; padding: 12px 14px; border-radius: 12px; background: #E3F4EF; color: #005C5B; font-size: 15px; font-weight: 600; }
.hccr-q p.hccr-q__msg.is-err { background: #FBEDEA; color: #8A2F1F; }
.hccr-q a.hccr-q__link { align-self: flex-start; font-size: 15px; font-weight: 600; color: #0B6A72; }
.hccr-q :focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }

.hccr-mine__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.hccr-mine__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hccr-tp button.hccr-mine__chip, .hccr-tp button.hccr-mine__chip:hover, .hccr-tp button.hccr-mine__chip:focus { min-height: 44px; margin: 0; padding: 0 16px; border: 2px solid #DDE9E8; border-radius: 999px; background: #fff; color: #073540; font: inherit; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-mine__chip[aria-pressed="true"] { border-color: #073540; background: #073540; color: #fff; }
.hccr-mine__chip span { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF3F2; color: #4A6B71; font-size: 13px; }
.hccr-mine__chip[aria-pressed="true"] span { background: #2E5C66; color: #fff; }
.hccr-mine__list { display: flex; flex-direction: column; gap: 10px; }
.hccr-mine__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid #DDE9E8; border-radius: 14px; }
.hccr-mine__item[hidden] { display: none; }
.hccr-mine__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hccr-mine__kind { padding: 3px 10px; border-radius: 6px; background: #EEF3F2; color: #073540; font-size: 13px; font-weight: 700; }
.hccr-mine__kind--vraag { background: #EAF3F6; color: #0B5A75; }
.hccr-mine__st { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.hccr-mine__st--ok { background: #E3F4EF; color: #005C5B; }
.hccr-mine__st--wait { background: #FBF4E8; color: #7A4A0E; }
.hccr-mine__st--no { background: #F3E6E3; color: #8A2F1F; }
.hccr-mine__date { margin-left: auto; font-size: 14px; color: #4A6B71; }
p.hccr-mine__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: #073540; }
p.hccr-mine__desc, p.hccr-mine__meta { margin: 0; font-size: 15px; line-height: 1.55; color: #3A5A60; }
p.hccr-mine__note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FBF4E8; font-size: 15px; line-height: 1.5; color: #5C3A0B; }

/* ===========================================================================
 * Onderwerpen v2: kop met acties, tabs Stemmen / Mijn voorstellen en vragen / Al besproken
 * ======================================================================== */
.hccr-tp header.hccr-tp__hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 28px 32px; border-radius: 20px; background: #073540; color: #fff; }
.hccr-tp__herotxt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.hccr-tp__hero h1.hccr-tp__h1 { margin: 0; color: #fff; font-size: 32px; }
.hccr-tp__hero p.hccr-tp__lead { color: #D6E7E5; font-size: 16px; }
.hccr-tp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hccr-tp button.hccr-tp__hbtn, .hccr-tp button.hccr-tp__hbtn:hover, .hccr-tp button.hccr-tp__hbtn:focus { min-height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: 12px; background: #0F8A86; color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-tp__hbtn:hover { background: #0B6A72; }
.hccr-tp button.hccr-tp__hbtn--ghost, .hccr-tp button.hccr-tp__hbtn--ghost:hover, .hccr-tp button.hccr-tp__hbtn--ghost:focus { border: 1px solid #2E6B73; background: transparent; font-weight: 600; }
.hccr-tp button.hccr-tp__hbtn--ghost:hover { background: #0B4A55; }
.hccr-tp button.hccr-tp__hbtn[aria-expanded="true"] { background: #fff; color: #073540; }
.hccr-tp__panel { border: 2px solid #0F8A86; scroll-margin-top: 120px; }
.hccr-tp__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hccr-tp button.hccr-tp__close, .hccr-tp button.hccr-tp__close:hover, .hccr-tp button.hccr-tp__close:focus { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: #EEF3F2; color: #073540; font: inherit; font-size: 22px; line-height: 1; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-tp__close:hover { background: #DDE9E8; }
.hccr-tp__tabs { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 6px; padding: 6px; border-radius: 16px; background: #fff; }
.hccr-tp button.hccr-tp__tab, .hccr-tp button.hccr-tp__tab:hover, .hccr-tp button.hccr-tp__tab:focus { min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: #073540; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; white-space: nowrap; box-shadow: none; cursor: pointer; }
.hccr-tp button.hccr-tp__tab:hover { background: #EEF3F2; }
.hccr-tp button.hccr-tp__tab[aria-selected="true"], .hccr-tp button.hccr-tp__tab[aria-selected="true"]:hover, .hccr-tp button.hccr-tp__tab[aria-selected="true"]:focus { background: #073540; color: #fff; }
.hccr-tp__tabn { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF3F2; color: #4A6B71; font-size: 13px; }
.hccr-tp__tabn:empty { display: none; }
.hccr-tp__tab[aria-selected="true"] .hccr-tp__tabn { background: #2E5C66; color: #fff; }
.hccr-tp__pane[hidden] { display: none; }
.hccr-tp h2.hccr-mine__h { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hccr-mine__head p.hccr-tp__muted { flex: 1 1 320px; }
.hccr-mine__chips[hidden], p.hccr-mine__empty[hidden] { display: none; }
@media (max-width: 600px) {
	.hccr-tp header.hccr-tp__hero { padding: 22px 18px; }
	.hccr-tp__hero h1.hccr-tp__h1 { font-size: 26px; }
	.hccr-tp__tabs { align-self: stretch; }
	.hccr-tp button.hccr-tp__tab { flex: 1 1 auto; white-space: normal; }
}

/* ===========================================================================
 * Komende bijeenkomst (zie hccr_la_upcoming_page)
 * ======================================================================== */
.hccr-pagehead p.hccr-up__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hccr-up__band .hccr-up__visual { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #0B2C31; }
.hccr-up__band .hccr-up__img { display: block; aspect-ratio: 16 / 9; }
.hccr-up__band .hccr-up__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hccr-up__band .hccr-up__img .hccr-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hccr-up__band .hccr-up__img .hccr-fallback svg { width: 22%; height: auto; }
.hccr-up__label { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; background: rgba(7, 29, 32, .85); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; }
.hccr-up .hccr-up__card { display: flex; flex-direction: column; gap: 14px; }
.hccr-st h2.hccr-up__h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #4A6B71; line-height: 1.4; }
.hccr-up__text p { margin: 0 0 12px; }
.hccr-up__text p:last-child { margin-bottom: 0; }
.hccr-st p.hccr-up__lead { margin: 0; font-size: 16px; line-height: 1.6; color: #3A5A60; }
.hccr-up .hccr-q { padding-top: 0; border-top: 0; }
.hccr-st p.hccr-up__when { margin: 0; font-size: 15px; line-height: 1.5; color: #073540; }
.hccr-st a.hccr-up__cal { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px; background: #005C5B; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.hccr-st a.hccr-up__cal:hover { background: #073540; color: #fff; }
.hccr-st p.hccr-up__small { margin: 0; font-size: 13px; line-height: 1.5; color: #4A6B71; }
@media (max-width: 600px) {
	.hccr-up__label { bottom: 10px; font-size: 13px; padding: 6px 12px; }
}

/* ===========================================================================
 * Mijn bijeenkomsten (lesgevers) — bouwt op de stijlen van Onderwerpen (.hccr-tp)
 * ======================================================================== */
.hccr-mb .hccr-mb__m { gap: 12px; }
.hccr-mb span.hccr-mb__date { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #EEF3F2; color: #005C5B; font-size: 14px; font-weight: 700; }
.hccr-mb a.hccr-mb__link { align-self: flex-start; font-size: 15px; font-weight: 700; color: #0B6A72; }
.hccr-mb__cols { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; }
.hccr-mb__col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hccr-mb p.hccr-mb__q { margin: 0; padding: 12px 14px; border-radius: 12px; background: #EEF3F2; font-size: 16px; line-height: 1.5; color: #073540; }
.hccr-mb__docs { display: flex; flex-direction: column; gap: 8px; }
.hccr-mb__docs:empty { display: none; }
.hccr-mb__doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: #EEF3F2; }
.hccr-mb__doct { flex: 1 1 160px; min-width: 0; font-size: 15px; font-weight: 600; color: #073540; }
.hccr-mb__docm { font-weight: 400; color: #4A6B71; }
.hccr-mb__st { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.hccr-mb__st--ok { background: #E3F4EF; color: #005C5B; }
.hccr-mb__st--wait { background: #FBF4E8; color: #7A4A0E; }
.hccr-tp button.hccr-mb__rm, .hccr-tp button.hccr-mb__rm:hover, .hccr-tp button.hccr-mb__rm:focus { min-height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; color: #8A2F1F; font: inherit; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.hccr-mb form.hccr-mb__up { gap: 8px; }
.hccr-mb label.hccr-mb__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 14px; border: 2px dashed #8FC4C7; border-radius: 14px; background: #F6FAF9; text-align: center; cursor: pointer; }
.hccr-mb label.hccr-mb__drop:focus-within { outline: 3px solid #f0b400; outline-offset: 2px; }
.hccr-mb__dropt { font-size: 16px; font-weight: 700; color: #073540; word-break: break-word; }
.hccr-mb__drops { font-size: 13px; line-height: 1.45; color: #4A6B71; }
.hccr-mb label.hccr-mb__drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hccr-mb p.hccr-mb__msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: #E3F4EF; color: #005C5B; font-size: 15px; font-weight: 600; }
.hccr-mb p.hccr-mb__msg.is-err { background: #FBEDEA; color: #8A2F1F; }
.hccr-mb p.hccr-mb__msg[hidden] { display: none; }
.hccr-mb .hccr-mb__m--past { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px; }

.hccr-mb__nps { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #F6FAF9; }
.hccr-mb__npstop { display: flex; align-items: center; gap: 10px; }
.hccr-mb__score { font-size: 32px; font-weight: 900; line-height: 1; color: #073540; font-variant-numeric: tabular-nums; }
.hccr-mb p.hccr-mb__split { margin: 0; font-size: 14px; line-height: 1.5; color: #073540; }

/* Onderwerpen en Mijn bijeenkomsten: zelfde breedte als de startpagina (hccr-home__wrap 1120px, 24px rand) */
.hccr-tp { box-sizing: border-box; max-width: 1120px; padding-left: 24px; padding-right: 24px; }

/* =====================================================================
   Header: Handleiding (?) en Uitloggen als icoon — 26 oktober 2026
   ===================================================================== */
.hccr-menu-icoon__svg{display:block; width:22px; height:22px; flex:0 0 22px;}
.site-header .site-navigation ul.menu > li.hccr-menu-icoon > a,
.site-navigation-dropdown .menu li.hccr-menu-icoon > a{display:flex; align-items:center; gap:12px;}
@media (min-width:993px){
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-icoon > a{
    justify-content:center; width:38px; height:38px; padding:0; border-radius:50%;
    border-bottom:0; color:#5A6E72;
  }
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-hl{margin-left:-6px;}
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-uit{margin-left:-14px;}
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-icoon > a:hover,
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-icoon > a:focus-visible{
    background:#eef3f2; color:var(--hccr-brand);
  }
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-icoon.current-menu-item > a{
    background:#e3eeec; color:var(--hccr-brand); border-bottom:0;
  }
  .site-header:not(.hccr-krap) .site-navigation ul.menu > li.hccr-menu-icoon .hccr-menu-icoon__label{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

/* =====================================================================
   Handleiding (/handleiding/) — 26 oktober 2026
   ===================================================================== */
.hccr-hl{display:grid; grid-template-columns:250px minmax(0,1fr); gap:40px; align-items:start; box-sizing:border-box; max-width:1072px; margin:20px auto 64px;}
.hccr-hl__inhoud{position:sticky; top:24px; background:#fff; border:1px solid #DDE9E8; border-radius:14px; padding:20px 18px;}
.hccr-hl__kop{margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4A6B71;}
.hccr-hl__inhoud ol{margin:0 0 16px; padding-left:20px;}
.hccr-hl__inhoud li{margin:0 0 7px; font-size:14.5px; line-height:1.35;}
.hccr-hl__inhoud li a{color:#073540; text-decoration:none;}
.hccr-hl__inhoud li a:hover{color:#0B6A72; text-decoration:underline;}
.hccr-hl__knop{display:block; width:100%; box-sizing:border-box; text-align:center; margin-top:8px; padding:11px 14px; border-radius:10px;
  background:#005C5B; color:#fff !important; border:1px solid #005C5B; font:inherit; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none !important;}
.hccr-hl__knop:hover{background:#073540; border-color:#073540;}
.hccr-hl__knop--licht{background:#fff; color:#073540 !important; border-color:#073540;}
.hccr-hl__knop--licht:hover{background:#EEF3F2;}
.hccr-hl__tekst .hccr-hl__knop{display:inline-block; width:auto;}
.hccr-hl__tekst{background:#fff; border:1px solid #DDE9E8; border-radius:14px; padding:12px 40px 40px; font-size:16.5px; line-height:1.65; color:#073540;}
.hccr-hl__tekst h2{font-size:27px; line-height:1.25; margin:40px 0 12px; padding-top:28px; border-top:1px solid #DDE9E8; scroll-margin-top:24px;}
.hccr-hl__tekst h2:first-child{border-top:0; padding-top:0; margin-top:24px;}
.hccr-hl__tekst h3{font-size:20px; margin:28px 0 8px;}
.hccr-hl__tekst p, .hccr-hl__tekst ul, .hccr-hl__tekst ol{margin:0 0 14px;}
.hccr-hl__tekst li{margin-bottom:5px;}
.hccr-hl__tekst a{color:#0B6A72;}
.hccr-hl__fig{margin:18px 0 22px;}
.hccr-hl__fig img{display:block; max-width:100%; height:auto; border:1px solid #DDE9E8; border-radius:10px; box-shadow:0 8px 24px -16px rgba(7,53,64,.45);}
.hccr-hl__tabel{overflow-x:auto; margin:0 0 18px;}
.hccr-hl__tabel table{width:100%; border-collapse:collapse; font-size:15px;}
.hccr-hl__tabel th, .hccr-hl__tabel td{padding:9px 12px; border-bottom:1px solid #DDE9E8; text-align:left; vertical-align:top; background:transparent;}
.hccr-hl__tabel th{background:#EEF3F2; font-weight:700;}
.hccr-hl__dl{list-style:none; padding:0 !important; margin:16px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.hccr-hl__dl li{margin:0;}
.hccr-hl__dl a{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #DDE9E8; border-radius:10px; color:#073540; text-decoration:none; font-weight:600; background:#fff;}
.hccr-hl__dl a:hover{border-color:#0B6A72; background:#EEF3F2;}
.hccr-hl__nr{flex:0 0 28px; height:28px; border-radius:50%; background:#F0B400; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
.hccr-hl__pdf{margin-left:auto; font-size:12px; font-weight:700; color:#0B6A72; letter-spacing:.5px;}
@media (max-width:900px){
  .hccr-hl{grid-template-columns:1fr; gap:20px; margin-top:20px;}
  .hccr-hl__inhoud{position:static;}
  .hccr-hl__tekst{padding:4px 18px 28px; font-size:16px;}
  .hccr-hl__dl{grid-template-columns:1fr;}
}
@media print{
  .site-header, .site-footer, #wpadminbar, .hccr-hl__inhoud, .hccr-hl__dl, #onepagers, #onepagers ~ p{display:none !important;}
  .hccr-hl{display:block; margin:0;}
  .hccr-pagehead{background:none !important; color:#073540 !important; padding:0 !important;}
  .hccr-pagehead *{color:#073540 !important;}
  .hccr-hl__tekst{border:0; padding:0;}
  .hccr-hl__tekst h2{break-before:page; border-top:0; padding-top:0;}
  .hccr-hl__tekst h2:first-child{break-before:auto;}
  .hccr-hl__fig{break-inside:avoid;}
  .hccr-hl__fig img{box-shadow:none; max-height:120mm; width:auto;}
}

/* =========================================================
   Sessietabs: Cursus (AI) — leden-ai 0.11.0
   ========================================================= */
.hccr-course__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.hccr-st a.hccr-course__pdf {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
	background: var(--st-btn); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.hccr-st a.hccr-course__pdf::before { content: "\2193"; font-weight: 800; }
.hccr-st a.hccr-course__pdf:hover, .hccr-st a.hccr-course__pdf:focus-visible { color: #fff; filter: brightness(1.1); }
.hccr-course__sec { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--st-line); }
.hccr-course__sec .hccr-st__h { margin: 0; font-size: 20px; }
.hccr-st a.hccr-course__watch { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--st-link); text-decoration: none; }
.hccr-st a.hccr-course__watch::before { content: "\25B6"; margin-right: 8px; font-size: .8em; }
.hccr-st a.hccr-course__watch:hover { text-decoration: underline; }
.hccr-course__label { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--st-link); }
.hccr-st ol.hccr-course__steps { margin: 0; padding: 0 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.hccr-st ol.hccr-course__steps li { margin: 0; padding-left: 4px; font-size: 17px; line-height: 1.6; color: var(--st-ink); }
.hccr-st ol.hccr-course__steps li::marker { font-weight: 700; color: var(--st-link); }
.hccr-course__terms { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hccr-course__terms dt { font-size: 17px; font-weight: 700; color: var(--st-ink); }
.hccr-course__terms dd { margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--st-ink); }

.hccr-course__terms dd.hccr-course__src { margin-top: 2px; font-size: 13.5px; color: #6E787D; }
.hccr-st .hccr-course__terms dd.hccr-course__src a { color: var(--st-link); }

/* =========================================================
   Mijn bijeenkomsten — tab Voorbije bijeenkomsten (27/10/2026):
   lijst met werkjaren + één bijeenkomst met vragen, documenten en volledige feedback (zonder namen)
   ========================================================= */
.hccr-mbp { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.hccr-mbp__list { flex: 1 1 300px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; box-sizing: border-box; }
.hccr-mbp__years { display: flex; flex-wrap: wrap; gap: 6px; }
.hccr-mbp__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 75vh; overflow-y: auto; }
.hccr-mbp__items li { margin: 0; }
.hccr-mbp__items li[hidden] { display: none; }
.hccr-tp button.hccr-mbp__item, .hccr-tp button.hccr-mbp__item:hover, .hccr-tp button.hccr-mbp__item:focus { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 14px; border: 2px solid transparent; border-radius: 14px; background: #F6FAF9; color: #073540; text-align: left; font: inherit; line-height: 1.3; cursor: pointer; }
.hccr-tp button.hccr-mbp__item:hover { background: #EEF3F2; }
.hccr-tp button.hccr-mbp__item, .hccr-mbp__item span { white-space: normal; overflow-wrap: anywhere; }
.hccr-mbp__items { overflow-x: hidden; }
.hccr-tp button.hccr-mbp__item[aria-pressed="true"] { background: #E7F3F5; border-color: #0B6A72; }
.hccr-mbp__itxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hccr-mbp__idate { font-size: 13px; font-weight: 700; color: #0B6A72; }
.hccr-mbp:not([data-jaar="alle"]) .hccr-mbp__iy { display: none; }
.hccr-mbp__ititle { font-size: 16px; font-weight: 700; color: #073540; }
.hccr-mbp__iaanw { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #073540; }
.hccr-mbp__imeta { font-size: 13px; font-weight: 400; color: #4A6B71; }
.hccr-mbp__pil { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hccr-mbp__pil--top { background: #E3F4EF; color: #005C5B; }
.hccr-mbp__pil--good { background: #E2EBEA; color: #073540; }
.hccr-mbp__pil--low { background: #FBF4E8; color: #7A4A0E; }
.hccr-mbp__pil--none { background: #EEF3F2; color: #4A6B71; }
.hccr-mbp__detail { flex: 999 1 560px; min-width: 0; }
.hccr-mb article.hccr-mbp__card { gap: 22px; }
.hccr-mb article.hccr-mbp__card[hidden] { display: none; }
.hccr-mbp__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.hccr-mbp__headtxt { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hccr-mb a.hccr-mbp__rec, .hccr-mb a.hccr-mbp__rec:hover, .hccr-mb a.hccr-mbp__rec:focus { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 10px; border-radius: 999px; background: #0F8A86; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.hccr-mb a.hccr-mbp__rec:hover { background: #0B7672; }
.hccr-mbp__play { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0F8A86; display: inline-flex; align-items: center; justify-content: center; }
.hccr-mbp .hccr-mb__nps { flex: none; }

.hccr-mb__wie { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 20px 22px; border-radius: 16px; background: #F6FAF9; }
.hccr-mb__wiekop { flex: 0 0 auto; }
.hccr-mb h3.hccr-mb__wieh { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #4A6B71; }
.hccr-mb p.hccr-mb__wietot { margin: 0; display: flex; flex-direction: column; color: #073540; }
.hccr-mb__wietot b { font-size: 52px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.hccr-mb__wietot span { margin-top: 6px; font-size: 17px; font-weight: 700; }
.hccr-mb__wietot small { font-size: 15px; color: #4A6B71; }
.hccr-mb__wiebody { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hccr-mb__wiedots { display: flex; flex-wrap: wrap; gap: 6px; max-width: 440px; }
.hccr-mb__wd { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.hccr-mb__wd--ja, .hccr-mb__wd--lid { background: #0A8C86; }
.hccr-mb__wd--nee { background: #D3E4E2; border: 1px solid #A9C6C3; }
.hccr-mb__wd--gast { background: #fff; border: 2px dashed #C9792B; }
.hccr-mb p.hccr-mb__wieleg { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: #073540; }
.hccr-mb__wieleg span { display: inline-flex; align-items: center; gap: 8px; }
.hccr-mb__wieleg .hccr-mb__wd { width: 14px; height: 14px; }
.hccr-mb p.hccr-mb__wiezin { margin: 0; font-size: 15px; line-height: 1.5; color: #33474C; }
.hccr-mb__fb { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px; background: #F6FAF9; }
.hccr-mb__fbhead { display: flex; flex-direction: column; gap: 4px; }
.hccr-mb__fb .hccr-tp__label { margin: 0; }
.hccr-mb__fbtiles { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(220px, 2fr); gap: 12px; }
.hccr-mb__fbtile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #fff; }
.hccr-mb__fbtile > span { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #4A6B71; }
.hccr-mb__fbtile > b { font-size: 34px; font-weight: 900; line-height: 1.05; color: #073540; font-variant-numeric: tabular-nums; }
.hccr-mb__fbtile > small { font-size: 14px; line-height: 1.4; color: #4A6B71; }
.hccr-mb__fbtile--nps { background: #073540; }
.hccr-mb__fbtile--nps > span { color: #9FD3D0; }
.hccr-mb__fbtile--nps > b, .hccr-mb__fbtile--nps > small { color: #fff; }
.hccr-mb__fbtile--split { justify-content: center; gap: 12px; }
.hccr-mb__fbtile--split .hccr-nps__split { height: 22px; gap: 2px; background: transparent; }
.hccr-mb__fbtile--split .hccr-nps__split > span { border-radius: 4px; }
.hccr-mb p.hccr-mb__fblegend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: #073540; }
.hccr-mb__fblegend span { display: inline-flex; align-items: center; gap: 6px; }
.hccr-mb__dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hccr-mb__dot--d { background: #C9792B; } .hccr-mb__dot--m { background: #8FC4C7; } .hccr-mb__dot--p { background: #005C5B; }
.hccr-mb__hist { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; align-items: end; height: 160px; margin-bottom: 22px; padding: 0 2px; border-bottom: 1px solid #DCE8E8; }
.hccr-mb__bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
.hccr-mb__barn { text-align: center; font-size: 13px; font-weight: 700; color: #073540; min-height: 18px; }
.hccr-mb__barf { display: block; border-radius: 6px 6px 0 0; min-height: 0; }
.hccr-mb__barf--d { background: #C9792B; } .hccr-mb__barf--m { background: #C3DCDD; } .hccr-mb__barf--p { background: #0A8C86; }
.hccr-mb__barx { text-align: center; font-size: 13px; color: #4A6B71; padding-top: 6px; margin-bottom: -26px; }
.hccr-mb__opmhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hccr-mb h4.hccr-mb__opmh { margin: 0; font-size: 18px; font-weight: 800; color: #073540; }
.hccr-mb h4.hccr-mb__opmh span { font-weight: 600; color: #4A6B71; }
.hccr-mb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hccr-tp button.hccr-mb__chip, .hccr-tp button.hccr-mb__chip:hover, .hccr-tp button.hccr-mb__chip:focus { min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid #D5E3E3; border-radius: 999px; background: #fff; color: #073540; font-size: 14px; font-weight: 700; cursor: pointer; }
.hccr-tp button.hccr-mb__chip[aria-pressed="true"] { background: #073540; border-color: #073540; color: #fff; }
.hccr-mb__opms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; align-items: start; }
.hccr-mb__opm { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.hccr-mb__opm[hidden] { display: none; }
.hccr-mb__opm p { margin: 0; font-size: 16px; line-height: 1.5; color: #073540; overflow-wrap: anywhere; }
.hccr-mb__pil { flex: 0 0 auto; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.hccr-mb__pil--p { background: #E3F4EF; color: #005C5B; } .hccr-mb__pil--m { background: #EEF3F2; color: #073540; } .hccr-mb__pil--d { background: #FBF4E8; color: #7A4A0E; }
.hccr-mb p.hccr-mb__opmleeg[hidden] { display: none; }
@media (max-width: 780px) {
  .hccr-mbp__list { max-width: none; }
  .hccr-mbp__items { max-height: none; }
  .hccr-mb__fbtiles { grid-template-columns: 1fr 1fr; }
  .hccr-mb__fbtile--split { grid-column: 1 / -1; }
  .hccr-mb__fb, .hccr-mb__wie { padding: 14px; }
  .hccr-mb__wd { width: 18px; height: 18px; }
  .hccr-mb__hist { gap: 3px; height: 130px; }
}

/* Mijn bijeenkomsten: ruimte tussen kaarten onder elkaar (Komende bijeenkomsten, Mijn voorstellen) */
.hccr-mb .hccr-tp__pane > .hccr-tp__card + .hccr-tp__card { margin-top: 20px; }

/* Mijn bijeenkomsten: geen "Je was erbij" (lesgevers schrijven zich niet in) */
.hccr-mb .hccr-erbij { display: none !important; }