/*
 * GoConsent theme - shared components.
 *
 * Classes used on more than one page, or by the header, footer and partials.
 * One-page classes live in pages/<slug>.css. BEM: block__element--modifier,
 * named for what a thing is, never how it looks.
 */

/* --- Page hero (every page) --- */

.page-hero {
	position: relative;
	padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 85% -10%, var(--site-green-alpha-12), transparent 70%),
		radial-gradient(700px 360px at -10% 110%, var(--site-green-alpha-12), transparent 70%),
		var(--site-bg-tinted);
}

.page-hero__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}

.page-hero__content {
	flex: 1 1 460px;
	min-width: 0;
}

.page-hero__content--center {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.page-hero__visual {
	flex: 1 1 420px;
	min-width: 0;
}

.page-hero__title {
	margin-bottom: 18px;
}

.page-hero__title-accent {
	color: var(--site-brand);
}

.page-hero__lead {
	max-width: 620px;
	margin: 0 0 28px;
	color: var(--site-text-muted);
	font-size: var(--site-size-lg);
	line-height: 1.6;
}

.page-hero__content--center .page-hero__lead {
	margin-left: auto;
	margin-right: auto;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.page-hero__content--center .page-hero__actions {
	justify-content: center;
}

.page-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 24px 0 0;
	padding: 0;
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
	list-style: none;
}

.page-hero__content--center .page-hero__proof {
	justify-content: center;
}

.page-hero__proof-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-hero__proof-icon {
	width: 18px;
	height: 18px;
	color: var(--site-brand);
}

.breadcrumbs {
	margin: 0 0 18px;
	padding: 0;
	color: var(--site-text-faint);
	font-size: var(--site-size-xs);
	list-style: none;
}

.breadcrumbs__item {
	display: inline;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "\203A";
	margin: 0 8px;
}

.breadcrumbs a {
	color: var(--site-text-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

/* --- App window mockups --- */

.app-window {
	overflow: hidden;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	background: var(--site-surface);
	box-shadow: var(--site-shadow-lg);
}

.app-window__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--site-border);
	background: var(--site-bg-sunken);
}

.app-dots {
	display: flex;
	gap: 6px;
}

.app-dots__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--site-slate-82);
}

.app-window__address {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	padding: 5px 12px;
	border-radius: var(--site-radius-pill);
	background: var(--site-surface);
	color: var(--site-text-faint);
	font-size: var(--site-size-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.app-window__body {
	position: relative;
}

.app-window__shot {
	display: block;
	width: 100%;
	height: auto;
}

/* Consent banner mockup (drawn, not a picture: crisp at every size) */
.banner-mock {
	padding: 18px;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius);
	background: var(--site-surface);
	box-shadow: var(--site-shadow);
	font-size: var(--site-size-xs);
}

.banner-mock__text {
	margin: 0 0 6px;
	color: var(--site-text);
	font-size: var(--site-size-sm);
	line-height: 1.5;
}

.banner-mock__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 12px;
	color: var(--site-brand-deep);
	font-weight: 600;
	text-decoration: underline;
}

.banner-mock__toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.banner-mock__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 5px 4px 11px;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-pill);
	background: var(--site-bg-tinted);
	color: var(--site-text);
	font-weight: 600;
}

.switch-mock {
	position: relative;
	width: 30px;
	height: 17px;
	border-radius: 9px;
	background: var(--site-slate-55);
}

.switch-mock::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--site-white);
}

.switch-mock--on {
	background: var(--site-brand);
}

.switch-mock--on::after {
	left: 15px;
}

.switch-mock--locked {
	background: var(--site-green-55);
}

.switch-mock--locked::after {
	left: 15px;
}

.banner-mock__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.banner-mock__btn {
	padding: 8px 12px;
	border: 2px solid var(--site-brand);
	border-radius: 9px;
	background: var(--site-brand);
	color: var(--site-on-brand);
	font-weight: 600;
}

.banner-mock__btn--outline {
	background: var(--site-surface);
	color: var(--site-brand-deep);
}

.banner-mock__credit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	color: var(--site-text);
}

.banner-mock__credit-logo {
	width: 74px;
	height: auto;
}

/* Score dial and issue rows (Overview mockup) */
.score-mock {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	padding: 22px;
}

.score-mock__dial {
	--score: 86;
	display: grid;
	flex: none;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: conic-gradient(var(--site-brand) calc(var(--score) * 1%), var(--site-slate-90) 0);
}

