/* ============================================================
   Detourers — Mobile Nav (assets/nav.css)
   Pure CSS checkbox-toggle hamburger menu, no JS. Below 860px the
   inline link row collapses into a dropdown revealed by toggling a
   hidden checkbox via its <label> — avoids relying on inline onclick
   handlers going through the DC template compiler.
   ============================================================ */

.dt-nav-toggle{ display:none; }
.dt-nav-burger{ display:none; }

@media (max-width: 860px){
  .dt-nav{ position:sticky; flex-wrap:wrap; }

  .dt-nav-burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:40px; height:40px; border-radius:10px; cursor:pointer;
    background:rgba(94,138,60,.12); flex:0 0 auto;
  }
  .dt-nav-burger span{
    display:block; height:2px; width:20px; background:#3d4a32; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }

  .dt-nav-links{
    order:3; flex-basis:100%;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    max-height:0; opacity:0; overflow:hidden;
    padding:0 2px; margin-top:0;
    transition:max-height .32s ease, opacity .25s ease, margin-top .32s ease;
  }
  .dt-nav-links a{ padding:6px 4px; }
  .dt-nav-links a.dt-btn{ text-align:center; padding:13px 20px; }

  .dt-nav-toggle:checked ~ .dt-nav-links{
    max-height:420px; opacity:1; margin-top:16px; padding-bottom:18px;
  }
  .dt-nav-toggle:checked ~ .dt-nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .dt-nav-toggle:checked ~ .dt-nav-burger span:nth-child(2){ opacity:0; }
  .dt-nav-toggle:checked ~ .dt-nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}