/* =========================================================
   NAV — flat, minimal style (matches reference screenshot)
   ========================================================= */

label.mobile_menu span {
	display: none !important;   /* "Menu" text removed per request — the hamburger icon (label.mobile_menu:after) still shows on real mobile widths */
}

.navigation {
	float: left;
	margin-top: 0;
}

.nav {
	font-family: 'Open Sans', sans-serif;
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
}

ul.nav {
	background: transparent;   /* was #084655 — flat bar, no color block */
	padding: 0;
	list-style: none;
}

/* Main element of the navigation */
.nav > li {
	display: inline-block;
	float: left;
	background: none;          /* removes menu-divider.png */
}

/* Link style — simple uppercase text, no border/arrow decoration */
.nav > li > a {
	padding: 12px 18px;
	display: block;
	color: #1a2744;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: none;
	background: none;          /* removes menu-arrow.png */
	transition: color .15s ease;
}

/* No special-casing needed anymore — every item behaves the same */
.nav > li:nth-child(1) > a,
.nav > li:nth-child(4) > a,
.nav > li:nth-child(5) > a {
	background: none;
}

.nav > li:hover > a,
.nav > li:nth-child(1) > a:hover,
.nav > li:nth-child(4) > a:hover,
.nav > li:nth-child(5) > a:hover {
	color: #e95732;             /* accent color on hover instead of a bg block */
	background: none;
	border-color: transparent;
}

.nav li > ul li a:hover {
	text-decoration: none;
}

@media (min-width: 1024px) {
	ul.nav {
		background: transparent;
	}
	.nav > li > a {
		border: none;
		font-weight: 600;
	}
}

/* ---------- Dropdown ---------- */
.nav > li > ul {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top: 100%;
	width: 200px;
	text-align: left;
	margin-top: 10px;
	padding: 0;
	z-index: 99;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
	border-radius: 2px;
	overflow: hidden;
}

.nav > li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.nav li > ul li {
	position: relative;
}

.nav li > ul li a {
	color: #1a2744;
	background-color: #fff;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: .03em;
	display: block;
	padding: 12px 16px;
	text-transform: uppercase;
	position: relative;
	border-bottom: 1px solid #eee;
	transition: all 0.2s linear;
}

.nav li > ul li a span.arrow {
	width: 15px;
	height: 10px;
	position: absolute;
	right: 5px;
	top: 15px;
	background: url(../images/arrow-before.png) no-repeat center;
}

.nav > li > ul li:hover a span.arrow {
	background: url(../images/nav-arrow.png) no-repeat center;
}

.nav > li > ul li:hover {
	color: #fff;
	background: #e95732;
}

.nav > li > ul li:hover > a {
	color: #fff;
}

.nav ul.dropdown2 {
	color: #1a2744;
}

.nav ul li:hover > a {
	color: #fff;
	background: #e95732;
}

/* Second and third dropdown level */
.nav > li > ul li ul {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top: 0px;
	left: 200px;
	width: 200px;
	text-align: left;
	padding: 0px;
	margin-left: 30px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.nav > li > ul li ul li:hover {
	background-color: #e95732;
}

input#mobile_menu { display: none; }

.nav > li > ul li ul li ul {
	background-color: #fff;
}

.nav > li > ul li ul li ul li:hover {
	background: #e95732;
	color: #fff;
}

.nav > li ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin-left: 0px;
}

