/*
  STYLE GUIDE STYLING 
  Styling for the Fit to a Tee's website
*/

/* Some basic styling */

*, *::before, *::after {
  box-sizing:border-box;
}

body { /* Setting up the main body, and its padding from the inside contents*/
  font-family: 'Hind', Arial, Verdana, sans-serif;
  font-size:100%;
  color:#777;
  background-color:#FFF;
  padding:20em 2em 2em 2em; /* Top padding gets reduced if the menu is collapsed */
}

div.wrapper { /* The DIV wrapper for the entire page */
  max-width:80em;
  margin:0 auto;
}

section:not([id]) { /* Create borders between each subsection */
  margin: 1em 0;
  padding: 0.5em 0;
  border-top: 0.1em solid #CCC;
}

section code { /* Styling for code blocks */
  background-color: #EEE;
  padding: 0.5em 0.75em;
  display: block;
}

[class*='indent'] { /*All indent <span> tags*/
  display:inline-block;
  margin:0;
  padding:0;
}

span.indent { /* for <span> tags in the <code> tag that need to display indented code */
  text-indent:2em;
}

span.indent-2 { /* for <span> tags in the <code> tag that need to display indented code with 2 indents */
  text-indent:4em;
}

span.indent-3 { /* for <span> tags in the <code> tag that need to display indented code with 3 indents */
  text-indent:6em;
}

span.indent-4 { /* for <span> tags in the <code> tag that need to display indented code with 4 indents */
  text-indent:8em;
}

span.indent-5 { /* for <span> tags in the <code> tag that need to display indented code with 4 indents */
  text-indent:10em;
}

[class*='colour-'] { /* Colour palette <div> tags */
  width:20%;
  height:10em;
  display:inline-block;
}

.colour-teal {
  background-color:#0DB3BC;
}

.colour-orange {
  background-color:#EFA867;
}

.colour-lightgray {
  background-color:#999;
}

.colour-darkgray {
  background-color:#777;
}

.colour-darkestgray {
  background-color:#515151;
}


/* 
  INTERACTIVE ELEMENTS -------------------
*/

/* Styling for the in-text links */

a {
  color:#EFA867;
  text-decoration:none;
  -webkit-transition: color 0.3s ease-out; 
  -moz-transition: color 0.3s ease-out; 
  -o-transition: color 0.3s ease-out; 
  transition: color 0.3s ease-out;
}

a:hover, a:focus {
  color:#724F33;
}

/* Styling for the navigation button */

.button {
  color:#999;
  background-color:#FFF;
  display:inline-block;
  text-transform:uppercase;
  font-family: 'Montserrat', Arial, Verdana, sans-serif;
  text-decoration: none; /* Remove the underline */
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

.navlink { /* Buttons found in the main navigation (<nav> tag) */
  font-size: 1rem;
  padding: 0.3em 0.6em;
  margin:0;
}

.checkout { /* Specifically, the checkout button in the main navigation */
  color:#EFA867;
}

.submit, .edit, .more-info { /* Submit button for forms */
  color:#EFA867;
  border-style:solid;
  border-color:#EFA867;
  border-width:0.15em;
  font-size: 1.25rem; 
  padding: 0.3em;
}

.reset, .delete { /* Reset button for forms */
  border-style:solid;
  border-color:#999;
  border-width:0.15em;
  font-size: 1.25rem;
  padding: 0.3em;
}

.submit:hover, .submit:focus, .navlink.checkout:hover, .navlink.checkout:focus, .edit:hover, .edit:focus, .more-info:hover, .more-info:focus { /* Hover/focus states for orange buttons */
  background-color:#EFA867;
  color:#FFF;
}

.reset:hover, .reset:focus, .navlink:hover, .navlink:focus, .delete:hover, .delete:focus { /* Hover/focus states for grey buttons */
  background-color:#999;
  color:#FFF;
}

/* Styling for the text fields and labels in forms */

.textfield-label {
  display:block;
  font-weight:bold;
  color:#0DB3BC;
  font-size:1.25rem;
}

.textfield { /* For bordered form elements including textarea, text input, and <select> */
  border-style:solid;
  border-width:0.125em;
  border-color:#999;
  padding-left:0.25em;
  width:100%; /* When screen size is small, have the fields span the width of the screen */
  margin-bottom:1em;
  display:block;
  font-size:1rem;
}

textarea { /* Ensure that the textarea is big enough and that it doesn't somehow expand beyond the bounds of the screen */
  max-width:100%;
  min-height:10em;
}

/* 
  TEXT ELEMENTS -------------------
*/

/* Styling for the heading elements */

h1 {
  color:#0DB3BC;
  font-size:2.25rem;
  font-family: 'Montserrat', Arial, Verdana, serif;
  margin:0;
}

p.author { /* For the subheading (with author names) on each page */
  color:#777;
  font-size:1rem;
  font-family: 'Montserrat', Arial, Verdana, serif;
  margin:0 0 1rem 0;
}

section h2 { /* Specifically for the <h2> tag as the rendered element */
  font-size:1.9rem;
  color:#0DB3BC;
  font-family: 'Montserrat', Arial, Verdana, serif;
  font-weight: bold;
  margin-top:1rem;
}

section h2.subheading { /* Styling specifically for the subheadings (e.g. the <h2> tags that actually act as subheadings, and not the one being rendered as an example element) */
  margin:3em 0 0.5em 0;
}

p.subheading { /* Styling specifically for the paragraph text that shows up right beneath <h1> tags */
  font-size:1.2rem;
}

section h3 {
  color:#515151;
  font-size:1.5rem;
  font-family: 'Montserrat', Arial, Verdana, serif;
  font-weight: bold;
  margin-top:0.5em;
}

section h4 {
  color:#515151;
  font-size:1.1rem;
  font-weight: bold;
  margin-bottom:0.25rem;
}

/* Styling for the paragraphs */

p {
  margin-top: 0;
}

/* Styling for ordered and unordered lists */

ul, ol {
  color:#0DB3BC;
}

ul {
  list-style-type: square;
}

span.listitem { /* Since both lists employ color attributes to change bullet/number colors, the .listitem class is applied to span tags around the list items in order to turn them back to the standard text grey */
  color:#777;
}


/* 
  COMBINED ELEMENTS -------------------
*/

/* Styling for the product listings */

.product-listing img { /* For images used for product listings */
  max-width:100%;
  display:block;
  margin:0 auto;
}

.product-listing { /* The big DIV that holds all of the product info together */
  display:inline-block;
  -webkit-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.25);
  -moz-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.25);
  box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.25);
  -webkit-transition: box-shadow 0.5s ease-out;
  -moz-transition: box-shadow 0.5s ease-out;
  transition: box-shadow 0.5s ease-out;
  margin:0;
  width:100%;
}

