@charset "UTF-8";

/*
 * Responsive navigation layer
 * - Keeps both desktop (auto-hide) and mobile (Osmo) markup in the DOM while
 *   swapping visibility purely with CSS at the 768px breakpoint.
 */

/* Base: hide the Osmo full-screen nav unless a mobile query overrides it. */
.bold-nav-full {
  display: none;
}

@media (max-width: 767px) {

  /*
   * Mobile — show Osmo full nav only.
   * Auto-hide nav (and alias) are fully removed from layout flow to avoid
   * overlapping sticky layers.
   */
  [data-satz="auto-hide-navbar"],
  [data-auto-hide-nav] {
    display: none;
  }

  .bold-nav-full {
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 768px) {

  /*
   * Tablet/Desktop — ensure the auto-hide nav stays in the grid flow and the
   * Osmo nav remains hidden even if its own CSS sets a display value.
   */
  [data-satz="auto-hide-navbar"],
  [data-auto-hide-nav] {
    display: grid;
  }

  .bold-nav-full {
    display: none;
  }
}

@media (max-width: 767px) {

  /*
   * Force the Osmo tiles fully closed when data-navigation-status="not-active".
   * Scoped attribute selector (and !important) beats Webflow utility classes
   * that may set visibility/opacity elsewhere.
   */
  [data-navigation-status="not-active"] .bold-nav-full__tile {
    pointer-events: none !important;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%) !important;
  }

  [data-navigation-status="active"] .bold-nav-full__tile {
    pointer-events: auto !important;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  }
}