/*
 * Hart voor Humor 1.2.2
 * Eén consistente rode stijl voor alle actieknoppen op de publieke website.
 * Navigatiepijlen, menu-iconen, sluiten-knoppen en tekstuele uitklappers
 * behouden hun functionele vorm.
 */
:root {
  --hvh-button-red: #b52227;
  --hvh-button-red-hover: #8f171c;
  --hvh-button-red-active: #751116;
  --hvh-button-red-gradient: linear-gradient(180deg, #cb353b 0%, #b52227 52%, #98181e 100%);
  --hvh-button-red-gradient-hover: linear-gradient(180deg, #ba272d 0%, #8f171c 100%);
  --hvh-button-red-gradient-active: linear-gradient(180deg, #8f171c 0%, #751116 100%);
  --hvh-button-red-shadow: 0 13px 28px rgba(117, 17, 22, 0.24);
  --hvh-button-red-shadow-hover: 0 17px 34px rgba(117, 17, 22, 0.32);
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ) {
  --button-bg-rest: var(--hvh-button-red);
  --button-bg-hover: var(--hvh-button-red-hover);
  --button-border-rest: var(--hvh-button-red);
  --button-border-hover: var(--hvh-button-red-hover);
  --button-color-rest: #fff;
  --button-color-hover: #fff;
  --button-shadow-rest: var(--hvh-button-red-shadow);
  --button-shadow-hover: var(--hvh-button-red-shadow-hover);
  border-color: var(--hvh-button-red) !important;
  background: var(--hvh-button-red-gradient) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    var(--hvh-button-red-shadow) !important;
  min-height: 46px;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  )
  :is(span, strong) {
  color: #fff !important;
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ):hover,
body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ):focus-visible {
  border-color: var(--hvh-button-red-hover) !important;
  background: var(--hvh-button-red-gradient-hover) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    var(--hvh-button-red-shadow-hover) !important;
  transform: translateY(-2px);
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ):active {
  border-color: var(--hvh-button-red-active) !important;
  background: var(--hvh-button-red-gradient-active) !important;
  color: #fff !important;
  transform: translateY(0);
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ):focus-visible {
  outline: 3px solid #171313;
  outline-offset: 3px;
}

body
  :is(
    .bb-pill-button,
    .hvh-red-button,
    .ticket-button,
    .agenda-backtop,
    .bb-date-card__button,
    .show-flyer-card__ticket,
    .columns-page__load-more,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .wpcf7-submit
  ):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--hvh-button-red) !important;
  background: var(--hvh-button-red-gradient) !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: saturate(0.72);
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

body .bb-home-agenda-overview {
  border-color: var(--hvh-button-red) !important;
  background: var(--hvh-button-red-gradient) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    var(--hvh-button-red-shadow) !important;
}

body .bb-home-agenda-overview:hover,
body .bb-home-agenda-overview:focus-visible {
  border-color: var(--hvh-button-red-hover) !important;
  background: var(--hvh-button-red-gradient-hover) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    var(--hvh-button-red-shadow-hover) !important;
}

body .bb-home-agenda-overview:focus-visible {
  outline: 3px solid #171313;
  outline-offset: 3px;
}

@media (min-width: 681px) and (max-width: 1100px) {
  body
    :is(
      .bb-pill-button,
      .hvh-red-button,
      .ticket-button,
      .agenda-backtop,
      .bb-date-card__button,
      .show-flyer-card__ticket,
      .columns-page__load-more,
      .wp-block-button__link,
      button[type="submit"],
      input[type="submit"],
      .wpcf7-submit
    ) {
    min-height: 48px;
    padding-inline: 20px;
  }
}

@media (max-width: 680px) {
  body
    :is(
      .bb-pill-button,
      .hvh-red-button,
      .ticket-button,
      .agenda-backtop,
      .bb-date-card__button,
      .show-flyer-card__ticket,
      .columns-page__load-more,
      .wp-block-button__link,
      button[type="submit"],
      input[type="submit"],
      .wpcf7-submit
    ) {
    min-height: 50px;
    padding-inline: 18px;
  }

  body :is(.bb-button-row, .page-shell__actions, .page-shell__mini-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body
    :is(.bb-button-row, .page-shell__actions, .page-shell__mini-actions)
    :is(
      .bb-pill-button,
      .hvh-red-button,
      .ticket-button,
      .wp-block-button__link,
      button[type="submit"],
      input[type="submit"],
      .wpcf7-submit
    ) {
    width: 100%;
  }
}