/* Logo Extreme Positioning CSS */

/* ========================================
   LOGO POSITIONING - LEFT (FIRST)
   ======================================== */

/* Logo should come FIRST (left side) */
.site-branding {
  order: 1 !important; /* Logo comes first (left side) */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-self: flex-start !important;
}

/* Override all existing logo positioning for left */
.site-branding[data-position="left"] {
  /* Extreme left positioning - align with top header boundaries */
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* Transform positioning */
  transform: translateX(0) !important;
  
  /* Position override */
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  
  /* Z-index to ensure visibility */
  z-index: 999999 !important;
  
  /* Flex properties - Logo comes FIRST (left side) */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  order: 1 !important; /* Logo comes first to appear on left */
  
  /* Force display */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* Align with top header boundaries */
  padding-left: 0 !important;
  padding-right: 15px !important;
}

/* ========================================
   LOGO POSITIONING - RIGHT
   ======================================== */

.site-branding[data-position="right"] {
  /* Extreme right positioning - align with top header boundaries */
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* Transform positioning */
  transform: translateX(0) !important;
  
  /* Position override */
  position: relative !important;
  right: 0 !important;
  left: auto !important;
  
  /* Z-index to ensure visibility */
  z-index: 999999 !important;
  
  /* Flex properties - Logo comes FIRST (left side) */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  order: 1 !important; /* Logo comes first to appear on left */
  
  /* Force display */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* Align with top header boundaries */
  padding-right: 0 !important;
  padding-left: 15px !important;
}

/* ========================================
   LOGO POSITIONING - CENTER
   ======================================== */

