/* DGN Zone shared section index
   Desktop: full-width horizontal site index.
   Mobile/tablet: one MENU button opens a full-name drawer. */

.site-menu-toggle,
.site-menu-backdrop { display:none; }

@media (min-width:1041px) {
  .site-head {
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:rgba(5,5,5,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px);
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
  }

  .head-inner {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:none !important;
    min-height:64px !important;
    margin:0 !important;
    padding:0 clamp(1rem,2vw,2rem) !important;
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) 220px !important;
    align-items:center !important;
    column-gap:clamp(.65rem,1vw,1rem) !important;
  }

  .head-inner > .brand {
    box-sizing:border-box !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    margin:0 !important;
    white-space:nowrap !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    z-index:2 !important;
    justify-self:start !important;
  }

  .site-tabs {
    box-sizing:border-box !important;
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:stretch !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:clamp(.25rem,.45vw,.5rem) !important;
    overflow:visible !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    justify-self:stretch !important;
  }

  .site-tabs a {
    box-sizing:border-box !important;
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:.58rem .4rem !important;
    border:1px solid transparent !important;
    border-radius:.55rem !important;
    color:#929894 !important;
    background:transparent !important;
    font:700 clamp(.56rem,.62vw,.68rem)/1 "Archivo",system-ui,sans-serif !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    text-align:center !important;
  }

  .site-tabs a:hover {
    color:#f3f4f0 !important;
    background:rgba(255,255,255,.04) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  .site-tabs a.active,
  .site-tabs a[aria-current="page"] {
    color:#101800 !important;
    background:linear-gradient(#d3ff5c,#b4f724) !important;
    border-color:#b4f724 !important;
    box-shadow:0 0 18px -8px rgba(180,247,36,.9) !important;
  }

  .head-right {
    box-sizing:border-box !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:.4rem !important;
    justify-self:end !important;
    position:static !important;
    transform:none !important;
    margin:0 !important;
  }

  .head-right .social {
    margin:0 !important;
    padding:0 !important;
    border-left:0 !important;
    flex-wrap:nowrap !important;
  }

  .head-right .kick-pill {
    position:static !important;
    margin-left:.1rem !important;
  }
}

@media (min-width:1041px) and (max-width:1279px) {
  .head-inner {
    grid-template-columns:155px minmax(0,1fr) 155px !important;
    column-gap:.55rem !important;
    padding-inline:.75rem !important;
  }
  .head-inner > .brand {
    width:155px !important;
    min-width:155px !important;
    max-width:155px !important;
  }
  .head-right {
    width:155px !important;
    min-width:155px !important;
    max-width:155px !important;
  }
  .site-tabs { gap:.18rem !important; }
  .site-tabs a { min-height:38px !important; padding:.52rem .22rem !important; font-size:.55rem !important; }
  .head-right .kick-pill { display:none !important; }
  .social a { width:1.8rem !important; height:1.8rem !important; }
}

@media (max-width:1040px) {
  body { padding-left:0 !important; }
  body.site-menu-open { overflow:hidden !important; }

  .site-head {
    margin:0 !important;
    width:100% !important;
    min-height:60px !important;
    padding:0 !important;
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;
    background:rgba(5,5,5,.96) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px);
  }

  .head-inner {
    width:100% !important;
    max-width:none !important;
    min-height:60px !important;
    margin:0 !important;
    padding:.45rem 3.85rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    position:relative !important;
  }

  .head-inner > .brand {
    min-width:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    z-index:74 !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  .head-inner > .brand img {
    width:38px !important;
    height:38px !important;
  }

  .head-right {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:.12rem !important;
    margin:0 !important;
    position:absolute !important;
    right:.55rem !important;
    top:50% !important;
    left:auto !important;
    transform:translateY(-50%) !important;
    z-index:74 !important;
  }

  .head-right .kick-pill { display:none !important; }
  .head-right .social { margin:0 !important; padding:0 !important; border:0 !important; }

  .site-menu-toggle {
    position:fixed !important;
    left:.55rem !important;
    top:.62rem !important;
    z-index:100 !important;
    min-width:4.2rem !important;
    height:2.45rem !important;
    padding:0 .68rem !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.48rem !important;
    border:1px solid rgba(180,247,36,.42) !important;
    border-radius:.62rem !important;
    background:#0b0d0b !important;
    color:#d5f98a !important;
    box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.02) !important;
    font:800 .62rem/1 "Archivo",system-ui,sans-serif !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent;
  }

  .site-menu-toggle:focus-visible {
    outline:2px solid #b4f724 !important;
    outline-offset:2px !important;
  }

  .site-menu-icon {
    width:14px !important;
    height:12px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
  }

  .site-menu-icon i {
    display:block !important;
    width:100% !important;
    height:1.5px !important;
    border-radius:99px !important;
    background:currentColor !important;
    transform-origin:center !important;
    transition:transform .2s ease,opacity .2s ease !important;
  }

  body.site-menu-open .site-menu-icon i:nth-child(1) { transform:translateY(5.25px) rotate(45deg) !important; }
  body.site-menu-open .site-menu-icon i:nth-child(2) { opacity:0 !important; }
  body.site-menu-open .site-menu-icon i:nth-child(3) { transform:translateY(-5.25px) rotate(-45deg) !important; }

  .site-menu-backdrop {
    position:fixed !important;
    inset:60px 0 0 0 !important;
    z-index:80 !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    background:rgba(0,0,0,.58) !important;
    backdrop-filter:blur(2px);
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease,visibility .2s ease !important;
  }

  body.site-menu-open .site-menu-backdrop {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body > .site-tabs,
  .site-tabs {
    position:fixed !important;
    left:0 !important;
    top:60px !important;
    right:auto !important;
    bottom:0 !important;
    width:min(82vw,300px) !important;
    max-width:300px !important;
    max-height:none !important;
    margin:0 !important;
    padding:1rem .85rem 1.25rem !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:.38rem !important;
    overflow-y:auto !important;
    background:linear-gradient(180deg,#090b09,#050505) !important;
    border-right:1px solid rgba(180,247,36,.18) !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    box-shadow:18px 0 42px rgba(0,0,0,.48) !important;
    z-index:90 !important;
    transform:translateX(-102%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility .18s ease !important;
  }

  .site-tabs::before {
    content:"DGN ZONE" !important;
    display:block !important;
    padding:.35rem .55rem .7rem !important;
    color:#7f8781 !important;
    font:800 .58rem/1 "Archivo",system-ui,sans-serif !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
  }

  body.site-menu-open > .site-tabs,
  body.site-menu-open .site-tabs {
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .site-tabs a {
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:48px !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:.82rem .9rem !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:.68rem !important;
    background:rgba(255,255,255,.025) !important;
    color:#c9ceca !important;
    font:750 .78rem/1.15 "Archivo",system-ui,sans-serif !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    white-space:normal !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent;
  }

  .site-tabs a::before,
  .site-tabs a::after {
    content:none !important;
    display:none !important;
  }

  .site-tabs a:hover,
  .site-tabs a:focus-visible {
    color:#f3f4f0 !important;
    background:#111511 !important;
    border-color:rgba(180,247,36,.2) !important;
    outline:none !important;
  }

  .site-tabs a.active,
  .site-tabs a[aria-current="page"] {
    color:#101800 !important;
    background:linear-gradient(#d3ff5c,#b4f724) !important;
    border-color:#b4f724 !important;
    box-shadow:0 0 18px -7px rgba(180,247,36,.78) !important;
  }
}

@media (max-width:520px) {
  .head-right .social a { width:1.75rem !important; height:1.75rem !important; }
  .head-inner > .brand { font-size:.9rem !important; }
  .head-inner { padding-inline:3.65rem !important; }
  .site-menu-toggle { left:.45rem !important; }
}