/*
Theme Name: Ride Events Hybrid Theme
Theme URI: https://ride-events.co
Author: Ryan Hicks
Description: Hybrid PHP + FSE WordPress theme
Version: 2.0424r1a
Delta: revisiting page-grid, side-bar
License: GPL-2.0-or-later
Text Domain: custom-blog-theme
*/




/* Base Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
body {
	font-family: "Proxima-Nova", "SF Pro", "Helvetica Neue", sans-serif;
	font-size: 100%;
    height: 100%; /* CRITICAL Force full height */
	line-height: 1.4; /* nominal seems about 1.25 */
    width: auto;
	overflow: visible; /* CRITICAL Enables root-level scrolling for Mobile Safari */
	overflow-x: hidden; /* lock out the funky lateral scroll */
    display: flex;
    flex-direction: column;	/* header, content section, footer stacked */
	}



/* ----------- Fixed Site Header stays in place on scroll but is pulled out of doc flow */
.header-fixed {
	position: fixed; /* fixed pulls this div out of the document flow, have to manually margin content away */
	width: auto; /* fill the space, aware of margins */
	left: 0; 
	right: 0;
	/* Margins declared with sidebar and content at breakpoints */
/*	display: flex; */ /* remove now there's nested rows... was line up the children, flex' default content orientation is INLINE ROW */
	z-index: 500; /* Stay on top, page content scrolls 'behind' */
	top: 0; /* Stay at the top */
	align-items: center; /* float the things in the header space */
	justify-content: space-between; /* keeps left and right anchored */
	/* height set with cluster of other values to build out the appropriate top spacing */
	}


/* ------------ Main Header Contents ---------------------------- */

.header-fixed {
/* row constructor only, heights down below */
  display: flex;
  flex-direction: column;
	}

/* to stack main header and Subheader */
.row { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.header-left {
    display:flex;
	flex: 1 1 0; /* grows to fill all available space */
  	align-items: flex-start; /* top-align badge and typemark */
	justify-content: left;
	}
.header-right { 
    display:flex;
	flex: 0 1 auto; /* stays only as wide as its content */
  	align-items: flex-start;
  	justify-content: right;
  	gap: 10px;
  	margin-top:1px;
	padding-right: 36px;
	}



/* --- primary branding ---- */
.ride-badge { 
	width: 26px; 
	height: auto;
	margin-right: 3px; /* bump the center-align within the fixed 36px block */
	margin-top: 1px; /* adjust to match the lockup type's vertical positioning */
	}
.on-explor {
	padding-left: 2px; /* shift slightly to align with the larger RIDE lockup type above */
	}
.lockup {
	display: flex;
	flex-direction: column;
	}
.lockup P { /* because general P have 16px bottom-margins */
	margin-bottom: 0;
	margin-left: -1px; /* type block seems to have its own margin */
	}

.context {
	margin-left: -1px; /* subnav type block seems to have its own margin */	
	}






/* --------- main layout top and columns ---------- */

.header-fixed {
	height: 64px; /* includes upper padding, content, and subnav */
	padding-top: 16px; /* bump the rows off the top edge, can't be margin */
	/* is reduced at smaller breakpoints */
	/* additional bottom margin added at content-container offset value */
	}
.content-container, #page-content {
	margin-top: 64px; /* Offset space for the fixed header. Content-container are list grids, subheader is content pages */
	}
.content-container {
	/* outer margins master to wrap the (two) main columns, used on all pages */
	/* full-bleed blocks like headers, sub-headers are NOT included in this */
    min-height: calc(100vh - 64px); /* match top margin and sidebar height calc. this will make sure footer is at bottom on short pages */
	display: flex;
    height: auto; /* CRITICAL Allowing container to grow with content triggers the root scroll */
	width: auto;
	/* !! side margins are set at breakpoints */
	}
.sidebar {
    height: calc(100vh - 64px); /* Full height minus the header */
    position: fixed; /* Sidebar remains fixed on the page, content-body uses side-margin definitions to clear the fixed sidebar */
    overflow-y: auto; /* If sidebar content does fill up, it will scroll */
	display: flex;
	flex-direction: column; /* Stack children vertically */
	}


.page-sidebar .content-container {
	/* side-by-side sidebar stats row of columns, switches to rows in a single column for mobile */
    flex-direction: row; 
	}
#page-content .content-container { 
	/* no more sidebar on content pages... */
	/* shifts from two-column main layout to single column */
    flex-direction: column;
	}


/* have to move content-body out around the Sidebar which is Fixed and pulled out of page flow (for scrolling management adaptations across breakpoints)  */
.content-body {
	flex-grow: 1; /* Allow the content area to grow */
	display: flex;
	flex-direction: column; /* Stack content section and footer */
    overflow: visible; /* CRITICAL ensures root-level scrolling for Mobile Safari */
	padding: 0;
	}






/* --------- main layout's two columns ---------- */


.sidebar {
	width: 20vw; /* nominal width, adapted at smaller breakpoints  */
	}
	
.page-sidebar .content-body {
	margin-left: calc(8px + 20vw); /* required to push content over past the FIXED sidebar. */
	}
#page-content .content-body {
	margin-left: 0; /* full width because no sidebar */
	}






/* ---------  sidebar and left-marks details ---------- */

.sidebar-filters {
/* expands in sidebar mode to give filters some space to float, 
also pins subheader to the top */
	display: flex;
	flex-grow: 1; /* Allow sidebar to grow and fill available space */
	flex-direction: column; /* Stack children vertically, changes to row at Mobile */
	}

.filters-block { /* positions filter sets within sidebar */
  	margin-top: auto;
	margin-bottom: 14vh; /* float with some space off the bottom */
	}

/* bring those leftmark divs in-line with their paired content and list divs as separate rows */
.sidebar-context, .filters-block {
    display:flex; 
	flex-direction: row;
	width: 100%; /* to adapt to the sidebar or full-width breakpoints */
	flex-shrink: 1; /* allowed to shrink if necessary */
    min-width: 0; /* grinding on the context h2 anchors not hypenating */
    }

