/* VSH rework: presentation mode (see rework-demo.js).
   Links outside the demo of the four released pages obviously not clickable. */
a.is-demo-disabled, form.is-demo-disabled { cursor: default; }

/* header, footer and the profile banner are navigation: mute what is not part of the demo.
   Opacity instead of colour, because the inherited hover rules of the original header win otherwise. */
.m-header a.is-demo-muted,
.m-header form.is-demo-muted,
.m-footer a.is-demo-muted,
.pc-banner a.is-demo-muted { opacity: .45; }

.m-header a.is-demo-muted:hover { background: transparent !important; box-shadow: none !important; color: var(--c-muted, #696969) !important; }
.m-header a.is-demo-muted:hover::after { display: none; }
.m-footer a.is-demo-muted:hover, .pc-banner a.is-demo-muted:hover { color: var(--c-muted, #696969) !important; }
.m-header form.is-demo-muted .m-search__field { cursor: default; }

/* short hint shown when a blocked link is clicked */
.demo-hint {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(.5rem);
  background: var(--c-primary, #155581); color: #fff; padding: .6rem 1rem;
  font: var(--t-base, .875rem)/1.4 var(--font-ui, "Roboto Condensed", sans-serif);
  box-shadow: var(--shadow-2, 0 6px 18px rgba(21, 85, 129, .14));
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 200;
}
.demo-hint.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }