/*
 * PetSmart corporate "legacy" footer.
 *
 * These rules are a 1:1 transcription of the live petsmart.com footer CSS,
 * captured from the site's stylesheets via the CSSOM. The PetSmart "sparky"
 * design-token variables have been resolved to their concrete values so the
 * footer renders identically without the rest of the sparky token system:
 *   --sparky-size-base-unit            = 8px   (0.5rem)
 *   --sparky-font-size-12 / 14         = 12px / 14px
 *   --sparky-line-height-xxxl          = 1.42857
 *   --sparky-color-neutral-800/900/wht = #333 / #131313 / #fff
 *   --legacy-header-font-family        = "Arial","Helvetica",sans-serif
 *   --legacy-header-color-loyal-blue   = #007db4
 *   text-link-foreground-hover         = #1f66e4
 * calc(base-unit * N) values are pre-multiplied (e.g. *6.25 -> 50px).
 *
 * Everything is scoped under .legacy-footer so the sparky/legacy class names
 * can't leak into the rest of the site or collide with Ollie / core styles.
 */

.legacy-footer {
	background-color: rgb(250, 250, 250);
	color: #131313;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	/* Anchor line-height + weight so Ollie's per-template body typography (it
	   uses a 430 weight) can't leak in and shift the footer's spacing/weight. */
	line-height: 1.42857;
	font-weight: 400;
}

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

/* Neutralize theme/block typography that varies by template so the footer
   renders identically on every screen. */
.legacy-footer ul,
.legacy-footer li,
.legacy-footer a,
.legacy-footer p,
.legacy-footer button {
	line-height: 1.42857;
}

/* ---- Wrappers ---- */

.legacy-footer__main-wrapper {
	max-width: 1240px;
	margin: auto;
}

@media (min-width: 48rem) {
	.legacy-footer__main-wrapper {
		padding: 30px 15px 0 30px;
	}
}

@media (max-width: 48rem) {
	.legacy-footer__main-wrapper {
		padding-top: 25px;
	}
}

.legacy-footer__max-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

@media (min-width: 60rem) {
	.legacy-footer__max-wrapper {
		margin-bottom: 13px;
	}
}

@media (max-width: 48rem) {
	.legacy-footer__max-wrapper {
		flex-direction: column;
		padding: 0;
	}
}

/* ---- Nav-link columns (left) ---- */

.legacy-footer__max-wrapper__links {
	display: flex;
	flex-direction: row;
	flex: 1 0 30%;
	width: 42%;
	margin: 0;
	padding: 0;
}

@media (max-width: 60rem) {
	.legacy-footer__max-wrapper__links {
		border-bottom: 1px solid #f2f7fc;
		width: 100%;
		max-width: 700px;
		flex-wrap: wrap;
		justify-content: center;
		margin: auto;
	}
}

.legacy-footer__nav-links {
	display: flex;
	flex-direction: column;
	margin: 0 50px 0 0;
	padding-left: 0;
	list-style: none;
}

@media (max-width: 48rem) {
	.legacy-footer__nav-links {
		margin-left: 20px;
	}
}

@media (min-width: 48rem) and (max-width: 60rem) {
	.legacy-footer__nav-links {
		margin-left: 35px;
	}
}

@media (max-width: 60rem) {
	.legacy-footer__nav-links {
		flex: 1 1 30%;
		width: 50%;
		margin-right: 0;
	}
}

.legacy-footer .legacy-footer__nav-links .sparky-c-footer-nav__item {
	margin: 0 0 5px;
	display: inline-block;
	list-style: none;
}

/* Base sparky footer-nav link styling. */
.legacy-footer .sparky-c-footer-nav__link {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.42857;
	text-transform: none;
	text-decoration: none;
}

/* Legacy footer link override (Arial, navy, 1px tracking). */
.legacy-footer .legacy-footer__nav-links .sparky-c-footer-nav__item a {
	color: rgb(0, 17, 47);
	font-family: "Arial", "Helvetica", sans-serif;
	letter-spacing: 1px;
	text-decoration: none;
}

.legacy-footer .legacy-footer__nav-links .sparky-c-footer-nav__item a:hover {
	color: #1f66e4;
	text-decoration: underline;
}

/* ---- Certification images (right of nav columns) ---- */

.legacy-footer__container__cta {
	display: flex;
	gap: 50px;
	justify-content: center;
	align-items: center;
}

