/**
Author: Marketingflotte
Author URI: https://www.marketingflotte.de
Description: Styles for Beaver Builder (BB) Components Library.
Enqueued after the (Child)-Theme styles but before page specific generated BB-Layout styles.
This allows to override theme styles but to be overridden by page specific BB styles.
Some default BB-Module styles has to be overridden in global BB CSS because of specificity.

Version: 2.0.0
*/

/* 
** GLOBAL DEFAULT STYLES AND FIXES
*/

/* Custom CSS Properties */
:root {
  --arc-lg-border-radius: 24px;
  --arc-max-container-width: 2048px;
}

/* Fixing default styles overriding parent styles */
.uabb-infobox-text-wrap .uabb-infobox-text{
  color: inherit;
}

/* Photo height fix (object-fit photos) fill container */
.fl-module-photo.fl-fill-container{
  height: 100%;
}

/* Photo Height fix for layered grid boxes (object-fit photos) */
.arc-hero-area--var-9 .fl-module-photo.fl-fill-container,
.arc-hero-area--var-10 .fl-module-photo.fl-fill-container,
.arc-bento-gallery .fl-module-photo.fl-fill-container {
  height: 0;
  min-height: 100%;
}

/* Default Button Styles */
@media screen and (max-width: 1200px){
  .fl-builder-content a.fl-button,
  .fl-builder-content a.fl-button:visited,
  .fl-builder-content button.fl-button,
  .fl-builder-content button.fl-button:visited
  .uabb-creative-button-wrap a,
  .uabb-creative-button-wrap a:visited,
  .fl-builder-content .fl-button-group a.fl-button,
  .fl-builder-content .fl-button-group a.fl-button:visited{
      padding: .66em 1.33em;
  }
}

@media screen and (max-width: 640px){
  .fl-builder-content a.fl-button,
  .fl-builder-content a.fl-button:visited,
      .fl-builder-content button.fl-button,
  .fl-builder-content button.fl-button,
  .uabb-creative-button-wrap a,
  .uabb-creative-button-wrap a:visited,
  .fl-builder-content .fl-button-group a.fl-button,
  .fl-builder-content .fl-button-group a.fl-button:visited{
      padding: .5em 1.25em;
  }
}

.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited,
.fl-builder-content button.fl-button,
.fl-builder-content button.fl-button,
.uabb-creative-button-wrap a,
.uabb-creative-button-wrap a:visited{
  padding: 1em 2em;
}

/* No padding for single btn-group btns */
.fl-builder-content .fl-button-group.fl-button-group-layout-horizontal .fl-button-group-buttons .fl-button-group-button:first-child:nth-last-child(1) {
    padding: 0;
}



/* 
** HERO AREA STYLES
*/

/* Default Max Container Width for Hero Areas */
.fl-row-fixed-width:has(.arc-hero-area){
  max-width: var(--arc-max-container-width);
}

/* Prevent hero areas from growing bigger @2048px up*/
@media screen and (min-width: 2048px){
  .fl-module-box.arc-hero-area{
      min-height: unset;
  }
}

/* Fix Infobox breaking layout after rotation on iOS devices */
.arc-hero-area .fl-module-info-box .fl-module-content{
  display: block;
}

/* Place scroll indicator on solid bg */
.arc-hero-area.arc-hero-area--var-9::before{
  left: calc(50% - 1.5em);
}

/* Default Hero Area Font-Sizing 
** Viewport min:32rem (512px) / max:120rem (1920)
*/
.arc-hero-area .uabb-infobox-title,
.arc-hero-area .fl-callout-title,
.arc-hero-area h1,
.arc-hero-area h2{
  font-size: calc(1rem + 3vw);
  font-size: clamp(1.5rem, 0.40909090909090917rem + 3.4090909090909087vw, 4.5rem);
  font-weight: bold;
  line-height: 1.1;
  text-wrap: balance;
}

