/*!
 * Becker Robotic — Contact / RFQ page styles (page-contact.php)
 * Source: design-reference/Contact.dc.html
 */

.contact {
	background: var(--becker-bg-light);
}

.contact__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(32px, 6vw, 48px) var(--becker-pad-x) 96px;
}

.contact__header {
	max-width: 760px;
	margin-bottom: 48px;
}

.contact__eyebrow {
	margin: 0 0 12px;
	font-size: var(--becker-fs-caption);
	font-weight: 700;
	letter-spacing: var(--becker-ls-eyebrow);
	color: var(--becker-teal);
	text-transform: uppercase;
}

.contact__title {
	margin: 0 0 16px;
	font-size: clamp(26px, 5vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: pretty;
}

.contact__lead {
	margin: 0;
	font-size: var(--becker-fs-body);
	line-height: 1.6;
	color: var(--becker-text-muted);
	text-wrap: pretty;
}

.contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 32px;
	align-items: start;
}

/* Quote form card — wraps the JetFormBuilder form (or the static fallback) */
.quote-form {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: clamp(24px, 5vw, 40px);
}

.quote-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

/* Contact labels are sentence-case per the design (overrides .becker-form) */
.quote-form label,
.becker-form .quote-form label {
	display: block;
	font-size: var(--becker-fs-legal);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--becker-text);
	margin-bottom: 7px;
}

.quote-form__label-hint {
	font-weight: 400;
	color: var(--becker-text-muted);
}

.quote-form__full {
	grid-column: 1 / -1;
}

.quote-form__footer {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.quote-form__privacy {
	font-size: var(--becker-fs-caption);
	color: var(--becker-text-muted);
	max-width: 40ch;
}

/* Right column */
.contact__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.next-card {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: 32px;
}

.next-card__title {
	margin: 0 0 20px;
	font-size: var(--becker-fs-h3);
	font-weight: 700;
}

.next-card__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: var(--becker-fs-body-sm);
}

.next-card__step {
	display: flex;
	gap: 14px;
}

.next-card__num {
	width: 28px;
	height: 28px;
	border-radius: var(--becker-radius-pill);
	background: var(--becker-charcoal);
	color: var(--becker-white);
	font-size: var(--becker-fs-caption);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.next-card__text {
	line-height: 1.55;
}

.next-card__text strong {
	font-weight: 600;
}

/* Offices card — charcoal, full addresses grouped by region */
.offices-card {
	background: var(--becker-charcoal);
	border-radius: var(--becker-radius-card);
	padding: 32px;
	color: var(--becker-dark-text);
}

.offices-card__title {
	margin: 0 0 24px;
	font-size: var(--becker-fs-h3);
	font-weight: 700;
	color: var(--becker-white);
}

.offices-card__regions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: var(--becker-fs-secondary);
	line-height: 1.6;
}

.offices-card__region + .offices-card__region {
	border-top: 1px solid var(--becker-dark-border);
	padding-top: 20px;
}

.offices-card__region-title {
	margin: 0 0 12px;
	font-size: var(--becker-fs-legal);
	font-weight: 700;
	letter-spacing: var(--becker-ls-label);
	color: var(--becker-teal-light);
	text-transform: uppercase;
}

.offices-card__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.offices-card__name {
	display: block;
	color: var(--becker-white);
	font-weight: 600;
}

/* Locations page — three region cards in a grid */
.locations-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 28px;
	align-items: start;
}

.locations-cards .offices-card {
	padding: 36px 32px;
}

/* Each location gets its own boxed card inside the continent group */
.locations-cards .offices-card__list {
	gap: 16px;
}

.locations-cards .offices-card__list > div {
	background: var(--becker-charcoal-hover);
	border: 1px solid var(--becker-dark-border);
	border-radius: var(--becker-radius-btn);
	padding: 18px 20px;
}

.locations-cards .offices-card__name {
	margin: 0 0 8px;
	font-size: var(--becker-fs-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--becker-teal-light);
}

