/* =========================================
   TEN-E announcement bar
   Colors arrive as custom properties on the element (see tene_ab_markup()).
   Selectors are doubled up (.tene-ab .x) to outrank Hello's global a/button
   rules and the Elementor kit's link color.
   ========================================= */
.tene-ab{
  position: relative;
  z-index: 101;                         /* above #tene-header (100) */
  background: var(--tene-ab-bg, #00486A);
  color: var(--tene-ab-fg, #fff);
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* Slides share one grid cell: the track is as tall as the tallest message,
   so rotating never changes the bar's height (or moves the header). The
   inactive state sits one slide-height below, ready to scroll up into view. */
.tene-ab .tene-ab__track{
  display: grid;
  overflow: hidden;
}
.tene-ab .tene-ab__slide{
  grid-area: 1 / 1;
  display: flex;
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
}
.tene-ab .tene-ab__slide.is-active,
.tene-ab .tene-ab__slide.is-leaving{
  visibility: visible;
  transition:
    transform var(--tene-ab-dur, 500ms) cubic-bezier(.4,0,.2,1),
    opacity   var(--tene-ab-dur, 500ms) ease;
}
.tene-ab .tene-ab__slide.is-active{
  opacity: 1;
  transform: none;
}
.tene-ab .tene-ab__slide.is-leaving{
  opacity: 0;
  transform: translateY(-100%);
}

.tene-ab .tene-ab__inner{
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  text-align: center;
}
/* keep the message centered and clear of the control buttons on the right */
.tene-ab--controls-1 .tene-ab__inner{ padding-inline: 56px; }
.tene-ab--controls-2 .tene-ab__inner{ padding-inline: 92px; }

.tene-ab .tene-ab__msg{
  margin: 0;
  font-weight: 500;
  color: inherit;
}
.tene-ab .tene-ab__msg a{
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tene-ab .tene-ab__msg a:hover{ text-decoration-thickness: 2px; }

/* CTA: compact version of the site's pill button (Figma "Main CTA") */
.tene-ab a.tene-ab__cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--tene-ab-cta-bg, #F8971D);
  color: var(--tene-ab-cta-fg, #19262D);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s ease;
}
.tene-ab a.tene-ab__cta:hover{ filter: brightness(1.1); color: var(--tene-ab-cta-fg, #19262D); }
.tene-ab a.tene-ab__cta svg{ transition: transform .2s ease; }
.tene-ab a.tene-ab__cta:hover svg{ transform: translateX(2px); }

/* Pause / close buttons, grouped at the right edge */
.tene-ab .tene-ab__controls{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}
.tene-ab .tene-ab__btn{
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease;
}
.tene-ab .tene-ab__btn:hover,
.tene-ab .tene-ab__btn:focus{
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
}
.tene-ab .tene-ab__btn:disabled{ cursor: default; }
.tene-ab .tene-ab__pause .tene-ab__icon-play,
.tene-ab .tene-ab__pause[aria-pressed="true"] .tene-ab__icon-pause{ display: none; }
.tene-ab .tene-ab__pause[aria-pressed="true"] .tene-ab__icon-play{ display: block; }

.tene-ab a:focus-visible,
.tene-ab .tene-ab__btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 600px){
  .tene-ab{ font-size: 13px; }
  .tene-ab .tene-ab__inner{ padding: 8px 16px; }
  .tene-ab--controls-1 .tene-ab__inner{ padding-inline: 16px 48px; }
  .tene-ab--controls-2 .tene-ab__inner{ padding-inline: 16px 80px; }
  .tene-ab .tene-ab__controls{ right: 6px; }
}

/* Reduced motion: announcements still rotate (visitors can pause them), but
   crossfade in place instead of scrolling. */
@media (prefers-reduced-motion: reduce){
  .tene-ab *{ transition: none !important; }
  .tene-ab .tene-ab__slide,
  .tene-ab .tene-ab__slide.is-leaving{ transform: none; }
  .tene-ab .tene-ab__slide.is-active,
  .tene-ab .tene-ab__slide.is-leaving{ transition: opacity var(--tene-ab-dur, 500ms) ease !important; }
}

/* -----------------------------------------
   Header offset. #tene-header starts absolutely positioned at the top of the
   page (see the child theme's style.css), so it would sit on top of the bar.
   While the bar is showing, push the un-stuck header down by the bar's height
   (--tene-ab-h, measured in JS). Once stuck it's fixed to the viewport and the
   bar has scrolled away, so the theme's own top values apply unchanged.
   ----------------------------------------- */
html.tene-ab-on #tene-header:not(.is-stuck):not(.elementor-sticky--effects){
  top: var(--tene-ab-h, 0px);
}
html.tene-ab-on body.admin-bar #tene-header:not(.is-stuck):not(.elementor-sticky--effects){
  top: calc(32px + var(--tene-ab-h, 0px));
}
@media screen and (max-width: 782px){
  html.tene-ab-on body.admin-bar #tene-header:not(.is-stuck):not(.elementor-sticky--effects){
    top: calc(46px + var(--tene-ab-h, 0px));
  }
}
@media screen and (max-width: 600px){
  html.tene-ab-on body.admin-bar #tene-header:not(.is-stuck):not(.elementor-sticky--effects){
    top: var(--tene-ab-h, 0px);
  }
}