/* Mijn Buurtstroom: de vormgeving van de website (thema "buurtstroom",
   ontwerp B), zonder CDN (ADR-0136, ADR-0139). Kleuren, letters, kop, voet,
   kaarten en lijsten volgen theme.json en style.css van het thema; wijzig je
   daar iets, trek het hier gelijk. Lettertypen en logo komen uit het thema
   (OFL-licenties ernaast). */
@font-face{font-family:"Bricolage Grotesque";src:url("bricolage-grotesque-variabel.c4a31b132ddd.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("figtree-variabel.a95323fa4c92.woff2") format("woff2");font-weight:300 900;font-display:swap}
:root{
  --primair:#00a9a0;      /* blauwgroen (logo), theme.json primary */
  --groen:#4fcb19;        /* groen (logo), secondary */
  --licht:#e6f6f5;        /* blauwgroen licht, tertiary */
  --groen-licht:#edfae8;
  --tekst:#1a1a1a;        /* foreground */
  --zacht:#4a4a4a;        /* foreground-alt */
  --rand:#d9eceb;
  --actief:#00756f;       /* menu Mijn Buurtstroom, zoals bs-mijn__menu */
  --fout:#b42318;--fout-vlak:#fde8e6;
  --kop-letter:"Bricolage Grotesque",Figtree,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:110px}
body{margin:0;font-family:Figtree,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--tekst);background:#fff}
a{color:var(--tekst);text-decoration:underline}
a:hover{color:var(--primair)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--primair);outline-offset:2px}
h1,h2,h3{font-family:var(--kop-letter);font-weight:800;line-height:1.05;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.25rem,1.5rem + 3vw,3.375rem)}
h3{font-weight:700}

/* ---- Kop (patterns/header.php) ---- */
/* Maten zoals de site rekent: alignwide 80rem binnen de rootpadding
   (spacing--30), 10px boven en onder, menu 1rem (core/navigation "small"),
   104px tussen beeldmerk en menu (blockGap 32 plus margin 72), 56px tussen
   menu en knoppen. */