/* Office names that link to a location detail page. The global red link
 * colour is ~2.9:1 on charcoal, so the link keeps the name colour and is
 * marked by an underline instead — unlinked names stay plain. White focus
 * ring for the same reason (the global red ring is low-contrast here). */
.offices-card__name a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.offices-card__name a:hover {
	color: var(--becker-white);
}

.offices-card__name a:focus-visible {
	outline: 2px solid var(--becker-white);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Locations page — interactive world map (offices + distribution partners).
 * Dot positions live in page-locations.php, tuned to world-map-offices.jpg. */
.locations-map {
	margin: 0 0 clamp(40px, 6vw, 64px);
}

.locations-map__canvas {
	position: relative;
}

.locations-map__canvas img {
	display: block;
	width: 100%;
	height: auto;
}

.locations-map__dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	padding: 0;
	border: 2px solid var(--becker-white);
	border-radius: var(--becker-radius-pill);
	background: var(--becker-red);
	box-shadow: var(--becker-shadow-card);
	cursor: pointer;
}

.locations-map__dot:hover,
.locations-map__dot:focus {
	transform: translate(-50%, -50%) scale(1.35);
	z-index: 6;
}

.locations-map__dot:focus-visible {
	outline: var(--becker-focus-ring);
	outline-offset: 2px;
}

.locations-map__dot--partner {
	background: var(--becker-teal);
}

/* HQ marker — larger, carries a star so the head office reads at a glance */
.locations-map__dot--hq {
	width: 22px;
	height: 22px;
}

.locations-map__dot--hq::after {
	content: "★";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 11px;
	line-height: 1;
	color: var(--becker-white);
}

/* HQ dot gets a radar ping (motion-safe only) */
.locations-map__dot--hq::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--becker-red);
	border-radius: var(--becker-radius-pill);
}

@media (prefers-reduced-motion: no-preference) {
	.locations-map__dot--hq::before {
		animation: becker-map-ping 2.2s ease-out infinite;
	}

	@keyframes becker-map-ping {
		0% { transform: scale(0.5); opacity: 0.9; }
		70% { transform: scale(1.3); opacity: 0; }
		100% { opacity: 0; }
	}
}

/* Floating detail card above each dot */
.locations-map__tip {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, 6px);
	width: max-content;
	max-width: 250px;
	padding: 14px 16px;
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-btn);
	box-shadow: var(--becker-shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	pointer-events: none;
	text-align: left;
	line-height: 1.4;
	z-index: 7;
}

.locations-map__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--becker-white);
}

.locations-map__dot:hover .locations-map__tip,
.locations-map__dot:focus .locations-map__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.locations-map__tip-name {
	display: block;
	font-size: var(--becker-fs-body-sm);
	font-weight: 600;
	color: var(--becker-text);
}

.locations-map__tip-role {
	display: block;
	margin: 3px 0 7px;
	font-size: var(--becker-fs-micro);
	font-weight: 700;
	letter-spacing: var(--becker-ls-label);
	text-transform: uppercase;
	color: var(--becker-red);
}

.locations-map__dot--partner .locations-map__tip-role {
	color: var(--becker-teal);
}

.locations-map__tip-addr {
	display: block;
	font-size: var(--becker-fs-caption);
	color: var(--becker-text-muted);
	line-height: 1.55;
}

/* Legend under the map */
.locations-map__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin-top: 12px;
}

.locations-map__key {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--becker-fs-caption);
	color: var(--becker-text-muted);
}

.locations-map__key--hint {
	font-style: italic;
}

.locations-map__swatch {
	width: 10px;
	height: 10px;
	border-radius: var(--becker-radius-pill);
	background: var(--becker-red);
	flex: none;
}

.locations-map__swatch--partner {
	background: var(--becker-teal);
}

.locations-map__swatch--hq {
	position: relative;
	width: 14px;
	height: 14px;
}

.locations-map__swatch--hq::after {
	content: "★";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 7px;
	line-height: 1;
	color: var(--becker-white);
}