/* Desktop navigation, after Resend's header.
 *
 * The pattern, not their markup: a quiet bar of muted links that brighten on
 * hover, and a rounded dark dropdown panel whose rows highlight individually.
 * Re-skinned to Breadify's black / white / gold.
 *
 * Everything here is scoped to >=992px so the existing full-screen mobile
 * overlay in nav-mobile.css is untouched.
 *
 * Own file, never an inline <style> block. */

@media screen and (min-width: 992px) {

  /* ---------- the bar ---------- */

  .navbar-2 { padding-top: 26px; height: auto; }

  /* Inter across the nav so every page matches the hero, which already uses it. */
  .nav-menu-2,
  .nav-menu-2 a,
  .nav-menu-2 div,
  .navbar-2 .dropdown-toggle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }

  .nav-menu-2 {
    display: flex !important;
    align-items: center;
    gap: 2px;
    padding-left: 0;
  }

  /* Quiet by default, brighten on hover: Resend's core nav move.
     Regular weight, not the old Mulish 700 - the bold read as shouty. */
  .nav-menu-2 .nav-link,
  .nav-menu-2 .w-nav-link,
  .navbar-2 .dropdown-toggle {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 9px 13px;
    border-radius: 9px;
    transition: color .18s ease, background-color .18s ease;
  }

  /* Default: the nav sits straight on the white page (meet-the-team), which is
     the only nav page with no dark wrapper behind the bar. */
  .navbar-2 .nav-menu-2 .nav-link,
  .navbar-2 .nav-menu-2 .w-nav-link,
  .navbar-2 .dropdown-toggle { color: #6F6659 !important; }

  .navbar-2 .nav-menu-2 .nav-link:hover,
  .navbar-2 .nav-menu-2 .w-nav-link:hover,
  .navbar-2 .dropdown-toggle:hover,
  .navbar-2 .w-dropdown:hover .dropdown-toggle { color: #100F0D !important; }

  /* Dark wrappers: the homepage hero, the blog category hero, and the black
     band above the category index. More classes, so these win on specificity
     regardless of source order. */
  .hero-section.full .nav-menu-2 .nav-link,
  .hero-section.full .nav-menu-2 .w-nav-link,
  .hero-section.full .navbar-2 .dropdown-toggle,
  .standard-section.bg-black .nav-menu-2 .nav-link,
  .standard-section.bg-black .nav-menu-2 .w-nav-link,
  .standard-section.bg-black .navbar-2 .dropdown-toggle { color: #9C9285 !important; }

  .hero-section.full .nav-menu-2 .nav-link:hover,
  .hero-section.full .nav-menu-2 .w-nav-link:hover,
  .hero-section.full .navbar-2 .dropdown-toggle:hover,
  .hero-section.full .navbar-2 .w-dropdown:hover .dropdown-toggle,
  .standard-section.bg-black .nav-menu-2 .nav-link:hover,
  .standard-section.bg-black .nav-menu-2 .w-nav-link:hover,
  .standard-section.bg-black .navbar-2 .dropdown-toggle:hover,
  .standard-section.bg-black .navbar-2 .w-dropdown:hover .dropdown-toggle { color: #F3ECE1 !important; }

  /* The dropdown wrapper is a flex row in Webflow; it needs no padding of its
     own now that the toggle carries it. */
  .nav-menu-2 .w-dropdown.nav-link { padding: 0; }

  /* ---------- the caret ---------- */

  .navbar-2 .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  /* Webflow's markup has no icon element here, so the chevron is drawn in CSS. */
  .navbar-2 .dropdown-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg);
    opacity: .65;
    transition: transform .2s ease, opacity .2s ease;
  }
  .navbar-2 .w-dropdown:hover .dropdown-toggle::after,
  .navbar-2 .dropdown-toggle.w--open::after {
    transform: rotate(225deg);
    margin-top: 2px;
    opacity: 1;
  }

  /* ---------- the panel ---------- */

  /* Webflow paints .dropdown-list #ddd; the visible card is the wrap inside it,
     so the list itself becomes a transparent positioning shell. */
  .navbar-2 .dropdown-list {
    background-color: transparent !important;
    padding: 10px 0 0 !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 232px;
    border: 0;
    box-shadow: none;
  }

  .navbar-2 .dropdown-list.w--open {
    animation: bfy-nav-in .18s ease-out both;
  }

  @keyframes bfy-nav-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  .navbar-2 .dropdown-link-wrap {
    background-color: #1A1815;
    border: 1px solid #2A2620;
    border-radius: 14px;
    padding: 7px;
    box-shadow: 0 18px 40px -12px #00000080, 0 2px 6px #0000004d;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  /* Each row is its own hit target that lights up, rather than the whole card. */
  .navbar-2 .dropdown-link {
    color: #B7A98F !important;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.2;
    /* Webflow ships margin:0 auto, which centres each row inside the flex
       column instead of letting it fill the panel. */
    margin: 0 !important;
    align-self: stretch;
    text-align: left;
    padding: 9px 12px;
    border-radius: 9px;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
  }

  .navbar-2 .dropdown-link:hover {
    color: #F3ECE1 !important;
    background-color: #242019;
  }

  .navbar-2 .dropdown-link.w--current { color: #F3ECE1 !important; }

  @media (prefers-reduced-motion: reduce) {
    .navbar-2 .dropdown-list.w--open { animation: none; }
    .navbar-2 .dropdown-toggle::after { transition: none; }
  }
}