/* ================================================================
   Announcement bar — Worker app launch (inc/announcement-bar.php)
   Brand: navy #112967, blue #0065E4. Light-blue (#f3f7fd) bar above the blue Elementor header.
   ================================================================ */

.tc-announce {
  background: #f3f7fd; /* the site's very light blue (ticker / app sections) — clear break from the brand-blue header below */
  color: #112967;
  font-family: 'Oakes Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  position: sticky;
  top: 0;
  z-index: 100; /* Elementor's fixed header is z-index 99 */
}

/* While the bar is showing, push the fixed Elementor header below it.
   Elementor sets top:0 inline, hence !important. --tc-announce-height is
   set by the inline script in inc/announcement-bar.php. */
body.tc-has-announce header.elementor-location-header .elementor-sticky--active {
  top: var(--tc-announce-height, 44px) !important;
}

/* Logged-in admin bar: it's fixed above everything, so offset both. */
body.admin-bar .tc-announce {
  top: 32px;
}
body.admin-bar.tc-has-announce header.elementor-location-header .elementor-sticky--active {
  top: calc(var(--tc-announce-height, 44px) + 32px) !important;
}
@media (max-width: 782px) {
  body.admin-bar .tc-announce {
    top: 46px;
  }
  body.admin-bar.tc-has-announce header.elementor-location-header .elementor-sticky--active {
    top: calc(var(--tc-announce-height, 44px) + 46px) !important;
  }
}

.tc-announce__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 56px 8px 20px; /* right padding leaves room for the close button */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.tc-announce__text {
  margin: 0;
  color: #112967;
}

.tc-announce__text strong {
  font-weight: 600;
}

.tc-announce__link {
  display: inline-block;
  background: #0065E4;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  transition: background 0.2s;
}

.tc-announce__link:hover,
.tc-announce__link:focus {
  background: #112967;
  color: #ffffff;
}

.tc-announce__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* !important: the theme/Elementor kit styles bare <button> with a
     background + radius at higher specificity. */
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #112967 !important;
  opacity: 0.55;
  cursor: pointer;
  padding: 0 !important;
  transition: opacity 0.2s;
}

/* Theme CSS collapses inline SVG width to 0 inside buttons — pin the size. */
.tc-announce__close svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  display: block;
  flex-shrink: 0;
}

.tc-announce__close:hover,
.tc-announce__close:focus-visible {
  background: none !important;
  opacity: 1;
  outline: none;
}

@media (max-width: 600px) {
  .tc-announce {
    font-size: 14px;
  }
  .tc-announce__inner {
    padding: 9px 48px 9px 14px;
    text-align: left;
    justify-content: flex-start;
  }
  .tc-announce__link {
    margin: 6px 0 0;
    display: inline-block;
  }
  .tc-announce__close {
    right: 8px;
  }
}