/* Previous and next post under a news post (templates/single.html): one row
   above a fine line, the older post on the left with an arrow pointing left,
   the newer one on the right; the word small and quiet, the title semi-bold.
   On phones one under the other. Part of the RUB Chair theme. */
.rub-post-nav {
	border-top: 1px solid var(--rub-frame);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

.rub-post-nav .wp-block-post-navigation-link {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	max-width: 28rem;
}

/* The newest post has no “Next”: its empty box takes no room. */
.rub-post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

.rub-post-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.rub-post-nav .post-navigation-link__label {
	color: var(--rub-quiet);
	font-size: var(--wp--preset--font-size--small);
}

.rub-post-nav a {
	color: var(--rub-blue);
	font-weight: 600;
	text-decoration: none;
}

.rub-post-nav a:hover,
.rub-post-nav a:focus-visible {
	text-decoration: underline;
}

/* The arrows (Lucide), as decoration: the word says the direction. */
.rub-post-nav a::before,
.rub-post-nav a::after {
	background-color: currentColor;
	display: inline-block;
	height: 0.9em;
	vertical-align: -0.1em;
	width: 0.9em;
}

.post-navigation-link-previous a::before {
	content: "";
	margin-right: 0.4em;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	transform: scaleX(-1);
}

.post-navigation-link-next a::after {
	content: "";
	margin-left: 0.4em;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

@media (max-width: 599.98px) {
	.rub-post-nav .post-navigation-link-next {
		margin-left: 0;
		text-align: left;
	}
}