/* Text boxes of the RUB web components (design/README.md): the info box
   (group style “Info box”, formerly “Accent box”) and the fold box (the
   Details block, which opens on a click). Part of the RUB Chair theme. */

/* Info box: a light area with an info icon before the text, e.g. a call for
   applications or a note. Corners: components.css. */
.rub-callout,
.is-style-rub-callout {
	background-color: var(--rub-subtle);
	padding: 1rem 1.5rem 1rem 3.5rem;
	position: relative;
}

.rub-callout::before,
.is-style-rub-callout::before {
	background-color: var(--rub-blue);
	content: "";
	height: 1.25rem;
	left: 1.5rem;
	mask: url("../icons/info.svg") center / contain no-repeat;
	position: absolute;
	top: 1.2rem;
	width: 1.25rem;
}

:is(.rub-callout, .is-style-rub-callout) > :first-child {
	margin-top: 0;
}

:is(.rub-callout, .is-style-rub-callout) > :last-child {
	margin-bottom: 0;
}

/* Fold box: Hellblau rows that open, the title with a chevron on the right.
   Padding 32 (24 on phones), 24 between title and chevron, 32 to the opened
   text, as the library's fold box. */
.wp-block-details {
	--rub-fold-padding: 24px;

	background-color: var(--rub-light);
	border-radius: var(--rub-radius);
	padding: 0 var(--rub-fold-padding);
}

@media (min-width: 768px) {
	.wp-block-details {
		--rub-fold-padding: 32px;
	}
}

.wp-block-details + .wp-block-details {
	margin-top: 0.5rem;
}

.wp-block-details[open] {
	padding-bottom: var(--rub-fold-padding);
}

.wp-block-details summary {
	align-items: center;
	color: var(--rub-blue);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 1.5rem;
	justify-content: space-between;
	list-style: none;
	padding: var(--rub-fold-padding) 0;
}

/* The opened text sits 32 below the title (the summary's padding) and 32
   above the lower edge (the box's padding), with no extra margins. */
.wp-block-details > summary + * {
	margin-top: 0;
}

.wp-block-details > :last-child {
	margin-bottom: 0;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 1.25rem;
	mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	transition: transform var(--rub-transition);
	width: 1.25rem;
}

.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

/* Block style “Fold row” (Details): the same without the light area, the
   rows divided by fine lines. */
.wp-block-details.is-style-rub-fold-row {
	background-color: transparent;
	border-bottom: 1px solid var(--rub-frame);
	border-radius: 0;
	padding-inline: 0;
}

.wp-block-details.is-style-rub-fold-row + .wp-block-details.is-style-rub-fold-row {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details summary::after,
	.rub-publications__abstract summary::after {
		transition: none;
	}
}

/* “Abstract” in the publication lists (RUB Publications) opens as a fold row
   does: the word with a small chevron after it, turned when open. */
.rub-publications__abstract summary {
	align-items: center;
	display: inline-flex;
	gap: 0.35rem;
	list-style: none;
}

.rub-publications__abstract summary::-webkit-details-marker {
	display: none;
}

.rub-publications__abstract summary::after {
	background-color: currentColor;
	content: "";
	height: 1rem;
	mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	transition: transform var(--rub-transition);
	width: 1rem;
}

.rub-publications__abstract[open] summary::after {
	transform: rotate(180deg);
}