/*
 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
*/

@keyframes gear-auto-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.gear-overlap {
  animation: gear-auto-rotate 40s linear infinite;
  animation-play-state: var(--anim-state, running);
}

@keyframes gear-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

:where(p) {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid black;
  outline-offset: 3px;
}

.cta .contact-card :focus-visible {
  outline: 3px solid black;
  outline-offset: 3px;
}

footer :focus-visible, .cta :focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}

.bricks-is-frontend .clickable-parent a::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

.bricks-is-frontend a.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

li.brxe-dropdown {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
li.brxe-dropdown .brx-submenu-toggle {
  -webkit-tap-highlight-color: rgba(0, 122, 255, 0.3);
}
li.brxe-dropdown .nav__dropdown-link {
  -webkit-tap-highlight-color: rgba(0, 122, 255, 0.3);
}

/* Nav Hover */
a.nav__link:not([aria-current="page"]) {
  transition: color 0.25s ease;
}

a.nav__link:hover {
  color: var(--brand);
}

/* Dropdown Toggle — Text + Icon gleichzeitig */
.brx-submenu-toggle > span,
.brx-submenu-toggle > button {
  transition: color 0.25s ease;
}

.brx-submenu-toggle > button {
  color: inherit;
}

.brx-submenu-toggle:hover > span,
.brx-submenu-toggle:hover > button {
  color: var(--brand);
}

/* Dropdown Links — Text + Icon gleichzeitig */
.nav__dropdown-link {
  transition: color 0.25s ease;
}

.nav__dropdown-link:hover {
  color: var(--brand);
}

a.nav__link[aria-current="page"] {
  position: relative;
}
a.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 0.125rem;
  background: var(--brand);
}

.nav__link .brx-submenu-toggle.aria-current {
  position: relative;
}
.nav__link .brx-submenu-toggle.aria-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 0.125rem;
  background: var(--brand);
}

a.nav__dropdown-link[aria-current="page"] {
  color: var(--brand);
}

.anim-toggle__label {
  font-size: 0.875rem;
}

.anim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text-light);
  transition: background-color 0.2s ease;
}
.anim-toggle:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 767px) {
  .anim-toggle {
    padding: 0;
  }
}
.anim-toggle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.875rem;
  background-color: var(--brand);
  color: var(--text-light);
  flex-shrink: 0;
}
.anim-toggle[aria-pressed="true"] .icon-pause {
  display: block;
}
.anim-toggle[aria-pressed="true"] .icon-play {
  display: none;
}
.anim-toggle[aria-pressed="false"] .icon-pause {
  display: none;
}
.anim-toggle[aria-pressed="false"] .icon-play {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   Mobile Menu
   ══════════════════════════════════════════════════════════════ */

.brxe-nav-nested.brx-open .brx-nav-nested-items {
  position: absolute;
  top: 100%;
  padding-top: 1rem;
  bottom: auto;
  height: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--gutter);
  border-bottom: 2px solid var(--brand);
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02), 0px 5px 4px rgba(3, 7, 18, 0.03), 0px 12px 9px rgba(3, 7, 18, 0.05), 0px 20px 15px rgba(3, 7, 18, 0.06), 0px 32px 24px rgba(3, 7, 18, 0.08);
}
}

/* Mobile menu: Button nicht auf volle Breite strecken */
.brxe-nav-nested.brx-open .brx-nav-nested-items .brxe-button {
  max-width: max-content;
}

/* Hamburger bar thickness */
.brxe-nav-nested > .brxe-toggle {
  --brxe-toggle-bar-height: 2px;
}

/* Hamburger → X: Open-Toggle sichtbar halten wenn Menü offen */
.brxe-nav-nested.brx-open > .brxe-toggle {
  display: inline-flex;
}

/* Bars → X Animation (squeeze) */
.brxe-nav-nested > .brxe-toggle .brxa-inner {
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.brxe-nav-nested > .brxe-toggle .brxa-inner::before {
  transition:
    top 75ms ease 0.12s,
    opacity 75ms ease;
}
.brxe-nav-nested > .brxe-toggle .brxa-inner::after {
  transition:
    bottom 75ms ease 0.12s,
    transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.brxe-nav-nested.brx-open > .brxe-toggle .brxa-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.brxe-nav-nested.brx-open > .brxe-toggle .brxa-inner::before {
  opacity: 0;
  top: 0;
  transition:
    top 75ms ease,
    opacity 75ms ease 0.12s;
}
.brxe-nav-nested.brx-open > .brxe-toggle .brxa-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition:
    bottom 75ms ease,
    transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
}

/* ══════════════════════════════════════════════════════════════
   Header Logo — Gear Hover
   ══════════════════════════════════════════════════════════════ */

.logo-gear {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Firefox bekommt keine Animation — SVG path transform-origin buggy */
@supports (not (-moz-appearance: none)) {
  @media (prefers-reduced-motion: no-preference) {
    .logo-gear {
      transition: transform 1.2s ease;
    }

    .header__logo-wrapper:hover .logo-gear {
      transform: rotate(180deg);
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   Service Card Hover
   ══════════════════════════════════════════════════════════════ */

.service-card {
  overflow: hidden;
}

.service-card .service-card__media {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.service-card:hover .service-card__media {
  transform: scale(1.05);
}

.service-card .small-heading {
  transition: color 0.3s ease;
}

.service-card:hover .small-heading {
  color: var(--brand);
}

.service-card .service-card__link-text {
  position: relative;
  transition: color 0.3s ease;
}

.service-card:hover .service-card__link-text {
  color: var(--brand);
}

.service-card .service-card__link {
  display: inline-flex;
  box-shadow: inset 0 -1px 0 0 transparent;
  transition: box-shadow 0.3s ease;
}

.service-card:hover .service-card__link {
  box-shadow: inset 0 -1px 0 0 var(--brand);
}

.service-card .service-card__link-icon {
  transition: color 0.3s ease;
}

.service-card:hover .service-card__link-icon {
  color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════
   Button Slide-Up Hover
   ══════════════════════════════════════════════════════════════ */

.btn__text {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.btn__text-inner,
.btn__text-clone {
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn__text-clone {
  position: absolute;
  top: 100%;
  left: 0;
}

.btn:hover .btn__text-inner,
.btn:hover .btn__text-clone {
  transform: translateY(-100%);
}

.btn__icon-wrap {
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
}

.btn__icon-wrap .btn__icon {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.btn__icon-wrap .btn__icon:last-child {
  position: absolute;
  top: 100%;
  left: 0;
}

.btn:hover .btn__icon-wrap .btn__icon {
  transform: translateY(-100%);
}

/* Alle Animationen einfrieren wenn Nutzer pausiert hat */
/* animation-play-state: paused statt none — sonst verliert das Element seinen transform-Zustand */
.anims-off *,
.anims-off *::after,
.anims-off *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}

.anims-off .service-card:hover .service-card__media {
  transform: none;
}

.anims-off .btn__text-inner,
.anims-off .btn__text-clone,
.anims-off .btn__icon-wrap .btn__icon {
  transform: none !important;
}