/**
 * @file
 * Styling for the "Prémio Margarida Abreu" call-to-action button.
 *
 * Rendered by \Drupal\bloom_custom\Plugin\Block\PremioCtaBlock, placed in the
 * `secondary_menu` region (the top blue bar). Self-contained so it does not
 * depend on the theme SASS build.
 */

.premio-cta {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  background-color: #ffc107;
  color: #002b5c;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.premio-cta:hover,
.premio-cta:focus {
  background-color: #ffffff;
  color: #002b5c;
  text-decoration: none;
}

/* Keep the top bar from overflowing on narrower viewports. */
@media (max-width: 991.98px) {
  .premio-cta {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
  }
}

/**
 * Mobile CTA strip.
 *
 * The top blue bar (nav.navbar.bg-secondary) is hidden at max-width 700px, so
 * the in-bar CTA disappears. A second placement of the same block in the
 * `highlighted` region renders this full-width strip just below the header,
 * shown only where the top bar is hidden.
 */
#block-bloom-custom-premio-cta-mobile {
  display: none;
}

@media (max-width: 700px) {
  #block-bloom-custom-premio-cta-mobile {
    display: block;
    /* Full-bleed: span the viewport width, escaping the .container wrapper. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  #block-bloom-custom-premio-cta-mobile .premio-cta {
    display: block;
    margin: 0;
    padding: 0.7rem 1rem;
    border-radius: 0;
    font-size: 0.95rem;
    text-align: center;
  }
}