/**
 * Header and footer of the redesign, after the prototype's Header.tsx and
 * Footer.tsx (raskin-prototypes/sba3).
 *
 * The markup is the child theme's sections/header.php and sections/footer.php,
 * the dynamic parts come from includes/raskin/header-footer.php and the
 * header's behavior from assets/js/header.js. This file carries the look,
 * driven by the --sba- tokens. See docs/header-footer.md.
 */

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

/* Submenus and the mobile panel enter with the sba-fade-up keyframes from
   assets/css/motion.css, which this stylesheet depends on. */

/* The prototype header is fixed; sticky gives the same result while keeping
   the header in the document flow, so no page needs a top offset for it. */
.sba-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgb(255 255 255 / 0.95);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid var(--sba-border);
	font-family: var(--sba-font-sans);
}

body.admin-bar .sba-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .sba-header {
		top: 46px;
	}
}

/* A link to an anchor scrolls there, as in the prototype (`scroll-behavior:
   smooth` in index.css), and stops below the header instead of under it: the
   padding is the header's height with its border, plus the admin bar's when
   there is one (core sets the property to the bar's height on `html`, which
   `:root` outranks). An anchor that wants air above it adds its own
   `scroll-margin-top`. */
:root {
	--sba-header-height: 65px;
	scroll-padding-top: calc(var(--sba-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

@media (min-width: 1025px) {
	:root {
		--sba-header-height: 81px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/* MyListing hides the admin bar below 1201px (max-width-1200.css) and only
   makes room for it above (min-width-1201.css); it also drops core's own
   margin via add_theme_support( 'admin-bar' ). Keep the bar at every width
   and move the whole page down by its height, not just the header. */
@media (max-width: 1200px) {
	#wpadminbar {
		display: block !important;
	}

	html body.admin-bar {
		margin-top: 32px !important;
	}
}

@media (max-width: 782px) {
	html body.admin-bar {
		margin-top: 46px !important;
	}
}

/* Core lets the bar scroll away below 600px; the sticky header is offset by
   its height, so it stays fixed here too. */
@media (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
}

/* One row: logo | navigation | actions, like the prototype's justify-between
   row inside `container mx-auto px-4`. The row is the containing block of
   the mobile panel. */
.sba-header-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--sba-container-max);
	min-height: 64px;
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 1025px) {
	.sba-header-inner {
		min-height: 80px;
	}
}

/* The explore pages with side panels — Directory, Jobs, Calendar, Search
   results — run edge to edge from 1200px, where MyListing lays them out as
   a 400px filter panel beside the results, each scrolling on its own. The
   row follows them: no 1400px limit, the logo at 30px like the panel's
   title (20px of panel padding plus 10px), and the account icon's glyph at
   the results' right edge (15px of padding plus 10px, minus the icon's own
   8px). The footer is left out there, because the page never scrolls to it;
   below 1200px MyListing's explore is one long page and both stay as on any
   other page. The news archive uses MyListing's no-map template, a plain
   list, and is treated as a regular page. The classes are MyListing's own,
   printed with the explore container (templates/explore/alternate.php). */
@media (min-width: 1200px) {
	body:has(.cts-explore:not(.no-map-tmpl)) .sba-header-inner {
		max-width: none;
		padding-right: 17px;
		padding-left: 30px;
	}

	body:has(.cts-explore:not(.no-map-tmpl)) .sba-footer {
		display: none;
	}
}

.sba-header a {
	text-decoration: none;
}

/* ---- Logo --------------------------------------------------------------- */

.sba-header-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.sba-header-logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: none;
}

@media (min-width: 1025px) {
	.sba-header-logo img {
		height: 48px;
	}
}

/* ---- Desktop navigation ------------------------------------------------- */

/* The navigation takes the space between logo and actions and centers its
   list there; the list itself is only as wide as its items. */
.sba-header-nav {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.sba-nav,
.sba-nav-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sba-nav {
	display: flex;
	align-items: center;
}

.sba-nav > li {
	position: relative;
}

.sba-nav a {
	display: flex;
	align-items: center;
}

/* One padding for every state, and only the color transitions. */
.sba-nav > li > a {
	padding: 8px 16px;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	transition: color var(--sba-duration-hover) ease;
}

.sba-nav > li > a:hover,
.sba-nav > li > a:focus,
.sba-nav > li.is-open > a,
.sba-nav > li.current-menu-item > a,
.sba-nav > li.current-menu-ancestor > a {
	color: var(--sba-red-dark);
}

/* Submenu indicator: Lucide ChevronDown, placed by header-footer.php inside
   the link of a top-level item that has entries. */
.sba-nav-chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/chevron-down.svg") center / contain no-repeat;
	mask: url("../icons/lucide/chevron-down.svg") center / contain no-repeat;
	transition: transform var(--sba-duration-hover) ease;
}

/* Dropdown panel, entering with the prototype's fade-up. It opens on hover,
   on keyboard focus inside the item, and on the first touch (header.js sets
   is-open). As wide as its longest entry, at least 220px. */
.sba-nav-sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	width: max-content;
	min-width: 220px;
	padding: 8px 0;
	background: var(--sba-surface);
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	animation: sba-fade-up var(--sba-duration-fade-up) ease-out;
}