/* Match petsmart.com: width comes from the HTML `width` attr, height is
   derived from the image's intrinsic aspect ratio (their global reset is
   `img { max-width: 100%; height: auto }`, which overrides the legacy
   `height` attr). Pinning an explicit height here would stretch the seal. */
.legacy-footer__container__cta img {
	width: auto;
	height: auto;
	max-width: 100%;
}

.legacy-footer__container__cta a:first-child img {
	width: 103px;
}

.legacy-footer__container__cta a:last-child img {
	width: 191px;
}

@media (max-width: 60rem) {
	.legacy-footer__container__cta {
		padding: 14px;
		gap: 0;
	}

	.legacy-footer__container__cta a {
		padding: 14px;
	}
}

/* ---- App-store buttons (hidden at desktop, per live site) ---- */

.legacy-footer__app-buttons {
	display: flex;
	max-width: 400px;
	justify-content: space-around;
}

.legacy-footer__app-buttons:has(a) {
	margin: 25px auto 50px;
}

@media (min-width: 60rem) {
	.legacy-footer__app-buttons {
		display: none;
	}
}

/* ---- Social icons ---- */

.legacy-footer__social {
	display: flex;
	flex-direction: column;
}

.legacy-footer__social-icons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-bottom: 24px;
}

.legacy-footer__social-icons img {
	display: block;
	width: 40px;
	height: 40px;
}

.legacy-footer .footer__icon-link,
.legacy-footer .footer__icon-link:hover,
.legacy-footer .footer__icon-link:visited {
	color: #131313;
	display: flex;
}

@media (min-width: 60rem) {
	.legacy-footer__social-icons .footer__icon-link {
		margin-right: 20px;
	}
}

/* ---- Secondary menu: copyright (left) + legal links (right) ---- */

.legacy-footer__secondary-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-family: "Arial", "Helvetica", sans-serif;
	max-width: 1240px;
	padding-top: 25px;
	padding-left: 7.5px;
	padding-bottom: 5px;
	letter-spacing: 1px;
	margin: auto;
}

@media (max-width: 60rem) {
	.legacy-footer__secondary-menu {
		flex-direction: column;
	}
}

.legacy-footer__secondary-menu .copyright-section {
	font-size: 14px;
	color: #333;
}

.legacy-footer__secondary-menu .secondary-navigation {
	font-family: "Arial", "Helvetica", sans-serif;
	line-height: 20px;
}

.legacy-footer__secondary-menu .secondary-navigation__link {
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	color: rgb(0, 17, 47);
	cursor: pointer;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
}

.legacy-footer__secondary-menu .secondary-navigation__link:hover {
	color: #1f66e4;
}

.legacy-footer__secondary-menu .secondary-navigation__link:not(:last-child)::after {
	content: "|";
	margin: 0 5px;
	color: rgb(0, 17, 47);
}

/* "Your Privacy Choices" toggle button: inline-flex with the toggle centered,
   matching the live site (keeps the button width identical so the legal row
   aligns to the right edge). */
.legacy-footer__secondary-menu button.secondary-navigation__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.legacy-footer__secondary-menu .secondary-navigation__link svg {
	display: block;
	margin-left: 0;
	height: auto;
}

.legacy-footer__secondary-menu .secondary-navigation__link img {
	margin-left: 5px;
	display: inline-block;
	vertical-align: middle;
	height: auto;
}

/* ---- Promotional terms: full-bleed gray bar ---- */

.legacy-footer__terms-text {
	background-color: rgb(171, 174, 186);
}

.legacy-footer__terms-text--section {
	max-width: 820px;
	color: #fff;
	padding: 30px 35px;
	line-height: 16px;
	font-size: 12px;
	margin: 0 auto;
	font-family: "Arial", "Helvetica", sans-serif;
}

.legacy-footer__terms-text--section .sparky-c-text-passage {
	margin-top: 0;
	margin-bottom: 20px;
}

.legacy-footer__terms-text--section .sparky-c-text-passage__inner {
	font-size: 12px;
	line-height: 16px;
	font-family: "Arial", "Helvetica", sans-serif;
}

.legacy-footer__terms-text--section .sparky-c-text-passage a {
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #007db4;
	text-decoration: none;
}

.legacy-footer__terms-text--section .sparky-c-text-passage a:hover {
	color: rgb(32, 110, 246);
}

.legacy-footer__terms-text--section .sparky-l-linelength-container {
	max-width: none;
}