.kop{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--rand);padding:10px clamp(1.5rem,6vw,2rem)}
.kop-in{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:56px}
.beeldmerk{margin-left:12px;flex:0 0 auto}
.beeldmerk img{width:58px;height:auto;display:block}
nav.site{flex:1 1 auto;font-weight:600;font-size:1rem}
nav.site ul{list-style:none;margin:0;padding:0}
nav.site>ul{display:flex;justify-content:space-between;gap:24px;margin-left:48px}
nav.site a{text-decoration:none;color:var(--tekst);white-space:nowrap}
nav.site a:hover,nav.site a:focus{color:var(--primair)}
.met-sub{position:relative}
/* Het pijltje van core/navigation: svg 12x12, 0,6em breed, 0,25em marge. */
.met-sub>a::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.25em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4L6 8.5L10.5 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4L6 8.5L10.5 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.submenu{display:none;position:absolute;top:100%;left:-12px;min-width:220px;background:#fff;border-radius:16px;padding:8px;box-shadow:0 8px 24px rgba(26,26,26,.12);font-weight:500;z-index:20}
.submenu a{display:block;border-radius:10px;padding:8px 12px}
.submenu a:hover,.submenu a:focus{background:var(--licht);color:var(--tekst)}
.met-sub:hover>.submenu,.met-sub:focus-within>.submenu{display:block}
/* Knoppen als core/button in de kop: 0,9375rem, 600, regelhoogte 1,6,
   padding 0,55em 1,1em; alleen de omlijnde heeft een rand. Tussenruimte is
   de blockGap van Extendable. */
.knoppen{display:flex;align-items:center;gap:clamp(1.5rem,6vw,2rem);flex:0 0 auto}
.knoppen form{margin:0}
.menuknop{display:none}
.knop{display:inline-block;font:inherit;font-weight:600;font-size:.9375rem;line-height:1.6;white-space:nowrap;border-radius:999px;padding:.55em 1.1em;border:0;background:var(--primair);color:#fff;cursor:pointer;text-decoration:none}
.knop:hover,.knop:focus{background:var(--groen);color:#fff}
.knop.omlijnd{background:transparent;color:var(--tekst);border:2px solid var(--tekst)}
.knop.omlijnd:hover,.knop.omlijnd:focus{background:var(--tekst);color:#fff}
/* Zoals de site met de knop Mijn Buurtstroom tussen 1024 en 1280px. */
@media (min-width:1024px) and (max-width:1279px){
  .kop-in{gap:24px}
  nav.site>ul{margin-left:32px}
  nav.site{font-size:.9375rem}
}
@media (max-width:1023px){
  .kop-in{flex-wrap:wrap;gap:12px}
  .menuknop{display:inline-block;margin-left:0;order:2;font:inherit;font-weight:600;background:none;border:2px solid var(--tekst);border-radius:999px;padding:.45em 1em;cursor:pointer;color:var(--tekst)}
  .knoppen{order:1;margin-left:auto}
  nav.site{order:3;flex-basis:100%;display:none}
  .kop.open nav.site{display:block}
  nav.site>ul{flex-direction:column;gap:4px;margin:8px 0 12px}
  .submenu{display:block;position:static;box-shadow:none;padding:0 0 0 12px;min-width:0}
  .met-sub>a::after{display:none}
}
@media (max-width:599px){
  .beeldmerk img{width:47px}
  .knoppen>a.omlijnd{display:none} /* zoals de site: op een telefoon alleen Doe mee */
}

/* ---- Voet (patterns/footer.php) ---- */
.voetbalk{background:var(--licht);font-size:.9375rem;padding:56px 16px}
.voet-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:34% repeat(3,minmax(0,1fr));gap:32px}
.voet-logo img{height:52px;width:auto;display:block}
.voet-logo p{margin:12px 0 0}
.voetbalk h2{font-family:Figtree,sans-serif;font-size:1rem;font-weight:600;letter-spacing:0;line-height:inherit;color:var(--actief);margin:0 0 4px}
.voetbalk ul{list-style:none;margin:0;padding:0}
.voetbalk li+li{margin-top:6px}
.voetbalk a{text-decoration:none}
.voetbalk a:hover,.voetbalk a:focus{text-decoration:underline;color:var(--actief)}
@media (max-width:781px){.voet-in{grid-template-columns:minmax(0,1fr)}}

/* ---- Meldingen en formulieren ---- */
.melding{max-width:1240px;margin:16px auto 0;padding:10px 16px;border-radius:12px;background:var(--licht)}
.melding.fout{background:var(--fout-vlak);color:var(--fout)}
.smal{max-width:520px;margin:0 auto;padding:2.5rem 16px 5rem}
.smal h1{margin-bottom:16px}
.sub-tekst,.sub{color:var(--zacht);margin:8px 0 0}
label{display:block;font-weight:600;margin:24px 0 6px}
input[type=email],input[type=text]{width:100%;font:inherit;font-size:1.0625rem;padding:12px 14px;border:1px solid #9fb3b1;border-radius:12px;background:#fff;color:var(--tekst)}
input.code{letter-spacing:.4em;font-size:1.4rem;text-align:center}
.smal form .knop{margin-top:20px;font-size:1rem;padding:.85em 1.4em}
.voet{font-size:.9375rem;color:var(--zacht);margin-top:16px}

/* ---- Mijn Buurtstroom: het patroon uit het thema (ADR-0140) ----
   Hieronder staat het blok "Mijn Buurtstroom (voorbeeldpagina)" en
   .bs-statuschip uit style.css van het thema, letterlijk overgenomen. De
   variabelen van WordPress krijgen hier hun waarde uit theme.json. Pas het
   daar aan en kopieer het opnieuw; zet eigen regels onderaan. */
:root{
  --wp--preset--color--foreground:#1a1a1a;
  --wp--preset--color--foreground-alt:#4a4a4a;
  --wp--preset--color--secondary:#4fcb19;
  --wp--preset--color--groen-licht:#edfae8;
  --wp--preset--font-family--bricolage-grotesque:"Bricolage Grotesque",Figtree,sans-serif;
}

.bs-statuschip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--groen-licht);
	color: #1f5a08;
	font-size: 0.9375rem;
	font-weight: 600;
}

.bs-statuschip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px rgba(79, 203, 25, 0.25);
}

.bs-statuschip--storing {
	background: #fef3c7;
	color: #78350f;
}

.bs-statuschip--storing::before {
	background: #f59e0b;
	box-shadow: 0 0 0 4px #fde68a;
}

.bs-mijn {
	--bs-mijn-rand: #d9eceb;
}

.bs-mijn h1,
.bs-mijn h2,
.bs-mijn h3 {
	margin: 0;
}

.bs-mijn__voorbeeld {
	margin: 0 0 2rem;
	padding: 10px 16px;
	border-radius: 12px;
	background: #fef3c7;
	color: #78350f;
	font-size: 0.9375rem;
}

.bs-mijn__indeling {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.bs-mijn__menu {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
}

.bs-mijn__menu a,
.bs-mijn__menu span {
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--foreground, #1a1a1a);
	text-decoration: none;
	font-weight: 500;
}

.bs-mijn__menu a[aria-current] {
	background: #e6f6f5;
	color: #00756f;
	font-weight: 600;
}

.bs-mijn__menu span {
	color: #6b6b6b;
}

.bs-mijn__menu-kop {
	margin: 20px 14px 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.bs-mijn__boven,
.bs-mijn__sub {
	margin: 0;
	color: #4a4a4a;
}

.bs-mijn__sub {
	margin-top: 8px;
}

.bs-mijn__tegels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 2rem;
}

.bs-mijn__tegel {
	padding: 20px 22px;
	border-radius: 16px;
	background: #e6f6f5;
}

.bs-mijn__tegel p {
	margin: 4px 0 0;
	font-size: 0.875rem;
	color: #4a4a4a;
}

.bs-mijn__tegel .bs-mijn__getal {
	margin: 0;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: #1a1a1a;
}

.bs-mijn__getal small {
	font-size: 1.05rem;
}

.bs-mijn__tegel--vol {
	background: #00a9a0;
}

.bs-mijn__tegel--vol p,
.bs-mijn__tegel--vol .bs-mijn__getal {
	color: #ffffff;
}

.bs-mijn__tegel--groen {
	background: #edfae8;
}

.bs-mijn__rij {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 28px;
	margin-top: 2.5rem;
}

.bs-mijn__kaart {
	padding: 24px;
	border: 1px solid var(--bs-mijn-rand);
	border-radius: 20px;
}

.bs-mijn__kaart--licht {
	border: 0;
	background: #f6faf9;
}

.bs-mijn__kaart h2,
.bs-mijn__controle h2 {
	font-size: 1.375rem;
}

.bs-mijn__kaart--licht h2 + * {
	margin-top: 12px;
}

.bs-mijn__kaart--licht p + h2 {
	margin-top: 28px;
}

.bs-mijn__kaart-kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.bs-mijn__kaart-kop span {
	font-size: 0.875rem;
	color: #4a4a4a;
}

.bs-mijn__grafiek {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 16px;
}

.bs-mijn__grafiek text {
	font-size: 11px;
	fill: #4a4a4a;
}

.bs-mijn__staaf {
	fill: #00a9a0;
}

.bs-mijn__staaf--lopend {
	fill: #9fdcd8;
}

.bs-mijn__voetnoot {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	color: #4a4a4a;
}

.bs-mijn__controle {
	padding: 24px;
	border-radius: 20px;
	background: #fef3c7;
	color: #78350f;
}

.bs-mijn__controle > p {
	margin: 8px 0 12px;
	font-size: 0.9375rem;
}

.bs-mijn__controle-rij {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid #f5d98a;
}

.bs-mijn__controle-rij strong {
	display: block;
	color: #1a1a1a;
}

.bs-mijn__label {
	display: block;
	font-size: 0.8125rem;
}

.bs-mijn__controle-rij .bs-mijn__sub {
	display: block;
	margin: 0;
	font-size: 0.8125rem;
}

.bs-mijn__controle a {
	color: #78350f;
	font-weight: 600;
}

.bs-mijn__controle .bs-mijn__controle-knop {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #f5d98a;
}

.bs-mijn__controle-knop a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: #78350f;
	color: #ffffff;
	text-decoration: none;
}

.bs-mijn__kop2 {
	margin-top: 2.5rem !important;
	font-size: 1.75rem;
}

.bs-mijn__rij .bs-mijn__kop2 {
	margin-top: 0 !important;
}

.bs-mijn__deelnames {
	display: grid;
	gap: 16px;
	margin-top: 16px;
}

.bs-mijn__deelname {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--bs-mijn-rand);
	border-radius: 20px;
}