.filters-categories { /* wraps location and filters together to re-sequence and reflow them in Mobile */
	display: flex;
	flex-direction: column; /* Stack children vertically, changes to row at Mobile */
	}

.categories {order: 1;}
.years {order: 2;}
.subnav {order: 3;}	
.years .tree-list {
	display:flex;
	flex-direction: column;
	/* so we can change their order to reversed and row on mobile */
	}


/* for the categories current cat in the sidebar */
.filters-categories .tree-list li.active {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}


.leftmark { /* a container for the tiny icons hanging in the left margin, shared across each of the rows */
	flex: 0 0 36px; /* sets the width of the left icons and their margin (not growable (0), not shrinkable (0), initial length) */
	display:flex; /* need this to drive positioning of the contained elements */
	align-items: start;	/* top along vertical axis, adjusted with margins based on the graphic */
	justify-content: right; /* was center for various-sized marks but now we just have the badge */
	}

.tinyicon {
	height: 16px;
	width: auto;
	}
.pound {
	margin-top: 0px; /* was shifted down 4px with bigger subheadtype */		
	height: 16px; /* smaller now that the type's smaller */
	}

/* hiding the hanging tag graphic for now */
.pound img {
	display: none;
	}


/* Section inside main-content to push footer down */
content-body {
	flex-grow: 1; /* Allow section to grow and fill available space */
	padding-bottom: 40px; /* some buffer space before footer */
	margin-left: 0px; /* content page adds margin */
	margin-right: 0px;  /* content page adds margin */
	}




/* Footer */
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
    padding: 36px 36px 36px 36px; /* T R B L */
    z-index: 500;
	}
.footer-left {
	flex: 1; /* Allow section to grow and fill available space */
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	}
.footer-inner {
	flex: 1; /* makes them equal width */
	}
.footer-right {
	flex: 1; /* Allow section to grow and fill available space */
	display: flex;
	justify-content: flex-end;   /* pushes the column to the right */
	align-items: flex-start;
	}




/* -------- Grid blocks have internal Grid -------------------- */

.grid-block { /* the card's outer wrapper */
    display: grid;
    grid-template-columns: 48% 52%; /* will need to be set to ROWS for mobile */
    text-align: left;
	margin-bottom: 24px; /* spacing between blocks down the page, tuned at breakpoints */
	}


.hero-composite, #page-content .hero-composite {
    grid-column: span 1;
	display: grid; 
	align-items: end; 
	/* puts the profile div at the bottom */
	width: 100%;
	position: relative; /* for the absolute positioned profiles */
	}

.hero {
	width: 100%;
	object-fit: cover;
  	object-position: 50% 50%; /* null for now. x from left, y from top */
	}

.hero-composite .profile { /* puts the profile image at the bottom relative to the grid header image area */
	position: absolute; 
	bottom: auto;
	margin-bottom: -1px;
	}

.profile { /* container for the elevation profile */
	display: grid; 
	align-items: end; /* this pulls out some invisible margin */
	width: 100%;
	}
.profile-fill { /* control the elevation image height */
	width: 100%;
    height: 30px;
   }
#page-content .profile-fill { /* control the elevation image height */
    height: 48px;
   }




.grid-item-detail { 
    grid-column: span 1;
   	margin-left: 16px;
	}


.grid-block .host-badge { 
	position: absolute;
	height: 24px;
	width: 24px;
    top: 3px;		/* 4 for 21 change this to BOTTOM for Mobile */
    right: 3px;		/* 4 for 21 change this to LEFT for Mobile */
 	z-index: 100;	/* Stay on top */
	}


/* grid blocks' type object stacking - tuning the clusters together */
.grid-block .ride-info {
	padding-top: 5px; /* to align with the Host block... remove this for Mobile */
	}
.grid-block #events {
	padding-top: 2px; /* events moves the title up, has different overhead spacing */
	}
	
.grid-block .date {
	margin-bottom: 4px;
	}
.location {
	margin-top: 2px;
	}
.data {
	margin-top: -2px;
	}
.grid-block .intro {
	margin-top: 8px;
	}





/* ---------- CONTENT PAGE LAYOUT VAR tagged via #page-content ----------- */

/* hiding the hanging tag graphics on articles for now */
.single-post .pound img {
	display: none;
	}

.subheader { 
	/* Content page context (tags) breadcrumb for posts */
	/* subheader top offset defined up fixed-header */
	display: flex;
	flex-grow: 1; /* Allow to grow and fill available space */
	flex-direction: row; /* Stack children sideways, changes to rows at Mobile */
		/* need to add margin here given the sidebar-filters block got hidden */
	}

.subheader .context {
	display: flex;
	gap: 6px; /* lateral spacing for within series of tags */
	}




.content-intro { 
	/* wrapper for the detail and intro detail column-grid */
	display: grid;
	grid-template-columns: auto auto;
	}

/* these guys need to match the split of content and sidebar */
.detail-left {
	grid-area: 1 / 1;
	}  	
.detail-right {
  	grid-area: 1 / 2;
	justify-self: right;
	}
.intro {
	grid-area: 2 / span 2;
	}

.host-link {
    display: flex;
    flex-direction: row;
	flex-grow: 1;
	gap: 8px;
	}






/* --------- (EVENTUALLY) MAGIC NUMBERS and layout tuning --------- */


#archive-cats, .subheader {
	margin-bottom: 12px;	
	}

.subtitle,
.detail-right, 
.detail-left,
P { /* global paragraph tag */
	margin-bottom: 16px;
	}
#page-content .hero-composite P {
	margin-bottom: 0px;
	}
.hero-composite { /* tighter because of the white space from the Profile */
	margin-bottom: 14px;	
	}


#page-content .content-container {
	/* zero top margin out, the new page sub-header block is doing the top margin now */
	/* provide left/right margins for all the content blocks */
	margin-top: 0;
	padding: 0 16px;  /* TB RL */
	}
#page-content .hero-title,
#page-content .content-container
	/* has 16px padding by default, kicking this inward */
	{
	padding-left: 36px;
	padding-right: 36px;
	}


