/* ============================================
   overrides.css
   Replaces behaviors normally handled by webflow.js
   ============================================ */

/* Dropdown hover behavior (desktop) */
.w-dropdown:hover > .w-dropdown-list {
  display: block !important;
}

/* Keep dropdowns accessible with keyboard */
.w-dropdown:focus-within > .w-dropdown-list {
  display: block !important;
}

/* Dropdown padding — Webflow JS adds .w--open which carries the padding,
   but we show via CSS hover, so replicate the padding here. */
.w-dropdown:hover > .dropdown-list,
.w-dropdown:focus-within > .dropdown-list {
  padding: 13px;
  box-shadow: 0 0 3px #00000024;
}

.w-dropdown:hover > .dropdown-list.about,
.w-dropdown:focus-within > .dropdown-list.about {
  padding: 15px 6px;
}

/* Tab cursor */
.w-tab-link {
  cursor: pointer;
}

/* Slider dot cursor */
.w-slider-dot {
  cursor: pointer;
}

/* Prevent margin collapse on homepage hero gradient */
.header-gradient {
  overflow: hidden;
}

/* Ensure nav menu toggle works via data attribute */
[data-nav-menu-open] .nav-menu-2 {
  display: block !important;
}

/* ============================================
   Mobile Nav Overrides (≤991px)
   ============================================ */
@media screen and (max-width: 991px) {
  /* Keep flex column layout when menu is open
     (components.css sets display:block via [data-nav-menu-open]) */
  .nav-menu-2[data-nav-menu-open] {
    display: flex !important;
    flex-direction: column;
  }

  /* Stack dropdown wrappers vertically, full width */
  [data-nav-menu-open] .w-dropdown {
    display: block;
    width: 100%;
  }

  /* Disable desktop hover on mobile — use tap instead */
  .w-dropdown:hover > .w-dropdown-list {
    display: none !important;
  }

  /* Show dropdown when toggled open */
  .w-dropdown.w--open > .w-dropdown-list {
    display: block !important;
  }

  /* Keep focus-within for accessibility */
  .w-dropdown:focus-within > .w-dropdown-list {
    display: block !important;
  }
}