/*
 * BuySups footer.
 *
 * Loaded on the front end and inside the block editors, so the footer in the
 * Site Editor matches what visitors see. Only what theme.json and core block
 * supports cannot express belongs here: the responsive column spans, the link
 * and social hover states, and the newsletter form.
 */

.bs-footer {
	--bs-footer-green: var( --wp--preset--color--accent-1, #0f5132 );
	--bs-footer-green-dark: var( --wp--preset--color--accent-2, #0a3a24 );
	--bs-footer-accent: var( --wp--preset--color--accent-3, #b18dff );
	--bs-footer-tint: var( --wp--preset--color--green-tint, #cbddd2 );
	--bs-footer-muted: var( --wp--preset--color--green-muted, #9db5a7 );
	--bs-footer-dim: var( --wp--preset--color--green-dim, #85a08f );
	--bs-footer-rule: rgba( 255, 255, 255, 0.14 );
	--bs-footer-gutter: clamp( 16px, 3vw, 32px );
}

.bs-footer__inner {
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: var( --bs-footer-gutter );
}

/* --------------------------------------------------------------- Rules */

.bs-footer__rule.wp-block-separator {
	border: 0;
	height: 1px;
	background: var( --bs-footer-rule );
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* ------------------------------------------------------- Column layout */

/*
 * Core's grid layout auto-fills tracks, which leaves the brand column plus
 * four link columns wrapping into a ragged second row at common desktop
 * widths. An explicit template per breakpoint keeps the row count honest.
 * The doubled class outranks the single-class selector core prints inline.
 */
.bs-footer .bs-footer__cols {
	grid-template-columns: 1fr;
	column-gap: clamp( 24px, 2.6vw, 48px );
	row-gap: 40px;
}

@media ( min-width: 640px ) {

	.bs-footer .bs-footer__cols {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bs-footer__brand-col {
		grid-column: span 2;
	}
}

/*
 * One row: the brand column carries the logo, blurb, socials and newsletter,
 * so it takes a little over half again the width of a link column.
 */
@media ( min-width: 1200px ) {

	.bs-footer .bs-footer__cols {
		grid-template-columns: 1.6fr repeat( 4, minmax( 0, 1fr ) );
	}

	.bs-footer__brand-col {
		grid-column: span 1;
	}
}

.bs-footer__brand-col {
	min-width: 0;
}

.bs-footer__logo img {
	height: 34px;
	width: auto;
	display: block;
}

.bs-footer__blurb {
	max-width: 38ch;
}

/* ------------------------------------------------------------- Socials */

.bs-footer__social .wp-social-link {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 50%;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

/*
 * The logos-only style colours each icon with its own brand colour via
 * per-service rules, which outrank a single-class selector. Doubling up on
 * .bs-footer takes precedence back so the row reads as one set.
 */
.bs-footer .bs-footer__social .wp-social-link,
.bs-footer .bs-footer__social .wp-social-link a {
	color: var( --bs-footer-tint );
	padding: 0;
}

.bs-footer .bs-footer__social .wp-social-link svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.bs-footer__social .wp-social-link:hover {
	border-color: var( --bs-footer-accent );
	transform: none;
}

.bs-footer .bs-footer__social .wp-social-link:hover,
.bs-footer .bs-footer__social .wp-social-link:hover a {
	color: var( --bs-footer-accent );
}

/* ---------------------------------------------------------- Newsletter */

/* Not every parent stylesheet ships this, so the label stays hidden either way. */
.bs-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.bs-footer__signup {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 420px;
}

.bs-footer__signup input[type="email"] {
	/* Narrow enough that the field and button share a line in the one-row layout. */
	flex: 1 1 180px;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: #fff;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 10px;
	padding: 14px 16px;
}

.bs-footer__signup input[type="email"]::placeholder {
	color: var( --bs-footer-dim );
}

.bs-footer__signup input[type="email"]:focus-visible {
	outline: 2px solid var( --bs-footer-accent );
	outline-offset: 2px;
}

.bs-footer__signup button {
	appearance: none;
	border: 0;
	border-radius: 10px;
	background: var( --bs-footer-accent );
	color: var( --wp--preset--color--contrast, #16241d );
	font-family: var( --wp--preset--font-family--outfit, inherit );
	font-size: 15.5px;
	font-weight: 600;
	padding: 14px 24px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bs-footer__signup button:hover {
	background: var( --wp--preset--color--accent-4, #8a5cf0 );
	color: #fff;
}

/* ---------------------------------------------------------- Link lists */

.bs-footer__links .wp-block-navigation-item__content {
	color: var( --bs-footer-tint );
	font-size: 15px;
	line-height: 2.1;
	transition: color 0.15s ease;
}

.bs-footer__links .wp-block-navigation-item__content:hover,
.bs-footer__links .wp-block-navigation-item__content:focus-visible {
	color: var( --bs-footer-accent );
	text-decoration: none;
}

.bs-footer__col-title {
	margin: 0 0 14px;
}