:root {
  --p: clamp(15px, 1.2vw, 18px);
  --h6: clamp(16px, 1.4vw, 20px);
  --h5: clamp(18px, 1.8vw, 24px);
  --h4: clamp(20px, 2.2vw, 31px);
  --h3: clamp(24px, 2.8vw, 40px);
  --h2: clamp(28px, 3.4vw, 48px);
  --h1: clamp(32px, 4vw, 55px);
}

body:not([data-builder-window]) p { font-size: var(--p) !important; }

body:not([data-builder-window]) h1 { font-size: var(--h1)!important; }
body:not([data-builder-window]) h2 { font-size: var(--h2)!important; }
body:not([data-builder-window]) h3, .h3 { font-size: var(--h3) !important; }
body:not([data-builder-window]) h4 { font-size: var(--h4)!important; }
body:not([data-builder-window]) h5 { font-size: var(--h5)!important; }
body:not([data-builder-window]) h6 { font-size: var(--h6)!important; }

/* Hide elements that contain no visible content */
.brxe-heading:not(:has(*)):empty,
.brxe-text-basic:not(:has(*)):empty,
.brxe-button:not(:has(*)):empty {
  display: none !important;
}

/* =========================================
   FRONT-END ANIMATIONS
   ========================================= */

/* Only animate on the live site, not inside Bricks builder */
body:not([data-builder-window]) section,
body:not([data-builder-window]) h1,
body:not([data-builder-window]) h2,
body:not([data-builder-window]) h3,
body:not([data-builder-window]) h4,
body:not([data-builder-window]) h5,
body:not([data-builder-window]) h6,body:not([data-builder-window]) p {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

/* Visible state once revealed */
body:not([data-builder-window]) section.is-visible,
body:not([data-builder-window]) h1.is-visible,
body:not([data-builder-window]) h2.is-visible,
body:not([data-builder-window]) h3.is-visible,
body:not([data-builder-window]) h4.is-visible,
body:not([data-builder-window]) h5.is-visible,
body:not([data-builder-window]) h6.is-visible,
body:not([data-builder-window]) p.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   BRICKS BUILDER SAFETY RESET
   ========================================= */

/* Force draggable items to always be visible in the builder 
.bricks-draggable-item,
.bricks-draggable-item *,
.bricks-draggable-item,
.bricks-draggable-item * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

/* =========================================
   IRTE Button Animations
   ========================================= */

/* Shared button setup */
.bricks-button,
.brxe-button {
  position: relative;
  transition:
    transform 0.25s ease,
    color 0.35s ease,
    background-color 0.3s ease;
}

/* Main + secondary buttons */
.bricks-button.main-button,
.brxe-button.main-button,
.bricks-button.secondary-button,
.brxe-button.secondary-button {
  overflow: hidden;
  z-index: 1;
}

/* Circle hover for main + secondary buttons */
.bricks-button.main-button::before,
.brxe-button.main-button::before,
.bricks-button.secondary-button::before,
.brxe-button.secondary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-3);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.42s ease;
  z-index: -1;
}

/* Hover lift + white text for main + secondary */
.bricks-button.main-button:hover,
.brxe-button.main-button:hover,
.bricks-button.secondary-button:hover,
.brxe-button.secondary-button:hover {
  transform: translateY(-2px);
  color: #ffffff !important;
}

.bricks-button.main-button:hover::before,
.brxe-button.main-button:hover::before,
.bricks-button.secondary-button:hover::before,
.brxe-button.secondary-button:hover::before {
  clip-path: circle(80% at 50% 50%);
}


/* =========================================
   IRTE Line Button - SOE style
   ========================================= */

.bricks-button.line-button,
.brxe-button.line-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  overflow: visible;

  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;

  transition:
    transform 0.25s ease,
    color 0.35s ease;
}

/* Line buttons lift only — do NOT force white */
.bricks-button.line-button:hover,
.brxe-button.line-button:hover {
  transform: translateY(-2px);
}

/* Remove circle/fill from line buttons */
.bricks-button.line-button::before,
.brxe-button.line-button::before {
  display: none !important;
  content: none !important;
}

/* Visible line normally */
.bricks-button.line-button::after,
.brxe-button.line-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* On hover: line restarts from left and grows to right */
.bricks-button.line-button:hover::after,
.brxe-button.line-button:hover::after {
  animation: irteLineGrow 0.35s ease forwards;
}

@keyframes irteLineGrow {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}


/* =========================================
   IRTE Line Button Arrow
   ========================================= */

.bricks-button.line-button i,
.bricks-button.line-button svg,
.brxe-button.line-button i,
.brxe-button.line-button svg {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.bricks-button.line-button:hover i,
.bricks-button.line-button:hover svg,
.brxe-button.line-button:hover i,
.brxe-button.line-button:hover svg {
  transform: translateX(6px);
}


/* =========================================
   IRTE Arrow Text Links
   ========================================= */

.arrow-link,
.brxe-text-link,
.brxe-text-link.button-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.25s ease,
    color 0.35s ease;
}

.arrow-link:hover,
.brxe-text-link:hover,
.brxe-text-link.button-link:hover {
  transform: translateY(-2px);
}

.arrow-link .icon,
.brxe-text-link .icon,
.brxe-text-link.button-link .icon {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.arrow-link:hover .icon,
.brxe-text-link:hover .icon,
.brxe-text-link.button-link:hover .icon {
  transform: translateX(6px);
}