/* ===================================================== */
/* Salient Child Theme — Secondary Header Customizations */
/* ===================================================== */

/* ============================ */
/* VARIABLES — adjust only these */
:root {
  --logo-left: 40px;             /* Distance of logo from left edge */
  --menu-right: 2%;              /* Flexible spacing from right edge */
  --menu-link-gap: 1rem;         /* Gap between menu links */
  --logo-max-width: 100px;       /* Max width for desktop logo */
  --logo-tablet-width: 80px;     /* Width on tablets */
  --logo-mobile-width: 60px;     /* Width on mobile */
}

/* ============================ */
/* 1. Header container */
#header-secondary-outer {
  position: relative !important;
  padding-right: var(--menu-right) !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
}

#header-secondary-outer .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================ */
/* 2. Logo — fluid and adjustable */
#header-secondary-outer .nectar-center-text {
  position: absolute !important;
  left: var(--logo-left) !important; /* Adjustable horizontal position */
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  z-index: 9999;
  max-width: var(--logo-max-width);
  width: auto; /* Fluid */
}

#header-secondary-outer .nectar-center-text img {
  width: 100%; /* scales with container */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================ */
/* 3. Menu container */
#header-secondary-outer nav > ul.sf-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  padding-right: 0;
  margin-right: 150px; /* Reserve space for GTranslate */
  position: relative;
  z-index: 1000; /* ensures dropdowns appear above other elements */
  gap: var(--menu-link-gap);
}

/* Menu links spacing */
#header-secondary-outer nav > ul.sf-menu > li:not(.menu-item-gtranslate) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative; /* necessary for dropdowns */
  z-index: 1000;
}

/* Submenu dropdowns above everything */
#header-secondary-outer nav ul.sf-menu li ul.sub-menu {
  position: absolute !important;
  z-index: 2000 !important;
}

/* GTranslate — flush right */
#header-secondary-outer .menu-item-gtranslate {
  margin-left: auto !important; /* keep it right */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px; /* prevent overlap */
  position: relative !important;
  z-index: 9999; /* above menu links */
}

/* ============================ */
/* 4. Responsive adjustments */
@media (max-width: 991px) {
  #header-secondary-outer .nectar-center-text {
    max-width: var(--logo-tablet-width);
    /* Keep current left positioning if desired */
  }
  #header-secondary-outer nav > ul.sf-menu {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-right: 0; /* tablet: let it wrap naturally */
  }
}

@media (max-width: 767px) {
  #header-secondary-outer .nectar-center-text {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: var(--logo-mobile-width);
  }

  #header-secondary-outer nav > ul.sf-menu {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
    margin-right: 0;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  #header-secondary-outer .nectar-center-text img {
    width: var(--logo-mobile-width) !important;
  }
  .secondary-header-items,
  .secondary-header-text {
    display: none !important;
  }
}

/* ============================ */
/* 5. GTranslate dropdown fixes */
.menu-item-gtranslate,
.menu-item-gtranslate > div[id^="gtranslate_menu_wrapper"] {
    overflow: visible !important;
}

.menu-item-gtranslate select.goog-te-combo {
    position: relative !important;
    z-index: 999999 !important;
}

.goog-te-menu-frame,
.goog-te-menu-frame.skiptranslate,
.goog-te-menu2 {
    top: 100% !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
}

/* Ensure header doesn't clip dropdowns */
#header-secondary-outer,
#header-secondary-outer .container,
#header-secondary-outer nav,
#header-secondary-outer nav > ul.sf-menu {
    overflow: visible !important;
}