@import 'inc/mixins';
@import 'inc/fonts';

$body-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

$color: #000000;
$color-neg: #ddd;
$color-back: rgba(255, 255, 255, 1);
$font-padding: .5rem 1rem;
$font-size: 1rem;
$font-height: 1.5;
$space: 12px;

/* */
/* Hard coded Elements: */
/* */

* {
  font-family: $body-font;
  position: relative;
  z-index: 0;
}

html {
  min-height: 100%;
  display: flex;
}


html,
body,
#body_overlay {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}


body, .wrapper {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 0;
}

body, #body_overlay {
  flex: 1;
}


a, a:hover, a:visited, a:focus, a:active, a.hover {
  text-decoration: none;
}

a:hover, a.hover {
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}


.wrap_cm {
  /* This Class can center the content with a mix-width */
  margin: 0 auto;
}

.block_line {
  float: left;
}

.clear {
  clear: both;
}

.screen-reader-text {
  display: none;
}


.row-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.row-1 {
  order: 1;
  flex-grow: 1;
  display: inline-block;
  min-width: 220px;
}

.row-2 {
  order: 2;
  flex-grow: 1;
  display: inline-block;
}

.row-3 {
  order: 3;
  flex-grow: 1;
  display: inline-block;
}

.row-2-big {
  order: 2;
  flex-grow: 6;
  display: inline-block;
}

#body_overlay {
  min-height: 100%;
}

.container-fluid {
  padding: 0;
}


.thumbnail-background {
  min-height: 200px;
  background-position: center center;
  background-size: auto auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.thumbnail-link {
  display: block;
  min-height: 200px;
}

.dropdown-menu {
  background-color: transparent;
}

a.dropdown-item:hover {
  background-color: transparent;
}


#wrap_top_widget, #wrap_foot_text, #wrap_foot_widget_b {
  text-align: center;
}


.paged-menu {

  margin: 0 auto;
  padding: 0;
  list-style: none;

  li {
    margin: 1px 0 1px 10px;
    padding: 0 0 0 10px;
    float: left;

  }

  li a {

  }

  li a span {

    padding: .5rem 1rem;
    padding-right: .5rem;
    padding-left: .5rem;
    display: inline-block;
  }
}

.widget {
  margin: 0 $space;
}

.nav-link img, .dropdown-item img {
  height: 20px;
  margin-right: 6px;
}

.fa-search::before {
  content: "\f002";
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
  max-width: 100%;
  height: auto;
}

header {

  margin: $space;
}

article header {
  margin: 0;
}

article {
  margin-bottom: 2 * $space;
}

.navbar {
  padding: 0;
}

.mr-auto, .dropdown-menu-items {

  width: 100%;
}

.dropdown-menu {
  border-radius: 0;
  padding: 0;
  margin: 0;
  border-top: none;
  margin-top: 2px;
}

#wrap_content_nav {
  margin-right: $space;
}

#wrap_content_output, #wrap_content_widget {
  margin-top: $space;
}


/* */
/* Elements for Customizer: */
/* */


/* Backgrounds */

body {
  /* Full Page */
}


#sec_head {
  /* Full Head */
  z-index: 10;
}

#sec_head_meta {
  /* Full Head Meta */
  border-bottom: 1px solid $color-neg;
}

#sec_head_content {
  display: flex;
  align-items: center;
}

#wrap_top_search {

}

#wrap_head_content {
}

#wrap_content_nav header {
  border: 1px solid $color-neg;
  border-top: none;
}

#sec_head_nav {
  /* Full Footer Nav */
  border-bottom: 1px solid $color-neg;
  border-top: 1px solid $color-neg;
}

#sec_foot_nav {
  /* Full Footer Nav */
  border-bottom: 1px solid $color-neg;
  border-top: 1px solid $color-neg;
}

#sec_foot_text {
  /* Full Footer Text */
  border-top: 1px solid #bcbcbc;
}


/* For Child Elements Style Adjustments */

#wrap_top_nav {

  nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  li {
    border-left: 1px solid $color-neg;

    &:first-child {
      border-left: none;
    }

  }


}

#wrap_top_search {

  label {
    margin-bottom: 0;
  }

  * {
    float: right;
  }

  .search-submit {
    opacity: 0;
    position: absolute;
    width: 40px;
  }

  i {
    padding: 0 1rem;;
    line-height: $font-height;
    font-size: $font-size;
  }

  .search-field {
    border-radius: 0;
    border: none;
  }

  input {
    height: auto;
    padding: 0;
    background-color: transparent;
    opacity: 1;
    &::placeholder {
      opacity: 1;
    }
  }

}

#wrap_head_content {

  margin-top: $space;
  margin-bottom: $space;


  #head-text {
    margin: 0 auto;

    * {
      text-align: center;
    }

    a:hover {
      text-decoration: none;
    }
  }

}

#head-description span {
  border-top: 1px solid $color-back;
  padding-left: $space*2;
  padding-right: $space*2;
}

#wrap_head_nav {
  nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  li {
    border-left: 1px solid $color-neg;

    &:first-child {
      border-left: none;
    }

  }


}

#wrap_content_nav {
  nav.navbar {

  }

  ul {
    list-style-type: none;
    overflow: hidden;
    display: table;
  }

  li {
    border-top: 1px solid $color-neg;

    &:first-child {
      border-top: none;
    }

  }

}

#wrap_content_output {

  //margin: $space;
}

#wrap_foot_nav {
  nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  li {
    border-left: 1px solid $color-neg;

    &:first-child {
      border-left: none;
    }

  }


}

#wrap_foot_widget {
  margin-top: $space;
  margin-bottom: $space;

  .search-button-wrapper {
    i {
      display: none;
    }
  }
}


/* */
/* Breakpoints: */
/* */

#sec_foot_nav_collapsed, #wrap_top_nav_collapsed {
  display: none;
}

@media screen and (max-width: 576px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    z-index: 9999;

    &.open {
      -webkit-transform: translateX(-1rem);
      transform: translateX(-1rem); /* Account for horizontal padding on navbar */
    }

    ul li {
      border: none !important;
    }


  }

  #sec_foot_nav, #wrap_top_nav {
    display: none;
  }

  #sec_foot_nav_collapsed, #wrap_top_nav_collapsed {
    display: block;
  }
}