:root {
  --p: clamp(16px, 1.2vw, 15px);
  --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); }
body:not([data-builder-window]) h1 { font-size: var(--h1); }
body:not([data-builder-window]) h2,body:not([data-builder-window]) .h2 { font-size: var(--h2) !important; }
body:not([data-builder-window]) h3 , body:not([data-builder-window]) .h3 { font-size: var(--h3) !important; }
body:not([data-builder-window]) h4,body:not([data-builder-window]) .h4 { font-size: var(--h4) !important; }
body:not([data-builder-window]) h5 , body:not([data-builder-window]) .h5 { font-size: var(--h5) !important; }
body:not([data-builder-window]) h6 , body:not([data-builder-window]) .h6 { font-size: var(--h6) !important; }

/* Hide elements that contain no visible content */
.brxe-button:has(.bricks-button__icon):not(:has(.bricks-button__text:not(:empty))), .brxe-heading:not(:has(*)):empty,
.brxe-text-basic:not(:has(*)):empty,
.brxe-button:not(:has(*)):empty {
  display: none !important;
}
body:not(.bricks-is-editor) .brxe-button {
  display: inline-flex;
}

/* =========================================
   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 */
body:not([data-builder-window]) .bricks-draggable-item,
body:not([data-builder-window]) .bricks-draggable-item *,
body:not([data-builder-window]) .bricks-draggable-item,
body:not([data-builder-window]) .bricks-draggable-item * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0)  !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

/* =========================================
   IRTEC Button Animations
   ========================================= */

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

/* Remove normal state background from main buttons */
.brxe-button:not(.line-button),
.bricks-button:not(.line-button) {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Main button fill layer */
.brxe-button:not(.line-button)::before,
.bricks-button:not(.line-button)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #266986;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

/* Main button hover */
.brxe-button:not(.line-button):hover,
.bricks-button:not(.line-button):hover {
  transform: translateY(-2px);
  color: #fff !important;
}

.brxe-button:not(.line-button):hover::before,
.bricks-button:not(.line-button):hover::before {
  transform: scaleX(1);
}


/* =========================================
   IRTEC Line Button
   ========================================= */

.brxe-button.line-button,
.bricks-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.3s ease;
}

.brxe-button.line-button:hover,
.bricks-button.line-button:hover {
  transform: translateY(-2px);
  color: #ffffff !important;
}

/* Disable main fill layer on line buttons */
.brxe-button.line-button::before,
.bricks-button.line-button::before {
  display: none !important;
  content: none !important;
}

/* Visible line normally */
.brxe-button.line-button::after,
.bricks-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 */
.brxe-button.line-button:hover::after,
.bricks-button.line-button:hover::after {
  animation: irtecLineGrow 0.35s ease forwards;
}

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

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


/* =========================================
   IRTEC Arrow Text Links
   ========================================= */

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

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

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

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