// ----------- Customizations

/*
This file can also contain specific media querries that differ 
from the general responsive settings in styles/media.responsive
*/

/* ---------------------- styles used in the starter index file for info only */

// labels in the style guide
._sg { 
  color: indianred; 
  margin: 0 0 2rem 0;
  padding: 0;
}
._sg-head { 
  @extend ._sg;
  margin-top: 2rem;
}


// show the difference between a 4-col split 
// and TWO 2-col splits used together (as an alternative to 4-col)
.show-fours .col-1-4 {
  border: 1px solid indianred;
}
.show-twos > .col-1-2 {
  border: 1px solid indianred;
}
@media all and (max-width: 1000px){

  .show-twos .grid .col-1-2 {
    float: none;
    display: block;
    width: 100%;
    margin-right: 0;
  }

}

/* ---------------------- /styles used in the starter index file for info only */



/* ---------------------- Code that needs to be added to the kit */

.panel {
  margin: 0 auto;
  width: 100%;
  background-color: #eee;
  @include border-radius (10px);
  padding: 4rem;
}

// center all buttons that appear in a panel
.center-content-holder {
  width: 100%;
  display: block;
  text-align: center;
}
.center-content {
  margin: 0 auto !important;
  display: inline-block; // this might cause problems
}

// see above
.h-center-holder {
  width: 100% !important;
  text-align: center !important;
}
.h-center-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

.single-column {
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
}

.content { margin-bottom: 2rem; }

/* ---------------------- /Code that needs to be added to the kit */



/* ---------------------- type variations */

.header--alt {
  text-transform: uppercase;
  color: $brand-color-3;
  background: transparent url('/assets/img/nav-icon.png') left 20% no-repeat;
  padding-left: 24px;
}

.header--alt {
  padding-bottom: 1rem;
  border-bottom: 1px solid $base-color-c;
  margin-bottom: 1rem;
}

/* ---------------------- /type variations */



/* ---------------------- header */

/* 
Force the z-index on the header content, 
so the menus are always on top.
(   This should be placed in _trump.zindex.scss )
*/
.header, 
.header * { 
  z-index: 9999 !important; 
}

.header {
  //margin-bottom: 2rem;
}

/* ----------- navutility */

.navutility {} // the nav element

// the ul
.navutility__links {}
  .navutility__links li {}
  .navutility__links a {}

  // the vertical link between the links
  .navutility__nolink {
    cursor: default;
    color: $brand-color-4 !important;
  }
  .navutility__nolink:hover,
  .navutility__nolink:active {
    cursor: default;
    color: $brand-color-4 !important;
  }

.navutility__social {} // the ul
  .navutility__social li {}
  .navutility__social a {}

.navutility__search {
  //width: 200px;
}
.navutility__search form {
  //width: 100%;
}
.navutility__input {
}
.navutility__button {
}

/* ----------- /navutility */

/* ----------- navmain */

.navmain {}

.navmain__links {} /* the ul */
.navmain__links li {}
.navmain__links a {}

/* ----------- /navmain */

/* ----------- the mobile nav trigger */

.mmenu-trigger { 
  padding: $nav-mobile-button-pad;
  font-family: $sans;
  text-decoration: none;
  text-transform: uppercase;
}

// force the text and the icon to be uniform size
.mmenu-trigger,
.mmenu-trigger .fa {
  font-size: 1.25rem !important;
  line-height: 1em !important;
  vertical-align: top !important;
}

/* ----------- /the mobile nav trigger */

// toggle show-hide login-buttons under the utility nav

.loginbuttons__holder { display: none; }

/* ----------- styles for the headroom.js enabled header stuff */

.logo--header { // the SVG logo
  float: left;
  width: 90%;
  max-width: 200px;
  margin: 20px 0;
  // set up the re-size transition
  -webkit-transition: max-width $header-animation-speed;
  -moz-transition: max-width $header-animation-speed;
  transition: max-width $header-animation-speed;
}
.navmain { 
  margin-top: 32.5px; /* based on the logo height */
  -webkit-transition: margin-top $header-animation-speed;
  -moz-transition: margin-top $header-animation-speed;
  transition: margin-top $header-animation-speed;
}

// add a bottom border when we're in not-top mode
.headroom--not-top .container--navmain {
  border-bottom: 1px solid $brand-color-4;
}
// make the logo smaller & decrease the nav padding when we're in 'not-top' mode
.headroom--not-top .logo--header {
  max-width: 100px;
}
.headroom--not-top .navmain { 
  margin-top: 14px; /* again, based on the logo height */
}

/*
This keeps the navmain bg slightly transparent when the page is scrolling.
(It's on the white body BG when it's sitting on top, so does not appear transparent then.)
*/
.container--navmain {
  background-color: rgba(255, 255, 255, .95);
}

/*
Finally, let's also animate the "snap into position" thing that happens 
as a result of our jQuery in settings.js to make sure our content is falling AFTER the header 
(and not under it, because it's fixed)
*/
.container--slideshow,
.content--subtopmargin {
  -webkit-transition: margin-top $header-animation-speed;
  -moz-transition: margin-top $header-animation-speed;
  transition: margin-top $header-animation-speed;
}

/* ----------- /styles for the headroom.js enabled header stuff */

/*

This is place here because it's related to how the header works:

We're adding a top margin on the slideshow module ONLY because of the headroom.js activity.
We need the slideshow to fall RIGHT UNDER the header (which is always changing), 
so we set a margin-top (dynamically) in settings.js
THE ONLY EXCEPTION is when we're opening the mmenu:
*/
.mm-right .container--slideshow { margin-top: 0px!important; }
// and for all the sub-pages:
.mm-right .content--subtopmargin { margin-top: 0px!important; }

