/* =========================================================================
   SJ Kids Outfit - Footer
   Mobile-first. Built only from design-system.css tokens.

   Three blocks, matching the reference footer measurement for measurement:
   a brand-purple newsletter band, a near-white block of five link columns
   with the social circles centred under them, and a plain copyright line.
   Type is set in px because the parent theme uses a 14px root.
   Below 768px the link columns collapse into accordions.
   ========================================================================= */

.sj-footer {
	background: var(--sj-surface);
	color: var(--sj-meta);
}

/* The footer runs on the same near-edge 15px gutters as the header, so the
   five columns come out at the reference's width. */
@media (min-width: 1024px) {
	.sj-footer .sj-container { padding-inline: 15px; }
}

/* -------------------------------------------------------------------------
   Newsletter band
   ------------------------------------------------------------------------- */
.sj-footer__newsletter {
	background: var(--sj-primary);
	color: #fff;
	padding-block: 48px;
}
@media (min-width: 1024px) { .sj-footer__newsletter { padding-block: 70px 45px; } }

.sj-newsletter__inner {
	display: grid;
	gap: var(--sj-sp-6);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 1024px) {
	.sj-newsletter__inner { grid-template-columns: 420px 1fr; gap: 60px; }
}

.sj-newsletter__title {
	margin: 0 0 15px;
	color: #fff;
	font-size: 24px;
	font-weight: var(--sj-fw-regular);
	line-height: 1;
}
.sj-newsletter__subtitle {
	margin: 0;
	max-width: 420px;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
}

/* The form does not run to the container edge in the reference; it sits
   as a ~594px block centred in the right-hand half, with the consent line
   under its left edge. */
@media (min-width: 1024px) {
	.sj-newsletter__side { max-width: 594px; margin-inline: auto; width: 100%; }
}

/* The form is one row of two square blocks: white field, purple button. */
.sj-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--sj-sp-2);
}
@media (min-width: 600px) { .sj-newsletter__form { flex-direction: row; gap: 0; } }

/* Same story as the header search field: the parent theme styles
   `input[type="email"]`, which outranks a lone class, so these two
   selectors are what actually set the box. */
.sj-newsletter__form .sj-newsletter__field,
input.sj-newsletter__field[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 50px;
	min-height: 0;
	margin: 0;
	padding: 13px 15px;
	background: #FDFDFD;
	border: 0;
	border-radius: 0;
	font-family: var(--sj-font);
	font-size: 14px;
	line-height: 24px;
	color: var(--sj-ink);
}
.sj-newsletter__field::placeholder { color: var(--sj-meta); opacity: 1; }

.sj-newsletter__submit {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 111px;
	height: 50px;
	padding: 13px 15px;
	/* The reference's #BF64B6 puts white text at only 3.7:1; this deeper
	   step keeps the button distinct from the band and clears 4.5:1. */
	background: var(--sj-p-600);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--sj-font);
	font-size: 14px;
	font-weight: var(--sj-fw-semi);
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;   /* the parent theme shouts every button */
	cursor: pointer;
	transition: background-color var(--sj-dur-base) var(--sj-ease);
}
.sj-newsletter__submit:hover { background: var(--sj-p-700); }

.sj-newsletter__consent {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-2);
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 24px;
	color: #fff;
}
.sj-newsletter__consent input { width: 16px; height: 16px; margin: 0; accent-color: var(--sj-p-800); }
.sj-newsletter__consent label { cursor: pointer; }

/* -------------------------------------------------------------------------
   Link columns
   ------------------------------------------------------------------------- */
.sj-footer__main {
	background: #FCFCFC;   /* the reference's near-white footer field */
	padding-block: 48px;
}
@media (min-width: 1024px) { .sj-footer__main { padding-block: 75px; } }

.sj-footer__cols {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.sj-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sj-sp-8); }
}
@media (min-width: 1024px) {
	/* five equal columns, no gutter - the reference lets the link lists
	   run on the column edges */
	.sj-footer__cols { grid-template-columns: repeat(5, 1fr); gap: 0; }
}

.sj-fcol { border-bottom: 1px solid var(--sj-border); }
@media (min-width: 768px) { .sj-fcol { border-bottom: 0; } }

/* The heading is a button below 768px (accordion) and plain text above. */
.sj-fcol__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--sj-tap);
	padding: var(--sj-sp-3) 0;
	background: none;
	border: 0;
	color: #222222;   /* the reference's footer heading grey-black */
	font-family: var(--sj-font-head);
	font-size: 18px;
	font-weight: var(--sj-fw-medium);
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}
.sj-fcol__head::after {
	content: "+";
	color: var(--sj-primary);
	font-size: 20px;
	line-height: 1;
}
.sj-fcol__head[aria-expanded="true"]::after { content: "\2212"; }

@media (min-width: 768px) {
	.sj-fcol__head {
		cursor: default;
		min-height: 0;
		padding: 0;
		margin-bottom: 30px;
	}
	.sj-fcol__head::after { display: none; }
}

.sj-fcol__list {
	margin: 0;
	padding: 0 0 var(--sj-sp-4);
	list-style: none;
	display: none;
}
.sj-fcol__list.is-open { display: block; }
@media (min-width: 768px) {
	.sj-fcol__list,
	.sj-fcol__list.is-open { display: block; padding-bottom: 0; }
}

.sj-fcol__list li { margin: 0 0 10px; }
.sj-fcol__list a,
.sj-fcol__list span {
	color: var(--sj-meta);
	font-size: 16px;
	line-height: 27px;
	text-decoration: none;
	transition: color var(--sj-dur-fast) var(--sj-ease);
}
.sj-fcol__list a:hover { color: var(--sj-primary); }

/* -------------------------------------------------------------------------
   Social row - sits inside the columns block, centred under them
   ------------------------------------------------------------------------- */
.sj-footer__social {
	display: flex;
	justify-content: center;
	gap: 5px;
	padding-top: 30px;
}
.sj-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: var(--sj-primary);
	color: #fff;
	border-radius: var(--sj-r-pill);
	transition: background-color var(--sj-dur-base) var(--sj-ease);
}
.sj-social:hover { background: var(--sj-primary-dark); }
.sj-social svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------------------
   Copyright
   ------------------------------------------------------------------------- */
.sj-footer__copy {
	background: var(--sj-surface);
	padding: 20px 0 5px;
	font-size: 14px;
	color: var(--sj-meta);
}
.sj-footer__copy p { margin: 0; }
.sj-footer__copy a { color: var(--sj-primary); text-decoration: none; }
.sj-footer__copy a:hover { text-decoration: underline; }