/**
 * Styles for the [tzumi_site_footer] shortcode.
 *
 * Everything is scoped under .tzumi-site-footer so this can be dropped into
 * an existing Elementor-built page (via the Shortcode widget in the Footer
 * theme template) without leaking into or being overridden by the site's
 * own global styles. Colors and type match the Tzumi brand system (red
 * #D90D1E pulled from the logo; ink #181818; 'Fredoka' for headings,
 * 'Nunito Sans' for body — see fitrx-blocks/includes/assets/site-footer.css
 * on the sibling plugin for the equivalent FitRx version, which uses its
 * own separate palette and 'Anton'/'Manrope').
 *
 * 'Fredoka' and 'Nunito Sans' are expected to already be enqueued site-wide
 * (see tzumi_blocks_enqueue_fonts() in tzumi-blocks.php) — not repeated
 * here.
 *
 * To bold a specific menu item (e.g. "Shop All", "Important Correction
 * Notice"), add "is-strong" in that item's CSS Classes field under
 * Appearance > Menus (enable Screen Options > CSS Classes if it's hidden).
 */

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

/*
 * Hard reset against the site's global Kit/theme CSS. Elementor's Kit
 * writes rules straight onto bare tags (".elementor-kit-XXXX a { ... }"),
 * which ties in specificity with a plain ".tzumi-site-footer x" selector —
 * a tie that's decided by whichever stylesheet happens to load later, which
 * isn't something this plugin controls or can rely on staying the same.
 * !important here is what makes this component's own type/decoration win
 * regardless of load order or whatever the Kit adds in the future, so this
 * is a one-time fix instead of chasing each leaked property as it's noticed
 * on the live site.
 */
.tzumi-site-footer,
.tzumi-site-footer * {
	font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif !important;
	text-decoration: none !important;
}

