/**
 * The campaign strip under the header (inc/campaign.php, roland_campaign_strip_html()): one link
 * to the campaign page, desktop only. It is the last element inside the sticky header wrapper, so
 * header and strip stick together. Hidden below 1170px, where the header's page links
 * collapse into the menu (refresh.css, theme.css).
 */
.k-strip {
	display: none;
}

@media (min-width: 1170px) {
	.k-strip {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 0 24px;
		overflow: hidden;
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--linen);
		border-bottom: 2px solid var(--wp--preset--color--wheat);
		font-family: var(--wp--preset--font-family--sans);
		font-size: 15px;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: none;
	}

	.k-strip__in {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 28px;
	}

	.k-strip__tag {
		padding: 6px 12px;
		background: var(--wp--preset--color--deep-rust);
		color: var(--wp--preset--color--linen);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.18em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.k-strip__offer {
		display: flex;
		align-items: baseline;
		gap: 10px;
	}

	.k-strip__pct {
		font-size: 18px;
		font-weight: 800;
		color: var(--wp--preset--color--wheat);
	}

	.k-strip__what {
		font-weight: 500;
		color: color-mix(in srgb, var(--wp--preset--color--linen) 92%, transparent);
	}

	.k-strip__div {
		width: 1px;
		height: 18px;
		background: color-mix(in srgb, var(--wp--preset--color--linen) 25%, transparent);
	}

	.k-strip__date {
		color: color-mix(in srgb, var(--wp--preset--color--linen) 75%, transparent);
	}

	.k-strip__date b {
		margin-left: 0.3em; /* a little more air between "Boka senast" and the date than the space alone gives */
		font-weight: 700;
		color: var(--wp--preset--color--wheat);
	}

	.k-strip__go {
		font-weight: 700;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
		text-decoration-color: color-mix(in srgb, var(--wp--preset--color--linen) 50%, transparent);
	}

	.k-strip:hover .k-strip__go,
	.k-strip:focus-visible .k-strip__go {
		text-decoration-color: var(--wp--preset--color--linen);
	}

	.k-strip:focus-visible {
		outline: 2px solid var(--wp--preset--color--wheat);
		outline-offset: -4px;
	}
}

/*
 * The campaign page's strip (k-strip--boka) is only there while the header is sticky: the header goes
 * compact once the page is scrolled past about 80px (refresh-header.js sets html.rs-header-compact)
 * and back to the full header at the top, so the strip is hidden at the top of the page. Nothing
 * moves when it appears: the compact header keeps the wrapper's full height (refresh.css), so the
 * strip simply overlaps the top of the page, like the compact header itself.
 */
@media (min-width: 1170px) {
	.k-strip--boka {
		display: none;
	}

	html.rs-header-compact .k-strip--boka {
		display: flex;
	}
}

/*
 * Where the whole line no longer fits, "Boka senast ..." and the divider after it go first. The
 * campaign page's strip (k-strip--boka) has no "Se kampanjen" item, so it fits and keeps the date.
 */
@media (min-width: 1170px) and (max-width: 1199.98px) {
	.k-strip:not(.k-strip--boka) .k-strip__date,
	.k-strip:not(.k-strip--boka) .k-strip__div--date {
		display: none;
	}
}

/*
 * The compact header (refresh.css) makes the wrapper keep its full height with pointer events off;
 * the header turns them back on for itself, and so does the strip.
 */
html.rs-header-compact .is-refresh .k-strip,
html.rs-header-animating .is-refresh .k-strip {
	pointer-events: auto;
}