/* build-extra.css — hand-written, loaded AFTER the original CSS + tailwind.
 * Only rules the original stylesheets cannot provide:
 *   - hero/slider transition timing that lived in calls_SlideNClip.js
 *   - the #modal1 dialog that jquery-modal used to position
 *   - graceful fallbacks for the background images lost from ./pack
 */

/* ---------- 1. SlideNClip hero ------------------------------------------
 * calls_SlideNClip.js animated .fnc-slide__mask-inner with a clip-path wipe
 * and swapped .mask_SliderN on the mask element every 2.5s. The transitions
 * below reproduce that timing; site.js swaps the classes.
 */
.fnc-slide__mask-inner {
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              background-image 0.6s ease;
  will-change: transform;
}

.fnc-nav__control-progress {
  animation: fnc-progress 2.5s linear infinite;
}

@keyframes fnc-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fnc-slide__mask-inner { transition: none; }
  .fnc-nav__control-progress { animation: none; }
}

/* the original JS paused the clip when the tab lost focus */
.fnc-slider.m--paused .fnc-nav__control-progress { animation-play-state: paused; }

/* ---------- 2. header states the jQuery app.js used to toggle ----------
 * The theme CSS owns .headerAbsolute / .headerRelative backgrounds. Only the
 * scrolled state is ours (app.js toggled it); keep it minimal and let the
 * original rules win on colour. */
body.m--scrolled .headerAbsolute {
  transition: background-color 0.3s ease;
}

/* ---------- 3. #modal1 (was styled by jquery.modal.css) ---------------- */
#modal1.m--open {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
}

#modal1.m--open > center,
#modal1.m--open > div {
  background: #fff;
  border-radius: 6px;
  padding: 36px 48px;
  max-width: 560px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

#modal1 h1 {
  font-family: 'Quattrocento Sans', Arial, sans-serif;
  font-size: 22px;
  line-height: 1.35;
  margin: 0;
}

body.m--modal-open { overflow: hidden; }

/* ---------- 4. form validation states (bootstrap .state-error) -------- */
.sky-form .state-error input,
.sky-form .state-error textarea,
.sky-form .is-invalid {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}

.sky-form .state-error + em,
.sky-form .state-error label { color: #e74c3c; }

/* ---------- 5. FAQ accordion (bootstrap collapse, reimplemented) ------ */
.acc-v1 .panel-collapse { display: none; }
.acc-v1 .panel-collapse.in { display: block; }
.acc-v1 .panel-heading a { display: block; }

/* ---------- 6. header band fallbacks ----------------------------------
 * The page hero band is `<section role="visual_flexHeaderDivision">` with
 * servicesAnimation1.gif painted through mix-blend-mode:multiply over the
 * section's own background colour, which optimize.css already sets per page
 * (.about / .contact / .faq / .products). Nothing to add here — an earlier
 * fallback gradient was overriding those original colours, so it is gone.
 */

/* keep the lazy-background hooks inert but harmless without the images */
[data-image-src], .m--lazy-bg-ready {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---------- 7. nav overlap helper (jquery.overlaps.js equivalent) ----- */
.one-page-header.m--overlaps { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }

/* ---------- 8. back-to-top button (back-to-top.js) -------------------- */
.back-to-top { display: none; }