/* LDP JPM v10.21 — navigation arrow precision + public SEO editor support */

/* Desktop dropdown indicator must always stay next to the menu label. */
@media (min-width:901px){
  .nav-list li.has-sub > a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center;
    gap:7px;
    white-space:nowrap!important;
    padding-right:.25rem!important;
  }
  .nav-list li.has-sub > a::after{
    content:""!important;
    display:inline-block!important;
    width:7px;
    height:7px;
    flex:0 0 7px;
    margin:0 0 4px 1px;
    border-right:1.7px solid currentColor;
    border-bottom:1.7px solid currentColor;
    transform:rotate(45deg);
    transform-origin:center;
    opacity:.72;
    transition:transform .18s ease,margin .18s ease;
  }
  .nav-list li.has-sub:hover > a::after,
  .nav-list li.has-sub:focus-within > a::after{
    transform:rotate(225deg);
    margin-bottom:-2px;
  }
  .nav-list li.has-sub > .sub-toggle{display:none!important}
  .nav-list li.services-mega > .services-mega-list{margin-top:2px}
}

@media (max-width:900px){
  .nav-list li.has-sub > a::after{display:none!important;content:none!important}
  .nav-list li.has-sub > .sub-toggle{
    flex:0 0 40px;
    margin-left:4px;
  }
}

/* SEO article helper / search-result preview */
.seo-article-fields{display:grid;gap:1rem}
.seo-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:1rem;align-items:start}
.seo-editor-controls{display:grid;gap:.8rem}
.seo-preview-card{border:1px solid #e2e7ef;border-radius:14px;background:#fff;padding:1rem;position:sticky;top:88px}
.seo-preview-kicker{font-size:.72rem;color:#687386;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.seo-preview-url{font:400 .78rem/1.35 Arial,sans-serif;color:#202124;overflow-wrap:anywhere;margin-bottom:.25rem}
.seo-preview-title{font:400 1.16rem/1.35 Arial,sans-serif;color:#1a0dab;margin:0 0 .25rem;display:block;text-decoration:none}
.seo-preview-desc{font:400 .82rem/1.48 Arial,sans-serif;color:#4d5156;margin:0}
.seo-counter{display:flex;justify-content:flex-end;font-size:.7rem;color:#768097;margin-top:.25rem}
.seo-counter.is-warn{color:#b45309}.seo-counter.is-good{color:#137333}
.seo-inline-tip{border-left:3px solid #3b82f6;background:#f5f9ff;border-radius:0 9px 9px 0;padding:.65rem .75rem;font-size:.76rem;line-height:1.55;color:#536079}
@media(max-width:860px){.seo-editor-grid{grid-template-columns:1fr}.seo-preview-card{position:static}}


/* LDP JPM v10.22 — navigation chevron hard-fix + proportional mega-menu polish */

/*
 * The legacy navigation uses ::after as an animated underline. v10.21 also
 * reused ::after as the dropdown chevron, so inherited absolute positioning
 * could render the chevron as a small diamond below the active menu label.
 * v10.22 renders the chevron as a real inline SVG and restores ::after to
 * underline-only duty.
 */
@media (min-width: 901px) {
  .nav-list > li.has-sub > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    padding: .3rem 0 !important;
  }

  .nav-list > li.has-sub > a .nav-menu-label {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
  }

  .nav-list > li.has-sub > a .nav-menu-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    color: currentColor;
    opacity: .72;
    transform: translateY(1px);
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav-list > li.has-sub > a .nav-menu-chevron svg {
    display: block;
    width: 12px;
    height: 12px;
    overflow: visible;
  }

  .nav-list > li.has-sub > a .nav-menu-chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .nav-list > li.has-sub:hover > a .nav-menu-chevron,
  .nav-list > li.has-sub:focus-within > a .nav-menu-chevron {
    transform: translateY(1px) rotate(180deg);
    opacity: 1;
  }

  /* Restore the original underline. Explicitly reset every property that
     v10.21's pseudo-element chevron overrode. */
  .nav-list > li.has-sub > a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--gold) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: right .3s var(--ease) !important;
    pointer-events: none !important;
  }

  .nav-list > li.has-sub > a:hover::after,
  .nav-list > li.has-sub > a.active::after,
  .nav-list > li.has-sub:focus-within > a::after {
    right: 0 !important;
    transform: none !important;
  }

  /* Desktop uses the inline SVG; the accordion toggle is mobile-only. */
  .nav-list > li.has-sub > .sub-toggle { display: none !important; }

  /* Keep the mega-menu visually balanced and avoid any item icon/text shift. */
  .nav-list li.services-mega > .services-mega-list {
    width: min(780px, calc(100vw - 48px)) !important;
    grid-template-columns: 244px repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .services-mega-item > a {
    grid-template-columns: 42px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 116px;
  }
  .services-mega-icon {
    align-self: center;
    justify-self: center;
    flex: 0 0 auto;
  }
  .services-mega-copy { align-self: center; }
  .services-mega-arrow {
    align-self: center;
    justify-self: end;
    line-height: 1;
  }
}

@media (max-width: 900px) {
  /* On mobile the arrow sits in the dedicated accordion button, so the link
     itself does not render an extra inline chevron. */
  .nav-list > li.has-sub > a .nav-menu-chevron { display: none !important; }
  .nav-list > li.has-sub > a::after { display: none !important; content: none !important; }
  .nav-list > li.has-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
  }
  .nav-list > li.has-sub > a {
    min-width: 0;
    width: 100%;
  }
  .nav-list > li.has-sub > .sub-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
  }
  .nav-list > li.has-sub > .sub-list {
    grid-column: 1 / -1;
  }
}

/* Small desktop guard: keep header menu on one line where possible without
   letting one item squeeze its chevron underneath. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { gap: .95rem !important; }
  .nav a { font-size: .86rem !important; }
  .nav-list > li.has-sub > a { gap: 5px !important; }
}