/**
 * WP Tutorials : Scrolling Marquee (WPTSMQ)
 *
 * https://wp-tutorials.tech/add-functionality/smooth-scrolling-marquee-text-banner/
 */

/**
 * Use CSS variables to control the layout.
 */
:root {
  --marquee-top: 55px;
  --marquee-overall-height: 52px;
  --marquee-border-size: 2px;
  --marquee-text-size: 2rem;
}

@media (min-width: 1200px) {
  :root {
    --marquee-top: 72px;
    --marquee-overall-height: 52px;
    --marquee-border-size: 2px;
    --marquee-text-size: 2rem;
  }
}

body.has-marquee {
  margin-bottom: var(--marquee-overall-height);
}

.wptsmq-marquee-container {
  position: fixed;
  left: 0;
  top: var(--marquee-top);
  width: 100%;
  background-color: black;
  height: var(--marquee-overall-height);
  padding: var(--marquee-border-size);

  box-shadow: 0 0 1em black;
  z-index: 10;
}

.wptsmq-marquee-inner {
  position: relative;
  height: calc(var(--marquee-overall-height) - var(--marquee-border-size) * 2);
  overflow: hidden;
}

.wptsmq-marquee-text {
  color: white;
  font-weight: bold;
  font-size: var(--marquee-text-size);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  letter-spacing: 0.1em;
}

body .wptsmq-marquee-text > img {
  max-height: 72px;
  height: unset;
  width: auto;
}

/* Make Font Awesome 5 icons stand out a bit. */
.wptsmq-marquee-text .fas {
  color: yellow;
  text-shadow:
    -2px -2px 0 black,
    2px -2px 0 black,
    -2px 2px 0 black,
    2px 2px 0 black;
}

.has-marquee #page {
  padding-top: var(--marquee-overall-height);
}