/*
AUTHOR:				Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration. 
DATE:				10/21/2010
DESCRIPTION:		CSS classes for the SBA's new Left-Side Navigation Tree. 
NOTES:				None. 
INPUT:				None. 
OUTPUT:				CSS classes for the SBA's new Left-Side Navigation Tree. 
REVISION HISTORY:	01/12/2016, SRS:	Our new default font (body, th, td), "Source Sans Pro", makes #sbatree, .stihigh 
										and .stilink's 9pt look too small. Bumped them up to 10pt. But don't change the 
										.stito classes, because they're precisely aligned for text-only mode. (That's what 
										the "to" part of "stito" means.) 
					12/01/2015, SRS:	Added th1 as an override of default, now called Home Page Theme. 
					10/09/2015, SRS:	Reworked lots of stuff to be "themeable". For cf_sbatree, that meant changing 
										all of the image tags (with src) to divs with CSS classes that loaded the same 
										URL as the background-image. This allowed dynamically switching to Text-Only 
										mode, which is now body.th6. So, so, cool. 
					03/04/2015, SRS:	Made the color scheme considerably lighter, colors chosen by team consensus. 
					10/19-21/2010, SRS:	Original implementation. 
*/

:root {
	/* The offical SBA colors according to branding guidelines */
	--sba-red: hsl(0, 100%, 40%);
	--sba-white: hsl(0, 0%, 100%);
	--sba-blue: hsl(215, 100%, 21%);
	--sba-gray: hsl(0, 0%, 59%);

	/* Secondary SBA colors according to branding guidelines */
	--sba-light-blue: hsl(200, 100%, 37%);
	--sba-black: hsl(227, 21%, 13%);
	--sba-yellow: hsl(49, 100%, 47%);
	--sba-green:hsl(151, 67%, 30%);

	/* 
		use semantic variables as much as possible instead of directly
		referring to color variables. Makes it easier to hotswap colors
	*/
	--clr-err:var(--sba-red);
	--clr-warn:var(--sba-yellow);
	--clr-comm:var(--sba-green);
	--clr-dis: var(--sba-gray);

	--clr-bg: var(--sba-white);
	--clr-card-bg: var(--sba-white);

	--clr-text: var(--sba-black);
	--clr-link: var(--sba-blue);
	--clr-heading: var(--sba-blue);

	--clr-accent:var(--sba-red);
	--clr-card-accent:var(--sba-blue);

	--padding: 1rem;
	--margin: 2rem;

	--col-width: 250px;
	--card-width: 200px;
	--middle-col-width: 556px;
	/* Combined with middle-col-width above makes gallery ~16/9 ratio */
	--gallery-height: 313px;

	/* At some point maybe create different shadows to indicate hierarchy */
	--sba-shadow: 0 7px 15px 0 hsla(0, 0%, 0%, 0.1);
}

nav ul{
	list-style: none;
	padding-left: 1rem;
	font-size: 1rem;
}

nav li {position: relative;}

nav li::before {
	content: '';
	position: absolute;
	height: 100%;
	border-left: 1px dotted var(--clr-card-accent);
	left: -.75rem;
	top: 0;
}

nav li:first-of-type::before {
	height: calc(100% + 1rem);
	top: -1rem;
}


nav li:last-of-type::before {
	height: 1.22rem;
}

nav li:first-of-type:last-of-type::before {
	height: calc(1.22rem + 1rem);
}


nav a {
	padding: .5rem 0rem;
	display: inline-block;
	color: var(--clr-link);
	text-decoration: none;
	width: 100%;
	position: relative;
}

nav a::before, nav summary::before {
	content: '';
	display: block;
	position: absolute;
	border-bottom: 1px dotted var(--clr-card-accent);
	width: .75rem;
	top: 50%;
	left: -.75rem;
}

nav summary::before {
	top: 1.1rem;
}

nav summary a::before {
	border-bottom: none;
}

a {
	text-decoration: none;
	--clr-text: var(--clr-link);
	font-weight: 400;
}

a *{
	text-decoration: none;
	-clr-text: var(--clr-link);
}

a:focus,
a:hover {
	box-shadow: inset 0px -3px 0px var(--clr-accent);
	transition: all .2s cubic-bezier(.33,.66,.66,1);
	font-weight: bold;
}
details {
	position: relative;
	white-space: nowrap;
}
summary {
	/* display: flex; */
	/* align-items:baseline; */
	/* flex-wrap: nowrap; */
	white-space: nowrap;
	overflow-x: hidden;
}

summary::marker {
	display: block;
	/* background: #000 !important; */
	/* content: "+"; */
	font-size: 1.5rem;
	/* background-color: var(--clr-card-accent); */
	color: var(--clr-accent);
}

details[open] > summary::marker {
	/* content: "-"; */
}

nav > ul:first-of-type > li::before {
	border-left: none;
}

/* [role="navigation"] > li > details > ul > li:nth-child(3n){
	background-color: var(--clr-link);
	margin-left: -5rem;
	padding-left: 5rem;
	--clr-card-accent: var(--sba-white) !important;
} */

/* [role="navigation"] > li > details > ul > li:nth-child(3n) a {
	color: var(--clr-card-bg);
} */
/* 
[role="navigation"] > li > details > ul > li:nth-child(3n)::before {	
	left: 4.25rem;
} */

/* [role="navigation"] > li > details > ul > li:nth-child(3n) a::before,
[role="navigation"] > li > details > ul > li:nth-child(3n) summary::before {
} */

#sbatreeexpandcollapse {
	text-align: center;
}