/* Header search field -- see resources/js/search-overlay.js. */

/* The top bar row the field is laid over. Added only when the row is static. */
.naw-search-host {
  position: relative;
}

.naw-search-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  background: var(--white, #fff);
}

.naw-search-overlay[hidden] {
  display: none;
}

/* No top bar found: a band across the top of the viewport instead. */
.naw-search-overlay.is-fixed {
  position: fixed;
  left: 0;
  bottom: auto;
  z-index: 100000;
  min-height: 88px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.naw-search-overlay__form {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.naw-search-overlay__input {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #c9ced6;
  border-radius: 0;
  background: var(--white, #fff);
  color: var(--midnight, #1d2c44);
  font: inherit;
  font-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}

/* The browser's own clear button would sit on top of the field. */
.naw-search-overlay__input::-webkit-search-cancel-button,
.naw-search-overlay__input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

/* Focus keeps the thin 1px border and only darkens it, so the field does not
   thicken or jump when it takes focus. */
.naw-search-overlay .naw-search-overlay__input:focus {
  border-color: var(--midnight, #1d2c44);
  outline: 0;
  box-shadow: none;
}

/* Two icon buttons. They carry the global button classes -- submit is
   .mdm-btn--primary, close is .mdm-btn--secondary -- so their colours and hover
   and focus states are edited in GenerateBlocks Global Styles, not here. What is
   left is the shape: a 48px square in place of a text button. The selectors are
   doubled up to beat the global styles' padding and the theme's bare `button`
   rules. */
.naw-search-overlay .naw-search-overlay__submit,
.naw-search-overlay .naw-search-overlay__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  cursor: pointer;
}

/* Primary has no border of its own; keep the box the same size as the close
   button's without drawing one. */
.naw-search-overlay .naw-search-overlay__submit {
  border-color: transparent;
}

.naw-search-overlay .naw-search-overlay__submit:focus-visible,
.naw-search-overlay .naw-search-overlay__close:focus-visible {
  outline: 2px solid var(--blue, #1b4f90);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .naw-search-overlay__input {
    font-size: 16px;
  }
}

/* The core Search block (mobile menus, and the search panel). Its border, colours,
   placeholder and margins are block settings. The block puts its border on the
   wrapper, but the theme also draws one on every input, so the input's is switched
   off here and the focus ring goes on the wrapper. */
.wp-block-search__inside-wrapper .wp-block-search__input {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
}

.wp-block-search__inside-wrapper .wp-block-search__input:focus {
  outline: 0;
}

.wp-block-search__inside-wrapper:focus-within {
  outline: 2px solid var(--blue, #1b4f90);
  outline-offset: -1px;
}