/*
* Barebones V3
* Copyright 2019 Steve Cochran
*
* Based of Skeleton by Dave Gamache
*
* Free to use under the MIT license.
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Variables
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {

	/* default theme: light background, dark text, blue accent */
	--theme-hue: 0;					/* white */
	--accent-hue: 194;			/* blue */

	--text-color-richer: hsl(var(--theme-hue), 0%, 5%);			/* #0d0d0d		*/
	--text-color-normal: hsl(var(--theme-hue), 0%, 13%);		/* #222222 		text color; button:hover:focus color */
	--text-color-softer: hsl(var(--theme-hue), 0%, 33%);		/* #555555 		button color; button:hover border */

  --accent-color: hsl(var(--accent-hue), 86%, 57%);				/* #33C3F0 		link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 76%, 49%)	/* #1EAEDB 		link hover; button-primary:hover:focus bg+border */

  --border-color: hsl(var(--theme-hue), 0%, 73%);					/* #bbbbbb		button border */
	--border-color-softer: hsl(var(--theme-hue), 0%, 82%);	/* #d1d1d1		textarea,select,code,td,hr border	 */
	
	--background-color: initial;														/* transparent body background; textarea,select background */
  --code-background: hsl(var(--theme-hue), 0%, 95%);			/* #f1f1f1 		code background*/

	--button-primary-color: white;
  
	
	/* Note: Skeleton was based off a 10px font sizing for REM  */
	/* 62.5% of typical 16px browser default = 10px */
	--base-font-size: 62.5%;
	
	/* Grid Defaults - default to match orig skeleton settings */
	--grid-max-width: 960px;
}

/* theme support */
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme: dark) {
	:root {
		/* dark theme: light background, dark text, blue accent */
		--theme-hue: 0;					/* black */
		--accent-hue: 194;			/* blue */

		--text-color-richer: hsl(var(--theme-hue), 0%, 95%);		/* 		*/
		--text-color-normal: hsl(var(--theme-hue), 0%, 87%);		/* text color; button:hover:focus color */
		--text-color-softer: hsl(var(--theme-hue), 0%, 67%);		/* button color; button:hover border */

		--accent-color: hsl(var(--accent-hue), 86%, 57%);				/* link; button-primary bg+border; textarea,select:focus border */
		--accent-color-hover: hsl(var(--accent-hue), 76%, 49%)	/* link hover; button-primary:hover:focus bg+border */

		--border-color: hsl(var(--theme-hue), 0%, 27%);					/* button border */
		--border-color-softer: hsl(var(--theme-hue), 0%, 18%);	/* textarea,select,code,td,hr border	 */
	
		--background-color: hsl(var(--theme-hue), 0%, 5%);			/* body background; textarea,select background */
		--code-background: hsl(var(--theme-hue), 0%, 5%);				/* code background*/

		--button-primary-color: white;
  }
	
	/* TODO - test dialing back image intensity on dark background
  img {
    opacity: .80;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
  */
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
	 than with skeleton. Only basic 1-4 column grids are included.
	 Any additional needs should be made using custom CSS directives */


/* did not keep .container to prevent backwards compatibility problems */
.grid-container {
	position: relative;
	width: 100%;
	max-width: var(--grid-max-width);
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-gap: 20px;
	gap: 20px;
	
	/* by default use min 200px wide columns auto-fit into width */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* basic grid defaults */
.grid-container.quarters {
	grid-template-columns: repeat(4, 1fr);
}
.grid-container.thirds {
	grid-template-columns: repeat(3, 1fr);
}
.grid-container.halves {
	grid-template-columns: repeat(2, 1fr);
}
.grid-container.full {
	grid-template-columns: 1fr;
}






/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: var(--base-font-size); 
}
body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color-normal); 
  background-color: var(--background-color);;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: var(--accent-color); }
a:hover {
  color: var(--accent-color-hover); }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: var(--text-color-softer);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: var(--text-color-normal);
  border-color: var(--text-color-softer);
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: var(--button-primary-color);
  background-color: var(--accent-color);
  border-color: var(--accent-color); }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: var(--button-primary-color);
  background-color: var(--accent-color-hover);
  border-color: var(--accent-color-hover); }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: var(--background-color);
  border: 1px solid #var(--border-color-softer);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid ;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--code-background);
  border: 1px solid var(--border-color-softer);
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color-softer); }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid var(--border-color-softer); }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}