@charset "utf-8";
/**
 * CSS Document for critical css to get added inline in the document head. 
 * Gets minified before output. ¯\_(ツ)_/¯
 *
 */



/* CSS Variables - These may be overwritten by child theme */
:root {

	--max_width_narrow: 33.75rem;    /* 540px */
	--max_width_text: 45rem;         /* 720px */
	--max_width_article: 49.375rem;  /* 790px */
	--max_width_section: 62.1875rem; /* 995px */
	--max_width_wide: 75rem;         /* 1200px */

	
	/* Default vertical spacing unit is 16px                     @16  */
	--space_unit: 1rem;
	--space_xxxsmall:    calc( 0.125 * var(--space_unit) );   /* 2px  */
	--space_xxsmall:     calc( 0.25 * var(--space_unit) );    /* 4px  */
	--space_xsmall:      calc( 0.5 * var(--space_unit) );     /* 8px  */
	--space_small:       calc( 0.75 * var(--space_unit) );    /* 12px */
	--space_normal_14:   calc( 0.875 *var(--space_unit) );    /* 14px */
	--space_normal:      var(--space_unit);                   /* 16px */
	--space_normal_18:   calc( 1.125 * var(--space_unit) );   /* 18px */
	--space_medium:      calc( 1.25 * var(--space_unit) );    /* 20px */
	--space_big:         calc( 1.5 * var(--space_unit) );     /* 24px */
	--space_xbig:        calc( 1.75 * var(--space_unit) );    /* 28px */
	--space_xxbig:       calc( 2 * var(--space_unit) );       /* 32px */
	--space_large:       calc( 2.25 * var(--space_unit) );    /* 36px */
	--space_xlarge:      calc( 2.5 * var(--space_unit) );     /* 40px */
	--space_xxlarge:     calc( 2.75 * var(--space_unit) );    /* 44px */
	--space_xxxlarge:    calc( 3 * var(--space_unit) );       /* 48px */
	--space_xxxxlarge:   calc( 3.5 * var(--space_unit) );     /* 56px */
	--space_xxxxxlarge:  calc( 4 * var(--space_unit) );       /* 64px */
	--space_xxxxxxlarge: calc( 5 * var(--space_unit) );       /* 80px */

	/* Not crazy about the big keyword... */

	
	/* 7-21-21 - This seems a little easier for elastic gutters */
	--gutter_width: 5vw;
	--gutter_width_negative: calc( -1 * var(--gutter_width) );
	
	/* Seems like a good default border-radius? */
	--border_radius: 3px;

	/* Default Colors - Intended to be overridden */
	--primary_color_light: #1CE; /* light blue (ice) */
	--primary_color: #10ADED;    /* blue (loaded) */
	--secondary_color: #BADA55;  /* light green (badass) */
	--contrast_color: #FB1;      /* yellow (FBI)*/
	--error_color: #B00B1E;      /* red (boobie) */
	--success_color: #60DE55;    /* green (godess) */
	--notice_color: #FB1;

	/* 6-6-19 - let's take advantage of css color keywords: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */
	--color_success: green;
	--color_error: red;
	--color_notice: wheat;

	/* Grays */
	--gray_xxlight: #fafafa;
	--gray_xlight: #f8f8f8;
	--gray_light: #efefef;
	--gray: #ececec;
	--gray_dark: #ababab;
	--gray_xdark: #666;

	--border_color: var(--gray_light);

	--box_shadow: 0 2px 4px 0 rgba(0,0,0,0.08);

	/* Texts */
	/*
	--font_size_text: 1rem;
	--line_height_text: 1.5;
	--text_color: #1A1A1A;
	--heading_color: #111;
	*/
	
	--text_font: sans-serif;
	
	--link_color: var(--primary_color);


	--button_background_color: var(--primary_color);
	--button_color: white;



	/* Custom scrollbars */
	--scrollbar-size: .375rem;
	--scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
	--scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
	--scrollbar-track-color: transparent;
	--scrollbar-color: rgba(0,0,0,.2);
	--scrollbar-color-hover: rgba(0,0,0,.3);
	--scrollbar-color-active: rgb(0,0,0);
	
	/* 3-18-20 Seems nice - get's rid of js solution, but doesn't work in Safari :( */
	/* TODO: Adjust js to only affect safari? */
	scroll-behavior: smooth;
	
	--table_border_color: var(--border_color);
	
}


/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: var(--line_height_text);	
}




