/* ==========================================================================
   30 — Footer

   Newsletter band, a five-track link grid, then the legal strip as a sibling
   band with its own inner shell so the hairline runs edge to edge.
   ========================================================================== */

.jn-footer,
.wp-site-blocks .jn-footer {
	margin-block: 5rem 0;
	border-top: 1px solid hsl( var( --jn-border ) / .2 );
	background-color: hsl( var( --jn-background-secondary ) );
	color: hsl( var( --jn-foreground ) );
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.jn-newsletter,
.wp-site-blocks .jn-newsletter {
	margin-block: 0;
	border-bottom: 1px solid hsl( var( --jn-border ) / .2 );
}

.jn-newsletter__inner,
.wp-site-blocks .jn-newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-block: 0;
	padding-block: 3rem;
	text-align: center;
}

.jn-footer .jn-newsletter__title {
	margin: 0;
	font-size: 1.5rem;
}

.jn-footer .jn-newsletter__lede {
	max-width: 34rem;
	margin: 0;
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	width: 100%;
	max-width: 30rem;
	margin-top: .5rem;
}

.jn-footer .jn-newsletter__input {
	flex: 1 1 14rem;
	min-height: 2.75rem;
	padding-inline: 1rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
}

.jn-footer .jn-newsletter__input::placeholder {
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-footer .jn-newsletter__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Link grid — five tracks: the brand spans two, then three link columns.
   Four tracks would wrap the last column.
   -------------------------------------------------------------------------- */

.jn-footer__body,
.wp-site-blocks .jn-footer__body {
	margin-block: 0;
}

.jn-footer__grid,
.wp-site-blocks .jn-footer__grid {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 2rem;
	margin-block: 0;
	padding-block: 3rem;
}

/* Trap 4 — grid children each collect a block-gap margin. */
.jn-footer__grid > *,
.wp-site-blocks .jn-footer__grid > * {
	margin-block: 0;
}

.jn-footer__brand,
.wp-site-blocks .jn-footer__brand {
	grid-column: span 2;
	margin-block: 0;
}

.jn-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	text-decoration: none;
}

.jn-footer__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .5rem;
	background: var( --jn-gradient-gold );
	color: #111;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 700;
}

.jn-footer__wordmark {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl( var( --jn-primary-text ) );
}

.jn-footer .jn-footer__blurb {
	margin: 1rem 0 0;
	max-width: 30rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .9375rem;
	line-height: 1.6;
}

.jn-footer .jn-footer__contact {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.jn-footer .jn-footer__contact li {
	margin: 0 0 .5rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .9375rem;
	line-height: 1.45;
}

.jn-footer .jn-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.jn-footer .jn-footer__contact a:hover {
	color: hsl( var( --jn-primary-text ) );
}

.jn-footer__col,
.wp-site-blocks .jn-footer__col {
	margin-block: 0;
}

.jn-footer .jn-footer__coltitle {
	margin: 0 0 1rem;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: hsl( var( --jn-foreground ) );
}

.jn-footer .jn-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Footer lists want tighter leading than the inherited body value. */
.jn-footer .jn-footer__links li {
	margin: 0 0 .625rem;
	line-height: 1.45;
}

.jn-footer .jn-footer__links a {
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .9375rem;
	text-decoration: none;
	transition: var( --jn-transition );
}

.jn-footer .jn-footer__links a:hover,
.jn-footer .jn-footer__links a[ aria-current="page" ] {
	color: hsl( var( --jn-primary-text ) );
}

/* --------------------------------------------------------------------------
   Legal strip — its own band, so the hairline is edge to edge while the text
   stays within the shell.
   -------------------------------------------------------------------------- */

.jn-legal,
.wp-site-blocks .jn-legal {
	margin-block: 0;
	border-top: 1px solid hsl( var( --jn-border ) / .2 );
}

.jn-legal__inner,
.wp-site-blocks .jn-legal__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block: 0;
	padding-block: 1.5rem;
}

.jn-footer .jn-legal__copy {
	margin: 0;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .875rem;
}

.jn-footer .jn-legal__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jn-footer .jn-legal__links li {
	margin: 0;
}

.jn-footer .jn-legal__links a {
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .875rem;
	text-decoration: none;
}

.jn-footer .jn-legal__links a:hover,
.jn-footer .jn-legal__links a[ aria-current="page" ] {
	color: hsl( var( --jn-primary-text ) );
}

.jn-pay {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.jn-pay__label {
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .875rem;
}

.jn-pay__card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 1.5rem;
	border: 1px solid hsl( var( --jn-border ) / .2 );
	border-radius: .25rem;
	background-color: hsl( var( --jn-card ) );
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .6875rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Below the wide tier the brand takes its own full-width row and the three
   link columns sit beside it — with three columns that leaves no orphan.
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.jn-footer__grid,
	.wp-site-blocks .jn-footer__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.jn-footer__brand,
	.wp-site-blocks .jn-footer__brand {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.jn-footer__grid,
	.wp-site-blocks .jn-footer__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding-block: 2.5rem;
	}

	.jn-legal__inner,
	.wp-site-blocks .jn-legal__inner {
		justify-content: flex-start;
	}
}