/*!
 * Blue365 Aesthetic — footer signature badge
 * Themeable via CSS custom properties: .b365--dark / .b365--light / .b365--auto
 */

/* ------------------------------------------------------------------
   1. Tokens — dark is the base, so .b365--dark needs no rules of its own
   ------------------------------------------------------------------ */
.b365 {
	--b365-lead:         rgb(255 255 255 / 50%);
	--b365-lead-hover:   rgb(255 255 255 / 85%);
	--b365-border:       rgba(255, 255, 255, .06);
	--b365-border-hover: rgba(255, 255, 255, .16);
	--b365-bg:           transparent;
	--b365-bg-hover:     rgba(255, 255, 255, .04);
	--b365-dot:          #0098D4;
	--b365-glow:         0 0 6px rgba(0, 152, 212, .9);
	--b365-glow-hover:   0 0 10px rgba(0, 152, 212, 1);
	--b365-gradient:     linear-gradient(92deg, #6FD0F5 0%, #0098D4 55%, #E58D35 130%);
	--b365-name-hover:   brightness(1.18) saturate(1.05);

	display: block;
	text-align: center;
}

/* Light footer — hover deepens the ink instead of brightening it,
   and the gradient is darkened so it survives a white background. */
.b365--light {
	--b365-lead:         rgb(15 23 42 / 62%);
	--b365-lead-hover:   rgb(15 23 42 / 92%);
	--b365-border:       rgba(15, 23, 42, .10);
	--b365-border-hover: rgba(15, 23, 42, .22);
	--b365-bg:           transparent;
	--b365-bg-hover:     rgba(15, 23, 42, .035);
	--b365-dot:          #0086BE;
	--b365-glow:         0 0 6px rgba(0, 134, 190, .45);
	--b365-glow-hover:   0 0 9px rgba(0, 134, 190, .75);
	--b365-gradient:     linear-gradient(92deg, #2FA6DC 0%, #0079AC 55%, #C4711F 130%);
	--b365-name-hover:   brightness(.92) saturate(1.14);
}

/* Auto — inherits the dark tokens, flips to light when the visitor
   (or the theme) is in a light colour scheme. */
@media (prefers-color-scheme: light) {
	.b365--auto {
		--b365-lead:         rgb(15 23 42 / 62%);
		--b365-lead-hover:   rgb(15 23 42 / 92%);
		--b365-border:       rgba(15, 23, 42, .10);
		--b365-border-hover: rgba(15, 23, 42, .22);
		--b365-bg-hover:     rgba(15, 23, 42, .035);
		--b365-dot:          #0086BE;
		--b365-glow:         0 0 6px rgba(0, 134, 190, .45);
		--b365-glow-hover:   0 0 9px rgba(0, 134, 190, .75);
		--b365-gradient:     linear-gradient(92deg, #2FA6DC 0%, #0079AC 55%, #C4711F 130%);
		--b365-name-hover:   brightness(.92) saturate(1.14);
	}
}

/* ------------------------------------------------------------------
   2. Layout
   ------------------------------------------------------------------ */
.b365--align-left   { text-align: left; }
.b365--align-center { text-align: center; }
.b365--align-right  { text-align: right; }

/* Only the auto-injected instance gets breathing room; the shortcode
   inherits whatever spacing its container already has. */
.b365--standalone {
	padding: 18px 16px;
	box-sizing: border-box;
	width: 100%;
	/* When it gets moved inside a footer that is a flex or grid container, take
	   a full row instead of squeezing in beside the existing columns. Both are
	   inert in a normal block container. */
	flex: 0 0 100%;
	grid-column: 1 / -1;
}

/* Set once the badge has been relocated into the theme's footer, where the
   footer's own padding already supplies most of the space it needs. */
.b365--infooter {
	padding-bottom: 6px;
	background: none;
}

.b365__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 4px;
	gap: 7px;
	max-width: 100%;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--b365-border);
	background: var(--b365-bg);
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(9px, 2.6vw, 10.5px);
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: border-color .4s ease, background .4s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Wrapping is allowed between the parts, never inside them. */
.b365__lead,
.b365__name { white-space: nowrap; }

/* ------------------------------------------------------------------
   3. Parts
   ------------------------------------------------------------------ */
.b365__lead {
	color: var(--b365-lead);
	font-weight: 400;
	transition: color .4s ease;
}

.b365__mark {
	position: relative;
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 50%;
	background: var(--b365-dot);
	box-shadow: var(--b365-glow);
	transition: box-shadow .4s ease, transform .4s ease;
}

.b365__name {
	font-weight: 700;
	letter-spacing: .12em;
	background: var(--b365-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	transition: filter .4s ease;
}

/* ------------------------------------------------------------------
   4. Hover / focus — the brighter state
   ------------------------------------------------------------------ */
.b365__link:hover,
.b365__link:focus-visible {
	border-color: var(--b365-border-hover);
	background: var(--b365-bg-hover);
}

.b365__link:hover .b365__lead,
.b365__link:focus-visible .b365__lead { color: var(--b365-lead-hover); }

.b365__link:hover .b365__mark,
.b365__link:focus-visible .b365__mark {
	box-shadow: var(--b365-glow-hover);
	transform: scale(1.15);
}

.b365__link:hover .b365__name,
.b365__link:focus-visible .b365__name { filter: var(--b365-name-hover); }

.b365__link:focus-visible {
	outline: 2px solid var(--b365-dot);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   5. Responsive + preferences
   ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.b365--standalone { padding: 16px 14px; }
	.b365__link { gap: 6px; padding: 7px 12px; }
}

@media (max-width: 480px) {
	.b365--standalone { padding: 14px 12px; }
	.b365__link {
		gap: 5px;
		padding: 6px 11px;
		letter-spacing: .08em;
	}
	.b365__name { letter-spacing: .1em; }
	/* Centre the badge on phones regardless of the desktop alignment. */
	.b365 { text-align: center; }
}

/* Touch devices never resolve :hover cleanly — pin the brighter state
   on press instead so the tap still reads as a response. */
@media (hover: none) {
	.b365__link:active {
		border-color: var(--b365-border-hover);
		background: var(--b365-bg-hover);
	}
	.b365__link:active .b365__lead { color: var(--b365-lead-hover); }
	.b365__link:active .b365__name { filter: var(--b365-name-hover); }
	.b365__link:active .b365__mark { box-shadow: var(--b365-glow-hover); }
}

@media (prefers-reduced-motion: reduce) {
	.b365__link,
	.b365__lead,
	.b365__name,
	.b365__mark { transition: none; }
	.b365__link:hover .b365__mark { transform: none; }
}