/* ==============================================
   trosunit Design Enhancer — CSS
   Modern scroll animations & visual polish
   ============================================== */

html { scroll-behavior: smooth; }
::selection { background: #0A294E; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tdu-fade-in, .tdu-fade-left, .tdu-fade-right,
  .tdu-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* --- 1. SCROLL FADE-IN --- */
.tdu-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tdu-fade-in.is-visible { opacity: 1; transform: translateY(0); }

.tdu-fade-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.tdu-fade-left.is-visible { opacity: 1; transform: translateX(0); }

.tdu-fade-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.tdu-fade-right.is-visible { opacity: 1; transform: translateX(0); }

/* Staggered children */
.tdu-stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.tdu-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.tdu-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.tdu-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.tdu-stagger.is-visible > *:nth-child(3) { transition-delay: 0.1s; }
.tdu-stagger.is-visible > *:nth-child(4) { transition-delay: 0.15s; }
.tdu-stagger.is-visible > *:nth-child(5) { transition-delay: 0.2s; }
.tdu-stagger.is-visible > *:nth-child(6) { transition-delay: 0.25s; }

/* --- 2. HERO TYPOGRAPHY --- */
.wp-block-group.alignfull > .wp-block-group.alignfull:first-child h1 {
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.05 !important;
}
.wp-block-group.alignfull > .wp-block-group.alignfull:first-child h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0A294E, #545473);
  border-radius: 2px;
  margin-top: 16px;
}
.wp-block-group.alignfull > .wp-block-group.alignfull:first-child .has-secondary-color {
  font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
  letter-spacing: 0.01em;
}

/* --- 3. STATS BAR --- */
.stats-bar .wp-block-column .has-primary-color {
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  transition: transform 0.3s ease;
}
.stats-bar .wp-block-column .has-small-font-size {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem !important;
  opacity: 0.7;
}

/* --- 4. SERVICE CARDS --- */
.service-card {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(10,41,78,0.12), 0 4px 12px rgba(10,41,78,0.06) !important;
  border-color: #0A294E !important;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.6s ease;
  z-index: 0; pointer-events: none;
}
.service-card:hover::before { left: 100%; }
.service-card .bg-icon {
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.service-card:hover .bg-icon {
  opacity: 0.09 !important;
  transform: scale(1.05) rotate(3deg);
}

/* --- 5. PROCESS / TIMELINE --- */
.slik-jobber-grid .wp-block-column {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  border-radius: 8px;
}
.slik-jobber-grid .wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(10,41,78,0.08);
  background: rgba(245,245,247,0.5);
}

/* --- 6. ABOUT SECTION --- */
.has-main-background-color .wp-block-image img {
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease;
}
.has-main-background-color .wp-block-image:hover img {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* --- 7. TESTIMONIAL CARDS --- */
.wp-block-group[style*="border-color:#e0e0e0"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.wp-block-group[style*="border-color:#e0e0e0"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,41,78,0.08);
  border-color: #d4d4ec !important;
}

/* --- 8. BUTTONS --- */
.wp-block-button__link.has-main-background-color {
  transition: all 0.3s ease !important;
}
.wp-block-button__link.has-main-background-color:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,26,46,0.25);
}
.is-style-outline .wp-block-button__link {
  transition: all 0.3s ease !important;
}
.is-style-outline .wp-block-button__link:hover {
  background: #1A1A2E !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* --- 9. HEADER SCROLL --- */
body.tdu-header-scrolled header,
body.tdu-header-scrolled .wp-block-template-part:first-of-type {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* --- 10. TRUST BAR INDUSTRY ICONS --- */
.has-tertiary-background-color .wp-block-columns .wp-block-column {
  transition: transform 0.3s ease;
  cursor: default;
}
.has-tertiary-background-color .wp-block-columns .wp-block-column:hover {
  transform: translateY(-4px);
}

/* --- 11. CONTACT FORM --- */
.wpforms-form .wpforms-field input,
.wpforms-form .wpforms-field textarea {
  border: 1.5px solid #d4d4ec !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  font-size: 16px !important;
}
.wpforms-form .wpforms-field input:focus,
.wpforms-form .wpforms-field textarea:focus {
  border-color: #0A294E !important;
  box-shadow: 0 0 0 3px rgba(10,41,78,0.1) !important;
  outline: none !important;
}
.wpforms-form .wpforms-submit-container button {
  background: linear-gradient(135deg, #0A294E 0%, #1A1A2E 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: all 0.3s ease !important;
}
.wpforms-form .wpforms-submit-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,41,78,0.3);
}

/* --- 12. PARALLAX HERO --- */
@media (min-width: 769px) {
  .tdu-parallax-hero {
    will-change: transform;
    transition: transform 0.05s linear;
  }
}