.score-mock__dial-value {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--site-surface);
	color: var(--site-text);
	font-size: 26px;
	font-weight: 700;
}

.score-mock__label {
	margin: 0;
	color: var(--site-text-faint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.score-mock__title {
	margin: 2px 0 8px;
	color: var(--site-text);
	font-size: 22px;
	font-weight: 700;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--site-radius-pill);
	background: var(--site-bg-sunken);
	color: var(--site-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.chip--ok {
	background: var(--site-brand-tint);
	color: var(--site-brand-darkest);
}

.chip--warn {
	background: var(--site-warn-soft);
	color: var(--site-warn);
}

.chip--error {
	background: var(--site-error-soft);
	color: var(--site-error);
}

.chip--info {
	background: var(--site-info-soft);
	color: var(--site-info);
}

.chip--pro {
	background: var(--site-text);
	color: var(--site-white);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.issue-mock {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 22px;
	border-top: 1px solid var(--site-border);
}

.issue-mock__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--site-warn-soft);
	color: var(--site-warn);
	font-weight: 700;
}

.issue-mock__icon--info {
	background: var(--site-info-soft);
	color: var(--site-info);
}

.issue-mock__title {
	margin: 0;
	color: var(--site-text);
	font-size: var(--site-size-sm);
	font-weight: 600;
}

.issue-mock__text {
	margin: 2px 0 0;
	color: var(--site-text-muted);
	font-size: var(--site-size-xs);
	line-height: 1.5;
}

.issue-mock__action {
	flex: none;
	margin-left: auto;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--site-brand);
	color: var(--site-on-brand);
	font-size: 12px;
	font-weight: 600;
}

/* --- Cards in rows --- */

.card-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.card-row > * {
	flex: 1 1 300px;
	min-width: 0;
}

.card-row--two > * {
	flex-basis: 420px;
}

.card-row--four > * {
	flex-basis: 230px;
}

.feature-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	background: var(--site-surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
	border-color: var(--site-green-alpha-24);
	box-shadow: var(--site-shadow);
}

a.feature-card {
	color: inherit;
	text-decoration: none;
}

a.feature-card:hover {
	transform: translateY(-2px);
}

.feature-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--site-brand-soft);
	color: var(--site-brand);
}

.feature-card__icon svg {
	width: 24px;
	height: 24px;
}

.feature-card__title {
	margin: 0 0 8px;
	font-size: var(--site-size-lg);
}

.feature-card__text {
	margin: 0;
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
	line-height: 1.6;
}

.feature-card__list {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	font-size: var(--site-size-sm);
	list-style: none;
}

.feature-card__more {
	margin-top: auto;
	padding-top: 18px;
}

/* Tick list */
.tick-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tick-list__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.tick-list__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--site-brand);
}

.tick-list__item--off .tick-list__icon {
	color: var(--site-text-faint);
}

/* --- Split section (text beside a visual) --- */

.split {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.split + .split {
	margin-top: var(--site-section-space);
}

.split__text,
.split__visual {
	flex: 1 1 420px;
	min-width: 0;
}

.split--reverse {
	flex-direction: row-reverse;
}

/* Short text column stays in view while a long list beside it scrolls (side by side only). */
@media (min-width: 900px) {
	.split--sticky {
		align-items: flex-start;
	}

	.split--sticky > :first-child {
		position: sticky;
		top: var(--site-sticky-top);
	}
}

.split__title {
	font-size: var(--site-size-xl);
}

.split__lead {
	color: var(--site-text-muted);
}

/* --- Steps (how it works) --- */

.steps {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps__item {
	position: relative;
	flex: 1 1 220px;
	min-width: 0;
	padding: 28px 24px 24px;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	background: var(--site-surface);
	counter-increment: step;
}

@media (max-width: 1100px) {
	/* Two by two, never three and an orphan. */
	.steps__item {
		flex-basis: calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.steps__item {
		flex-basis: 100%;
	}
}

.steps__item::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--site-brand);
	color: var(--site-on-brand);
	font-weight: 700;
}

.steps__title {
	margin: 0 0 6px;
	font-size: var(--site-size-md);
}

.steps__text {
	margin: 0;
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
}

/* --- Plan cards (pricing) --- */

.plan-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}

.plan-card {
	position: relative;
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	min-width: 0;
	padding: 30px 26px;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	background: var(--site-surface);
}

