/* =========================================================
   JJA STATIC SEARCH
   ========================================================= */

.topbar-inner {
  position: relative;
}

.search-symbol {
  padding: 0;

  border: 0;

  background: transparent;
  color: #fff;

  font: inherit;
  line-height: inherit;

  cursor: pointer;
}

.search-symbol:hover,
.search-symbol:focus-visible {
  color: #f16a73;
}


/* Dropdown */

.jja-search-panel {
  position: absolute;

  z-index: 1000;

  top: 100%;
  right: 0;

  width: min(440px, calc(100vw - 30px));

  padding: 18px;

  border: 1px solid #e5e5e5;
  border-top: 0;

  background: #fff;

  box-shadow:
    0 5px 18px rgba(0,0,0,.14);

  visibility: hidden;
  opacity: 0;

  transform: translateY(-5px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}

.jja-search-panel.is-open {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);
}


/* Search field */

.jja-search-field-wrap {
  position: relative;
}

.jja-search-field {
  width: 100%;

  box-sizing: border-box;

  padding: 11px 38px 11px 12px;

  border: 1px solid #ddd;

  background: #fff;
  color: #565656;

  font-family:
    'Crimson Text',
    Georgia,
    serif;

  font-size: 16px;
  line-height: 22px;

  outline: none;
}

.jja-search-field:focus {
  border-color: #1ebdbb;
}

.jja-search-close {
  position: absolute;

  top: 50%;
  right: 9px;

  width: 26px;
  height: 26px;

  padding: 0;

  border: 0;

  background: transparent;
  color: #999;

  cursor: pointer;

  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 25px;

  transform: translateY(-50%);
}

.jja-search-close:hover {
  color: #f16a73;
}


/* Status */

.jja-search-status {
  min-height: 20px;

  margin: 10px 1px 5px;

  color: #999;

  font-family:
    'Crimson Text',
    Georgia,
    serif;

  font-size: 14px;
  font-style: italic;
  line-height: 20px;
}


/* Results */

.jja-search-results {
  max-height: min(470px, 60vh);

  overflow-y: auto;

  border-top: 1px solid #eee;
}

.jja-search-result {
  display: block;

  padding: 12px 2px;

  border-bottom: 1px solid #eee;

  text-decoration: none;
}

.jja-search-result-title {
  display: block;

  margin-bottom: 3px;

  color: #1ebdbb;

  font-family:
    'Crimson Text',
    Georgia,
    serif;

  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.jja-search-result-excerpt {
  display: block;

  color: #777;

  font-family:
    'Crimson Text',
    Georgia,
    serif;

  font-size: 14px;
  line-height: 19px;
}

.jja-search-result:hover
.jja-search-result-title,
.jja-search-result:focus
.jja-search-result-title {
  color: #f16a73;
}

.jja-search-result:focus {
  outline: none;

  background: #fafafa;
}


/* Highlight matching words */

.jja-search-result mark {
  padding: 0;

  background: transparent;
  color: inherit;

  font-weight: 700;
}


@media (max-width: 700px) {

  /* Desktop top bar itself is hidden by the existing mobile rules. */
  .jja-search-panel {
    display: none;
  }

}

/* Search dropdown anchors to actual top navigation */
.top-menu {
  position: relative;
}

/* Sitewide image drag protection */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


/* =========================================================
   MOBILE STATIC SEARCH
   ========================================================= */

.mobile-search-trigger {
  width: 100%;

  display: block;

  padding: 12px 0;

  border: 0;

  background: transparent;
  color: #565656;

  cursor: pointer;

  font-family:
    'Crete Round',
    Georgia,
    serif;

  font-size: 13px;
  font-weight: 400;

  letter-spacing: 1px;
  line-height: 20px;

  text-align: left;
  text-transform: uppercase;
}


.jja-mobile-search-panel {
  display: none;
}


@media (max-width: 700px) {

  .jja-mobile-search-panel {
    width: 100%;

    box-sizing: border-box;

    padding: 18px 0 5px;

    border-top: 1px solid #eeeeee;

    background: #fff;
  }

  .jja-mobile-search-panel.is-open {
    display: block;
  }

  .jja-mobile-search-heading {
    margin: 0 0 12px;

    color: #1ebdbb;

    font-family:
      'Old Standard TT',
      Georgia,
      serif;

    font-size: 21px;
    font-style: italic;

    line-height: 27px;
  }

  .jja-mobile-search-panel
  .jja-search-results {
    max-height: 52vh;
  }

  .jja-mobile-search-panel
  .jja-search-result {
    padding:
      11px 2px;
  }

  .jja-mobile-search-panel
  .jja-search-result-title {
    font-size: 16px;
  }

}

/* =========================================================
   MOBILE NAV FINAL CLEANUP
   ========================================================= */

@media (max-width: 700px) {

  /* Old duplicated secondary links are no longer used. */
  .mobile-nav-secondary {
    display: none !important;
  }


  /* Search behaves like a normal primary nav item. */
  .primary-nav > .mobile-search-trigger {
    display: flex;

    width: 100%;

    align-items: center;
    gap: 7px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    cursor: pointer;

    font-family:
      'Crete Round',
      Georgia,
      serif;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: 1px;
    line-height: inherit;

    text-align: left;
  }

  .mobile-search-icon {
    width: 15px;

    display: inline-block;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1;

    text-align: center;
  }


  /*
   * Replace the stretched font character on the
   * BLOG submenu control with a small CSS chevron.
   */

  .mobile-blog-toggle {
    font-size: 0 !important;
  }

  .mobile-blog-toggle::before {
    content: "";

    width: 7px;
    height: 7px;

    display: block;

    margin: auto;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition:
      transform .15s ease;
  }

  .nav-dropdown.mobile-submenu-open
  > .mobile-blog-toggle::before {
    transform: rotate(225deg);
  }

}

/* =========================================================
   MOBILE SEARCH VISIBILITY
   ========================================================= */

/* Never show the mobile search item on desktop/tablet */
.primary-nav > .mobile-search-trigger,
.jja-mobile-search-panel {
  display: none !important;
}


/* Mobile only */
@media (max-width: 700px) {

  .primary-nav > .mobile-search-trigger {
    display: flex !important;
  }

  .jja-mobile-search-panel.is-open {
    display: block !important;
  }

}