.sba-nav > li:hover > .sba-nav-sub,
.sba-nav > li:focus-within > .sba-nav-sub,
.sba-nav > li.is-open > .sba-nav-sub {
	display: block;
}

.sba-nav-sub a {
	padding: 8px 16px;
	color: var(--sba-slate);
	background-color: transparent;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	transition: color var(--sba-duration-hover) ease, background-color var(--sba-duration-hover) ease;
}

.sba-nav-sub a:hover,
.sba-nav-sub a:focus,
.sba-nav-sub .current-menu-item > a {
	color: var(--sba-charcoal);
	background-color: var(--sba-accent);
}

/* ---- Actions: directory search, cart, account, toggle ------------------- */

.sba-header-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.sba-header-account {
	display: inline-flex;
	align-items: center;
	padding: 8px;
	color: var(--sba-slate);
	transition: color var(--sba-duration-hover) ease;
}

.sba-header-account:hover,
.sba-header-account:focus {
	color: var(--sba-charcoal);
}

.sba-header-account .mi {
	font-size: 20px;
}

/* The cart stays rendered for WooCommerce's cart fragments and is hidden
   while empty. :has() is live, so it reappears as soon as the fragments
   remove .counter-hidden. */
.sba-header-cart:has(.header-cart-counter.counter-hidden) {
	display: none;
}

.sba-header-cart .view-cart-contents {
	position: relative;
	display: inline-flex;
	padding: 8px;
	color: var(--sba-slate);
}

.sba-header-cart .view-cart-contents .mi {
	font-size: 20px;
}

/* Toggle: Lucide Menu and X at 24px in the foreground color, p-2. Only below
   1025px. Qualified with the header's class: the Global Kit styles `button`
   as `.elementor-kit-N button`, which outranks a lone class. */
.sba-header .sba-header-toggle,
.sba-header .sba-header-toggle:hover,
.sba-header .sba-header-toggle:focus {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sba-charcoal);
	line-height: 0;
	cursor: pointer;
}

.sba-header .sba-header-toggle:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-header-toggle-icon {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/menu.svg") center / contain no-repeat;
	mask: url("../icons/lucide/menu.svg") center / contain no-repeat;
}

.sba-header.is-open .sba-header-toggle-icon {
	-webkit-mask-image: url("../icons/lucide/x.svg");
	mask-image: url("../icons/lucide/x.svg");
}

/* MyListing's quick search is styled for its old dark, transparent header
   (white text, no background, no border). Restyle it as the prototype's input
   field — inline in the header on desktop, and in the mobile search modal. */
.sba-header-search {
	width: 280px;
	margin-right: 12px;
}

