/*!
 * De Korne — footer
 *
 * The footer had no stylesheet of its own: it is a block template part and
 * every rule came from inline block attributes plus core. That is a good state
 * to be in and this file keeps it small — it exists for the one thing block
 * attributes cannot express, which is how the layout should behave when it runs
 * out of width.
 *
 * The problem it fixes: the "Over ons / Voorwaarden / Social" row is a flex
 * group with space-between, and core's flex layout wraps. Wrapping three items
 * of unequal width gives a different, equally untidy result at every screen
 * size — at 420px all three squeeze onto one line with "Social" pressed against
 * the edge, and at 360px "Social" drops to a second row under "Over ons" while
 * "Voorwaarden" stays tall beside it, leaving a staircase.
 *
 * The address row directly below it is a columns block, so it stacks cleanly at
 * the same breakpoint. Making the nav row stack the same way is what makes the
 * two halves of the footer agree.
 */

/*
 * 781px is where core stacks a columns block, so the nav row and the address
 * row below it change shape on the same breakpoint rather than one at a time.
 */
@media (max-width: 781px) {
	.wp-block-template-part > .wp-block-group .wp-block-group.is-content-justification-space-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.75rem;
	}

	/*
	 * Each nav group then owns the full width, so its links start on the same
	 * left edge as the headings in the address block underneath.
	 */
	.wp-block-template-part > .wp-block-group .wp-block-group.is-content-justification-space-between > .wp-block-group {
		width: 100%;
	}
}

/*
 * Footer navigation links are plain text links, not the pill-shaped buttons the
 * header uses. Core gives them no hover state at all, so there was no feedback
 * on any of them.
 */
.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover {
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
		transition-duration: 0.01ms;
	}
}