/* ==========================================================================
   HasanWebs — CTA "Warm Accent" (approved 2026-10-08)
   Scope: ONLY these three primary CTAs (EN + AR share the same element IDs):
     1. Header "Let's Talk"        -> .ast-header-button-1 .ast-custom-button (Astra Header Builder)
     2. "Let's Work Together"      -> Elementor widget id af4ca02 (home hero)
     3. "Start a Conversation"     -> Elementor widget id 438cc2a (home contact CTA)
   Look: transparent fill, thin #C15113 ring, soft warm side glow.
   The ring is an INSET box-shadow so button geometry (width/height/padding/radius)
   stays pixel-identical to before; no layout values are touched.
   Light + Dark tokens below. Loaded after dark-mode.css.
   ========================================================================== */

/* ---- shared (Light Mode default) ---- */
html body .ast-header-button-1 .ast-custom-button,
html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link,
html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link {
  --hw-cta-ring: #C15113;
  --hw-cta-text: #A5440F;
  --hw-cta-text-hover: #8F3A0B;
  --hw-cta-glow: 193, 81, 19;
  background-color: transparent;
  background-image: none;
  color: var(--hw-cta-text);
  fill: var(--hw-cta-text);
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -4px 0 14px -6px rgba(var(--hw-cta-glow), .38),
    4px 0 14px -6px rgba(var(--hw-cta-glow), .38);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* hover / focus (restrained: faint tint + slightly stronger glow) */
html body .ast-header-button-1:hover .ast-custom-button,
html body .ast-header-button-1 .ast-custom-button:hover,
html body .ast-header-button-1 .ast-custom-button:focus,
html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:hover,
html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:focus,
html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:hover,
html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:focus {
  background-color: rgba(var(--hw-cta-glow), .08);
  color: var(--hw-cta-text-hover);
  fill: var(--hw-cta-text-hover);
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -5px 0 16px -5px rgba(var(--hw-cta-glow), .55),
    5px 0 16px -5px rgba(var(--hw-cta-glow), .55);
}

/* keyboard focus: clear, accessible ring outside the button */
html body .ast-header-button-1 .ast-custom-button-link:focus-visible .ast-custom-button,
html body .ast-header-button-1 .ast-custom-button:focus-visible,
html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:focus-visible,
html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:focus-visible {
  outline: 2px solid var(--hw-cta-ring);
  outline-offset: 3px;
}

/* pressed */
html body .ast-header-button-1 .ast-custom-button:active,
html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:active,
html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:active {
  background-color: rgba(var(--hw-cta-glow), .14);
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -3px 0 10px -6px rgba(var(--hw-cta-glow), .4),
    3px 0 10px -6px rgba(var(--hw-cta-glow), .4);
}

/* ---- Dark Mode tokens (same orange identity, lighter text for contrast) ---- */
html[data-theme="dark"] body .ast-header-button-1 .ast-custom-button,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link {
  --hw-cta-ring: #C15113;
  --hw-cta-text: #F2A66F;
  --hw-cta-text-hover: #F8BE94;
  --hw-cta-glow: 224, 110, 40;
}
html[data-theme="dark"] body .ast-header-button-1:hover .ast-custom-button,
html[data-theme="dark"] body .ast-header-button-1 .ast-custom-button:hover,
html[data-theme="dark"] body .ast-header-button-1 .ast-custom-button:focus,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:hover,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link:focus,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:hover,
html[data-theme="dark"] body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link:focus {
  background-color: rgba(var(--hw-cta-glow), .12);
  color: var(--hw-cta-text-hover);
  fill: var(--hw-cta-text-hover);
}

@media (prefers-reduced-motion: reduce) {
  html body .ast-header-button-1 .ast-custom-button,
  html body .elementor .elementor-element.elementor-element-af4ca02 .elementor-button.elementor-button-link,
  html body .elementor .elementor-element.elementor-element-438cc2a .elementor-button.elementor-button-link {
    transition: none;
  }
}


/* ==========================================================================
   CTA Warm Accent EXPANSION (approved 2026-10-08, Phase 2)
   Buttons that always sit on permanently dark (#14130F) panels, in BOTH modes:
     A. Blog sidebar "Start a Project"          .hwb-side-cta__btn
     B. Blog bottom  "Start a Project"          .hwb-value-cta__btn
     C. Contact bottom "Start Your Project"     Elementor e39dd07 (EN) / c9e2e31 (AR)
     D. Footer "Let's Talk"                     .hs-foot__btn
     E. End-of-article primary CTA              .hs-postcta .hs-btn (NOT .hs-btn--ghost)
   Because the panels are dark in Light Mode too, the on-dark tokens apply always.
   Ring = inset shadow (dimensions untouched). No hover movement.
   ========================================================================== */
html body .hwb-side-cta .hwb-side-cta__btn,
html body .hwb-value-cta .hwb-value-cta__btn,
html body .hs-foot .hs-foot__btn,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost),
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link {
  --hw-cta-ring: #C15113;
  --hw-cta-text: #F2A66F;
  --hw-cta-text-hover: #F8BE94;
  --hw-cta-glow: 224, 110, 40;
  background-color: transparent;
  background-image: none;
  color: var(--hw-cta-text) !important;
  fill: var(--hw-cta-text);
  border-color: transparent;
  transform: none;
  filter: none;
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -4px 0 14px -6px rgba(var(--hw-cta-glow), .38),
    4px 0 14px -6px rgba(var(--hw-cta-glow), .38);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* hover / focus: faint tint + slightly stronger glow, no movement */
html body .hwb-side-cta .hwb-side-cta__btn:hover,
html body .hwb-value-cta .hwb-value-cta__btn:hover,
html body .hs-foot .hs-foot__btn:hover,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost):hover,
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link:hover,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link:hover,
html body .hwb-side-cta .hwb-side-cta__btn:focus,
html body .hwb-value-cta .hwb-value-cta__btn:focus,
html body .hs-foot .hs-foot__btn:focus,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost):focus,
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link:focus,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link:focus {
  background-color: rgba(var(--hw-cta-glow), .12);
  color: var(--hw-cta-text-hover) !important;
  fill: var(--hw-cta-text-hover);
  transform: none;
  filter: none;
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -5px 0 16px -5px rgba(var(--hw-cta-glow), .55),
    5px 0 16px -5px rgba(var(--hw-cta-glow), .55);
}

