/*
Theme Name: Hello Child
Description: Hello Child Theme
Author: Elementor
Author URI: Hello Child Theme
Author Email: hellochild@wordpress.com
Version: 1.0.0
Text Domain: hello-elementor-child
Template: hello-elementor
*/
/*
Add your custom styles here
*/

/* ============================================================
   Mobile / Tablet header cleanup
   Fixes the logo overflow (desktop -85px offset + white chip
   leaking onto small screens) and lays the header out as one
   clean row: logo left, hamburger (Main Menu) right.
   Applies where the hamburger shows (tablet & below).
   ============================================================ */
@media (max-width: 1024px) {

  /* Nav row -> single clean row */
  header.elementor-location-header .elementor-element-9b39c50 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    background-color: #ffffff !important;
  }

  /* Logo -> drop the -85px pull + white chip, size it neatly, keep left */
  header.elementor-location-header .elementor-element-eb9cf02 {
    margin-top: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: 170px !important;
    flex: 0 0 auto !important;   /* don't let flex shrink the logo */
    align-self: center !important;
    padding: 0 !important;
    position: static !important;
  }
  header.elementor-location-header .elementor-element-eb9cf02 img {
    height: 62px !important;
    max-height: 62px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
  }

  /* Remove the empty (hidden) left-menu column so spacing stays even */
  header.elementor-location-header .elementor-element-0dd6cfd {
    display: none !important;
  }

  /* Hamburger -> keep the widget IN FLOW (so its dropdown menu still
     renders full-width) but cap its column narrow and pin it right.
     Its column was 660px wide on tablet and overflowed the viewport,
     floating the icon toward the middle. */
/*    header.elementor-location-header .elementor-element-c774720 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 56px !important;
    margin-left: auto !important;   
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  } 
  header.elementor-location-header .elementor-element-0e4b0f5 {
    position: static !important;   
    width: auto !important;
    text-align: right !important;
  }
  header.elementor-location-header .elementor-element-0e4b0f5 .elementor-menu-toggle {
    margin-left: auto !important;
  } */

  /* Opened menu panel -> span the full header width (positioned against the
     nav row) instead of hugging the narrow toggle and clipping the labels. */
  header.elementor-location-header .elementor-element-0e4b0f5 .elementor-nav-menu--dropdown {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    text-align: left !important;
  }
  header.elementor-location-header .elementor-element-0e4b0f5 .elementor-nav-menu--dropdown a {
    text-align: left !important;
  }
	.elementor-menu-toggle {
position: relative;
  width: 100px;
  float: right;
}
}