/* 
IMPORTANT:
We'll have additional settings for the .content--subtopmargin class
further down in this document where we place our sub-page specific styles
*/


/* ---------------------- /header */



/* ---------------------- home page content */

/* ----------- slideshow */

// limit the height of the slideshow on BIG screens
.rslides--home {
  height: auto;
  max-height: 680px;
  border-bottom: 5px solid $brand-color-1;
}

// the slideshow captions
.rslides--home__caption {
  position: absolute;
  display: block;
  top: 20%;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: transparent;
}
.rslides--home__caption sup {
  vertical-align: super;
  font-size: .8rem; 
  line-height: 1em;
}
// rslides--caption__title = h1 / rslides--caption__text = p
.rslides--home__title,
.rslides--home__text {
  color: white;
  text-shadow: -3px 2px 3px rgba(0, 0, 0, 1);
}
.rslides--home__title { 
  @include font-size(80);
  line-height: 1.25em;
  margin-bottom: .75rem;
  padding-bottom: 0; 
}
.rslides--home__text {
  font-family: $sans;
  @include font-size(40);
  line-height: 1em;
}

// the pagination "buttons"
/*
.rslides_tabs {
  // margin-top: $rslides-tabs-margin;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  text-align: center;
}
*/

/* ----------- /slideshow */

.home--featured-product__logo {
  width: 60%;
  max-width: 200px;
  margin: 0 0 1rem 0;
}
.home--featured-product__img {
  margin-bottom: 1rem;
  width: 100% !important;
  //max-width: 600px;
}

/* ---------------------- /home page content */



/* ---------------------- sub page content */

/*
This is a general top-margin for the sub-page body content.
The style on line 243 will over-ride this (because of the !important; declaration)
whent the mobile side menu is open.
*/
.content--subtopmargin { margin-top: 1rem; }

.submasthead-img {
  max-height: 220px;
  overflow: hidden;
}

.container--subpage__title { 
  background-color: $brand-color-3; 
  border-top: 5px solid $brand-color-4;
  border-bottom: 5px solid $brand-color-4;
}
.subpage__title {
  color: white;
  margin: 0;
  padding: 1rem 0;
  font-weight: bold;
  font-weight: 700;
  @include font-size(36);
  line-height: 1em;
}
.subpage__title sup {
  font-weight: normal;
  font-weight: 400;
}

.breadcrumbs--holder {
  padding: 2rem 0 1rem 0;
}
.breadcrumbs {
  font-size: $base-font-size - 4;
  line-height: 1em;
  color: lighten($base-text-color, 20%);
}
.breadcrumbs a {
  color: $base-text-color;
  text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:active,
.breadcrumbs a:focus {
  color: lighten($base-text-color, 20%);
  text-decoration: none;
}

/*
h2 size in _variables:
$base-font-size-n = 18;
$h2-size: $base-font-size-n + 26; (44)
*/
.subpage__intro { //h2
  font-weight: normal;
  font-weight: 400;
  @include font-size($h2-size - 14);
}

// "Resources" list (light/dark bg color) on sub-pages 
.product-resources__list {
  margin-bottom: 2rem !important;
  font-size: $base-font-size - 2;
}

.product-resources__list li {
  padding: .5rem .5rem .5rem 1rem;
  background-color: lighten($brand-color-4, 30%);
}
.product-resources__list li:nth-child(2n+1) {
  background-color: lighten($brand-color-4, 20%);
}

.product-resources__list .fa {
  margin-right: .25rem;
}

.product-resources__list a {
  text-decoration: none;
  color: $base-color-3;
}
.product-resources__list a:hover,
.product-resources__list a:focus,
.product-resources__list a:active {
  text-decoration: none;
  color: $base-color-9;
}

/* ---------------------- /sub page content */



form label {
  font-family: $sans !important;
}

// ----------- Footer

.footer {}

.container--footer {
  border-top: 5px solid $brand-color-1;
  background-color: green;
}

.container--footer {
  // use the gradient background instead of a solid color
  @extend .afp-gradient;
}

.grid--footer {
  padding-top: 2rem;
  padding-bottom: 3rem;
  color: white;
  font-family: $sans;
  font-weight: normal;
  font-weight: 400;
  @include font-size(20);
  line-height: 28px;
}

.grid--footer__right {
  text-align: right;
}

.footer__links--left {}
.footer__links--left a {
  color: white;
  text-decoration: none !important;
}

.footer__links--left a:hover,
.footer__links--left a:active {
  color: $brand-color-4;
  text-decoration: none;
}

.footer__links {
  color: $brand-color-4;
  float: right;
  line-height: 67px;
}

.footer__mapicon {
  float: right;
  margin-left: 1rem;
  border: 3px solid $brand-color-2;
}

.footer__links a {
  color: white;
  text-decoration: none !important;
}

.footer__links a:hover,
.footer__links a:active {
  color: $brand-color-4;
  text-decoration: none;
}

.footer__copyright--holder {
  text-align: center;
  margin-bottom: 5rem;
}
.footer__copyright {
  color: $brand-color-4;
}

/*
Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
*/

// ----------- /Footer



// ---------------------- Custom styles: template to follow

// BEM example
/*
.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>
*/

/*
.custom {}
.custom__header {}
.custom__body {}
.custom__img {}
.custom__list {}
.custom__list li {}
.custom__list a {}

.custom--variation {}
.custom--variation__header {} 
.custom--variation__body {} 
// etc

.custom--variation {
  @extend .custom;
  // .custom--variation styles
}
*/