/* ==========================================================================
   Footer — mobile-first
   Figma: 682-7857 (mobile) · 682-7674 (tablet) · 682-7555 (desktop)
   ========================================================================== */

/*
  Design tokens
  ─────────────────────────────────────────────────
  Text / links        var(--e-global-color-heading) (#343333 fallback)
  Hover               var(--e-global-color-dark-navy) (#2d3d4a fallback)
  Social bg           color-mix(in srgb, var(--e-global-color-slate) 90%, transparent)
  Border outer        #e5e7eb
  Border inner        color-mix(in srgb, var(--e-global-color-slate) 20%, transparent)
  Copyright           #a1a1a1
  Background          linear-gradient(rgba(204,204,204,0.2),rgba(204,204,204,0.2)), #fff
*/

/* ── Footer shell ──────────────────────────────────────────────────────── */

.jl-footer {
	background: linear-gradient(rgba(204, 204, 204, 0.2), rgba(204, 204, 204, 0.2)), #fff;
	color: var(--e-global-color-heading, #343333);
	font-family: 'Gotham Office', sans-serif;
	border-top: 1px solid #e5e7eb;
}

/* ── Inner container ───────────────────────────────────────────────────── */

.jl-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding: 4rem 1.5rem 1.5rem;  /* bottom 1.5rem = 24px — Figma outer gap-[24px] */
	max-width: 1400px;
	margin-inline: auto;
}

/* ── Brand column — mobile: centered ──────────────────────────────────── */

.jl-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;            /* 24px — Figma gap-[24px] */
	text-align: center;
}

.jl-footer__logo-link {
	display: inline-block;
}

.jl-footer__logo-link img {
	display: block;
	height: auto;
}

/* Mobile/tablet: show horizontal, hide square */
.jl-footer__logo-link--horizontal { display: inline-block; }
.jl-footer__logo-link--horizontal img { width: 203px; }
.jl-footer__logo-link--square { display: none; }

