/**
 * ATEQ Worldwide — Figma 12-534 (desktop) / 13-139 (mobile).
 * Mobile: no map, tabs scroll horizontally, regions as an accordion.
 */

.worldwide {
	padding: 0;
}

/* ---------- Hero ---------- */

.ww-hero {
	background: var(--bg-inverse);
	color: var(--text-inverse);
}

.ww-hero__inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding: calc(var(--header-height) + 40px) var(--gutter) var(--space-32);
}

.ww-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	align-items: flex-start;
}

.ww-hero__eyebrow,
.ww-hero__intro {
	display: none;
}

.ww-hero__eyebrow {
	gap: var(--space-16);
	align-items: center;
	color: var(--text-inverse);
}

.ww-hero__eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--bg-accent);
}

.ww-hero__title {
	font-size: var(--h2-size);
	line-height: 1;
}

.ww-hero__intro {
	margin: 0;
	font-size: var(--body-l-size);
	line-height: var(--body-l-line);
}

/* Search — Figma "Input / Search" (Focus) */
.ww-search {
	display: flex;
	gap: var(--space-12);
	align-items: center;
	width: 100%;
	height: 56px;
	padding-inline: 20px;
	border: 1.5px solid var(--border-strong);
	background: var(--bg-page);
	color: var(--text-primary);
}

.ww-search:focus-within {
	outline: 2px solid var(--red-500);
	outline-offset: 2px;
}

.ww-search .icon {
	flex-shrink: 0;
}

.ww-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--body-m-size);
	line-height: var(--body-m-line);
}

.ww-search__input::placeholder {
	color: var(--text-primary);
	opacity: 1;
}

.ww-search__input:focus {
	outline: none;
}

/* Map — hidden on mobile (not in Figma 13-139) */
.ww-map {
	position: relative;
	display: none;
}

.ww-pin {
	cursor: default;
	outline: none;
}

a.ww-pin {
	cursor: pointer;
}

.ww-pin .world-map__halo {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.ww-pin:hover .world-map__halo,
.ww-pin.is-active .world-map__halo {
	opacity: 0.5;
	transform: scale(1.27);
}

.ww-pin:focus-visible .world-map__halo {
	opacity: 0.6;
	stroke: var(--icon-inverse);
	stroke-width: 2;
}

.ww-pin.is-filtered {
	opacity: 0.15;
	pointer-events: none;
}

/* Tooltip — Figma "Tooltip hover pin" (12-1164) */
.ww-tooltip[hidden] {
	display: none !important;
}

.ww-tooltip {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-12) var(--space-16);
	background: var(--bg-page);
	color: var(--text-primary);
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 18px));
	pointer-events: none;
}

.ww-tooltip__title {
	font-family: var(--font-heading);
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-line);
}

.ww-tooltip__subtitle {
	color: var(--text-secondary);
	font-size: var(--caption-size);
	font-weight: var(--caption-weight);
	line-height: var(--caption-line);
	letter-spacing: var(--caption-tracking);
}

/* ---------- Region tabs (sticky) ---------- */

.ww-tabs {
	position: sticky;
	top: var(--header-height);
	z-index: 50;
	border-bottom: 1px solid var(--border-default);
	background: var(--bg-page);
}

.admin-bar .ww-tabs {
	top: calc(var(--header-height) + 46px);
}

@media (max-width: 600px) {

	.admin-bar .ww-tabs {
		top: var(--header-height);
	}
}

.ww-tabs__list {
	display: flex;
	gap: var(--space-8);
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding: var(--space-16) var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.ww-tabs__list::-webkit-scrollbar {
	display: none;
}

/* Tag — Figma 5-85 */
.ww-tab {
	flex-shrink: 0;
	padding: 7px 14px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	background: var(--bg-page);
	color: var(--text-primary);
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	line-height: var(--eyebrow-line);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.ww-tab:hover {
	border-color: var(--border-strong);
}

.ww-tab[aria-pressed="true"] {
	border-color: var(--bg-inverse);
	background: var(--bg-inverse);
	color: var(--text-inverse);
}

/* ---------- Regions ---------- */

.ww-regions {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding: var(--space-16) var(--gutter) var(--space-48);
}

.ww-region[hidden] {
	display: none;
}

/* Desktop heading (number, name, count) — hidden on mobile */
.ww-region__head {
	display: none;
}

/* Mobile accordion heading */
.ww-region__accordion {
	margin: 0;
	font: inherit;
	text-transform: none;
}

.ww-region__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px 0;
	border: 0;
	border-top: 1px solid var(--border-strong);
	background: none;
	text-align: left;
	cursor: pointer;
}

.ww-region:first-child .ww-region__toggle {
	border-top: 0;
}

.ww-region__toggle-name {
	font-family: var(--font-heading);
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-line);
}

.ww-region__toggle-count {
	display: flex;
	gap: var(--space-8);
	align-items: center;
	color: var(--text-secondary);
	font-size: var(--button-size);
	font-weight: var(--button-weight);
	line-height: var(--button-line);
	letter-spacing: var(--button-tracking);
	text-transform: uppercase;
}

.ww-region__toggle-state,
.ww-region__toggle[aria-expanded="true"] .ww-region__toggle-icon {
	display: none;
}

.ww-region__toggle[aria-expanded="true"] .ww-region__toggle-state {
	display: inline;
}

