/* --------------------------------------------------------------------------
 * Mobile Nav UX – Bootstrap 4 (works with your existing markup)
 * Goal: full-screen drawer, clear touch targets, separate account/cart section,
 * hide cart mini-table in mobile, add backdrop + body lock.
 * -------------------------------------------------------------------------- */

/* 1) Make the collapsed menu a full-screen drawer on mobile */
@media (max-width: 991.98px) {
  /* Ensure navbar stays above page */
  .navbar.sticky-top {
    z-index: 1030; /* BS4 default navbar z-index */
  }

  /* Turn the collapse into a drawer */
  .navbar .navbar-collapse {
    position: fixed;
    top: 56px;              /* default navbar height; adjust if your navbar is taller */
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 1rem 1rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }

  /* If your navbar is taller than 56px, you can switch to this instead:
     .navbar .navbar-collapse { top: var(--mobile-navbar-height, 56px); }
     and set --mobile-navbar-height on .navbar in your theme if needed.
  */

  /* 2) Stack blocks nicely */
  .navbar .navbar-collapse > .mr-auto {
    width: 100%;
  }

  /* Drupal blocks inside collapse: spacing */
  .navbar .block--stadthalle-mainnavigation,
  .navbar .block--stadthalle-useraccountmenu,
  .navbar .block--cart {
    width: 100%;
  }

  .navbar .block--stadthalle-mainnavigation {
    margin-bottom: 1rem;
  }

  /* 3) Make nav links feel like tappable list items */
  .navbar .navbar-nav {
    width: 100%;
    margin: 0;
  }

  .navbar .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 0.75rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    margin-bottom: .5rem;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #222;
    background: #fff;
    text-decoration: none;
  }

  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link:focus {
    text-decoration: none;
    border-color: rgba(0,0,0,.15);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }

  /* Active state */
  .navbar .navbar-nav .nav-link.is-active,
  .navbar .navbar-nav .nav-link[aria-current="page"] {
    border-color: rgba(0,0,0,.18);
    box-shadow: inset 4px 0 0 rgba(0,131,197,.9); /* matches your logo blue-ish */
    padding-left: 0.55rem; /* compensate for inset bar */
    font-weight: 600;
  }

  /* External links hint (optional) */
  .navbar .navbar-nav .nav-link.ext::after {
    content: "↗";
    font-size: .95em;
    opacity: .65;
    margin-left: .5rem;
  }

  /* 4) Visually separate account area (second menu) */
  .navbar .block--stadthalle-useraccountmenu {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  /* Optional: add a small "Konto" label before the account menu */
  .navbar .block--stadthalle-useraccountmenu::before {
    content: "Konto";
    display: block;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(0,0,0,.55);
    margin: 0 0 .5rem .25rem;
  }

  /* 5) Make cart entry compact in mobile (hide the big dropdown contents) */
  .navbar .block--cart {
    margin-top: .75rem;
  }

  /* Hide cart mini-table / expanded contents in mobile drawer */
  .navbar .block--cart .cart-block--contents {
    display: none !important;
  }

  /* Style cart summary like a nav item */
  .navbar .block--cart .cart-block--summary__count {
    font-weight: 600;
  }

  .navbar .block--cart .cart-block--link__expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.75rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    text-decoration: none;
    color: #222;
  }

  .navbar .block--cart .cart-block--link__expand:hover,
  .navbar .block--cart .cart-block--link__expand:focus {
    text-decoration: none;
    border-color: rgba(0,0,0,.15);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }

  /* 6) Reduce annoying top whitespace if any blocks add it */
  .navbar .navbar-collapse .contextual,
  .navbar .navbar-collapse .contextual-region {
    margin: 0;
  }

  /* 7) Backdrop (we'll create it via JS by toggling .bf-nav-open on body) */
  body.bf-nav-open::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 1020; /* below navbar (1030) and below drawer which is inside navbar */
  }

  /* Put drawer above backdrop */
  .navbar .navbar-collapse {
    z-index: 1025;
  }

  /* Lock page scroll when nav is open */
  body.bf-nav-open {
    overflow: hidden;
    touch-action: none;
  }
}