/**
 * Reco widget and award badge.
 *
 * NOTE ON UNITS: the theme sets the root font size to 10px, so 1rem = 10px.
 */

.fl-reco {
	max-width: 1140px;
	margin: 0 auto 20px;
}

.fl-reco__widget {
	display: block;
	width: 100%;
	border: 0;
	overflow: hidden;
}

.fl-reco__link {
	margin: 10px 0 0;
	font-size: 1.5rem;
	text-align: center;
}

/*
 * The footer section carries margin-bottom: -70px, so the block below it is
 * pulled over its final 70px. Anything at the foot of a footer column has to
 * clear that strip or it is covered.
 */
.fl-reco-award {
	display: block;
	margin: 18px auto 80px;
	width: 150px;
	max-width: 60%;
	line-height: 0;
}

.fl-reco-award img {
	width: 100%;
	height: auto;
}

/* ========= Award badge in the front page's fixed hero bar ========= */

/*
 * Sits inside .fl-logo-wrapper, above the candle image and the "Behåll 75 kr"
 * promo. bottom: 100% puts it on top of the wrapper; the extra 45px clears the
 * candle photo, which overhangs the wrapper by 35px.
 */
.fl-reco-hero {
	position: absolute;
	bottom: calc(100% + 45px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.fl-reco-hero .fl-reco-award {
	margin: 0;
	width: 110px;
	max-width: none;
}

@media (min-width: 768px) {
	/*
	 * .fl-logo is shifted 140px left of the wrapper on desktop, so the cluster's
	 * visual centre sits 88px left of the wrapper's own centre.
	 */
	.fl-reco-hero {
		transform: translateX(-50%) translateX(-88px);
	}

	.fl-reco-hero .fl-reco-award {
		width: 130px;
	}
}

@media (max-width: 767px) {
	/*
	 * Centred, the badge covered the last letters of the headline. Right-aligning
	 * it against the wrapper clears the title's box, which ends where the badge
	 * now starts.
	 */
	.fl-reco-hero {
		left: auto;
		right: 12px;
		transform: none;
		bottom: calc(100% + 8px);
	}

	.fl-reco-hero .fl-reco-award {
		width: 56px;
	}
}