/* Four across on wide screens, two by two in between, one column on phones. */
@media (max-width: 1100px) {
	.plan-card {
		flex-basis: calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.plan-card {
		flex-basis: 100%;
	}

	.plan-card__for {
		min-height: 0;
	}
}

.plan-card--featured {
	border: 2px solid var(--site-brand);
	box-shadow: var(--site-shadow-lg);
}

.plan-card__badge {
	position: absolute;
	top: -13px;
	left: 26px;
}

.plan-card__name {
	margin: 0 0 4px;
	font-size: var(--site-size-lg);
}

.plan-card__for {
	min-height: 3.3em; /* Two lines, so prices line up across cards. */
	margin: 0 0 20px;
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
}

.plan-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 4px;
	color: var(--site-text);
}

.plan-card__amount {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.plan-card__period {
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
}

.plan-card__note {
	margin: 0 0 22px;
	color: var(--site-text-faint);
	font-size: var(--site-size-xs);
}

.plan-card__features {
	margin-bottom: 26px;
	font-size: var(--site-size-sm);
}

.plan-card__cta {
	margin-top: auto;
}

/* --- Comparison table --- */

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	background: var(--site-surface);
	-webkit-overflow-scrolling: touch;
}

.compare-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--site-size-sm);
}

.compare-table caption {
	padding: 14px 18px;
	color: var(--site-text-muted);
	font-size: var(--site-size-xs);
	text-align: left;
	caption-side: bottom;
}

.compare-table th,
.compare-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--site-border);
	text-align: left;
	vertical-align: top;
}

.compare-table thead th {
	background: var(--site-bg-tinted);
	color: var(--site-text);
	font-weight: 600;
	white-space: nowrap;
}

.compare-table tbody th {
	color: var(--site-text);
	font-weight: 600;
}

.compare-table__ours {
	background: var(--site-brand-soft);
}

.compare-table__yes,
.compare-table__no {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.compare-table__yes {
	color: var(--site-brand-deep);
}

.compare-table__no {
	color: var(--site-text-faint);
}

.compare-table__mark {
	width: 18px;
	height: 18px;
	flex: none;
}

/* --- FAQ --- */

.faq-list {
	display: grid;
	gap: 12px;
	max-width: 860px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius);
	background: var(--site-surface);
}

.faq-item[open] {
	border-color: var(--site-green-alpha-24);
	box-shadow: var(--site-shadow-sm);
}

.faq-item__q {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 16px 22px;
	color: var(--site-text);
	font-size: var(--site-size-md);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faq-item__q::-webkit-details-marker {
	display: none;
}

.faq-item__chevron {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--site-brand);
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__chevron {
	transform: rotate(180deg);
}

.faq-item__a {
	padding: 0 22px 20px;
	color: var(--site-text-muted);
	font-size: var(--site-size-sm);
}

.faq-item__a p:last-child {
	margin-bottom: 0;
}

/* --- Call to action band --- */

.cta-band {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
	border-radius: var(--site-radius-lg);
	background:
		radial-gradient(600px 300px at 100% 0, rgba(63, 176, 127, 0.35), transparent 70%),
		var(--site-brand-darkest);
	color: var(--site-dark-text);
	text-align: center;
}

.cta-band__mark {
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 260px;
	opacity: 0.08;
	pointer-events: none;
}

.cta-band__title {
	color: var(--site-white);
}

.cta-band__text {
	max-width: 620px;
	margin: 0 auto 28px;
	color: var(--site-dark-muted);
	font-size: var(--site-size-lg);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.cta-band .btn--secondary {
	border-color: rgba(255, 255, 255, 0.4);
	background: transparent;
	color: var(--site-white);
}

.cta-band .btn--secondary:hover,
.cta-band .btn--secondary:focus-visible {
	border-color: var(--site-white);
	color: var(--site-white);
}

/* --- Notices --- */

.notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--site-radius);
	background: var(--site-bg-sunken);
	color: var(--site-text);
	font-size: var(--site-size-sm);
}

.notice--info {
	background: var(--site-info-soft);
}

.notice--warn {
	background: var(--site-warn-soft);
}

.notice--ok {
	background: var(--site-brand-soft);
}

.notice__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.notice p:last-child {
	margin-bottom: 0;
}

/* --- Stat strip --- */

.stat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stat-strip__item {
	flex: 1 1 180px;
	min-width: 0;
}

