/**
 * Rosbjerg HELPER – "Tilføj til kalender".
 *
 * Bruger kun inline (phrasing) elementer, så knappen også er gyldig inde i
 * en overskrift (h1). CSS-variabler gør det let at finjustere.
 */

.rh-atc {
	--rh-accent: #111111;
	--rh-radius: 999px;
	--rh-gap: 8px;

	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rh-gap);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: middle;
}

.rh-atc__label {
	font-weight: 600;
}

.rh-atc__link {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid currentColor;
	border-radius: var(--rh-radius);
	text-decoration: none;
	color: inherit;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.rh-atc__link:hover,
.rh-atc__link:focus-visible {
	background-color: var(--rh-accent);
	color: #ffffff;
	border-color: var(--rh-accent);
}

/* Kontekst: før titel på en post – vis som blok over titlen, uafhængigt af overskriftens typografi. */
.rh-atc--post-title {
	display: flex;
	margin: 0 0 14px;
	font-size: 0.8rem;
}

/* Kontekst: i events-popup. */
.rh-atc--modal {
	display: flex;
	margin: 2px 0 6px;
}

/* Firkantede knapper i events-overlayet (matcher "Læs mere"). */
.rh-atc--modal .rh-atc__link {
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rh-atc__link {
		transition: none;
	}
}