/*
 * tf-footer.css — shared site-wide footer styles for the legacy stacks.
 *
 * Consumers:
 *   - inc/templates/footer.inc                          (PHP/Vue 2, default footer for all legacy pages)
 *   - apps/tfs-nuxt/components/tf/footer/all.vue        (Nuxt 2 default footer)
 *
 * Source of truth: apps/tfs-nuxt4/app/components/footer/AppFooter.vue
 *
 * The Nuxt 2 stack keeps its own mirror at apps/tfs-nuxt/assets/tf-footer.css
 * because Nuxt 2's dev server doesn't serve files from /inc/. Keep the two
 * copies in sync if you change the design — they're literally the same CSS.
 */

.tf-footer {
	--tf-footer-bg: #1c152c;             /* --ui-surface-inverse → --color-deep-purple-800 */
	--tf-footer-text: #f6f6f6;           /* --ui-inverse-on-surface → --color-grey-50 */
	--tf-footer-heading: #c499df;        /* --ui-inverse-primary → --color-electric-purple-200 */
	--tf-footer-divider: #ddd9e6;        /* --ui-outline-variant → --color-purple-grey-200 */
	--tf-footer-cta: #6c00b0;            /* --color-electric-purple-500 */
	--tf-footer-cta-hover: #56008d;      /* --color-electric-purple-600 */
	--tf-footer-input-bg: #ffffff;
	--tf-footer-input-text: #202020;
	--tf-footer-input-placeholder: #616161;
	/* Newsletter signup success/error flash (matches --ui-container-success
	   / --ui-container-error from the Nuxt 4 design system). */
	--tf-footer-status-success-bg: #ddedd2;     /* --color-green-100 */
	--tf-footer-status-success-text: #336311;   /* --color-green-700 */
	--tf-footer-status-error-bg: #f9e5ec;       /* --color-cranberry-50 */
	--tf-footer-status-error-text: #760025;     /* --color-cranberry-700 */

	width: 100%;
	padding: 32px 0;
	background-color: var(--tf-footer-bg);
	color: var(--tf-footer-text);
	font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.tf-footer { padding: 48px 0; }
}

.tf-footer * { box-sizing: border-box; }
.tf-footer a { color: inherit; text-decoration: none; }
.tf-footer a:hover { color: inherit; }
.tf-footer img { display: block; max-width: 100%; height: auto; }

.tf-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 768px) {
	.tf-footer__inner { gap: 32px; }
}

/* ---- Top: logo + email signup form ---- */
.tf-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
@media (min-width: 768px) {
	.tf-footer__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.tf-footer__logo {
	display: inline-flex;
	flex-shrink: 0;
}
/* Use CSS filter to invert the standard black wordmark for the dark
   footer surface — mirrors Nuxt 4's <TrueFireLogo invert /> prop. */
.tf-footer__logo img {
	height: 40px;
	width: auto;
	max-width: 170px;
	filter: invert(1);
}

.tf-footer__form {
	display: flex;
	flex-direction: row;
	gap: 8px;
	width: 100%;
}
@media (min-width: 768px) {
	.tf-footer__form { width: auto; }
}

.tf-footer__form-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
@media (min-width: 768px) {
	.tf-footer__form-field { flex: 0 0 384px; width: 384px; }
}

.tf-footer__form-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--tf-footer-input-placeholder);
	pointer-events: none;
	line-height: 1;
}

.tf-footer__form-input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 4px 16px 4px 44px;
	background-color: var(--tf-footer-input-bg);
	color: var(--tf-footer-input-text);
	border: 0;
	border-radius: 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	outline: none;
	appearance: none;
	box-shadow: none;
}
.tf-footer__form-input::placeholder {
	color: var(--tf-footer-input-placeholder);
	font-weight: 400;
}
.tf-footer__form-input:focus { outline: 2px solid var(--tf-footer-cta); outline-offset: 2px; }

.tf-footer__form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 14px 16px;
	background-color: var(--tf-footer-cta);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	transition: background-color 150ms ease;
	white-space: nowrap;
}
.tf-footer__form-submit:hover { background-color: var(--tf-footer-cta-hover); color: #fff; }
.tf-footer__form-submit:disabled { opacity: 0.6; cursor: default; }

/* Success/error overlay sits on top of the input area (which is
   position: relative via .tf-footer__form-field) after a HubSpot
   submission so we can flash a status message without resizing the
   form. The Vue 2 wrapper toggles --success / --error and fades the
   overlay out after a few seconds. */
.tf-footer__form-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 4px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.tf-footer__form-status--success {
	background-color: var(--tf-footer-status-success-bg);
	color: var(--tf-footer-status-success-text);
}
.tf-footer__form-status--error {
	background-color: var(--tf-footer-status-error-bg);
	color: var(--tf-footer-status-error-text);
}
.tf-footer__form-status-enter-from,
.tf-footer__form-status-leave-to { opacity: 0; }

/* ---- Divider ---- */
.tf-footer__divider {
	height: 1px;
	width: 100%;
	background-color: var(--tf-footer-divider);
	border: 0;
	margin: 0;
}

/* ---- Link grid ---- */
.tf-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
@media (min-width: 768px) {
	.tf-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tf-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tf-footer__heading {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--tf-footer-heading);
}

.tf-footer__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-footer__link {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tf-footer-text);
}
.tf-footer__link:hover { text-decoration: underline; }

.tf-footer__socials {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.tf-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--tf-footer-text);
	font-size: 24px;
	line-height: 1;
	transition: opacity 150ms ease;
}
.tf-footer__social:hover { opacity: 0.8; color: var(--tf-footer-text); }
.tf-footer__social i { font-size: 24px; line-height: 1; }
.tf-footer__social svg { display: block; width: 24px; height: 24px; }

/* ---- App store buttons (inline SVGs from Nuxt 4 sub-components) ---- */
.tf-footer__apps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.tf-footer__app-btn {
	display: inline-flex;
	transition: opacity 150ms ease;
}
.tf-footer__app-btn:hover { opacity: 0.85; }
.tf-footer__app-btn svg { display: block; height: 40px; width: auto; }

/* ---- Bottom strip: copyright + legal links ---- */
.tf-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
@media (min-width: 1024px) {
	.tf-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.tf-footer__copy {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--tf-footer-text);
}

.tf-footer__legal {
	display: flex;
	flex-direction: row;
	gap: 32px;
}

.tf-footer__legal-link,
.tf-footer__cookies-btn {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tf-footer-text);
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}
.tf-footer__legal-link:hover,
.tf-footer__cookies-btn:hover { text-decoration: underline; color: var(--tf-footer-text); }

/* Hide the global footer on player pages. The legacy course player at
   inc/views/player/index.inc already has its own inline rule for the old
   .newFooterContainer selector, but the new footer uses #newFooter, so that
   rule no longer matches; this also covers the jam-pack, multi-track, and
   new course (.tf-player-root) players which don't have an inline override.
   Pairs with the html-bg exclusion in tf-header.css for the same set of
   templates. */
body:has(.coursePlayerTemplate, .jamPlayer, .tf-player-root) #newFooter {
	display: none;
}