/*
 * Theme Name: Imaginal Marketing Group
 * Description: Imaginal Marketing Group's custom theme based on Tailwind
 * Author: IMPP
 * Author URI: https://www.imaginalmarketing.com
 * Version: 1.01
*/
:root {
--sans: "helvetica-lt-pro", sans-serif;
}

body.single-post header.header #headerimage {
	background-position: 75% center;
}

h2.im-services-subhead {
    font-weight: 600 !important;
}

body.home .pum-container{
	border: 0 ;
	border-radius: 0.8rem;
	
	#mya-modal{
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		
		p{
			
    font-size: 0.95rem;
    color: #666;
			margin-bottom: 10px;
		}
		
		#mya-modal-title{
			    margin: 0 0 8px;
    font-size: 1.75rem;
			    letter-spacing: 3px 
    line-height: 1.1 
    font-weight: 600;
    color: #111;
			    margin-bottom: 0.5rem ;
		}
		
		#mya-modal-links{
			display: flex;
			flex-direction: column;
			gap: 0.8rem;
			
			> a {
				display: block;
				text-align: center;
			}
		}
	}
}


form#posts-filter table.wp-list-table.widefat.fixed.striped.table-view-list.pages {
	position: static !important;
}
	

body.home h1 .h1-custom-style{
      display: block;
      font-size: 2rem !important;

    }



@media (min-width: 1024px) {
    header #heroimage .swiper-slide .slide_text h2 {
        font-size: 4rem !important;
    }

}

@media (min-width: 1200px) {
    header #heroimage .swiper-slide .slide_text h2 {
        font-size: 5rem !important;
    }
}



.tier-headers.show-for-medium{
	margin-bottom: 20px;
}

.services-prices {

    max-width: 1000px !important;

}

@media screen and (min-width: 40em) {
    .serv_wrapper .im-service-row.serv-title-row, .serv_wrapper .im-service-row.serv-title-row.service-has-tiers {
            border-bottom: 1px solid #FFE674;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    }
}

.before-after-card__label {

    font-size: 1.3rem !important;
	@media (max-width: 768px) {
		 font-size: 1rem !important;
	}
}

body:not(.home) .promo-box a.button{
	text-align:center;
}

@media (min-width: 64em) {
    #team-member #bio {
		
		max-width: unset !important;
	}

}

/* Remove the white gradient overlay on interior hero images. */
#headerimage::after,
#headerimage:after {
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Homepage — all h2 titles use the brand gray. */
body.home h2,
body.home h2 a,
body.home main#content h2,
body.home main#content h2 a {
  color: #727272 !important;
}

/* Homepage exception — the slider h2 stays white. */
body.home #heroimage h2,
body.home #heroimage h2 a,
body.home #heroimage .slide_text h2,
body.home #heroimage .slide_text_inner h2 {
  color: #fff !important;
}

/* Homepage promos — buttons: yellow background, grey text.
   On hover: transparent background, grey text stays. */
body.home #promos .button,
body.home #promos a.button,
body.home .promo-box .button,
body.home .promo-box a.button {
  background-color: #FEE476 !important;
  background: #FEE476 !important;
  color: #727272 !important;
  border: 1px solid #FEE476 !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
body.home #promos .button:hover,
body.home #promos a.button:hover,
body.home .promo-box .button:hover,
body.home .promo-box a.button:hover,
body.home #promos .button:focus,
body.home #promos a.button:focus,
body.home .promo-box .button:focus,
body.home .promo-box a.button:focus {
  background-color: transparent !important;
  background: transparent !important;
  color: #727272 !important;
  border: 1px solid #FEE476 !important;
}

#footer-bottom a {
color:#fff;
}
#footer-bottom a:hover {
opacity: 0.7;
}

#mobile-nav {
justify-content:center;
align-items:center;

background-color: #FEE476;
    border-top: 0;
    border-bottom: 0;
	padding: 1rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    cursor: pointer;
	    color: #727272 !important;
}