:is(.sba-header-search, #quicksearch-mobile-modal) .quick-search-instance,
:is(.sba-header-search, #quicksearch-mobile-modal) form,
:is(.sba-header-search, #quicksearch-mobile-modal) .header-search {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

:is(.sba-header-search, #quicksearch-mobile-modal) .header-search > .mi.search {
	position: absolute;
	left: 12px;
	top: 20px;
	z-index: 1;
	transform: translateY(-50%);
	color: var(--sba-slate);
	font-size: 16px;
	pointer-events: none;
}

:is(.sba-header-search, #quicksearch-mobile-modal) .header-search input[type="search"] {
	position: static;
	float: none;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px 0 36px;
	color: var(--sba-charcoal);
	background: var(--sba-surface);
	border: 1px solid var(--sba-input);
	border-radius: var(--sba-radius-md);
	box-shadow: none;
	font-size: 14px;
}

:is(.sba-header-search, #quicksearch-mobile-modal) .header-search input[type="search"]::placeholder {
	color: var(--sba-slate);
	opacity: 1;
}

:is(.sba-header-search, #quicksearch-mobile-modal) .header-search input[type="search"]:focus {
	outline: 2px solid var(--sba-ring);
	outline-offset: 1px;
}

/* MyListing draws a red bar across the top of the results while the field is
   focused (.is-focused .instant-results:before); left out entirely. */
:is(.sba-header-search, #quicksearch-mobile-modal) .instant-results::before {
	display: none;
}

.sba-header-search .instant-results {
	top: calc(100% + 8px);
	left: 0;
	right: auto;
	width: 360px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Search icon that opens the modal on smaller screens, as on production. */
.sba-header-search-trigger {
	display: none;
	align-items: center;
	padding: 8px;
	color: var(--sba-charcoal);
}

.sba-header-search-trigger .mi {
	font-size: 20px;
}

/* Mobile search modal: a sheet at the top of the screen. MyListing's header
   stylesheet, which used to style it, only loads with MyListing's header. */
/* .modal-27 is a centering flex container; dock the sheet to the top at
   full width instead of letting it collapse to its content. */
#quicksearch-mobile-modal.sba-search-modal {
	align-items: flex-start;
	justify-content: flex-start;
}

#quicksearch-mobile-modal .modal-dialog {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* MyListing hides .header-search on small screens (it belongs to the desktop
   header there) and floats it; its overrides for the modal lived in
   header.css. Without them the form collapsed to 0px around its content. */
#quicksearch-mobile-modal .header-search {
	display: block;
	float: none;
}

#quicksearch-mobile-modal .quick-search-instance,
#quicksearch-mobile-modal form {
	display: flow-root;
}

#quicksearch-mobile-modal .modal-content {
	position: relative;
	padding: 16px 56px 16px 16px;
	background: var(--sba-surface);
	border: 0;
	border-radius: 0;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
	animation: sba-fade-up var(--sba-duration-fade-up) ease-out;
}

#quicksearch-mobile-modal .close {
	position: absolute;
	top: 16px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: var(--sba-charcoal);
	background: transparent;
	border: 0;
	opacity: 1;
	text-shadow: none;
}

#quicksearch-mobile-modal .close .mi {
	font-size: 24px;
}

#quicksearch-mobile-modal .instant-results {
	position: static;
	width: auto;
	margin-top: 12px;
	border: 0;
	box-shadow: none;
}

/* ---- Mobile, after the prototype's Header.tsx --------------------------- */

@media (max-width: 1024px) {
	.sba-header-search {
		display: none;
	}

	.sba-header-search-trigger {
		display: inline-flex;
	}

	/* The toggle's glyph sits at the content's edge: its 8px of padding
	   reach into the gutter. */
	.sba-header .sba-header-toggle,
	.sba-header .sba-header-toggle:hover,
	.sba-header .sba-header-toggle:focus {
		display: inline-flex;
		margin-right: -8px;
	}

	/* The logo takes the free space, pushing actions and toggle to the right. */
	.sba-header-logo {
		flex: 1 1 auto;
	}

	/* Panel: a sheet under the row, over the page, py-4 below a top border,
	   entering with fade-up. The row is 64px tall, so the panel's border sits
	   where the header's does. */
	.sba-header-nav {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - 64px);
		padding: 16px;
		background: var(--sba-surface);
		border-top: 1px solid var(--sba-border);
		overflow-y: auto;
	}

	.sba-header.is-open .sba-header-nav {
		display: block;
		animation: sba-fade-up var(--sba-duration-fade-up) ease-out;
	}

	.sba-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	/* Top-level rows, divided by a half-strength border. */
	.sba-nav > li {
		border-bottom: 1px solid color-mix(in srgb, var(--sba-border) 50%, transparent);
	}

	.sba-nav > li:last-child {
		border-bottom: 0;
	}

	/* Row: px-4 py-3, foreground text, accent background on hover, rounded. */
	.sba-nav > li > a,
	.sba-nav > li > a:hover,
	.sba-nav > li > a:focus,
	.sba-nav > li.is-open > a,
	.sba-nav > li.current-menu-item > a,
	.sba-nav > li.current-menu-ancestor > a {
		justify-content: space-between;
		padding: 12px 16px;
		color: var(--sba-charcoal);
		background-color: transparent;
		border-radius: var(--sba-radius);
		font-size: 16px;
		font-weight: 400;
		transition: background-color var(--sba-duration-hover) ease;
	}

	.sba-nav > li > a:hover,
	.sba-nav > li > a:focus {
		background-color: var(--sba-accent);
	}

	/* An open row keeps the plain look; its chevron turns. */
	.sba-nav > li.is-open > a {
		background-color: transparent;
	}

	.sba-nav > li.is-open > a .sba-nav-chevron {
		transform: rotate(180deg);
	}

	/* Entries: pb-2, links px-8 py-2, small muted text. A row opens only
	   through its link (header.js), not on hover or focus. */
	.sba-nav-sub,
	.sba-nav > li:hover > .sba-nav-sub,
	.sba-nav > li:focus-within > .sba-nav-sub {
		display: none;
		position: static;
		width: auto;
		min-width: 0;
		padding: 0 0 8px;
		background: transparent;
		border: 0;
		box-shadow: none;
		animation: none;
	}

	.sba-nav > li.is-open > .sba-nav-sub {
		display: block;
	}

	.sba-nav-sub a {
		padding: 8px 32px;
		border-radius: var(--sba-radius);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-nav-sub,
	.sba-header.is-open .sba-header-nav,
	#quicksearch-mobile-modal .modal-content {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.sba-footer {
	background: var(--sba-footer-bg);
	color: var(--sba-footer-text);
	font-family: var(--sba-font-sans);
}

