/* ------------------------------ */
/* MDH Site Header Group
/* (Global Header / Main Nav)
/* ------------------------------ */

/* Top Row Columns */

.wp-block-group.mdh--header .wp-block-columns {
  /* override !important used in wp core styles for columns */
  align-items: center !important;
}

/* Keep Logo & Donate at the smallest width and allow Search in middle to fill
the available space. */
.wp-block-group.mdh--header .wp-block-column.mdh--header__logo,
.wp-block-group.mdh--header .wp-block-column.mdh--header__donate {
  flex: 0 0 auto;
}
.wp-block-group.mdh--header .wp-block-column.mdh--header__search {
  flex: 1 0 auto;
}

.wp-block-group.mdh--header .wp-block-search__inside-wrapper {
  justify-content: flex-end;
}

/* Logo Image */
.wp-block-group.mdh--header .wp-block-column.mdh--header__logo figure.wp-block-image {
  margin-top: 1em;
  margin-bottom: 1em;
}

.wp-block-group.mdh--header .wp-block-column.mdh--header__logo img {
  max-width: 172px;
}

/* Donate Button */
.wp-block-group.mdh--header .wp-block-column.mdh--header__donate .wp-block-button__link {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--normal);
  line-height: var(--wp--custom--line-height--one);
  padding-top: var(--wp--preset--spacing--x-small);
  padding-right: 1rem;
  padding-bottom: var(--wp--preset--spacing--x-small);
  padding-left: 1rem;
}

/* Search Toggle Button */
.wp-block-group.mdh--header .wp-block-column.mdh--header__search button.wp-block-search__button {
  color: var(--wp--preset--color--neutral-darker);
  background-color: transparent;
  border-color: transparent;
  font-weight: var(--wp--custom--font-weight--normal);
  line-height: var(--wp--custom--line-height--one);
  padding-top: 0.375rem;
  padding-right: var(--wp--preset--spacing--x-small);
  padding-bottom: 0.375rem;
  padding-left: var(--wp--preset--spacing--x-small);
  align-items: center;
}

.wp-block-group.mdh--header .wp-block-column.mdh--header__search button.wp-block-search__button[aria-expanded="true"] {
  border-color: var(--wp--preset--color--primary-darker);
}

.wp-block-group.mdh--header .wp-block-column.mdh--header__search button.wp-block-search__button:before {
  content: '';
  display: inline-block;
  background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-search-neutral_darker.svg');
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.5em;
}

/* Search Field */
.wp-block-group.mdh--header .wp-block-column.mdh--header__search input.wp-block-search__input {
  background-color: var(--wp--preset--color--neutral-lightest);
  border-width: 0;
  border-color: var(--wp--preset--color--neutral-darker);
  padding: 0.438rem;
}

/* Nav Bar (large screens) */

@media only screen and (min-width: 600px) {
  .wp-block-group.mdh--header .mdh--header__nav {
    background-color: var(--wp--preset--color--primary-darkest);
    color: var(--wp--preset--color--neutral-true-white);
    margin-top: 0;
  }

  .wp-block-group.mdh--header .mdh--header__nav ul.wp-block-navigation__container {
    gap: 0;
    height: 4rem;
    align-items: stretch;
  }

  /* Style the first level of nav items only (not children/dropdown links)  */
  .wp-block-group.mdh--header .mdh--header__nav div > ul > li.wp-block-navigation-item {
    padding-right: var(--wp--preset--spacing--small);
    padding-left: var(--wp--preset--spacing--small);
    transition: all 0.1s ease-in-out;
    align-items: stretch;
  }

  .wp-block-group.mdh--header .mdh--header__nav div > ul > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
    display: flex;
    align-items: center;
  }

  .wp-block-group.mdh--header .mdh--header__nav div > ul > li.wp-block-navigation-item:first-child {
    margin-left: var(--wp--preset--spacing--x-small);
    transition: all 0.1s ease-in-out;
  }

  .wp-block-group.mdh--header .mdh--header__nav li.wp-block-navigation-item:hover {
    background-color: var(--wp--preset--color--neutral-white);
    color: var(--wp--preset--color--primary-darker);
  }

  .wp-block-group.mdh--header .mdh--header__nav .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--medium);
  }

  /* Dropdown toggle button on main nav items */
  .wp-block-group.mdh--header .wp-block-navigation button.wp-block-navigation__submenu-icon {
    width: 1em;
    margin-top: -4px;
    margin-left: 1em;
    transition: all 0.1s ease-in-out;
  }

  .wp-block-group.mdh--header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    height: auto;
  }

  /* Dropdown menu on large screens */
  .wp-block-group.mdh--header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    color: var(--wp--preset--color--neutral-darker);
    background-color: var(--wp--preset--color--neutral-white);
    padding: 1rem;
    border: 0;
    z-index: 99;
    left: 0;
  }

  .wp-block-group.mdh--header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
    min-width: 22rem;
  }

  /* Dropdown menu link items */
  .wp-block-group.mdh--header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    padding: 1rem;
  }

  .wp-block-group.mdh--header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--neutral-true-white);
    text-decoration: underline;
  }

  /* Hide search + donate in the navbar on large screens */
  /* Hide "home" logo link on large screens */
  .mdh--header__nav .wp-block-search,
  .mdh--header__nav .wp-block-buttons,
  .wp-block-navigation .wp-block-navigation-item.mdh--header__mobile-home-link {
    display: none;
  }
}

