/* MDIX Digital — responsive fixes shared by every template demo. */

/* Keep the page inside the viewport on every screen width. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
  /* With <html> clipped, a theme's body { overflow: auto } would make <body>
     its own scroll box: window scroll events stop and sticky headers, reveal
     animations and parallax break. The window must stay the scroller. */
  /* !important also beats inline overflow-x: hidden that some theme scripts
     set on <body>; hidden would turn overflow-y: visible back into auto. */
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

/* Theme-shop colour/style switchers are demo tooling, not part of a site. */
.style-switcher,
#style-switcher,
#styleSwitcher,
.switcher-wrap,
.switcher-panel,
.color-switcher,
.colors-switcher,
.theme-switcher,
.layout-switcher,
.demo-switcher,
#switcher,
.tp-color-switcher {
  display: none !important;
}

/* Media never wider than its column on small screens. */
iframe,
video {
  max-width: 100%;
}

/* Visitors who ask the system for less motion get still pages. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard users can always see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* Long Indonesian words and Rupiah prices wrap between words, never mid-word
   ("Merekomendasika-n", "Rp350.00-0"); a word wider than its box may still wrap. */
h1, h2, h3, h4, h5, h6,
[class*="price"], [class*="title"], [class*="heading"] {
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Theme capitalisation must not turn halo@mdix.digital into Halo@Mdix.Digital. */
a[href^="mailto:"] {
  text-transform: none !important;
}

/* Reduced motion: marquees and split-text titles rest in place, readable. */
@media (prefers-reduced-motion: reduce) {
  [class*="marquee"],
  [class*="marquee"] *,
  [class*="ticker"] *,
  .split-line,
  .split-line > div,
  .title-animation,
  .title-animation div {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* In-page links land below a fixed header instead of under it. */
html {
  scroll-padding-top: 96px;
}