/* Fixed Column Layout CSS - Ensures consistent column order across all languages */

/* ========================================
   FORCE GRID LAYOUT
   ======================================== */

/* Override any existing layout */
.header-navigation .primary-menu {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 60px !important;
}

/* ========================================
   COLUMN DEFINITIONS
   ======================================== */

/* Column 1: Logo - Always Left */
.header-left-section {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 1 !important;
  justify-self: start !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  flex-shrink: 0 !important;
}

/* Column 2: Menu - Always Center */
.header-center-section {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 2 !important;
  justify-self: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 40px !important;
  flex: 1 !important;
  text-align: center !important;
}

/* Ensure nav-menu is centered */
.header-center-section .nav-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* Column 3: Icons Container - Always Right */
.header-right-section {
  grid-column: 3 !important;
  grid-row: 1 !important;
  order: 3 !important;
  justify-self: end !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  flex-shrink: 0 !important;
}

/* ========================================
   LANGUAGE OVERRIDE
   ======================================== */

/* Override all language-based positioning */
html[dir="rtl"] .header-navigation .primary-menu,
body[dir="rtl"] .header-navigation .primary-menu,
html[lang="ar"] .header-navigation .primary-menu,
body[lang="ar"] .header-navigation .primary-menu,
html[dir="ltr"] .header-navigation .primary-menu,
body[dir="ltr"] .header-navigation .primary-menu,
html[lang="en"] .header-navigation .primary-menu,
body[lang="en"] .header-navigation .primary-menu {
  flex-direction: unset !important;
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important;
}

/* Force menu items to display in correct order regardless of language */
html[dir="rtl"] .main-menu ul,
body[dir="rtl"] .main-menu ul,
html[lang="ar"] .main-menu ul,
body[lang="ar"] .main-menu ul,
html[dir="ltr"] .main-menu ul,
body[dir="ltr"] .main-menu ul,
html[lang="en"] .main-menu ul,
body[lang="en"] .main-menu ul {
  flex-direction: row !important;
  justify-content: center !important;
  text-align: center !important;
  direction: ltr !important;
}

/* Force all language variants to use the same column order */
html[dir="rtl"] .header-left-section,
body[dir="rtl"] .header-left-section,
html[lang="ar"] .header-left-section,
body[lang="ar"] .header-left-section,
html[dir="ltr"] .header-left-section,
body[dir="ltr"] .header-left-section,
html[lang="en"] .header-left-section,
body[lang="en"] .header-left-section {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 1 !important;
  justify-self: start !important;
}

html[dir="rtl"] .header-center-section,
body[dir="rtl"] .header-center-section,
html[lang="ar"] .header-center-section,
body[lang="ar"] .header-center-section,
html[dir="ltr"] .header-center-section,
body[dir="ltr"] .header-center-section,
html[lang="en"] .header-center-section,
body[lang="en"] .header-center-section {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 2 !important;
  justify-self: center !important;
}

