/* ==========================================================================
   Dev Signature

   Deliberately quiet: at rest it is a hairline pill in the surrounding text
   colour, so it reads as a footnote rather than an advertisement. Everything
   is derived from `currentColor`, which means it lands correctly on a light
   or a dark footer without configuration. Set `--devsig-accent` (in the
   settings, on the shortcode, or in your theme's CSS) to tint the hover state.
   ========================================================================== */

.devsig {
	/* No `--devsig-accent` default here on purpose: declaring it on `.devsig`
	   would override the same property set on an ancestor (a theme footer, say),
	   because the element's own declaration beats an inherited one. The default
	   lives in each var() fallback instead. */
	--devsig-radius: 999px;
	--devsig-speed: .22s;

	display: flex;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.3;
}

.devsig--left    { justify-content: flex-start; }
.devsig--center  { justify-content: center; }
.devsig--right   { justify-content: flex-end; }
.devsig--inline  { display: inline-flex; vertical-align: middle; }

.devsig--sm { font-size: 12px; }

.devsig__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	max-width: 100%;
	padding: .45em .85em .45em .5em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: var(--devsig-radius);
	color: inherit;
	text-decoration: none;
	opacity: .72;
	overflow: hidden;
	transition:
		opacity var(--devsig-speed) ease,
		border-color var(--devsig-speed) ease,
		transform var(--devsig-speed) ease;
}

/* Browsers without color-mix still get a usable hairline. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.devsig__link { border-color: rgba(128, 128, 128, .35); }
}

.devsig__link:hover,
.devsig__link:focus-visible {
	opacity: 1;
	border-color: color-mix(in srgb, var(--devsig-accent, currentColor) 55%, transparent);
	transform: translateY(-1px);
}

.devsig__link:focus-visible {
	outline: 2px solid var(--devsig-accent, currentColor);
	outline-offset: 2px;
}

/* A single slow sheen, on hover only — never a permanently animating footer. */
.devsig__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 35%,
		color-mix(in srgb, var(--devsig-accent, currentColor) 22%, transparent) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

.devsig__link:hover::after,
.devsig__link:focus-visible::after {
	opacity: 1;
	animation: devsig-sheen .9s ease-out;
}

@keyframes devsig-sheen {
	from { transform: translateX(-120%); }
	to   { transform: translateX(120%); }
}

/* The monogram chip. */
.devsig__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.85em;
	height: 1.85em;
	border-radius: calc(var(--devsig-radius) - .2em);
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	font-weight: 700;
	font-size: .92em;
	letter-spacing: 0;
	transition: background-color var(--devsig-speed) ease, color var(--devsig-speed) ease;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.devsig__mark { background: rgba(128, 128, 128, .2); }
}

/* The logo variant of the mark. It is a ring, so it can sit closer to the edge
   of the chip than a letter without looking cramped. */
.devsig__logo {
	display: block;
	width: 72%;
	height: auto;
}

/* Filling the chip with the accent and writing white on top only works when
   the accent is dark. It usually is not — the default here is a warm orange,
   where white letters wash out. Tint the chip instead and let the monogram take
   the accent colour, which stays legible whatever the accent is. Set
   `--devsig-mark-fill` / `--devsig-on-accent` if you do want the solid chip. */
.devsig__link:hover .devsig__mark,
.devsig__link:focus-visible .devsig__mark {
	background: var(--devsig-mark-fill, color-mix(in srgb, var(--devsig-accent, currentColor) 26%, transparent));
	color: var(--devsig-on-accent, var(--devsig-accent, currentColor));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.devsig__link:hover .devsig__mark,
	.devsig__link:focus-visible .devsig__mark { background: rgba(128, 128, 128, .28); }
}

.devsig__text {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	min-width: 0;
}

.devsig__lead {
	white-space: nowrap;
	opacity: .8;
}

.devsig__name {
	font-weight: 700;
	white-space: nowrap;
}

.devsig__link:hover .devsig__name,
.devsig__link:focus-visible .devsig__name { color: var(--devsig-accent, currentColor); }

.devsig__arrow {
	flex: none;
	opacity: 0;
	transform: translate(-3px, 2px);
	transition: opacity var(--devsig-speed) ease, transform var(--devsig-speed) ease;
}

.devsig__link:hover .devsig__arrow,
.devsig__link:focus-visible .devsig__arrow {
	opacity: .9;
	transform: translate(0, 0);
}

/* The strip used by the automatic footer placement. */
.devsig-strip {
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	text-align: center;
}

/* Below ~360px the lead line costs more than it gives. */
@media (max-width: 380px) {
	.devsig__lead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.devsig__link,
	.devsig__mark,
	.devsig__arrow { transition: none; }

	.devsig__link:hover { transform: none; }

	.devsig__link:hover::after,
	.devsig__link:focus-visible::after { animation: none; opacity: 0; }
}

@media print {
	.devsig__link { border: 0; opacity: 1; }
	.devsig__link::after,
	.devsig__arrow { display: none; }
}