/* --------------------------------------------------------------------------------------------------------------------- */
/* HEADER - logos, languages, show title; on the home page also the main actions */
/* --------------------------------------------------------------------------------------------------------------------- */

#header
{
	position: relative;
	overflow: hidden;
	margin-top: 10px;
	background: linear-gradient(90deg, #2a0e03 0%, #4a1904 55%, #5a1d05 100%);
	color: #fff;
}

/* the show's artwork on the right, its left edge feathered into the dark
   ground so the text on the left stays readable and there is no seam */
#header::before
{
	content: "";
	position: absolute;
	right: -4.5rem;
	bottom: 0;
	height: 20rem;
	aspect-ratio: 16 / 9;
	background: url(../img/header/header_halloween.png) center / cover no-repeat;
	/* feathered on the left and on the top, so neither edge shows */
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 40%),
		linear-gradient(180deg, transparent 0%, #000 35%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 40%),
		linear-gradient(180deg, transparent 0%, #000 35%);
	mask-composite: intersect;
}

/* logos, top right: on white discs so they read on any part of the artwork */

.hd_bar
{
	position: absolute;
	z-index: 2;
	top: 1.25rem;
	right: 1.5rem;
	display: flex;
	gap: 0.75rem;
}

.hd_logos a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}

.hd_logos a:hover,
.hd_logos a:focus-visible
{
	transform: scale(1.05);
}

.hd_logos img
{
	display: block;
	width: 4.1rem;
	height: 4.1rem;
}

/* language switch, on the right of the top navigation ----------------------
   #main_navigation styles every link in it (floats, 6rem line height, and on
   small screens hides all but the first), so these rules go through #lang */

#main_navigation #lang
{
	float: right;
	display: flex;
	margin: 1.85rem 1.25rem 0 0;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(60, 18, 2, 0.25);
}

#main_navigation #lang a,
#main_navigation #lang span
{
	float: none;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	color: #fff;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-shadow: none;
}

#main_navigation #lang img
{
	width: 18px;
	height: 13px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

#main_navigation #lang a:hover,
#main_navigation #lang a:focus-visible
{
	background: rgba(255, 255, 255, 0.2);
}

#main_navigation #lang span.on
{
	background: #fff;
	color: #b3470f;
}

/* title block ---------------------------------------------------------------- */

.hd_body
{
	position: relative;
	z-index: 1;
	max-width: 30rem;
	padding: 2rem 1.5rem 2rem 1.5rem;
}

#logotype
{
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.78rem;
	line-height: 1.2rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffd9a8;
}

#header a.hd_title
{
	display: block;
	font-size: 2.2rem;
	line-height: 2.6rem;
	font-weight: 900;
	color: #fff;
	text-decoration: none;
}

#header a.hd_title:hover
{
	color: #fff;
	text-decoration: none;
}

.hd_tagline
{
	margin-top: 0.5rem;
	font-size: 1.05rem;
	line-height: 1.5rem;
	color: rgba(255, 255, 255, 0.85);
}

.hd_when
{
	display: inline-block;
	margin-top: 0.9rem;
	padding: 0.2rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.3rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffd9a8;
}

.hd_actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

#header a.hd_btn
{
	display: block;
	padding: 0.7rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-weight: 900;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

#header a.hd_btn:hover,
#header a.hd_btn:focus-visible
{
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

#header a.hd_btn_cta
{
	border-color: #e8661c;
	background: #e8661c;
	box-shadow: 0 2px 8px rgba(232, 102, 28, 0.35);
}

#header a.hd_btn_cta:hover,
#header a.hd_btn_cta:focus-visible
{
	border-color: #c9540f;
	background: #c9540f;
}

/* wide screens: one row, the switch pushed to the right; between the
   hamburger breakpoint and 1700px the links tighten so the row still fits */
@media screen and (min-width: 1301px)
{
	/* if the links still leave no room (long labels, the admin link), the
	   switch wraps to its own row on the right rather than being clipped */
	#main_navigation
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	#main_navigation a
	{
		flex: none;
		white-space: nowrap;
	}

	#main_navigation #lang
	{
		flex: none;
		margin: 0.6rem 1.25rem 0.6rem auto;
	}
}

@media screen and (min-width: 1301px) and (max-width: 1700px)
{
	#main_navigation a
	{
		padding: 0 7px;
		font-size: 1.05rem;
	}

	#main_navigation #lang
	{
		margin-right: 0.75rem;
	}

	/* the codes alone are enough here; the flags come back with the room */
	#main_navigation #lang img
	{
		display: none;
	}

	#main_navigation #lang a,
	#main_navigation #lang span
	{
		padding: 0.3rem 0.6rem;
	}
}

@media screen and (min-width: 1301px) and (max-width: 1500px)
{
	#main_navigation a
	{
		padding: 0 5px;
		font-size: 0.95rem;
	}

	#main_navigation #lang a,
	#main_navigation #lang span
	{
		padding: 0.3rem 0.5rem;
	}

	#main_navigation a#navhome
	{
		margin-left: 12px;
	}
}

/* the expanded mobile menu pins the hamburger to the top right corner, so the
   switch leaves it and joins the list of links */
@media screen and (max-width: 1300px)
{
	#main_navigation.responsive #lang
	{
		float: none;
		display: inline-flex;
		margin: 0.5rem 0 1rem 10px;
	}
}

/* narrow screens: no room for text and dogs side by side, so the artwork
   goes behind the text, dimmed */
@media screen and (max-width: 800px)
{
	#header::before
	{
		top: 0;
		left: 0;
		right: 0;
		height: auto;
		aspect-ratio: auto;
		background-position: center bottom;
		opacity: 0.3;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* the logos take their own row above the text */
	.hd_bar
	{
		position: relative;
		top: auto;
		right: auto;
		justify-content: flex-end;
		padding: 0.9rem 1rem 0 1rem;
	}

	.hd_logos a
	{
		width: 3.5rem;
		height: 3.5rem;
	}

	.hd_logos img
	{
		width: 3rem;
		height: 3rem;
	}

	#main_navigation #lang
	{
		margin-right: 0.75rem;
	}

	#main_navigation #lang a,
	#main_navigation #lang span
	{
		padding: 0.3rem 0.55rem;
	}

	.hd_body
	{
		padding: 1.2rem 1rem 1.5rem 1rem;
	}

	#header a.hd_title
	{
		font-size: 1.7rem;
		line-height: 2.1rem;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.hd_logos a,
	#header a.hd_btn
	{
		transition: none;
	}

	.hd_logos a:hover
	{
		transform: none;
	}
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* GDPR */
/* --------------------------------------------------------------------------------------------------------------------- */

#policy_background, #press_background
{
	background: #222;
	opacity: 0.9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px;
	display: none;
	z-index: 2000;
}

#policy_consent
{
	position: fixed;
	bottom: 0px;
	left: 50%;
	margin-left: -210px;
	width: 400px;
	height: 150px;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	display: none;
	background: #eee;
	z-index: 2001;
}

#press_background
{
	z-index: 1000;
}

#press
{
	position: absolute;
	top: 0;
	left: 0;
	margin: 20px;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	display: none;
	background: #eee;
	z-index: 1001;
}

#policy_text
{
	color: #222;
}

#policy_text a
{
	color: #222;
	text-decoration: underline;
}

#press_accept, #policy_accept
{
	display: inline-block;
	margin: 0;
}