#mobile-subnav {
background-color: #fff;

}

#mobile-subnav ul {
padding:1rem 0;
}

#mobile-subnav ul > li {
text-align: center;
padding:0.5rem 0;
}

#mobile-subnav ul > li > a {
/* color: #00AEEF; */
}

main#content #sidenav {
  padding:1.6rem 3rem 3rem 0px;
}


#sidenav ul li {
text-align: right;
}

#sidenav ul li a {
    text-transform: uppercase;
	font-size: 1rem;
	text-align: right;
	justify-content: flex-end;
}

#sidenav ul.is_sidenav li a {
align-items:baseline;
}

#sidenav ul.is_sidenav li a:hover {
/* color: #00AEEF !important; */
}

/* sidenav blog */
#sidenav .blog-sidebar-item ul li{
	text-align:center !important;
}

/* #nav-main .button.nav-cta > a,
#mobile-menu .button.nav-cta > a{
	background-color: rgba(0, 174, 239, 0.1);
    color: rgb(29, 29, 29);
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: normal;
    cursor: pointer;
    width: 100%;
    border-width: 2px;
    border-style: solid;
    border-color: #00AEEF;
    border-image: initial;
    padding: 0.5rem 1rem !important;
    margin: 0.7rem 0px;
    text-decoration: none;
    border-radius: 3rem;
    text-align: center;
} */

/* #nav-main .button.nav-cta > a:hover,
#mobile-menu .button.nav-cta > a:hover {
	background-color: #00AEEF;
    color: #fff !important;
} */

#blog-posts .entry-content > div > a.button {
display:inline-block;
margin-top: 2rem;
}

h2,h4,h5,h6 {
/* color: #00AEEF; */
text-transform: uppercase;
}

p {letter-spacing: normal;}
.serv_wrapper .serv_subcat_disclaimer {
    margin-top: 50px;
    margin-bottom: 50px;
}

.reveal-image {
  display: block;
  max-width: 100%; 
  height: auto;
  clip-path: inset(50% 0% 50% 0%); 
  transition: clip-path 1.5s ease-out; 
}
    
.reveal-image.is-visible {
  clip-path: inset(0% 0% 0% 0%); 
}

.slide_text_inner h2 {
  color: #80CEEC;
}


.promo_title {
  transform: translate(2em, 0);
}

#sub-footer-title {
  transform: translate(-2em, 0);
}

.slide_text_inner,
#intro-title,
.promo_title,
#sub-footer-title{
  font-size: 3rem;
  /* white-space: nowrap; */
  overflow: visible;
  opacity: 1;
  padding: 0 2em;  /* padding to allow gradient fade outside */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  animation-fill-mode: forwards;
  transition: padding 0.3s ease;
}

#promos .slide_text_inner{
  text-align: right;
white-space: nowrap;
}
  
.slide_text_inner.is-visible,
#intro-title.is-visible,
.promo_title.is-visible,
#sub-footer-title.is-visible{
  animation: maskwipe 3s steps(60, end) forwards;
}
  
/* Remove mask and padding after animation ends */
.slide_text_inner.is-visible.final,
#intro-title.is-visible.final,
.promo_title.is-visible.final,
#sub-footer-title.is-visible.final{
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 1;
  padding-left: 2em;
  padding-right: 2em;
}

#heroimage .slide_text_inner.is-visible.final{
  padding-left: 2em;
}

@keyframes maskwipe {
  from {
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  to {
    -webkit-mask-size: 120% 100%;
    mask-size: 120% 100%;
  }
}

@media (min-width: 1200px) and (max-width:1550px){
  header #top-bar .inner #nav-wrapper nav ul li a{
    font-size: .9rem;}
	header #top-bar .inner #nav-wrapper nav ul li:not(.nav-cta){margin-left: 0; margin-right: 0;}
}


