/*
 * Header layout across widths (partials/header-content.hbs).
 *
 * The horizontal bar (title, search field, Home/Products/Glossary, language, website link) needs about
 * 1340 px, but brand.css forces it from 768 px. So:
 *   up to  767 px  burger menu (brand.css, unchanged)
 *   768 - 1099 px  burger menu as well (rules below, the brand.css phone rules with higher specificity)
 *  1100 - 1365 px  horizontal bar with tighter item padding and a narrower search field
 *   from 1366 px   horizontal bar as designed
 * Keep 1100 px in step with css/products-menu.css, the touch toggle in head-meta.hbs and the Esc handler
 * in header-content.hbs.
 */

/* burger only where the burger menu is used */
@media (min-width: 1100px) {
  .navbar .navbar-burger { display: none !important; }
}

@media (min-width: 1100px) and (max-width: 1365px) {
  .navbar .navbar-start > .navbar-item,
  .navbar .navbar-start > .navbar-item > .navbar-link,
  .navbar .navbar-end > .navbar-item,
  .navbar .navbar-end > .navbar-item > .navbar-link { padding-left: .55rem; padding-right: .55rem; }
  /* dropdown links (Products, language) keep room on the right for their arrow */
  .navbar .navbar-start > .navbar-item > .navbar-link,
  .navbar .navbar-end > .navbar-item > .navbar-link { padding-right: 1.6rem; }
  .navbar .navbar-start > .navbar-item > .navbar-link::after,
  .navbar .navbar-end > .navbar-item > .navbar-link::after { right: .6rem; }
  .navbar .hdv-search--header { max-width: 160px; }
}

/* dropdowns inside the burger menu: the item itself gets no padding, its link carries it
   (otherwise "Products" is indented twice) */
@media (max-width: 1099px) {
  .navbar .navbar-menu.is-active .navbar-item.has-dropdown { padding: 0 !important; }
}

/* tablets: the phone layout from brand.css, which stops at 767 px */
@media (min-width: 768px) and (max-width: 1099px) {
  .navbar .navbar-brand { display: flex !important; align-items: center; width: 100%; }
  .navbar .navbar-burger {
    display: block !important;
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
  }
  .navbar .navbar-burger span {
    display: block !important;
    position: absolute;
    left: calc(50% - 10px);
    width: 20px;
    height: 2px;
    background-color: #fff !important;
    border-radius: 1px;
  }
  .navbar .navbar-burger span:nth-child(1) { top: calc(50% - 7px); }
  .navbar .navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
  .navbar .navbar-burger span:nth-child(3) { top: calc(50% + 5px); }

  .navbar .navbar-menu:not(.is-active) { display: none !important; }
  .navbar .navbar-menu.is-active {
    display: block !important;
    position: fixed !important;
    top: var(--navbar-height, 3.5rem) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: #1a1a1a !important;
    z-index: 9999 !important;
    padding: 1rem 0 !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .3) !important;
  }
  .navbar .navbar-menu.is-active .navbar-start,
  .navbar .navbar-menu.is-active .navbar-end { display: block !important; width: 100% !important; }
  .navbar .navbar-menu.is-active .navbar-item,
  .navbar .navbar-menu.is-active .navbar-link {
    display: block !important;
    width: 100% !important;
    color: #f5f5f5 !important;
    padding: .75rem 1.5rem !important;
    text-align: left !important;
    background: transparent !important;
  }
  .navbar .navbar-menu.is-active .navbar-item.has-dropdown { padding: 0 !important; }
  .navbar .navbar-menu.is-active .navbar-item:hover,
  .navbar .navbar-menu.is-active .navbar-link:hover { color: #c8b32f !important; background: rgba(255, 255, 255, .05) !important; }
  .navbar .navbar-menu.is-active .navbar-item.has-dropdown.is-active > .navbar-dropdown {
    display: block !important;
    position: static !important;
    background: #2c2c2c !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 1rem !important;
    margin: 0 !important;
    min-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .navbar .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) > .navbar-dropdown { display: none !important; }
}