/*
* Copyright (c) 2015 gskinner.com, inc.
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/


//*******************************************
//
//	HTML TAGS
//
//	Description
//	- Default styles for HTML tags e.g. <body>, <h1>, <sup>
//
//	Notes
//	- Review normalize.scss for default tag styling
//
//	Contents
//	1) BASE
//	2) LINKS
//	3) TYPE
//	4) EMBEDDED CONTENT
//	5) FIGURES
//	6) FORMS
//	7) TABLES
//
//*******************************************

%fontSmoothing {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

//*******************************************
//
//	BASE
//
//*******************************************
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


html { font-size: $fontSize-root; }


body {
	@extend %fontSmoothing;
	min-width: 320px;
	background-color:	$color_gray-darker;
	color: $color_gray-lightest;
	font-family: $fontFamily-default;
}
section {
	background-color: $color_gray-lightest;
	color: $color_gray-default;
	margin: 0 0 5rem 0;
	border-width: 0;
	border-left-width: 0.9rem;
	border-style: solid;
}



//*******************************************
//
//	LINKS
//
//*******************************************
a:link,
a:visited {
	//	EXTEND
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		// Box Model
		padding: 0 2px;
		position: relative;
		// Type
	//	DISPLAY
		// Visual Enhancement
		color: $color_gray-dark;
		outline: none;
		z-index: 0;
		// Type
		font-family: $fontFamily-default;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		&::after {
			content: '';
			background-color: transparent;
			z-index: -1;
			position: absolute;
			top:-0.3rem;
			bottom:-0.3rem;
			left: -$gridUnit-smallest / 2;
			right: -$gridUnit-smallest / 2;
		}
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		// Dynamic
	//	BREAKPOINTS
}
a:active,
a:hover {
	color: $color_gray-lightest;
	cursor: pointer;
	&::after {
		background-color: $color_gray-darker;
	}
}

::selection {color:$color_gray-darkest;background:$color_gray-light;}



//*******************************************
//
//	TYPE
//
//*******************************************
h1 {
	//	EXTEND
	@extend %fontSmoothing;
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		// Box Model
		margin:0 0 $gridUnit-default 0;
		// Type
		font-size: $fontSize-larger;
	//	DISPLAY
		// Visual Enhancement
		// Type
		font-weight: 700;
		text-transform:uppercase;
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN
		// Sass 3.3 Syntax Only (otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		// Dynamic
	//	BREAKPOINTS
	@include bp($w: 0 $bp_width-600) {
		font-size: $fontSize-larger;
		line-height: $gridUnit-large;
  	}
  	@include bp($w: $bp_width-600) {
		font-size: $fontSize-largest;
		line-height: $gridUnit-larger;
  	}
}

h2 {
	@extend h1;
	@include bp($w: 0 $bp_width-600) {
		font-size: $fontSize-default;
		line-height: $gridUnit-default;
  	}
  	@include bp($w: $bp_width-600) {
		font-size: $fontSize-large;
  		line-height: $gridUnit-large;
  	}
}

h3 {
	@extend h1;
	font-weight: 400;
	@include bp($w: 0 $bp_width-600) {
		font-size: $fontSize-small;
  	}
  	@include bp($w: $bp_width-600) {
		font-size: $fontSize-default;
  	}
}

h4 {
	@extend h1;
	font-variant: normal;
	line-height: 3.8rem;
	font-size: $fontSize-smaller;
	margin-bottom: 0;
}

h5 {
	@extend h1;
	font-size: $fontSize-small;
	line-height: 2.5rem;
}

h6 {
	@extend h1;
	font-size: $fontSize-smaller;
	line-height: $gridUnit-small;
	margin: 0 0 0.6rem 0;
}

p {
	//	EXTEND
	@extend %fontSmoothing;
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		// Box Model
		margin: 0 0 $gridUnit-default 0;
		// Type
		font-size: $fontSize-smallest;
		line-height: 2.4rem;
	//	DISPLAY
		// Visual Enhancement
		color: $color_gray-light;
		// Type
		font-family: $fontFamily-secondary;
		font-weight: 400;
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN
		// Sass 3.3 Syntax Only (otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		// Dynamic
	//	BREAKPOINTS
	@include bp($w: $bp_width-600) {
		font-size: $fontSize-smaller;
		line-height: 2.2rem;
	}
}

// abbr[title] {}
// b {}
strong {font-weight:400;} // assumes the font is 'effra' weight: 700
// dfn {}

hr {
	//	EXTEND
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		clear: both;
		// Box Model
		border: none;
		height: $gridUnit-smallest;
		width: 100%;
		padding: 0;
		margin: 0;
		// Type
	//	DISPLAY
		// Visual Enhancement
		color: transparent;
		outline: none;
		background-color: $color_gray-darkest;
		-webkit-backface-visibility: hidden;
		// Type
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		// Dynamic
	//	BREAKPOINTS
}

// mark {}

code {
	@extend %fontSmoothing;
	font-size: $fontSize-smaller;
	font-weight: 400;
	font-family: $fontFamily-monospace;
	word-break: break-all;
	color: $color_gray-lighter;
}

// kbd {}
pre {
	@extend %fontSmoothing;
	white-space:pre;
}
// q {}
// small {}
// sub {}
// sup {}
// sub {}
ul {
	padding: 0;
	margin: 0;
}
li {
	@extend %fontSmoothing;
}



//*******************************************
//
//	EMBEDDED CONTENT
//
//*******************************************
img {max-width:100%;}
canvas {display: block;}



//*******************************************
//
//	FIGURES
//
//*******************************************
// figure {}



//*******************************************
//
//	FORMS
//
//*******************************************
// fieldset {}
// legend {}
// button {}
// input {}
// select {}
// textarea {}
// html input[type="button"] {}
// input[type="reset"] {}
// input[type="submit"] {}
// input[type="checkbox"] {}
// input[type="radio"] {}
// input[type="search"] {}



//*******************************************
//
//	TABLES
//
//*******************************************
// table {}
