@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Navigation scroll effects for Elementor sticky navigation */
  .schmuckstars-nav-transition {
    @apply transition-all duration-300 ease-in-out;
  }

  /* Default state - at top of page (transparent/original Elementor styling) */
  .schmuckstars-nav-top {
    /* Let Elementor's default styling take precedence when at top */
  }

  /* Scrolled state - white background with dark content */
  .schmuckstars-nav-scrolled {
    @apply !bg-white;
  }

  /* Ultra-specific targeting to override Elementor's exact CSS rule - target sticky active element */
  .elementor-17 .elementor-element.elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled:not(.elementor-motion-effects-element-type-background),
  .elementor-17 .elementor-element.elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled.e-con,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled.e-con-boxed,
  /* Also target non-homepage static white nav (without sticky--active requirement) */
  .elementor-17 .elementor-element.elementor-element-8090ee8.schmuckstars-nav-scrolled:not(.elementor-motion-effects-element-type-background),
  .elementor-17 .elementor-element.elementor-element-8090ee8.schmuckstars-nav-scrolled > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled.e-con,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled.e-con-boxed,
  /* Mobile navigation - elements hidden on desktop */
  .elementor-17 .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled:not(.elementor-motion-effects-element-type-background),
  .elementor-17 .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled.e-con,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled.e-con-boxed,
  .elementor-element.elementor-hidden-desktop.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled,
  .elementor-element.elementor-hidden-desktop.elementor-sticky.schmuckstars-nav-scrolled {
    background-color: white !important;
    background-image: none !important;
    background: white !important;
    background-attachment: initial !important;
    background-blend-mode: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
  }

  /* Target the nested containers inside the main navigation */
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .e-con-inner,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .e-con.e-child,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .elementor-element-bcaaee3,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .elementor-element-ae6e932,
  .elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .elementor-element-4128e4a,
  /* Also target non-homepage static white nav nested containers */
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .e-con-inner,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .e-con.e-child,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .elementor-element-bcaaee3,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .elementor-element-ae6e932,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .elementor-element-4128e4a,
  /* Mobile navigation nested containers */
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .e-con-inner,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .e-con.e-child,
  .elementor-element.elementor-hidden-desktop.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .e-con-inner,
  .elementor-element.elementor-hidden-desktop.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled .e-con.e-child {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
  }

  /* Force the main container background specifically */
  .elementor-element-8090ee8.schmuckstars-nav-scrolled[data-settings*="background_background"] {
    background-color: white !important;
    background-image: none !important;
    background: white !important;
  }

  /* Specific targeting for Elementor containers and sections when scrolled */
  .schmuckstars-nav-scrolled.e-con,
  .schmuckstars-nav-scrolled.e-con-boxed,
  .schmuckstars-nav-scrolled.elementor-element,
  .schmuckstars-nav-scrolled.elementor-sticky,
  .schmuckstars-nav-scrolled.elementor-sticky--active {
    @apply !bg-white;
    background-color: white !important;
  }

  /* Override Elementor's transparent/custom background when scrolled */
  .schmuckstars-nav-scrolled .elementor-background-overlay {
    display: none !important;
  }

  /* Style navigation links when scrolled */
  .schmuckstars-nav-scrolled .elementor-nav-menu--main .elementor-item,
  .schmuckstars-nav-scrolled .elementor-nav-menu .elementor-item,
  .schmuckstars-nav-scrolled .elementor-nav-menu a {
    @apply !text-gray-800;
  }

  .schmuckstars-nav-scrolled .elementor-nav-menu--main .elementor-item:hover,
  .schmuckstars-nav-scrolled .elementor-nav-menu .elementor-item:hover,
  .schmuckstars-nav-scrolled .elementor-nav-menu a:hover {
    @apply !text-primary;
  }

  /* Style logo/branding when scrolled */
  .schmuckstars-nav-scrolled .elementor-heading-title,
  .schmuckstars-nav-scrolled .elementor-image img,
  .schmuckstars-nav-scrolled .elementor-icon,
  .schmuckstars-nav-scrolled .elementor-widget-image img {
    @apply transition-all duration-300;
  }

  /* Style buttons when scrolled */
  .schmuckstars-nav-scrolled .elementor-button,
  .schmuckstars-nav-scrolled .elementor-button-link {
    @apply !text-gray-800 !border-gray-800;
  }

  .schmuckstars-nav-scrolled .elementor-button:hover,
  .schmuckstars-nav-scrolled .elementor-button-link:hover {
    @apply !bg-primary !text-white !border-primary;
  }

  /* Handle mobile menu icon when scrolled - make it dark on white background */
  .schmuckstars-nav-scrolled .elementor-menu-toggle,
  .schmuckstars-nav-scrolled .elementor-menu-toggle i,
  .schmuckstars-nav-scrolled .elementor-menu-toggle svg,
  .schmuckstars-nav-scrolled .elementor-menu-toggle .eicon,
  .schmuckstars-nav-scrolled .fa-bars,
  .schmuckstars-nav-scrolled .eicon-menu-bar {
    @apply !text-gray-800;
    color: #374151 !important;
    fill: #374151 !important;
  }

  /* Target specific mobile hamburger icon elements */
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle i,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle svg,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle .eicon,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .fa-bars,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .eicon-menu-bar {
    @apply !text-gray-800;
    color: #374151 !important;
    fill: #374151 !important;
  }

  /* Force override inline SVG fill attributes in mobile hamburger menu */
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle svg path,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle__icon--open svg path,
  .elementor-element.elementor-hidden-desktop.schmuckstars-nav-scrolled .elementor-menu-toggle__icon--close svg path {
    fill: #374151 !important;
  }

  /* Target the specific mobile navigation element by ID */
  .elementor-element-4bd3d73.schmuckstars-nav-scrolled .elementor-menu-toggle svg path,
  .elementor-element-4bd3d73.schmuckstars-nav-scrolled .elementor-menu-toggle__icon--open svg path,
  .elementor-element-4bd3d73.schmuckstars-nav-scrolled .elementor-menu-toggle__icon--close svg path {
    fill: #374151 !important;
  }

  /* Style any additional navigation elements */
  .schmuckstars-nav-scrolled .elementor-widget-nav-menu,
  .schmuckstars-nav-scrolled .elementor-widget-image,
  .schmuckstars-nav-scrolled .elementor-widget-heading,
  .schmuckstars-nav-scrolled .elementor-widget-button {
    @apply transition-all duration-300;
  }

  /* Ensure smooth transition for background */
  .elementor-sticky--active.schmuckstars-nav-transition,
  .elementor-sticky.schmuckstars-nav-transition,
  [data-elementor-type="header"].schmuckstars-nav-transition,
  .elementor-location-header.schmuckstars-nav-transition,
  .e-con.schmuckstars-nav-transition {
    @apply transition-all duration-300 ease-in-out;
  }

  /* Additional specificity for Elementor elements */
  .schmuckstars-nav-scrolled.elementor-sticky--active,
  .schmuckstars-nav-scrolled.elementor-sticky,
  .schmuckstars-nav-scrolled[data-elementor-type="header"],
  .schmuckstars-nav-scrolled.elementor-location-header {
    @apply !bg-white;
    background-color: white !important;
  }

  /* Force white background for modern Elementor containers */
  .schmuckstars-nav-scrolled.e-con.e-parent,
  .schmuckstars-nav-scrolled.e-con-boxed,
  .schmuckstars-nav-scrolled.elementor-element {
    background-color: white !important;
    background-image: none !important;
    background-gradient: none !important;
  }

  /* Override any transparent backgrounds when scrolled */
  .schmuckstars-nav-scrolled .elementor-container,
  .schmuckstars-nav-scrolled .elementor-section,
  .schmuckstars-nav-scrolled .elementor-column {
    background-color: transparent !important;
  }

  /* Ensure proper z-index for shadow */
  .schmuckstars-nav-scrolled {
    z-index: 9999 !important;
  }

  /* Additional text elements that might need color changes */
  .schmuckstars-nav-scrolled .elementor-widget-heading h1,
  .schmuckstars-nav-scrolled .elementor-widget-heading h2,
  .schmuckstars-nav-scrolled .elementor-widget-heading h3,
  .schmuckstars-nav-scrolled .elementor-widget-heading h4,
  .schmuckstars-nav-scrolled .elementor-widget-heading h5,
  .schmuckstars-nav-scrolled .elementor-widget-heading h6,
  .schmuckstars-nav-scrolled .elementor-heading-title {
    @apply !text-gray-800;
  }

  /* Handle dropdowns and submenus */
  .schmuckstars-nav-scrolled .elementor-nav-menu--dropdown .elementor-item,
  .schmuckstars-nav-scrolled .sub-menu .elementor-item {
    @apply !text-gray-800 !bg-white;
  }

  .schmuckstars-nav-scrolled .elementor-nav-menu--dropdown .elementor-item:hover,
  .schmuckstars-nav-scrolled .sub-menu .elementor-item:hover {
    @apply !text-primary !bg-gray-50;
  }

  /* Handle different navigation layouts */
  .schmuckstars-nav-scrolled.elementor-section,
  .schmuckstars-nav-scrolled .elementor-section.elementor-section-boxed > .elementor-container,
  .schmuckstars-nav-scrolled .elementor-section.elementor-section-full_width > .elementor-container {
    @apply !bg-white;
    background-color: white !important;
  }

  /* Extra specificity for stubborn Elementor backgrounds */
  .schmuckstars-nav-scrolled.elementor-element.elementor-sticky--active.e-con {
    background-color: white !important;
    background-image: none !important;
    background: white !important;
  }

  /* Override any CSS variables that might control background */
  .schmuckstars-nav-scrolled {
    --e-con-background-color: white !important;
    --elementor-background-color: white !important;
  }

  /* Nuclear option: Override the exact problematic Elementor CSS rule - target sticky active element */
  .elementor-17 .elementor-element.elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled:not(.elementor-motion-effects-element-type-background) {
    background-color: white !important;
  }

  .elementor-17 .elementor-element.elementor-element-8090ee8.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: white !important;
  }

  /* Double check with alternative selector pattern - include all the classes */
  body .elementor-17 .elementor-element.elementor-element-8090ee8.elementor-hidden-tablet.elementor-hidden-mobile.e-flex.e-con-boxed.e-con.e-parent.elementor-sticky.elementor-sticky--active.schmuckstars-nav-scrolled {
    background-color: white !important;
    background-image: none !important;
    background: white !important;
  }

  /* Nuclear option - override everything for the specific element */
  .elementor-element-8090ee8.schmuckstars-nav-scrolled * {
    background-color: inherit !important;
  }

  .elementor-element-8090ee8.schmuckstars-nav-scrolled::before,
  .elementor-element-8090ee8.schmuckstars-nav-scrolled::after {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Target nested containers specifically */
  .elementor-element-8090ee8.schmuckstars-nav-scrolled > .e-con-inner {
    background-color: transparent !important;
  }

  .elementor-element-8090ee8.schmuckstars-nav-scrolled .e-con.e-child[data-id="bcaaee3"],
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .e-con.e-child[data-id="ae6e932"],
  .elementor-element-8090ee8.schmuckstars-nav-scrolled .e-con.e-child[data-id="4128e4a"] {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
  }
}