/*
Theme Name: Mud Lovers
Theme URI: https://mudlovers.be
Author: Antonin Kaminski
Author URI: https://antonin-kaminski.be
Description: WordPress theme for Mud Lovers - cyclocross calendar in Wallonia. Includes a "Cross event" Custom Post Type with a Challenge taxonomy, filters (month / challenge / city), driving-distance calculation from a chosen city, and a CSV import tool.
Version: 1.9.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: mudlovers
*/

body{
	background: url('assets/img/forest-path.jpg') no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Hepta Slab', serif;
}
a{
	transition: all .4s ease;
}
header.site-header{
	text-align: right;
	padding: 4rem 0;
	transition: all .4s ease;
}
header.site-header h1{
	color: #fff;
	text-transform: uppercase;
	font-size: 6em;
	line-height: 5rem;
	font-weight: 700;
	margin: 0;
}
header.site-header h1 a{
	color: #fff;
	text-decoration: none;
}
header.site-header h1 span{
	font-weight: 900;
	display: block;
}
header.site-header h2{
	color: #fff;
	text-transform: uppercase;
}
header.site-header h3{
	background: orange;
	color: #fff;
	padding: .4rem;
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
}

header.site-header.shrink{
	background: rgba(0,0,0,.8);
	max-width: 10rem;
	padding: .6rem 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
}
header.site-header.shrink h1{
	font-size: 1em;
	line-height: 1rem;
}
header.site-header.shrink h2{
	font-size: .8rem;
}
header.site-header.shrink h3{
	display: none;
}

.hashtag::before{
	content: '#'
}

.site-header-subtitle{
	color: #fff;
	font-style: italic;
	text-transform: none;
	font-size: .9rem;
	font-weight: 300;
	margin: .5rem 0 0;
}
.site-header-subtitle .header-challenge-tag{
	display: inline-block;
	font-style: normal;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .7rem;
	letter-spacing: .05rem;
	background: #fff;
	color: #000;
	padding: .2rem .5rem;
	margin: .15rem .35rem;
	vertical-align: middle;
}
header.site-header.shrink .site-header-subtitle{
	display: none;
}

/* Filter bar */
.mudlovers-filters{
	background: rgba(255,255,255,.95);
	/* deliberately has no own .container wrapper: it sits directly
	   inside the page's single outer .container (opened in header.php,
	   same as #mudlovers-results below it), so it automatically matches
	   the exact same width/gutters as the rest of the page content. A
	   nested .container here would NOT simply add its own gutters on
	   top — Bootstrap's .container width breakpoints are based on the
	   viewport, not on the parent's available width, so a second,
	   nested .container would size itself as if it were flush with the
	   screen and overflow past the actual (already narrower) content
	   column. Horizontal padding is still needed here though — without
	   it, the .row's own negative side margins pull the selects/input
	   flush against the white background's edges, leaving no breathing
	   room around the translucent box. */
	padding: .8rem 1.2rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	/* margin-bottom is deliberately bigger than margin-top: since this bar
	   is `position: sticky`, once it locks to the top of the viewport the
	   page keeps scrolling underneath it — the reserved gap below it does
	   NOT scroll along, so a small margin gets "eaten" after just a few
	   pixels of scrolling and the first row of cards ends up looking glued
	   to the bar. A bigger buffer here keeps a comfortable gap visible for
	   longer while scrolling past the sticky bar. */
	position: sticky;
	border-radius: 0;
	top: 0;
	z-index: 900;
	box-shadow: 0 4px 8px rgba(0,0,0,.15);
	box-sizing: border-box;
}
.mudlovers-filters-scrolled{
	/* once the header has shrunk to its fixed top-right badge, reserve
	   just enough room on the right so the filter controls never run
	   under it */
	padding-right: 10rem;
}
.mudlovers-filters .row.align-items-end{
	margin-bottom: 0;
}
.mudlovers-filters .form-group{
	margin-bottom: .4rem;
}
.mudlovers-filters .form-group label{
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06rem;
	font-size: .55rem;
	color: #888;
	margin-bottom: .1rem;
}
.mudlovers-filters select,
.mudlovers-filters input[type="text"]{
	border-radius: 0;
	border: 2px solid #000;
	height: calc(1.5em + .5rem + 2px);
	padding: .25rem .5rem;
	font-size: .85rem;
}
.mudlovers-filters .input-group{
	height: calc(1.5em + .5rem + 2px);
}
.mudlovers-filters .input-group input[type="text"]{
	height: 100%;
}
.mudlovers-filters button{
	background: orange;
	border: 2px solid orange;
	border-left: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .05rem;
	border-radius: 0;
	padding: .25rem .7rem;
	font-size: .85rem;
}
.mudlovers-filters button:hover{
	background: #fff;
	color: orange;
}
.mudlovers-filters-meta{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
	font-size: .7rem;
}
.mudlovers-filters-meta-left{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
}
.mudlovers-filters-meta .reset-link,
.mudlovers-filters-meta #mudlovers-sort-nearby,
.mudlovers-filters-meta #mudlovers-sort-nearby-reset{
	font-size: .7rem;
	color: #555;
}
.mudlovers-filters-meta #mudlovers-sort-nearby,
.mudlovers-filters-meta #mudlovers-sort-nearby-reset{
	font-weight: 700;
	color: orange;
}
.mudlovers-filters-meta .sep{
	color: #ccc;
}
.mudlovers-filters-meta .season-label{
	color: #888;
}
.mudlovers-checkbox-label{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: #555;
	font-weight: normal;
	margin: 0;
	cursor: pointer;
}
.mudlovers-checkbox-label input[type="checkbox"]{
	margin: 0;
}
#mudlovers-distance-status{
	font-size: .7rem;
	color: #888;
}
#mudlovers-distance-status.error{
	color: #b00000;
	font-weight: 700;
}
#mudlovers-distance-status:empty{
	display: none;
}

