/* ==========================================================================
   Dart Elementor — front-end styles
   Rules win purely by specificity (never by overriding). Where needed we lean
   on existing IDs (#masthead for the header, #wp-submit for the login button),
   since one ID outranks any number of classes in HFE/Elementor generated CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Text outline (was Medlemmer page-specific Custom CSS — now site-wide so the
   header "Næstved Dart" heading shows it on every page).
   Targets the heading title directly for specificity.
   -------------------------------------------------------------------------- */
.text-outline-white,
.text-outline-white .elementor-heading-title {
	text-shadow:
		1px 1px 0 #F2F0E3, 1px -1px 0 #F2F0E3, -1px 1px 0 #F2F0E3, -1px -1px 0 #F2F0E3,
		1px 0px 0 #F2F0E3, 0px 1px 0 #F2F0E3, -1px 0px 0 #F2F0E3, 0px -1px 0 #F2F0E3;
}

/* --------------------------------------------------------------------------
   Header navigation (HFE nav menu)
   Scoped under #masthead (the header's ID) so it outranks HFE's class-based
   generated CSS by specificity alone.
   - White text in every state, no underline (the HFE ::after pointer handles
     selected/hover marking and is left untouched)
   - Non-current links 10% transparent, current link fully opaque
   - Roboto Condensed 500 / 18px
   -------------------------------------------------------------------------- */
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item,
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item:focus,
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item:active,
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item:visited {
	color: #ffffff;
	text-decoration: none;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 500;
	font-size: 18px;
}

/* Non-current links: 10% transparent */
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item {
	opacity: 0.9;
}

/* Current/selected links: fully opaque (extra class = higher specificity) */
#masthead .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item,
#masthead .hfe-nav-menu .menu-item.current_page_item > a.hfe-menu-item,
#masthead .hfe-nav-menu .menu-item.current-menu-ancestor > a.hfe-menu-item,
#masthead .hfe-nav-menu .menu-item.current-menu-parent > a.hfe-menu-item {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Login form ([naestved_login])
   The submit button is targeted via its core #wp-submit id, which is specific
   enough to beat theme/Elementor button styles by specificity alone.
   -------------------------------------------------------------------------- */
.naestved-login-form,
.naestved-login-form label,
.naestved-login-form input {
	font-family: inherit;
}

.naestved-login-form #wp-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #42764C;
	background-image: none;
	color: #ffffff;
	border: none;
	text-shadow: none;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.4;
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.naestved-login-form #wp-submit:hover,
.naestved-login-form #wp-submit:focus,
.naestved-login-form #wp-submit:active,
.naestved-login-form #wp-submit:focus-visible,
.naestved-login-form #wp-submit:visited {
	background-color: #42764C;
	color: #ffffff;
	border: none;
	text-shadow: none;
	outline: none;
}

.naestved-login-form #wp-submit:hover,
.naestved-login-form #wp-submit:focus,
.naestved-login-form #wp-submit:active,
.naestved-login-form #wp-submit:focus-visible {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Championship podium ([dart_podium])
   -------------------------------------------------------------------------- */
.dart-podium {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 24px;
	margin: 0 auto;
}

.dart-podium__item {
	flex: 1 1 220px;
	max-width: 300px;
	text-align: center;
}

/* Emphasise the winner */
.dart-podium__item--1 {
	order: 2;
	flex-basis: 260px;
}
.dart-podium__item--2 { order: 1; }
.dart-podium__item--3 { order: 3; }

.dart-podium__rank {
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #42764C;
	margin-bottom: 10px;
}

.dart-podium__photo {
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}

.dart-podium__item--1 .dart-podium__photo {
	border: 3px solid #42764C;
}

.dart-podium__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.dart-podium__name {
	font-family: inherit;
	font-weight: 600;
	font-size: 1.1em;
	margin-top: 10px;
}

@media (max-width: 600px) {
	.dart-podium {
		flex-direction: column;
		align-items: center;
	}
	.dart-podium__item,
	.dart-podium__item--1,
	.dart-podium__item--2,
	.dart-podium__item--3 {
		order: 0;
		width: 100%;
		max-width: 320px;
	}
}

/* --------------------------------------------------------------------------
   Sponsor carousel ([dart_sponsors]) — pure CSS marquee
   -------------------------------------------------------------------------- */
.dart-sponsors {
	width: 100%;
	overflow: hidden;
}

.dart-sponsors__viewport {
	overflow: hidden;
}

.dart-sponsors__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: dart-sponsors-scroll var(--dart-sponsors-speed, 40s) linear infinite;
}

.dart-sponsors:hover .dart-sponsors__track {
	animation-play-state: paused;
}

.dart-sponsors__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
}

.dart-sponsors__item img {
	max-height: var(--dart-sponsors-height, 90px);
	width: auto;
	object-fit: contain;
	display: block;
}

@keyframes dart-sponsors-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.dart-sponsors__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
}