.arc-hero-area .uabb-infobox-title-prefix,
.arc-hero-area .uabb-infobox-text,
.arc-hero-area .fl-callout-text,
.arc-hero-area .fl-rich-text{
  font-size: calc(0.875rem + 0.33vw);
  font-size: clamp(0.875rem, 0.7386363636363636rem + 0.4261363636363636vw, 1.25rem);
  line-height: 1.4;
}

/*
** All Hero Areas - Prevent collapsing heroes on mobile where no height or aspect ratio is set
*/
.fl-module-box.arc-hero-area{
  min-height: 160px;
}

/*
** Hero Area Subpages
*/
.fl-module-box.arc-hero-area-sub{

}

/*
** Hero Area Transparent Headers
*/
.fl-module-box.arc-hero-area-trans{

}

/*
** Hero Area Mobile Portrait Background
*/
.fl-module-box.arc-hero-area-mobile-portrait{

}

/* Hero Area - Mobile Portrait Font-Sizing
** Hero Area - Min Height Font-Sizing
** Viewport min:32rem (512px) / max:120rem (1920)
*/
@media screen and (max-width: 640px) and (orientation: portrait){
  .arc-hero-area-mobile-portrait .uabb-infobox-title,
  .arc-hero-area-mobile-portrait .fl-callout-title,
  .arc-hero-area-mobile-portrait h1,
  .arc-hero-area-mobile-portrait h2,
  .arc-hero-area--var-12 .uabb-infobox-title,
  .arc-hero-area--var-12 .fl-callout-title,
  .arc-hero-area--var-12 h1,
  .arc-hero-area--var-12 h2{
    font-size: calc(2rem + 3vw);
  }

  .arc-hero-area .uabb-infobox-title-prefix,
  .arc-hero-area .uabb-infobox-text,
  .arc-hero-area .fl-callout-text,
  .arc-hero-area .fl-rich-text,
  .arc-hero-area--var-12 .uabb-infobox-title-prefix,
  .arc-hero-area--var-12 .uabb-infobox-text,
  .arc-hero-area--var-12 .fl-callout-text,
  .arc-hero-area--var-12 .fl-rich-text{
    font-size: calc(0.875rem + 0.33vw);
  }
}

/* Reset Hero Area Layout for mobile */
@media screen and (max-width: 640px){
  .fl-builder-content .fl-module-box.arc-hero-area:not(.arc-hero-area--var-1):not(.arc-hero-area--var-2):not(.arc-hero-area--var-3):not(.fl-module-box.arc-hero-area.arc-hero-area-mobile-portrait){
      aspect-ratio: auto;
      max-height: none;
  }
}

/* Remove max-height for boxes and photo bg for small and medium devices*/
@media screen and (max-width: 991px){
  .fl-module-box.arc-hero-area:not(.arc-hero-area--var-11),
  .fl-module-box.arc-hero-area .fl-module-box > *{
      max-height: none;
  }
  
  /* Safespace for logo an nav */
  .fl-module-box.arc-hero-area.arc-hero-area-trans:not(.arc-hero-area--var-8){
      padding-top: 80px;
  }
}

/* 
** Scroll Down Indicator
*/
@media screen and (min-width: 768px){
  .arc-hero-area.fl-module-box::before{
      display: block !important;
      content: ">";
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid;
      position: absolute;
      top: auto;
      right: auto;
      bottom: 0.5em;
      left: 50%;
      transform: translateX(-50%);
      transform: rotate(90deg);
      line-height: 38px;
      font-size: 36px;
      padding-left: 4px;
      text-align: center;
      vertical-align: middle;
      animation: down 5s infinite;
      -webkit-animation: down 5s infinite;
      z-index: 10;
      mix-blend-mode: difference;
  }
}

@keyframes down {
0% {
  transform: translateY(0) rotate(90deg);
}
20% {
  transform: translateY(15px) rotate(90deg);
}
40% {
  transform: translateY(0) rotate(90deg);
}
}

