/*
 Theme Name:   esux.es - Juan Ramón González Morales
 Theme URI:    http://esux.es
 Description:  Independent Publisher Child theme
 Author:       Juan Ramón González Morales
 Author URI:   http://jrgonzalez.es
 Template:     independent-publisher
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  esux-theme
*/

/* Parent css to everything works fine */
@import url("../independent-publisher/style.css");

/* NAV */

nav{
  width: 90%;
  max-width: 1280px;
  margin:  1rem auto;
  text-align: center;
}

.nav-trigger{
  display:none;
}

.nav-trigger-label{
  display:block;
  font-size: 2.5rem;
  cursor:pointer;
}

.menuElements{
  overflow:hidden;
  max-height: 0;
  transform: scaleY(0);
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  /* max-height technique
  If use the "height: auto", the effect not works.
  Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
  */
}

.nav-trigger:checked ~ .menuElements{
  /*Use a bigger menu height to works fine.*/
  max-height: 250px;
  transform: scaleY(1);
}

.menuElements a{
  display: block;
  color: black;
  font-size:2rem;
  padding: 1rem;
  margin: 0.5rem 2.5rem;
  border:none;
  text-decoration: none;
}
@media (min-width: 800px) {
  .nav-trigger-label{
    display:none;
  }

  .menuElements{
    display:block;
    max-height: 250px;
    transform: scaleY(1);
  }

  .menuElements a{
    display: inline-block;
    border-bottom: solid 0.2rem black;
    border-top: solid 0.2rem black;
  }
/*
  .menuElements a:hover{
    border-bottom: solid 0.2rem blue;
    border-top: solid 0.2rem blue;
    color: blue;
  }
*/

  .menuElements a:hover{
    border-bottom: solid 0.2rem #ff0066;
    border-top: solid 0.2rem #ff0066;
    color: orange;
  }

  .menuElements a:active{
    border-bottom: solid 0.2rem #ff0066;
    border-top: solid 0.2rem #ff0066;
  }
}

/* NAV */