/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * MyBly.
 */

.opener {
  margin-top: 25rem;

  .trans-box {
    max-width: 50rem; /* Maximum width of the box */
    margin: 0;
    margin-bottom: 0;
    padding: 1.5rem 1rem;
    border-radius: 1.25rem 1.25rem 0 0; /* Rounded corners */
  }
}

@media (min-width: 43.75rem) {

  .opener {

    .trans-box {
      margin-bottom: 8rem;
      margin-left: 7.8125rem;
      padding: 4.375rem 3.125rem 3.125rem 4.375rem; /* Space inside the box */
      border-radius: var(--image-border-right); /* Rounded corners */
    }
  }
}

.opener {

  .trans-box .kicker {
    font-size: var(--font-size-xs);
  }
}

@media (min-width: 43.75rem) {

  .opener {

    .trans-box .kicker {
      font-size: var(--font-size-xs);
    }
  }
}

.opener {

  .trans-box .headline {
    text-transform: uppercase;
    color: var(--color--lemon-zest);
    font-size: var(--font-size-xl);
    font-weight: 300;
    line-height: 2.5rem;
    margin-block: var(--sp1);
  }
}

@media (min-width: 43.75rem) {

  .opener {

    .trans-box .headline {
      font-size: var(--font-size-xxl);
      line-height: 3.125rem;
    }
  }
}

@media (min-width: 43.75rem) {

  .opener {
    margin-top: 0;
    padding: 0;
  }
}

.block-page-title-block h1 {
  text-transform: uppercase;
  color: var(--color--lemon-zest);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 3.125rem;
  margin-block: var(--sp1);
}

.block-page-title-block .no-color h1 {
  color: #000;
}

.trans-box {
  color: white; /* White text */
  background: rgba(1, 35, 24, 0.4); /* #012318 */
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

/* CTA Button */

.paragraph a.cta--button,
.cta a,
.paragraph--type--form-extern button {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  padding: 1.5rem 2rem;
  transition: all 0.3s;
  text-decoration: none;
  border-radius: 10rem;
  box-shadow: none;
  font-size: var(--font-size-l);
  font-weight: bold;
}

:is(.paragraph a.cta--button,.cta a,.paragraph--type--form-extern button):after {
  position: absolute;
  z-index: -2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 10rem;
}

:is(.paragraph a.cta--button,.cta a,.paragraph--type--form-extern button):before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  content: "";
  transition: all 0.3s;
  border-radius: 10rem;
  background-color: var(--color--lemon-zest);
}

:is(.paragraph a.cta--button,.cta a,.paragraph--type--form-extern button):hover {
  text-decoration: underline;
}

:is(.paragraph a.cta--button,.cta a,.paragraph--type--form-extern button):hover:before {
  width: 100%;
}

/* Frontpage Icon in Toolbar */

.toolbar .toolbar-bar .toolbar-icon-mybly-frontpage-frontpage-edit-toolbar:before {
  -webkit-mask-image: url(/modules/custom/mybly_frontpage/assets/icons/home.svg);
  mask-image: url(/modules/custom/mybly_frontpage/assets/icons/home.svg);
}