/* Shared page navigation: standard pages use hero, proof block, navigation.
   Special pages retain their explicit after-hero placement.
   Existing palette and native sticky behaviour are retained. This stylesheet
   precedes legacy important layers, including homepage first-paint CSS. */
@layer comemso-page-navigation {
  html body.cmo-design-system nav[data-page-nav-placement] {
    display:block!important;position:sticky!important;top:max(0px,var(--cmo-page-nav-top,68px) - 1px)!important;
    z-index:900!important;width:100%!important;margin:0!important;padding:8px 0!important;
    background:#006097!important;color:#fff!important;border-top:0!important;
    border-bottom:1px solid rgba(255,255,255,.19)!important;box-shadow:0 2px 5px rgba(0,28,50,.05)!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] .cmo-container {
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    flex-wrap:nowrap!important;min-height:48px!important;gap:20px!important;overflow:hidden!important;padding-block:0!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] ul {
    display:flex!important;flex:1 1 auto!important;align-items:center!important;flex-wrap:nowrap!important;
    gap:20px!important;width:auto!important;min-width:0!important;list-style:none!important;
    overflow-x:auto!important;overflow-y:hidden!important;margin:0!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] li {
    flex:0 0 auto!important;margin:0!important;padding:0!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] ul a {
    display:flex!important;align-items:center!important;min-height:32px!important;box-sizing:border-box!important;
    padding:2px 0!important;margin:0!important;border-bottom:2px solid transparent!important;
    font:700 var(--cmo-page-nav-size,1rem)/1.4 Roboto,Helvetica,Arial,sans-serif!important;
    white-space:nowrap!important;text-decoration:none!important;color:#fff!important;-webkit-text-fill-color:currentColor!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] ul a:is(:hover,[aria-current="location"]) {
    color:#fff!important;border-bottom-color:#41baec!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] a:focus-visible {
    outline:2px solid #fff!important;outline-offset:3px!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] [hidden] {display:none!important;}
  html:has(body.cmo-design-system nav[data-page-nav-placement]) {
    scroll-padding-top:calc(var(--cmo-page-nav-top,68px) + var(--cmo-page-nav-height,64px) + 16px)!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] .cmo-page-nav-sections {
    display:grid!important;grid-template-rows:auto auto!important;gap:0!important;flex:1 1 auto!important;min-width:0!important;
  }
  html body.cmo-design-system nav[data-page-nav-placement] .cmo-on-this-page__label {
    display:block!important;flex:0 0 auto!important;color:#b8e5fa!important;
    font-size:.8125rem!important;font-weight:400!important;line-height:1.3!important;
    margin:0!important;white-space:nowrap!important;
  }
  /* Keep the native keyboard outline inside the horizontal scroll viewport. */
  html body.cmo-design-system nav[data-page-nav-placement] ul {
    padding:5px!important;scroll-padding-inline:8px;
  }
}