.sba-footer a {
	color: var(--sba-footer-text);
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-footer a:hover,
.sba-footer a:focus {
	color: var(--sba-footer-text-bright);
}

.sba-footer h3,
.sba-footer h4 {
	color: var(--sba-footer-text-bright);
	font-weight: 700;
}

/* Paragraphs take the footer's text color: MyListing's frontend.css and the
   child's style.css color every p near-black, which on the footer surface
   left the newsletter line, the brand text and the copyright unreadable. */
.sba-footer p {
	margin: 0;
	color: inherit;
}

.sba-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The prototype's footer is `container mx-auto px-4`: the kit's 1400px with
   16px of padding at every width. Each band has its own row so the borders
   between them run the full width. */
.sba-footer-inner {
	max-width: var(--sba-container-max);
	margin: 0 auto;
	padding-right: 16px;
	padding-left: 16px;
}

/* Body copy in the footer is 16px/24px as in the prototype; MyListing's body
   is 14px. */
.sba-footer-newsletter-text p,
.sba-footer-brand p {
	font-size: 16px;
	line-height: 24px;
}

/* ---- Newsletter band -------------------------------------------------------
 * Footer.tsx: `flex flex-col lg:flex-row lg:items-center lg:justify-between
 * gap-8`. Below 1024px text and entry form stack, the form under the text
 * and at the left.
 * ------------------------------------------------------------------------ */
.sba-footer-newsletter {
	border-bottom: 1px solid var(--sba-footer-surface);
}

.sba-footer-newsletter > .sba-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (min-width: 1024px) {
	.sba-footer-newsletter > .sba-footer-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.sba-footer-newsletter h3 {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 32px;
}

/* ---- Newsletter entry form --------------------------------------------------
 * Footer.tsx: `flex gap-3 max-w-md w-full lg:w-auto`, an Input and a Button;
 * the markup comes from raskin_footer_newsletter_form() in
 * includes/raskin/header-footer.php. The pair follows the guide's Buttons
 * page: field and button 40px tall, the field with 12px of side padding, the
 * button with 16px, --sba-radius-md corners, a 12px gap between them.
 *
 * While the band stacks, the form's slot is the full row so the form can
 * take its 448px; in the row it shrinks to the form, whose field then keeps
 * its intrinsic width, as the prototype's does.
 *
 * Field and button are qualified with the form's class: the Global Kit
 * styles `button` and `input` as `.elementor-kit-N button`, one class and
 * one element, which outranks a lone class and painted the button brand red.
 * ------------------------------------------------------------------------ */
.sba-footer-newsletter-entry {
	width: 100%;
}

@media (min-width: 1024px) {
	.sba-footer-newsletter-entry {
		flex: 0 1 auto;
		width: auto;
	}
}

.sba-footer-newsletter-form {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 448px;
	margin: 0;
}

/* The field takes the footer surface for fill and border, bright text and the
   footer's muted placeholder. 16px text below 768px, 14px from there, as the
   prototype's Input (`text-base md:text-sm`). Focus is the ring. */
.sba-footer-newsletter-form .sba-footer-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--sba-footer-surface);
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-footer-surface);
	box-shadow: none;
	color: var(--sba-footer-text-bright);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.sba-footer-newsletter-form .sba-footer-newsletter-input::placeholder {
	color: var(--sba-footer-text);
	opacity: 1;
}