.bs-mijn__deelname-foto {
	position: relative;
	min-height: 170px;
	background: #e6f6f5;
}

.bs-mijn__deelname-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bs-mijn__deelname-foto .bs-statuschip {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	background: #ffffff;
}

.bs-mijn__deelname-tekst {
	padding: 20px 24px;
}

.bs-mijn__deelname-kop a {
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bs-mijn__deelname-kop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.bs-mijn__deelname h3 {
	font-size: 1.375rem;
}

.bs-mijn__deelname dl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 28px;
	margin: 12px 0 0;
}

.bs-mijn__deelname dt {
	font-size: 0.875rem;
	color: #4a4a4a;
}

.bs-mijn__deelname dd {
	margin: 0;
	font-weight: 600;
}

.bs-mijn__deelname dd small {
	font-weight: 400;
	color: #4a4a4a;
}

.bs-mijn__deelname p {
	margin: 12px 0 0;
	font-size: 0.875rem;
	color: #4a4a4a;
}

.bs-mijn__gegevens {
	margin-top: 12px;
}

.bs-mijn__gegeven {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr) auto;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid #e3efee;
	font-size: 0.9375rem;
}

.bs-mijn__gegeven > span:first-child {
	color: #4a4a4a;
}

.bs-mijn__gegeven a,
.bs-mijn__kaart a {
	font-weight: 600;
}