/* Full width / column dropdowns kept as-is, restyled to match */
.nav > li > .fulldrop {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top: 100%;
	left: 0px;
	background-color: #fff;
	width: 100%;
	min-height: 100px;
	text-align: left;
	margin-top: 10px;
	padding: 0;
	z-index: 99;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.nav > li:hover .fulldrop {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.nav .coldrop {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top: 100%;
	background-color: #fff;
	min-height: 100px;
	text-align: left;
	margin-top: 10px;
	padding: 0 10px;
	z-index: 99;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.nav > li:hover .coldrop {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.nav .coldrop .column { width: 130px; margin: 0 9px; }

.nav .column {
	width: 14.1%;
	float: left;
	color: #1a2744;
	margin: 0 0 0 2.2%;
}

.nav .column ul { padding: 0; margin: 0; }

.nav .column ul li {
	padding: 0;
	list-style: none;
	font-size: 11px;
}

.nav .column h3 {
	font-size: 14px;
	padding: 14px 0;
	font-weight: 600;
	margin: 5px 0 5px 0;
}

.nav .column ul li a {
	display: block;
	padding: 0 0 15px 0;
}

.nav > li > ul li ul, .nav li > ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
	transition: all 0.1s ease-in-out;
}

/* =========================================================
   LANGUAGE SWITCHER — "D | F | E" top-right
   ========================================================= */
.lang-switch {
	display: none;   /* removed per request — delete the .lang-switch markup from header.php too, this just hides it as a safety net */
	align-items: center;
	margin-left: 25px;
	font-family: 'Open Sans', sans-serif;
	font-size: .8em;
	color: #1a2744;
}

.lang-switch a {
	color: #a9b1bd;
	padding: 0 6px;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .03em;
}

.lang-switch a.active,
.lang-switch a:hover {
	color: #1a2744;
}

.lang-switch span.sep {
	color: #ccc;
}

/* =========================================================
   VERTICAL "REGISTRATION" TAB — right-edge ribbon
   ========================================================= */
.registration-tab {
	position: fixed;
	top: 40%;
	right: 0;
	z-index: 200;
	background: #1a2744;
	color: #fff;
	padding: 22px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: -2px 0 10px rgba(0,0,0,.15);
	transition: background .15s ease;
}

.registration-tab:hover {
	background: #e95732;
	color: #fff;
}

.registration-tab .plus-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.registration-tab .label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-transform: uppercase;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .12em;
}

@media all and (max-width: 800px) {
	.registration-tab { display: none; } /* keep mobile clean; add a normal button instead if needed */
}

/* =========================================================
   RESPONSIVE / MOBILE (unchanged behaviour, restyled colors)
   ========================================================= */
@media all and (max-width: 1024px) {
	.nav > li > ul {
		width: 180px;
	}
}

@media all and (max-width: 800px) {
	.navigation {
		float: none;
		margin-bottom: 10px;
	}
	.lang-switch {
		margin: 10px 0 0 0;
	}
}

@media only screen and (max-width: 959px) {
	.nav > li > a {
		padding: 10px 12px;
	}
}

@media only screen and (max-width: 800px) {
	.nav {
		display: none;
	}
	label.mobile_menu span {
		display: inline;
	}
	label.mobile_menu {
		position: relative;
		display: block;
		width: 100%;
		background-color: #1a2744;
		padding: 10px 0;
		border-bottom: 1px solid white;
	}
	.nav {
		padding: 0;
		display: none;
	}
	#mobile_menu:checked + .nav {
		display: block;
	}
	.nav > li > a {
		border-width: 0;
		font-size: 0.85em;
	}
	.nav li {
		width: 100%;
		text-align: left;
		margin-left: 0;
	}
	.nav > li {
		border-right: none;
		padding: 5px 0px;
		position: relative;
		background: none;
	}
	.nav li > ul li a span.arrow {
		right: 20px;
		background: url(../images/nav-arrow2.png) no-repeat center;
	}
	.nav li ul, .nav li .fulldrop, .nav li .coldrop {
		top: 45px;
	}
	.nav li ul {
		padding: 0;
	}
	.nav > li:hover > a {
		background-color: #f0f0f0;
	}
	.nav .fulldrop, .nav .coldrop {
		width: 95%;
		padding: 0 2.5%;
	}
	.nav li > ul li {
		padding: 18px 0px;
	}
	.nav .column, .nav .coldrop .column {
		width: 94%;
		padding: 0 3%;
	}
	.nav > li > ul {
		width: 100%;
	}
	.nav > li > ul li ul {
		width: 100%;
		top: 36px;
		left: 0;
		margin-top: 30px;
		z-index: 2;
	}
	.nav > li > ul > li:hover ul {
		margin-top: 0;
	}
	label.mobile_menu:after {
		position: absolute;
		top: -2px;
		right: 10px;
		content: "\2261";
		font-size: 30px;
		color: #fff;
	}
	.nav > li > ul li ul li ul {
		width: 100%;
		top: 43px;
		left: 0px;
		margin-left: 0;
		margin-top: 30px;
	}
	.nav > li > ul > li ul li:hover ul {
		margin-top: 0;
	}
	.nav > li > ul li {
		padding: 0px 0 0px 0%;
		width: 100%;
	}
	.nav > li > ul li ul {
		margin-left: 0;
	}
	.nav > li > ul li ul li {
		padding: 5px 0 5px 0%;
		width: 100%;
	}
	.nav > li > ul li ul li ul li {
		padding: 15px 0 15px 0%;
		width: 100%;
	}
	.nav ul li.dropdown:after {
		left: 90%;
	}
	.nav > li > ul li ul, .nav li > ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
		transition: none;
	}
}

