#offline-nav,#offline-nav *{box-sizing:border-box;font-family:Arial,sans-serif}#offline-nav{position:relative;z-index:1000;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;width:fit-content;max-width:96%;margin:18px auto 16px;padding:8px 12px;background:#f8f6f2;border:1px solid #ded9d2;border-radius:24px;box-shadow:0 8px 24px #41312709;line-height:1.3}#offline-nav .nav-item{position:relative;display:flex;align-items:center;border-radius:16px}#offline-nav a{color:#514440;text-decoration:none}#offline-nav .nav-link{display:block;font-size:13px;padding:13px 11px;white-space:nowrap;border-radius:16px;background:transparent}#offline-nav .nav-toggle{font:16px Arial;background:transparent;border:0;color:#782027;cursor:pointer;padding:10px 7px;margin-left:-8px;border-radius:12px}#offline-nav .active,#offline-nav .nav-item:hover,#offline-nav .nav-item.open{color:#fff;background:linear-gradient(120deg,#e65a50,#bd242b,#d83a36);background-size:220% 220%;animation:offlinePulse 2.4s ease-in-out infinite}#offline-nav .nav-sub{display:none;position:absolute;top:100%;left:0;min-width:210px;max-height:65vh;overflow:auto;list-style:none;margin:0;padding:8px;background:#faf8f5;border:1px solid #e3dcd4;border-radius:19px;box-shadow:0 14px 35px #41312713}#offline-nav .open>.nav-sub{display:block}#offline-nav li{list-style:none;margin:0;padding:0;line-height:1.4}#offline-nav .nav-sub a{display:block;padding:11px 13px;font-size:14px;border-radius:12px}#offline-nav .nav-sub a:hover{background:#efdfda;color:#8e242b}#offline-nav .nav-sub ul{margin:0 0 0 10px;padding:0 0 0 8px;border-left:1px solid #e5d9d1}#offline-nav :focus-visible{outline:2px solid #a64840;outline-offset:2px}@keyframes offlinePulse{0%,100%{background-position:0% 50%;transform:scale(1)}50%{background-position:100% 50%;transform:scale(1.025)}}@media(max-width:700px){#offline-nav{padding:7px;margin:10px auto}#offline-nav .nav-link{font-size:12px;padding:10px 8px}#offline-nav .nav-sub{min-width:180px;max-width:85vw}}@media(prefers-reduced-motion:reduce){#offline-nav .nav-item{animation:none!important}}
#offline-nav .active>.nav-link,#offline-nav .active>.nav-toggle,#offline-nav .nav-item:hover>.nav-link,#offline-nav .nav-item:hover>.nav-toggle,#offline-nav .open>.nav-link,#offline-nav .open>.nav-toggle{color:#fff}#offline-nav .nav-sub a:hover{background:#f5d3cf;color:#a91f28}

/* Continuous red-to-blue gradient cycle. */
#offline-nav .active,#offline-nav .nav-item:hover,#offline-nav .nav-item.open{background:linear-gradient(110deg,#e65a50 0%,#bd242b 14%,#d83a36 28%,#496fcd 55%,#183e94 72%,#457cdd 100%);background-size:400% 100%;animation:offlineColorPulse 6s ease-in-out infinite}
@keyframes offlineColorPulse{0%,100%{background-position:0% 50%;transform:scale(1)}50%{background-position:100% 50%;transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){#offline-nav .active,#offline-nav .nav-item:hover,#offline-nav .nav-item.open{animation:none!important;background-position:0% 50%;transform:none}}

/* Radial colour crossfade, with no travelling gradient. */
#offline-nav .nav-item{isolation:isolate}
#offline-nav .active,#offline-nav .nav-item:hover,#offline-nav .nav-item.open{background:radial-gradient(ellipse at center,#e96156 0%,#d23836 55%,#b51f2a 100%);background-size:100% 100%;animation:offlineRadialBreath 6s ease-in-out infinite}
#offline-nav .nav-item::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at center,#db423b 0%,#b51d29 55%,#8e1322 100%);opacity:0;pointer-events:none;z-index:-1}
#offline-nav .active::before,#offline-nav .nav-item:hover::before,#offline-nav .open::before{animation:offlineRadialBlue 6s ease-in-out infinite}
@keyframes offlineRadialBlue{0%,100%{opacity:0}50%{opacity:1}}
@keyframes offlineRadialBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){#offline-nav .active,#offline-nav .nav-item:hover,#offline-nav .nav-item.open,#offline-nav .nav-item::before{animation:none!important;transform:none}}

#local-breadcrumb{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 22px;padding:0 20px;font:14px/1.5 Arial,sans-serif;color:#514440}
#local-breadcrumb a{color:#73645e;text-decoration:none}#local-breadcrumb a:hover{text-decoration:underline;color:#a5242d}#local-breadcrumb [aria-current=page]{font-weight:600;color:#9b2831}#local-breadcrumb .breadcrumb-separator{color:#a99891}
#offline-nav .nav-sub a.current-subpage{background:#f1d8d3;color:#942832;font-weight:600}#offline-nav .nav-sub a.current-subpage::after{content:'•';margin-left:12px;color:#ae3037}

#offline-nav .nav-group-label{border:0;cursor:pointer;font-family:Arial,sans-serif;line-height:1.3;color:#514440;margin:0}#local-breadcrumb button{border:0;background:transparent;color:#73645e;font:inherit;cursor:pointer;padding:0}
/* Keep the current section red; use a distinct, steady blue for other choices. */
#offline-nav .nav-item:not(.active):hover,
#offline-nav .nav-item:not(.active).open,
#offline-nav .nav-item:not(.active):focus-within{
 background:radial-gradient(ellipse at center,#527bb8 0%,#365d98 60%,#294675 100%);
 animation:none;transform:none;
}
#offline-nav .nav-item:not(.active):hover::before,
#offline-nav .nav-item:not(.active).open::before,
#offline-nav .nav-item:not(.active):focus-within::before{animation:none;opacity:0}
#offline-nav .nav-item:not(.active):focus-within>.nav-link,
#offline-nav .nav-item:not(.active):focus-within>.nav-toggle{color:#fff}
/* Moving red perimeter on inactive navigation choices. */
@property --menu-orbit-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
#offline-nav .nav-item:not(.active):hover,
#offline-nav .nav-item:not(.active).open,
#offline-nav .nav-item:not(.active):focus-within{background:#f8f1ed;animation:none;transform:none}
#offline-nav .nav-item:not(.active):hover>.nav-link,
#offline-nav .nav-item:not(.active):hover>.nav-toggle,
#offline-nav .nav-item:not(.active).open>.nav-link,
#offline-nav .nav-item:not(.active).open>.nav-toggle,
#offline-nav .nav-item:not(.active):focus-within>.nav-link,
#offline-nav .nav-item:not(.active):focus-within>.nav-toggle{color:#9d2630}
#offline-nav .nav-item:not(.active)::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:2px;background:conic-gradient(from var(--menu-orbit-angle),transparent 0deg,transparent 220deg,#f0b1a8 255deg,#bf2632 300deg,#9e1828 338deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0}
#offline-nav .nav-item:not(.active):hover::after,
#offline-nav .nav-item:not(.active).open::after,
#offline-nav .nav-item:not(.active):focus-within::after{opacity:1;animation:menuRedOrbit 1s linear infinite}
@keyframes menuRedOrbit{to{--menu-orbit-angle:360deg}}
@media(prefers-reduced-motion:reduce){#offline-nav .nav-item::after{animation:none!important}}