.stat-strip__value {
	display: block;
	color: var(--site-white);
	font-size: var(--site-size-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stat-strip__label {
	display: block;
	margin-top: 6px;
	color: var(--site-dark-muted);
	font-size: var(--site-size-sm);
}

/* --- Docs figures: screenshot with numbered steps --- */

.doc-shot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin: 1.8em 0;
}

.doc-figure {
	flex: 1 1 420px;
	min-width: 0;
	margin: 0;
}

.doc-figure__link {
	display: block;
	overflow: hidden;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius);
	background: var(--site-surface);
	box-shadow: var(--site-shadow);
	cursor: zoom-in;
}

.doc-figure__img {
	display: block;
	width: 100%;
	height: auto;
}

.doc-figure__caption {
	margin-top: 8px;
	color: var(--site-text-faint);
	font-size: var(--site-size-xs);
}

.doc-steps {
	position: sticky;
	top: var(--site-sticky-top);
	flex: 0 1 300px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: callout;
}

.doc-steps li {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	font-size: var(--site-size-sm);
	counter-increment: callout;
}

.doc-steps li::before {
	content: counter(callout);
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--site-callout);
	color: var(--site-white);
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 760px) {
	.doc-steps {
		position: static;
		flex-basis: 100%;
	}
}

.lightbox {
	width: min(96vw, 1600px);
	max-width: none;
	max-height: 94vh;
	padding: 0;
	border: 0;
	border-radius: var(--site-radius);
	background: var(--site-surface);
	box-shadow: var(--site-shadow-lg);
}

.lightbox::backdrop {
	background: rgba(22, 35, 29, 0.75);
}

.lightbox__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	cursor: zoom-in;
	touch-action: manipulation; /* Our double-tap zoom, not the page's. */
	user-select: none;
	-webkit-user-select: none;
}

/* The screenshot sits in its own scroll box, so the close button stays put when zoomed. */
.lightbox__pan {
	max-height: 94vh;
	overflow: hidden;
	border-radius: inherit;
}

/* Zoomed: drag, swipe or scroll to move around. */
.lightbox--zoomed .lightbox__pan {
	overflow: auto;
	overscroll-behavior: contain;
}

.lightbox--zoomed .lightbox__img {
	cursor: zoom-out;
}

.lightbox__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--site-text);
	color: var(--site-white);
	font-size: 22px;
	cursor: pointer;
}

/* --- Plain page hero, post list --- */

.page-hero--plain {
	padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 44px);
}

.page-hero__meta {
	margin: 0;
	color: var(--site-text-faint);
	font-size: var(--site-size-sm);
}

.post-list {
	display: grid;
	gap: 28px;
}

.post-list__item {
	padding-bottom: 28px;
	border-bottom: 1px solid var(--site-border);
}

.post-list__title {
	margin: 0 0 4px;
	font-size: var(--site-size-lg);
}

.post-list__title a {
	color: inherit;
	text-decoration: none;
}

.post-list__title a:hover {
	color: var(--site-brand-deep);
}

.post-list__meta {
	margin: 0 0 8px;
	color: var(--site-text-faint);
	font-size: var(--site-size-xs);
}

.post-list__excerpt {
	margin: 0;
}

/* --- Drawn website mockup with the banner open (partials/mock-site.php) --- */

.mock-site__body {
	min-height: 380px;
	padding: 18px 20px 20px;
	background:
		linear-gradient(180deg, var(--site-brand-soft), var(--site-surface) 46%);
}

.mock-site__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.mock-site__brand {
	width: 92px;
	height: 14px;
	border-radius: 7px;
	background: var(--site-ink-30);
}

.mock-site__links {
	display: flex;
	gap: 10px;
}

.mock-site__links span {
	width: 38px;
	height: 8px;
	border-radius: 4px;
	background: var(--site-slate-82);
}

.mock-site__hero {
	display: grid;
	gap: 10px;
	max-width: 62%;
	margin-bottom: 22px;
}

.mock-site__line {
	height: 9px;
	border-radius: 5px;
	background: var(--site-slate-90);
}

.mock-site__line--title {
	width: 90%;
	height: 18px;
	background: var(--site-ink-30);
}

.mock-site__line--short {
	width: 60%;
}

.mock-site__cta {
	width: 110px;
	height: 30px;
	margin-top: 6px;
	border-radius: 8px;
	background: var(--site-brand);
}

