/*
Theme Name: Bill Evaul Theme
Template: wonderwork
Version: 1.6.4
Author: Mat Coes
Description: Child theme of Wonderwork for the Bill Evaul website (named "Theme" to tell it apart from the site and client).
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Text Domain: bill-evaul-theme
*/

/*
 * Site Logo recoloring.
 *
 * The Site Logo block renders a plain <img src="signature.svg">, and an <img>'s
 * own pixel content can't be recolored with currentColor or CSS filters that
 * survive JPEG/SVG rendering reliably — it's an opaque bitmap as far as CSS is
 * concerned. Instead: hide the real image visually (kept in the DOM for alt
 * text/schema), and paint a colored, mask-shaped ::after in its place. The mask
 * shape comes from --site-logo-mask, which functions.php keeps in sync with
 * whatever image is actually set as the Site Logo — so this survives Mat
 * swapping the logo file later via the block UI, not just this one upload.
 *
 * Color lives in one variable, --site-logo-color, defaulting to the Primary
 * palette token. Change that one line (or override --site-logo-color via
 * Global Styles Additional CSS) to recolor everywhere the Site Logo block
 * appears, without touching the mask rule itself.
 */
:root {
	--site-logo-color: var(--wp--preset--color--primary);

	/* Justified-gallery row gutter (assets/js/justified-gallery.js reads this
	   at runtime). The Gallery block's own Spacing/blockGap control does NOT
	   drive this — confirmed it only ever emits --wp--style--block-gap at the
	   theme's global default (2rem) regardless of what's picked per-block, and
	   even that only ever touched this block's margin-top, never a real gap.
	   This token is the actual, single place to change the gutter; don't also
	   add a number in the JS file. Tight by design — mimics the thin reveal
	   between color fields in a white-line woodcut. */
	--gallery-gutter: 4px;
}

/* Footer instance: white, not Primary. True white — the palette's own
   "base" token is cream (#E3DED2), not pure white — swap this to
   var(--wp--preset--color--base) if cream was actually meant. */
.site-footer .wp-block-site-logo {
	--site-logo-color: #ffffff;
}

.wp-block-site-logo .custom-logo {
	opacity: 0;
}

.wp-block-site-logo .custom-logo-link {
	position: relative;
	display: inline-block;
}

.wp-block-site-logo .custom-logo-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--site-logo-color);
	/* Fallback here isn't decorative — it's load-bearing. Before functions.php's
	   inline script sets --site-logo-mask, the property is unset, so without a
	   real fallback this renders "mask-image: none" for a beat and the ::after
	   paints as a solid, unmasked rectangle (a flash of plain --site-logo-color).
	   The fallback is today's uploaded logo file, so first paint is already
	   correctly masked; the JS still takes over immediately after. If the logo
	   image is ever swapped via the block UI, update this URL to match — the JS
	   sync covers the live page regardless, but this fallback will quietly go
	   stale (back to the same flash, just for whatever the old file's shape was)
	   until it's updated here too. */
	-webkit-mask-image: var(--site-logo-mask, url("/wp/wp-content/uploads/2026/09/signature.svg"));
	mask-image: var(--site-logo-mask, url("/wp/wp-content/uploads/2026/09/signature.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Text-link-with-arrow. Not a Button block — stays plain text, no underline,
 * no background/border. The arrow is its own inline-block span so hover can
 * nudge just the arrow (translateX) without the text shifting too.
 * Color is intentionally NOT set here — it inherits whatever color it's
 * placed in, which also sidesteps the usual "link defaults to theme link
 * color and vanishes against a colored background" problem.
 *
 * Markup: <a href="..." class="link-arrow">Label<span class="link-arrow__icon">&rarr;</span></a>
 */
.link-arrow {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.link-arrow:hover,
.link-arrow:focus {
	color: inherit;
	text-decoration: none;
}

.link-arrow .link-arrow__icon {
	display: inline-block;
	transition: transform 0.2s ease;
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
	transform: translateX(0.25em);
}