/*------------------------------------------------------------------
[Site-wide notice bar]

The bar is the first row of the fixed header (template-parts/notice-bar.php).
Its height is published as --site-notice-h by the small script printed with the
bar, so the page content and the "hidden header" offsets move down by exactly
that height and the rest of the header layout stays as it was.
-------------------------------------------------------------------*/

:root {
	--site-notice-h: 0px;
}

.site-notice-bar {
	position: relative;
	background: #FFD700;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.site-notice-bar .container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

.site-notice-bar .site-notice-text {
	display: block;
}

.site-notice-bar .site-notice-link {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-left: 20px;
	padding: 0 18px;
	min-height: 40px;
	background: #1a1a1a;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s;
}

.site-notice-bar .site-notice-link:hover,
.site-notice-bar .site-notice-link:focus {
	background: #444444;
	color: #ffffff;
}

/* Page content starts below the bar; the header keeps overlaying the content as before */
.main-wrapper {
	padding-top: var(--site-notice-h);
}

/* Header hidden on scroll down: move it up by the bar height as well */
body.hide-nav #header {
	top: calc(-200px - var(--site-notice-h));
}

body.single-car.hide-nav #header {
	top: calc(-80px - var(--site-notice-h));
}

@media (max-width: 767px) {
	.site-notice-bar {
		font-size: 14px;
	}

	.site-notice-bar .container {
		justify-content: space-between;
	}

	.site-notice-bar .site-notice-link {
		margin-left: 12px;
		padding: 0 12px;
		font-size: 12px;
	}

	body.single-car.hide-nav #header {
		top: calc(-60px - var(--site-notice-h));
	}
}

@media print {
	.site-notice-bar {
		display: none;
	}

	.main-wrapper {
		padding-top: 0;
	}
}

/* The button is 40 px high; the area that reacts to a tap is 44 px */
.site-notice-bar .site-notice-link {
	position: relative;
}

.site-notice-bar .site-notice-link:after {
	content: '';
	position: absolute;
	top: -2px;
	right: 0;
	bottom: -2px;
	left: 0;
}