.mock-site__map {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px;
	border: 1px dashed var(--site-border-strong);
	border-radius: var(--site-radius-sm);
	background: var(--site-bg-sunken);
	color: var(--site-text-muted);
	font-size: var(--site-size-xs);
}

.mock-site__map-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	color: var(--site-brand);
}

.mock-site__map-text {
	flex: 1 1 160px;
}

.mock-site__map-btn {
	padding: 5px 10px;
	border-radius: 7px;
	background: var(--site-surface);
	color: var(--site-brand-deep);
	font-weight: 600;
}

.mock-site__banner {
	position: relative;
	margin-top: -36px;
	margin-left: auto;
	max-width: 400px;
}

.mock-site__banner--choices {
	max-width: 420px;
}

.mock-site__gpc {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 8px 0 12px;
	padding: 8px 10px;
	border-radius: var(--site-radius-sm);
	background: var(--site-brand-soft);
	color: var(--site-brand-darkest);
	font-weight: 600;
}

.mock-site__gpc svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.mock-site__rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mock-site__rows .banner-mock__toggle {
	justify-content: space-between;
}

@media (max-width: 520px) {
	.mock-site__hero {
		max-width: 100%;
	}

	.mock-site__banner {
		max-width: none;
		margin-top: 16px;
	}

	.mock-site__rows {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tour video (partials/promo-video.php): poster with a play button; plays in a lightbox. */
.promo-video__frame {
	position: relative;
	display: block;
	max-width: 1040px;
	margin: 0 auto;
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-lg);
	overflow: hidden;
	background: var(--site-white);
	box-shadow: var(--site-shadow-lg);
	color: var(--site-white);
	text-decoration: none;
	cursor: pointer;
}

.promo-video__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	transition: transform 0.5s ease;
}

.promo-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(48px, 9vw, 96px);
	height: clamp(48px, 9vw, 96px);
	padding-left: 5px;
	border-radius: 50%;
	background: var(--site-brand);
	color: var(--site-white);
	box-shadow: 0 0 0 10px rgba(31, 138, 91, 0.18), 0 12px 30px rgba(14, 61, 42, 0.35);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-video__play svg {
	width: 40%;
	height: 40%;
}

.promo-video__frame:hover .promo-video__play,
.promo-video__frame:focus-visible .promo-video__play {
	box-shadow: 0 0 0 16px rgba(31, 138, 91, 0.22), 0 14px 34px rgba(14, 61, 42, 0.4);
	transform: translate(-50%, -50%) scale(1.08);
}

.promo-video__frame:hover .promo-video__poster {
	transform: scale(1.02);
}

.promo-video__frame:focus-visible {
	outline: 3px solid var(--site-text);
	outline-offset: 4px;
}

.promo-video__badge {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(22, 35, 29, 0.82);
	color: var(--site-white);
	font-size: var(--site-size-sm);
	font-weight: 600;
	line-height: 1.2;
}

@media (max-width: 600px) {
	.promo-video__badge {
		right: 10px;
		bottom: 10px;
		padding: 4px 9px;
		font-size: 12px;
	}

	.promo-video__play {
		box-shadow: 0 0 0 6px rgba(31, 138, 91, 0.18), 0 8px 20px rgba(14, 61, 42, 0.3);
	}
}

.lightbox--video {
	width: min(96vw, 1280px);
	overflow: visible;
	background: #000;
}

.lightbox__video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 90vh;
	aspect-ratio: 16 / 9;
	border-radius: var(--site-radius);
	background: #000;
}

.lightbox--video .lightbox__close {
	top: -54px;
	right: 0;
	background: var(--site-white);
	color: var(--site-text);
}

.has-lightbox {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.promo-video__poster,
	.promo-video__play {
		transition: none;
	}

	.promo-video__frame:hover .promo-video__poster {
		transform: none;
	}
}

/* --- Guide links row (partials/guide-links.php) --- */

.guide-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	justify-content: center;
	margin-top: 36px;
	font-size: var(--site-size-sm);
}

.guide-links__label {
	color: var(--site-text-muted);
	font-weight: 600;
}

.guide-links__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--site-radius-pill);
	background: var(--site-surface);
	border: 1px solid var(--site-border);
	color: var(--site-brand-deep);
	font-weight: 600;
	text-decoration: none;
}

.guide-links__link:hover,
.guide-links__link:focus-visible {
	border-color: var(--site-brand);
}