/*
 Theme Name: mymulah
 Theme URI: https://www.mymulah.co.za/
 Description: Built with love by MyGuru
 Author: MyGuru
 Author URI: https://www.myguru.co.za/
 Template: Divi
 Version: 1.0.0
*/

/* ==========================================================================
   Mobile Menu Styling
   ========================================================================== */
.mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d'; /* X icon for mobile menu when opened */
}

/* ==========================================================================
   Main Menu Layout
   ========================================================================== */
.et_pb_menu__menu,
.et_pb_menu__menu .et-menu-nav,
.et_pb_menu__menu .et-menu {
    width: 100%;
}

.et_pb_menu__menu .et-menu .align-right {
    margin-left: auto;
}

/* ==========================================================================
   Menu Underline Animation
   ========================================================================== */
/* Active menu item underline (full width by default) */
.pa-underline-from-center .current-menu-item a::before,
.pa-underline-from-center .current_page_item a::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0; /* Modern logical property for left/right */
    left: 0;
    right: 0; /* Fallback for browsers not supporting inset-inline */
}

/* Menu item link base state */
.pa-underline-from-center li a {
    position: relative; /* Ensures proper positioning context for pseudo-elements */
}

.pa-underline-from-center li a::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 51%; /* Starts centered, expands on hover */
    left: 51%;
    right: 51%; /* Fallback for browsers not supporting inset-inline */
    bottom: 0;
    height: 2px;
    background: #57ba47;
    transition: inset-inline 0.3s ease-out, left 0.3s ease-out, right 0.3s ease-out; /* Specific transition for relevant properties */
}

.pa-underline-from-center li a:hover {
    opacity: 1;
}

.pa-underline-from-center li a:hover::before {
    inset-inline: 0; /* Expands to full width on hover */
    left: 0;
    right: 0; /* Fallback for browsers not supporting inset-inline */
}

/* Submenu adjustments */
.pa-underline-from-center li li a::before {
    bottom: 10%;
}

/* ==========================================================================
   Shame (Temporary Fixes - Move to appropriate section when refactoring)
   ========================================================================== */
/* Add any quick fixes here temporarily */





/* Styling for Gravity Forms */

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {
	border: 0px !important;
	border-radius: 10px;
}

body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {
	border: 0px !important;
	border-radius: 10px;
}

body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {
	border: 0px !important;
	border-radius: 10px;
}

body .gform_wrapper .gform_body .gform_fields .gfield select {
	border: 0px !important;
	border-radius: 10px;
}

body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	border: 0px !important;
	border-radius: 10px;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number input {
    border: 0px !important;
	border-radius: 10px !important;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea textarea {
	border: 0px !important;
	border-radius: 10px !important;
}

/* Button Styling */

.gform_wrapper .gform_footer input[type=submit] {
	font-size: 20px !important;
	padding: 20px 30px !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 50px !important;
	letter-spacing: 2px !important;
	background-color: #000000 !important;
	position: relative !important;
	margin: auto !important;
	
}

.gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: RGBA(0, 0, 0, 0.8) !important;
}












/*Blog - List Style Page CSS*/

/*Add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {
  /*Set the image width*/
  .blog-list .entry-featured-image-url {
    width: 40%;
    float: left;
    margin-bottom: 0 !important;
  }
  /*Set the content width*/
  .blog-list .entry-title,
  .blog-list .post-meta,
  .blog-list .post-content {
    width: 60%;
    float: left;
    padding-left: 30px;
  }
}

/*Style the individual posts*/
.blog-list .et_pb_post {
  box-shadow: 0px 2px 80px 0px #eee;
  border-radius: 6px;
  padding: 30px 20px;
  transition: .2s ease;
  background-color: #fff;
}

/*Hover effect for blog card*/
.blog-list .et_pb_post:hover {
  transform: scale(1.02);
}

@media (max-width: 767px) {
  .blog-list .entry-title,
  .blog-list .post-meta,
  .blog-list .post-content {
    width: 100%;
  }
  .blog-list .entry-featured-image-url {
    width: 100%;
  }
}

.blog-list .post-meta a {
  color: #57BA47 !important;
  font-weight: 600;
}



/*For Link Animation - Add class to any module "link effect" to add this effect*/
.link-effect a {
  cursor: pointer;
  padding-bottom:5px;
  transition: all 0.2s linear;
  background: linear-gradient(to bottom, #57BA47 0%, #57BA47 98%); /*Change color of the underline from here*/
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
}
.link-effect a:hover {
  background-size: 100% 2px;
}
/*Link effect CSS ends*/

/*Link effect - white underline add this class "link-effect-white"*/
.link-effect-white a {
  cursor: pointer;
  padding-bottom:5px;
  transition: all 0.2s linear;
  background: linear-gradient(to bottom, #fff 0%, #fff 98%); /*Change color of the underline from here*/
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
}
.link-effect-white a:hover {
  background-size: 100% 2px;
}
/*END HERE*/



/* Styling for Single Post page starts here */

/* To add button looks to the Category and Tags */
.blog-category a, .blog-tags a {
    background: #57BA47;
    color: #fff;
    padding: 6px 15px;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 20px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
    transition: .2s ease;
}

/* Hover effect */
.blog-category a:hover, .blog-tags a:hover {
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
}

/* Adjusting the Tags positioning */
.blog-tags a {
    margin: 0 0 0 10px !Important
}

/* Post Navigation Module on single post page styling */
.nav-label {
    position: relative;
    top: 13px;
    left: -2px;
}

@media only screen and ( max-width: 479px ) {
    .nav-label {
        top: 0px;
    }

    /* Adjusting the Comments section styling for single post page */
    #respond .comment-form-comment {
        width: 100% !Important;
        margin-right: 0px;
    }
}

/* End adjusting indicator */

/* To change the post of next label of post navigation module */
.nav-next .nav-label {
    left: -10px;
}

/* Adjusting animation for tabs */
.blog-comments, .blog-article {
    animation: .3s
}

/* Adding animation to the Comment form fields */
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url], #commentform textarea {
    transition: .3s ease !Important;
}

/* To make the Comment field half the width */
#respond .comment-form-comment {
    width: 50%;
    float: left;
    margin-right: 30px;
}

/* To make the Comment field fullwidth for logged in user */
.logged-in #respond .comment-form-comment {
    width: 100% !Important;
    margin-right: 0;
}

/* To change the height of the textarea - comment field */
#commentform textarea {
    height: 195px!important;
}

/* To adjust the "save info" text position */
.comment-form-cookies-consent {
    margin-top: 15px;    
}

/* This will add active indicator to the "Read Article" */
.active-link-read:after {
    content: "";
    position: absolute;
    top: 60px;
    left: 13px;
    display: block;
    width: 135px;
    border-radius: 3px 3px 0px 0px;
    background: #57BA47;
    border: 3px solid #57BA47; 
    transition: .3s ease;
}

/* This will add active indicator to the "Discussion" */
.active-link-discussion:after {
    content: "";
    position: absolute;
    top: 60px;
    right: -11px;
    display: block;
    width: 135px;
    border-radius: 3px 3px 0px 0px;
    background: #57BA47;
    border: 2px solid #57BA47; 
    transition: .3s ease;
}


/*Fixing the Button Position for Firefox for Newsletter*/
@-moz-document url-prefix() {
    .blog-newsletter.et_pb_newsletter .et_pb_button  {
        margin-top: -69px !Important;
    }
	.blog-newsletter-single-post.et_pb_newsletter .et_pb_button  {
        margin-top: -83px !Important;
    }
}