/**
 * theme.css
 * Holds the specific theme styles of ev_base theme
 *
 * Note:
 * These will not be loaded into CKEditor like base.css is.
 *
 * Note: 
 * Styles written mobile-first. Each major section should contain media
 * queries for the styles within.
 *
 * (easily jump around by using crtl-F > section number)
 *
 * --- Table of Contents ---
 * --- ----------------- ---
 * 
 * 1 - Global (apply all the time & everywhere)
 *
 * 1.1 Header
 * 1.2 Content (container & block/layout, element styles go in base.css)
 * 1.3 Footer
 *
 * ----------------------------------------------------------------------------
**/

/**
 * 1 - Global
 * ----------------------------------------------------------------------------
**/


/* Class added by js during position calculations, that way a transition doesn't interfere with where the element would naturally be */
.reformatting {
  -webkit-transition: 0s !important;
  transition: 0s !important;
}

/* Minor bugfix w/ Admin menu */
#toolbar-administration {
  width: auto;
}

.layout--onecol .layout__region {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.block .content {
  margin: 0;
}

/* Outer Page Layout */
/* Sets the main content area to take up all available space when the page is shorter than the browser window */
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.dialog-off-canvas-main-canvas {
  width: 100%;
}

#page-wrapper {
  height: 100%;
}

#page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

#main-wrapper {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/**
 * 1.1 Header
 * ----------------------------------------------------------------------------
**/

/* Main Menu */
.region-header .block-menu {
  width: auto;
}

.block.menu--main .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.block.menu--main .menu .menu-item {
  float: none;
  width: 100%;
  position: relative;
}

.block.menu--main .menu-item > a {
  text-shadow: none;
  border: none;
  border-radius: 0;
}

@media all and (min-width: 461px) {

  .block.menu--main .menu-item > .menu.off-screen {
    position: relative;
  }
}

@media all and (min-width: 901px) {

  .block.menu--main .menu .menu-item {
    width: auto;
  }

  .block.menu--main .menu .menu > .menu-item {
    width: 100%;
  }

  .block.menu--main .menu-item > .menu {
    position: absolute;
    z-index: 100;
  }
}

/* ---------- Primary Menu Toggle ----------- */

/* Hide the toggle by default. */
.menu-toggle-target {
  display: none;
}

.menu-toggle {
  display: block;
}

/* Unhide it for the primary menu. */
.region-header .menu-toggle-target {
  display: inherit;
  position: fixed;
  top: 0;
}

[dir="rtl"] .region-header .menu-toggle:after {
  right: initial;
  left: 10px;
}

.region-header .menu-toggle-target-show:target ~ .menu-toggle,
.region-header .menu-toggle--hide {
  display: none;
} 

.region-header .menu-toggle-target-show:target ~ .menu-toggle--hide {
  display: block;
}

/* Hide the toggle for larger screens */
@media all and (min-width: 901px) {

  .region-header .menu-toggle {
    display: none;
  }

  .region-header .menu-toggle-target-show:target ~ .menu-toggle--hide {
    display: none;
  }

  /* Remove mobile sizing */
  .region-header .menu-toggle-target-show:not(:target) ~ .menu,
  .js .region-header .menu-toggle-target-show:not(:target) ~ .menu {
    opacity: 1;
    max-height: initial !important;
    overflow: visible;
  }
}

/* Preface */
#preface .layout-container {
  max-width: 100%;
}


/**
 * 1.2 Content
 * ----------------------------------------------------------------------------
**/

.layout-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.main-content {
  width: 100%;
}

@media (min-width: 851px) {

  .main-content {
    float: none;
  }

  .layout-sidebar-second .main-content {
    margin-right: 0;
  }

  #sidebar-second .section:first-child {
    padding-top: 0;
  }
}

/* View/Edit tabs */
.tabs ul.primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.tabs ul.primary li {
  float: none;
  margin: 0;
}

.tabs ul.primary li a {
  height: auto;
  border-radius: 0;
  float: none;
  line-height: 1;
  font-size: 1em;
  padding: 0.75em 1.5em;
}

.tabs ul.primary li:hover a {
  background: #f8f8f8;
}

@media screen and (max-width: 37.5em) {

  .tabs ul.primary li {
    width: 50%;
    text-align: center;
  }

  .tabs ul.primary li:nth-child(odd):not(:last-child) a {
    border-right: none;
  }
}

@media screen and (min-width: 37.5em) {

  .tabs ul.primary {
    margin: 1em auto;
  }

  .tabs ul.primary li:not(:last-child) a {
    border-right: none;
  }
}

/* Fields */
.field--name-field-header-image {
  width: 100%;
}

.field--name-body {
  width: 100%;
}


/**
 * 1.3 Footer
 * ----------------------------------------------------------------------------
**/

#block-ev-copyright-credit .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* Admin Info (Masquerade, User List, etc) */
.region-admin-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}