/* Page-level rules from design v3's global <style> block. These target html and
   body, which Blazor's scoped stylesheets cannot reach (every selector there is
   rewritten to sit under the component's b-* scope attribute), so they ship as a
   plain stylesheet registered alongside showcase.js in Index.razor.

   Oqtane adds resources per page, so this only loads on pages carrying the
   Showcase module — it does not restyle the rest of the site. */

/* Contains the negative-margin bleed used by the narrow-screen scroll strips
   (hero, device tiles, mega-menu rows) without letting the page pan sideways.
   `clip` rather than `hidden`: `hidden` on html would make the element a scroll
   container and break `position: sticky` on the header. */
html { overflow-x: clip; }
body { max-width: 100%; }

/* The design hides the document scrollbar — on desktop the page is driven by
   the panel-snap wheel handler in showcase.js, and the track otherwise sits
   over the full-bleed hero. Scrolling itself is untouched. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Dark-theme images (design v18). Each image that changes with the theme is
   rendered once per variant, and these classes hide the variants that don't
   belong to the current palette:
     sc-img-light     the default render, hidden on the two dark themes
     sc-img-dark      shown on either dark theme (lakers, midnight)
     sc-img-lakers    shown on Dark - Purple only
     sc-img-midnight  shown on Dark - Gray only
   They only ever hide, never show, so each component's own display rules
   (the hero's phone/desktop switch, for one) still decide the rest. This used
   to be done by replacing the light <img>'s content with content: url(),
   which iPad Safari ignores on an <img>. It kept the pale render on a dark
   theme, so the hero slides looked white there. Global, not scoped: the
   images live in several components (HomeBody, AppsGrid, ShowcaseHeader). */
.sc-theme[data-theme="lakers"] .sc-img-light,
.sc-theme[data-theme="midnight"] .sc-img-light,
.sc-theme:not([data-theme="lakers"]):not([data-theme="midnight"]) .sc-img-dark,
.sc-theme:not([data-theme="lakers"]) .sc-img-lakers,
.sc-theme:not([data-theme="midnight"]) .sc-img-midnight { display: none; }