/*

Theme Name: Hello Elementor Child

Theme URI: https://github.com/elementor/hello-theme/

Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team

Author: Elementor Team

Author URI: https://elementor.com/

Template: hello-elementor

Version: 1.0.1

Text Domain: hello-elementor-child

License: GNU General Public License v3 or later.

License URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

/********************
 HD Code - Elementor Link Underline
 *******************/

.elementor-widget-text-editor a {
  text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-widget-text-editor a:hover {
  text-decoration: none;
	text-underline-offset: 2px;
}

/********************
 HD Code - Skiplink Visibility Helper
 *******************/

a:-webkit-any-link:focus-visible {
    outline-offset: 4px;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 2px;
}

a.skip-link screen-reader-text {
background-color: white;
}

/********************
 HD Code - Focus Helper
 *******************/

a:-webkit-any-link:focus-visible {
    outline-offset: 4px;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 3px;
}


/********************
 HD Code - Squirckle Button Global
 *******************/

/* === SQUIRCLE BUTTON (global, with clipped hit-area + focus) === */
:root{
  --squircle-mask: url('/wp-content/uploads/Button-Shape.svg');
  --focus-ring-color: #1E66FF;
}

/* Apply to Elementor Button anchors inside a .squircle-btn wrapper */
.squircle-btn .elementor-button,
.squircle-btn a.elementor-button,
.squircle-btn .elementor-button-link{
  /* Let Elementor control width/height. If you want 1:1 shape, add aspect-ratio: 320/104; */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Visual shape (paint) */
  -webkit-mask: var(--squircle-mask) center/100% 100% no-repeat;
          mask: var(--squircle-mask) center/100% 100% no-repeat;

  /* Hit-test shape (the fix): click/touch area follows the curve */
  -webkit-clip-path: url(#squircle-obb);
          clip-path: url(#squircle-obb);

  /* Keep any focus halo from being clipped by parents */
  overflow: visible;
  z-index: 0;
  transition: filter .18s ease, transform .05s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* Optional: inner breathing room for the label */
.squircle-btn .elementor-button .elementor-button-content-wrapper{ padding: 0 1.1rem; }

/* Hover/active (colors set in Elementor controls) */
.squircle-btn .elementor-button:hover{ filter: brightness(1.06); }
.squircle-btn .elementor-button:active{ transform: translateY(1px); }

/* ---------- Accessible keyboard focus ---------- */
/* Keep default box outline off, we’ll draw our own */
.squircle-btn .elementor-button:focus{ outline: none; }
.squircle-btn .elementor-button:focus:not(:focus-visible){ outline: none; }

/* Chrome-safe, shape-following halo: draw it on the wrapper using :has */
.squircle-btn{ position: relative; isolation: isolate; } /* new stacking context, safer halo */
.squircle-btn:has(.elementor-button:focus-visible)::after{
  content:"";
  position:absolute;
  inset:-4px;                                /* halo thickness outside the shape */
  background: var(--focus-ring-color);
  z-index:-1;                                /* behind the button */
  pointer-events:none;
  /* Follow the squircle curve (scales with wrapper box) */
  -webkit-clip-path: url(#squircle-obb);
          clip-path: url(#squircle-obb);
  /* soft edge */
  filter: blur(1px) opacity(.9);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .squircle-btn .elementor-button{ transition:none; }
}

/* Graceful fallback if mask support is missing */
@supports not ((mask: none) or (-webkit-mask: none)){
  .squircle-btn .elementor-button{
    -webkit-mask:none; mask:none; border-radius:18px;
    /* clip-path url(#...) usually still works; if not, hit-area will be rectangular */
  }
}

/********************
HD Code - Adjust Header Scroll Issue
********************/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/********************
 HD Code - Hover Animation Cards
 *******************/

 .aminate-on-hover {
     transform: translateX(0) translateY(0);
     transition: all 0.3s;
 }
 
 .aminate-on-hover:hover{
     transform: translateX(0px) translateY(0px);
     transition: all 0.3s;
 }
 
 .aminate-on-hover .animate-slide .elementor-icon{
     transform: rotate(0);
     opacity: 0.0;
     transition: all 0.3s;
 }
 
.aminate-on-hover:hover .animate-slide  .elementor-icon{
    transform: translateX(+20px) translateY(+0px);
        opacity: 1.0;
    transition: all 0.3s;
}

.aminate-on-hover .animate-zoom {
    transform: scale(1);
    transform-origin: left;
    transition: all 0.3s;
}
.aminate-on-hover:hover .animate-zoom {
    transform: scale(1.1);
    transform-origin: left;
    transition: all 0.3s;
}

.aminate-on-hover .animate-peek-a-boo {
        transform: translatey(+146px)
}

.aminate-on-hover:hover .animate-peek-a-boo {
        transform: translatey(+0px)
}

/********************
 HD Code Hover Animation Icons
 *******************/

 .aminate-icon-on-hover {
     transform: translateX(0) translateY(0);
     transition: all 0.3s;
 }
 
 .aminate-icon-on-hover:hover{
     transform: translateX(0px)                translateY(0px);
     transition: all 0.3s;
 }
 
 .aminate-icon-on-hover .animate-icon-slide .elementor-icon{
     transform: rotate(0);
     opacity: 0.0;
     transition: all 0.3s;
 }
 
.aminate-icon-on-hover:hover .animate-icon-slide  .elementor-icon{
    transform: translateX(+20px)           translateY(+0px);
        opacity: 1.0;
    transition: all 0.3s;
}

.aminate-icon-on-hover .animate-icon-zoom {
    transform: scale(1);
    transform-origin: left;
    transition: all 0.3s;
}
.aminate-icon-on-hover:hover .animate-icon-zoom {
    transform: scale(1.15);
    transform-origin: left;
    transition: all 0.3s;
}

.aminate-icon-on-hover .animate-icon-zoom-center {
    transform: scale(1);
    transform-origin: center;
    transition: all 0.3s;
}
.aminate-icon-on-hover:hover .animate-icon-zoom-center {
    transform: scale(1.1);
    transform-origin: center;
    transition: all 0.3s;
}

.aminate-icon-on-hover .animate-icon-peek-a-boo {
        transform: translatey(+24px)
}

.aminate-icon-on-hover:hover .animate-icon-peek-a-boo {
        transform: translatey(+0px)
}

/********************
 HD Code - Mega Menu List Sliding Arrow
 *******************/
.menu-with-arrows .elementor-nav-menu .elementor-item::after {
  content: ""; /* no text */
  display: inline-block;
  width: 20px;   /* adjust to match SVG size */
  height: 20px;
  margin-left: 85%;
  background: url("/wp-content/uploads/Right_Red.svg") no-repeat center;
  background-size: contain; /* makes SVG scale nicely */
  vertical-align: middle;
  transition: transform 0.6s ease;
}

/* Optional hover effect */
.menu-with-arrows .elementor-nav-menu .elementor-item:hover::after {
  transform: translateX(10px);
}

/********************
 Normalise formstack css 
 *******************/
.fsBody, .fsBody * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fsBody table,
.fsBody th,
.fsBody td {
  border: 2px solid #E2E2E2;
}

/********************
 Only style image in Gutenberg Post Content
 *******************/
.elementor-widget-theme-post-content .wp-block-image img {
	border-radius: 12px;
}