.sba-footer-newsletter-form .sba-footer-newsletter-input:focus {
	border-color: var(--sba-footer-surface);
	background-color: var(--sba-footer-surface);
	box-shadow: none;
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.sba-footer-newsletter-form .sba-footer-newsletter-input {
		font-size: 14px;
		line-height: 20px;
	}
}

/* Primary button: normal-size white text sits on red-dark, per the color
   guide. The arrow follows the label and moves 4px on hover. */
.sba-footer-newsletter-form .sba-footer-newsletter-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-red-dark);
	box-shadow: none;
	color: var(--sba-red-contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--sba-duration-hover) ease;
}

.sba-footer-newsletter-form .sba-footer-newsletter-submit:hover,
.sba-footer-newsletter-form .sba-footer-newsletter-submit:focus {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

.sba-footer-newsletter-form .sba-footer-newsletter-submit:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-footer-newsletter-form .sba-footer-newsletter-submit::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-footer-newsletter-form .sba-footer-newsletter-submit:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.sba-footer-newsletter-form .sba-footer-newsletter-submit:hover::after {
		transform: none;
	}
}

/* ---- Main grid -------------------------------------------------------------
 * Footer.tsx: `grid md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12`, the brand
 * column `lg:col-span-2`: one column, two from 768px, five from 1024px.
 * ------------------------------------------------------------------------ */
.sba-footer-main > .sba-footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (min-width: 768px) {
	.sba-footer-main > .sba-footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-footer-main > .sba-footer-inner {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 48px;
	}

	.sba-footer-brand {
		grid-column: span 2;
	}
}

.sba-footer-brand a {
	display: block;
	line-height: 0;
}

.sba-footer-brand img {
	display: block;
	height: 3.7rem;
	width: auto;
	max-width: none;
	margin-bottom: 24px;
}

.sba-footer-brand p {
	max-width: 24rem;
	margin-bottom: 24px;
}

/* Column titles: `font-bold mb-4` at the base size; MyListing's h4 is 18px. */
.sba-footer-column h4 {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 24px;
}

/* Link columns: `space-y-3` of `text-sm` links. 24px rows 12px apart: the
   prototype's links sit inline in list items that keep the body's 24px line
   height. */
.sba-footer-links li {
	font-size: 14px;
	line-height: 24px;
}

.sba-footer-links li + li {
	margin-top: 12px;
}

/* The whole line is the target, not just the glyphs. */
.sba-footer-links a,
.sba-footer-legal a {
	display: inline-block;
}

.sba-footer-links .current-menu-item > a {
	color: var(--sba-footer-text-bright);
}

/* ---- Contact and legal row -------------------------------------------------
 * Footer.tsx: `border-t mt-12 pt-8`, then `flex flex-col md:flex-row
 * md:items-center md:justify-between gap-6`; the links inside wrap with
 * `gap-6` (contact) and `gap-4` (legal). Below 768px both groups sit at the
 * left, 24px apart.
 * ------------------------------------------------------------------------ */
.sba-footer-bottom {
	border-top: 1px solid var(--sba-footer-surface);
	font-size: 14px;
	line-height: 20px;
}

.sba-footer-bottom > .sba-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-top: 32px;
	padding-bottom: 0;
}

@media (min-width: 768px) {
	.sba-footer-bottom > .sba-footer-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.sba-footer-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* Icon and label, a control rather than an inline link (links.css). */
.sba-footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sba-footer-contact .mi {
	font-size: 16px;
}

.sba-icon-linkedin {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/linkedin.svg") center / contain no-repeat;
	mask: url("../icons/lucide/linkedin.svg") center / contain no-repeat;
}

.sba-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sba-footer-legal .current-menu-item > a {
	color: var(--sba-footer-text-bright);
}

/* ---- Copyright ---------------------------------------------------------- */
.sba-footer-copyright {
	text-align: center;
	font-size: 14px;
	line-height: 20px;
}

.sba-footer-copyright > .sba-footer-inner {
	padding-top: 32px;
	padding-bottom: 48px;
}

.sba-footer-copyright p {
	line-height: 20px;
}