.product-listing:hover, .product-listing:focus { /* Setting up box-shadow transitions on a hover/focus state */
  -webkit-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.75);
  box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.75);
}

p.product-name { /* The paragraph that holds the product's name */
  color:#515151;
  font-size:1.5rem;
  font-family: 'Montserrat', Arial, Verdana, serif;
  font-weight: bold;
  margin-bottom:0;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

p.product-price, p.product-date { /* The paragraph that holds the product's price and date */
  color:#515151;
  font-size:0.9rem;
  font-family: 'Montserrat', Arial, Verdana, serif;
  font-weight: bold;
  margin:0;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

.product-info { /* The smaller DIV within .product-listing that holds the product's name and price*/
  padding:1em;
  text-align:center;
  border-top-style:solid;
  border-color: #CCC;
  border-top-width: 0.1em;
  -webkit-transition: border-color, background-color 0.3s ease-out;
  -moz-transition: border-color, background-color 0.3s ease-out;
  transition: border-color, background-color 0.3s ease-out;
}

.product-listing:hover .product-info, .product-listing:focus .product-info { /* Setting the info box to change color on hover/focus */
  border-top-style:solid;
  border-top-width: 0.1em;
  background-color: #EFA867;
}

.product-listing:hover p.product-name, .product-listing:focus p.product-name, .product-listing:hover p.product-price, .product-listing:focus p.product-price, .product-listing:hover p.product-date, .product-listing:focus p.product-date { /*  Setting the price, date, and name to change color on hover/focus */
  color:#FFF;
}

/*Grid System*/

.grid-container:after { /* Clears the floats after a grid row */
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] { /* By default (mobile-first) columns are stacked */
  margin:1em 0;
}

.img-filler { /* Filler image */
  max-width:100%;
  height:25em;
  background-color:#999;
}

.more-below, .more-below-small { /* Class to be used if there's more content below (more-below-small only shows up when the screen is very small) */
  border-bottom: 0.1em solid #CCC;
  margin-bottom:2em;
  padding-bottom:2em;
}

/* 
  CITATIONS -------------------
*/

ul.citations {
  margin-left: 0.25em;
  padding-left: 0.25em;
}

ul.citations li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 1em;
}

ul.citations li strong {
  font-weight: normal;
  font-style: italic;
}

cite {
  font-style: normal;
}

/* 
  TEMPLATES ----------------------
*/

/*Navigation Bar*/

nav.fixed-nav-bar { /* The top navigation bar */
  position:absolute;
  width: 100%;
  -webkit-box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.25);
  -moz-box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.25);
  box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.25);
  top:0; /* Keeps the navbar locked to the top of the screen */
  left:0;
  right:0;
  background-color:#FFF;
  margin-bottom:2em;
  z-index:1;
}

