/*
Theme Name:   Kadence Child Theme
Theme URI:    https://www.kadencewp.com/kadence-theme/
Description:  Child theme for Kadence
Author:       Jay Jay
Author URI:   https://tisuway.com/
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child
*/

/* -----------------------------
   IMPORT PARENT THEME STYLES
----------------------------- */
@import url("../kadence/style.css");

/* -----------------------------
   MOBILE DRAWER MENU ONLY
----------------------------- */

/* Target the main drawer inner container for background and layout */
#mobile-drawer .drawer-inner {
  background: #fff000; /* Yellow background */
  padding: 0;
  display: flex; /* Use flexbox for vertical alignment */
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* Aligns items to the left */
  height: 100vh; /* Make the drawer full height */
  position: relative; /* KEY CHANGE: Create a positioning context for the button */
}

/* Target the menu items within the drawer */
#mobile-drawer .drawer-inner .mobile-menu-container .menu .menu-item a {
  color: #ff0000; /* Red text color */
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
  padding: 1rem 2rem; /* Horizontal padding for a straight line */
  text-align: left; /* Aligns text to the left */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 0.3s ease;
}

/* Ensure a more powerful selector for menu items on hover */
#mobile-drawer .drawer-inner .mobile-menu-container .menu .menu-item a:hover {
  color: #b90000; /* Darker red hover */
}

/* Remove border on the last item for a cleaner look */
#mobile-drawer .drawer-inner .mobile-menu-container .menu .menu-item:last-child a {
  border-bottom: none;
}

/* Target the "Get Started" button container */
.mobile-menu-cta {
  position: absolute; /* KEY CHANGE: Position the button relative to its parent */
  bottom: 2rem; /* KEY CHANGE: Place the button 2rem from the bottom */
  left: 2rem; /* KEY CHANGE: Place the button 2rem from the left */
  text-align: left;
}

.mobile-menu-cta .whatsapp-btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: #ff0000; /* Red button */
  color: #fff;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.mobile-menu-cta .whatsapp-btn:hover {
  background: #b90000; /* Darker red hover */
  transform: none;
}