.photo-gallery > .columns {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #000;}
.photo-gallery > .columns a img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    transition: all 0.4s ease;
    opacity: 0.75;
  }
.photo-gallery > .columns:hover a img {
      transform: scale(1.1);
      opacity: 1;
    }
	
body.blog article.tease-post{
  margin-bottom: 2.5rem;
}

article.post-type-post > img{
	width: 100% !important;
	height: auto!important;
}

 .gform_fileupload_rules{ font-weight: bold; }
 
.gform_wrapper.gravity-theme .gform_drop_area{
    display: flex;
    justify-content: center;
    align-items: center;
		flex-direction:column;
    width: 100%;
    padding: 2rem;
    text-align: center;
    background-color: #A3BD00;
	background-color: #fff;
    border: 1px dashed #888;
    border-radius: 4px;
    margin: 0!important;
 }


#sidebar h4{
  text-align: center !important;
}

body.single img.featured-img{
	max-width: 600px;
}


#lastMinute h1 {
	font-size:15px!important;
}

@media screen and (max-width: 39.9375em){
  #sidebar ul, #sidebar ul li{ margin-left: 0; }
}


@media screen and (max-width: 768px){
  #heroimage .slide_text_inner {
  	padding:0!important;
  }
  
  h1{
	line-height: 5.2rem;
	font-size:5rem;
	}

  .promo_title {
    transform: translate(0em, 0);
  }
  
  #sub-footer-title {
    transform: translate(0em, 0);
  }
}


@media screen and (max-width: 1024px){
  #sub-footer-title {
  	padding:0!important;
	white-space:wrap;
	width:100%;
  }
  
  #sub-footer-title h2 {
  	font-size: 4rem !important;
    line-height:4.3rem;
    text-align: left;
    display: block;
    width: 100%;
    margin-bottom:0;
  }
}

 @media screen and (max-width: 768px) {
	 #aveda-logo-footer-desktop {
	 	display: none!important;
	 }
	 
	 #aveda-logo-footer-mobile {
	 	display: flex!important;
	 }
	 
	 #aveda-logo-footer-mobile img{
	 	filter: unset !important;
	 }
	 
	 #sub-footer-title h2 {
  	font-size: 3rem !important;
  }
	 
	 
}

 @media screen and (max-width: 480px) {
	 #lastMinute {bottom:100px !important;}
	 #im-sms-wrap {height:100px !important;}
	 
	 
}

@media (min-width: 480px) {
	#lastMinute {
	  /* left: unset !important; */
	   /*right: 24px !important; */
	  /* bottom: 130px !important; */
	  left: 24px;
	  bottom: 5px !important;
	}
	
	.close-btn {
        display: block !important;
        position: absolute;
        left: 5px;
        top: 5px;
        color: #fff;
		cursor: pointer;
    }
}



@media (min-width: 1024px) {
    main#content:not(.home) article,
	main#content:not(.blog) article,
	main#content:not(.single) article{
        /* width: 70%; */
    } 
	
	.wp-singular.single main#content article.post.single-post,
	.blog main#content article.post{
	width: 100% !important;
	}
	
	    main#content:not(.home) aside {
        width: 25%;
    }
	
	.wp-singular h1#page-title {
        line-height: 5rem !important;
    }
}


