/*
 * Share card under every blog post (partials/blog/share.php), between the article and "Latest from the Visit
 * Burbank blog". Posts end differently (left-aligned text, a button, a photo), so this is a card with its own
 * edges rather than a line of icons: it centres as an object and doesn't have to line up with what's above it.
 * It's the site's card, as on the holiday landing page's "At a glance": a box with a lilac offset. The round ink
 * icons match the footer; red on hover as on the homepage. Printed outside the templates' .container.
 */
.vb-share {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px 24px;
	width: min(860px, 100% - 40px);
	margin: clamp(48px, 6vw, 72px) auto 0;
	padding: 24px 32px;
	background: var(--vb-color-cream, #F4F2EB);
	box-shadow: 10px 10px 0 var(--vb-color-lilac, #E8D1E3);
	font-family: "Lexend", sans-serif;
	color: var(--vb-color-primary, #231F20);
}
.vb-share + .vb-latest { margin-top: clamp(48px, 6vw, 72px); }
.vb-share .vb-share__label { margin: 0; font-family: "Instrument Serif", serif; font-size: 30px; line-height: 1.1; }
.vb-share__actions { position: relative; flex: none; margin-left: auto; }
.vb-share .vb-share__list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vb-share .vb-share__list li { margin: 0; padding: 0; }
.vb-share .vb-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vb-color-primary, #231F20);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}
.vb-share .vb-share__btn[hidden] { display: none; }
.vb-share .vb-share__btn:hover { background: var(--vb-color-accent, #EF4343); }
.vb-share .vb-share__btn:focus-visible { outline: 2px solid var(--vb-color-primary, #231F20); outline-offset: 3px; }
.vb-share .vb-share__btn svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.vb-share .vb-share__btn .vb-share__line { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vb-share .vb-share__btn .vb-share__check { display: none; stroke-width: 2.25; }
.vb-share .vb-share__actions.is-copied [data-share-copy] .vb-share__line { display: none; }
.vb-share .vb-share__actions.is-copied [data-share-copy] .vb-share__check { display: block; }

/* After "Copy link": the other icons drop away one at a time, starting next to the copy button, and the message
   takes their place. --d is each icon's turn. On the way back the message clears first, then they rise in the
   same order. visibility keeps hidden icons out of the tab order. */
.vb-share__list li:nth-child(4) { --d: 0ms; }
.vb-share__list li:nth-child(3) { --d: 60ms; }
.vb-share__list li:nth-child(2) { --d: 120ms; }
.vb-share__list li:nth-child(1) { --d: 180ms; }
.vb-share .vb-share__list li {
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), opacity .26s ease-out, visibility 0s;
	transition-delay: calc(var(--d, 0ms) + 120ms);
}
.vb-share .vb-share__actions.is-message .vb-share__list li:not(:last-child) {
	transform: translateY(16px);
	opacity: 0;
	visibility: hidden;
	transition: transform .22s ease-in, opacity .22s ease-in, visibility 0s linear;
	transition-delay: var(--d, 0ms), var(--d, 0ms), calc(var(--d, 0ms) + .22s);
}
/* Over the space the four icons leave, right up against the copy button. */
.vb-share .vb-share__status {
	position: absolute;
	inset: 0 60px 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease-out;
}
.vb-share .vb-share__actions.is-message .vb-share__status { opacity: 1; transition: opacity .2s ease-out .3s; }

@media (max-width: 599px) {
	.vb-share { flex-direction: column; padding: 22px 16px 24px; text-align: center; }
	.vb-share__actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vb-share .vb-share__btn,
	.vb-share .vb-share__status,
	.vb-share .vb-share__actions.is-message .vb-share__status,
	.vb-share .vb-share__list li,
	.vb-share .vb-share__actions.is-message .vb-share__list li:not(:last-child) { transition: none; }
	.vb-share .vb-share__actions.is-message .vb-share__list li:not(:last-child) { transform: none; }
}