/* Static native footer. All tones follow the shared game/header palette. */
.sj-footer {
	--sj-footer-content-pad: var(--sj-cell-pad);
	--sj-footer-rule: color-mix(in srgb, var(--color-offwhite) 18%, var(--color-navy));
	--sj-footer-muted: color-mix(in srgb, var(--color-offwhite) 76%, var(--color-navy));
	--sj-footer-harbour: color-mix(in oklab, var(--color-forest) 25%, var(--color-navy));
	--sj-footer-water: color-mix(in srgb, var(--sj-footer-harbour) 28%, var(--color-navy));
	--sj-footer-reflection: color-mix(in srgb, var(--color-offwhite) 18%, var(--sj-footer-harbour));
	position: relative;
	width: 100%;
	border-top: 1px solid var(--sj-footer-rule);
	background: var(--color-navy);
	color: var(--color-offwhite);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
}

.sj-footer *,
.sj-footer *::before,
.sj-footer *::after { box-sizing: border-box; }

/* Follow the page's content inset through every row of the shared footer. */
body.home .sj-footer { --sj-footer-content-pad: clamp(32px, 4vw, 64px); }

/* The shared invitation belongs to this footer on every frontend template. */
.sj-footer-invitation { border-bottom: 1px solid var(--sj-footer-rule); }
.sj-footer-invitation-inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: 80px;
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	margin-inline: auto;
	padding: clamp(64px, 7vw, 104px) var(--sj-footer-content-pad);
	border-inline: 1px solid var(--sj-footer-rule);
}
.sj-footer-invitation-copy { min-width: 0; }
.sj-footer-invitation-action { justify-self: end; max-width: 100%; }
.sj-footer .sj-footer-invitation-copy h2 {
	margin: 0 0 28px;
	color: var(--color-offwhite);
	font-family: var(--font-heading);
	font-size: clamp(44px, 4.8vw, 64px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.sj-footer-invitation-copy p {
	margin: 0;
	color: var(--sj-footer-muted);
	font-size: var(--font-size-body);
	line-height: 1.85;
}
.sj-footer .sj-footer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}
@media (max-width: 1100px) {
	body.home .sj-footer { --sj-footer-content-pad: 32px; }
	.sj-footer-invitation-inner { column-gap: 40px; }
}
@media (max-width: 767px) {
	body.home .sj-footer { --sj-footer-content-pad: 20px; }
	.sj-footer-invitation-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		width: 100%;
		padding: 56px var(--sj-footer-content-pad);
		border-inline: 0;
	}
	.sj-footer-invitation-action { justify-self: start; }
	.sj-footer .sj-footer-invitation-copy h2 { font-size: 42px; margin-bottom: 16px; }
	.sj-footer-invitation-copy p { font-size: var(--font-size-body); }
}

.sj-footer-inner {
	width: min(100% - 64px, 1280px);
	margin-inline: auto;
}

.sj-footer-grid {
	display: grid;
	grid-template-columns: var(--sj-grid-six, repeat(6, minmax(0, 1fr)));
	gap: 48px;
	padding-block: 56px 40px;
}

.sj-footer-grid > * { grid-column: span 1; }
.sj-footer-grid > .sj-footer-brand,
.sj-footer-grid > .sj-footer-connect { grid-column: span 2; }

/* Unconfigured legal destinations leave three useful, balanced columns. */
.sj-footer .sj-footer-grid.sj-footer-grid--no-legal > * { grid-column: span 2; }

.sj-footer a,
.sj-footer a:visited {
	color: var(--color-offwhite);
	text-decoration: none;
}

.sj-footer a:is(:hover, :focus-visible, :active) {
	color: var(--color-lime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.sj-footer a:focus-visible {
	outline: 2px solid var(--color-lime);
	outline-offset: 4px;
}

.sj-footer-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sj-footer-logo-image {
	display: block;
	width: 112px;
	height: auto;
	filter: brightness(0) invert(1);
}

.sj-footer-name {
	margin: 20px 0 14px;
	font-family: var(--font-heading);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.sj-footer-description {
	max-width: 320px;
	margin: 0;
	color: var(--sj-footer-muted);
}

.sj-footer .sj-footer-heading {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sj-footer-rule);
	color: var(--color-offwhite);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sj-footer-menu,
.sj-footer-socials {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sj-footer-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	width: fit-content;
	max-width: 100%;
	padding-block: 8px;
}

.sj-footer-menu .current-menu-item > a {
	color: var(--color-lime);
	font-weight: 600;
}

.sj-footer-location {
	margin: 20px 0 10px;
	color: var(--sj-footer-muted);
}

.sj-footer-subscribe { position: relative; margin-top: 24px; }
.sj-footer .sj-footer-subscribe-title { margin: 0 0 14px; color: var(--color-offwhite); font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: 1.7; letter-spacing: normal; }
.sj-footer-subscribe label { display: block; margin-bottom: 6px; color: var(--sj-footer-muted); font-size: 12px; }
.sj-footer-subscribe-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sj-footer .sj-footer-subscribe input[type="email"] {
	min-width: 0;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--sj-footer-rule);
	border-radius: 0;
	background: var(--color-navy);
	color: var(--color-offwhite);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 22px;
}
.sj-footer .sj-footer-subscribe input[type="email"]:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 2px; }
.sj-footer .sj-footer-subscribe input[type="email"]::placeholder { color: var(--sj-footer-muted); opacity: 1; }
.sj-footer .sj-footer-subscribe-button {
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 22px;
}
/* Reserve two lines so confirmation and validation cannot shift the footer. */
.sj-footer-subscribe-status { min-height: 3.4em; margin: 12px 0 0; color: var(--color-offwhite); font-size: var(--font-size-body); line-height: 1.7; }
.sj-footer-subscribe-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
@media (max-width: 767px) {
	.sj-footer .sj-footer-subscribe input[type="email"] { font-size: 16px; }
}

.sj-footer-contact {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: left calc(100% - 6px);
	background-size: 0 1px;
	background-repeat: no-repeat;
}

/* One continuous underline spans both the text and its separate icon glyph. */
.sj-footer .sj-footer-contact:is(:hover, :focus-visible, :active) {
	background-size: 100% 1px;
	text-decoration: none;
}

.sj-footer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.sj-footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--sj-footer-rule);
	color: var(--color-offwhite);
}

