// reponsive class names are the same as bootstrap 3
// @see http://getbootstrap.com/css/
$screen-xs-max: 767;
$screen-sm-min: 768;
$screen-md-min: 992;
$screen-lg-min: 1200;

$smartphone: "(max-width: #{$screen-xs-max}px)";
$non-smartphone: "(min-width: #{$screen-sm-min}px)";

.visible-xs {
  @media #{$non-smartphone} {display: none !important;}
}

.hidden-xs {
  @media #{$smartphone} {display: none !important;}
}

// keep parent element of floated elements from collapsing
@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both;
  }
}

.common-title {
  header {
    h1, h2 {
      @media #{$smartphone} {font-size: 1.25em;}
    }
  }
}

/* pure css toggle-able window */
.toggleable-window {
  input.toggle {display: none;}
  label {
    font-size: 3em;
    font-weight:bold;
    &:hover, &:focus {
      cursor: pointer;
    }
  }
  input.toggle:checked ~ label {font-weight:normal;}
  input.toggle:checked ~ div {display: none;}
  div {
    position: absolute;
    width: 100%;
  }
}

// top navigation bar
.top-nav[role=navigation] {
  @extend .common-title;
  background-image: linear-gradient(to bottom left, white, gray);
  border-radius: 4px;
  margin-top: 8px;

  .nav-header-window, .nav-links, .nav-lang-select {
    display: inline-block;
    vertical-align: middle;
  }

  .nav-header-window {
    width: 30%;
    @media #{$smartphone} {width: 100%;}
    position: relative;
    vertical-align: middle;

    .toggleable-window {
      display: inline-block;
      label {margin-left: 10px;}
      // mobile menu
      div {
        // links for pages, archives,...
        a {
          font-size: 1.5em;
          margin: 0 2px 0 2px;
          display: block;
          padding: 6px 6px 6px 10px;
          background-color: #c0c0c0;
          border-bottom: 2px solid #202020;
        }
        // links for lang
        span a {background-color: #a0a0a0;}
      }
    }
    header {
      display: inline-block;
      @media #{$smartphone} {
        position: absolute;
        right: 10px;
      }
      @media #{$non-smartphone} {margin-left: 10px;}
      h1 { @media #{$smartphone} {font-size: 1.5em;} }
    }
  }

  .nav-links {
    width: 50%;
  }

  .nav-lang-select {
    width: 20%;
  }

  @include clearfix;

  ul li {
    display: inline;
    margin-right: 1em;
  }
}