/* This is a fix for the the new cms version to have the cms frontend editing toolbar not
   overlap any actual content which is marked sticky-top or is wrapped in offcanvas. It
   adjusts the top value only in case the cms toolbar is present and uses CSS selectors
   to detect this because the toolbar has a fixed id. It is on purpose written in a way
   that the normal Bootstrap 5 features are minimally adjusted and no extra CSS classes
   must be used.
*/

:root {
    --cms-toolbar-height: 46px;
}

/* Any (optionally non-immediate) sibling of the toolbar */
/* Any descendant of a (optionally non-immediate) sibling of the toolbar */
#cms-top ~ .sticky-top,
#cms-top ~ * .sticky-top,
#cms-top ~ .sticky-sm-top,
#cms-top ~ * .sticky-sm-top,
#cms-top ~ .sticky-md-top,
#cms-top ~ * .sticky-md-top,
#cms-top ~ .sticky-lg-top,
#cms-top ~ * .sticky-lg-top,
#cms-top ~ .sticky-xl-top,
#cms-top ~ * .sticky-xl-top,
#cms-top ~ .sticky-xxl-top,
#cms-top ~ * .sticky-xxl-top,
#cms-top ~ .fixed-top,
#cms-top ~ * .fixed-top,
#cms-top ~ .offcanvas,
#cms-top ~ * .offcanvas {
    top: var(--cms-toolbar-height) !important;
}