/*
 * Footer (parts/footer.html).
 */

/*
 * Green bar. The titles at their own size, 16px (site.css makes every h3
 * 23px), so they stay on one line.
 */
.pc-footer-features {
	padding-block: 24px;
}

/* The icons the same height, centered in a box beside the text. */
.pc-footer-features .wp-block-column > p {
	padding: 0 !important;
	line-height: 0;
	text-align: center;
}

.pc-footer-features .wp-block-column > p svg {
	width: auto;
	height: 30px;
}

.pc-footer-features .is-not-stacked-on-mobile {
	gap: 14px;
}

/* Not the width: 100% WordPress gives vertically centered columns. */
.pc-footer-features .is-not-stacked-on-mobile > .wp-block-column:first-child {
	flex: 0 0 40px !important;
	width: auto;
}

.pc-footer-features .is-not-stacked-on-mobile > .wp-block-column:last-child {
	flex: 1 1 auto;
}

/*
 * Larger screens: three equal thirds, each item centered in its own, so the
 * middle one sits in the middle and the outer two mirror each other. Each
 * icon's box fits the icon, so the space to the text is the same in all three.
 */
@media (min-width: 782px) {
	.pc-footer-features .wp-block-columns.alignwide {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-items: center;
	}

	.pc-footer-features .wp-block-columns.alignwide > .wp-block-column {
		flex: none !important;
		max-width: 100%;
	}

	.pc-footer-features .is-not-stacked-on-mobile > .wp-block-column:first-child {
		flex-basis: auto !important;
	}
}

.pc-footer-features h3 {
	margin: 0 0 2px;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.pc-footer-features .wp-block-group p {
	font-size: 13px !important;
	opacity: 0.85;
}

/* Links and contact details: matching headings, and the lists closer together. */
.pc-footer-main h2.wp-block-heading {
	margin-bottom: 4px;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
}

.pc-footer-main .pc-footer-links {
	gap: 10px;
}

.pc-footer-main .pc-footer-links a {
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.2s ease;
}

.pc-footer-main .pc-footer-links a:hover {
	color: #fff;
}

/*
 * Bottom strip: the logo and social icons on the left, the payment cards
 * and the copyright on the right, in one row.
 */
.pc-footer-bottom .wp-block-columns {
	gap: 24px 40px;
	padding-block: 24px !important;
}

/* Not the width: 100% WordPress gives vertically centered columns. */
.pc-footer-bottom .wp-block-columns > .wp-block-column {
	flex: 0 0 auto;
	width: auto;
}

.pc-footer-bottom .wp-block-columns > .pc-footer-logo {
	flex-basis: 120px;
}

.pc-footer-bottom .wp-block-columns > .pc-footer-social {
	flex: 1 0 auto;
}

.pc-footer-bottom .wp-block-columns > .pc-footer-payments {
	flex-basis: 250px;
}

.pc-footer-bottom .wp-block-image {
	margin: 0;
}

.pc-footer-logo img {
	width: 120px;
}

.pc-footer-payments img {
	width: 250px;
	max-width: 100%;
}

.pc-footer-copyright p {
	margin: 0;
	white-space: nowrap;
}

/* Tablets: the copyright wraps instead of pushing the row off the screen. */
@media (max-width: 1100px) {
	.pc-footer-bottom .wp-block-columns > .pc-footer-copyright {
		flex-shrink: 1;
	}

	.pc-footer-copyright p {
		white-space: normal;
	}
}

/* Phones (where the columns stack): tighter, and the bottom strip centered. */
@media (max-width: 781px) {
	.pc-footer-features .wp-block-columns.alignwide {
		gap: 16px;
	}

	.pc-footer-main {
		padding-block: 40px !important;
	}

	.pc-footer-main .wp-block-columns.alignwide {
		gap: 36px;
	}

	/* Quick Links in two columns. */
	.pc-footer-main .pc-footer-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
	}

	.pc-footer-bottom .wp-block-columns {
		align-items: center;
		gap: 16px;
		text-align: center;
	}

	.pc-footer-bottom .wp-block-columns > .wp-block-column {
		display: flex;
		justify-content: center;
	}

	.pc-footer-social .wp-block-group {
		justify-content: center;
	}
}