/* Maintain apparent navbar left margin but allow correct hover state
width/padding  */
@media only screen and (min-width: 86rem) {
  .wp-block-group.mdh--header .mdh--header__nav div > ul > li.wp-block-navigation-item:nth-child(2) {
    margin-left: calc(var(--wp--preset--spacing--small) * -1);
  }
}

/* Middle stage before nav overlay can engage: keep nav items on a single line */
@media (min-width: 600px) and (max-width: 900px) {
  .wp-block-group.mdh--header .mdh--header__nav div > ul > li.wp-block-navigation-item {
    padding-right: var(--wp--preset--spacing--x-small);
    padding-left: var(--wp--preset--spacing--x-small);
  }
  .wp-block-group.mdh--header .wp-block-navigation button.wp-block-navigation__submenu-icon {
    width: 0.75em;
    margin-top: -1px;
    margin-left: 4px;
  }
}

/* Header on small screens (when overlay nav can engage) */
@media only screen and (max-width: 599px) {

  .wp-block-group.mdh--header {
    border-bottom: 1px var(--wp--preset--color--neutral-lightest) solid;
  }

  .wp-block-group.mdh--header .wp-block-group.mdh--header__nav {
    margin-top: 0;
  }

  .wp-block-group.mdh--header .wp-block-column.mdh--header__logo img {
    max-width: 150px;
  }

  /* Show search + donate in the navbar on small screens (they will be hidden
  inside the nav overlay unless it is opened). */
  .mdh--header__nav .wp-block-search {
    display: block;
  }
  .mdh--header__nav .wp-block-buttons {
    display: flex;
  }
  /* ...then hide the desktop versions in the logo bar */
  .wp-block-group.mdh--header .wp-block-column.mdh--header__search,
  .wp-block-group.mdh--header .wp-block-column.mdh--header__donate {
    display: none;
  }

  /* Toggle buttons for nav overlay */
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-open,
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 0.8rem;
    right: 0.75rem;
    border: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-open {
    background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-menu-neutral_darker.svg');
  }
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-close {
    background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-close-neutral_darker.svg');
  }
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-open svg,
  .wp-block-group.mdh--header button.wp-block-navigation__responsive-container-close svg {
    display: none;
  }

  /* Ensure menu open button can be positioned in the correct place */
  .wp-block-group.mdh--header nav.wp-block-navigation {
    position: static;
  }
  .wp-block-group.mdh--header {
    position: relative;
  }

  /* Style the overlay itself */
  .wp-block-group.mdh--header .wp-block-navigation__responsive-container {
    padding: 0;
    /* WP core's transition causes a noticeable jog/jump in the Y direction, so
    we disable it here and use only the opacity fade in/out. */
    transform: none !important;
  }
  .wp-block-group.mdh--header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0;
  }

  /* Navigation items within the overlay */
  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container {
    gap: 0;
  }

  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container,
  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container > li {
    width: 100%;
  }
  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container li {
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: var(--wp--preset--font-size--medium);
  }

  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container li a {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .mdh--header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--wp--preset--color--neutral-darker);
  }

  /* Submenu in overlay */
  .mdh--header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    width: 100%;
    /* Override important in wp core */
    background-color: var(--wp--preset--color--neutral-white) !important;
    padding: 0;
  }
  .wp-block-group.mdh--header .has-modal-open ul.wp-block-navigation__container li li {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .mdh--header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container li a {
    width: 100%;
  }

  /* Make homepage link emulate the logo */
  .mdh--header__mobile-home-link {
    border-bottom: 1px var(--wp--preset--color--neutral-lightest) solid;
    padding-left: 2rem;
  }
  .mdh--header__mobile-home-link a.wp-block-navigation-item__content {
    display: inline-block;
    width: 150px;
    height: 35px;
    background-image: url('/wp-content/themes/mdhumanities/assets/images/logo-maryland-humanities-horiz.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-indent: -999999999px;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* Search Form and Donate within the Overlay */
  .mdh--header .wp-block-navigation__responsive-container form,
  .mdh--header .wp-block-navigation__responsive-container .wp-block-buttons {
    width: 100%;
    padding: 0 2rem;
  }
  .mdh--header .wp-block-navigation__responsive-container input {
    background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-search-neutral_darker.svg');
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    padding-left: 2rem;
  }
  .mdh--header .wp-block-navigation__responsive-container input::placeholder {
    color: var(--wp--preset--color--neutral-darker);
    font-size: var(--wp--preset--font-size--medium);
    opacity: 1;
  }
  .mdh--header .wp-block-navigation__responsive-container input:focus {
    background-color: var(--wp--preset--color--neutral-lightest);
  }
  .mdh--header .wp-block-navigation__responsive-container .wp-block-buttons .wp-block-button {
    width: 100%;
  }
  .mdh--header .wp-block-navigation__responsive-container .wp-block-buttons {
    margin-top: -1rem;
  }
}