/**
 * Style Fixes for Coleridge Capital Website
 * Addresses visibility issues with headings, contact links, and enhances testimonials section
 */

/* Fix for h1 visibility */
.wrapper h1 {
  color: #444 !important; /* Change to brand blue color */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make contact us link more visible */
.wrapper a:not(.client-login-button):not(.button--aylen):not(.resource-download-button) {

  color: #404a9a !important; /* Restore blue color for regular links */
  font-weight: 500 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wrapper a:not(.client-login-button):not(.button--aylen):hover {
  color: #8690e1 !important;
}

/* Style for READ MORE button in slider */
.button--aylen {
  background: #404a9a !important;
  color: #fff !important; /* Ensure text is white */
  text-decoration: none !important; /* Prevent underline */
}

.button--aylen:hover {
  background: #232e83 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Style the client login button when it's visible */
.client-login-button,
.client-login-menu-item a.client-login-button {
  background-color: #404a9a !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  text-decoration: none !important; /* Prevent underline */
  border-radius: 3px !important;
  white-space: nowrap !important; /* Prevent wrapping */
}

.client-login-button:hover,
.client-login-menu-item a.client-login-button:hover {
  background: #232e83 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Show the menu item in tablet mode only */
@media (min-width: 768px) and (max-width: 1399px) {
  .loginbut {
    display: none !important; /* Hide the top-right button */
  }

  .client-login-menu-item {
    display: inline-block !important; /* Show as inline-block to prevent wrapping */
    vertical-align: middle !important; /* Align vertically with other menu items */
  }

  .client-login-button,
  .client-login-menu-item a.client-login-button {
    display: inline-block !important; /* Show the button */
  }
}

/* Fix for menu container to prevent wrapping */
@media (min-width: 768px) and (max-width: 1399px) {
  .elementor-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}

/* Fix for responsive menu */
@media (max-width: 1024px) {
  .elementor-nav-menu--toggle {
    display: flex !important;
    align-items: center !important;
  }

  .elementor-menu-toggle {
    margin-left: auto !important;
  }
}

/* DESKTOP (1400px+): Show bottom button, hide menu button */
@media (min-width: 1400px) {
  .loginbut1 {
    display: inherit !important; /* Show bottom button on desktop */
  }
  
  /* Hide the top login button on desktop */
  .loginbut {
    display: none !important;
  }
}

/* MOBILE (below 768px): Show bottom button, hide menu button */
@media (max-width: 767px) {
  .loginbut1 {
    display: inherit !important; /* Show bottom button on mobile */
  }
}

/* Fix for lightblue content boxes with too much empty space */
.lightblue {
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.lightblue h3 {
  margin-top: 15px !important;
  margin-bottom: 8px !important;
}

.lightblue h4 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.lightblue p {
  margin-bottom: 12px !important;
}

.content-block {
  margin-bottom: 15px !important;
}

.compact-content h3 {
  margin-top: 15px !important;
  margin-bottom: 5px !important;
}

/* Add spacing between images and content on mobile */
@media (max-width: 767px) {
  .three-col img {
    margin-bottom: 15px !important;
    display: block !important;
  }
  
  .lightblue {
    padding: 15px !important;
  }
  
  .content-block {
    margin-bottom: 10px !important;
  }
}

/* Desktop specific adjustments */
@media (min-width: 1024px) {
  .five-col-pad {
    padding: 20px 30px !important;
  }
  
  .lightblue p {
    line-height: 1.5 !important;
  }
}

.client-login-button,
.client-login-menu-item a.client-login-button {
  background-color: #404a9a !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  text-decoration: none !important; /* Prevent underline */
  border-radius: 0px !important;
  white-space: nowrap !important; /* Prevent wrapping */
  border-radius: 0 !important; /* Remove rounded corners */
}

/* Target only the main navigation menu links */
.nav-menu.menu > li.menu-item > a.menu-link:not(.client-login-button) {
    color: #444 !important; /* Grey color for menu items */
    font-weight: 400 !important;
}

/* Style for hover state */
.nav-menu.menu > li.menu-item > a.menu-link:not(.client-login-button):hover {
    color: #404a9a !important; /* Purple color only on hover */
}

/* Make sure the CLIENT LOGIN button stays white */
.client-login-menu-item a.client-login-button,
.client-login-button {
    color: #fff !important;
    border-radius: 0 !important; /* Remove rounded corners */
}

/* Homepage H1 heading - make it grey */
.heroinner h1.wow,
h1.wow.fadeInUp {
    color: #444 !important; /* Grey color to match menu items */
}