:root { --topbar-h: 64px; } /* auto-updated by JS below */

.site-topbar{
  position: sticky; top: 0; z-index: 1000;
}

.ttd-nav{
  position: sticky; top: var(--topbar-h); z-index: 999;
  background:#fff; border-bottom:1px solid #000;
}
.ttd-nav .container{ display:flex; align-items:center; gap:16px; }
.ttd-brand{ font-weight:700; text-decoration:none; padding:10px 0; color:#111; }

.ttd-burger{
  margin-left:auto; display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer;
}
.ttd-burger span{ display:block; height:2px; margin:7px 0; background:#111; }

/* desktop */
.ttd-menu{ display:flex; list-style:none; margin:0; padding:0; gap:18px; }
.ttd-link{ text-decoration:none; color:#111; padding:12px 6px; display:inline-block; }
.has-sub{ position:relative; }
.ttd-subtoggle{ display:none; }

/* submenu */
.ttd-submenu{
  position:absolute; left:0; top:100%;
  min-width:220px; background:#fff; border:1px solid #ddd; border-radius:6px;
  padding:6px 0; display:none;
}
.has-sub:hover > .ttd-submenu{ display:block; }
.ttd-sublink{ display:block; padding:8px 12px; text-decoration:none; color:#111; }

/* mobile */
@media (max-width: 900px){
  .ttd-burger{ display:block; }
  .ttd-menu{
    position:fixed; left:0; right:0;
    top:calc(var(--topbar-h) + 56px); /* sits under nav */
    background:#fff; border-top:1px solid #ddd;
    display:none; flex-direction:column; padding:10px 12px; gap:6px;
  }
  .ttd-menu.is-open{ display:flex; }

  .has-sub{ position:static; }
  .ttd-subtoggle{ display:inline-block; margin-left:8px; border:0; background:transparent; width:28px; height:28px; }
  .ttd-submenu{ position:static; display:none; border:0; padding:0; }
  .ttd-submenu.is-open{ display:block; }
}