/*
 * Redesign — Product Login (tenant region selector).
 *
 * Page-scoped styles loaded only when pages/template-product-login.php
 * is the page template (see inc/scripts.php). Uses the canonical
 * redesign tokens from design-system.css / redesign-theme.css.
 */

/* The product-login page sets `page-options-hide_default_title` so it
 * gets `body.has-hero-block`, which deliberately skips the global
 * `body.has-fixed-navbar:not(.has-hero-block) { padding-top: --cy-header-h }`
 * rule. We don't have a hero block — we have plain section content
 * that DOES need to clear the fixed navbar. Re-add the body padding
 * scoped to this template, with extra breathing room above the hero
 * so the eyebrow pill isn't kissing the navbar's bottom edge.
 * --cy-header-h tracks the live promo height via navigation.js
 * ResizeObserver, so wrapped mobile promos are handled. */
body.page-template-template-product-login,
body.page-template-pagestemplate-product-login-php {
	padding-top: calc(var(--cy-header-h) + 40px);
}

.product-login {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f7f6f2 0%, #ecebe4 100%);
	color: var(--color-navy-950);
}

.product-login__section {
	position: relative;
	padding: 0 clamp(20px, 8px + 2.5vw, 48px) clamp(40px, 2vw + 24px, 80px);
}

.product-login__container {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

/* ─── Header ─────────────────────────────────────────────────────── */

.product-login__header {
	text-align: center;
	margin-bottom: clamp(24px, 16px + 1.5vw, 40px);
}

.product-login__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: var(--radius-full);
	background: rgba(33, 145, 255, 0.08);
	color: var(--color-blue-500);
	font-family: var(--font-body);
	font-size: 11.2px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.product-login__eyebrow-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-blue-400);
	box-shadow: 0 0 0 3px rgba(33, 145, 255, 0.18);
	animation: product-login-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes product-login-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(33, 145, 255, 0.18); }
	50%      { box-shadow: 0 0 0 6px rgba(33, 145, 255, 0.04); }
}

.product-login__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(28px, 20px + 1.8vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-navy-950);
	margin: 0 0 10px;
}

.product-login__lede {
	font-family: var(--font-body);
	font-size: clamp(15.2px, 14.4px + 0.2vw, 16.8px);
	line-height: 1.5;
	color: var(--color-sand-600);
	max-width: 540px;
	margin: 0 auto;
}

/* ─── Grid of region cards ───────────────────────────────────────── */

.product-login__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 720px) {
	.product-login__grid { grid-template-columns: 1fr; }
}

/* ─── Card — single horizontal row ───────────────────────────────── */

.product-login__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	backdrop-filter: blur(12px) saturate(1.1);
	border: 1px solid rgba(20, 47, 82, 0.08);
	box-shadow:
		0 1px 2px rgba(20, 47, 82, 0.03),
		0 12px 28px -16px rgba(20, 47, 82, 0.18);
	text-decoration: none;
	color: inherit;
	transition:
		transform 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color 200ms ease;
}

.product-login__card:hover,
.product-login__card:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(33, 145, 255, 0.32);
	box-shadow:
		0 1px 2px rgba(20, 47, 82, 0.03),
		0 20px 36px -18px rgba(20, 47, 82, 0.26);
	outline: none;
}

.product-login__card:visited,
.product-login__card:visited:hover,
.product-login__card:visited:focus { color: inherit; }

.product-login__card:focus-visible {
	box-shadow:
		0 1px 2px rgba(20, 47, 82, 0.03),
		0 20px 36px -18px rgba(20, 47, 82, 0.26),
		0 0 0 3px rgba(33, 145, 255, 0.32);
}

.product-login__flag {
	font-size: 30px;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.product-login__card-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.product-login__card-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.product-login__card-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-navy-950);
	margin: 0;
}

.product-login__chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	background: rgba(20, 47, 82, 0.06);
	color: var(--color-navy-700);
	font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
	font-size: 10.4px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.product-login__card-subtitle {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-sand-600);
	margin: 0;
	line-height: 1.4;
}

/* CTA — small pill on the right */
.product-login__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	background: var(--color-navy-950);
	color: var(--color-text-on-dark, #fff);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	transition:
		background-color 200ms ease,
		gap 200ms ease,
		padding-right 200ms ease;
}

.product-login__cta-arrow {
	font-size: 16px !important;
	line-height: 1;
	transition: transform 200ms ease;
}

.product-login__card:hover .product-login__cta,
.product-login__card:focus-visible .product-login__cta {
	background: var(--color-blue-400);
	gap: 8px;
	padding-right: 16px;
}

.product-login__card:hover .product-login__cta-arrow,
.product-login__card:focus-visible .product-login__cta-arrow {
	transform: translateX(2px);
}

/* ─── Footer (trust + help) ──────────────────────────────────────── */

.product-login__footer {
	margin-top: clamp(24px, 16px + 1.5vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.product-login__trust {
	list-style: none;
	padding: 8px 20px;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(20, 47, 82, 0.08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.product-login__trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-sand-600);
	letter-spacing: 0.01em;
}

.product-login__trust li .material-symbols-rounded {
	font-size: 14px !important;
	color: var(--color-blue-400);
}

.product-login__help {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-sand-600);
	margin: 0;
}

.product-login__help a {
	color: var(--color-blue-500);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}

.product-login__help a:hover,
.product-login__help a:focus { border-bottom-color: currentColor; }
.product-login__help a:visited { color: var(--color-blue-500); }
.product-login__help a:visited:hover,
.product-login__help a:visited:focus { color: var(--color-blue-500); }

/* ─── Mobile tightening ──────────────────────────────────────────── */

@media (max-width: 560px) {
	.product-login__card {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.product-login__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ─── Respect reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.product-login__eyebrow-dot { animation: none; }
	.product-login__card { transition: none; }
}