/* ==========================================================
   PLACEBOES NAVBAR
   Animations + Active States + Dropdowns
   Bootstrap 4
========================================================== */

/* ==========================================================
   1. STANDARD NAV ITEMS
========================================================== */

.placeboes-nav-link {
  position: relative;
}

/* Actual link inside nav item */

.placeboes-nav-link > .nav-link {
  position: relative;
  display: inline-block;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease, background-color .18s ease;
}

/* Hover / focus */

.placeboes-nav-link > .nav-link:hover, .placeboes-nav-link > .nav-link:focus {
  color: #ffffff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* ==========================================================
   2. HOVER UNDERLINE
========================================================== */

.placeboes-nav-link > .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: width .22s ease;
}

/* Show underline only on hover / keyboard focus */

.placeboes-nav-link > .nav-link:hover::after, .placeboes-nav-link > .nav-link:focus::after {
  width: 100%;
}

/* ==========================================================
   3. ACTIVE / CURRENT PAGE
========================================================== */

/* Bootstrap Studio structure:

   <li class="nav-item placeboes-nav-link">
       <a class="nav-link active">Home</a>
   </li> */

.placeboes-nav-link > .nav-link.active, .placeboes-nav-link > .nav-link.active:hover, .placeboes-nav-link > .nav-link.active:focus {
  color: #156082 !important;
  background-color: #ffffff !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Absolutely no underline on current page */

.placeboes-nav-link > .nav-link.active::after, .placeboes-nav-link > .nav-link.active:hover::after, .placeboes-nav-link > .nav-link.active:focus::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
}

/* ==========================================================
   4. SCIENCE / DROPDOWN TOGGLE
========================================================== */

.placeboes-science-link {
  position: relative;
  display: inline-block;
  color: #ffffff !important;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0 2px;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease, background-size .22s ease, background-color .18s ease;
}

/* Hover / focus / open */

.placeboes-science-link:hover, .placeboes-science-link:focus, .dropdown.show > .placeboes-science-link {
  color: #ffffff !important;
  transform: translateY(-1px);
  background-size: 100% 2px;
  text-decoration: none !important;
}

/* Remove unwanted pseudo element */

.placeboes-science-link::before {
  display: none !important;
  content: none !important;
}

/* ==========================================================
   5. ACTIVE SCIENCE / DROPDOWN PARENT
========================================================== */

.placeboes-science-link.active, .placeboes-science-link.active:hover, .placeboes-science-link.active:focus, .dropdown.show > .placeboes-science-link.active {
  color: #156082 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ==========================================================
   6. CUSTOM DROPDOWN CARET
========================================================== */

.placeboes-science-link.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-left: .45rem;
  vertical-align: .10rem;
  background: none;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .22s ease;
}

/* Rotate caret when dropdown is open */

.dropdown.show > .placeboes-science-link.dropdown-toggle::after {
  transform: rotate(-135deg);
}

/* ==========================================================
   7. DESKTOP NAVBAR / DROPDOWN LAYERING
========================================================== */

@media (min-width: 992px) {
  .navbar, .navbar-collapse, .navbar-nav {
    position: relative;
    z-index: 5000;
    overflow: visible !important;
  }
}

/* Dropdown positioning parent */

@media (min-width: 992px) {
  .navbar .dropdown {
    position: relative;
    z-index: 5001;
    overflow: visible !important;
  }
}

/* ==========================================================
   8. HOVER-SAFE BRIDGE
========================================================== */

@media (min-width: 992px) {
  .navbar .dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -12px;
    width: calc(100% + 24px);
    height: 16px;
    background: transparent;
    pointer-events: auto;
  }
}

/* ==========================================================
   9. DESKTOP DROPDOWN PANEL
========================================================== */

@media (min-width: 992px) {
  .placeboes-dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    z-index: 9999 !important;
    min-width: 260px;
    margin: 0 !important;
    padding: .55rem 0;
    border: none;
    border-radius: 0 0 6px 6px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity .18s ease, visibility .18s ease;
  }
}

/* ==========================================================
   10. SECOND HOVER-SAFE BRIDGE
========================================================== */

@media (min-width: 992px) {
  .placeboes-dropdown-menu::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
    background: transparent;
    pointer-events: auto;
  }
}

/* ==========================================================
   11. OPEN DESKTOP DROPDOWN
========================================================== */

