/**
 * Public styles for Client Plugin
 *
 * @package Client_Plugin
 */




 :root {
    --container-max-width: var(--ast-normal-container-width, 1200px);
    --container-half: calc(var(--container-max-width)  / 2);     /* 750px */
    --container-third: calc(var(--container-max-width) / 3);    /* 500px */
    --container-quarter: calc(var(--container-max-width) / 4);  /* 375px */
    --holler-global-radius: 20px;
    --no-padding-block-start: 0px;
    --no-padding-block-end: 0px;
}
 
.max-width-50{
    max-width: 100vw;
}

 
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1024px) {
    .max-width-50{
        max-width: 50vw;
    }

}


body, p, h1, h2, h3, h4, h5, h6, div, span, a{
    hyphens: none;
}

/* HTML Editor Styles */
.elementor-widget-text-editor h1,
h1.wp-block-heading{
    margin-bottom: 24px !important;
}
.elementor-widget-text-editor h2,
h2.wp-block-heading{
    margin-bottom: 24px;
}
.elementor-widget-text-editor h3,
h3.wp-block-heading{
    margin-bottom: 18px;
}
.elementor-widget-text-editor h4,
h4.wp-block-heading{
    margin-bottom: 16px;
}
.elementor-widget-text-editor h5,
h5.wp-block-heading {
    margin-bottom: 16px;
}
.elementor-widget-text-editor h6,
h6.wp-block-heading {
    margin-bottom: 16px;
}

hr.wp-block-separator,
.elementor-widget-text-editor hr {
    border-top: 2px solid var(--ast-global-color-8);
    margin: 36px 0 !important;
    max-width: 100ch;
}
 .entry-content p,
.elementor-widget-text-editor p{
    margin-bottom: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    max-width: 100ch;
    line-height: 1.8;
}
.entry-content a,
.elementor-widget-text-editor a{
    font-weight: 700;
    text-decoration: underline !important;
}
.entry-content a:hover,
.elementor-widget-text-editor a:hover{
       color: var(--ast-global-color-3);
}

.entry-content blockquote,
.elementor-widget-text-editor blockquote{
  font-size: 1.2rem;
  width: 65%;
  margin:48px 48px 48px 96px;
  font-style: italic;
  color:  var(--ast-global-color-0);
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid var(--ast-global-color-0) ;
  line-height:1.4;
  position: relative;
  background:var(--ast-global-color-4);
  max-width: 80ch;
}
.entry-content blockquote::before,
.elementor-widget-text-editor blockquote::before{
  content: "\201C";
  color:var(--ast-global-color-0);
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}
.entry-content blockquote::after,
.elementor-widget-text-editor blockquote::after{
  content: '';
}
.entry-content blockquote span,
.elementor-widget-text-editor blockquote span{
  display:block;
  color:var(--ast-global-color-0);
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.entry-content dl,
.elementor-widget-text-editor dl{
    display: flex   ;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 16px;
}
.entry-content dt,
.elementor-widget-text-editor dt {
    font-weight: 700;
    min-width: 10%;
}   
.entry-content dd,
.elementor-widget-text-editor dd{
    margin-left: 16px;
    max-width: 80ch;
}

.entry-content ul,
.elementor-widget-text-editor ul {
    list-style-type: disc;
    margin: 24px 48px;
}

.entry-content ol,
.elementor-widget-text-editor ol {
    list-style-type: decimal;
    margin: 24px 48px;
}

.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li{
    margin-bottom: 16px;
}

.elementor-widget-text-editor ul li ul,
.elementor-widget-text-editor ol li ul{
    margin: 16px 24px;
}

.entry-content table,
.elementor-widget-text-editor table {
    border-collapse: collapse;
    width: 100%;
}
  
.entry-content table td,
.elementor-widget-text-editor table td, .elementor-widget-text-editor table th {
    border: 1px solid var(--ast-global-color-0);
    padding: 8px;
}
  
.entry-content table tr:nth-child(even),
.elementor-widget-text-editor table tr:nth-child(even){background-color: var(--ast-global-color-1);}
  
.entry-content table tr:hover,
.elementor-widget-text-editor table tr:hover {background-color: var(--ast-global-color-0); color: var(--ast-global-color-8);}
  
.entry-content table th,
.elementor-widget-text-editor table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--ast-global-color-0);
    color: white;
  }


