/* FAAM Barometer: de Startersbarometer op de site. Volgt de kleuren en vormen van faam.be (crème, groen, oker, ronde hoeken). */
.faam-barometer{
	--fb-diep:var(--faam-groen-diep,#22332A);
	--fb-groen:var(--faam-groen,#658572);
	--fb-donker:var(--faam-groen-donker,#4F6B5B);
	--fb-oker:var(--faam-oker,#EEBE75);
	--fb-creme:var(--faam-creme,#FAEBD3);
	--fb-rand:var(--faam-creme-rand,#E8DCC6);
	--fb-mint:var(--faam-mint,#EDF3EF);
	--fb-zacht:var(--faam-zacht,#5F5F5F);
	--fb-r:var(--faam-r,24px);
	--fb-r-klein:var(--faam-r-klein,8px);
	--fb-een:var(--fb-donker);
	--fb-ven:var(--fb-oker);
	--fb-letter:var(--wp--preset--font-family--manrope,inherit);
	container-type:inline-size;
	color:var(--fb-diep);
}
.faam-barometer *{box-sizing:border-box}
.faam-barometer h3,.faam-barometer h4,.faam-barometer h5{font-family:var(--fb-letter);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--fb-diep)}
.faam-barometer .fb-klein{font-size:.875rem;color:var(--fb-zacht)}
.faam-barometer .fb-bron{font-size:.8125rem;color:var(--fb-zacht);margin:1rem 0 0}
.faam-barometer .fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.faam-barometer button{font:inherit}
.faam-barometer [hidden]{display:none !important}
.fb-sectie{margin-top:3rem}
.fb-sectie>h2,.fb-sectie>h3{margin-bottom:.75rem}

/* Kerncijfers */
.fb-kerncijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@container (min-width:56rem){.fb-kerncijfers{grid-template-columns:1.3fr 1fr 1fr 1fr}}
@container (max-width:520px){.fb-kerncijfers{grid-template-columns:1fr;gap:12px}.fb-kerncijfer{padding:18px 20px}}
.fb-kerncijfer{background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r);padding:22px 24px;min-width:0}
.fb-kerncijfer strong{display:block;font-family:var(--fb-letter);font-size:clamp(1.9rem,4.2vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--fb-diep)}
.fb-kerncijfer span{display:block;margin-top:.4rem;color:var(--fb-zacht);font-size:.95rem;line-height:1.45}
.fb-kerncijfer.is-hoofd{background:var(--fb-diep);border-color:var(--fb-diep)}
.fb-kerncijfer.is-hoofd strong{color:var(--fb-oker)}
.fb-kerncijfer.is-hoofd span{color:rgba(255,255,255,.88)}

/* Per beroep: zoeken, groepen en de lijst */
.fb-zoekbalk{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 20px}
.fb-zoekveld{flex:1 1 280px;max-width:420px;margin:0}
.fb-zoekveld input{width:100%;font:inherit;font-size:1rem;padding:13px 20px 13px 46px;border:2px solid var(--fb-diep);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%2322332A' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%2322332A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 18px 50%/18px no-repeat;color:var(--fb-diep)}
.fb-zoekveld input:focus{outline:3px solid var(--fb-oker);outline-offset:2px}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px}
.fb-chips button{padding:8px 16px;border:2px solid var(--fb-diep);border-radius:999px;background:#fff;color:var(--fb-diep);font-size:.9rem;font-weight:700;cursor:pointer;line-height:1.2}
.fb-chips button:hover{background:var(--fb-creme)}
.fb-chips button[aria-pressed=true]{background:var(--fb-diep);color:#fff}
.fb-chips button:focus-visible,.fb-kopieer:focus-visible,.fb-rij summary:focus-visible{outline:3px solid var(--fb-oker);outline-offset:2px}

.fb-lijstkop{display:flex;justify-content:space-between;gap:16px;padding:0 48px 8px 22px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fb-zacht);white-space:nowrap}
.fb-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fb-rij{margin:0;scroll-margin-top:7rem}
.fb-rij details{background:#fff;border:2px solid var(--fb-rand);border-radius:18px;transition:border-color .2s ease}
.fb-rij details:hover,.fb-rij details[open]{border-color:var(--fb-diep)}
.fb-rij:target details{border-color:var(--fb-diep);box-shadow:6px 6px 0 var(--fb-diep)}
.fb-rij summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 6.5rem;gap:16px;align-items:center;padding:14px 20px;cursor:pointer;list-style:none;position:relative}
.fb-rij summary::-webkit-details-marker{display:none}
.fb-rij summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--fb-diep);border-bottom:2.5px solid var(--fb-diep);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.fb-rij details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fb-rij-naam strong{display:block;font-weight:700;line-height:1.3}
.fb-rij-naam small{display:block;font-size:.8rem;color:var(--fb-zacht);margin-top:1px}
.fb-rij-balk{display:block;height:12px;background:var(--fb-mint);border-radius:999px;overflow:hidden}
.fb-rij-balk span{display:block;height:100%;background:var(--fb-groen);border-radius:999px}
.fb-rij details[open] .fb-rij-balk span,.fb-rij summary:hover .fb-rij-balk span{background:var(--fb-diep)}
.fb-rij-getal{text-align:right;padding-right:28px;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums}
.fb-meer{margin:20px 0 0;text-align:center}
.fb-geen{margin:16px 0 0;padding:16px 20px;background:var(--fb-creme);border-radius:var(--fb-r-klein)}

.fb-detail{padding:4px 20px 20px;border-top:2px solid var(--fb-rand);margin:0 20px;padding-left:0;padding-right:0}
.fb-detail-cijfers{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.fb-detail-cijfers li{margin:0;color:var(--fb-zacht)}
.fb-detail-cijfers strong{font-size:1.35rem;font-weight:800;color:var(--fb-diep);margin-right:.25rem;font-variant-numeric:tabular-nums}
.fb-detail-grafieken{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:18px}
.fb-detail-blok{background:var(--fb-mint);border-radius:var(--fb-r-klein);padding:14px 16px;min-width:0}
.fb-detail-titel{margin:0 0 10px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fb-zacht)}
.fb-verloop-blok{margin:0}
.fb-verloop-blok .fb-verloop{width:100%;height:72px}
.fb-verloop-as{display:flex;justify-content:space-between;margin-top:6px;font-size:.75rem;color:var(--fb-zacht)}
.fb-verloop-as em{font-style:normal;opacity:.8}
.fb-verloop{display:block;width:120px;height:32px}
.fb-verloop rect{fill:var(--fb-groen)}
.fb-verloop rect.fb-voorlopig{opacity:.45}
.fb-detail-gem{margin:16px 0 0}
.fb-detail-gem span{font-weight:700}
.fb-opm{margin:6px 0 0;font-size:.875rem;color:var(--fb-zacht)}
.fb-detail-links{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:18px 0 0}
.fb-detail-links a{font-weight:700;color:var(--fb-diep);text-decoration:none}
.fb-detail-links a.fb-link-hub{background:var(--fb-diep);color:#fff;border:2px solid var(--fb-diep);border-radius:999px;padding:9px 18px}
.fb-detail-links a.fb-link-hub:hover{background:var(--fb-donker)}
.fb-detail-links a.fb-link-site{text-decoration:underline;text-underline-offset:3px}
.fb-detail-links a::after{content:" \2192"}
.fb-kopieer{padding:8px 16px;border:2px solid var(--fb-rand);border-radius:999px;background:#fff;color:var(--fb-diep);font-size:.875rem;font-weight:700;cursor:pointer}
.fb-kopieer:hover{border-color:var(--fb-diep)}
.fb-kopieer.is-gekopieerd{background:var(--fb-mint);border-color:var(--fb-groen)}
.fb-detail-links .fb-kopieer{margin-left:auto}

@container (max-width:640px){
	.fb-lijstkop{display:none}
	.fb-rij summary{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 16px}
	.fb-rij-balk{grid-column:1/-1;grid-row:2;height:10px;margin-right:28px}
	.fb-rij-getal{padding-right:24px}
	.fb-rij summary::after{right:16px;top:24px;transform:rotate(45deg)}
	.fb-rij details[open] summary::after{transform:translateY(4px) rotate(-135deg)}
	.fb-detail{margin:0 16px}
	.fb-detail-grafieken{grid-template-columns:1fr}
	.fb-detail-links .fb-kopieer{margin-left:0}
}

/* Per provincie */
.fb-provincies{list-style:none;margin:0;padding:0;max-width:44rem}
.fb-provincies li{display:grid;grid-template-columns:11rem minmax(0,1fr) 4.5rem;gap:.75rem;align-items:center;padding:.35rem 0;margin:0}
.fb-balk{display:block;height:14px;background:#fff;border:2px solid var(--fb-rand);border-radius:999px;overflow:hidden}
.fb-balk span{display:block;height:100%;background:var(--fb-groen);border-radius:999px}
.fb-prov-naam{white-space:nowrap}
.fb-prov-getal{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.fb-provincies.is-klein li{grid-template-columns:8.5rem minmax(0,1fr) 3rem;gap:.5rem;padding:.2rem 0;font-size:.875rem}
.fb-provincies.is-klein .fb-balk{height:10px;border:0}
@container (max-width:600px){
	.fb-provincies:not(.is-klein) li{grid-template-columns:minmax(0,1fr) auto}
	.fb-provincies:not(.is-klein) .fb-balk{grid-column:1/-1;grid-row:2}
}

/* Grafiek per maand */
.fb-grafiek{margin:1rem 0 0;background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r);padding:28px 24px 20px}
.fb-grafiek-vlak{position:relative;height:260px;margin:0 0 2.2rem 3.4rem}
.fb-raster span{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--fb-rand)}
.fb-raster em{position:absolute;right:100%;top:0;transform:translateY(-50%);padding-right:.5rem;font-style:normal;font-size:.75rem;color:var(--fb-zacht);white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-staven{position:absolute;inset:0;display:flex;gap:4px;list-style:none;margin:0;padding:0}
.fb-staaf{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;position:relative;margin:0}
.fb-deel{display:block;width:100%}
.fb-deel.fb-een{background:var(--fb-een)}
.fb-deel.fb-ven{background:var(--fb-ven);border-radius:4px 4px 0 0}
.fb-staaf.is-voorlopig .fb-deel{opacity:.5}
.fb-staaf:hover .fb-deel{filter:brightness(1.1)}
.fb-maand{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.45rem;font-size:.75rem;color:var(--fb-zacht);white-space:nowrap}
.fb-legende{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem;font-size:.9rem}
.fb-legende-item{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.fb-sleutel{display:inline-block;width:.9rem;height:.9rem;border-radius:3px}
.fb-sleutel.fb-een{background:var(--fb-een)}
.fb-sleutel.fb-ven{background:var(--fb-ven)}
.fb-legende-uitleg{flex-basis:100%;color:var(--fb-zacht)}
.fb-cijfers{margin-top:1rem}
.fb-cijfers summary{cursor:pointer;font-weight:700}
.fb-cijfers .fb-tabel{margin-top:.5rem;max-width:36rem}
.fb-voorlopig-tekst{font-weight:400;color:var(--fb-zacht)}
@container (max-width:600px){
	.fb-grafiek{padding:20px 14px 14px}
	.fb-grafiek-vlak{height:200px;margin-left:2.8rem}
	.fb-staven{gap:2px}
	.fb-maand:not(.is-zes){display:none}
}

/* Tabellen */
.fb-scroll{overflow-x:auto}
.fb-tabel{width:100%;border-collapse:collapse;font-size:.95rem}
.fb-tabel th,.fb-tabel td{padding:.55rem .5rem;border-bottom:1px solid var(--fb-rand);text-align:left;vertical-align:middle}
.fb-tabel thead th{font-size:.8rem;font-weight:700;color:var(--fb-zacht);border-bottom:2px solid var(--fb-diep);vertical-align:bottom}
.fb-tabel .fb-getal{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-tabel tbody th{font-weight:400}

/* Wat opvalt */
.fb-inzichten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.fb-inzicht{background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r);padding:24px}
.fb-inzicht>h3,.fb-inzicht>h4,.fb-inzicht>h5{margin:0 0 .5rem;font-size:1.1rem}
.fb-inzicht p{margin:0;color:var(--fb-zacht)}

/* De cijfers gebruiken */
.fb-delen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@container (max-width:900px){.fb-delen{grid-template-columns:1fr}}
.fb-delen-kaart{background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r);padding:24px}
.fb-delen-kaart.is-hoofd{background:var(--fb-creme);border-color:var(--fb-diep);box-shadow:6px 6px 0 var(--fb-diep)}
.fb-delen-kaart>h3,.fb-delen-kaart>h4{margin:0 0 .5rem;font-size:1.1rem}
.fb-delen-kaart p{margin:0 0 .75rem}
.fb-delen-kaart p:last-child{margin-bottom:0}
.fb-delen-kaart code{font-family:var(--wp--preset--font-family--mono,ui-monospace,monospace);font-size:.85em;background:var(--fb-mint);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.fb-citaat{background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r-klein);padding:12px 14px;font-size:.9rem;line-height:1.5}
.fb-kopieer.is-knop{background:var(--fb-diep);border-color:var(--fb-diep);color:#fff;padding:11px 20px}
.fb-kopieer.is-knop:hover{background:var(--fb-donker)}
.fb-kopieer.is-knop.is-gekopieerd{background:var(--fb-groen);border-color:var(--fb-groen)}

/* Zo tellen we */
.fb-methode{max-width:46rem;padding-left:1.1em;margin:0}
.fb-methode li{margin:.45rem 0}

/* Blok op de hub van een beroep */
.fb-hubblok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px clamp(24px,4vw,56px);background:#fff;border:2px solid var(--fb-rand);border-radius:var(--fb-r);padding:clamp(22px,3vw,36px)}
.fb-hub-label{display:inline-block;margin:0 0 12px;padding:4px 12px;border:2px solid var(--fb-diep);border-radius:999px;background:var(--fb-oker);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.faam-barometer .fb-hub-kop{margin:0 0 14px}
.fb-hub-getal{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.fb-hub-getal strong{font-size:clamp(2.4rem,5vw,3.25rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fb-hub-getal span{color:var(--fb-zacht);flex:1 1 12rem}
.fb-hub-feiten{list-style:none;margin:18px 0 0;padding:0}
.fb-hub-feiten li{margin:0;padding:8px 0;border-top:2px solid var(--fb-rand)}
.fb-hub-feiten li:last-child{border-bottom:2px solid var(--fb-rand)}
.fb-hub-feiten strong{font-weight:800}
.fb-hubblok .fb-klein{margin:10px 0 0}
.fb-hub-link{margin:18px 0 0;font-weight:700}
.fb-hub-link a{color:var(--fb-diep)}
.fb-hub-link a::after{content:" \2192"}
.fb-hub-beeld{display:grid;gap:12px;align-content:start}
.fb-hubblok>.fb-bron{grid-column:1/-1;margin:0}
@container (max-width:700px){.fb-hubblok{grid-template-columns:1fr}}

/* Pagina /startersbarometer/ (opbouw in docs/startersbarometer/pagina.html) */
.fb-pagina-stappen h3.wp-block-heading{font-size:1.375rem;line-height:1.25;margin:.6rem 0 .5rem}
.fb-pagina-stappen p:not(.faam-nr){margin:0}
