/**
 * The back arrow at the top left of the content (WP-56), printed by
 * includes/back-link.php at the top of #main.
 *
 * A bar in the flow rather than an arrow laid over the page: under the header
 * the pages leave 30 to 60px before their first line, and on a phone an arrow
 * on top of that would cover the title or the "Products" above it.
 *
 * The bar is drawn as the top of the content's box: the same width and the
 * same side borders as the sections under it (1280px at most, 30px from the
 * window's edges, 20px on phones).
 */

.lemorau-back-bar {
	box-sizing: border-box;
	/* Flex, so the bar is exactly the button's height, with no line box under it. */
	display: flex;
	width: min(1280px, calc(100% - 60px));
	margin: 0 auto;
	border-left: 1px solid var(--e-global-color-vamtam_accent_7, #e6e9eb);
	border-right: 1px solid var(--e-global-color-vamtam_accent_7, #e6e9eb);
}

/* The theme's own 404 and search results have no bordered box under the bar,
   and its borders would hang over nothing there. */
body.error404 .lemorau-back-bar,
body.search .lemorau-back-bar {
	border-color: transparent;
}

/* A copy of the site's buttons, measured on FIND OUT MORE: square, black on
   white, the same padding around a 22px arrow (the height of their line of
   text) and, on hover, filled with the accent up to the grid lines, the arrow
   in white. The bar has no padding of its own so the fill meets the box's left
   border and the header, as theirs meets the lines of its cell.

   The bar's class is in each selector for weight: Elementor's kit colours every
   link from `.elementor-kit-5 a` and `.elementor-kit-5 a:hover`, which beat a
   single class and turned the arrow blue on its blue hover. */
.lemorau-back-bar .lemorau-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 25px 30px;
	border-radius: 0;
	background-color: #fff;
	color: #000;
	text-decoration: none;
	transition: all 0.3s ease;
}

.lemorau-back-bar .lemorau-back:hover,
.lemorau-back-bar .lemorau-back:focus-visible {
	background-color: var(--e-global-color-vamtam_accent_1, #0054a4);
	color: #fff;
}

/* Inside the fill, since the square already touches the header and the line. */
.lemorau-back-bar .lemorau-back:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

.lemorau-back svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* Elementor's tablet breakpoint, where the buttons drop to 20px by 25px. */
@media (max-width: 1024px) {
	.lemorau-back-bar .lemorau-back {
		padding: 20px 25px;
	}
}

@media (max-width: 767px) {
	.lemorau-back-bar {
		width: calc(100% - 40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lemorau-back-bar .lemorau-back {
		transition: none;
	}
}