.sj-footer-social.is-unset {
	color: var(--sj-footer-muted);
	cursor: default;
}

.sj-footer-social:is(:hover, :focus-visible, :active) {
	border-color: var(--color-lime);
	text-decoration: none;
}

.sj-footer-social.is-unset:is(:hover, :active) {
	border-color: var(--sj-footer-rule);
}

.sj-footer-bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px 32px;
	padding-top: 24px;
	color: var(--sj-footer-muted);
	font-size: 12px;
}

/* A paint-only extension reaches the viewport edges without a wide layout box.
   The columns' vertical rails stop here; they do not continue below the rule. */
.sj-footer-bottom::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--sj-footer-rule);
	box-shadow: 0 0 0 100vmax var(--sj-footer-rule);
	clip-path: inset(0 -100vmax);
	pointer-events: none;
	content: "";
}

.sj-footer-bottom p { margin: 0; }

/* The clipped stage keeps the walk wholly inside the document; the dialogue
   is a sibling so its frame can sit above the character without being cut off. */
.sj-footer-walkway {
	position: relative;
	width: 100%;
	height: 112px;
	overflow: hidden;
	pointer-events: none;
}

.sj-footer-walkway::before {
	position: absolute;
	left: 0;
	bottom: 32px;
	width: 100%;
	height: 80px;
	background: var(--sj-footer-harbour);
	-webkit-mask: url("../../images/game/portsmouth-skyline.svg") center bottom / 600px 80px repeat-x;
	mask: url("../../images/game/portsmouth-skyline.svg") center bottom / 600px 80px repeat-x;
	content: "";
}

.sj-footer-walkway::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 32px;
	background-color: var(--sj-footer-water);
	background-image: linear-gradient(var(--sj-footer-reflection), var(--sj-footer-reflection)), linear-gradient(var(--sj-footer-reflection), var(--sj-footer-reflection)), linear-gradient(var(--sj-footer-reflection), var(--sj-footer-reflection));
	background-position: 14% 10px, 53% 20px, 86% 12px;
	background-size: 32px 2px, 40px 2px, 24px 2px;
	background-repeat: no-repeat;
	content: "";
}

.sj-footer-character {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 84px;
	height: 96px;
	transform: translate3d(-84px, 0, 0);
	visibility: hidden;
	pointer-events: none;
}

.sj-footer-character[data-sj-footer-character-state="walking"],
.sj-footer-character[data-sj-footer-character-state="idle"] { visibility: visible; }

.sj-footer-sprite {
	display: block;
	width: 84px;
	height: 96px;
	max-width: none;
	image-rendering: pixelated;
	pointer-events: none;
}

/* The shared dialogue frame sits just above the footer walkway. */
.sj-footer .sj-footer-speech { bottom: 108px; }

.sj-footer-end {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.sj-footer .sj-footer-grid.sj-footer-grid--no-legal > * { grid-column: span 3; }
	.sj-footer .sj-footer-grid.sj-footer-grid--no-legal > .sj-footer-brand { grid-column: 1 / -1; }
	.sj-footer-grid {
		gap: 32px;
	}
	.sj-footer-grid > * { grid-column: span 2; }
	.sj-footer-grid > .sj-footer-brand { grid-column: 1 / -1; }
	.sj-footer-description { max-width: 480px; }
}

@media (max-width: 599px) {
	.sj-footer .sj-footer-grid.sj-footer-grid--no-legal > * { grid-column: 1 / -1; border-left: 0; }
	.sj-footer-inner { width: calc(100% - 32px); }
	.sj-footer-grid {
		gap: 32px 24px;
		padding-block: 40px 32px;
	}
	.sj-footer-grid > * { grid-column: span 3; }
	.sj-footer-grid > .sj-footer-brand,
	.sj-footer-grid > .sj-footer-connect { grid-column: 1 / -1; }
	.sj-footer-name { font-size: 24px; }
	.sj-footer-bottom {
		flex-direction: column;
		gap: 12px;
	}
}

/* Normal footer copy follows the shared responsive body scale. */
.sj-footer :is(.sj-footer-description, .sj-footer-location) { font-size: var(--font-size-body); font-weight: var(--font-weight-body); }