@media (min-width: 992px) {
  .navbar .dropdown:hover > .placeboes-dropdown-menu, .navbar .dropdown:focus-within > .placeboes-dropdown-menu, .navbar .dropdown.show > .placeboes-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Keep caret rotated while hovering/open */

@media (min-width: 992px) {
  .navbar .dropdown:hover > .placeboes-science-link.dropdown-toggle::after, .navbar .dropdown:focus-within > .placeboes-science-link.dropdown-toggle::after, .navbar .dropdown.show > .placeboes-science-link.dropdown-toggle::after {
    transform: rotate(-135deg);
  }
}

/* ==========================================================
   12. MOBILE DROPDOWN
========================================================== */

@media (max-width: 991.98px) {
  .placeboes-dropdown-menu {
    display: none;
    position: static !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: .35rem 0;
    border: none;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
  }
}

@media (max-width: 991.98px) {
  .dropdown.show > .placeboes-dropdown-menu {
    display: block;
  }
}

/* ==========================================================
   13. DROPDOWN ITEMS
========================================================== */

.placeboes-dropdown-menu .dropdown-item {
  position: relative;
  display: block;
  padding: .70rem 2rem;
  transition: padding-left .18s ease, background-color .18s ease, color .18s ease;
}

.placeboes-dropdown-menu .dropdown-item:hover, .placeboes-dropdown-menu .dropdown-item:focus {
  padding-left: 2.25rem;
  color: #156082;
  background: rgba(21, 96, 130, .07);
  outline: none;
}

/* ==========================================================
   14. DROPDOWN ITEM INDICATOR
========================================================== */

.placeboes-dropdown-menu .dropdown-item::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 3px;
  height: 0;
  background: #156082;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: height .18s ease;
}

.placeboes-dropdown-menu .dropdown-item:hover::before, .placeboes-dropdown-menu .dropdown-item:focus::before {
  height: 18px;
}

/* ==========================================================
   15. ACTIVE DROPDOWN ITEM
========================================================== */

.placeboes-dropdown-menu .dropdown-item.active, .placeboes-dropdown-menu .dropdown-item:active {
  color: #156082 !important;
  background-color: rgba(21, 96, 130, .08) !important;
}

.placeboes-dropdown-menu .dropdown-item.active::before {
  height: 18px;
}

/* ==========================================================
   16. NAVBAR BUTTONS
   Search / Login / Ask AI
========================================================== */

.placeboes-nav-button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.placeboes-nav-button:hover, .placeboes-nav-button:focus {
  transform: translateY(-2px);
  background-color: #1b7097;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(21, 96, 130, .22);
  outline: none;
}

.placeboes-nav-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(21, 96, 130, .18);
}

/* ==========================================================
   17. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .placeboes-nav-link > .nav-link, .placeboes-nav-link > .nav-link::after, .placeboes-science-link, .placeboes-science-link::after, .placeboes-dropdown-menu, .placeboes-dropdown-menu .dropdown-item, .placeboes-dropdown-menu .dropdown-item::before, .placeboes-nav-button {
    transition: none !important;
  }
}

/* ==========================================================
   ACTIVE / CURRENT PAGE
========================================================== */

/* Current page */

.navbar .placeboes-nav-link > .nav-link.active, .navbar .placeboes-nav-link > a.active {
  background-color: #ffffff !important;
  color: #156082 !important;
  filter: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 3px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Keep active text teal on hover/focus */

.navbar .placeboes-nav-link > .nav-link.active:hover, .navbar .placeboes-nav-link > .nav-link.active:focus, .navbar .placeboes-nav-link > a.active:hover, .navbar .placeboes-nav-link > a.active:focus {
  background-color: #ffffff !important;
  color: #156082 !important;
  filter: none !important;
}

/* IMPORTANT:
   Active page must NOT get the animated underline */

.navbar .placeboes-nav-link > .nav-link.active::after, .navbar .placeboes-nav-link > a.active::after {
  width: 0 !important;
  display: none !important;
}

/* ==========================================================
   ACTIVE DROPDOWN / CURRENT SECTION
========================================================== */

/* Active dropdown parent */

.navbar .placeboes-science-link.active, .navbar .dropdown-toggle.active {
  background-color: #ffffff !important;
  color: #156082 !important;
  filter: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 3px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  background-image: none !important;
}

/* Active dropdown stays the same on hover/focus/open */

.navbar .placeboes-science-link.active:hover, .navbar .placeboes-science-link.active:focus, .navbar .dropdown.show > .placeboes-science-link.active, .navbar .dropdown-toggle.active:hover, .navbar .dropdown-toggle.active:focus {
  background-color: #ffffff !important;
  color: #156082 !important;
  filter: none !important;
  background-image: none !important;
}

/* No underline on active dropdown */

.navbar .placeboes-science-link.active::before {
  display: none !important;
  content: none !important;
}

/* Keep custom caret teal */

.navbar .placeboes-science-link.active.dropdown-toggle::after {
  border-right-color: #156082 !important;
  border-bottom-color: #156082 !important;
}