.tzumi-site-footer {
	--red: #d90d1e;
	--red-hover: #ff3f4e;
	--footer-bg: #181818;
	--footer-text: #f3f2f0;
	--footer-text-soft: #a7a6a4;
	--footer-text-faint: #6e6d6b;
	--footer-border: #2e2e2e;

	background: var(--footer-bg);
	color: var(--footer-text);
	font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.tzumi-site-footer a {
	color: inherit;
}
.tzumi-site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tzumi-site-footer :focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

.tzumi-site-footer .tzumi-footer-main {
	max-width: 1520px;
	margin: 0 auto;
	padding: 52px 20px 8px;
	/* flex, not a fixed grid template: Shop/Help & Info/Resources only render
	   once their nav menu location is assigned (no fallback — see the doc
	   comment at the top of site-footer-helpers.php), so the column count
	   varies while the site owner is still setting locations up one at a
	   time. A fixed grid-template-columns would reserve empty column tracks
	   for whichever locations aren't configured yet; flex-wrap lets however
	   many columns exist lay out on their own and reflow at any width
	   instead of relying on one hand-tuned breakpoint. */
	display: flex;
	flex-wrap: wrap;
	gap: 40px 56px;
}

.tzumi-site-footer .tzumi-footer-brand {
	flex: 0 1 280px;
}

.tzumi-site-footer .tzumi-footer-group {
	/* grow so however many groups are configured share the leftover row
	   width evenly, but cap it — otherwise a single configured group (e.g.
	   only Shop, before the other locations are set up) would stretch to
	   fill almost the entire row on its own. */
	flex: 1 1 220px;
	min-width: 180px;
	max-width: 420px;
}

.tzumi-site-footer .tzumi-footer-logo {
	height: 30px;
	width: auto;
	display: block;
	margin: 0 0 16px;
	filter: brightness(0) invert(1); /* black source logo -> white on dark footer; swap for a real white asset if one becomes available */
}
.tzumi-site-footer .tzumi-footer-brand p {
	color: var(--footer-text-soft);
	font-size: 14.5px;
	max-width: 30ch;
	margin: 0 0 20px;
	line-height: 1.6;
}

.tzumi-site-footer .tzumi-footer-social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.tzumi-site-footer .tzumi-social-btn {
	/* 44x44 is the standard minimum touch-target size (Apple HIG / Google
	   Material both use it) — 38px was under that. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--footer-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--footer-text);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tzumi-site-footer .tzumi-social-btn:hover {
	border-color: var(--red);
	color: var(--red-hover);
	background: rgba(217, 13, 30, 0.08);
}

/* group = one collapsible column below 640px; plain column above it */
.tzumi-site-footer .tzumi-footer-group {
	border-top: 1px solid var(--footer-border);
}
.tzumi-site-footer .tzumi-footer-group:first-of-type {
	border-top: none;
}

.tzumi-site-footer .tzumi-footer-trigger,
.tzumi-site-footer .tzumi-footer-trigger:hover,
.tzumi-site-footer .tzumi-footer-trigger:focus {
	/* !important: the theme's reset.css styles "button:focus, button:hover"
	   (0,2,0) via [type=button], which outranks a plain class selector on
	   this <button type="button">, same class of problem as the Elementor
	   Kit leak above. */
	background-color: transparent !important;
	color: var(--footer-text-soft) !important;
}
.tzumi-site-footer .tzumi-footer-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	padding: 16px 0;
	border: none;
	font-family: inherit;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
}
.tzumi-site-footer .tzumi-chev {
	width: 13px;
	height: 13px;
	color: var(--footer-text-faint);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.tzumi-site-footer .tzumi-footer-trigger[aria-expanded='true'] .tzumi-chev {
	transform: rotate(180deg);
}

.tzumi-site-footer .tzumi-footer-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease, padding 0.3s ease;
}
.tzumi-site-footer .tzumi-footer-trigger[aria-expanded='true'] + .tzumi-footer-panel {
	max-height: 600px;
	padding: 2px 0 20px;
}
.tzumi-site-footer .tzumi-footer-panel a {
	color: var(--footer-text);
	font-size: 14.5px;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.tzumi-site-footer .tzumi-footer-panel a:hover {
	opacity: 1;
	color: var(--red-hover);
}
.tzumi-site-footer .tzumi-footer-panel a.is-strong {
	font-weight: 700;
	opacity: 1;
}

@media (min-width: 641px) {
	.tzumi-site-footer .tzumi-footer-trigger {
		cursor: default;
		pointer-events: none;
		padding: 0 0 16px;
	}
	.tzumi-site-footer .tzumi-chev {
		display: none;
	}
	/* !important: pointer-events:none above only blocks mouse interaction —
	   a keyboard user can still Tab to the trigger and press Enter, which
	   toggles aria-expanded and would otherwise hand control to the
	   ".tzumi-footer-trigger[aria-expanded='true'] + .tzumi-footer-panel"
	   rule below (4 classes' worth of specificity, higher than this media
	   query's plain 2-3), capping the panel back down to 600px and
	   flickering it shut on repeat presses. Desktop must stay authoritative
	   regardless of aria-expanded. */
	.tzumi-site-footer .tzumi-footer-panel,
	.tzumi-site-footer .tzumi-footer-panel.tzumi-two-col {
		max-height: none !important;
		overflow: visible !important;
		padding: 0 0 40px !important;
	}
	.tzumi-site-footer .tzumi-footer-group {
		border-top: none;
	}

	/* column-count only above this breakpoint, where the panel is always
	   fully open and never animates from max-height:0. Mobile browsers
	   (iOS Safari especially) can fail to lay out multi-column content
	   correctly once it's revealed from a max-height:0/overflow:hidden
	   collapsed state — the columns compute against the pre-reveal 0px
	   height and never get invalidated, so the content is technically
	   there but renders with no visible height. Below this breakpoint the
	   two-col panels just fall back to the plain single-column list every
	   other panel already uses, which doesn't hit that bug. */
	.tzumi-site-footer .tzumi-footer-panel.tzumi-two-col {
		display: block;
		column-count: 2;
		column-gap: 24px;
	}
	.tzumi-site-footer .tzumi-footer-panel.tzumi-two-col li {
		break-inside: avoid;
		margin-bottom: 12px;
	}
}

.tzumi-site-footer .tzumi-footer-bottom {
	border-top: 1px solid var(--footer-border);
}
.tzumi-site-footer .tzumi-footer-bottom-inner {
	max-width: 1520px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12.5px;
	/* --footer-text-faint is ~3.4:1 against --footer-bg — fails WCAG AA's
	   4.5:1 for normal text (it only clears the 3:1 large-text/graphics
	   floor). --footer-text-soft (~7.3:1) is what actually passes here. */
	color: var(--footer-text-soft);
}
.tzumi-site-footer .tzumi-footer-legal {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tzumi-site-footer .tzumi-footer-legal a {
	color: var(--footer-text-soft);
}
.tzumi-site-footer .tzumi-footer-legal a:hover {
	color: var(--footer-text);
}
.tzumi-site-footer .tzumi-footer-legal li + li::before {
	content: '|';
	opacity: 0.4;
	margin-right: 8px;
}
.tzumi-site-footer .tzumi-footer-legal li {
	display: inline-flex;
	gap: 8px;
}

@media (max-width: 640px) {
	.tzumi-site-footer .tzumi-footer-main {
		gap: 0;
		padding: 40px 20px 4px;
	}
	.tzumi-site-footer .tzumi-footer-brand,
	.tzumi-site-footer .tzumi-footer-group {
		flex-basis: 100%;
	}
	/* brand isn't a .tzumi-footer-group, so it doesn't get the border-top
	   divider those use between each other — without its own margin it
	   sits flush against the first accordion trigger below it. */
	.tzumi-site-footer .tzumi-footer-brand {
		margin-bottom: 32px;
	}
	/* the 30ch measure on .tzumi-footer-brand p (below) is sized for the
	   ~280px desktop column — narrower than the full-width mobile block
	   this becomes at this breakpoint, so it wraps the tagline tighter
	   than the screen actually needs. */
	.tzumi-site-footer .tzumi-footer-brand p {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tzumi-site-footer .tzumi-chev,
	.tzumi-site-footer .tzumi-footer-panel {
		transition: none;
	}
}