/* v813 -- selected tab reflects the current page; v812 linked chapters in the existing Admin-driven desktop website header.
 * Does not affect the v808.6 Home/Stays hero, SEO routes, or mobile menu layout. */
@media (min-width:901px) {
  html body #ys-hs.ys812-journey-ready #te724-primaryNav {gap:0!important;overflow:visible}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs {display:flex;align-items:center;gap:2px;position:relative;overflow:visible;flex:0 1 auto;padding-bottom:7px}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a {display:inline-flex;align-items:center;gap:7px;justify-content:center;border-radius:10px;padding:11px 10px!important;min-height:44px;line-height:1.2;transition:background-color .35s,box-shadow .35s,color .35s;position:relative;z-index:1}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a:after {content:none!important}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="home"] {margin-right:15px}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="home"]:before {content:"";position:absolute;right:-9px;top:10px;height:25px;border-right:1px solid #deddd7}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="planner"]:before,
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="city-guides"]:before,
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="stays"]:before {font:800 10px/1 ui-monospace,monospace;color:#a97448;letter-spacing:.03em}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="planner"]:before {content:"01"}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="city-guides"]:before {content:"02"}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a[data-header-tab="stays"]:before {content:"03"}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a.ys812-story-focus {background:#fff0e1!important;box-shadow:inset 0 0 0 1px #f6d0ad;color:#a94300!important}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a.ys812-story-focus:before {color:#e76202!important}
  html body #ys-hs.ys812-journey-ready #te724-primaryNav .ys-v756-tabs>a:focus-visible {outline:2px solid #F56A00;outline-offset:3px}
  html body #ys-hs.ys812-journey-ready .ys812-flow-track {position:absolute;bottom:1px;height:2px;border-radius:99px;background:#ece0d6;pointer-events:none;z-index:0}
  html body #ys-hs.ys812-journey-ready .ys812-flow-fill {height:100%;width:0;border-radius:99px;background:#F56A00;transition:width .85s ease}
  html body #ys-hs.ys812-journey-ready .ys812-flow-dot {position:absolute;top:50%;width:7px;height:7px;border-radius:99px;background:#F56A00;box-shadow:0 0 0 4px #ffe8d1;transform:translate(-50%,-50%);transition:left .85s ease}
}
@media (max-width:900px) {
  html body nav.mobile-bottom-nav .mbn-tab.ys812-story-focus>span:first-child {background:#fff0dd!important;color:#F56A00!important;box-shadow:inset 0 0 0 2px #F56A00!important;transition:background-color .3s, box-shadow .3s}
}
@media(prefers-reduced-motion:reduce) {#ys-hs .ys812-flow-dot,#ys-hs .ys812-flow-fill,#ys-hs .ys812-story-focus{transition:none!important}}

/* v813: current page, not hard-coded Home, owns the selected state. Also applies to
 * customized Admin web-tab orders and to the phone navigation sheet. */
html body #ys-hs #te724-primaryNav .ys-v756-tabs > a.ys813-current,
html body #ys-hs #te724-primaryNav .ys-v756-tabs > a[aria-current="page"] {
  color:#A94100!important;
  background:#FFF0E0!important;
  font-weight:800!important;
  box-shadow:inset 0 -3px 0 #F56A00;
}
html body #ys-hs #te724-primaryNav .ys-v756-tabs > a.ys813-current:focus-visible {
  outline:2px solid #F56A00;
  outline-offset:2px;
}
/* Keep the existing mobile bottom-bar selection. In the phone menu, use the same
 * persistent page highlight; the chapter animation must not compete with it. */
@media(max-width:900px) {
  html body #ys-hs #te724-primaryNav.te724-is-open .ys-v756-tabs > a.ys813-current {
    background:#FFF0E0!important;
    color:#A94100!important;
    border-left:3px solid #F56A00;
  }
}