/* ==========================================================================
   Work With Us (10 Reasons) — page extras
   Shared pieces (Google Sans classes, hero overlay, footer contour lines)
   come from hello-candidate.css; this file holds only what is unique here.
   ========================================================================== */

/* Outlined reason numbers ("01" … "10") — hollow purple, as in Figma. */
.ww-number {
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(104, 54, 135, 0.55);
	letter-spacing: 0.02em;
	font-weight: 500;
}

@supports not (-webkit-text-stroke: 1px black) {
	.ww-number {
		color: rgba(104, 54, 135, 0.18);
	}
}

/* Full-width brand bands (drink & game, cafe): pink -> purple. */
.ww-band {
	background: linear-gradient(180deg, #C92C7E 0%, #A33A8C 45%, #683687 100%);
}

.ww-tab:focus-visible,
.ww-video:focus-visible {
	outline: 3px solid #683687;
	outline-offset: 3px;
}

/* Closing quote mark is the opening one turned around. */
.ww-quote--close {
	transform: rotate(180deg);
}

/* Video dialog */
.ww-dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

/* ---- Reason 08: cost-of-living map ------------------------------------ */
.ww-city {
	width: 7.6%;
	transform: translate(-50%, -50%);
}

.ww-city__icon {
	display: block;
	width: 100%;
	height: auto;
}

/* Dark price tag with a pointer, anchored to the top corner of its landmark. */
.ww-tag {
	position: absolute;
	bottom: 88%;
	display: block;
	padding: 0.3em 0.6em 0.34em;
	border-radius: 7px;
	background: #111;
	color: #fff;
	white-space: nowrap;
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(9px, 1.9vw, 14px);
	line-height: 1.15;
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
	transform-origin: bottom left;
	will-change: transform;
}

.ww-tag--right {
	left: 62%;
}

.ww-tag--left {
	right: 62%;
	transform-origin: bottom right;
}

/* Pointer: a small rotated square in the tag's own colour, tucked just
   inside the rounded corner so it reads as one shape with the tag. */
.ww-tag::after {
	content: "";
	position: absolute;
	bottom: -0.3em;
	left: 0.75em;
	width: 0.7em;
	height: 0.7em;
	background: inherit;
	border-radius: 0 0 0.15em 0;
	transform: rotate(45deg);
	z-index: -1;
}

.ww-tag--left::after {
	left: auto;
	right: 0.75em;
}

.ww-tag__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ww-tag__price b {
	font-weight: 700;
}

/* Jaipur (our city) gets the brand highlight. */
.ww-tag--hi {
	background: #fff;
	color: #3D006A;
}

/* Pop: shrink away, then spring back with the new number. */
.ww-tag.is-pop {
	animation: ww-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: var(--d, 0ms);
}

@keyframes ww-pop {
	0%   { transform: scale(1) translateY(0); opacity: 1; }
	28%  { transform: scale(0.55) translateY(6px); opacity: 0; }
	55%  { transform: scale(1.08) translateY(-3px); opacity: 1; }
	100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Category buttons */
.ww-tab {
	cursor: pointer;
}

.ww-tab[aria-selected="true"] .ww-tab__ring {
	background-color: #683687;
	box-shadow: 0 10px 22px -10px rgba(104, 54, 135, 0.8);
	transform: translateY(-2px);
}

.ww-tab[aria-selected="true"] .ww-tab__ring img {
	filter: brightness(0) invert(1);
}

.ww-tab[aria-selected="true"] > span:last-child {
	color: #683687;
}

.ww-tab:hover .ww-tab__ring {
	box-shadow: 0 8px 18px -10px rgba(104, 54, 135, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.ww-tag.is-pop {
		animation: none;
	}
}