/**
 * Liquid Glass Header Effect
 * Makes the entire header row (logo + menu + button) look like one glassmorphism pill
 */

/* CSS Variables for Liquid Glass Effect */
:root {
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #224;
  --c-action: #0052f5;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;
}

/* Remove header element drop shadow when stuck */
body .main-header.is-stuck,
body .main-header,
body .site-header.main-header.is-stuck,
body .site-header.main-header,
.main-header.is-stuck,
.main-header,
.site-header.main-header.is-stuck,
.site-header.main-header {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Make header section background transparent - only pill visible */
/* Override custom frosted glass CSS that's being applied to the section */
/* Using higher specificity to override theme's custom CSS */
body .elementor-634 .elementor-element.elementor-element-b08d498.elementor-section,
body .elementor-634 .elementor-element.elementor-element-b08d498,
.elementor-element-b08d498.elementor-section,
.elementor-element-b08d498 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 30px 0 0 0 !important;
  margin: 0 !important;
  position: static !important;
}

/* When header becomes sticky/fixed - reduce padding */
body .elementor-634 .elementor-element.elementor-element-b08d498.elementor-section.lqd-is-stuck,
.elementor-element-b08d498.elementor-section.lqd-is-stuck {
  padding: 10px 0 0 0 !important;
}

body .elementor-634 .elementor-element.elementor-element-b08d498 .elementor-container,
.elementor-element-b08d498 .elementor-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

body .elementor-634 .elementor-element.elementor-element-b08d498 > .elementor-background-overlay,
.elementor-element-b08d498 > .elementor-background-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Make column background transparent and centered */
body .elementor-634 .elementor-element.elementor-element-b626fee.elementor-column,
.elementor-element-b626fee.elementor-column {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Main glass pill - wraps content tightly */
body .elementor-634 .elementor-element.elementor-element-b626fee > .elementor-widget-wrap.elementor-element-populated,
.elementor-element-b626fee > .elementor-widget-wrap.elementor-element-populated {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px 10px !important;
  margin: 0 !important;
  width: auto !important;
  border-radius: 99em !important;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent) !important;
  backdrop-filter: blur(8px) saturate(var(--saturation)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1) !important;
}

/* Remove individual backgrounds from logo, menu, button containers */
.elementor-element-da1d031,
.elementor-element-5445ed5,
.elementor-element-066da3d {
  background: none !important;
}

/* Logo - Clean styling */
.module-logo {
  padding: 8px 16px !important;
  margin: 0 !important;
}

.module-logo .navbar-brand {
  transition: transform 200ms cubic-bezier(0.5, 0, 0, 1);
}

.module-logo:hover .logo-default,
.navbar-brand:hover img {
  transform: scale(1.05);
}

/* Remove default menu backgrounds */
.main-nav,
#primary-nav.main-nav {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  position: relative !important;
}

/* Sliding background indicator */
#primary-nav.main-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--slider-left, 0);
  width: var(--slider-width, 0);
  height: 52px;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: all 400ms cubic-bezier(1, 0, 0.4, 1);
  z-index: -1;
  opacity: 1;
}

/* Menu Items - Like switcher options */
#primary-nav.main-nav > li {
  position: relative;
  transition: all 160ms;
  list-style: none;
  margin: 0;
  z-index: 1;
}

/* Menu Links - Like switcher buttons */
#primary-nav.main-nav > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 99em;
  color: var(--c-content) !important;
  text-decoration: none;
  transition: all 160ms;
  opacity: 1;
}

/* Hover Effect - Only cursor change, slider handles visual feedback */
#primary-nav.main-nav > li > a:hover {
  cursor: pointer;
}

/* Active Menu Item - No background (handled by ::before slider) */
#primary-nav.main-nav > li.current-menu-item > a,
#primary-nav.main-nav > li.current_page_item > a {
  color: var(--c-content) !important;
  background: none !important;
  cursor: auto;
}

#primary-nav.main-nav > li.current-menu-item > a:hover,
#primary-nav.main-nav > li.current_page_item > a:hover {
  /* No transform needed */
}

/* Link Badge (New) - Glass effect */
.link-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.7em;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-action) 20%, transparent);
  color: var(--c-action);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Gradient Word Effect */
.gradient-word {
  background: linear-gradient(135deg, var(--c-action) 0%, #ff48a9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}

/* Contact Button - Inside the pill, simplified styling */
.elementor-element-066da3d .elementor-button,
.elementor-element-066da3d .btn {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 99em !important;
  padding: 0 16px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 160ms !important;
  box-shadow: none !important;
}

.elementor-element-066da3d .elementor-button:hover,
.elementor-element-066da3d .btn:hover {
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
}

/* Tablet/iPad - Show Desktop Menu (matches Hub theme breakpoints) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Hide mobile menu on tablets */
  .lqd-mobile-sec {
    display: none !important;
  }

  /* Keep top announcement bar hidden on tablets */
  .elementor-element-829848a.elementor-hidden-tablet {
    display: none !important;
  }

  /* Force show desktop header navigation on tablets */
  .elementor-element-b08d498.elementor-hidden-tablet {
    display: flex !important;
  }

  /* Force visibility of desktop navigation container */
  .elementor-element-b626fee.elementor-hidden-tablet {
    display: flex !important;
  }

  /* Show navigation widgets */
  .elementor-element-da1d031.elementor-hidden-tablet,
  .elementor-element-5445ed5.elementor-hidden-tablet,
  .elementor-element-066da3d.elementor-hidden-tablet {
    display: flex !important;
  }

  /* Glass pill sizing for tablets - 15% larger than previous */
  .elementor-element-b626fee > .elementor-widget-wrap.elementor-element-populated {
    gap: 7px !important;
    padding: 9px 12px 9px !important;
  }

  /* Menu items - 15% larger */
  #primary-nav.main-nav > li > a {
    padding: 0 12px !important;
    font-size: 15px !important;
    height: 53px !important;
  }

  /* Slider height - 15% larger */
  #primary-nav.main-nav::before {
    height: 53px !important;
  }

  /* Logo - 15% larger */
  .module-logo {
    padding: 7px 12px !important;
  }

  .module-logo img {
    max-height: 46px !important;
  }

  /* Button - 15% larger */
  .elementor-element-066da3d .elementor-button,
  .elementor-element-066da3d .btn {
    padding: 0 12px !important;
    height: 53px !important;
    font-size: 15px !important;
  }
}

/* Mobile Responsive - Only for phones */
@media (max-width: 767px) {
  .elementor-element-b626fee > .elementor-widget-wrap {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 90% !important;
  }

  #primary-nav.main-nav {
    flex-direction: column !important;
    width: 100% !important;
  }

  #primary-nav.main-nav > li > a {
    padding: 12px 16px !important;
    height: auto !important;
    width: 100% !important;
  }

  .elementor-element-066da3d .elementor-button,
  .elementor-element-066da3d .btn {
    width: 100% !important;
  }
}