/*
 * Aktuella budskap (current messages row).
 * One file for both rows: loaded in the page for the server row (.hg-cm-ssr) and imported into
 * the widget bundle for the React row in the shadow root. Keep it plain CSS (no nesting): the
 * page copy is served as-is. Colour, font and text-align are set by the Elementor controls on
 * the widget wrapper and inherited into both rows; padding comes as a custom property, which
 * also crosses the shadow boundary. Height and vertical position belong to the Elementor
 * container the widget sits in.
 */

/* Today's look if Elementor's generated CSS is missing; the per-element rule is more specific. */
.elementor-widget-hg-current-messages {
  color: rgb(215, 0, 127);
  background-color: rgb(251, 189, 218);
  font: 400 16px / 1.25 'Bariol Bold', sans-serif;
  text-align: center;
}

/* A widget in a row container (header template 92: flex row, centred) shrinks to its text, so
   only the text was a link. Fill the container so a linked row is clickable over its full width;
   the text stays centred by text-align. Elementor's own Width control is more specific and wins. */
.elementor-element.elementor-widget-hg-current-messages {
  width: 100%;
}

.hg-cm {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

/* Two classes beat the Elementor kit's `.elementor-kit-576 a` and `a:hover` in the page. */
.hg-cm .hg-cm__stage,
.hg-cm .hg-cm__stage:hover,
.hg-cm .hg-cm__stage:focus,
.hg-cm .hg-cm__stage:visited {
  color: inherit;
  text-decoration: none;
}

.hg-cm__stage {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  /* Default ~28 px row: 16 px x 1.25 line height + 2 x 4 px. */
  padding: var(--hg-cm-padding, 4px 8px);
}

/* Touch target: a linked row takes taps over at least 44 px of height without looking taller.
   Only a row with a link gets it, so an unlinked row never covers its neighbours. At the
   default 28 px it reaches 8 px past the row: an element right below keeps those pixels (it
   paints later), an element right above loses them. */
.hg-cm__stage[href]::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

/* All messages share one grid cell: the row is as tall as the tallest message. */
.hg-cm__item {
  grid-area: 1 / 1;
  /* The cell is as tall as the longest message: centre the shorter ones in it. */
  align-self: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.4em);
  /* The outgoing message fades out first ... */
  transition:
    opacity 150ms ease-in,
    transform 0s linear 150ms,
    visibility 0s linear 150ms;
}

/* ... and the next one fades in after it, so two messages are never visible at once. */
.hg-cm__item--current {
  /* inherit, not visible: inside a visibility:hidden ancestor (Elementor's sticky spacer clone) the row must stay hidden. */
  visibility: inherit;
  opacity: 1;
  transform: none;
  transition:
    opacity 250ms ease-out 150ms,
    transform 250ms ease-out 150ms,
    visibility 0s linear 150ms;
}

/* Page focus styles do not reach the shadow root (WCAG 2.4.7). */
.hg-cm__stage:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.hg-cm__sr-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .hg-cm .hg-cm__item {
    transition: none;
    transform: none;
  }
}