/* keyboard focus */
html body .hwb-side-cta .hwb-side-cta__btn:focus-visible,
html body .hwb-value-cta .hwb-value-cta__btn:focus-visible,
html body .hs-foot .hs-foot__btn:focus-visible,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost):focus-visible,
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link:focus-visible,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link:focus-visible {
  outline: 2px solid var(--hw-cta-text);
  outline-offset: 3px;
}

/* pressed */
html body .hwb-side-cta .hwb-side-cta__btn:active,
html body .hwb-value-cta .hwb-value-cta__btn:active,
html body .hs-foot .hs-foot__btn:active,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost):active,
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link:active,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link:active {
  background-color: rgba(var(--hw-cta-glow), .18);
  transform: none;
  box-shadow:
    inset 0 0 0 1.5px var(--hw-cta-ring),
    -3px 0 10px -6px rgba(var(--hw-cta-glow), .4),
    3px 0 10px -6px rgba(var(--hw-cta-glow), .4);
}

@media (prefers-reduced-motion: reduce) {
html body .hwb-side-cta .hwb-side-cta__btn,
html body .hwb-value-cta .hwb-value-cta__btn,
html body .hs-foot .hs-foot__btn,
html body .hs-postcta .hs-btn:not(.hs-btn--ghost),
html body .elementor .elementor-element.elementor-element-e39dd07 .elementor-button.elementor-button-link,
html body .elementor .elementor-element.elementor-element-c9e2e31 .elementor-button.elementor-button-link {
    transition: none;
  }
}