/* Fundamental KSA - Responsive & Mobile Menu Fixes */

/* Ensure viewport and base responsive */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, embed, object, video { max-width: 100%; height: auto; }

/* Tablet & Mobile: Show mobile header (with hamburger), hide desktop header */
@media (max-width: 1024px) {
  /* Desktop header hidden on tablet and mobile */
  header .elementor-element.elementor-element-6b5521e,
  header .elementor-element-6b5521e {
    display: none !important;
  }
  /* Mobile header visible on tablet and mobile */
  header .elementor-element.elementor-element-68905b4,
  header .elementor-element-68905b4 {
    display: block !important;
  }
}

/* Desktop: Show desktop header, hide mobile header */
@media (min-width: 1025px) {
  header .elementor-element.elementor-element-68905b4,
  header .elementor-element-68905b4 {
    display: none !important;
  }
  header .elementor-element.elementor-element-6b5521e,
  header .elementor-element-6b5521e {
    display: block !important;
  }
}

/* Nav menu: ensure hamburger visible, main menu hidden, dropdown works */
@media (max-width: 1024px) {
  /* Always hide the horizontal main menu on tablet/mobile */
  .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main,
  .elementor-nav-menu--toggle .elementor-nav-menu--main,
  header .elementor-nav-menu--main {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }
  .elementor-widget-nav-menu {
    position: relative;
  }
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
  .elementor-nav-menu--toggle .elementor-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
    color: #0a303a;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
  }
  /* Dropdown: hide with max-height/transform (Elementor-style), NOT display:none */
  .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown.elementor-nav-menu__container,
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    max-height: 0 !important;
    overflow: hidden !important;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  }
  .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container,
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    --menu-height: 100vh;
    display: block !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto;
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100001;
    padding: 20px;
    box-sizing: border-box;
  }
  /* No backdrop in CSS - JS adds body class; backdrop via JS-inserted div so we can click-to-close */
}

/* Backdrop when mobile menu is open (JS adds .fdm-menu-open to body and inserts .fdm-menu-backdrop) */
.fdm-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100000;
  cursor: pointer;
}

/* Panel when moved to body: only positioning so theme/Elementor styles apply */
.fdm-mobile-dropdown-panel {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  width: 100%;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 100001;
  padding: 20px;
  box-sizing: border-box;
}
/* No custom menu item styling – .elementor-67 .elementor-element-2282538 .elementor-nav-menu--dropdown rules from the page handle it */

body.fdm-menu-open {
  overflow: hidden !important;
}

/* Mobile header layout fix */
@media (max-width: 1024px) {
  header .elementor-element-68905b4 .elementor-container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  header .elementor-element-68905b4 .elementor-column {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* First column: logo + hamburger side by side */
  header .elementor-element-68905b4 .elementor-element-acdae18 .elementor-widget-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* General responsive layout fixes */
@media (max-width: 768px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .elementor-col-50 {
    width: 100%;
  }
  .elementor-col-33 {
    width: 100%;
  }
}

/* Don’t override theme dropdown styling – let .elementor-67 .elementor-element-2282538 rules from the page apply */