.ww-region__toggle[aria-expanded="true"] {
	padding: 20px 0 12px;
}

.ww-region__toggle[aria-expanded="true"] .ww-region__toggle-name {
	font-size: var(--h3-size);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.ww-region__toggle[aria-expanded="true"] .ww-region__toggle-count {
	color: var(--text-accent);
	font-size: var(--eyebrow-size);
	line-height: var(--eyebrow-line);
	letter-spacing: var(--eyebrow-tracking);
}

.ww-region.is-collapsed .ww-list,
.ww-region.is-collapsed .ww-more {
	display: none;
}

.ww-region.is-truncated .ww-item:nth-child(n + 7) {
	display: none;
}

.ww-more {
	margin: var(--space-16) 0 var(--space-24);
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-accent);
	font-size: var(--button-size);
	font-weight: var(--button-weight);
	line-height: var(--button-line);
	letter-spacing: var(--button-tracking);
	text-transform: uppercase;
	cursor: pointer;
}

/* Item / Country — Figma 8-47 */
.ww-item[hidden] {
	display: none;
}

.ww-item:focus-visible {
	outline-offset: -2px;
}

.ww-item__link {
	display: flex;
	gap: 14px;
	align-items: center;
	height: 56px;
	padding-inline: var(--space-16);
	border-bottom: 1px solid var(--border-default);
	color: var(--text-primary);
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.ww-item__flag {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 22px;
	overflow: hidden;
	border-radius: var(--radius-xs);
	background: var(--bg-inverse);
	color: var(--text-inverse);
	font-size: var(--caption-size);
	font-weight: var(--caption-weight);
	letter-spacing: var(--caption-tracking);
	box-shadow: inset 0 0 0 1px rgb(12 12 14 / 8%);
}

.ww-item__flag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ww-item__name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.ww-item__link .icon {
	flex-shrink: 0;
	opacity: 0.35;
	transition:
		opacity var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

a.ww-item__link:hover,
a.ww-item__link:focus-visible,
.ww-item.is-highlighted a.ww-item__link {
	border-bottom-color: var(--text-accent);
	background: var(--bg-subtle);
	color: var(--text-accent);
}

a.ww-item__link:hover .icon,
a.ww-item__link:focus-visible .icon {
	opacity: 1;
	transform: translate(2px, -2px);
}

a.ww-item__link:focus-visible {
	outline-offset: -2px;
}

.ww-empty {
	margin: var(--space-32) 0;
	color: var(--text-secondary);
	font-size: var(--body-l-size);
}

/* ---------- Tablet ≥ 768 ---------- */

@media (min-width: 768px) {

	.ww-hero__inner {
		display: grid;
		gap: var(--space-48);
		padding: calc(var(--header-height) + var(--space-64)) var(--gutter) 56px;
	}

	.ww-hero__content {
		gap: 28px;
		max-width: 520px;
	}

	.ww-hero__eyebrow {
		display: flex;
	}

	.ww-hero__count {
		display: none;
	}

	.ww-hero__title {
		font-size: var(--display-l-size);
		line-height: var(--display-l-line);
		letter-spacing: var(--display-l-tracking);
	}

	.ww-hero__intro {
		display: block;
		max-width: 460px;
	}

	.ww-search {
		max-width: 460px;
		height: 60px;
	}

	.ww-map {
		display: block;
	}

	.ww-tabs__list {
		gap: var(--space-12);
		padding-block: var(--space-24);
	}

	.ww-regions {
		padding-top: var(--space-48);
		padding-bottom: 120px;
	}

	.ww-region {
		display: flex;
		flex-direction: column;
		gap: var(--space-32);
		padding-block: 56px;
		border-top: 1px solid var(--border-strong);
	}

	.ww-region__accordion,
	.ww-more {
		display: none;
	}

	.ww-region__head {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);
	}

	.ww-region__num {
		font-family: var(--font-heading);
		font-size: 56px;
		font-weight: 300;
		line-height: 1;
		opacity: 0.15;
	}

	.ww-region__title {
		font-size: var(--h2-size);
		line-height: var(--h2-line);
	}

	.ww-region.is-collapsed .ww-list {
		display: grid;
	}

	.ww-region.is-truncated .ww-item:nth-child(n + 7) {
		display: block;
	}

	.ww-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-24);
		align-content: start;
	}
}

@media (min-width: 783px) {

	.admin-bar .ww-tabs {
		top: calc(var(--header-height) + 32px);
	}
}

/* ---------- Desktop ≥ 1024 ---------- */

@media (min-width: 1024px) {

	.ww-hero__inner {
		grid-template-columns: 520px minmax(0, 1fr);
		gap: 20px;
		align-items: center;
		padding-top: calc(var(--header-height) + 94px); /* Figma: content at y 190 */
	}

	.ww-region {
		flex-direction: row;
		gap: var(--space-48);
	}

	.ww-region__head {
		flex: 0 0 284px;
	}

	.ww-list {
		flex: 1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* "Contact us" replaces the arrow for sites without a local website */
.ww-item__contact {
	flex-shrink: 0;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--button-weight);
	line-height: 1;
	letter-spacing: var(--button-tracking);
	text-transform: uppercase;
	transition: color var(--duration-fast) var(--ease-out);
}

a.ww-item__link:hover .ww-item__contact,
a.ww-item__link:focus-visible .ww-item__contact {
	color: var(--text-accent);
}