/*
 * WVUM Career Search Bar — standalone module styles
 *
 * Intentionally transparent container so it can be placed on any background.
 * Buttons keep their configured colors (set inline by the child module).
 */

.wvu-career-search-bar {
  background: transparent;
  padding: 0;
  margin: 0;
}

.wvu-career-search-bar .search-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* Ensure consistent ordering: input first, then buttons (even if wrapping occurs). */
.wvu-career-search-bar .career-search-item.single-input-row {
  order: 0;
}

.wvu-career-search-bar .career-buttons {
  order: 1;
}

.wvu-career-search-bar .career-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.wvu-career-search-bar .career-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.wvu-career-search-bar .career-search-item .search-input {
  position: relative;
  flex: 1 1 auto;
}

.wvu-career-search-bar .career-search-item .search-input input[type="text"] {
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 100px;
  border: none;
  outline: none;
  padding: 12px 48px 12px 24px;
  background: rgba(255, 255, 255, 0.92);
  color: #6e6259;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.wvu-career-search-bar .career-search-item .search-input::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 24px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23002855"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
}

.wvu-career-search-bar .career-search-item .search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 12px 32px;
  border-radius: 2px;
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

/* Tooltip/helper styles (copied from hero module, scoped to this wrapper) */
.wvu-career-search-bar .career-search-item .tooltip-helper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  /* Helper line sits under buttons on dark backgrounds; keep it white. */
  color: #ffffff;
  cursor: default;
  user-select: none;
  text-align: left;
  opacity: 1;
  margin-top: 4px;
}

.wvu-career-search-bar .career-search-item .tooltip-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><mask id="m" x="0" y="0" width="16" height="16" maskUnits="userSpaceOnUse"><rect width="16" height="16" fill="black"/><circle cx="8" cy="8" r="8" fill="white"/><circle cx="8" cy="5" r="1" fill="black"/><rect x="7.25" y="6.5" width="1.5" height="6" rx="0.75" fill="black"/></mask></defs><rect width="16" height="16" fill="%23FFFFFF" mask="url(%23m)"/></svg>');
}

.wvu-career-search-bar .career-search-item .tooltip-label {
  text-align: left;
}

.wvu-career-search-bar .career-buttons .career-search-item {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.wvu-career-search-bar .career-buttons .career-search-item .tooltip-wrapper {
  width: 100%;
}

.wvu-career-search-bar .career-search-item .tooltip-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.wvu-career-search-bar .career-search-item .tooltip-popover {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  color: #002855;
  border-radius: 6px;
  padding: 12px;
  max-width: 280px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.08);
  display: none;
}

.wvu-career-search-bar .career-search-item .tooltip-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.1));
}

.wvu-career-search-bar .career-search-item .tooltip-wrapper:hover .tooltip-popover,
.wvu-career-search-bar .career-search-item .tooltip-wrapper:focus-within .tooltip-popover {
  display: block;
}

.wvu-career-search-bar .career-search-item .tooltip-popover .tooltip-content {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

@media only screen and (max-width: 980px) {
  /* Mobile: stack input above buttons. */
  .wvu-career-search-bar .search-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .wvu-career-search-bar .career-search-item.single-input-row {
    width: 100%;
    flex: 1 1 100%;
  }

  .wvu-career-search-bar .career-search-item.single-input-row .search-input {
    width: 100%;
    min-width: 0;
  }

  .wvu-career-search-bar .career-buttons {
    width: 100%;
    gap: 12px;
    /* Always one button per row and centered horizontally. */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .wvu-career-search-bar .career-buttons .career-search-item {
    width: 100%;
    align-items: center;
  }

  .wvu-career-search-bar .career-buttons .career-search-item .search-button {
    width: max-content;
  }
}

@media only screen and (min-width: 981px) {
  .wvu-career-search-bar .search-stack {
    flex-wrap: nowrap;
    align-items: center;
  }

  .wvu-career-search-bar .single-input-row {
    flex: 1 1 457px;
    min-width: 457px;
  }

  .wvu-career-search-bar .career-search-item.single-input-row .search-input {
    width: 100%;
    min-width: 457px;
  }

  .wvu-career-search-bar .career-buttons {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    /*
     * Important: keep buttons aligned even when only some items include the
     * helper/tooltip markup (which makes their containers taller).
     *
     * We also take the helper/tooltip line out of normal flow (below), but
     * using flex-start here avoids any centering side effects if other theme
     * styles interfere.
     */
    align-items: flex-start;

    /*
     * Critical alignment hardening:
     * If the helper/tooltip wrapper ever ends up in normal flow (due to CSS
     * overrides), it can increase the height of this container. Since the
     * overall stack is vertically centered, that would push the buttons above
     * the input (the misalignment shown in the screenshot).
     *
     * Lock the button row height to the button height and allow helper/tooltip
     * content to visually overflow below without affecting layout.
     */
    height: 44px;
    overflow: visible;
  }

  .wvu-career-search-bar .career-buttons .career-search-item {
    position: relative;
  }

  .wvu-career-search-bar .career-buttons .career-search-item .tooltip-wrapper {
    /* Match the hero module behavior: helper line should not affect layout */
    position: absolute !important;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 2;
  }

  .wvu-career-search-bar .career-buttons .search-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}