/*
 * Shared CTA language for the active VD marketing templates.
 * Geometry such as width, height, padding and margins stays template-owned.
 */

body[class*='page-template-template-vd-'] {
  --vd-active-cta-accent: #ff810a;
  --vd-active-cta-ink: #081c22;
  --vd-active-cta-radius: 2.618rem;
  --vd-active-cta-duration: 377ms;
  --vd-active-cta-ease: cubic-bezier(0.382, 0, 0.236, 1);
}

body[class*='page-template-template-vd-'] :is(
  .vd-showcase-cta-main,
  .vd-showcase-cta,
  .vd-seogeo-intents a,
  .vd-chi-siamo-cta,
  .vd-district-contact-link,
  .vd-portfolio-btn,
  .vd-contact-showcase .btn
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--vd-active-cta-accent);
  border-radius: var(--vd-active-cta-radius);
  background: transparent;
  box-shadow: none;
  color: var(--vd-active-cta-accent);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 780;
  font-stretch: normal;
  font-variation-settings: normal;
  letter-spacing: 0.0618em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--vd-active-cta-duration) var(--vd-active-cta-ease),
    color var(--vd-active-cta-duration) var(--vd-active-cta-ease);
}

/* Keep the portfolio entrance animation while sharing the CTA hover timing. */
body[class*='page-template-template-vd-'] .vd-portfolio-btn.vd-portfolio-reveal {
  transition:
    opacity 700ms var(--vd-ease, ease),
    transform 700ms var(--vd-ease, ease),
    border-color var(--vd-active-cta-duration) var(--vd-active-cta-ease),
    color var(--vd-active-cta-duration) var(--vd-active-cta-ease);
}

body[class*='page-template-template-vd-'] :is(
  .vd-showcase-cta-main,
  .vd-showcase-cta,
  .vd-seogeo-intents a,
  .vd-chi-siamo-cta,
  .vd-district-contact-link,
  .vd-portfolio-btn,
  .vd-contact-showcase .btn
)::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--vd-active-cta-accent);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vd-active-cta-duration) var(--vd-active-cta-ease);
}

body[class*='page-template-template-vd-'] :is(
  .vd-showcase-cta-main,
  .vd-showcase-cta,
  .vd-seogeo-intents a,
  .vd-chi-siamo-cta,
  .vd-district-contact-link,
  .vd-portfolio-btn,
  .vd-contact-showcase .btn
):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--vd-active-cta-accent);
  background: transparent;
  box-shadow: none;
  color: var(--vd-active-cta-ink);
}

body[class*='page-template-template-vd-'] :is(
  .vd-showcase-cta-main,
  .vd-showcase-cta,
  .vd-seogeo-intents a,
  .vd-chi-siamo-cta,
  .vd-district-contact-link,
  .vd-portfolio-btn,
  .vd-contact-showcase .btn
):is(:hover, :focus-visible):not(:disabled)::before {
  transform: scaleX(1);
}

body[class*='page-template-template-vd-'] :is(
  .vd-showcase-cta-main,
  .vd-showcase-cta,
  .vd-seogeo-intents a,
  .vd-chi-siamo-cta,
  .vd-district-contact-link,
  .vd-portfolio-btn,
  .vd-contact-showcase .btn
):focus-visible {
  outline: max(2px, 0.146rem) solid var(--vd-active-cta-accent);
  outline-offset: 0.618rem;
}

@media (prefers-reduced-motion: reduce) {
  body[class*='page-template-template-vd-'] :is(
    .vd-showcase-cta-main,
    .vd-showcase-cta,
    .vd-seogeo-intents a,
    .vd-chi-siamo-cta,
    .vd-district-contact-link,
    .vd-portfolio-btn,
    .vd-contact-showcase .btn
  ) {
    transition: none;
  }

  body[class*='page-template-template-vd-'] :is(
    .vd-showcase-cta-main,
    .vd-showcase-cta,
    .vd-seogeo-intents a,
    .vd-chi-siamo-cta,
    .vd-district-contact-link,
    .vd-portfolio-btn,
    .vd-contact-showcase .btn
  )::before {
    transition: none;
  }
}