.bs-mijn__voorkeuren {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-mijn__voorkeuren li {
	padding: 6px 0;
}

.bs-mijn__voorkeuren .uit {
	color: #4a4a4a;
}

@media (max-width: 1023px) {
	.bs-mijn__indeling {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.bs-mijn__menu {
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.bs-mijn__menu a,
	.bs-mijn__menu span {
		white-space: nowrap;
	}

	.bs-mijn__menu-kop,
	.bs-mijn__menu span {
		display: none;
	}

	.bs-mijn__tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bs-mijn__rij {
		grid-template-columns: minmax(0, 1fr);
	}

	.bs-mijn__deelname dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.bs-mijn__tegel {
		padding: 16px;
	}

	.bs-mijn__tegel .bs-mijn__getal {
		font-size: 1.5rem;
		white-space: nowrap;
	}

	.bs-mijn__getal small {
		display: block;
		font-size: 0.9375rem;
	}

	.bs-mijn__kaart,
	.bs-mijn__controle {
		padding: 18px;
	}

	.bs-mijn__deelname {
		grid-template-columns: minmax(0, 1fr);
	}

	.bs-mijn__deelname-foto {
		min-height: 150px;
	}

	.bs-mijn__deelname-tekst {
		padding: 16px 18px;
	}

	.bs-mijn__deelname dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bs-mijn__gegeven {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bs-mijn__gegeven > span:first-child {
		grid-column: 1 / -1;
		font-size: 0.8125rem;
	}
}

/* ---- Eigen aanvullingen voor het portaal ---- */
.bs-mijn{max-width:1240px;margin:0 auto;padding:2.5rem 16px 5rem}
.bs-mijn__boven{font-weight:600}
.bs-mijn h1{margin-top:4px}
.stand{display:inline-block;margin-top:16px;font-size:.875rem;color:var(--zacht);background:var(--licht);border-radius:999px;padding:4px 12px}
.stand b{color:var(--tekst)}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Drie tegels: release 1 toont geen bedragen (ADR-0134). */
.bs-mijn__tegels--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.bs-mijn__tegel--let-op{background:#fef3c7}
.bs-mijn__tegel--let-op p,.bs-mijn__tegel--let-op .bs-mijn__getal{color:#78350f}
/* De grafiek als staven in HTML, met de maten van de SVG in het patroon. */
.bs-mijn__staven{display:flex;align-items:flex-end;gap:2%;height:174px;margin-top:16px}
.bs-mijn__staven span{flex:1;min-height:2px;border-radius:3px;background:#00a9a0}
.bs-mijn__staven span.lopend{background:#9fdcd8}
.bs-mijn__maanden{display:flex;gap:2%;margin-top:6px;font-size:11px;color:#4a4a4a}
.bs-mijn__maanden span{flex:1;text-align:center}
/* Kloppen je gegevens nog? Alleen inzien: mailen in plaats van Wijzigen. */
.bs-mijn__controle-rij{display:block}
.bs-mijn__controle-knop a{text-decoration:none}
/* Geen foto in de CRM: de vlakkleur van het patroon met een zacht verloop. */
.bs-mijn__deelname-foto{background:linear-gradient(135deg,#9fdcd8,#e6f6f5)}
.bs-mijn__bijkopen{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:16px}
.bs-mijn__bijkopen p{margin:8px 0 0}
.bs-mijn__voorkeuren .uit{color:#4a4a4a}
@media (max-width:1023px){.bs-mijn__tegels--drie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.bs-mijn__maanden{font-size:9px}}

/* Uitloggen staat onderaan het menu van het portaal, als menu-item: de kop
 * heeft dezelfde knoppen als de site (Mijn Buurtstroom, Doe mee). */
.bs-mijn__uitloggen{margin:20px 0 0;border-top:1px solid #e3e3e3;padding-top:12px}
.bs-mijn__uitloggen button{font:inherit;font-weight:500;background:none;border:0;padding:9px 14px;border-radius:10px;color:var(--wp--preset--color--foreground,#1a1a1a);cursor:pointer;text-align:left;width:100%}
.bs-mijn__uitloggen button:hover,.bs-mijn__uitloggen button:focus{background:#e6f6f5;color:#00756f}
@media (max-width:1023px){
  .bs-mijn__uitloggen{margin:0 0 0 auto;border:0;padding:0}
  .bs-mijn__uitloggen button{white-space:nowrap;width:auto}
}