/*
 * Footer social marks for the renamed links, 2026-11-05.
 *
 * The footer draws each social wordmark as a ::before background image selected by the link's
 * aria-label. Renaming "Twitter" -> "X" and the misspelled "Linkdin" -> "LinkedIn" therefore
 * stopped the old selectors matching.
 *
 * style.css carries the corrected selectors, but it is served from /rst/assets/css/style.css with
 * no ?ver= query -- wp-hide-security-enhancer strips it -- under a two-week Cache-Control. Anyone
 * who already has the old file would keep it, and see two blank gaps, until it expired. This file
 * is a new URL, so it cannot be stale, and it carries the same two rules.
 *
 * Once the old style.css has aged out everywhere this file is redundant and can be dropped.
 */

footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="X"]::before {
	background-image: url("../images/x.svg");
}

footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="LinkedIn"]::before {
	background-image: url("../images/linkedin.svg");
}

/*
 * One row instead of four, 2026-11-05.
 *
 * The four marks were stacked because each anchor is a full-width block whose ::before is a fixed
 * 160x16 absolute box. Three of the four files are wordmarks (facebook 87x17, linkedin 80x16,
 * medium 75x14) but X has no wordmark -- its brand IS the glyph (24x24) -- so in a stacked column
 * it sat alone on a line at a sixth of its neighbours' width and read as a rendering fault.
 *
 * Laying them out inline fixes that without resizing anything: a small square mark between two
 * wordmarks reads as deliberate punctuation. The ::before becomes a normal flex item sized to each
 * file's own aspect ratio at a shared 16px cap height, so the anchor widths follow the artwork
 * rather than a one-size 160px box. Total 264px + 3 gaps = 348px, inside the 430px column.
 */

footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item {
	margin-top: 0;
	padding-bottom: 0;
}

footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item::before {
	position: static;
	min-width: 0;
	min-height: 0;
	height: 16px;
	background-size: contain;
}

/* width = each file's natural aspect at 16px tall */
footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="Facebook"]::before { width: 82px; }
footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="X"]::before        { width: 16px; }
footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="LinkedIn"]::before { width: 80px; }
footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item[aria-label="Medium"]::before   { width: 86px; }

/* The stacked layout centred each mark with left: calc(50% - 40px) on an absolute ::before. That
   no longer applies now the box is static, so centre the row itself instead. */
@media screen and (max-width: 767px) {
	footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap {
		justify-content: center;
		gap: 24px;
	}
	footer.site-footer .ast-footer-social-wrap .footer-social-inner-wrap a.footer-social-item::before {
		left: auto;
	}
}