/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

main {
	z-index: 2;
}

#brx-content {
	padding-top: 60px;
}

section:not(.pt-0).brxe-section.bg-warm {
	padding-top: var(--section-space);
}

section:not(.pb-0).brxe-section.bg-warm {
	padding-bottom: var(--section-space);
}

/* @media (min-width: 1450px) {
  #brx-content {
    padding-bottom: 425px;
    margin-bottom: -425px;
    overflow-y: clip;
  }
} */

html {
  overflow-x: clip;
}

body {
  overflow: clip;
}

@media (min-width: 1450px) {
  #brx-content {
    padding-bottom: 0;
    margin-bottom: 0;
    overflow-x: clip;
    overflow-y: visible;
  }
}


/*************
BILDER ALS AI GENERIERT MARKIEREN
*************/

/* ------------------------------------------------------------------
   AI disclosure badge  -  "AI GENERATED" wordmark drawn over an image
   with a pseudo-element, so no markup change is needed per image.

   <img> is a replaced element and cannot host ::before/::after, so the
   class goes on a wrapper around the image (or on any element that
   uses the image as a CSS background - see .ai-marked-bg below).

     <figure class="ai-marked">
       <img src="cat.jpg" alt="A cat. Image generated with AI.">
     </figure>

   size        .ai-marked--sm  .ai-marked--lg  .ai-marked--fluid
   appearance  .ai-marked--light  .ai-marked--soft
   placement   .ai-marked--top-left  --top-right  --bottom-left
               (default is bottom-right)

   Note: pseudo-elements are not exposed to screen readers. Put the
   disclosure in the alt text too, as in the example above.
   ------------------------------------------------------------------ */

/* :where(.ai-marked, .ai-marked-bg) {
  --ai-badge-image: url("/wp-content/uploads/ai-badge.svg");
  --ai-badge-width: 120px;
  --ai-badge-inset: 10px;
  --ai-badge-opacity: 1;
}

.ai-marked {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.ai-marked > img,
.ai-marked > picture > img,
.ai-marked > video {
  display: block;
  max-width: 100%;
}

.ai-marked-bg {
  position: relative;
}

.ai-marked::after,
.ai-marked-bg::after {
  content: "";
  position: absolute;
  inset: auto var(--ai-badge-inset) var(--ai-badge-inset) auto;
  width: var(--ai-badge-width);
  aspect-ratio: 1385 / 267;
  background: var(--ai-badge-image) center / contain no-repeat;
  opacity: var(--ai-badge-opacity);
  pointer-events: none;
  z-index: 2;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}


.ai-marked--sm { --ai-badge-width: 84px;  --ai-badge-inset: 6px;  }
.ai-marked--lg { --ai-badge-width: 180px; --ai-badge-inset: 16px; }


.ai-marked--fluid { --ai-badge-width: clamp(72px, 20%, 200px); }

.ai-marked--light { --ai-badge-image: url("/assets/ai-badge-light.svg"); }

.ai-marked--soft { --ai-badge-opacity: 0.82; }

.ai-marked--bottom-left::after  { inset: auto auto var(--ai-badge-inset) var(--ai-badge-inset); }
.ai-marked--top-right::after    { inset: var(--ai-badge-inset) var(--ai-badge-inset) auto auto; }
.ai-marked--top-left::after     { inset: var(--ai-badge-inset) auto auto var(--ai-badge-inset); }
 */

/* ------------------------------------------------------------------
   AI disclosure caption  -  small "KI-generiert" line right-aligned
   below the image. Same contract as the badge above: the class goes
   on a wrapper (figure, link, div), not on the <img> itself.
   ------------------------------------------------------------------ */

.ai-marked {
  display: inline-block;
  max-width: 100%;
}

.ai-marked > img,
.ai-marked > picture > img,
.ai-marked > video {
  display: block;
  max-width: 100%;
}

.ai-marked::after {
  content: "KI-generiert";
  display: block;
  margin-top: 4px;
  padding-inline-end: 8px;
  font-size: 10px;
  line-height: 1.3;
  text-align: right;
  opacity: 0.7;
}

.ai-marked:lang(en)::after {
  content: "AI-generated";
}