/*
 *  These custom styles will override bootstrap enabled stylesheets
 */

/// titles 
h1, h2, .h1, .h2 {
   font-weight: $headings-font-weight + 200;
}

/// buttons
.btn-success,
.btn-success:hover,
.btn-warning,
.btn-warning:hover {
   color: $gray-100;
}

/// typography
.open_sansbold {
   font-weight: bold;
}

/// forms

@mixin title_in_form {
   font-size: 1.438em;
   font-weight: 700;
   width: 100%;
   border-bottom: 3px solid $gray-200;
   margin-bottom: 1em;
   display: block;
}

form {
   fieldset {
      margin-top: 1em;
      & > legend {
         @include title_in_form;
      }
   }
   /* avoid useless html in first level of the custom fields row loop in forms
   * (better should to improve the loop)
   */
   & > div.container-fluid {
      & > div.row > .parent {
         padding: 0;
         & div.cf-fields span.cf-title {
            margin: 1em -15px 0;
            width: calc(100% + 30px);
            @include title_in_form;
         }
      }
   }
   label.required:after {
      content: " *";
      color: $red;
   }
}

/// chill elements of design 

.sticky-form-buttons {
   margin-top: 4em;
   background-color: $beige;
   position: sticky;
   bottom: 0.3em;
   text-align: center;
   display: flex;
   padding: 0.8em 1.6em;
   border-radius: 0;
}

.chill-user-quote {
   border-left: 10px solid $yellow;
   margin: 1.5em 10px;
   padding: 0.5em 15px;
   quotes: "\201C" "\201D" "\2018" "\2019";
   background-color: $gray-200;
   blockquote {
      border-left: 0.4em solid $gray-400;
      padding-left: 0.9em;
      margin-left: 0.9em;
      font-style: italic;
   }
}

div.chill_address {
   div.chill_address_address {
      margin: 0.7em 0;
      font-size: 98%;
      font-variant: small-caps;
      p {
         display: inline-block;
         margin: 0 0 0 1.5em;
         text-indent: -1.5em;
      }
   }
}

/// base layout positions

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   footer {
      margin-top: auto;
   }
}

header {
   nav.navbar {
      padding: 0;
      a.navbar-brand img {
         height: 50px;
         margin: 8px 0;
      }
      div.navbar-collapse {
         float: right;
      }
      ul.navbar-nav {
         display: flex;
         align-items: stretch;
         li.nav-item {
            display: flex;
            &.btn {
               padding-top: 0;
               padding-bottom: 0;
            }
            & > a {
               align-self: center;
            }
            form.form-inline {
               align-self: center;
               display: flex;
               input.form-control {
                  align-self: center;
                  height: 32px;
               }
            }
         }
      }
      div.dropdown-menu {
         margin: 0;
         padding: 0;
         border-radius: 0;
         a.dropdown-item {
            width: 120%;
            border: 0;
            border-bottom: 1px solid $gray-200;
            font-size: smaller;
            i { 
               float: right; }
            &:hover { 
               color: $gray-500 !important; }
         }
      }
      
      // fullwidth menu when navbar is collapsed
      @media (max-width: 767px) {
         & {
            position: relative; 
         }
         button.navbar-toggler {
            float: right;
         }
         div.navbar-collapse {
            float: none;
            position: absolute;
            top: 4em;
            left: 0; 
            right: 0;
            z-index: 2;
            padding: 1em;
            border-top: 1px solid shade-color($primary, 25%);
            ul.navbar-nav {
               display: grid;
               grid-template-areas: 
                  "sear sear sear"
                  "sect user lang";
               li.nav-item {
                  flex-direction: column;
                  border: 0;
                  a.nav-link {}
                  &.navigation-search {
                     grid-area: sear;
                     margin-bottom: 1em;
                     form {
                        width: 100%;
                        input.form-control {}
                        button.btn {}
                     }
                  }
                  &.nav-section  { grid-area: sect; } 
                  &.nav-user     { grid-area: user; }
                  &.nav-language { grid-area: lang; }
               }
               li.dropdown {
                  &, & > * {
                     background-color: transparent !important;
                  }
                  a.dropdown-toggle {}
                  div.dropdown-menu {
                     display: block;
                     border: 0;
                     a.dropdown-item {
                        width: 100%;
                        border: 0;
                        border-top: 1px dotted $gray-200;
                        background-color: transparent !important;
                     }
                  }
               }   
            }
         }
      }
            
   }
}

div.banner {
   div.header-name, 
   div.header-details {
      div.row > div:first-child {
         @media (min-width: 576px) { 
            margin-left: 1.5em;
         }
      }
   }
   a {
      text-decoration: none;
   }
}

div.vertical-menu {
   border-radius: 0;
   margin-top: 0.5rem;
   a.list-group-item { 
      background-color: $info;
      border: 0;
      margin-bottom: 0.25rem;
      &:hover {
         background-color: shade-color($info, 5%)
      }
   }
}

footer.footer {
   background: $dark;
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
   p {
      font-family: Open Sans;
      font-weight: 300;
      clear: both;
      color: $white;
      font-size: 0.9em;
      line-height: 1.5em;
      margin: auto;
      max-width: 35em;
      text-align: center;
      a, a:hover {
         text-decoration: underline;
      }
   }
}

/// modal + vue 

div.modal-mask {
   display: inherit;
}