.hidden {
  visibility: hidden;
  position: absolute; 
}

.shown {
  visibility: visible;
  position: relative;
}

a.nav-toggle {
  display:block;
  text-align:right;
  padding-right:1em;
  padding-top:1.5em;
  font-weight:bold;
  z-index:-1;
}

.img-navbar { /* When the screen is small, have the logo centered and above the navigation */
  display:block;
  margin:0 auto;
  padding:1em 0;
  max-height:4em;
  width:auto;
  opacity:1;
}

.img-navbar:hover, .img-navbar:focus { /* When the screen is small, have the logo centered and above the navigation */
  opacity:0.5;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

nav ul { /* Align the navigation items to the center when the screen is small */
  width:100%;
  padding-right:2em;
  text-align:center;
}

nav ul li {
  list-style-type:none;
  display:inline-block; /* Navigation items are side-by-side with a larger screen size */
}

/* Styling for the Flexbox grid elements */

.container { /* The flexbox container element, used for flexible information within a box (e.g. quantity, size, colour in the checkout screen) */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: -webkit-row;
  flex-direction: -ms-row;
  flex-direction: row;
  justify-content: -webkit-space-around;
  justify-content: -ms-space-around;
  justify-content: space-around;
  flex-wrap: -webkit-wrap;
  flex-wrap: -ms-wrap;
  flex-wrap:wrap;
}

.container-item { /* Individual items within the flexbox container */
  margin:1em;
}

/*Shopping Cart Item*/

.img-cart-view { /* Placeholder images */
  width:100%;
  height:auto;
  background:none;
}

.cart-item-box {
  width:100%;
  display:inline-block;
  margin-bottom:1em;
}

/* Subtotal and total price classes for paragraph tags */

.subtotal-checkout {
  font-size:1.25rem;
  text-align:left;
  padding-right:1em;
}

.total {
  color:#0DB3BC;
}

/* Description list that contains product info */

dd {
  margin:0;
}

dt {
  font-weight:bold;
  color:#0DB3BC;
}

dd, dt {
  font-size:1.25rem;
}

.cart-item {
  padding-bottom:1em;
  border-bottom: 0.1em solid #CCC;
}

.cart-item div.container-item {
  margin:0 1em 1em 1em;
}

dl.container {
  margin:1em 0;
  align-content:-webkit-center;
  align-content:-ms-center;
  align-content:center;
  align-items:-webkit-center;
  align-items:-ms-center;
  align-items:center;
}

/*Product View Item on the Current Styles and Discontinued Styles pages*/

.img-product-view {
  max-width:100%;
  display:block;
  margin:0 auto;
}

.product-view p {
  margin-bottom:1em;
}

.product-view .container { /* Flexbox items in the product view are left-aligned, not centered */
  justify-content:-webkit-flex-start;
  justify-content:-ms-flex-start;
  justify-content:flex-start;
}

.product-view .container-item {
  margin-left:0;
}

.product-view .product-price, .product-view .product-date { /* These also appear in the product-listing divs on the discontinued styles page - they're styled differently here */
  font-size:1.25rem;
  font-weight:bold;
}

.product-view {
  display:inline-block;
}

/* For the steps not selected in the checkout process */
.step-not-selected {
  color:#B6E8EB;
}

/* Hook class for the countdown */
#countdown p {
  display:inline-block;
  padding:0 0.25em;
  color:#0DB3BC;
  font-size:1.5em;
  font-weight:bold;
  margin:0;
}

#countdown p:first-of-type {
  padding-left:0;
}



/* 
  OTHER ----------------------
*/

/* For the map on the about page */
#map {
  width:100%;
  height:25em;
  background: url(../img/location-map.png) no-repeat center;
}

/* Consistent footer across pages */
footer {
  margin-top:8em;
}

.footer-image { /* The logo image in the footer */
  display:block;
  margin:0 auto;
}

footer p {
  margin-top:1em;
  text-align:center;
}

/* Content that is at the very top of the homepage */

