/*
 * "Zoe" digital assistant button in the header top bar.
 * Background per the client's "Button 01" sample: a vertical gradient
 * (#cb82b7 → #8d3997) that stays the same on hover — only the labels swap.
 */

.iolife-zoe-btn {
	display: inline-flex;
	align-items: center;
	height: 44px;
	overflow: hidden;
	border-radius: 999px;
	background-color: #ac54a9; /* fallback when gradients are unavailable */
	background-image: linear-gradient(180deg, #cb82b7 0%, #8d3997 100%);
	line-height: 1.25;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.iolife-zoe-btn:hover,
.iolife-zoe-btn:focus,
.iolife-zoe-btn:active {
	text-decoration: none;
	outline-offset: 2px;
}

/* Zoe's cut-out photo stands on the pill itself, bottom-left, clipped by the
   pill's rounded corner — per the client samples, no circle around it. */
.iolife-zoe-btn-avatar {
	flex: 0 0 auto;
	align-self: flex-end;
	display: block;
	height: 100%;
	margin-left: 2px;
}

.iolife-zoe-btn-avatar img {
	display: block;
	width: auto;
	height: 100%;
}

.iolife-zoe-btn-labels {
	display: grid;
	margin: 0 18px 0 10px;
}

/* Both states share the same grid cell so the pill keeps one width and the
   labels cross-fade on hover. */
.iolife-zoe-btn-intro,
.iolife-zoe-btn-cta {
	grid-area: 1 / 1;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.iolife-zoe-btn-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.iolife-zoe-btn-intro strong {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.iolife-zoe-btn-intro span {
	color: #fff;
	font-size: 11px;
}

.iolife-zoe-btn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
}

.iolife-zoe-btn-cta img {
	width: 18px;
	height: auto;
	margin-left: 8px;
}

.iolife-zoe-btn:hover .iolife-zoe-btn-intro,
.iolife-zoe-btn:focus .iolife-zoe-btn-intro {
	opacity: 0;
}

.iolife-zoe-btn:hover .iolife-zoe-btn-cta,
.iolife-zoe-btn:focus .iolife-zoe-btn-cta {
	opacity: 1;
}

/* Desktop: the top bar is a flex row (socials / top menu). Sit on the left
   above where the main menu starts (zoe-button.js aligns the exact offset to
   the first menu item; the 32px margin is the no-JS fallback) and keep the
   phone + language menu right-aligned with only the width it needs. */
@media (min-width: 991px) {
	.top-bar.top-bar-flex .iolife-zoe-btn {
		order: 2;
		margin: 4px auto 4px 32px;
		align-self: center;
	}

	.top-bar.top-bar-flex .top-menu.top-menu {
		order: 3;
		flex-grow: 0;
	}
}

/* Mobile and tablet: the social icons' slot at the left of the top bar is the
   button's place (the icons themselves are hidden up to 600px by style.css).
   The bar must stay a nowrap flex row (tabdrop fix in style.css), and next to
   the phone number there is no room for the wide hover label, so the button
   is taken out of the flow: absolutely positioned on the left, compact at
   rest, and expanding over the free middle space while hovered/pressed —
   the same crossfade to the CTA text as on desktop, with smaller fonts. */
@media (max-width: 990px) {
	.top-bar.top-bar-flex {
		position: relative;
	}

	.iolife-zoe-btn {
		position: absolute;
		top: 6px;
		left: 15px;
		z-index: 10;
		height: 38px;
	}

	.iolife-zoe-btn-labels {
		position: relative;
		min-width: 0;
		margin: 0 12px 0 8px;
		transition: min-width 0.25s ease;
	}

	.iolife-zoe-btn-intro strong {
		font-size: 12.5px;
	}

	.iolife-zoe-btn-intro span {
		font-size: 10px;
	}

	/* The CTA layer no longer reserves width; it overlays the label box. */
	.iolife-zoe-btn-cta {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 11px;
	}

	.iolife-zoe-btn-cta img {
		width: 14px;
	}

	.iolife-zoe-btn:hover .iolife-zoe-btn-labels,
	.iolife-zoe-btn:focus .iolife-zoe-btn-labels,
	.iolife-zoe-btn:active .iolife-zoe-btn-labels {
		min-width: 150px;
	}
}

/* Small tablets: the social icons are visible again, so start after them. */
@media (min-width: 601px) and (max-width: 990px) {
	.iolife-zoe-btn {
		left: 125px;
	}
}

/* Portrait phones: not enough room beside the phone number for the tagline. */
@media (max-width: 430px) {
	.iolife-zoe-btn-intro span {
		display: none;
	}
}