/*
 * Theme CSS is split by area: base.css, header.css, footer.css, page-*.css.
 * functions.php loads every .css file in this folder, so add a new file instead of growing a shared one.
 * Keep colors and fonts in theme.json; reference them here only through --wp--preset--* variables.
 */

/*
 * No focus box when a link or button is clicked or tapped, like Squarespace (WordPress draws one on any
 * :focus). Keyboard focus still gets the outline, through :focus-visible.
 */
:where(.wp-site-blocks) :focus:not(:focus-visible) {
	outline: none;
}

/* Keyboard focus ring in the text color (white on crimson, navy on cream), not Chrome's blue. */
:where(.wp-site-blocks) :focus-visible {
	outline-color: currentColor;
}

/*
 * Filled buttons: a ring in their text color would vanish on the page around them, so use a navy ring
 * with a white gap, which shows on light and dark backgrounds alike.
 */
:where(.wp-site-blocks) :is(.wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

/* Sections run edge to edge: no gap above the footer. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}


/* Facebook: a plain "f" like the Squarespace icons, instead of WordPress's "f" in a circle. */
.wp-social-link-facebook svg {
	display: none;
}

.wp-social-link-facebook a::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.5h2.9l.4-3.4h-3.3V8c0-1 .3-1.6 1.7-1.6h1.8V3.3c-.3 0-1.4-.1-2.6-.1-2.6 0-4.3 1.6-4.3 4.5v2.4H7.2v3.4h2.9V22h3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.5h2.9l.4-3.4h-3.3V8c0-1 .3-1.6 1.7-1.6h1.8V3.3c-.3 0-1.4-.1-2.6-.1-2.6 0-4.3 1.6-4.3 4.5v2.4H7.2v3.4h2.9V22h3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}