/*
 * Footer layer.
 *
 * ⚠️ READ THIS BEFORE CHANGING THE FOOTER.
 * A footer restyle was shipped on 03 Sep 2026 and REVERTED at Oanh's request:
 * a dark green/champagne gradient that replaced Listeo's footer wholesale and
 * hid one of the two link menus. Do not reintroduce it. The note is in
 * CHANGELOG.md under "03 Sep 2026 correction".
 *
 * This file is a different proposition and is deliberately conservative:
 *
 *   - Listeo's layout, columns, both link menus, the social area and the logo
 *     are all KEPT. Nothing is hidden. The dashboard menu (My Profile / My
 *     Listings / Add Listing) arguably does not belong in a public footer, but
 *     that is a content decision for Oanh in Appearance → Widgets, not
 *     something CSS should quietly do again.
 *   - It is its own file with its own enqueue, so if this is not wanted either,
 *     deleting one line in functions.php removes all of it and nothing else
 *     changes.
 *
 * What it actually fixes: the footer was pure white with a 29px logo, 21px
 * headings and 16px links — it read as an unstyled block rather than the end of
 * a page. It now gets a warm ground, a gold rule, a logo at a size a person can
 * see, and a typographic hierarchy.
 */

#footer {
	position: relative;
	padding-top: 76px;
	background: var(--mr-cream-2);
	color: var(--mr-body);
}

/* A gold hairline where the page ends. Faded at both ends so it reads as a
   rule rather than a border. */
#footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(190, 139, 51, 0) 0%,
		rgba(190, 139, 51, .5) 18%,
		rgba(190, 139, 51, .5) 82%,
		rgba(190, 139, 51, 0) 100%
	);
}

/*
 * The logo, at a size that reads.
 *
 * It was rendering at 29×38. Listeo caps .footer-logo at `max-height: 38px`,
 * which is sized for a wide wordmark — and this logo file is 453×594, i.e.
 * PORTRAIT. A 38px height on a portrait seal leaves 29px of width, which is
 * smaller than the body text beside it.
 *
 * The <img> in the widget also carries width="191" height="59" attributes that
 * do not match the file at all, so both dimensions are reset to auto and the
 * cap is applied to height only.
 */
#footer .footer-logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 92px;
	margin: 0 0 24px;
}

#footer .footer-widget h4 {
	margin: 2px 0 22px;
	font-size: 20px;
	font-weight: 500;
	color: var(--mr-ink);
}

#footer .footer-widget p {
	max-width: 460px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.78;
	color: var(--mr-body);
}

#footer .footer-widget p:last-child {
	margin-bottom: 0;
}

/* Links. The colour change on hover is enough; nothing moves, because a footer
   full of links that shift on hover is noisy. */
#footer .footer-widget li {
	margin-bottom: 4px;
}

#footer .footer-widget li a {
	font-size: 15px;
	color: var(--mr-body);
	transition: color .2s ease;
}

#footer .footer-widget li a:hover,
#footer .footer-widget li a:focus-visible {
	color: var(--mr-gold-deep);
}

/* Listeo draws a chevron before each footer link with a pseudo-element on
   either the <li> or the <a> depending on the widget. Both are covered. */
#footer .footer-widget li::before,
#footer .footer-widget li a::before {
	color: var(--mr-gold);
}

/* The second link menu (#nav_menu-4) ships with no heading of its own, so it
   hangs under "Helpful Links" as an unlabelled second column. Aligning its
   first item with the first menu's is the most CSS can honestly do — the real
   fix is to give that widget a title, or to merge the two menus. */
#footer #nav_menu-4 {
	margin-top: 0;
}

/* ==========================================================================
   Bottom bar
   ========================================================================== */

/*
 * Listeo draws this strip as a rounded grey slab (rgba(0,0,0,.035) with a 5px
 * radius). On white that is invisible; on the warm ground it reads as a dirty
 * panel floating inside the footer. The gold rule replaces it — it separates
 * the two zones without introducing a second shape.
 */
#footer .footer-new-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 56px;
	padding: 24px 0;
	border-top: 1px solid rgba(190, 139, 51, .22);
	border-radius: 0;
	background: transparent;
}

#footer .footer-new-bottom-left {
	font-size: 13px;
	letter-spacing: .01em;
	color: var(--mr-muted);
}

/*
 * The social row.
 *
 * Its wrapper is a block with `text-align: right`, which does nothing once the
 * list itself is a flex container — hence justify-content rather than relying
 * on the inherited alignment.
 *
 * The .footer-new-bottom-right in the selector is not decoration: Listeo sizes
 * these anchors at 25px through `#footer .new-footer-social-icons li a`, the
 * same (1,2,1) this file would otherwise score, and its stylesheet is printed
 * later. Naming the wrapper takes it to (1,3,1). Measured without it: the
 * anchors stayed 25px and display:inline-block, so the circles collapsed onto
 * the glyphs.
 *
 * ⚠️ The same markup appears a second time inside the mobile menu
 * (`#listeo_side_social_icons`), OUTSIDE #footer — every selector here is
 * anchored on #footer so that copy is untouched.
 */
#footer .footer-new-bottom-right .new-footer-social-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .footer-new-bottom-right .new-footer-social-icons li {
	margin: 0;
}

#footer .footer-new-bottom-right .new-footer-social-icons li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border: 1px solid var(--mr-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mr-body);
	font-size: 15px;
	transition:
		color .22s ease,
		border-color .22s ease,
		background-color .22s ease,
		transform .22s var(--mr-ease);
}

#footer .footer-new-bottom-right .new-footer-social-icons li a:hover,
#footer .footer-new-bottom-right .new-footer-social-icons li a:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(190, 139, 51, .45);
	background: var(--mr-gold-tint);
	color: var(--mr-gold-deep);
}

@media (max-width: 767px) {
	#footer {
		padding-top: 52px;
	}

	#footer .footer-widget {
		margin-bottom: 36px;
	}

	#footer .footer-logo {
		max-height: 78px;
	}

	#footer .footer-new-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 12px;
		padding: 22px 0 30px;
	}
}