/*
  IAT 339 with Prof. Andrew Hawryshkewich
  D101 with Elgin-Skye McLaren
  P03: Portfolio
  Josh Fernandez

  styleguide.css

  Main reference is from HTML & CSS: Design and Build Websites by Jon Duckett
  Some sections have been copied or inspired by Project 2: Richmond Dodgeball League website. Thank you to Priscilla Skylar-Lee and Heather Maskell.
  Other references will be noted at appropriate sections of this file.
*/


/* GENERAL */

*, *::after, *::before { /* All browsers need to have box sizing */
  -webkit-box-sizing: border-box; /* Other browsers */
  -moz-box-sizing: border-box; /* Mozilla Firefox */
  box-sizing: border-box;
}

[class^="grid-row"] {
  display: flex;
  flex-wrap: wrap;
}

section {
  padding: 0.5rem 0;
}

section p {
  margin: 0;
}


/* PORTFOLIO'S SUB-NAVIGATION */

.nav-item-portfolio {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0;
  color: white;
  background-color: rgba(18, 64, 171, 1);

  /*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

.nav-item-portfolio:hover, .nav-item-portfolio:focus, .nav-item-portfolio:active {
  background-color: rgba(87, 119, 192, 1);
  color: white;

  /*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

@media (min-width: 40rem) {

  .grid-col-nav-sub-item {
    flex-basis: 33.33%;
  }

  .grid-col-nav-sub-item:nth-child(1),
  .grid-col-nav-sub-item:nth-child(2) {
    padding-right: 0.25rem;
  }

  .grid-col-nav-sub-item:nth-child(2),
  .grid-col-nav-sub-item:nth-child(3) {
    padding-left: 0.25rem;
  }

}

@media (min-width: 47rem) {

  .grid-col-nav-sub-item {
    flex-basis: 100%;
  }

  .grid-col-nav-sub-item:nth-child(1),
  .grid-col-nav-sub-item:nth-child(2) {
    padding-right: 0;
  }

  .grid-col-nav-sub-item:nth-child(2),
  .grid-col-nav-sub-item:nth-child(3) {
    padding-left: 0;
  }

}

@media (min-width: 54rem) {

  .grid-col-nav-sub-item {
    flex-basis: 33.33%;
  }

  .grid-col-nav-sub-item:nth-child(1),
  .grid-col-nav-sub-item:nth-child(2) {
    padding-right: 0.25rem;
  }

  .grid-col-nav-sub-item:nth-child(2),
  .grid-col-nav-sub-item:nth-child(3) {
    padding-left: 0.25rem;
  }

}


/* NAVIGATION FOR STYLEGUIDE */

#nav-styleguide {
  margin-bottom: 1rem;
}

.nav-item-styleguide {
  font-family: "IBM Plex Sans", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: white;
  background-color: rgba(8, 37, 104, 1);

  /*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

.nav-item-styleguide:hover, .nav-item-styleguide:focus, .nav-item-styleguide:active {
  background-color: rgba(18, 64, 171, 1);
  color: white;

  /*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}


/* COLOUR PALETTE ELEMENTS */

#colours code {
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0 1rem 0;
}

.swatch {
  height: 10rem;
  width: 100%;
  border: 2px solid #212121;
  display: block;

  /*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

#swatch-black {
  background-color: #212121;
}

#swatch-black:hover {
  background-color: #4C4C4C;
}

#swatch-white {
  background-color: #FFFFFF;
}

#swatch-white:hover {
  background-color: #E8E8E8;
}

#swatch-blue {
  background-color: rgba(18, 64, 171, 1); /* Paletton Blue */
}

#swatch-blue:hover {
  background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */
}

#swatch-orange {
  background-color: rgba(255, 116, 0, 1); /* Paletton Orange */
}

#swatch-orange:hover {
  background-color: rgba(255, 170, 99, 1); /* Paletton Orange Light */
}

#swatch-blue-green {
  background-color: rgba(0, 153, 153, 1); /* Paletton Blue-Green */
}

#swatch-blue-green:hover {
  background-color: rgba(70, 178, 178, 1); /* Paletton Blue-Green Light */
}

#swatch-yellow {
  background-color: rgba(255, 170, 0, 1); /* Paletton Yellow */
}

#swatch-yellow:hover {
  background-color: rgba(255, 203, 99, 1); /* Paletton Yellow Light */
}

@media(min-width: 20rem) {

.grid-col-colour-desc, .grid-col-colour-swatch {
  flex-basis: 50%;
}

#colours [class^="grid-col-"] {
  padding: 0 0.25rem;
}

}


/* WEBSITE GRID STRUCTURE */

.wrapper {
  display: block;
  width: initial;
  margin: 1rem 0;
}

[class^="wrapper-"] {
  display: block;
  color: white;
  text-align: center;
}

.wrapper-header {
  background-color: rgba(8, 37, 104, 1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.wrapper-body {
  background-color: rgba(18, 64, 171, 1);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.wrapper-footer {
  background-color: #212121;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media(min-width: 28rem) {

  .grid-col-structure-header {
    flex-basis: 40%;
  }

  .grid-col-structure-body {
    flex-basis: 60%;
  }

  .wrapper-header {
    padding: 5rem 0;
  }

}

@media(min-width: 75rem) {

  .grid-col-structure-header {
    flex-basis: 30%;
  }

  .grid-col-structure-body {
    flex-basis: 70%;
  }

}

@media(min-width: 85rem) {

  .grid-col-structure-header {
    flex-basis: 25%;
  }

  .grid-col-structure-body {
    flex-basis: 75%;
  }

}

@media(min-width: 100rem) {

  .grid-col-structure-header {
    flex-basis: 20%;
  }

  .grid-col-structure-body {
    flex-basis: 80%;
  }

}