.jl-footer__tagline {
	font-size: 0.875rem;        /* 14px */
	line-height: 1.625;         /* 22.75px / 14px */
	letter-spacing: -0.0107em;  /* -0.15px */
	color: var(--e-global-color-heading, #343333);
	margin: 0;
	max-width: 16rem;           /* ~226px */
}

/* ── Social icons ──────────────────────────────────────────────────────── */

.jl-footer__social {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.jl-footer .jl-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--e-global-color-slate, #4b667c) 90%, transparent);
	color: #fff !important;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.jl-footer .jl-footer__social a:hover,
.jl-footer .jl-footer__social a:focus {
	background-color: var(--e-global-color-slate, #4b667c);
	color: #fff !important;
}

/* ── Nav columns — hidden on mobile ───────────────────────────────────── */

.jl-footer__col:not(.jl-footer__col--contact) {
	display: none;
}

/* ── Scoped link reset (beats Hello Elementor + Elementor kit globals) ─── */

.jl-footer a {
	color: var(--e-global-color-heading, #343333) !important;
	text-decoration: none !important;
}

.jl-footer a:hover,
.jl-footer a:focus {
	color: var(--e-global-color-dark-navy, #2d3d4a) !important;
}

/* Contact Us button — more specific than .jl-footer a to win !important battle */
.jl-footer a.jl-footer__contact-cta,
.jl-footer a.jl-footer__contact-cta:hover,
.jl-footer a.jl-footer__contact-cta:focus {
	color: #fff !important;
}

/* ── Hide specific Connect With Us items ───────────────────────────────── */

.jl-footer__menu li:has(a[href*="/contact/"]),
.jl-footer__menu li:has(a[href*="/news/"]) {
	display: none;
}

/* ── Nav menus (Services / Company) ───────────────────────────────────── */

.jl-footer__menu,
.jl-footer__menu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.jl-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.jl-footer__menu li a {
	font-size: 1.125rem;       /* 18px */
	line-height: 1.333;
	letter-spacing: 0.25px;
	transition: color 0.2s ease;
}

/* ── Column headings ───────────────────────────────────────────────────── */

.jl-footer__col-heading {
	font-family: 'Gotham Office', sans-serif;
	font-size: 1.125rem;        /* 18px mobile */
	font-weight: 400;
	color: var(--e-global-color-slate, #4b667c);
	text-align: center;
	letter-spacing: -0.0244em;  /* -0.44px */
	line-height: 1.556;         /* 28/18 */
	margin: 0 0 1.5rem;
}

/* ── Contact column — mobile: centered ────────────────────────────────── */

.jl-footer__col--contact {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jl-footer__contact-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;            /* 24px — Figma gap-[24px] between contact items */
	width: 100%;
	max-width: 272px;
}

.jl-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--e-global-color-heading, #343333);
	font-size: 0.875rem;        /* 14px mobile */
	line-height: 1.43;
	letter-spacing: -0.0107em;
}

.jl-footer__contact-list svg {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--e-global-color-slate, #4b667c);
}

.jl-footer__contact-list a {
	color: var(--e-global-color-heading, #343333);
	text-decoration: none;
	transition: color 0.2s ease;
}

.jl-footer__contact-list a:hover,
.jl-footer__contact-list a:focus {
	color: var(--e-global-color-dark-navy, #2d3d4a);
}

/* Contact Us button — full-width on mobile */
.jl-footer__contact-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 272px;
	height: 48px;
	padding: 0 1.5rem;
	background-color: var(--e-global-color-slate, #4b667c);
	color: #fff;
	text-decoration: none;
	font-family: 'Gotham Office', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.0195em;
	line-height: 1.5;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

.jl-footer__contact-cta:hover,
.jl-footer__contact-cta:focus,
.jl-footer__contact-cta:active {
	background-color: var(--e-global-color-dark-navy, #2d3d4a);
	color: #fff;
}

/* ── Bottom bar ────────────────────────────────────────────────────────── */

.jl-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 0 1.5rem 1.5rem;  /* no top padding — inner bottom already provides 24px gap */
	max-width: 1400px;
	margin-inline: auto;
	width: 100%;
}

.jl-footer__legal-links {
	display: flex;
	flex-direction: column;    /* stacked on mobile */
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jl-footer__legal-links a {
	color: var(--e-global-color-slate, #4b667c) !important;
	text-decoration: none;
	font-size: 0.875rem;        /* 14px */
	line-height: 1.43;
	letter-spacing: 0.4px;
	transition: color 0.2s ease;
}

.jl-footer__legal-links a:hover,
.jl-footer__legal-links a:focus {
	color: var(--e-global-color-dark-navy, #2d3d4a);
}

.jl-footer__copyright {
	font-size: 0.875rem;        /* 14px */
	color: #a1a1a1;
	letter-spacing: 0.4px;
	line-height: 1.43;
	margin: 0;
	text-align: center;
	width: 100%;
}

/* ==========================================================================
   Tablet (768px+)
   ========================================================================== */

@media (min-width: 768px) {

	.jl-footer__inner {
		flex-direction: row;
		align-items: flex-start;
		padding: 2.5rem 3.5rem 1.5rem;  /* 3.5rem ≈ 57px — Figma tablet outer margin */
	}

	/* Brand: left-aligned, flex 1 */
	.jl-footer__brand {
		flex: 1;
		align-items: flex-start;
		text-align: left;
		min-width: 0;
	}

	/* Tagline: 18px, left */
	.jl-footer__tagline {
		font-size: 1.125rem;       /* 18px */
		line-height: 1.333;        /* 24/18 */
		letter-spacing: 0.0139em;  /* 0.25px */
		max-width: 17rem;
	}

	/* Social: left-aligned */
	.jl-footer__social {
		justify-content: flex-start;
	}

	/* Contact: flex 1, left-aligned */
	.jl-footer__col--contact {
		flex: 1;
		align-items: flex-start;
		min-width: 0;
	}

	/* Heading: 20px, left */
	.jl-footer__col-heading {
		font-size: 1.25rem;        /* 20px */
		letter-spacing: 0.15px;
		line-height: 1.4;          /* 28/20 */
		text-align: left;
		margin-bottom: 1.5rem;     /* 24px — Figma: heading bottom to items top = 24px */
	}

	/* Contact items: 18px, gap 16px */
	.jl-footer__contact-list {
		gap: 1rem;                 /* 16px — Figma gap-[15.998px] at tablet */
	}

	.jl-footer__contact-list li {
		font-size: 1.125rem;       /* 18px */
		line-height: 1.333;
		letter-spacing: 0.0139em;
	}

	/* Button: auto-width */
	.jl-footer__contact-cta {
		width: auto;
		border-radius: 10px;
	}

	/* Bottom bar: top border — 0 top padding, inner bottom padding provides the 24px gap */
	.jl-footer__bottom {
		flex-direction: column;
		padding: 1rem 3.5rem 1.5rem;  /* 1rem ≈ 16px top — Figma 53px bar centers 20px links */
		border-top: 1px solid color-mix(in srgb, var(--e-global-color-slate, #4b667c) 20%, transparent);
	}

	/* Copyright: left-aligned at tablet+ */
	.jl-footer__copyright {
		text-align: left;
		width: auto;
	}

	/* Legal links: horizontal */
	.jl-footer__legal-links {
		flex-direction: row;
		gap: 1.5rem;
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Desktop (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {

	.jl-footer__inner {
		padding: 4rem 1.5rem 2rem;
		gap: 3rem;
	}

	/* Show Services + Company columns */
	.jl-footer__col:not(.jl-footer__col--contact) {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	/* Brand: centered, stacked logo, 12px gap (Figma) */
	.jl-footer__brand {
		align-items: center;
		text-align: center;
		gap: 0.75rem;
	}

	/* Desktop: hide horizontal, show square */
	.jl-footer__logo-link--horizontal { display: none; }
	.jl-footer__logo-link--square { display: inline-block; }
	.jl-footer__logo-link--square img { width: 150px; }

	/* Tagline: 14px, centered */
	.jl-footer__tagline {
		font-size: 0.875rem;       /* 14px */
		line-height: 1.143;        /* 16/14 */
		letter-spacing: 0.0357em;  /* 0.5px */
		text-align: center;
		max-width: 19rem;
	}

	/* Social: centered, 12px gap + extra top margin to match Figma's ~27px text-to-social gap */
	.jl-footer__social {
		justify-content: center;
		gap: 0.75rem;
		margin-top: 1rem;
	}

	/* Nav menu items: 16px gap — Figma gap ~16px */
	.jl-footer__menu {
		gap: 1rem;
	}

	/* Bottom bar: legal left, copyright right */
	.jl-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem 1.5rem;
	}
}