.homepage-content { /* The large header on the homepage */
  text-align:center;
  background-color:#0DB3BC;
  background: url(../img/tshirt-models-header.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:10em 2em 2em 2em;
  margin:-10em -2em 0 -2em;
}

.homepage-content h1, .homepage-content p { /* Change the text to white so that it shows up above the header image */
  color:#FFF;
}

.homepage-content .button.submit, .homepage-content .button.submit { /* Change the button to white so that it shows up above the header image */
  border-color:#FFF;
  color:#FFF;
  background-color:rgba(0, 0, 0, 0);
}

.homepage-content .button.submit:hover, .homepage-content .button.submit:focus {
  background-color:#FFF;
  color:#EFA867;
}

/* Image and title classes for team profiles */
.img-team, .img-size-guide {
  max-width:100%;
}

.title-team {
  margin-bottom:0;
}

/* Reviews */

article h3 { /* The name of the reviewer */
  margin-bottom:0;
}

.review-purchase-date, .review-rating { /* The date of the review and the rating it received */
  font-weight:bold;
}

/* Company Updates */

.updates-date { /* Styling for the dates in each update post on the company update page */
  font-weight:bold;
  margin-top:-1.5em;
}

/* Sizing Chart Table */

table {
  width:100%;
}

td, th {
  width:25%;
  border:0.1em solid #CCC;
  text-align:center;
  font-size:1em;
}

th {
  background-color:#0DB3BC;
  color:#FFF;
}

td:first-of-type {
  font-weight:bold;
}



/*
  MEDIA QUERIES ----------------------
*/

@media (min-width:30em) { /* Media queries which take place once the screen is 30em or larger */

  h1 { /* H1 size changes with screen size */
    font-size: 2.5rem;
  }
 
  p.author { /* Subheading size changes with screen size */
    font-size: 1.25rem;
  }
}

@media (max-width:34.999em) { /* Media queries which take place until the screen is 35em or larger */

  .submit, .reset, .edit, .delete, .more-info { /* When the screen is small, have the buttons span the entire screen width and center the text */
    width:100%;
  }

  .submit, .edit, .more-info {
    margin-bottom:0.5em;
  }

  .submit, .reset, .edit, .delete, .more-info {
    text-align:center;
  }
}

@media (min-width:35em) {  /* Media queries which take place once the screen is 35em or larger */

  .textfield-label, .textfield { /* When the screen gets larger, restrict the width of the fields */
    max-width:25em;
  }

  .img-cart-view { /* Cart item image appears much smaller and off to the left when the screen is larger */
    width:10em;
    height:auto;
    float:left;
  }

  .subtotal-checkout { /* Cart item image appears much smaller and off to the left when the screen is larger */
    text-align:right;
  }

  dl.container {
    margin:0;
  }
}

@media (max-width:42.5em) { /* Media queries which take place until the screen is 42.5em or larger */

  body.mobile-shown {
    padding:20em 2em 2em 2em; /* Top padding gets reduced if the menu is collapsed */
  }

  body.mobile-hidden {
    padding:8em 2em 2em 2em; /* Top padding gets reduced if the menu is collapsed */
  }

  nav ul li {
    width:100%; /* With a smaller screen size, navigation items are stacked on top of each other */
    padding:0.5em 0;
    border-bottom:0.1em solid #CCC;
  }

  nav ul li:last-of-type {
    border-bottom-style:none;
    padding:0.5em 0 0 0;
  }

  .img-navbar { /* The logo must float to the left so that the menu can appear next to it */
    margin-left:1em;
    float:left;
  }
}

@media (min-width:42.51em) { /* Media queries which take place once the screen is 42.51em or larger */

  body {
    padding:12em 2em 2em 2em; /* Top padding gets reduced as the screen size increases */
  }

  .homepage-content { /* Increase the padding if the screen is larger */
    padding:15em 2em 10em 2em;
  }
}

@media (min-width:45.625em) { /* Media queries which take place once the screen is 45.625em or larger */

  .img-product-view { /* Product view item image appears smaller and off to the left when the screen is larger */
    width:30%;
    float:left;
    margin-right:2em;
    height:auto;
  }
}

@media (min-width:50em) { /* Media queries which take place once the screen is 50em or larger */

  .grid-container { /* Regular grids used for layout grids (flexbox reserved for other kinds of scaling info) */
    margin-left:-1em;
    margin-right:-1em;
  }

  .col-1of3 {
    width:33.33%; /* At a certain screen size, make the columns 33% and 66% */
  }

  .col-2of3 {
    width:66.66%;
  }

  .col-1of2 {
    width:50%;
  }

  [class*='col-'] { /* Remove outside margins */
    padding:0 1em;
    float:left;
  }

  .more-below-small {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media (min-width:56.25em) { /* Media queries which take place once the screen is 56.25em or larger */

  body {
    padding:8em 2em 2em 2em; /* Top padding gets reduced as the screen size increases */
  }
 
  h1 { /* Heading 1 size changes with screen size */
    font-size: 3rem;
  }
 
  p.author { /* Subheading size changes with screen size */
    font-size: 1.5rem;
  }

  nav.fixed-nav-bar {
    position:fixed; /* When the screen is big enough, lock the navbar to the top of the window */
    height:4em;
  }

  .img-navbar { /* With a larger screen, have the logo off to the left and float the navigation to the right */
    max-height:100%;
    padding:1em 0 1em 2em;
    display:inline-block;
    float:left;
  }

  nav ul { /* Send the navigation to the right when the screen increases in size */
    display:block;
    text-align:right;
  }

  td, th {
    font-size:1.25em;
  }
}