/* =========================================================
   ADDED — remove dark bar, move logo left & enlarge,
   add transparent colored race-category cards on the right
   ========================================================= */

/* Replace the dark teal bar with a plain WHITE bar (not fully
   transparent). .menu is `position:fixed`, so if it has no
   background at all, the page content scrolling underneath it
   shows straight through the nav text as you scroll — it stops
   reading as a "bar" entirely. A solid background + soft shadow
   keeps it looking like a distinct fixed header at any scroll
   position, same as the reference site. */
.menu {
	background: #ffffff !important;   /* !important so nothing loaded after this can silently turn it transparent again */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Put logo on the LEFT, nav + language switcher on the RIGHT,
   regardless of source order in header.php */
.menu .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;   /* keep logo + nav on ONE row — wrapping to 2 rows was making the bar taller than the body's padding-top, which is what let content peek through above it */
}

.logo {
	order: -1;           /* forces it first / left, no matter markup order */
	margin-right: 20px;
}

.logo img {
	height: 90px;         /* was smaller — bump this up/down to taste */
	width: auto;
}

.navigation {
	order: 2;
	margin-left: auto;
	display: flex;
	align-items: center;
}

/* =========================================================
   RACE CATEGORY CARDS — transparent colored ribbons,
   stacked along the right side of the hero banner
   ========================================================= */
.race-categories {
	position: absolute;
	right: 0;
	bottom: 60px;
	display: flex;
	z-index: 50;
}

.race-category {
	width: 230px;
	padding: 28px 24px 22px 24px;
	color: #fff;
	position: relative;
	font-family: 'Open Sans', sans-serif;
	/* corner-cut ribbon shape like the reference site */
	clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
}

.race-category + .race-category {
	margin-left: -1px; /* let edges touch, no gap */
}

.race-category .cat-title {
	font-size: 1.3em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 10px;
}

.race-category .cat-stats {
	font-size: .85em;
	font-weight: 600;
	margin-bottom: 14px;
	opacity: .95;
}

.race-category .cat-date {
	font-size: .8em;
	font-weight: 600;
	opacity: .85;
}

/* three transparent color variants requested: red / blue / green */
.race-category.cat-red   { background: rgba(196, 63, 58, 0.82); }
.race-category.cat-blue  { background: rgba(51, 121, 145, 0.82); }
.race-category.cat-green { background: rgba(87, 145, 96, 0.82); }

@media all and (max-width: 900px) {
	.race-categories {
		position: static;
		flex-wrap: wrap;
	}
	.race-category {
		width: 50%;
		clip-path: none;
	}
	.logo img {
		height: 60px;
	}
}

/* .menu is position:fixed (set in style.css), so it's taken out
   of normal document flow — without this, whatever comes right
   after it in the HTML (hero image, page content, etc.) starts
   underneath the bar instead of below it. Adjust this value if
   you change the logo height / nav padding, so it always matches
   the actual rendered height of .menu. */
body {
	padding-top: 112px; /* ~90px logo + vertical padding in .menu .container */
}