#page-content .hero-composite .hero {
  	object-position: 50% 60%; /* null for now. x from left, y from top */
	}

.hero-title { /* align to the bottom relative to the grid header image area, needs to clear the elevation profile graphic */
	position: absolute;
	bottom: 0;
	padding: 0 0 48px 16px; /* T R B L */
	max-width: 80%;
	}







/* -------- Typography ---------------- */
/* 
56pt = 3.6em
52pt = 3.2em
48pt = 3.0em
44pt = 2.75em
42pt = 2.625em
40pt = 2.5em
38pt = 2.375em
36pt = 2.25em
32pt = 2.0em
28pt = 1.75em
27pt = 1.687em
26pt = 1.625em
24pt = 1.5em
21pt = 1.3125em
20pt = 1.25em
18pt = 1.125em
16pt = 1.0em
14pt = 0.875em
13pt = 0.8125em
12pt = 0.75em
11pt = 0.6875em
10pt = 0.625em
 9pt = 0.5625em
 8pt = 0.5em
 7pt = 0.4375em
 6pt = 0.375em
 5pt = 0.3125em
*/



.sidebar-context h2 {
	min-width: 0; /* crucial: allows text to shrink and wrap inside flexbox */
	flex: 1 1 auto; /* take available space, shrink if necessary, staart at intrinsic width */
	white-space: normal;
	}  
.sidebar-context h2 { /* was only a only hit the multi-word categories within the h2 */
	display: inline-block; /* ensure it's not inline-block or flex */
	hyphens: auto;
	overflow-wrap: break-word;  /* allow breaks within long words */
	text-wrap: balance;
	min-width: 0; /* needed for letting a squish, for hyphenating */
	max-width: calc(100% - 4px); /* need to allow for a hyphen? */
	word-spacing: -0.0625em; /* within a multi-word category name, value is relative to nominal 0.25em */
	}


h1, h2, h3,
.lockup span,
.on-explor,
.title,
.subnav,
.filters-categories, 
.secondary,
.detail,
.location,
.button { /*   */
    text-transform: uppercase; 
	}

h1, h2, h3, .lockup span { /* all the heads */
	font-weight: 700;
	line-height: 0.8125em; /* tighten up into a structural block */
	text-wrap: balance; /* this favors whole-word wraps, and seems to mitigate the silly everything-hyphenated default result */
	hyphens: auto;
	}


h1, h2, h3 { /* heads */
	font-size: 2.375em;	/* up from 2.25 */
	}	
.context { /* subnav context tags type */
	font-size: 2.0em; /* 1.625 felt too small */
	}

.lockup span { /* ride badge */
	font-size: 2.0em; /* 1.5 is too small, 1.75em good, big 2.25 ?? */
	letter-spacing: -0.01em;
	}
.on-explor { /*override heading treatments for the little sub-brand */
	font-family: "Brandon Grotesque", "Proxima-Nova", "SF Pro", "Helvetica Neue", sans-serif;
	font-size: 0.5625em; /* desktop's minimum seems to be 9pt = 0.5625em */
	font-weight: 500;
	letter-spacing: 0.03em;
	margin-top: -3px; /* pull up to lock up with ride type */
	}


.ride-class-info h2 { /* special one for the gigantic ride-type parent archive */
	font-size: 3.6em;
	}

#page-content h1 { /* content-page big event title */
	font-size: 3.6em;
	margin-left: -2px;	
	}
#page-content .subtitle { /* content-page route-name is sub-title */
	font-size: 2.0em;
	}
#page-content .data { /* just the mileage and elevation stats */ 
	/*font-size: 1.3125em; knocking this back to same size as location */
	}


.detail, .button {
	font-size: 1.0em;
	font-weight: 600;
	}

.copywrite {
	font-size: 0.25em;	
	font-weight: 400;
	}

#page-content .hero-composite .date {
		font-size: 1.0em;
		font-weight: 600;	
		}


/* filters/tags type */
.filters-categories {
	font-size: 0.75em;
	font-weight: 400;
	}
.subnav { /* the little events | reviews nav */
	font-weight: 700;
	}


/* footer type */
.footer {
	font-size: 0.75em;	
	font-weight: 300;
	}
.footer .explor {
	font-size: 0.6875em;
	}


.event-products {
	font-size: 0.875em;	
	}




/* -------- Tree List Styles ---------------- */
.tree-list, .event-products, 
.location-set, .footer ul {
	list-style-type: none;
	padding: 0;
	text-align: left; 
	}
.tree-list li a, 
.event-products li a {
	color: #333;
	text-decoration: none;
	}

.tree-list li a:hover, 
.event-products li a:hover {
	text-decoration: underline;
	}

/* wordpress list-block styling additions */
.wp-block-list {
	padding-inline-start: 24px;
	}





/* ------------- colors ------------- */


/* temporary until we get images worked out */
.hero-composite {
	background-color: #cccccc;
	}

/* main type was 333, a bit light... */

body, .header-fixed { /* header needs to be filled so scroll content isn't visible through it */
	background-color: #FAFAFA;
	color: #060606; /*2B3745 slightly blue? */
	}
#page-content .hero-composite h1,
#page-content .hero-composite .date {
	color: #FEFEFE;	
	}

a.selected {
 	text-decoration: underline 2px;
	} 

h1 a,
h2 a,
h3 a,
.lockup span a,
.secondary a, 
.location a,
.cat-item a {
	color: #060606;
	text-decoration: none;
	}


h1 a:hover,
h2 a:hover,
h3 a:hover,
.lockup span a:hover,
.secondary a:hover, 
.location a:hover,
.subnav a:hover,
.button:hover,
.cat-item a:hover {
	color: #2C668F;
	text-decoration: none;
	}


/* blue links for host and products class address should be clearer tho */
.detail-right a, .wp-block-list a { 
	color: #2C668F;
	font-weight: 600;
	}

.detail-right a:hover, .wp-block-list a:hover {
	color: #657284;
	}

/* add some coloring to the tags in a row */
#page-content .tree-list li {
		color: #2C668F;
		background-color: #E7F0F5;
		padding: 1px 3px;
		border: solid 1px #D9E5EE;
		margin-right: 2px;
		margin-bottom: 4px;
		border-radius: 2px;
		}