.site-branding[data-position="center"] {
  /* Force center positioning */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* Transform positioning */
  transform: translateX(0) !important;
  
  /* Position override */
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  
  /* Z-index to ensure visibility */
  z-index: 999999 !important;
  
  /* Flex properties - Logo comes FIRST (left side) */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  order: 1 !important; /* Logo always comes first to appear on left */
  
  /* Force display */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   NAVIGATION MENU POSITIONING - CENTER (SECOND)
   ======================================== */

/* Navigation menu should come in CENTER (second) */
.nav-menu {
  order: 2 !important; /* Navigation comes second (center) */
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  margin: 0 auto !important; /* Center the navigation */
  justify-self: center !important;
}

/* ========================================
   ICONS CONTAINER POSITIONING - RIGHT (LAST)
   ======================================== */

/* Icons container should come on RIGHT (last) */
.nav-buttons-container {
  order: 3 !important; /* Icons container comes last (right side) */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-self: flex-end !important;
}

/* ========================================
   FORCE ORDER OVERRIDES - ULTIMATE CONTROL
   ======================================== */

/* Force logo to be FIRST (left) - ULTIMATE OVERRIDE */
.primary-menu .site-branding {
  order: 1 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-self: flex-start !important;
}

/* Force navigation menu to be SECOND (center) - ULTIMATE OVERRIDE */
.primary-menu .nav-menu {
  order: 2 !important;
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  margin: 0 auto !important;
  justify-self: center !important;
}

/* Force icons container to be THIRD (right) - ULTIMATE OVERRIDE */
.primary-menu .nav-buttons-container {
  order: 3 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-self: flex-end !important;
}

/* ========================================
   CONTAINER OVERRIDES - ALIGN WITH TOP HEADER
   ======================================== */

/* Force container to align with top header boundaries */
.header-navigation .container-fluid {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow: visible !important;
  position: relative !important;
  
  /* Align with top header container */
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure primary menu aligns with top header */
.primary-menu {
  justify-content: space-between !important; /* Changed to space-between for proper distribution */
  align-items: center !important;
  overflow: visible !important;
  position: relative !important;
  min-height: 100px !important;
  
  /* Align with top header boundaries */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

@media (max-width: 1400px) {
  .site-branding[data-position="left"] {
    margin-left: 0 !important;
    transform: translateX(0) !important;
    left: 0 !important;
    padding-left: 0 !important;
  }
  
  .site-branding[data-position="right"] {
    margin-right: 0 !important;
    transform: translateX(0) !important;
    right: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 1200px) {
  .site-branding[data-position="left"] {
    margin-left: 0 !important;
    transform: translateX(0) !important;
    left: 0 !important;
    padding-left: 0 !important;
  }
  
  .site-branding[data-position="right"] {
    margin-right: 0 !important;
    transform: translateX(0) !important;
    right: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 992px) {
  .site-branding[data-position="left"] {
    margin-left: 0 !important;
    transform: translateX(0) !important;
    left: 0 !important;
    padding-left: 0 !important;
  }
  
  .site-branding[data-position="right"] {
    margin-right: 0 !important;
    transform: translateX(0) !important;
    right: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .site-branding[data-position="left"],
  .site-branding[data-position="right"],
  .site-branding[data-position="center"] {
    margin: 10px auto !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    order: 1 !important; /* Logo comes first on mobile */
    position: relative !important;
    top: auto !important;
    padding: 0 15px !important;
  }
  
  /* Mobile navigation order */
  .nav-menu {
    order: 2 !important; /* Navigation comes second on mobile */
  }
  
  .nav-buttons-container {
    order: 3 !important; /* Icons container comes last on mobile */
  }
}

/* ========================================
   LANGUAGE-SPECIFIC OVERRIDES - OPPOSITE POSITIONING
   ======================================== */

/* Arabic/RTL - Logo on LEFT when position is LEFT (opposite to icons container) */
html[dir="rtl"] .site-branding[data-position="left"],
body[dir="rtl"] .site-branding[data-position="left"],
html[lang="ar"] .site-branding[data-position="left"],
body[lang="ar"] .site-branding[data-position="left"] {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: translateX(0) !important;
  left: 0 !important;
  right: auto !important;
  padding-left: 0 !important;
  padding-right: 15px !important;
  order: 1 !important; /* Logo comes first to appear on left */
}

/* Arabic/RTL - Logo on RIGHT when position is RIGHT (opposite to icons container) */
html[dir="rtl"] .site-branding[data-position="right"],
body[dir="rtl"] .site-branding[data-position="right"],
html[lang="ar"] .site-branding[data-position="right"],
body[lang="ar"] .site-branding[data-position="right"] {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: translateX(0) !important;
  left: auto !important;
  right: 0 !important;
  padding-right: 0 !important;
  padding-left: 15px !important;
  order: 1 !important; /* Logo comes first to appear on left */
}

/* English/LTR - Logo on LEFT when position is LEFT (opposite to icons container) */
html[dir="ltr"] .site-branding[data-position="left"],
body[dir="ltr"] .site-branding[data-position="left"],
html[lang="en"] .site-branding[data-position="left"],
body[lang="en"] .site-branding[data-position="left"] {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: translateX(0) !important;
  left: 0 !important;
  right: auto !important;
  padding-left: 0 !important;
  padding-right: 15px !important;
  order: 1 !important; /* Logo comes first to appear on left */
}

/* English/LTR - Logo on RIGHT when position is RIGHT (opposite to icons container) */
html[dir="ltr"] .site-branding[data-position="right"],
body[dir="ltr"] .site-branding[data-position="right"],
html[lang="en"] .site-branding[data-position="right"],
body[lang="en"] .site-branding[data-position="right"] {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: translateX(0) !important;
  left: auto !important;
  right: 0 !important;
  padding-right: 0 !important;
  padding-left: 15px !important;
  order: 1 !important; /* Logo comes first to appear on left */
}

/* ========================================
   TOP HEADER ALIGNMENT
   ======================================== */

/* Ensure logo aligns with top header container boundaries */
.header-navigation {
  /* Align with top header */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Logo container alignment */
.site-branding {
  /* Ensure proper alignment */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Logo image alignment */
.site-branding .brand-logo {
  /* Ensure logo fits properly */
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ========================================
   NAVIGATION MENU CENTER POSITIONING
   ======================================== */

/* Navigation menu should be in CENTER (second) */
.primary-menu .nav-menu {
  margin: 0 auto !important;
  order: 2 !important; /* Navigation comes second (center) */
  justify-self: center !important;
}

/* When logo is on left, navigation in center */
.primary-menu:has(.site-branding[data-position="left"]) .nav-menu {
  margin: 0 auto !important;
  order: 2 !important; /* Navigation comes second (center) */
}

/* When logo is on right, navigation in center */
.primary-menu:has(.site-branding[data-position="right"]) .nav-menu {
  margin: 0 auto !important;
  order: 2 !important; /* Navigation comes second (center) */
}

/* When logo is on center, navigation in center */
.primary-menu:has(.site-branding[data-position="center"]) .nav-menu {
  margin: 0 auto !important;
  order: 2 !important; /* Navigation comes second (center) */
}