table {
	margin: var(--space_normal) 0;
	width: 100%;
	height: auto;
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid var(--table_border_color);
}





/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: var(--link_color, royalblue);
}

a:visited {

}

a:hover, a:focus, a:active {

}

a:focus {
	outline: thin dotted;
}

/* 12-1-20 - But why?... */
/*
a:hover, a:active {
	outline: 0;
}
*/

/* This seems better as you know a link was clicked? */
a:active {
	outline: thin dotted;	
}

/* Buttons with white text are problematic on white backgrounds */
a.button:focus {
	outline-color: var(--button_background_color);
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

/* Some links don't look like links :( */
a.text {
	font-weight: normal;
	/* color: var(--text_color) !important; */
	color: inherit;	
}


/*--------------------------------------------------------------
## Buttons
--------------------------------------------------------------*/
button,
.button {
	display: var(--button_display, inline-block);
	border-radius: var(--button_border_radius, 0);
	padding: var(--button_padding_v, var(--space_xsmall)) var(--button_padding_h, var(--space_small));
	background-color: var(--button_background_color, var(--primary_color) );
	color: var(--button_color, inherit);
	border-width: var(--button_border_width, 1px);
	border-style: var(--button_border_style, solid);
	border-color: var(--button_border_color, transparent);
	font-family: var(--button_font, inherit);
	font-size: var(--button_font_size, inherit);
	font-weight: var(--button_font_weight, normal);
	line-height: var(--button_line_height, inherit);
	text-decoration: var(--button_text_decoration, none);
	text-transform: var(--button_text_transform, none);
}

button.ghost,
.button.ghost {
	background-color: transparent;
	color: inherit;
	border: 1px solid currentColor;
}

button.white,
.button.white {
	background-color: white;
	color: var(--primary_color);
}

button.accordion,
.button.accordion {
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--accordion_button_border_color, currentColor);
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	border-radius: var(--button_border_radius, var(--border_radius));
}

/* 3-12-20 This should probably be left to child themes? */
button.accordion:after,
.button.accordion:after {
	font-family: 'ftm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\f107";
	margin-left: auto;
}
button.accordion.toggled:after,
.button.accordion.toggled:after {
	content: "\f106";
}

/* Smaller buttons */
button.small,
.button.small {
	padding: var(--space_xxxsmall) var(--space_xsmall);
	font-size: 0.875em;
}

/* Sometimes buttons look like links */
button.link {
	padding: 0;
	background: none;
	background-color: transparent;
	color: var(--link_color);
	text-decoration: underline;
}

button.text-button {
	padding: 0;
	background: none;
	background-color: transparent;
	color: var(--link_color);
}

/* Submenu toggles should be as small as the text they're with */
button.sub-menu-toggle {
	padding: 0;
	line-height: 1;
}



/* Utiltiy class to add an angle after the text */
.angle-right {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	/* color: inherit; /* Not sure about this, but seems right... Not the type of link to be used in content. */
}
.angle-right:after {
	font-family: 'ftm' !important;
	speak: none;
	font-style: inherit;
	font-weight: inherit;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\f105";
	margin-left: 0.5rem;
}





.disabled, [disabled] {
	opacity: 0.5;
}





/*******************
 Site Header 
 ******************/

.site-logo a {
	text-decoration: none;	
}





/*--------------------------------------------------------------
## Singles
--------------------------------------------------------------*/
/*
.single-post-featured-image {
	padding: 0 var(--gutter_width);
}
*/


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.entry-header,
.entry-content,
.entry-footer {
	padding: 0 var(--gutter_width);
	/*margin: var(--space_big) 0;*/
}

.entry-header-wrapper,
.entry-content-wrapper,
.entry-footer-wrapper {
	max-width: var(--max_width_wide);
	margin: 0 auto;
}
/*
.content .entry-header-wrapper {
	max-width: var(--max_width_article);
}
*/
.entry-content:empty {
	display: none;	
}




/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/

.archive-posts-wrapper {
	padding: 0 var(--gutter_width);
}
.archive-posts-inner {
	max-width: var(--max_width_wide);
	margin-left: auto;
	margin-right: auto;
}







/* 10-4-20 - Calefs */
.column-count-2 {
	column-count: 2;	
}


/*
 * Hide visually and from screen readers
 */
.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line
 */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px !important;
	overflow: hidden;
	padding: 0 !important;
	position: absolute;
	width: 1px;
	white-space: nowrap; /* 1 */
	left: -9999em;
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0 !important;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
	visibility: hidden;
}