/*
Theme Name: Ride Events Hybrid Theme
Theme URI: https://ride-events.co
Author: Ryan Hicks
Description: Hybrid PHP + FSE WordPress theme
Version: 1.1224g
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; /* 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 */
	padding-top: 2px; /* bump the logos and things off the top edge */
	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 ---------------------------- */
/* also shared with Subheader children */
.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 0; /* stays only as wide as its content */
  	align-items: top;
  	justify-content: right;	
	}



/* ?????? RENAME THESE = ALSO USED FOR SUBHEADER icon pair */
/* utility icons */
.header-icon { /* containers for the icons */
    display:flex;
  	align-items: center;
  	padding: 0;
  	margin: 0;
	}
.calendar img { 
	width: 22px;
	height: auto;
	}
.share {
	
	}
.save {
	
	}		

.header-icon + .header-icon { /* space between for when we have user and calendar in the top bar */
	margin-left: 16px;
	}






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

.header-fixed {
	height: 60px; /* gets reduced to 48px at smaller breakpoints, margin added at content-container offset */
	}
.content-container, .subheader {
	margin-top: 60px; /* Make space for the fixed header */
	}
.content-container {
	/* outer margins master to wrap the (two) main columns, used on all pages */
	/* full-bleed blocks like headers, sub-headers, content-hero are NOT included in this */
    min-height: calc(100vh - 60px); /* 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 - 60px); /* 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-grid .content-container {
	/* side-by-side sidebar column, switches to 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-grid .content-body {
	margin-left: calc(8px + 20vw); /* required to push content 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;
	}
.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: center;
	}
.badge { 
	width: 24px;
	height: auto;
	margin-top: 1px; /* to match the type's vertical positioning */
	}
.tinyicon {
	height: 16px;
	width: auto;
	}
.pound {
	margin-top: 4px; /* shift down to align with the subhead type */		
	height: 22px;
	}
.on-explor {
	padding-left: 1px; /* shift slightly to align with the larger RIDE type above */
	}
.lockup P { /* because general P have 16px bottom-margins */
	margin-bottom: 0;
	}




/* Section inside main-content to push footer down */
section {
	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: 21px;
	width: 21px;
    top: 4px;		/* change this to BOTTOM for Mobile */
    right: 4px;		/* 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 .date {
	margin-bottom: 4px;
	}
.location {
	margin-top: 2px;
	}
.data {
	margin-top: -2px;
	}






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


.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 h2 {
	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: 8px;	
	}

.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%;
	}






/* -------- 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;
	}
.location-set li {
	display: inline-block;
	}

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



/* -------- Typography ---------------- */
/* 
56pt = 3.6em
52pt = 3.2em
48pt = 3.0em
42pt = 2.625em
36pt = 2.25em
32pt = 2.0em
28pt = 1.75em
27pt = 1.687em
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
*/


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


h1, h2, h3 { /* head and context */
	font-size: 2.0em;	
	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;
	}

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

.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 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 */
	}


#page-content h3 {
	font-size: 2.625em; /* 2.25 = 36, 2.625 = 42, 3.0 = 48 */
	}
#page-content .data { /* just the mileage and elevation stats */ 
	font-size: 1.3125em;
	}



.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.625em;	
	font-weight: 400;
	margin-top: -4px;
	}

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

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

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

/* filters/tags type */
.filters-categories {
	font-size: 0.75em;
	font-weight: 400;
	}


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


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




/* ------------- 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;
	}
#page-content .hero-composite h3,
#page-content .hero-composite .date {
	color: #FEFEFE;	
	}


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


h1 a:hover,
h2 a:hover,
h3 a:hover,
.secondary a:hover, 
.location 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;
	}

.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;
		}



.footer {
	background-color: #333;
	color: #CCC;
	}
.footer a {
	color: #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;
	}	
	
	




/* 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 */
	
	}
.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-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-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, .user {
	width: 21px;
	height: 21px;
	border-radius: 4px;
    padding-top: 0px; /* T R B L */
    display: flex;
	justify-content: center;
	font-family: "URW-Din", "Proxima-Nova", "SF Pro", "Helvetica Neue", sans-serif;
	font-size: 0.75em;
	font-weight: 900;
	line-height: 21px;
	text-transform: uppercase; 
	}

.user, .user a, .user 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;
	}






/* 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 h3,
	.wp-block-list { /* restrict the content width for readability */
		max-width: 70%;
		}


	/* 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: 30vh; /* flexible proportion relative to the view height :) */
		min-height: 310px;
		}

	#page-content h3 {
		font-size: 3.0em; /* 2.25 = 36, 2.625 = 42, 3.0 = 48 */
		}

	
}





/* -------- 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 h3,
	.wp-block-list { 
		max-width: 74%;
		}


	.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: 310px;
		}

}







/* -------- 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-grid .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 */
	#page-grid .grid-item-detail,
	.header-fixed, 
	.subheader {
		padding-right: 12px;
		}


	.header-fixed {
		height: 48px; /* down from 60 on the big screens */
		}
	#page-grid .content-container,
	.subheader {
    	margin-top: 54px; /* */ /* Make space for the fixed header, plus any extra margin */
		}

	/* restrict the content widths for readability */
	#page-content section, 
	#page-content .intro p, 
	.intro h3 { 
		max-width: 76%;
		}


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

	.hero-title {
		padding-bottom: 42px; /* bottom margin over the Profile-fill, was 48 */
		}
	#page-content .profile-fill { /* control the elevation image height */
		height: 36px;
	   }

	/* 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: 260px;
		}
	#page-content .profile-fill {
		height: 30px;
	   }


}









/* ------- 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: 4px;
		height: 48px;
		}
	#page-grid .content-container,
	.subheader {
    	margin-top: 54px; /* Make space for the fixed header, plus any extra margin */
		}




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

	/* 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 */
	.header-fixed,
	#page-grid .grid-item-detail,
	.subheader {
		padding-right: 8px;
		}

	.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, 
	#page-content .intro p, 
	.intro h3 { 
		max-width: 90%;
		}


	/* 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, 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 */
		}

	#page-content h3 {
	font-size: 2.625em;
		}



}





/* ---------- 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-grid .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;
		}  


	#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: 48px;
		padding-right: 8px;	
		}

	#page-grid .content-container, 
	.subheader {
    	margin-top: 54px; /* Make space for the fixed header, plus any margin */
 		}


	.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 */
		}
	#page-grid .content-body { /* override for the sidebar offset */
        margin-left: 0px; /* Remove the left margin used for clearing the sidebar */
		}
	.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-top: 4px;
		margin-bottom: 0; /* re-set the big floating lower margin from sidebar layout */
		}

	/* 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;
/*		direction: rtl; */
		}
    .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;
		margin-right: 16px;
		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;
		}
	/* 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 */
	.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: 4px; 
		}


	/* 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;}

	.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: 210px; /* fixed value now given mobile's funky dynamic vh */
		}

	.profile-fill {
		height: 30px; /*  30px in the bigger breaks */
	   }
	.grid-block .host-badge {
		top: calc(210px - (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;	
		}
	
	/* need to add margin here given the sidebar-filters block got hidden */
	.filters-categories {
		padding-bottom: 8px; /* instead of margin, so scrollbar has somewhere to go */
		}


/* ----- 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: 260px;
		}
	#page-content .profile-fill {
		height: 32px;
	   }

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

	#page-content h3 {
	font-size: 2.25em; /* 2.25 = 36, 2.625 = 42 */
		}


	.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; */
		}

}