/* Mobile nav improvements (topbar pills)
   Keeps the header usable on small screens without breaking desktop layout.
*/

/* Ensure hidden dropdown is always really hidden (some browsers + display overrides) */
.navMore[hidden]{ display: none !important; }

@media (max-width: 560px){
  .topbar__inner{ gap: 10px; }

  /* Slightly smaller brand so nav has room */
  .brand__name strong{ font-size: .98rem; }
  .brand__dot{ width: 30px; height: 30px; }

  .pill{
    padding: 8px 10px;
    font-size: .82rem;
    white-space: nowrap;
  }

  /* Burger behaviour: keep primary CTA visible, rest in dropdown */
  .nav{ position: relative; gap: 8px; }

  .navMore{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(62,47,38,.14);
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 40px rgba(62,47,38,.18);
    z-index: 200;
  }

  .navToggle{ display: inline-flex; }

  /* Hide secondary pills on mobile ONLY when they are in the topbar row.
     Inside the dropdown, they must remain visible. */
  .nav > .pill.navItem{ display: none; }
  .navMore .pill.navItem{ display: inline-flex; }
}

/* Desktop: show normal nav, hide burger */
@media (min-width: 561px){
  .navToggle{ display:none; }
  .navMore{ display: contents; position: static; padding:0; border:0; background:transparent; box-shadow:none; }
}