.on-explor {
	color: #3B4145;
	}
.footer {
	background-color: #3B4145; /* #333; */
	color: #AAB0B8; /* #CCC; */
	}
.footer a {
	color: #AAB0B8; /* #CCC; */
	text-decoration: none;
	}
.footer a:hover {
	color: #FFF;
	text-decoration: underline;
	}
	
.explor {
	font-family: t26-carbon, sans-serif;
	font-weight: 700;
	color: #FFF;
	letter-spacing: 2px;
	background-color: #F5190A;
	padding: 1px 4px;
	font-weight: 700;
	}	
	
	
/* color tests
.header-fixed {
	background-color: #999999;
	}
.subnav {	
	background-color: #ffcc00;
	}*/





/* png maps brightness tuning percentages https://www.viget.com/articles/equating-color-and-transparency/ */
.profile-fill {
	filter: brightness(98%); /* our #FA background is 2% down from #FF */
	}
.multi .profile-fill, .map-fill {
	filter: brightness(75%); /* = #BF */
	
	}

/* svg sources are pure black, so this softens them to match the type */
.shade {
	filter: brightness(25%); /* 20% = #33 25% = #40 */	
	}




.conditions { /* the whole row with icon, data and temp bar */
	display: flex;
	align-items: center;
	}

.conditions img {
	height: 22px;	
	width: auto;
	margin-right: 8px;
	}

.temp { /* build the temp bar */
	border-radius: 4px;
	padding: 4px 6px 4px 6px; /* T R B L */
	width: 200px;
	display: flex;
	justify-content: space-between;
	margin: 0px 12px; /* T/B  R/L */
	min-height: 16px;
	}
.temp span { /* the tiny hours inside the temp bar */
	font-size: 0.625em;
	font-weight: 600;
	}

/* gradients for temps... built manually now, would like to have these fully automated or driven by tags */
/*

25º #B9D1FF
30º #A0CFFF
35º #71CCFD
40º	#6FDFFD
45º #7BF5FF
50º #94FFEF
55º #77FFB6
60º #50FE5A (light) #32FF3E (saturated)
65º #BEFF00
70º #EBFF00
75º #FFF500
80º #FFEC00
85º #FFD800
90º #FFBA00
95º #FF8900
100 #FF4500
105 #EA3D09

*/
/* temp gradient table */

