/*
 * Opmaak in de huisstijl van kwiekenergie.nl. Gebruikt de Breakdance-variabelen
 * van de site waar die bestaan, met de huidige merkkleuren als terugval.
 * Aanpassen kan via de --kwiek-doc-* variabelen op .kwiek-docs.
 */
.kwiek-docs {
	--kwiek-doc-groen: var(--custom-481, #66ae76);
	--kwiek-doc-groen-hover: #57a067;
	--kwiek-doc-lila: var(--hcl-brand-9, #b39ecb);
	--kwiek-doc-lila-donker: var(--hcl-brand-emphasis, #705d86);
	--kwiek-doc-lila-licht: var(--hcl-brand-3, #f4f0f9);
	--kwiek-doc-rand: var(--hcl-brand-4, #ece6f5);
	--kwiek-doc-kaart: var(--hcl-neutral-1, #fdfcfd);
	--kwiek-doc-kop: var(--bde-headings-color, #0c0d2f);
	--kwiek-doc-tekst: rgba(18, 12, 47, .8);
	--kwiek-doc-zacht: rgba(18, 12, 47, .6);
	--kwiek-doc-actie: .9375rem;

	display: grid;
	gap: 1rem;
	font-family: var(--bde-body-font-family, "Inter", sans-serif);
	font-weight: 300;
	color: var(--kwiek-doc-tekst);
}

.kwiek-doc {
	padding: 1.25rem 1.5rem;
	background: var(--kwiek-doc-kaart);
	border: 1px solid var(--kwiek-doc-rand);
	border-radius: 18px;
	box-shadow: 5px 20px 75px 0 rgba(0, 0, 0, .06);
}

/* Kop: icoon | naam + versie | download + eerdere versies */
.kwiek-doc__kop {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
}

.kwiek-doc__kop > .kwiek-doc__icoon {
	width: 2.75rem;
	height: 2.75rem;
	padding: .6rem;
	color: var(--kwiek-doc-lila-donker);
	background: var(--kwiek-doc-lila-licht);
	border-radius: 12px;
}

.kwiek-doc__koptekst {
	display: grid;
	gap: .2rem;
	min-width: 0;
}

.kwiek-doc__titel {
	margin: 0;
	font-family: var(--bde-heading-font-family, "Ubuntu", sans-serif);
	font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--kwiek-doc-kop);
}

.kwiek-doc__subtitel {
	font-size: .875rem;
	line-height: 1.3;
	color: var(--kwiek-doc-zacht);
}

.kwiek-doc__acties {
	display: grid;
	justify-items: end;
	gap: .5rem;
}

/* Download en uitklapper: zelfde maat, kleur en gewicht */
.kwiek-docs a.kwiek-doc__tekstlink,
.kwiek-docs button.kwiek-doc__toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--kwiek-doc-actie);
	font-weight: 400;
	line-height: 1.4;
	color: var(--kwiek-doc-lila-donker);
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.kwiek-docs a.kwiek-doc__tekstlink:hover,
.kwiek-docs a.kwiek-doc__tekstlink:focus-visible,
.kwiek-docs button.kwiek-doc__toggle:hover,
.kwiek-docs button.kwiek-doc__toggle:focus-visible {
	color: var(--kwiek-doc-kop);
	background: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kwiek-docs button.kwiek-doc__toggle {
	color: var(--kwiek-doc-zacht);
}

/* Downloadknop actuele versie: groene pill zoals de primaire knoppen op de site */
.kwiek-docs a.kwiek-doc__knop {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 10px 20px;
	font-family: inherit;
	font-size: var(--kwiek-doc-actie);
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	background: var(--kwiek-doc-groen);
	border: 0;
	border-radius: 9999px;
	transition: background-color .2s ease-in-out;
}

.kwiek-docs a.kwiek-doc__knop:hover,
.kwiek-docs a.kwiek-doc__knop:focus-visible {
	color: #fff;
	text-decoration: none;
	background: var(--kwiek-doc-groen-hover);
}

.kwiek-doc__toggle::after {
	content: "";
	width: .38em;
	height: .38em;
	margin: -.2em .1em 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease-in-out, margin .2s ease-in-out;
}

.kwiek-doc__toggle[aria-expanded="true"]::after {
	margin-top: .2em;
	transform: rotate(-135deg);
}

.kwiek-doc__icoon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
}

/* Eerdere versies */
.kwiek-doc__archief {
	margin-top: 1rem;
	border-top: 1px solid var(--kwiek-doc-rand);
}

.kwiek-doc__archief ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kwiek-doc__archief li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--kwiek-doc-rand);
}

.kwiek-doc__archief li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.kwiek-doc__info {
	display: grid;
	gap: .1rem;
	min-width: 0;
	font-size: .875rem;
}

.kwiek-doc__versie {
	font-weight: 500;
	color: var(--kwiek-doc-kop);
}

.kwiek-doc__periode,
.kwiek-doc__wijzigingen {
	margin: 0;
	color: var(--kwiek-doc-zacht);
}

/* Aangekondigde versie (alleen met gepland="ja") */
.kwiek-doc__aankondiging {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-top: 1rem;
	padding: .875rem 1.125rem;
	background: var(--kwiek-doc-lila-licht);
	border-radius: 12px;
}

.kwiek-doc__label {
	font-weight: 500;
	color: var(--kwiek-doc-lila-donker);
}

/* Smal scherm: acties onder de naam, naast elkaar */
@media (max-width: 560px) {
	.kwiek-doc {
		padding: 1rem 1.125rem;
	}

	.kwiek-doc__kop {
		grid-template-columns: auto 1fr;
		gap: .75rem 1rem;
	}

	.kwiek-doc__kop > .kwiek-doc__icoon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.kwiek-doc__acties {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		gap: .25rem 1.25rem;
	}
}