/*
 * Application CSS — only what UX4G 3.0.2 does not provide. Every value is a UX4G token.
 *
 * 1. Page background: UX4G's reset sets no body background, so the page would show the host's colour.
 * 2. Safe-area side gutter: .ux4g-container pads 12px; the contract (Design.md §8 page margin 16px)
 *    and phone safe-area insets need max(16px, inset). No UX4G utility takes env().
 * 3. Sticky site header that clears the phone status bar: ux4g-sticky-top pins to top:0,
 *    which slides under the safe-area inset; the band above it is painted to match.
 * 4. [hidden] must win over UX4G components that set display (alerts, cards are display:flex),
 *    so the filter and form status messages can hide items with the hidden attribute.
 * 5. Mega menu anchoring: .ux4g-mega-menu-wrapper is position:relative, so each dropdown hangs off its
 *    own trigger and a 56.25rem panel overflows the viewport for triggers in the middle of the navbar.
 *    .do-mega-anchor (later in the cascade than the component, same specificity) lets the panel anchor to
 *    the navbar container (.ux4g-relative) instead, and .do-mega-panel matches the container width.
 *    The ux4g-static utility cannot do this: it is defined before the mega menu rule and loses on order.
 * 6. In-page navigation: smooth scrolling (only when the reader has not asked for reduced motion) and
 *    a scroll offset so anchored sections are not hidden under the sticky header. UX4G has no
 *    scroll-behaviour or scroll-padding utility.
 */

/* 1 */
body {
  background: var(--ux4g-bg-neutral);
  color: var(--ux4g-text-neutral-primary);
}

/* 2 */
.do-gutter {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* 3 */
.do-site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--ux4g-z-dropdown, 1000);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--ux4g-bg-neutral-elevated);
}

/* 4 */
[hidden] {
  display: none !important;
}

/* 5 */
.do-mega-anchor {
  position: static;
}
.do-mega-panel {
  width: 100%;
}

/* 6 */
html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 8.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}