/**
 * Site footer. Markup: template-parts/footer/site-footer.php.
 *
 * Structure: .myshop-footer (full-width warm surface background — the
 * "main footer area") > .myshop-footer__container.myshop-container
 * (centered, capped at the same --layout-max-width every other section
 * uses) > .myshop-footer__main (5-zone grid) + .myshop-footer__bottom
 * (the "bottom footer bar" — dark olive, deliberately still full-bleed
 * even though it's nested inside the centered .myshop-footer__container;
 * see the comment on that rule for how, without any markup change).
 *
 * background-color: var(--color-surface) — the exact same token
 * .myshop-mega-menu uses (assets/css/layouts/navigation.css), reused here
 * rather than inventing a second, similar beige, per an explicit "must
 * visually connect with the mega-menu" request.
 */
.myshop-footer {
	background-color: var(--color-surface);
	color: var(--color-text-muted);
}

.myshop-footer__container {
	/* Bottom padding moved to .myshop-footer__bottom's own
	   padding-block-end below — that bar is now a full-bleed dark
	   background of its own, so its bottom spacing needs to be part of
	   its own box, not the (light-background) container's. */
	padding-block-start: clamp(3.5rem, 6vw, 4.5rem);
}

/*
 * Preferred grid from the brief: brand and contact get a bit more room
 * than the three link columns between them. minmax(0, ...) on every
 * track (not bare fr units) so a long menu item can't force a column
 * wider than its share and blow out the row.
 */
.myshop-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 4vw, 3rem);
}

.myshop-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--myshop-space-sm);
}

/*
 * .myshop-footer__logo-chip (still in the markup, template-parts/footer/
 * site-footer.php) is intentionally unstyled now — it was a CSS-added
 * light backing box, not part of the logo image itself, built when the
 * footer background was dark olive and the logo's dark "ever" wordmark
 * needed a light patch behind it for contrast. Now that the whole main
 * footer area uses the light --color-surface background, the logo sits
 * on a light surface naturally and that box is unnecessary.
 */
.myshop-footer__brand .custom-logo {
	display: block;
	/* Substantially larger — was capped at 36px tall (≈111px wide at this
	   logo's ~3.075:1 aspect ratio). Sized by width now, not height, so it
	   scales down gracefully at narrower desktop widths instead of
	   jumping straight to a fixed size. */
	width: clamp(210px, 14vw, 260px);
	height: auto;
}

.myshop-footer__description {
	max-width: 30ch;
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-text-muted);
}

.myshop-footer__heading {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-heading);
	margin-block-end: var(--myshop-space-sm);
}

.myshop-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.myshop-footer__list a {
	display: inline-block;
	color: rgba(253, 251, 246, 0.75);
	font-size: var(--font-size-sm);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.myshop-footer__list a:hover,
.myshop-footer__list a:focus {
	color: var(--color-accent);
	transform: translateX(2px);
}

.myshop-footer__list a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * Overrides the base .myshop-footer__list a rule above — that rule's
 * light rgba(255,255,255) color is correct for the legal links in
 * .myshop-footer__bottom (still dark olive), but wrong for the Support/
 * Information/Account columns, which now sit on the light main-footer
 * background. Scoped to .myshop-footer__main specifically (rather than
 * flipping the base rule and overriding it for .myshop-footer__bottom
 * instead) so the dark-background bottom bar's links are untouched by
 * this change.
 */
.myshop-footer__main .myshop-footer__list a {
	color: var(--color-text-muted);
}

.myshop-footer__main .myshop-footer__list a:hover,
.myshop-footer__main .myshop-footer__list a:focus {
	color: var(--color-primary);
}

/*
 * border-top on rgba white, not var(--color-border) — that token is a
 * light-background beige, invisible against this dark olive panel; a
 * translucent white line is the equivalent "very subtle divider" for a
 * dark surface. On top of the color change itself already separating the
 * two areas, this stays as the "very subtle divider" the brief allows.
 *
 * Full-bleed background without any markup change: .myshop-footer__bottom
 * is still a normal child of the centered .myshop-footer__container (its
 * *vertical* position in the flow is unaffected), but width: 100vw +
 * margin-inline: calc(50% - 50vw) is the standard "breakout" technique —
 * it stretches the element horizontally to the full viewport regardless
 * of its parent's constrained width. padding-inline is no longer load-bearing
 * for alignment now that the bar holds only the centered copyright (kept
 * anyway as a sane minimum inset so the text never touches the viewport
 * edge on very narrow screens).
 *
 * Only the copyright remains here now — the legal links moved into the
 * Information column above, so this is a single centered line rather
 * than a two-item space-between row; the flex-direction: row/column
 * split that used to exist for the two-item case is gone since a single
 * centered child doesn't need it.
 */
.myshop-footer__bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-inline: var(--layout-gutter);
	padding-block: clamp(18px, 2vw, 24px);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block-start: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background-color: var(--color-primary);
	color: rgba(253, 251, 246, 0.75);
	font-size: var(--font-size-sm);
	box-sizing: border-box;
}

.myshop-footer__copyright {
	margin: 0;
	color: rgba(253, 251, 246, 0.6);
}

/* Spacing between the two stacked <ul>s in the Information column
   (footer-primary menu, then footer-legal) — .myshop-footer__list's own
   gap only applies between <li>s within one list, not between two
   separate sibling lists. Same 10px rhythm as that internal item gap. */
.myshop-footer__col .myshop-footer__list + .myshop-footer__list {
	margin-block-start: 10px;
}

/* Tablet: five columns are too cramped by then — two balanced columns,
   brand spanning the full width above them. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.myshop-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.myshop-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Mobile: simple single-column stack, no accordion — nothing here relies
   on JS, so there's nothing new to add for this breakpoint. */
@media (max-width: 47.99rem) {
	.myshop-footer__main {
		grid-template-columns: 1fr;
	}

	.myshop-footer__brand {
		align-items: flex-start;
	}
}