/* =====================================================================
 * 30-nav-header.css — scoped nav/header parity fixes
 *
 * Covers BugHerd tickets:
 *   #285 — a nav/dropdown link is underlined at rest and the underline
 *          disappears on hover (the OPPOSITE of vestfin.com).
 *   #207 — desktop nav-link underline "hover effect triggers at the wrong
 *          time"; dropdown should open with the expected slide animation.
 *   #209 — mobile header styling + open mobile menu panel covers the whole
 *          screen (should be a compact panel, not a 100vh takeover).
 *   #210 — mobile submenu uses an inline accordion; the original is a
 *          drill-down ("slide to sub-list with a < back header").
 *
 * ROOT CAUSE for #285/#207:
 *   The bundled Nuxt CSS ships a global pair:
 *       a        { text-decoration: underline; }
 *       a:hover  { text-decoration: none; }
 *   which overrides Tailwind's `.no-underline` on the nav dropdown links.
 *   So the dropdown items show a solid underline at REST and LOSE it on
 *   HOVER. The real vestfin.com does the reverse: dropdown links carry an
 *   underline whose COLOR is transparent at rest and turns navy on hover
 *   (text-decoration-color animation), i.e. no visible underline until you
 *   hover. We reproduce that here, scoped to the navbar only.
 *
 * Enqueued AFTER overrides.css + 22-bsa-underline.css (see inc/assets.php),
 * so these rules win cascade ties without !important where specificity
 * already matches; a few high-specificity Nuxt globals need !important.
 * Scoped strictly to `.navbar` / `.mobile-navbar` — body content links are
 * untouched and keep their normal underline-at-rest behavior.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * #285 / #207 — desktop dropdown link underline (match vestfin.com)
 * ------------------------------------------------------------------- */

/* Rest state: NO visible underline on any navbar link (the bundled
   `a { text-decoration: underline }` is neutralised inside the navbar). */
.navbar a,
.navbar__options-wrapper a,
.navbar__wrapper__container__left-block__nav-items__item a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}

/* Hover state: underline becomes VISIBLE (navy), matching vestfin.com's
   `text-decoration-color: rgb(0,49,64)` on dropdown item hover. This also
   cancels the bundled `a:hover { text-decoration: none }` which otherwise
   wiped the underline at exactly the wrong moment (#207). */
.navbar__options-wrapper a:hover,
.navbar__options-wrapper a:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-color: #003140 !important;
}

/* The logo anchor must never show an underline (it carries .underline in
   markup but renders as an image link on live). */
.navbar__wrapper__container__left-block__logo a,
.navbar__wrapper__container__left-block__logo a:hover {
  text-decoration-color: transparent !important;
}

/* The orange CTA button keeps text-decoration:none in all states
   (reinforces 22-bsa-underline for the in-navbar instance). */
.navbar a.app-button,
.navbar a.app-button:hover,
.navbar a.app-button:focus {
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
 * #207 — top-level item active indicator (orange underbar, not a text
 * underline). vestfin.com: 6px transparent bottom border that turns
 * #ffa523 when the dropdown for that item is open. We hang it off the
 * `data-nav-active` attribute set by mobile-menu.js on open.
 * ------------------------------------------------------------------- */
.navbar__wrapper__container__left-block__nav-items__item {
  border-bottom: 6px solid transparent;
  transition: border-bottom-color 0.2s ease;
}
.navbar__wrapper__container__left-block__nav-items__item[data-nav-active] {
  border-bottom-color: #ffa523;
}

/* ---------------------------------------------------------------------
 * #207 — dropdown open/close animation. vestfin.com transitions the
 * options-wrapper over 0.3s ease-in-out. The panel is positioned
 * absolutely and animates its max-height (kept hidden via overflow).
 * When mobile-menu.js toggles `.hidden`, we animate in/out instead of a
 * hard show/hide by driving max-height + opacity off a helper class the
 * companion JS adds (`is-open`). Falls back gracefully if JS is absent.
 * ------------------------------------------------------------------- */