.temp-25-35 {
  background-image: linear-gradient(to right, #B9D1FF , #A0CFFF , #71CCFD);
}
.temp-25-40 {
  background-image: linear-gradient(to right, #B9D1FF , #71CCFD , #6FDFFD);
}
.temp-25-45 {
  background-image: linear-gradient(to right, #B9D1FF , #71CCFD , #7BF5FF);
}
.temp-25-50 {
  background-image: linear-gradient(to right, #B9D1FF , #6FDFFD , #94FFEF);
}


.temp-30-45 {
  background-image: linear-gradient(to right, #A0CFFF , #71CCFD , #7BF5FF);
}
.temp-30-50 {
  background-image: linear-gradient(to right, #A0CFFF , #6FDFFD , #94FFEF);
}
.temp-30-55 {
  background-image: linear-gradient(to right, #A0CFFF , #7BF5FF , #77FFB6);
}
.temp-30-60 {
  background-image: linear-gradient(to right, #A0CFFF , #7BF5FF , #50FE5A);
}
.temp-30-65 {
  background-image: linear-gradient(to right, #A0CFFF , #94FFEF , #BEFF00);
}

.temp-30-85 {
  background-image: linear-gradient(to right, #A0CFFF , #50FE5A , #FFD800);
}


.temp-35-45 {
  background-image: linear-gradient(to right, #B9D1FF , #6FDFFD , #7BF5FF);
}
.temp-35-50 {
  background-image: linear-gradient(to right, #B9D1FF , #6FDFFD , #94FFEF);
}
.temp-35-55 {
  background-image: linear-gradient(to right, #B9D1FF , #7BF5FF , #77FFB6);
}
.temp-35-60 {
  background-image: linear-gradient(to right, #B9D1FF , #94FFEF , #50FE5A);
}
.temp-35-65 {
  background-image: linear-gradient(to right, #B9D1FF , #94FFEF , #BEFF00);
}
.temp-35-70 {
  background-image: linear-gradient(to right, #B9D1FF , #94FFEF , #EBFF00);
}
.temp-35-75 {
  background-image: linear-gradient(to right, #71CCFD , #77FFB6 , #FFF500);
}
.temp-35-80 {
  background-image: linear-gradient(to right, #71CCFD , #32FF3E , #FFEC00);
}
.temp-35-90 {
  background-image: linear-gradient(to right, #71CCFD , #EBFF00 , #FF8900);
}


.temp-40-45 {
  background-image: linear-gradient(to right, #71CCFD , #6FDFFD , #7BF5FF);
}
.temp-40-50 {
  background-image: linear-gradient(to right, #6FDFFD , #7BF5FF , #94FFEF);
}
.temp-40-55 {
  background-image: linear-gradient(to right, #6FDFFD , #7BF5FF , #77FFB6);
}
.temp-40-60 {
  background-image: linear-gradient(to right, #6FDFFD , #94FFEF , #32FF3E);
}
.temp-40-65 {
  background-image: linear-gradient(to right, #6FDFFD , #77FFB6 , #BEFF00);
}
.temp-40-70 {
  background-image: linear-gradient(to right, #6FDFFD , #77FFB6 , #EBFF00);
}
.temp-40-75 {
  background-image: linear-gradient(to right, #6FDFFD , #77FFB6 , #FFF500);
}


.temp-45-55 {
  background-image: linear-gradient(to right, #7BF5FF , #94FFEF, #77FFB6);
}
.temp-45-60 {
  background-image: linear-gradient(to right, #7BF5FF , #94FFEF, #32FF3E);
}
.temp-45-65 {
  background-image: linear-gradient(to right, #7BF5FF , #77FFB6, #BEFF00);
}
.temp-45-70 {
  background-image: linear-gradient(to right, #7BF5FF , #77FFB6, #EBFF00);
}
.temp-45-75 {
  background-image: linear-gradient(to right, #7BF5FF , #77FFB6, #FFF500);
}
.temp-45-80 {
  background-image: linear-gradient(to right, #7BF5FF , #BEFF00, #FFEC00);
}
.temp-45-85 {
  background-image: linear-gradient(to right, #7BF5FF , #50FE5A, #FFD800);
}
.temp-45-90 {
  background-image: linear-gradient(to right, #7BF5FF , #BEFF00, #FFBA00);
}
.temp-45-95 {
  background-image: linear-gradient(to right, #7BF5FF , #EBFF00, #FF8900);
}

.temp-50-60 {
  background-image: linear-gradient(to right, #94FFEF , #77FFB6, #32FF3E);
}
.temp-50-65 {
  background-image: linear-gradient(to right, #94FFEF , #50FE5A, #BEFF00);
}
.temp-50-70 {
  background-image: linear-gradient(to right, #94FFEF , #50FE5A, #EBFF00);
}
.temp-50-75 {
  background-image: linear-gradient(to right, #94FFEF , #50FE5A, #FFF500);
}
.temp-50-80 {
  background-image: linear-gradient(to right, #94FFEF , #32FF3E, #FFEC00);
}
.temp-50-85 {
  background-image: linear-gradient(to right, #94FFEF , #32FF3E, #FFD800);
}
.temp-50-90 {
  background-image: linear-gradient(to right, #94FFEF , #BEFF00, #FFBA00);
}
.temp-50-95 {
  background-image: linear-gradient(to right, #94FFEF , #EBFF00, #FF8900);
}


.temp-55-65 {
  background-image: linear-gradient(to right, #77FFB6 , #50FE5A, #BEFF00);
}
.temp-55-70 {
  background-image: linear-gradient(to right, #77FFB6 , #50FE5A, #EBFF00);
}
.temp-55-75 {
  background-image: linear-gradient(to right, #77FFB6 , #50FE5A, #FFF500);
}
.temp-55-80 {
  background-image: linear-gradient(to right, #77FFB6 , #BEFF00, #FFEC00);
}
.temp-55-85 {
  background-image: linear-gradient(to right, #77FFB6 , #EBFF00, #FFD800);
}
.temp-55-90 {
  background-image: linear-gradient(to right, #77FFB6 , #FFF500, #FFBA00);
}
.temp-55-95 {
  background-image: linear-gradient(to right, #77FFB6 , #FFEC00, #FF8900);
}


.temp-60-70 {
  background-image: linear-gradient(to right, #50FE5A , #BEFF00, #EBFF00);
}
.temp-60-75 {
  background-image: linear-gradient(to right, #50FE5A , #EBFF00, #FFF500);
}
.temp-60-80 {
  background-image: linear-gradient(to right, #50FE5A , #EBFF00, #FFEC00);
}
.temp-60-85 {
  background-image: linear-gradient(to right, #50FE5A , #EBFF00, #FFD800);
}
.temp-60-90 {
  background-image: linear-gradient(to right, #50FE5A , #FFF500, #FFBA00);
}
.temp-60-95 {
  background-image: linear-gradient(to right, #50FE5A , #FFEC00, #FF8900);
}


.temp-65-75 {
  background-image: linear-gradient(to right, #BEFF00 , #EBFF00 , #FFF500);
}
.temp-65-80 {
  background-image: linear-gradient(to right, #BEFF00 , #EBFF00, #FFEC00);
}
.temp-65-85 {
  background-image: linear-gradient(to right, #BEFF00 , #FFF500 , #FFD800);
}
.temp-65-90 {
  background-image: linear-gradient(to right, #BEFF00 , #FFF500 , #FFBA00);
}
.temp-65-95 {
  background-image: linear-gradient(to right, #BEFF00 , #FFEC00 , #FF8900);
}

.temp-70-80 {
  background-image: linear-gradient(to right, #EBFF00 , #FFF500, #FFEC00);
}
.temp-70-85 {
  background-image: linear-gradient(to right, #EBFF00 , #FFF500, #FFD800);
}
.temp-70-90 {
  background-image: linear-gradient(to right, #EBFF00 , #FFEC00, #FFBA00);
}
.temp-70-95 {
  background-image: linear-gradient(to right, #EBFF00 , #FFD800, #FF8900);
}

.temp-75-85 {
  background-image: linear-gradient(to right, #FFF500 , #FFEC00 , #FFD800);
}
.temp-75-90 {
  background-image: linear-gradient(to right, #FFF500 , #FFD800 , #FFBA00);
}
.temp-75-95 {
  background-image: linear-gradient(to right, #FFF500 , #FFD800 , #FF8900);
}

.temp-80-90 {
  background-image: linear-gradient(to right, #FFEC00 , #FFD800 , #FFBA00);
}
.temp-80-95 {
  background-image: linear-gradient(to right, #FFEC00 , #FFD800 , #FF8900);
}

.temp-85-95 {
  background-image: linear-gradient(to right, #FFD800 , #FFBA00 , #FF8900);
}







/* build the Host badges  */
/* div shell  */

.host-badge, .customer-badge {
	border-radius: 4px;
    padding-top: 0px; /* T R B L */
    display: flex;
	justify-content: center;
	align-items: center;
	font-family: "URW-Din", "Proxima-Nova", "SF Pro", "Helvetica Neue", sans-serif;
	font-weight: 900;
	text-transform: uppercase; 
	}
.host-badge { /* are smaller, for now */
	width: 24px;
	height: 24px;
	font-size: 0.75em;
	}

.customer-badge { /* bigger one for the header */
	width: 26px;
	height: 26px;
	font-size: 0.875em;
	}

.customer-badge, .customer-badge a, .customer-badge a:hover, 
.host-badge, .host-badge a, .host-badge a:hover {
	color: #FFFFFF;
	text-decoration: none;
	}


/* fixed color assignments for now (some future JS tool can do this)  */
.ad { /* american diabetes foundation, tour de cure */
	background-color: #9E1010;
	}
.bm { /* bikemonkey, bike monkey */
	background-color: #313131;
	}
.co { /* cycleoregon, cycle oregon */
	background-color: #f8bf00;
	}
.ff { /* fremont freewheelers, primavera */
	background-color: #589b37;
	}
.gh { /* grasshopper adventure series */
	background-color: #49A442;
	}
.rb { /* RBC Gran Fondo */
	background-color: #126aad;
	}
.rh { /* RH */
	background-color: #FF8900;
	}
.hi { /* placeholder for customer account */
	background-color: #FF8900;
	}






/* Responsive Breakpoints, primarily for margins and type scaling up here */


/* -------- XL: 12 Columns ------------------------------------------------ */
@media (min-width: 1501px) {


	/* outer margins relative to window */
	/* side margin minus the hanging Left-side icons */	
	.header-fixed,
	.content-hero,
	.subheader,
	.footer,
	.content-container
		{ 
		margin-left: 8%; 
		margin-right: 8%;
		}	

	/* restrict the width a bit for ginormous screens */
	#page-content section p, 
	#page-content .intro p, 
	.intro .subtitle,
	.wp-block-list { /* restrict the content width for readability */
		max-width: 67%; /* match with the 3x image gallery */
		}


	/* manage the density for the stacked blocks, nominal 24 (plus the hero's 16px bottom) */
	.grid-block { 
		margin-bottom: 24px;
		}


	.hero-composite, 
	.hero {	
		height: 230px;
		}

	#page-content .hero-composite, 
	#page-content .hero-composite .hero { /* the image fill */
		height: 33vh; /* flexible proportion relative to the view height :) */
		min-height: 380px;
		}


}





/* -------- Desktop: 8 Columns, bigger margins ---------------------------- */
@media (min-width: 1161px) and (max-width: 1500px) {


	/* side margin minus the hanging Left-side icons */
	.header-fixed,
	.content-hero,
	.subheader,
	.footer,
	.content-container
		{
		margin-left: 6%;	
		margin-right: 6%;
		}	


	/* restrict the content width for readability */
	#page-content section p,
	#page-content .intro p,
	.intro .subtitle,
	.wp-block-list { 
		max-width: 82%;
		}


	.hero-composite, 
	.hero {	
		height: 230px;
		}

	#page-content .hero-composite, 
	#page-content .hero-composite .hero { /* the image fill */
		height: 30vh; /* flexible proportion relative to the view height :) */
		min-height: 340px;
		}

}







/* -------- Tablet (portrait): 8 Columns first major change, gets tight side margins -------------------------------------------- */
/* -------- Tablet (portrait): 8 Columns first major change, gets tight side margins -------------------------------------------- */
@media (min-width: 748px) and (max-width: 1160px) {



	.header-fixed,
	.content-hero,
	.subheader,
	.footer,
	.content-container
		{ 
		margin-left: 0; 
		margin-right: 0;
		}	
	.sidebar {
		width: 25vw; /* nominal width, adapted at breakpoints  */
		}
	/* required to offset from the sidebar column */
	.page-sidebar .content-body {
		margin-left: calc(25vw + 8px); /* push out past the FIXED sidebar */
		margin-right: 0px;
		}



	.grid-block { /* the card's outer wrapper */
		grid-template-columns: 45% 55%; /* will need to be set to ROWS for mobile */
		margin-bottom: 24px; /* spacing between blocks down the page, tuned at breakpoints */
		}

	/* we're zeroing the margins, but need to bump the grid content off the scroll (when viewed on desktop) */
	/* need a nominal kick off the scroll area */
	.grid .grid-item-detail
	 {
		padding-right: 16px;
		}



	/* restrict the content width for readability */
	#page-content section p, 
	#page-content .intro p, 
	.intro .subtitle,
	.wp-block-list { 
		max-width: 86%;
		}


	.hero-composite, 
	.hero {
		height: 210px;
		}
	.profile-fill {
		height: 20px;
	   }


	/* these are content page hero, not the grid heros */
	#page-content .hero-composite, 
	#page-content .hero-composite .hero { /* the image fill */
		height: 25vh; /* flexible proportion relative to the view height :) */
		min-height: 320px;
		}
	#page-content .hero-title {
		padding-bottom: 42px; /* bottom margin over the Profile-fill, was 48 */
		}
	#page-content .profile-fill { /* control the elevation image height */
		height: 36px;
		}
	
}









/* ------- Mobile landscape: smaller sizes, tighter everywhere ------------------------------------ */
/* ------- Mobile landscape: smaller sizes, tighter everywhere ------------------------------------ */
/* ------- Mobile landscape: smaller sizes, tighter everywhere ------------------------------------ */
@media only screen and (orientation : landscape) and (max-height: 441px) {

/* deal with weird auto-scaling in landscape */
	body{
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		text-size-adjust:100%;
	  }

	/* go full width, looks funny viewed on desktop but works nicely on mobile */
	.header-fixed,
	.content-hero,
	.subheader,
	.footer,
	.content-container
		{
		margin-left: 0px;
		margin-right: 0px;
		}  


	.header-fixed { 
		padding-top: 6px; /* bump the rows off the top edge */
		height: 46px; /* content and padding */
		}
	.page-sidebar .content-container,
	#page-content {
    	margin-top: 48px; /* Make space for the fixed header, plus 2px */
		}




/* ----- tweaks ----- */
	/* we're zeroing the margins and tightening the 36px 'edges' down to 32 */
	.leftmark {
		flex-basis: 28px; /* narrow the badge area */
		}
	.ride-badge { 
		width: 22px; 
		height: auto;
		margin-right: 3px; /* bump the center-align within the fixed 36px block */
		margin-top: 1px; /* adjust to match the lockup type's vertical positioning */
		}

	/* need a nominal kick off the scroll area (when viewed on desktop) */
	.grid-item-detail,
	.subheader {
		padding-right: 8px;
		}
	.header-right {
		padding-right: 28px;
		}
	#page-content .hero-title,
	#page-content .content-container
		/* has 16px padding by default, kicking this inward */
		{
		padding-left: 28px;
		padding-right: 28px;
		}

	.sidebar {
		width: 25vw; /* nominal width, adapted at breakpoints  */
		}
	/* required to offset from the sidebar column */
	.page-sidebar .content-body {
		margin-left: calc(25vw + 8px); /* push out past the FIXED sidebar */
		margin-right: 0px;
		}


	.filters-block {
		margin-bottom: 26vh; /* space off the bottom
		Auto works, bit sits high and shifts with different context strings...
		28vh good... maybe just centered with Auto? 
		trying to find the right height while avoiding the DVH jumping on mobile */
		}

	/* restrict the content widths for readability */
	#page-content section p, 
	#page-content .intro p, 
	.intro .subtitle,
	.wp-block-list { 
		max-width: 94%;
		}


	/* for this super-short screen height, let's tighten up the hero and profile heights */
	.hero-composite, 
	.hero {
		height: 190px;
		}
	.profile-fill {
		height: 20px;
	   }

	/* content page hero only, NOT the grid heros */
	#page-content .hero-composite, 
	#page-content .hero { /* the image fill */
		height: 190px; /* fixed value now given mobile's funky dynamic vh */
		}

/* 
56pt = 3.6em
52pt = 3.2em
48pt = 3.0em
44pt = 2.75em
42pt = 2.625em
40pt = 2.5em
38pt = 2.375em
36pt = 2.25em
32pt = 2.0em
28pt = 1.75em
27pt = 1.687em
26pt = 1.625em
24pt = 1.5em
21pt = 1.3125em
20pt = 1.25em
18pt = 1.125em
16pt = 1.0em
14pt = 0.875em
13pt = 0.8125em
12pt = 0.75em
11pt = 0.6875em
10pt = 0.625em
 9pt = 0.5625em
 8pt = 0.5em
 7pt = 0.4375em
 6pt = 0.375em
 5pt = 0.3125em
*/
		.lockup span { /* ride badge */
			font-size: 1.625em; /* 2.0 is large screens */
			}

		h1, h2, h3 { /* all the heads */
			font-size: 2.5em;	
			line-height: 0.8125em; /* tighten up into a structural block */
			}
		
		.context { /* subnav context tags type */
			font-size: 1.625em; /* was 1.3125, but want bigger */
			}
		
		#page-content h1 { /* content-page big event title */
			font-size: 2.75em; /* 2.25 = 36pt, 2.625 = 42pt, 2.75 44pt, 3.0 = 48pt */
			}
		#page-content .subtitle { /* content-page route-name sub-title */
			font-size: 1.625em; /* was 1.125 */
			}
		
		.ride-class-info h2 { /* special one for the gigantic ride-type parent archive */
			font-size: 3.6em;
			}

}





/* ---------- Mobile: Drops to a stacked 1 Column layout  -------------------------------------------- */
/* ---------- Mobile: Drops to a stacked 1 Column layout  -------------------------------------------- */
/* ---------- Mobile: Drops to a stacked 1 Column layout  -------------------------------------------- */
/* ---------- Mobile: Drops to a stacked 1 Column layout  -------------------------------------------- */
@media only screen and (max-width: 747px) {

/* big set of overrides to pull the layout into single column and stack in the sidebar stuff... this is just the architecture, design details follow */
	.page-sidebar .content-container {
        flex-direction: column; /* Stack sidebar and content */		
		}

	/* go full width, looks funny viewed on desktop but works nicely on mobile */
	.header-fixed,
	.content-hero,
	.subheader,
	.footer,
	.content-container
		{
		margin-left: 0px;
		margin-right: 0px;
		}  

	/* style update for new subnav, bump the mark off the edge :) */
	.leftmark {
		flex-basis: 28px; /* narrow the badge area */
		}
	.leftmark {
		margin-left: -15px;
		}
	.ride-badge { 
		width: 24px; 
		height: auto;
		margin-right: 3px; /* bump the center-align within the fixed 36px block */
		margin-top: 1px; /* adjust to match the lockup type's vertical positioning */
		}


	/* style update for new subnav, hide the pound here too */
	.pound img {
		display: none;
		}


	#page-content .hero-title,
	#page-content .content-container
	/* has 16px padding by default, kicking this inward for tablet */
		{
		padding-left: 16px;
		padding-right: 16px;
		}


	.header-fixed {
		height: 52px; /* content and padding */
		padding-top: 10px; /* bump the rows off the top edge */
		}
	.page-sidebar .content-container, 
	#page-content {
    	margin-top: 52px; /* Make space for the fixed header, plus 2px */
 		}



	.header-right { 
		padding-right: 16px;
		}

	.page-sidebar .content-body { /* override for the sidebar offset */
        margin-left: 16px; /* Reset the left margin used for clearing the sidebar */
		}
	.content-body.grid { 
        margin-left: 0px; /* Remove any left margin so the gridblocks go full-bleed */
		}

	.sidebar {
        position: relative; /* Remove sticky positioning */
        top: 0; /* Remove top offset */
		overflow-y: clip; /* auto was causing some internal vertical scroll */
		height: auto; /* Allow content to expand naturally */
		width: 100%; /* full width for mobile */
		}
	.sidebar-context, 
	.sidebar-filters {
        position: relative; /* Remove sticky positioning */
        top: 0; /* Reset sticky position */
        margin-bottom: 0; /* Reset sticky position */
        height: auto;
		}


	.filters-block {  /* stack space for the filters now they're under the sub-title on mobile */
		margin-bottom: 0; /* re-set the big floating lower margin from sidebar layout */
		}
	/* need to add margin here given the sidebar-filters block got hidden */
	.filters-categories { /* the row of dates and categories from sidebar */
		padding-top: 8px;
		padding-bottom: 10px; /* instead of margin, so scrollbar has somewhere to go */
		}

	/* do some cleverness to get the cats into a side-scrolling row, with right-align emphasis */
	.filters-categories {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		justify-content: flex-end;   /* ← the key: this recreates “right edge anchoring” */
		scrollbar-width: thin;
		margin-bottom: 0;
		font-size: 0.8125em;
		}
    .filters-categories::-webkit-scrollbar {
        height: 6px;
    }
	.filters-categories .tree-list {
		display: flex; /* so we can manipulate the children */
		}
	.cat-item { /* lock a long category name into the row */
		text-wrap: nowrap;
		}
	.categories { /* are now a X scrolling row, add a right margin for when they fill up their space */
        display: flex;
        flex-direction: row;
		direction: ltr;
		}
	.years { /* also in the categories scroller, pull Year archive links slightly off the left edge */
        display: flex;
        flex-direction: row;
		margin-left: 8px;
		direction: ltr;
		}
	.subnav {
		/* want a vertical pipe... before? */
		margin-right: 16px;
		}
		
	/* first approach to flipping the sequence for these when pulled into a row, 
	then tried using "direction: rtl;" which does that as well as right-aligns the div 
	now back to 2,1 flex swap */
	.subnav {order: 3;}
	.categories {order: 2;}
	.years {order: 1;}


	/* want the years to ascend from left to right */
	.years .tree-list {
		flex-direction: row-reverse;
		}

	/* pull the filter cats into rows */            
	.tree-list li,
	.location-set li { 		
		display: inline-block;
		}

	/* plain tags in a row, with a bit of extra space */
	.filters-categories .tree-list li {
		color: #2C668F;
		margin-right: 6px; /* can't use gap given these aren't in flex */
		}


	/* colored-fill blocks wrapped around the tags in a row */
	/* .filters-categories .tree-list li {
		color: #2C668F;
		background-color: #E7F0F5;
		padding: 1px 3px;
		border: solid 1px #D9E5EE;
		margin-right: 2px;
		border-radius: 2px;
		}
		/**/




/* ----------- this is MOBILE portrait --------- */


	/* new layout for the intro details area */
	.detail-left {grid-area: 1 / span 2;}
	.intro {grid-area: 2 / span 2;}
	.detail-right {grid-area: 3 / span 2;}

	#events .intro {grid-area: 3 / span 2;}
	#events .detail-right {grid-area: 2 / span 2;}
	
	.detail-left, .detail-right {
		margin-bottom: 24px;
		}
	
	.detail-right { /* change the margins now it's dropped over to the left side */
		padding-top: 16px;
		padding-left: 0px;
		width: 100%;
		}


	/* mange the density for the stacked content grid blocks */
	.grid-block { 
		margin-bottom: 36px; /* open this up a bit for the stacked view (nominal 32px, XL screen also gets 36)*/
		}

	/* we're zeroing the margins, but need some extra to bump grid content off the scroll (when viewed on desktop) */
	.grid-item-detail { 
		margin-right: 12px;
		}



	.grid-block { /* grid-blocks switch to stacked single column */
		grid-template-columns: repeat(1, 1fr); /* resets the column to 1 */
		grid-template-rows: auto auto; /* now is a stack */
		}
	.hero-composite, 
	.hero {
		height: 220px; /* fixed value now given mobile's funky dynamic vh */
		}

	.profile-fill {
		height: 30px; /*  30px in the bigger breaks */
	   }
	.grid-block .host-badge {
		top: calc(220px - (16px + 28px)); /* calc down from hero height for Mobile, minus space for elevation */
		left: 16px;	/* bumped over to LEFT-align for Mobile */
		}
	.grid-block .ride-info {
		padding-top: 0px; /* remove the bump down from the top of the side-by-side layouts */
		}



/* mobile override to hide the upper cats on archives in this specific viewport */
/*	#archive-cats .sidebar-filters,*/
	.filters-block .pound {
		display: none;
		}
	#archive-cats { /* added this now we're showing the categories on mobile */
		margin-bottom: 0px;	
		}
	


/* ----- tweaks ----- */


	.hero-composite {
		margin-bottom: 8px; /* space below the list-grids on indexes, was 14px */
		}
	#page-content .hero-composite  {
		margin-bottom: 8px; /* space below the content page, was 14px */
		}
	
	#page-content .hero-composite,
	#page-content .hero	{
		height: 310px;
		}
	#page-content .profile-fill {
		height: 36px;
	   }

	.hero-title {
		max-width: 95%;
		padding-bottom: 42px; /* bottom margin over the Profile-fill, was 48 */
		}

/* 
56pt = 3.6em
52pt = 3.2em
48pt = 3.0em
44pt = 2.75em
42pt = 2.625em
40pt = 2.5em
38pt = 2.375em
36pt = 2.25em
32pt = 2.0em
28pt = 1.75em
27pt = 1.687em
26pt = 1.625em
24pt = 1.5em
21pt = 1.3125em
20pt = 1.25em
18pt = 1.125em
16pt = 1.0em
14pt = 0.875em
13pt = 0.8125em
12pt = 0.75em
11pt = 0.6875em
10pt = 0.625em
 9pt = 0.5625em
 8pt = 0.5em
 7pt = 0.4375em
 6pt = 0.375em
 5pt = 0.3125em
*/

		.lockup span { /* ride badge */
			font-size: 1.625em; /* 2.0 is large screens */
			/*letter-spacing: -0.01em;*/
			}


		h1, h2, h3 { /* all the heads */
			font-size: 2.5em;	
			line-height: 0.8125em; /* tighten up into a structural block */
			}
		
		.context { /* context subnav tags type */
			font-size: 1.625em; /* was 1.3125, but want bigger */
			margin-left: 0px; /* type block seems to have its own margin */	
			}
		
		#page-content h1 { /* content-page big event title */
			font-size: 2.5em;  /* was 2.375, but want bigger */
			}
		#page-content .subtitle { /* content-page route-name sub-title */
			font-size: 1.625em;
			}
		
		.ride-class-info h2 { /* special one for the gigantic ride-type parent archive */
			font-size: 3.6em;
			}


	.footer {
		/* display: block; */ /* Stack Footer children ... or do they fit?  */
		padding: 20px 16px 24px 16px; /* T R B L */
		}
	.footer div + div {
		/* padding-top: 8px; */
		}

}