/***** HOUSE DENVER — NAV / LOGO / DROPDOWNS / ANNOUNCEMENT *****/


/* =========================================================
   GLOBAL VARIABLES
   ========================================================= */

:root {
  --announce-h: 44px;
}


/* =========================================================
   ANNOUNCEMENT BAR — CREATED ENTIRELY WITH CSS
   ========================================================= */

body::before {
  content: "JOIN US FOR OUR FALL CORPORATE FAST WORSHIP NIGHTS MONDAY, AUGUST 31–WEDNESDAY, SEPTEMBER 2 AT 6:30 PM.";

  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: var(--announce-h) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 8px 15px !important;

  background: #c62828 !important;
  color: #fff !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;

  box-sizing: border-box !important;

  z-index: 99999 !important;
}


/* Push the header below the fixed announcement bar */

.site-header,
.site-header.headroom,
.site-header.headroom--pinned,
.site-header.headroom--unpinned,
.site-header.headroom--not-top {
  top: var(--announce-h) !important;
}


/* =========================================================
   WORDPRESS ADMIN BAR
   ========================================================= */

body.admin-bar::before {
  top: 32px !important;
}

body.admin-bar .site-header,
body.admin-bar .site-header.headroom,
body.admin-bar .site-header.headroom--pinned,
body.admin-bar .site-header.headroom--unpinned,
body.admin-bar .site-header.headroom--not-top {
  top: calc(var(--announce-h) + 32px) !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     WHITE HEADER / NAVIGATION
     ------------------------------------------------------- */

  .site-header,
  .site-header .navbar,
  .site-header .nav-wrap,
  .ihb-zone,
  .ihb-zone.ihb-zone-center {
    background: #fff !important;
    background-color: #fff !important;
  }


  /* -------------------------------------------------------
     HEADER ROW
     ------------------------------------------------------- */

  .ihb-zone.ihb-zone-center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;
  }


  /* -------------------------------------------------------
     LARGE LOGO
     ------------------------------------------------------- */

  .site-branding,
  .site-logo,
  .custom-logo-link {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    flex: 0 0 auto !important;
  }

  .site-branding img,
  .site-logo img,
  img.custom-logo,
  .custom-logo-link img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 280px !important;
    max-height: 90px !important;

    object-fit: contain !important;
  }


  /* -------------------------------------------------------
     NAVIGATION WIDTH
     ------------------------------------------------------- */

  .ihb-zone-center .ihb-component-menu {
    flex: 1 1 auto !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .ihb-zone-center .navbar-collapse,
  .ihb-zone-center .menu-primary-inspiro-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }


  /* -------------------------------------------------------
     KEEP MAIN MENU ON ONE LINE
     ------------------------------------------------------- */

  .ihb-zone-center .navbar-nav {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
  }

  .ihb-zone-center .navbar-nav > li {
    display: block !important;

    float: none !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    white-space: nowrap !important;
  }

  .ihb-zone-center .navbar-nav > li > a {
    display: block !important;

    color: #000 !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    white-space: nowrap !important;
  }


  /* -------------------------------------------------------
     DESKTOP DROPDOWNS
     ------------------------------------------------------- */

  .site-header .menu li.menu-item-has-children,
  .site-header .navbar-nav li.menu-item-has-children {
    position: relative !important;
  }


  /*
   * Let the theme control dropdown opening and closing.
   * These rules control appearance only.
   */

  .site-header .sub-menu,
  .site-header .dropdown-menu,
  .site-header .navbar-nav .sub-menu,
  .site-header .navbar-nav .dropdown-menu {
    min-width: 260px !important;
    width: max-content !important;
    max-width: none !important;

    background: #111 !important;
    background-color: #111 !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;

    z-index: 99999 !important;
  }


  /* Dropdown rows */

  .site-header .sub-menu li,
  .site-header .dropdown-menu li,
  .site-header .navbar-nav .sub-menu li,
  .site-header .navbar-nav .dropdown-menu li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111 !important;

    box-sizing: border-box !important;
  }


  /* Dropdown links */

  .site-header .sub-menu li > a,
  .site-header .dropdown-menu li > a,
  .site-header .navbar-nav .sub-menu li > a,
  .site-header .navbar-nav .dropdown-menu li > a {
    display: block !important;

    width: 100% !important;

    padding: 10px 18px !important;

    background: #111 !important;
    color: #fff !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* Dropdown hover and focus */

  .site-header .sub-menu li > a:hover,
  .site-header .sub-menu li > a:focus,
  .site-header .dropdown-menu li > a:hover,
  .site-header .dropdown-menu li > a:focus,
  .site-header .navbar-nav .sub-menu li > a:hover,
  .site-header .navbar-nav .sub-menu li > a:focus,
  .site-header .navbar-nav .dropdown-menu li > a:hover,
  .site-header .navbar-nav .dropdown-menu li > a:focus {
    background: #333 !important;
    color: #fff !important;
  }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1024px) {

  /*
   * Increase the announcement height so the longer
   * message can wrap without covering the header.
   */

  :root {
    --announce-h: 64px;
  }


  /* -------------------------------------------------------
     MOBILE ANNOUNCEMENT
     ------------------------------------------------------- */

  body::before {
    padding: 8px 12px !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.5px !important;
  }


  /*
   * Do not override the theme's mobile-menu display,
   * visibility, position, height, opacity, transforms,
   * or accordion behavior.
   */


  /* -------------------------------------------------------
     WHITE MOBILE HEADER
     ------------------------------------------------------- */

  .site-header,
  .site-header .navbar,
  .site-header .nav-wrap,
  .ihb-zone {
    background: #fff !important;
    background-color: #fff !important;
  }


  /* -------------------------------------------------------
     MOBILE LOGO
     ------------------------------------------------------- */

  .site-branding img,
  .site-logo img,
  img.custom-logo,
  .custom-logo-link img {
    width: auto !important;
    height: auto !important;

    max-width: 200px !important;
    max-height: 70px !important;

    object-fit: contain !important;
  }


  /* -------------------------------------------------------
     MOBILE MENU PANEL
     ------------------------------------------------------- */

  .navbar-collapse,
  .site-header .navbar-collapse,
  .site-header .menu-primary-inspiro-container {
    background: #000 !important;
    background-color: #000 !important;
  }


  /* -------------------------------------------------------
     TOP-LEVEL MOBILE MENU LINKS
     ------------------------------------------------------- */

  .navbar-collapse .navbar-nav > li > a,
  .site-header .navbar-nav > li > a {
    color: #fff !important;
    background: transparent !important;
  }


  /* Top-level hover and focus */

  .navbar-collapse .navbar-nav > li > a:hover,
  .navbar-collapse .navbar-nav > li > a:focus,
  .site-header .navbar-nav > li > a:hover,
  .site-header .navbar-nav > li > a:focus {
    color: #fff !important;
    background: #222 !important;
  }


  /* -------------------------------------------------------
     MOBILE ACCORDION / DROPDOWNS
     ------------------------------------------------------- */

  .site-header .navbar-nav .sub-menu,
  .site-header .navbar-nav .dropdown-menu,
  .navbar-collapse .sub-menu,
  .navbar-collapse .dropdown-menu {
    background: #111 !important;
    background-color: #111 !important;
  }


  /* Dropdown rows */

  .site-header .navbar-nav .sub-menu li,
  .site-header .navbar-nav .dropdown-menu li,
  .navbar-collapse .sub-menu li,
  .navbar-collapse .dropdown-menu li {
    background: #111 !important;
  }


  /* Dropdown links */

  .site-header .navbar-nav .sub-menu li > a,
  .site-header .navbar-nav .dropdown-menu li > a,
  .navbar-collapse .sub-menu li > a,
  .navbar-collapse .dropdown-menu li > a {
    color: #fff !important;
    background: #111 !important;
  }


  /* Dropdown hover and focus */

  .site-header .navbar-nav .sub-menu li > a:hover,
  .site-header .navbar-nav .sub-menu li > a:focus,
  .site-header .navbar-nav .dropdown-menu li > a:hover,
  .site-header .navbar-nav .dropdown-menu li > a:focus,
  .navbar-collapse .sub-menu li > a:hover,
  .navbar-collapse .sub-menu li > a:focus,
  .navbar-collapse .dropdown-menu li > a:hover,
  .navbar-collapse .dropdown-menu li > a:focus {
    color: #fff !important;
    background: #333 !important;
  }


  /* -------------------------------------------------------
     MOBILE ARROWS / DROPDOWN INDICATORS
     ------------------------------------------------------- */

  .navbar-nav .dropdown-toggle,
  .navbar-nav .menu-item-has-children > a::after,
  .navbar-nav .menu-item-has-children > a::before {
    color: #fff !important;
  }

}


/* =========================================================
   WORDPRESS MOBILE ADMIN BAR
   ========================================================= */

@media (max-width: 782px) {

  body.admin-bar::before {
    top: 46px !important;
  }

  body.admin-bar .site-header,
  body.admin-bar .site-header.headroom,
  body.admin-bar .site-header.headroom--pinned,
  body.admin-bar .site-header.headroom--unpinned,
  body.admin-bar .site-header.headroom--not-top {
    top: calc(var(--announce-h) + 46px) !important;
  }

}