.navbar__options-wrapper {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow-y: hidden;
}
.navbar__options-wrapper.is-open {
  max-height: 80vh;
  opacity: 1;
}
/* While JS hasn't taken over (no is-open class yet) keep the bundled
   `.hidden` behavior — display:none — so nothing flashes. */

/* ---------------------------------------------------------------------
 * #209 — mobile header + open menu panel. The open menu must be a COMPACT
 * dropdown panel anchored under the top bar — NOT a 100vh full-screen
 * takeover. mobile-menu.js writes inline `height:100vh; position:fixed`
 * on open; the companion 30-nav-header.js clears those inline styles, and
 * these rules give the panel its real (auto-height) presentation.
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* The open menu sits in normal flow under the top bar; the drawer grows
     to fit its content (auto height), so the page hero shows beneath it
     exactly like vestfin.com. */
  .mobile-navbar.is-open {
    position: relative;
    display: flex;
    flex-direction: column; /* top-bar stacks ABOVE the nav list */
    height: auto;
    min-height: 0;
    width: 100%;
    background: #fff;
    z-index: 9999;
  }
  /* Top bar keeps logo left + close (X) right while the menu is open. */
  .mobile-navbar.is-open .mobile-navbar__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .mobile-navbar.is-open .mobile-navbar__nav-container {
	  display: block;
	  width: 100%;
	  background: #fff;
	  border-top: 1px solid #cacfc8;
	}

  /* Top-level rows: comfortable height + hairline divider + right chevron,
     matching the reference spacing. */
  .mobile-navbar__nav-container__actions__nav-items__item__row {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
    font-size: 16px;
    line-height: 24px;
  }

  /* CTA pinned with breathing room, not glued to the viewport bottom. */
  .mobile-navbar.is-open .mobile-navbar__nav-container__cta {
    margin-top: 0.5rem;
  }

  /* -----------------------------------------------------------------
   * #210 — drill-down sub-panel (NOT an inline accordion). When a
   * category is opened the companion JS adds `is-drilled` to .mobile-navbar
   * and `is-active-panel` to the open category. We then:
   *   - hide every top-level row except a synthetic back header,
   *   - show the active category's sub-list as a flat full-width list.
   * The back header (`[data-mobile-back]`) is injected by the JS.
   * ----------------------------------------------------------------- */
  .mobile-navbar.is-drilled
    .mobile-navbar__nav-container__actions__nav-items__item:not(.is-active-panel) {
    display: none;
  }
  /* In drilled mode the active row's own button (the category title) is
     replaced by the back header, so hide the original toggle button. */
  .mobile-navbar.is-drilled
    .is-active-panel
    > .mobile-navbar__nav-container__actions__nav-items__item__row {
    display: none;
  }
  /* The sub-panel fills the drawer as a flat list (override the inline
     accordion look). */
  .mobile-navbar.is-drilled
    .is-active-panel
    .mobile-navbar__nav-container__actions__nav-items__item__sub {
    display: block;
    background: #fff;
  }
  .mobile-navbar.is-drilled
    .is-active-panel
    .mobile-navbar__nav-container__actions__nav-items__item__sub a {
    padding: 12px 0;
  }

  /* Injected back header: `<  Category` */
  [data-mobile-back] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 20px 24px;
    font-weight: 700;
    font-size: 16px;
    color: #003140;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #cacfc8;
    cursor: pointer;
    text-align: left;
  }
  [data-mobile-back] .mobile-back-chevron {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-left: 2px solid #003140;
    border-bottom: 2px solid #003140;
    transform: rotate(45deg);
    margin-right: 0.25rem;
  }
}

.mobile-navbar.is-drilled .mobile-navbar__nav-container__actions__nav-items {
	padding: 0px;
}

.mobile-navbar.is-drilled .mobile-navbar__nav-container__cta {
	display: none;
}

.mobile-navbar .hiring-badge {
	display: none;
}

.mobile-navbar .mobile-navbar__nav-container__actions__nav-items__item .link-nav-header {
	font-weight: 700;
	padding-bottom: 0 !important;
	padding-top: 5px !important;
}