/* ------------------------------------------------------------------ *
 * cowork-mobile-nav.css  (+ cowork-nav.js)
 *
 * Mobile hamburger nav for the migrated cowork pages.
 *
 * The Webflow source design has a hamburger (.icon-container) and a
 * dropdown, but the interaction JS that toggles it was never migrated, and
 * the built-in dropdown's links were left as href="#". So on phones the
 * desktop 6-column link grid just overflows the viewport (same bug on the
 * live source at kuse-usecase.webflow.io).
 *
 * This restores a real hamburger: cowork-nav.js toggles `.nav-open` on the
 * bar; below we hide the desktop links, show the hamburger, and reveal the
 * real links (.div-block-148, which carry the correct hrefs) as a dropdown
 * panel. Scoped to <=767px so desktop is untouched.
 * ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .navbar3_container { position: relative; }

  /* Show the hamburger, draw its three bars. */
  .icon-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
  .icon-container .strip {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--base-color-brand--dark, #6a4040);
    transition: transform .2s ease, opacity .2s ease;
  }
  /* Hamburger -> X when open. */
  .kuse-nav-bar2.nav-open .strip.top { transform: translateY(7px) rotate(45deg); }
  .kuse-nav-bar2.nav-open .strip.mid { opacity: 0; }
  .kuse-nav-bar2.nav-open .strip.bot { transform: translateY(-7px) rotate(-45deg); }

  /* Real links become a dropdown panel, collapsed by default. */
  .div-block-148 {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 20rem);
    flex-direction: column;
    align-items: stretch;
    grid-row-gap: .125rem;
    row-gap: .125rem;
    background-color: var(--base-color-neutral--white, #fff);
    border: 1px solid var(--border-color--border-primary, #eee);
    border-radius: 16px;
    padding: .5rem;
    box-shadow: 0 12px 32px rgba(32, 32, 32, .12);
    z-index: 60;
  }
  .kuse-nav-bar2.nav-open .div-block-148 { display: flex; }

  .navbar2_link-3 {
    color: var(--base-color-brand--dark, #6a4040);
    font-size: 1rem;
    justify-content: center;
    padding: .75rem 1rem;
    border-radius: 10px;
  }
  .navbar2_link-3:hover { background-color: var(--base-color-brand--whitekuse2-0, #f5eee2); }
}