.monthTitle{
	background: rgba(255,255,255,.6);
	color: #000;
	text-align: right;
	font-size: 1.2rem;
	letter-spacing: .6rem;
	font-weight: 700;
	margin-bottom: 3rem;
	text-transform: uppercase;
	padding: .4rem;
}

.row>div{
	margin-bottom: 30px;
}

/* "Sort by nearest to me": flattens the month-grouped layout into one
   single sequence ordered by distance (see sortCardsByDistance() in
   main.js), ignoring which month each card originally belonged to. */
#mudlovers-results.sorted-nearby{
	display: flex;
	flex-wrap: wrap;
}
#mudlovers-results.sorted-nearby .monthTitle{
	display: none !important;
}
#mudlovers-results.sorted-nearby .row{
	display: contents;
}
.mudlovers-card.past-event .itemCalendar{
	opacity: .45;
}
.itemCalendar{
	position: relative;
	background: rgba(0,0,0,.6);
	color: #fff;
	text-transform: uppercase;
	padding: 2rem;
	padding-bottom: 4.5rem;
	min-height: 24rem;
}
.itemCalendar h2{
	font-size: 3rem;
	letter-spacing: .6rem;
	font-weight: 700;
	text-align: right;
	margin-top: -3.4rem;
	margin-right: -2rem;
	word-wrap: break-word;
	position: relative;
	z-index: 4;
	min-height: 7rem;
}
.itemCalendar h2 a{
	color: #fff;
	text-decoration: none;
}
.itemCalendar h2.tooLongTitle{
	font-size: 2rem;
}
.itemCalendar h3{
	font-weight: 300;
	text-align: right;
}
.itemCalendar h3.cross-province{
	font-size: 1.2rem;
}
.itemCalendar h4{
	text-align: right;
}
.itemCalendar h4.cross-date{
	font-size: 1.7rem;
	font-weight: 700;
	color: orange;
}
.itemCalendar h5{
	display: inline-block;
	text-align: right;
	font-size: .8rem;
	background: #fff;
	padding: .4rem;
	color: #000;
}
.itemCalendar h4 i{
	margin: 0 1rem;
}
.itemCalendar p{
	font-size: .8rem;
	text-transform: none;
	text-align: right;
}
.itemCalendar .distance{
	align-self: flex-end;
	font-size: .85rem;
	font-weight: 700;
	text-align: right;
	background: orange;
	color: #fff;
	padding: .4rem 1rem;
	margin: .5rem -2rem .5rem 0;
}
.itemCalendar a.infos-link{
	position: absolute;
	right: 0;
	bottom: 0;
	text-transform: uppercase;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .05rem;
	padding: .7rem 1.4rem;
	background: #fff;
	color: #000;
	text-align: center;
	text-decoration: none;
}
.itemCalendar a.infos-link:hover{
	background: orange;
	color: #fff;
}

.itemCalendar .footer{
	text-align: right;
}
.message{
	background: orange;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	padding: .4rem 1rem;
	margin: 6rem 0;
}
.message p{
	margin-bottom: 0;
}
.message a{
	color: #333;
	font-weight: bold;
}

.no-results{
	background: rgba(255,255,255,.85);
	padding: 2rem;
	text-align: center;
	font-size: 1.2rem;
	text-transform: uppercase;
}

footer.site-footer ul li{
	list-style-type: none;
}
footer.site-footer{
	margin-top: 4rem;
	padding: 2rem;
	background: rgba(0,0,0,.6);
	color: #fff;
	text-align: right;
	font-weight: 300;
}
footer.site-footer .row>div+div{
	text-align: left;
	border-left: 4px solid #fff;
}
footer.site-footer h2{
	font-weight: bold;
}
footer.site-footer a{
	color: #fff;
	font-weight: 700;
	padding: .4rem;
}
footer.site-footer a:hover{
	background: #fff;
	color: #000;
	text-decoration: none;
}
.footer-disclaimer{
	color: orange;
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
	margin: 1.5rem 0 0;
}
.subText{
	font-size: .7rem;
	width: 100%;
	text-align: center;
	color: rgba(255,255,255,.2);
}
.subText a{
	color: rgba(255,255,255,.2);
}

@media screen and (max-width: 768px) {
	.mudlovers-filters{
		/* on mobile, don't pin the filter bar to the top of the screen —
		   it eats too much of the small viewport while scrolling through
		   the calendar. Scrolls away normally instead. */
		position: static;
		top: auto;
	}
	header.site-header h1{
		font-size: 4em;
		line-height: 3rem;
	}
	header.site-header.shrink{
		display: none;
	}
	.mudlovers-filters-scrolled{
		/* the shrunk header badge is hidden on mobile (see above), so no
		   need to reserve room for it */
		padding-right: 0;
	}
	footer.site-footer{
		text-align: center;
	}
	footer.site-footer .row>div+div{
		border: none;
		text-align: center;
	}
	footer.site-footer ul li{
		text-align: left;
	}
}