/* Header Overlap CSS - Control Header Position Relative to Top Header */

/* ========================================
   HEADER OVERLAP CALCULATION
   ======================================== */

/* Calculate overlap: (top-header-height/2) - (main-header-height/2) */
.header-navigation {
  /* Default overlap calculation */
  margin-top: calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2) !important;
  
  /* Ensure proper positioning */
  position: relative !important;
  z-index: 1000 !important;
}

/* ========================================
   DIRECT HEADER LIFT CONTROL
   ======================================== */

/* Direct control over header lift/position */
.header-navigation {
  /* Override calculation with direct lift control */
  margin-top: var(--header-lift, calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2)) !important;
  
  /* Alternative: use transform for more precise control */
  transform: translateY(var(--header-lift-transform, 0px)) !important;
}

/* ========================================
   HEADER LIFT VARIABLES
   ======================================== */

/* Header lift control - positive values lift up, negative values push down */
.header-navigation {
  /* Direct margin control */
  --header-lift: var(--db-header-lift, calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2));
  
  /* Transform control for more precise positioning */
  --header-lift-transform: var(--db-header-lift-transform, 0px);
  
  /* Individual direction control */
  --header-lift-top: var(--db-header-lift-top, 0px);
  --header-lift-bottom: var(--db-header-lift-bottom, 0px);
}

/* ========================================
   TOP HEADER HEIGHT VARIABLES
   ======================================== */

/* Top header height control */
.header-top {
  height: var(--top-header-height, 60px) !important;
  min-height: var(--top-header-height, 60px) !important;
  max-height: var(--top-header-height, 60px) !important;
}

/* ========================================
   MAIN HEADER HEIGHT VARIABLES
   ======================================== */

/* Main header height control */
.header-navigation {
  height: var(--main-header-height, 100px) !important;
  min-height: var(--main-header-height, 100px) !important;
  max-height: var(--main-header-height, 100px) !important;
}

/* ========================================
   OVERLAP CALCULATIONS FOR DIFFERENT SIZES
   ======================================== */

/* Small top header (40px) with standard main header (100px) */
.header-navigation.header-overlap-small {
  margin-top: calc(40px / 2 - 100px / 2) !important; /* -30px */
}

/* Medium top header (60px) with standard main header (100px) */
.header-navigation.header-overlap-medium {
  margin-top: calc(60px / 2 - 100px / 2) !important; /* -20px */
}

/* Large top header (80px) with standard main header (100px) */
.header-navigation.header-overlap-large {
  margin-top: calc(80px / 2 - 100px / 2) !important; /* -10px */
}

/* Extra large top header (100px) with standard main header (100px) */
.header-navigation.header-overlap-extra-large {
  margin-top: calc(100px / 2 - 100px / 2) !important; /* 0px - no overlap */
}

/* ========================================
   RESPONSIVE OVERLAP ADJUSTMENTS
   ======================================== */

@media (max-width: 1200px) {
  .header-navigation {
    margin-top: var(--header-lift-tablet, calc(var(--top-header-height-tablet, 50px) / 2 - var(--main-header-height-tablet, 90px) / 2)) !important;
    transform: translateY(var(--header-lift-transform-tablet, 0px)) !important;
  }
}

@media (max-width: 768px) {
  .header-navigation {
    margin-top: var(--header-lift-mobile, calc(var(--top-header-height-mobile, 40px) / 2 - var(--main-header-height-mobile, 80px) / 2)) !important;
    transform: translateY(var(--header-lift-transform-mobile, 0px)) !important;
  }
}

/* ========================================
   LANGUAGE-SPECIFIC OVERLAP
   ======================================== */

/* Arabic/RTL Layout */
html[dir="rtl"] .header-navigation,
body[dir="rtl"] .header-navigation,
html[lang="ar"] .header-navigation,
body[lang="ar"] .header-navigation {
  margin-top: var(--header-lift, calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2)) !important;
  transform: translateY(var(--header-lift-transform, 0px)) !important;
}

/* English/LTR Layout */
html[dir="ltr"] .header-navigation,
body[dir="ltr"] .header-navigation,
html[lang="en"] .header-navigation,
body[lang="en"] .header-navigation {
  margin-top: var(--header-lift, calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2)) !important;
  transform: translateY(var(--header-lift-transform, 0px)) !important;
}

/* ========================================
   OVERLAP WITH BACKGROUND
   ======================================== */

/* Ensure proper background overlap */
.header-navigation {
  background: var(--header-background, #ffffff) !important;
  border-radius: var(--header-border-radius, 0) !important;
  box-shadow: var(--header-box-shadow, 0 2px 10px rgba(0,0,0,0.1)) !important;
}

/* ========================================
   TOP HEADER ADJUSTMENTS FOR OVERLAP
   ======================================== */

/* Adjust top header bottom margin to accommodate overlap */
.header-top {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ========================================
   CONTAINER FLUID OVERLAP
   ======================================== */

/* Ensure container fluid respects overlap */
.header-navigation .container-fluid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================
   Z-INDEX MANAGEMENT FOR OVERLAP
   ======================================== */

/* Top header behind main header */
.header-top {
  z-index: 999 !important;
  position: relative !important;
}

/* Main header above top header */
.header-navigation {
  z-index: 1000 !important;
  position: relative !important;
}