@-webkit-keyframes down {
0% {
  transform: translateY(0) rotate(90deg);
}
20% {
  transform: translateY(15px) rotate(90deg);
}
40% {
  transform: translateY(0) rotate(90deg);
}
}

/* Place scroll down indicator on solid bg */
.arc-hero-area.arc-hero-area--var-9::before{
  left: calc(50% - 1.5em);
}



/* 
** TEASERBOX STYLES
*/
.arc-teaserbox .fl-callout-title a{
  text-decoration: none;    
}

/* Equal Height Teaserbox Styles */
.arc-teaserbox-eqh .fl-module-content,
.arc-flipbox-eqh .fl-module-content{
  height: calc(100% - 40px);
  overflow: visible;
}

.arc-teaserbox-eqh .fl-callout,
.arc-teaserbox-eqh .fl-callout-content,
.arc-flipbox-eqh .uabb-module-content{
  height: 100%;
}

.arc-flipbox-eqh .uabb-face{
  height: 100% !important;
}

.arc-teaserbox-eqh .fl-callout-content,
.arc-teaserbox-eqh .fl-callout-text-wrap{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.arc-teaserbox-eqh .fl-callout-button,
.arc-teaserbox-eqh .fl-button{
  margin-top: auto;
}

/* Padded Text Teaserbox Styles */
div[class*='arc-teaserbox--var'] .fl-callout-title{
  padding: 0.5rem 2rem;
}

div[class*='arc-teaserbox--var'] .fl-callout-text-wrap{
  padding: 0 2rem 2rem;
}


/* Circle Photo Teaserbox Styles */
.arc-teaserbox--var-2 .fl-photo{
  background: linear-gradient(#fff 50%, transparent 50%);
}

.fl-module-callout.arc-teaserbox--var-3 .fl-module-content{
  overflow: visible;
}

.arc-teaserbox--var-3 .fl-callout-photo{
  position: relative;
}

.arc-teaserbox--var-3 .fl-callout-photo::before{
  display: block;
  content: " ";
  background: #fff;
  height: 50%;
  position: absolute;
  top: -2%;
  right: -2%;
  left: -2%;

}

.arc-teaserbox--var-3 .fl-callout-photo::after{
  display: block;
  content: " ";
  height: 50%;
  position: absolute;
  right: -2%;
  left: -2%;
  bottom: 2%;
  box-shadow:  0px -6px 6px -6px rgba(0,0,0,0.25);
}

.arc-teaserbox--var-3 .fl-photo{
  z-index: 10;
}

/* Styles for full linke box modules */
.fl-builder-content a.fl-module-box{
  text-decoration: none;
  color: inherit;
}

/* Remove padding for full width button */
div[class*='arc-teaserbox--var'] .fl-button-width-full{
  margin: auto -2rem -2rem;
}

/* Style Buttons in Texteditor when whole Box Module is linked instead of module link */
div[class*='arc-teaserbox'] button.fl-button{
  margin-top: .5em;
}

.arc-teaserbox-eqh .fl-callout-text:has(button){
  display: flex;
  flex-flow: column wrap;
  height: 100%;
}

div[class*='arc-teaserbox'] .fl-callout-text > p:has(button),
div[class*='arc-teaserbox'] .fl-callout-text > button.fl-button{
  margin-top: auto !important;
}

div[class*='arc-teaserbox'] .arc-btn-full-width{
  display: block;
  width: 100%;
}



/* 
** TEXT-MEDIA SECTION STYLES
*/

/* Default Max Container Width for Text-Media Sections */
.fl-row-fixed-width:has(.arc-text-media){
  max-width: var(--arc-max-container-width);
}


/* Text-Media - Background Cover Video Styles */
.arc-text-media-video .fl-module-content,
.arc-text-media-video .fl-video {
  width: 100%;
  height: 100%;
  padding: 0;
}

.arc-text-media-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}