/* Mobile-first: stack columns. */
    #footer-inner {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 100%;
      width: 100%;
    }
    .footer-col {
      width: 100%;
      padding-bottom: 1rem;
    }
    /* All footer text + links forced to the brand gray. */
    #footer-top,
    #footer-top * {
      color: #727272 !important;
    }
    #footer-top a {
      color: #727272 !important;
    }

    /* Desktop: 5 columns on one row. The logo column (foot1) gets
       extra width to stand out; the other four share the remaining
       space evenly. All columns are vertically centered. */
    @media (min-width: 768px) {
      #footer-inner {
        display: grid;
        grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
        gap: 2rem;
        align-items: center;
      }
      .footer-col {
        padding-bottom: 0;
        min-width: 0; /* allow shrinking inside grid so long emails wrap */
      }
      /* Logo in foot1: contained, not stretched to full column width. */
      #foot1 img {
        max-width: 75%;
        width: auto;
        height: auto;
      }
    }

    /* Avoid long emails / urls overflowing column width. */
    #footer-top a,
    #footer-top p {
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    /* Hide section headings (e.g. "VISIT US") and email in every column. */
    #footer-top .footer-col h2,
    #footer-top .footer-col h3,
    #footer-top .footer-col .h2,
    #footer-top .location_email,
    #footer-top .location-email {
      display: none !important;
    }
    /* Catch-all: any email link in the footer columns (e.g. <a href="mailto:..">) */
    #footer-top a[href^="mailto:"] {
      display: none !important;
    }
    /* Hide social icons in every column EXCEPT foot1 (logo column). */
    #footer-top .footer-col:not(#foot1) .social_icons-component,
    #footer-top .footer-col:not(#foot1) .social-icons,
    #footer-top .footer-col:not(#foot1) .socials {
      display: none !important;
    }

    /* Column 5 — pill-style "Contact" button matching Figma. */
    #foot-5 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
    }
    #foot-5 a:not(:has(img)) {
      display: block;
      width: 100%;
      padding: 0.6rem 1.8rem;
      border: 1px solid #727272;
      border-radius: 9999px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.85rem;
      text-decoration: none;
      text-align: center;
      background: transparent;
      transition: background-color 0.2s ease, color 0.2s ease;
      box-sizing: border-box;
    }
    #foot-5 a:not(:has(img)):hover {
      background: #727272;
      color: #FFE674 !important;
    }
    /* Make sure the menu wrapper and its <li> items also span full width
       so the pill buttons can stretch end-to-end of the column. */
    #foot-5 .menu-footer-container,
    #foot-5 #menu-footer,
    #foot-5 #menu-footer .menu-item {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #foot-5 #menu-footer .menu-item + .menu-item {
      margin-top: 0.5rem;
    }
    /* Brand logos in col 5 stay clean — no pill border around <a><img></a>. */
    #foot-5 a:has(> img),
    #foot-5 img {
      border: 0;
      padding: 0;
      border-radius: 0;
      background: transparent !important;
    }

    /* Aveda / Kérastase logos: keep them on a single row, sized to their
       natural aspect ratio (the widget's inline width:calc(50%-1rem)
       was distorting them). */
    #foot-5 #aveda-logo-footer-mobile {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem !important;
      margin-top: 1.5rem !important;
      width: 100%;
    }
    #foot-5 #aveda-logo-footer-mobile img {
      width: auto !important;
      max-width: calc(50% - 0.5rem);
      max-height: 38px;
      height: auto;
      object-fit: contain;
      flex: 0 1 auto;
    }



/*To replace blog header
body.blog header.header #headerimage , body.single-post header.header #headerimage, body.category header.header #headerimage, body.search header.header #headerimage, body.archive header.header #headerimage  {
    background-position: center;
	background-image: url() !important;
}*/


	@media screen and (max-width: 768px) {
body.blog #headerimage{
background-position: 73% center ;		
	}
}

#mya-block{
background-color: var(--primary);
text-align: center;
margin-bottom: 2rem;
padding: 2rem 2rem !important;
max-width: 800px;
margin: 0 auto 2rem auto;
}

#mya-block .mya-button{
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}

.mya-button .button {
  background: transparent;
  border: 3px solid #fff;
}

.mya-button .button:hover {
  background: #fff;
}

@media screen and (max-width: 768px){
#mya-block .mya-button {
    flex-direction: column;
  }
}


@media (min-width: 1024px) {
    header #heroimage .swiper-slide .slide_text h2 {
        font-size: 4rem !important;
    }

    body.home h1 {
      font-size: 5rem !important;

    }
}

.team_wrap .team_img {
	background-position: top;
}