/* ================================================
   NAV TRIAL (Cindi 10/6) — a lighter, roomier desktop nav in i4a colours.
   Undo: delete this file's <link> in header.cfm, or restore header.cfm from
   htdocs backups/htdocs_10-6-2026_pre-nav-trial/ (it also removes the
   description and subtitle markup).
   Desktop only (992px+); the phone menu is a separate overlay and is untouched.
   ================================================ */

/* new markup is never shown in the collapsed (phone) nav */
@media (max-width: 991.98px) {
  .navbar .nt-d, .navbar .nt-sub { display: none; }
}

@media (min-width: 992px) {
  /* ---- top bar links: navy text, soft pill on hover and while open ---- */
  .navbar .navbar-nav > .nav-item > .nav-link {
    color: #1A2C66;
    font-weight: 500;
    border-radius: 999px;
    padding: .5rem .95rem !important;
    transition: background-color .15s ease, color .15s ease;
  }
  .navbar .navbar-nav > .nav-item > .nav-link:hover,
  .navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
  .navbar .navbar-nav > .nav-item.dropdown:hover > .nav-link,
  .navbar .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
    background: #eef2fa;
    color: #1A2C66;
  }
  /* thin chevron instead of the solid triangle; flips while open (no animation, Cindi 10/6) */
  .navbar .dropdown-toggle::after {
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    padding: 2.5px;
    margin-left: .5rem;
    vertical-align: .25em;
    transform: rotate(45deg);
    opacity: .7;
  }
  .navbar .nav-item.dropdown:hover > .dropdown-toggle::after,
  .navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    vertical-align: -.05em;
  }

  /* same space before the button as between the menu items (34px; was 23) */
  .navbar .nav-cta { margin-left: calc(.5rem + 11px); }

  /* ---- panels: white, roomy, rounded, soft shadow ---- */
  .navbar .dropdown-menu {
    border: 1px solid #e6eaf2;
    border-radius: 10px;   /* was 16px; less rounded (Cindi 10/6) */
    box-shadow: 0 24px 60px rgba(15, 31, 77, .14), 0 2px 6px rgba(15, 31, 77, .04);
    padding: 1.6rem 1.75rem;
    margin-top: .55rem;
  }
  /* invisible bridge over that gap, so moving the mouse from the top link into the panel keeps it open */
  .navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-.55rem - 2px);
    height: calc(.55rem + 2px);
  }
  /* column headings: small, grey, sentence case (not spaced capitals) */
  .navbar .menu-heading {
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 .15rem;
  }
  .navbar .nt-sub {
    font-size: .84rem;
    color: #8a93a6;
    margin: 0 0 .8rem;
    line-height: 1.35;
  }
  .navbar .menu-heading.mt-4 { margin-top: 1.6rem !important; }

  /* items: navy titles, quiet hover */
  .navbar .dropdown-item {
    color: #1A2C66;
    font-weight: 500;
    border-radius: 10px;
    padding: .5rem .7rem;
  }
  .navbar .dropdown-item:hover, .navbar .dropdown-item:focus-visible {
    background: #f3f6fb;
    color: #1A2C66;
  }
  .navbar .dropdown-item .bi, .navbar .dropdown-item .bi-svg-handshake { color: #6f82a8; }
  .navbar .dropdown-item:hover .bi { color: #234093; }

  /* ---- Platform: dividers between columns, more air, shaded footer strip ---- */
  .navbar #platform-menu.dropdown-menu.megamenu { padding: 1.75rem 2rem 0 !important; }   /* same at every width, so the footer strip's -2rem margins reach both edges */
  #platform-menu.megamenu-wide > .row:first-child { column-gap: 1.5rem; }
  #platform-menu.megamenu-wide > .row:first-child > [class*="col-"] + [class*="col-"] {
    border-left: 1px solid #edf0f6;
    padding-left: 1.5rem;
  }
  #platform-menu.dropdown-menu .pex-start { background: none; border: 0; border-radius: 0; padding: 0; }   /* no box around Explore (Cindi 10/6); beats header.cfm's inline rule */
  #platform-menu .dropdown-item-pillar { color: #1A2C66; }
  #platform-menu .dropdown-item-pillar .menu-desc { color: #6b7280; font-size: .84rem; }
  #platform-menu.dropdown-menu .pex-menu-foot {   /* .dropdown-menu raises specificity over header.cfm's inline rule */
    background: #f6f8fc;
    border-top: 1px solid #edf0f6;
    margin: 1rem -2rem 0;
    width: auto;                     /* Bootstrap's width:100% stopped the strip short of the right edge */
    padding: .7rem 2rem;             /* compact band, equal top and bottom so the text stays centred (Cindi 10/6) */
    line-height: 1.3;
    border-radius: 0 0 10px 10px;
    color: #234093;
  }
  #platform-menu.dropdown-menu .pex-menu-foot:hover { background: #eef2fa; text-decoration: none; }

  /* ---- Who We Serve and Resources: two columns; only Resources has a grey line under each title (Cindi 10/6) ---- */
  .navbar .dropdown-menu.simple { width: auto; max-width: none; min-width: 0; }
  .navbar #who-we-serve-menu, .navbar #resources-menu {   /* layout no longer depends on :hover (it collapsed mid-move) */
    display: grid;
    grid-template-columns: repeat(2, 290px);
    gap: .2rem 1.25rem;
  }
  #resources-menu { left: auto; right: 0; }
  .navbar .nt-item { display: block; white-space: normal !important; padding: .6rem .75rem; }
  .navbar .nt-item > .bi { display: none; }
  .navbar .nt-t { display: block; font-weight: 600; color: #1A2C66; line-height: 1.3; }
  .navbar .nt-d { display: block; font-weight: 400; font-size: .84rem; color: #6b7280; line-height: 1.35; margin-top: .15rem; }

  /* 992-1199px: header.cfm pins the Platform panel lower (fixed, top 72px), so its gap is taller; bridge all of it */
  @media (max-width: 1199.98px) {
    #platform-menu.dropdown-menu::before { top: -2.25rem; height: 2.25rem; }
  }

  /* grey secondary text only on Resources (Cindi 10/6): hide the Explore the Platform descriptions too */
  #platform-menu.dropdown-menu .dropdown-item-pillar .menu-desc { display: none; }   /* beats header.cfm's later inline rule */
  #who-we-serve-menu .nt-t { font-weight: 500; }

  /* 992-1199px: slightly tighter links so the bar and button fit, button gap still matching the item gaps */
  @media (max-width: 1199.98px) {
    .navbar .navbar-nav > .nav-item > .nav-link { padding: .5rem .7rem !important; }
    .navbar .nav-cta { margin-left: 15px; }
  }

  /* Who We Serve keeps its icons (Cindi 10/6); Resources stays text-only with its grey lines */
  #who-we-serve-menu .nt-item { display: flex; align-items: center; gap: .6rem; }
  #who-we-serve-menu .nt-item > .bi { display: inline-block; font-size: 1rem; margin: 0; }

  /* 1200px+: centre the Platform panel in the window (header.cfm offsets it a fixed 330px left of
     the link, which ran it off the left edge at 1200-1280px); 72px = the bar's height, as header.cfm's 992-1199 rule */
  @media (min-width: 1200px) {
    .navbar #platform-menu.dropdown-menu.megamenu.megamenu-wide {
      position: fixed !important;
      top: 72px !important;
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
      max-width: calc(100vw - 32px) !important;
    }
    #platform-menu.dropdown-menu::before { top: -2.25rem; height: 2.25rem; }
  }

  /* Platform column items start at the heading's left edge, no indent (Cindi 10/6); hover = darker text, no box */
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item {
    padding-left: 0;
    padding-right: 0;
    background: none;
  }
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item:hover,
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item:focus-visible { background: none; color: #234093; }
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar { padding-left: 25px; padding-right: 0; }   /* text starts where the other columns' text does */
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar > i { left: 0; }   /* icon starts at the heading's left edge */
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar:hover { background: none; color: #234093; }

  /* Who We Serve and Resources items start at the panel's left edge like the headings, no indent;
     hover = darker text instead of a box (Cindi 10/6). Wider Who We Serve columns keep names on one line. */
  #who-we-serve-menu.dropdown-menu .nt-item, #resources-menu.dropdown-menu .nt-item {
    padding-left: 0;
    padding-right: 0;
    background: none;
  }
  #who-we-serve-menu.dropdown-menu .nt-item:hover, #resources-menu.dropdown-menu .nt-item:hover,
  #who-we-serve-menu.dropdown-menu .nt-item:hover .nt-t, #resources-menu.dropdown-menu .nt-item:hover .nt-t { background: none; color: #234093; }
  .navbar #who-we-serve-menu {
    grid-template-columns: repeat(2, max-content);
    column-gap: 2.5rem;
  }
  .navbar #resources-menu { column-gap: 2rem; }

  /* Resources gets its icons too (Cindi 10/6): icon on the left, title + grey line stacked beside it */
  #resources-menu .nt-item { display: grid; grid-template-columns: 1rem 1fr; column-gap: .6rem; align-items: start; }
  #resources-menu .nt-item > .bi { display: inline-block; grid-row: 1 / span 2; font-size: 1rem; margin: .15rem 0 0; }
  #resources-menu .nt-item > .nt-t, #resources-menu .nt-item > .nt-d { grid-column: 2; }

  /* gentle open (Cindi 10/6): fade in and rise 6px. Uses the separate `translate` property so it
     doesn't fight the Platform panel's centring transform. Off for people who ask for reduced motion. */
  /* Open/close without moving (Cindi 10/6: menus vanished on fast mouse moves). The old fade-and-rise slid the
     panel and its hover bridge 6px down for ~0.2s, leaving a strip a fast move could cross; now it only fades.
     Panels stay rendered but hidden, so closing can wait 0.2s if the pointer briefly leaves the menu bar on a
     quick diagonal move. Moving onto another top link still swaps panels at once. */
  .navbar .dropdown > .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: none;   /* open and close instantly (Cindi 10/6); the header script handles the short close grace */
  }
  .navbar .dropdown > #who-we-serve-menu, .navbar .dropdown > #resources-menu { display: grid; }
  /* Without the hover-intent script (header.cfm), panels follow :hover. With it (.nt-js on the navbar), the
     script decides which panel is open, so a fast diagonal move across a neighbouring link doesn't switch menus. */
  .navbar:not(.nt-js) .dropdown:hover > .dropdown-menu,
  .navbar.nt-js .dropdown.nt-open > .dropdown-menu,
  .navbar .dropdown > .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .navbar:not(.nt-js) .navbar-nav:hover > .dropdown:not(:hover) > .dropdown-menu:not(.show),
  .navbar.nt-js .dropdown:not(.nt-open) > .dropdown-menu:not(.show) {
    transition: none;
    visibility: hidden;
    opacity: 0;
  }
  .navbar.nt-js .nav-item.dropdown.nt-open > .dropdown-toggle::after { transform: rotate(-135deg); vertical-align: -.05em; }
  .navbar.nt-js .nav-item.dropdown:not(.nt-open):hover > .dropdown-toggle:not([aria-expanded="true"])::after { transform: rotate(45deg); vertical-align: .25em; }
  /* Who We Serve reads down the left column, then down the right, in the live menu's order (Cindi 10/6):
     left = AMC, Professional, Trade, Medical; right = Education, Nonprofits, Clubs */
  #who-we-serve-menu > li:nth-child(-n+4) { grid-column: 1; }
  #who-we-serve-menu > li:nth-child(n+5) { grid-column: 2; }
  #who-we-serve-menu > li:nth-child(1), #who-we-serve-menu > li:nth-child(5) { grid-row: 1; }
  #who-we-serve-menu > li:nth-child(2), #who-we-serve-menu > li:nth-child(6) { grid-row: 2; }
  #who-we-serve-menu > li:nth-child(3), #who-we-serve-menu > li:nth-child(7) { grid-row: 3; }
  #who-we-serve-menu > li:nth-child(4) { grid-row: 4; }

  /* Platform headings: ~25px between a heading and its first item, like the example (Cindi 10/6) */
  #platform-menu.dropdown-menu .menu-heading { margin-bottom: 1rem; }
  #platform-menu.dropdown-menu .menu-heading.mt-4 { margin-top: 1.9rem !important; }

  /* lighter type throughout (Cindi 10/6: "everything is screaming"): regular weight for links and items;
     Resources titles one step heavier so they still read as titles over their grey lines */
  .navbar .navbar-nav > .nav-item > .nav-link { font-weight: 400; }
  .navbar .dropdown-menu .dropdown-item,
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar,
  #who-we-serve-menu .nt-t, #who-we-serve-menu.dropdown-menu .nt-t { font-weight: 400; }
  #resources-menu.dropdown-menu .nt-t { font-weight: 500; }
  #platform-menu.dropdown-menu .pex-menu-foot { font-weight: 500; }


  /* hover = light blue box behind the item (Cindi 10/6, instead of bold). The box reaches .6rem past the
     text on each side through matching negative margins, so the text keeps its left alignment and nothing moves. */
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item,
  #who-we-serve-menu.dropdown-menu .nt-item, #resources-menu.dropdown-menu .nt-item {
    padding-left: .6rem;
    padding-right: .6rem;
    margin-left: -.6rem;
    margin-right: -.6rem;
    width: calc(100% + 1.2rem);
    border-radius: 8px;
  }
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar {
    padding-left: calc(25px + .6rem);
    padding-right: .6rem;
    margin-left: -.6rem;
    margin-right: -.6rem;
    width: calc(100% + 1.2rem);
    border-radius: 8px;
  }
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar > i { left: .6rem; }
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item:hover,
  #platform-menu.megamenu-wide.dropdown-menu .col-lg-3 > .dropdown-item:focus-visible,
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar:hover,
  #who-we-serve-menu.dropdown-menu .nt-item:hover, #resources-menu.dropdown-menu .nt-item:hover,
  #who-we-serve-menu.dropdown-menu .nt-item:focus-visible, #resources-menu.dropdown-menu .nt-item:focus-visible {
    background: #eef2fa;
    color: #1A2C66;
  }
  #who-we-serve-menu.dropdown-menu .nt-item:hover .nt-t, #resources-menu.dropdown-menu .nt-item:hover .nt-t { color: #1A2C66; }

  /* Explore items spaced like every other menu item now they have no descriptions (Cindi 10/6) */
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar { padding-top: .5rem; padding-bottom: .5rem; line-height: 1.25; }
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar > i { top: 50%; transform: translateY(-50%); }
  #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar { max-width: none; white-space: nowrap !important; }   /* header.cfm caps it at 215px below 1200px, which wrapped the names */
  /* "Add-ons" group inside Extend (Cindi 10/6; pricing lists AI Tools and Abstract & Paper Submission as add-ons) */
  #platform-menu.dropdown-menu .menu-heading.nt-addons { margin-top: 2.25rem; margin-bottom: .45rem; font-size: .78rem; color: #9aa3b5; }   /* smaller and lighter than the column headings, so it reads as a subsection */
  /* Platform is pinned to the window (top: 72px), so the panel's normal top margin pushed it ~15px lower than
     Who We Serve and Resources; drop it and nudge so all three panels start at the same line (Cindi 10/6) */
  .navbar #platform-menu.dropdown-menu.megamenu.megamenu-wide { margin-top: 0 !important; top: 66.2px !important; }   /* 6px offset remains from Bootstrap; measured to land at 72.2px like the others */
  /* Resources columns sized to their text so each grey line stays on one line (Cindi's longer wording, 10/6) */
  .navbar #resources-menu { grid-template-columns: repeat(2, max-content); }
  /* Platform's bridge now only spans the real 15px gap (link bottom ~57px to panel top 72px). The earlier
     36px bridge reached up over the bottom half of the other top links and blocked them (Cindi 10/6). */
  #platform-menu.dropdown-menu::before { top: -15px; height: 15px; }
  /* bridge exactly the gap between a top link (bottom 57.4px) and its hover-open panel (top 66.2px), never over the links */
  .navbar .dropdown-menu::before, #platform-menu.dropdown-menu::before { top: -8.8px; height: 8.8px; }   /* hover-open panels start 8.8px below the links */
  /* narrower windows: let Platform items wrap rather than run past the panel's right edge (Cindi 10/6) */
  @media (max-width: 1279.98px) {
    #platform-menu.megamenu-wide.dropdown-menu .dropdown-item,
    #platform-menu.megamenu-wide.dropdown-menu .dropdown-item-pillar { white-space: normal !important; }
    #platform-menu.megamenu-wide > .row:first-child { grid-template-columns: repeat(4, minmax(0, auto)); }
  }
  /* below 1100px: tighter panel padding and divider spacing so fewer items need to wrap */
  @media (max-width: 1099.98px) {
    .navbar #platform-menu.dropdown-menu.megamenu { padding: 1.5rem 1.25rem 0 !important; }
    #platform-menu.megamenu-wide > .row:first-child { column-gap: 1rem; }
    #platform-menu.megamenu-wide > .row:first-child > [class*="col-"] + [class*="col-"] { padding-left: 1rem; }
    #platform-menu.dropdown-menu .pex-menu-foot { margin-left: -1.25rem; margin-right: -1.25rem; }
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .navbar .dropdown > .dropdown-menu, .navbar .dropdown:hover > .dropdown-menu { transition: visibility 0s linear .2s; }
  .navbar .dropdown:hover > .dropdown-menu { transition: visibility 0s; }

}