/*
Theme Name: 	BuddyBoss Child
Theme URI: 		https://www.buddyboss.com/
Description: 	A child theme of BuddyBoss Theme. To ensure easy updates, make your own edits in this theme.
Author: 		BuddyBoss.com
Author URI: 	https://www.buddyboss.com/
License: 		GNU General Public License v3 or later
License URI: 	http://www.gnu.org/licenses/gpl-3.0.html
Template: 		buddyboss-theme
Version: 		1.0.0
*/

/*

-- Stylesheet locations --

Add your own customizations into /css/custom.css in this child theme.

Parent styles are called from /buddyboss-theme/inc/theme/functions.php in the 
parent theme and are located in /buddyboss-theme/assets/css/ in the parent theme.


--- If you are editing CSS via the WordPress admin, do the following ---

1. Install the plugin WP Editor: http://wordpress.org/plugins/wp-editor/
2. Navigate to Appearance > Theme Editor in the WordPress admin.
3. Navigate into the /css/ folder of your child theme to edit custom.css.

*/
/* Mobile hamburger menu button — groen zodat hij zichtbaar is op witte achtergrond.
 * ALLEEN op mobile/tablet — anders duwt onze display:inline-flex de knop ook op desktop
 * zichtbaar (Elementskit verstopt de hamburger boven 1024px met display:none). */
@media (max-width: 1024px) {
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler {
    background-color: #2F8D47 !important;
    border: 1px solid #2F8D47 !important;
    padding: 10px 8px !important;
    width: 56px !important;
    height: 52px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler .elementskit-menu-hamburger-icon {
    background-color: #ffffff !important;
    display: block !important;
    width: 100% !important;
    height: 5px !important;
    border-radius: 2px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:hover,
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:focus,
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:active {
    background-color: #256e37 !important;
    border-color: #256e37 !important;
  }
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:hover .elementskit-menu-hamburger-icon,
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:focus .elementskit-menu-hamburger-icon,
  html body button.elementskit-menu-hamburger.elementskit-menu-toggler:active .elementskit-menu-hamburger-icon {
    background-color: #ffffff !important;
  }
}

/* Mobile header: meer verticale ruimte rond het logo */
@media (max-width: 1024px) {
  .elementor-location-header {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* Header: verwijder de dunne horizontale scheidingslijn onder de logo-balk */
html body .elementor-location-header .elementor-element.elementor-element-8059ba6 {
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}

/* Mobile menu: verwijder de vreemde box-shadow rond het paneel + verzacht de grijze overlay */
html body .elementskit-menu-offcanvas-elements,
html body .elementskit-menu-container,
html body .elementskit-menu-overlay,
html body .elementskit-navbar-nav-default {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}
html body .elementskit-menu-overlay {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* Mobile menu close (X): zelfde look als de hamburger — alleen op mobile/tablet. */
@media (max-width: 1024px) {
  html body button.elementskit-menu-close {
    background-color: #2F8D47 !important;
    border: 1px solid #2F8D47 !important;
    color: #ffffff !important;
    width: 56px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }
  html body button.elementskit-menu-close:hover,
  html body button.elementskit-menu-close:focus,
  html body button.elementskit-menu-close:active {
    background-color: #256e37 !important;
    border-color: #256e37 !important;
    color: #ffffff !important;
  }
  html body button.elementskit-menu-close i,
  html body button.elementskit-menu-close svg,
  html body button.elementskit-menu-close span {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* Mobile menu: laat submenu's van 'Trainingen' (en alle andere items met kinderen) direct
 * uitgeklapt zien, geen accordion-klik nodig. Verberg tegelijk de dropdown-chevron want de
 * submenu is toch al open. */
@media (max-width: 1024px) {
  html body #menu-buddypanel-mobile-logged-in-out-1 ul,
  html body .buddypanel-menu ul,
  html body .mobile-menu ul,
  html body .side-panel-menu ul,
  html body #menu-buddypanel-mobile-logged-in-out-1 .sub-menu,
  html body .buddypanel-menu .sub-menu,
  html body .mobile-menu .sub-menu,
  html body .side-panel-menu .sub-menu,
  html body #menu-buddypanel-mobile-logged-in-out-1 .menu-item-has-children > ul {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
  }
  html body #menu-buddypanel-mobile-logged-in-out-1 .bb-toggle-submenu,
  html body .buddypanel-menu .bb-toggle-submenu,
  html body .side-panel-menu .bb-toggle-submenu,
  html body .mobile-menu .bb-toggle-submenu {
    display: none !important;
  }
  /* BuddyBoss zet vaak class .opened of aria-expanded pas na klik; dit forceert de open-look. */
  html body #menu-buddypanel-mobile-logged-in-out-1 .menu-item-has-children,
  html body .side-panel-menu .menu-item-has-children {
    height: auto !important;
    max-height: none !important;
  }
}

/* Mobile menu: aggressief alle box-shadow / filter / gradient weghalen die het paneel of de
 * omliggende elementen op de content projecteren. Uniforme, subtiele overlay behouden. */
@media (max-width: 1024px) {
  html body .elementskit-menu-container,
  html body .elementskit-menu-offcanvas-elements,
  html body .elementskit-menu-overlay,
  html body .elementskit-mobile-builder-content,
  html body .ekit-mobile-menu-wraper,
  html body .elementskit-menu-container *,
  html body .elementskit-menu-offcanvas-elements * {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important;
  }
  html body .elementskit-menu-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}