/******** JR — CLEAN SLATE (Elementor popup + logo only) ********/

/* 1) ELEMENTOR POPUP — contain & center on small screens */
@media (max-width: 1024px){
  /* The popup box */
  .elementor-popup-modal{
    width: 92vw !important;
    max-width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;      /* nothing escapes the box */
  }
  /* Inner content: vertical scroll, no side scroll, safe space for CTA */
  .elementor-popup-modal .dialog-message,
  .elementor-popup-modal .dialog-widget-content{
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 16px 120px !important;  /* keeps Enter button above chat */
    box-sizing: border-box !important;
  }
  /* Normalize Elementor structures inside the popup to 100% width */
  .elementor-popup-modal .elementor-section,
  .elementor-popup-modal .elementor-container,
  .elementor-popup-modal .elementor-column,
  .elementor-popup-modal .elementor-widget-wrap,
  .elementor-popup-modal .elementor-widget{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Images never overflow or stretch weirdly */
  .elementor-popup-modal img,
  .elementor-popup-modal .elementor-widget-image img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transform: none !important;  /* if motion effects applied */
  }
}

/* 2) LOGO — sane size on mobile (adjust height if needed) */
@media (max-width: 768px){
  header img,
  .site-logo img,
  .custom-logo-link img{
    max-height: 40px !important;  /* tweak 36–48 if you prefer */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* 3) CHAT BALLOON — hide big welcome popover on small screens (keep icon) */
@media (max-width: 1024px){
  .crisp-client .cc-message,
  #tidio-chat [class*="message-bubble"],
  .tawk-min-container .tawk-bubble,
  [class*="intercom-"] [class*="tooltip"],
  [class*="hubspot"] [class*="welcome"]{
    display: none !important;
  }
}

/* (Optional) If hero decor still overlaps on phone, UNCOMMENT this:
@media (max-width: 768px){
  .entry-header [style*="position:absolute"],
  .wp-block-cover [style*="position:absolute"],
  [class*="watermark"], [class*="bg-title"], [class*="ghost"],
  [class*="sunflower"], img[alt*="sunflower"]{ display:none !important; }
}
*/
@media (min-width:769px) and (max-width:1024px){
  header img,.site-logo img,.custom-logo-link img{max-height:60px!important;height:auto!important;width:auto!important}
}

/* Remove right-side white gap on all devices */
html, body {
  overflow-x: hidden !important;
}

/* Clamp all major wrappers to viewport width */
.site, .wp-site-blocks, .site-content, .content-area,
.entry-content, .container, .wrap,
.elementor-section, .elementor-container, .elementor-column,
.elementor-widget-wrap, .pum-container, .elementor-popup-modal {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* ===== MODIFIED: scope absolute-position clipping to Elementor popups only ===== */
.elementor-popup-modal [style*="position:absolute"] {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* =========================
   ADDED: Machic header/menu fixes
   ========================= */

/* Keep header above content and allow submenus to escape */
.site-header,
.header,
.header-main,
.header-bottom,
.site-header .container,
.site-header .row {
  position: relative !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

/* Ensure dropdown submenus are visible and layered on top */
.site-header .main-navigation ul ul,
.header-bottom .main-navigation ul ul,
.menu > li > .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  display: none;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  z-index: 10000 !important;
  min-width: 220px;
}

/* Show submenu on hover */
.site-header .main-navigation ul li:hover > ul,
.header-bottom .main-navigation ul li:hover > ul,
.menu > li:hover > .sub-menu {
  display: block !important;
}

/* If sticky header is used, keep it on top */
.sticky-header,
.elementor-sticky--effects {
  z-index: 99999 !important;
}
/* ---------- HEADER CLEANUP (Machic Child Theme) ---------- */

/* 1. Resize logo and reduce header height */
.site-header .site-logo img,
header .custom-logo-link img {
  max-height: 80px !important;    /* Try 70–90px if you want smaller/larger */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 2. Center the main navigation */
.site-header .main-navigation {
  display: flex !important;
  justify-content: center !important;
  flex: 1 !important;
  margin: 0 auto !important;
}

/* 3. Make sure menu items don’t stick to the left */
.site-header .main-navigation ul {
  justify-content: center !important;
  text-align: center !important;
}

/* 4. Align search bar and icons neatly on the right */
.header-main .header-right,
.header-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* 5. Tweak padding for better spacing */
.site-header .container,
.header-main .container {
  align-items: center !important;
  padding: 10px 40px !important; /* adjust side spacing */
}

/* 6. Prevent the header from being too tall on scroll */
.sticky-header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/* Machic header visual balance */
.site-header .site-logo img {
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
}

.site-header .main-navigation {
  text-align: center !important;
  justify-content: center !important;
}

.header-main .container {
  align-items: center !important;
  padding: 10px 40px !important;
}