html[dir="rtl"] .header-right-section,
body[dir="rtl"] .header-right-section,
html[lang="ar"] .header-right-section,
body[lang="ar"] .header-right-section,
html[dir="ltr"] .header-right-section,
body[dir="ltr"] .header-right-section,
html[lang="en"] .header-right-section,
body[lang="en"] .header-right-section {
  grid-column: 3 !important;
  grid-row: 1 !important;
  order: 3 !important;
  justify-self: end !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile Menu Toggle - Hidden by default */
.navbar-toggler {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop: Always show main menu, never show mobile menu */
@media (min-width: 769px) {
  .nav-menu {
    display: block !important;
  }
  
  .nav-menu.mobile-active {
    display: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  
  .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  
  .navbar-close {
    display: none !important;
  }
  
  /* Reset mobile menu styles on desktop */
  .nav-menu.mobile-active .main-menu {
    display: block !important;
    position: static !important;
    z-index: auto !important;
  }
  
  .nav-menu.mobile-active .main-menu ul {
    flex-direction: row !important;
    gap: 5px !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item {
    margin: 0 !important;
    width: auto !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item a {
    display: block !important;
    padding: 10px 15px !important;
    border-radius: 50px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.3s ease !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item a:hover {
    background: rgba(230, 46, 55, 0.1) !important;
    color: #e62e37 !important;
    border-color: transparent !important;
  }
  
  .nav-menu.mobile-active .sub-menu {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    background: white !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
}

/* Main menu - Always visible on desktop */
.nav-menu {
  display: block !important;
}

/* Mobile menu - Hidden on desktop by default */
.nav-menu.mobile-active {
  display: none !important;
}

@media (max-width: 768px) {
  .header-navigation .primary-menu {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
  }
  
  .header-left-section {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    justify-self: center !important;
    margin: 10px 40px !important;
  }
  
  .header-center-section {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    justify-self: center !important;
    margin: 10px 40px !important;
  }
  
  .header-right-section {
    grid-column: 1 !important;
    grid-row: 3 !important;
    order: 3 !important;
    justify-self: center !important;
    margin: 10px 40px !important;
  }
  
  /* Show mobile menu toggle on small screens */
  .navbar-toggler {
    display: flex !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 25px !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1000 !important;
  }
  
  .navbar-toggler span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #333 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar-toggler:hover span {
    background-color: #e62e37 !important;
  }
  
  /* Hide main menu on mobile */
  .nav-menu {
    display: none !important;
  }
  
  /* Close button for mobile menu */
  .navbar-close {
    display: none !important;
  }
  
  .nav-menu.mobile-active .navbar-close {
    display: block !important;
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    font-size: 24px !important;
    color: #666 !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    background: white !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  .nav-menu.mobile-active .navbar-close:hover {
    color: #e62e37 !important;
    background: #f8f9fa !important;
  }
  
  /* Show mobile menu when toggled */
  .nav-menu.mobile-active {
    display: block !important;
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border-radius: 0 0 15px 15px !important;
    padding: 20px !important;
    z-index: 99999 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure mobile menu is above all other elements */
  .nav-menu.mobile-active .main-menu {
    display: block !important;
    position: relative !important;
    z-index: 100000 !important;
  }
  
  /* Overlay background when mobile menu is active */
  .nav-menu.mobile-active::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: -1 !important;
  }
  
  .nav-menu.mobile-active .main-menu ul {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item {
    margin: 0 !important;
    width: 100% !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item a {
    display: block !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease !important;
  }
  
  .nav-menu.mobile-active .main-menu .menu-item a:hover {
    background: #e62e37 !important;
    color: white !important;
    border-color: #e62e37 !important;
  }
  
  /* Submenu styling for mobile */
  .nav-menu.mobile-active .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-top: 10px !important;
    padding-left: 20px !important;
    border-left: 2px solid #e62e37 !important;
  }
  
  .nav-menu.mobile-active .sub-menu li {
    margin: 8px 0 !important;
  }
  
  .nav-menu.mobile-active .sub-menu a {
    background: transparent !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
    text-align: left !important;
  }
}

@media (max-width: 576px) {
  .header-left-section,
  .header-center-section,
  .header-right-section {
    margin: 5px 20px !important;
  }
  
  .header-navigation .primary-menu {
    gap: 5px !important;
  }
}

/* ========================================
   ULTIMATE OVERRIDE
   ======================================== */

/* Ensure no other CSS can override our layout */
.header-navigation .primary-menu {
  direction: unset !important;
  text-align: unset !important;
  flex-direction: unset !important;
}

/* Ultimate mobile menu toggle hide on desktop */
@media (min-width: 769px) {
  .navbar-toggler,
  .navbar-toggler *,
  .navbar-toggler span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Override any conflicting display properties */
.header-navigation .primary-menu {
  display: grid !important;
}

/* Force all child elements to respect grid */
.header-navigation .primary-menu > * {
  display: flex !important;
}

/* Force menu items to display in correct order */
.main-menu ul {
  flex-direction: row !important;
  justify-content: center !important;
  text-align: center !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.main-menu .menu-item {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.main-menu .menu-item a {
  text-align: center !important;
  direction: ltr !important;
}

/* ========================================
   HERO SECTION SPACING
   ======================================== */

/* Add spacing between header and hero section */
.hero-area,
.hero-section,
.hero-slider-one,
.single-hero-slider,
.hero-wrapper-two {
  margin-top: 20px !important;
}

/* Ensure proper spacing for all hero variants */
.hero-area .hero-slider-one .single-hero-slider,
.hero-wrapper-two,
.hero-section-new {
  margin-top: 20px !important;
}

/* ========================================
   DEBUG STYLES (can be removed in production)
   ======================================== */

/* Uncomment these lines for debugging */
/*
.header-left-section {
  background: rgba(255, 0, 0, 0.1) !important;
}

.header-center-section {
  background: rgba(0, 255, 0, 0.1) !important;
}

.header-right-section {
  background: rgba(0, 0, 255, 0.1) !important;
}
*/