.entry-content .truncate,
.elementor-widget-text-editor .truncate {
    text-overflow: ellipsis;
  
    /* Needed to make it work */
    overflow: hidden;
    white-space: nowrap;
  }

h1{
	line-height: 1em;
	letter-spacing: 0.5px;
}

img {
	border-radius: var(--holler-global-radius, 0px) !important;
}


/* Typography */
/* Custom Text Size Classes for TinyMCE */
.big-text {
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0.5px;
}

.small-text {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.5px;
}

/* Elementor Button Styles*/
.btn-icon q.elementor-button * {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.btn-icon .elementor-button .elementor-button-icon{
    opacity: 0;
    transition: all 0.3s ease-in-out;
    cursor: pointer !important; 
}
.btn-icon .elementor-button  span    {
    cursor: pointer !important;
}

.btn-icon .elementor-button:hover .elementor-button-icon{
    opacity: 1;
}

/** Flip Box */

.flip-misconception .elementor-flip-box__layer__description b{
    display: block !important;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 16px !important;
}

.flip-row .elementor-element-30d3f73, .flip-row .elementor-element-0818f3e, .flip-row .elementor-element-2df925a{
  transition:all 0.3s ease;
  min-width: 0; /* allows shrinking */
}

.flip-row .elementor-element-30d3f73:hover, .flip-row .elementor-element-0818f3e:hover, .flip-row .elementor-element-2df925a:hover {
  flex: 1.5; /* expands this box */
  transition: all 0.3s ease;
}

.aspca-grow > div{
	transition: flex 0.3s ease;
	min-width: 0; 
}

.aspca-grow > div:hover{
	flex: 1.5;  min-width: 0; 
}
 
/* .marquee .elementor-element  {
    --gap: 1rem;
    display: flex;
    width: 100%;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee .elementor-element .elementor-icon-list-items {
    flex-shrink: 0;
    max-width: fit-content;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 30s linear infinite;
    animation-direction: reverse;   
}

@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
}
  
/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
    /* .marquee .elementor-element .elementor-icon-list-items {
      animation-play-state: paused !important;
    } */
  }
  
 
/* Footer Forms */
#gform_2 {}
#gform_2 .gform_heading{
    display: none !important;
}
#gform_fields_2 {
	row-gap: 10px
}
#field_2_2{
	order: 2;
}

#field_2_2 legend {
	display: none
}

#field_2_1{
}


.hero-clip {
    clip-path: ellipse(100% 100% at 92% 0%);
    overflow: hidden;
}

.hero-clip::before {
    clip-path: ellipse(100% 105% at 8% 92%)
}


/*==========  Mobile First Method  ==========*/
.elementor .e-con.e-parent {
    /* padding: 0px; */
}
.hero-clip {
    clip-path: none;
}
.hero-clip::before {
    clip-path: ellipse(100% 100% at 0 100%);
    background-size: cover;
    width: 100%;
}

 /* small Devices, Tablets */
@media only screen and (min-width : 767px) {
    .elementor .e-con.e-parent {
        /* padding: 16px; */
    }
    
}

 



.way-to-help-lotto::before,
.way-to-help-donate::before {
    opacity: 0;
    transform: scale(1);
    transition: all 0.3s ease;
    background-size: 110% 110%;
    background-position: center center;
}

.way-to-help-lotto .e-child,
.way-to-help-donate .e-child {
    opacity: 1;
        
}

.way-to-help-lotto,
.way-to-help-donate {
    overflow: hidden;
    transition: all 0.3s ease;
}

.way-to-help-lotto.hovered::before,
.way-to-help-donate.hovered::before {
    opacity: 1;
    background-size: 100% 100%;
}

.way-to-help-lotto.hovered .e-child,
.way-to-help-donate.hovered .e-child {
    opacity: 0;
}



