/* components/disclosure: a chip with a chevron and a list that drops down under it, aligned to its end
   (view 'dropdown'), or stands in one row in the banner (view 'row', below). The same rules style the
   <details><summary> (no script) and the <button aria-expanded> (disclosure.js). The chip and the items are
   buttons (components/button); here is what makes them a disclosure, its icons, and its colours, which are
   the disclosure tokens of css/tokens.css (by default the primary and secondary variants), so a site colours
   the picker and the share menu apart from the menu. */
@layer components {
	.dv-disclosure {
		position: relative;
		font-size: var(--font-size-small);
	}

	.dv-disclosure summary::-webkit-details-marker {
		display: none;
	}

	.dv-disclosure .dv-disclosure-button {
		display: flex;
		gap: 0.4em;
		padding: var(--space-1) var(--space-2);
		font-size: var(--font-size-small);
		border-radius: var(--radius-pill);
		list-style: none;
	}

	/* The chip's colours, except under keyboard focus: there the button's focus rule wins, on every
	   background, whatever the link order of the stylesheets. */
	.dv-disclosure .dv-disclosure-button:not(:focus-visible) {
		color: var(--disclosure-chip-color);
		background: var(--disclosure-chip-background);
		border-color: var(--disclosure-chip-border);
	}

	.dv-disclosure .dv-disclosure-button:hover:not(:focus-visible) {
		color: var(--disclosure-chip-hover-color);
		background: var(--disclosure-chip-hover-background);
		border-color: var(--disclosure-chip-hover-border);
	}

	/* The chevron: points down when closed, up when open. */
	.dv-disclosure .dv-disclosure-button::after {
		content: "";
		flex: none;
		inline-size: 0.4em;
		block-size: 0.4em;
		border-inline-end: 2px solid;
		border-block-end: 2px solid;
		transform: translateY(-0.15em) rotate(45deg);
		transition: transform var(--motion-duration) ease-out;
	}

	.dv-disclosure [open] > .dv-disclosure-button::after,
	.dv-disclosure .dv-disclosure-button[aria-expanded="true"]::after {
		transform: translateY(0.15em) rotate(-135deg);
	}

	/* The list drops down under the chip; the links keep a full touch target. */
	.dv-disclosure .dv-disclosure-list {
		position: absolute;
		inset-block-start: calc(100% + var(--space-1));
		inset-inline-end: 0;
		display: block;
		min-inline-size: 100%;
		max-inline-size: calc(100vw - 1em);
		margin: 0;
		padding: var(--space-1) 0;
		font-size: var(--font-size-body);
		list-style: none;
		background: var(--disclosure-panel-background);
		border: 2px solid var(--disclosure-panel-border);
		border-radius: var(--radius-panel);
		box-shadow: var(--shadow-panel);
	}

	.dv-disclosure .dv-disclosure-list[hidden] {
		display: none;
	}

	.dv-disclosure .dv-disclosure-item {
		display: flex;
		justify-content: flex-start;
		inline-size: 100%;
		padding: var(--space-2) var(--space-3);
		font-size: var(--font-size-body);
		line-height: var(--font-line-height);
		text-align: start;
		white-space: nowrap;
		border: 0;
		border-inline-start: 0.3em solid transparent;
	}

	/* The items' colours, again not under keyboard focus. */
	.dv-disclosure .dv-disclosure-item:not(:focus-visible) {
		color: var(--disclosure-item-color);
		background: var(--disclosure-item-background);
	}

	.dv-disclosure .dv-disclosure-item:hover:not(:focus-visible) {
		color: var(--disclosure-item-hover-color);
		background: var(--disclosure-item-hover-background);
	}

	/* The current item: bold, underlined (components/button) and a bar at the start, not only a colour. */
	.dv-disclosure .dv-disclosure-item[aria-current] {
		border-inline-start-color: var(--disclosure-item-current-marker);
	}

	.dv-disclosure .dv-disclosure-item:focus-visible {
		outline-offset: calc(-1 * var(--focus-outline-width));
	}

	/* The status line of an action item: nothing until its script fills it, then a few lines of text
	   under the button on the item's surface, wrapped (an address can be long), never wider than a
	   readable measure. */
	.dv-disclosure .dv-disclosure-status {
		margin: 0;
		padding: 0 var(--space-3);
		max-inline-size: 20em;
		font-size: var(--font-size-small);
		white-space: normal;
		overflow-wrap: anywhere;
		color: var(--disclosure-item-color);
		background: var(--disclosure-item-background);
	}

	.dv-disclosure .dv-disclosure-status:not(:empty) {
		padding-block: var(--space-1) var(--space-2);
	}

	/* The icons (render.php, DVLOP_DISCLOSURE_ICONS): decorative, so not in the markup: <name>.svg next to this
	   file as a mask in the text colour, before the chip's label (data-chip-icon, the language picker's globe;
	   on the summary and on the button, because disclosure.js replaces the one by the other) and before an
	   item's label (data-icon, the share services; above it in a row). The label is always the name. */
	.dv-disclosure[data-chip-icon] .dv-disclosure-button::before {
		content: "";
		flex: none;
		inline-size: 1.1em;
		block-size: 1.1em;
	}

	.dv-disclosure .dv-disclosure-item[data-icon]::before {
		content: "";
		flex: none;
		inline-size: 1.5rem;
		block-size: 1.5rem;
	}

	.dv-disclosure[data-chip-icon] .dv-disclosure-button::before,
	.dv-disclosure .dv-disclosure-item[data-icon]::before {
		background-color: currentColor;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		forced-color-adjust: none;
	}

	.dv-disclosure[data-chip-icon="globe"] .dv-disclosure-button::before {
		-webkit-mask-image: url(globe.svg);
		mask-image: url(globe.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="email"]::before {
		-webkit-mask-image: url(email.svg);
		mask-image: url(email.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="whatsapp"]::before {
		-webkit-mask-image: url(whatsapp.svg);
		mask-image: url(whatsapp.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="linkedin"]::before {
		-webkit-mask-image: url(linkedin.svg);
		mask-image: url(linkedin.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="facebook"]::before {
		-webkit-mask-image: url(facebook.svg);
		mask-image: url(facebook.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="copylink"]::before {
		-webkit-mask-image: url(copylink.svg);
		mask-image: url(copylink.svg);
	}

	.dv-disclosure .dv-disclosure-item[data-icon="system"]::before {
		-webkit-mask-image: url(system.svg);
		mask-image: url(system.svg);
	}

	/* The row view (view 'row'; Tim, 2026-10-15: "horizontaal zodat hij niet over de hele pagina heen valt maar
	   in de banner blijft", for the share menu and the language picker alike). Open, the items stand in one row
	   under the header's tools, anchored to the end of the tools (not to the chip), so it stays inside the
	   banner on a phone too; an item with an icon has its label under it, a text item is its text. The site
	   header fades and disables its main menu while a row is open (components/site-header). */
	.dv-disclosure--row {
		position: static;
		flex: none;
	}

	.dv-disclosure--row .dv-disclosure-list:not([hidden]) {
		box-sizing: border-box;
		display: flex;
		inline-size: max-content;
		min-inline-size: 0;
		max-inline-size: calc(100vw - 2 * var(--space-2));
		padding: var(--space-1);
	}

	.dv-disclosure--row .dv-disclosure-list > li:not([hidden]) {
		display: flex;
		flex: 1 1 auto;
	}

	.dv-disclosure--row .dv-disclosure-item {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		min-inline-size: var(--touch-target);
		padding: var(--space-1) var(--space-2);
		font-size: var(--font-size-small);
		line-height: 1.2;
		text-align: center;
		white-space: normal;
		border-inline-start: 0;
		border-radius: var(--radius-panel);
	}

	.dv-disclosure--row .dv-disclosure-item[data-icon] {
		justify-content: flex-start;
		padding-inline: var(--space-1);
	}

	/* In a row the current item's bar lies under its label, not before it. */
	.dv-disclosure--row .dv-disclosure-item[aria-current] {
		box-shadow: inset 0 -0.25em 0 var(--disclosure-item-current-marker);
	}

	/* What an action did: a line under the row, on the panel, as wide as the row; out of the row's flow, so
	   while it is empty it takes no room from its item. */
	.dv-disclosure--row .dv-disclosure-status {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: -2px;
		max-inline-size: none;
		padding: 0;
	}

	.dv-disclosure--row .dv-disclosure-status:not(:empty) {
		padding: var(--space-1) var(--space-2);
		background: var(--disclosure-panel-background);
		border: 2px solid var(--disclosure-panel-border);
		border-block-start: 0;
		border-radius: 0 0 var(--radius-panel) var(--radius-panel);
	}

	/* A phone's banner has no room under the tools: there the row (once disclosure.js made the chip a button)
	   is a line of the tools of its own, under the chips, and the banner grows by it while it is open, so
	   nothing falls over the page. The wrapper gives way (display: contents; it is a plain div), so the chip
	   and the row are the tools' own items (components/site-header lets them wrap). The labels are a size
	   smaller, so five share services are one line at 375 CSS pixels; narrower it wraps rather than be cut off. */
	@media (width < 768px) {
		.dv-disclosure--row:has(> .dv-disclosure-button) {
			display: contents;
		}

		.dv-disclosure--row > .dv-disclosure-list:not([hidden]) {
			position: static;
			order: 1;
			flex-basis: 100%;
			flex-wrap: wrap;
			inline-size: auto;
			max-inline-size: none;
		}

		.dv-disclosure--row .dv-disclosure-item {
			padding-inline: var(--space-1);
			font-size: var(--font-size-caption);
		}

		.dv-disclosure--row .dv-disclosure-item[data-icon] {
			padding-inline: 0;
		}
	}
}