/**
 * Footer.
 *
 * 900px matches the Astra mobile breakpoint set in newlife-breakpoints.php.
 * If that value changes, change it here too.
 *
 * These two rules exist because block attributes have no per-device variants:
 * the icon size is an inline style and the group's justification is a block
 * attribute, so both would otherwise apply to desktop as well.
 */

/**
 * Wide screens: the brand on its own, the rest grouped.
 *
 * Astra's row is a CSS grid of four equal tracks. Reshaping it here keeps
 * all four widgets separate and separately editable, which merging them
 * into a single three-column block would not.
 *
 * The first track takes 30%, and because the lockup is only 320px the
 * leftover inside that track becomes the gap - 238px at 1920, closing as
 * the window narrows. A fixed gap cannot do that: a flat 180px would hold
 * the three content columns to 156px at 1440, and the copyright line alone
 * runs to 213px.
 *
 * 1540px is where that copyright still fits on one line at 30%. Below it
 * the four equal tracks are already the best fit, and stay.
 */

@media (min-width: 1540px) {

	.site-primary-footer-wrap.ast-builder-grid-row-4-equal .ast-builder-grid-row {
		grid-template-columns: 30% repeat(3, minmax(0, 1fr));
	}
}

/**
 * The contact address stays on one line.
 *
 * At 20px it runs to 181px, against a column of 192px at the narrow end of
 * the desktop range - enough, but not by much, and a wrapped address reads
 * as two addresses. No block attribute can say white-space.
 */

.footer-widget-area[data-section="sidebar-widgets-footer-widget-2"] p {
	white-space: nowrap;
}

/**
 * The "Before You Go..." call to action.
 *
 * The heading's desktop type is on the block, like the other footer headings.
 * The button's is not, and cannot be: Astra ships sixteen rules against
 * .wp-block-button__link, several of them for :hover, and a block attribute
 * only ever writes a plain inline style - which has nothing to say about hover
 * and so loses the moment somebody points at it. The whole appearance is here
 * instead, at a specificity that clears Astra's without !important.
 *
 * Values match the buttons everywhere else on the site (see pledge-form.css).
 */

.site-footer .nl-footer-cta .wp-block-button__link {
	padding: 10px 40px;
	border: var(--rule-thin, 1px) solid var(--color-ink, #3c472e);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--color-ink, #3c472e);
	font-family: var(--font-display, inherit);
	font-size: var(--text-small, 18px);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: opacity 160ms;
}

/**
 * The narrow end of the desktop range.
 *
 * Four columns start at 1281px, one past the tablet breakpoint, where each is
 * about 192px against 349px at 1920. The label plus 80px of padding leaves
 * almost nothing either side, so the padding trims here and the full 40px
 * comes back as soon as there is room for it.
 */

@media (min-width: 1281px) and (max-width: 1440px) {

	.site-footer .nl-footer-cta .wp-block-button__link {
		padding-right: var(--space-md, 24px);
		padding-left: var(--space-md, 24px);
	}
}
/* Four classes, because Astra's hover carries three. */
.site-footer .nl-footer-cta .wp-block-button__link:hover,
.site-footer .nl-footer-cta .wp-block-button__link:focus-visible {
	border-color: var(--color-ink, #3c472e);
	background-color: transparent;
	color: var(--color-ink, #3c472e);
	opacity: var(--opacity-hover, 0.6);
}
@media (max-width: 900px) {

	/* Centre the call to action's button.
	   Its column is centred by footer-widget-alignment-4, but the button
	   sits in a flex container and text-align does not position flex
	   items - exactly as for the icons below. */
	.footer-widget-area[data-section="sidebar-widgets-footer-widget-4"]
	.wp-block-buttons {
		justify-content: center;
	}

	/* Centre the row of social icons.
	   The widget area is text-align:center on mobile, but the icons sit in a
	   flex container and text-align does not position flex items. */
	.footer-widget-area[data-section="sidebar-widgets-footer-widget-3"]
	.wp-block-group.is-layout-flex {
		justify-content: center;
	}

	/* 38px -> 27px.
	   !important is required here, not stylistic: the image block writes
	   width:38px as an inline style, which no selector can outrank. */
	.footer-widget-area[data-section="sidebar-widgets-footer-widget-3"]
	.wp-block-image img {
		width: 27px !important;
		height: auto;
	}

	/* Type scales down on mobile: every piece of footer text reads at 14px,
	   the button included, which is also what the site's other buttons do at
	   this width (see pledge-form.css). The desktop sizes stay on the blocks,
	   where they remain editable; these are the mobile half of that pair.
	   !important is required, not stylistic - a block writes font-size as an
	   inline style, which no selector can outrank. */
	.site-primary-footer-wrap .footer-widget-area .wp-block-heading,
	.site-primary-footer-wrap .footer-widget-area p {
		font-size: 14px !important;
	}

	/* Padding is left alone: a 14px label in the same box keeps the tap
	   target comfortable. */
	.site-footer .nl-footer-cta .wp-block-button__link {
		font-size: 14px;
	}
}