/* .ast-page-builder-template .site-content > .ast-container{} */

/* --- Step Container Visibility Logic --- */

/* 1. On the front-end, hide all step containers by default. */
body:not(.elementor-editor-active) .step-container {
    display: none;
}

/* 2. On the front-end, show only the first step container initially. */
body:not(.elementor-editor-active) #step-1 {
    display: flex; /* Or 'block', if it's not a flex container */
}

/* 3. In the Elementor editor, force all step containers to be visible for editing. */
body.elementor-editor-active .step-container {
    display: flex !important; /* Use !important to override any other display styles */
    margin-bottom: 20px; /* Optional: Adds spacing between containers in the editor */
}

 /* calc(1500px / 2) */



/*========== Layout Debugging ==========*/
/* Main Elementor Container */
.elementor {
    /* border: 10px solid black; */
}
/* Parent Container */
.elementor .e-con.e-parent {
    /* border: 2px solid green; */
    
}
/* Child Container */
.elementor .e-con.e-child {
    /* border: 2px solid red; */
}
/* Grid Container children */
.elementor .e-grid > .elementor-element{
    /* border: 2px solid blue; */
}

/* All Elementor elements  */
.elementor .elementor-element,
.elementor .e-grid > .elementor-element  .elementor-element {
    /* border: 1px dashed #ccc; */
}


/* Elementor Collaps padding on mobile */
@media only screen and (max-width: 766px) {
    .ast-container .elementor > div.e-con.e-parent {
        /* border: solid 1px red !important; */
        --padding-inline-end: 0px !important;
        --padding-inline-start: 0px !important;
    }

.ast-container .elementor > div.e-con.e-parent div.e-con.e-child {
        /* border: solid 1px green !important; */
        /* --padding-inline-end: 16px !important;
        --padding-inline-start: 16px !important; */
    }
}


/* Header */
.ast-primary-header-bar:hover   {
    background: white !important;
    transition: all 0.3s ease-in-out;
}
 .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {
    border: none !important;
 }

.site-header-section>* {
    padding: 0 4px;
}
.main-header-menu .menu-item{
    padding: 0 2px;
}
#ast-desktop-header > div > div > div > div.ast-builder-grid-row{
    grid-column-gap: 0px !important;
}
.ast-desktop .ast-primary-header-bar.main-header-bar{
    padding-top: 0px;
    padding-bottom: 0px;
}

#ast-desktop-header > div > div > div > div > div.site-header-primary-section-center.site-header-section.ast-flex.ast-grid-section-center {
    background :url("../img/Rectangle 5.svg") no-repeat center center;
    background-size: cover;
    width: 275px;
    height: 72px;
}

#ast-desktop-header > div > div > div > div > div.site-header-primary-section-center.site-header-section.ast-flex.ast-grid-section-center > div > div > span > a > img   {
    width: 120px;
}

/* Search Icon */
#ast-desktop-header > div > div > div > div > div.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section > div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-search > div.ast-search-icon > a{
    background: #fff;
    width: 44px;
    height: 44px;
    padding: 12px 16px;
    border-radius: 24px;
}

#ast-desktop-header > div > div > div > div > div.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section > div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-search > div.ast-search-icon > a:hover{
    background: var(--ast-global-color-3);
}
 
.astra-search-icon::before {
    font-weight: 800;
}

#ast-desktop-header > div > div > div > div > div.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section > div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-search > div.ast-search-icon > a:hover .astra-search-icon::before{
    color: #fff;
}

.ast-search-box.full-screen{
    background: var(--ast-global-color-0) !important;
}

.menu-link{
    background-color: #fff;
    padding: 10px 18px;
    border-radius: 0px;
    height: 48px !important;
    margin-right: 10px;
}

.menu-link:hover{
    background-color: var(--ast-global-color-4) !important;
    color:var(--ast-global-color-0) !important;
}

/* Logo Hover Effect */
.custom-logo-link .custom-logo {
    transition: opacity 0.3s ease;
    border-radius: 0px !important;
}

.custom-logo-link:hover .custom-logo {
    content: url('https://www.albertaspca.org/wp-content/uploads/2025/08/ASPCA_LogoHover_Compressed-V2.gif');
    border-radius: 0px !important;
}

/* Mobile Menu */
.ast-mobile-popup-content{
	display: flex !important;
	flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100vh;
    padding: 0px 0px;
}
.ast-mobile-popup-content .ast-header-search {
		width: 100% !important;
}
.ast-builder-menu-mobile {
		width: 100% !important;
}
.ast-header-html-1 {
	margin-top: auto;
	border-top: solid 1px var(--ast-global-color-2);
	background: var(--ast-global-color-4);
	width: 100% !important;
	padding: 0px;
}

.ast-header-html {
	width: 100% !important;
	padding: 0px;
}


/* Holler Conveyor Widget */
.holler-conveyor-item { }
.holler-conveyor-link { 	
	position: relative;
	display: flex;
	flex-direction: row !important;
	align-items: center !important;
}
.holler-conveyor-icon-wrap {
 	margin-right: 36px; 
	width: 22px;
	height: 22px;
}

.holler-conveyor-icon-wrap svg { 
 fill: white;
 width: 100%;
 height: 100%;
}
 
/* Holler Team Widget */
.holler-widget.holler-team{
	/* .img-wrap {
		width:100%;
		height: 300px;
		overflow: hidden;
	}
	img{
		width:100%;
		height: 300px;
	} */
	.team-header{
    display: flex;
    margin-top: 16px;
    flex-direction: column;
		gap: 8px
	}
	.team-name{
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		line-height: 26px;
		letter-spacing: 0.5px;
	}
	.team-title{
		font-weight: 800;
		font-style: Bold;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0.5px;

	}
}

/* News Grid */
.news-grid .elementor-grid .e-loop-item{
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
}

/* News Loop Container */
.aspca-news-card {
  position: relative;
  overflow: hidden !important;
  border-radius: 20px;
}

/* News Loop Overlay */
.aspca-news-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  transform: scale(1.05);
  filter: blur(3px);
  transition: all 0.3s ease;
  transition: transform .3s ease, filter .3s ease;
  background-position: center center !important;
  /* optional perf hint */
  will-change: transform, filter;
}

/* News Loop Hover */
.aspca-news-card:hover::before{
  transform: scale(1);
  filter: blur(0);
}
.aspca-news-card .elementor-post-info__terms-list-item {
	display: inline-block;
	background: white;
	padding: 4px;
	border-radius: 8px;
	margin: 2px;
	font-size: 14px !important;
}

.donate-info-box .elementor-button-icon {
	display: none !important
}
.donate-info-box .uael-button-wrapper{
    margin-top: 24px !important; 
}

.info-box-grow:hover,
.giving-info-box:hover{
scale: 1.05;
	 transition: scale 0.2s
}


.hide-desc .elementor-flip-box__front .elementor-flip-box__layer__description{
    display: none !important;
}
.holler-conveyor-icon-wrap,
.holler-conveyor-item-text{
    color: var(--ast-global-color-5) !important;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 767px) {


}

 

 

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1024px) {
    .menu-link{
        background-color: #fff;
        padding: 10px 18px;
        border-radius: 24px;
        height: 48px !important;
        margin-right: 4px;
    }

    
    .hero-clip {
        clip-path: ellipse(100% 100% at 92% 0%)!important;
        overflow: hidden;
    }
    
    .hero-clip::before {
        clip-path: ellipse(100% 93% at 1% 93%)!important;
    }

}

@media (max-width: 425px) {
  .ast-header-button-2 {
    display: none !important;
  }
}


 

.astra-full-megamenu-wrapper{
	box-shadow: none !important
}

div.team-name{
	font-weight: 700;
	font-size: 22px
}

.e-loop-item{padding: 0 !important}


.elementor-tab-content p {
	margin-bottom: 10px;
}


.holler-conveyor-icon-wrap svg path{
	fill: #fff !important;
}