/* VoteMotta2028 Mobile Dock / Footer Repair v26.5
   Fixes v26.1 .vmcn-mobile-six being forced visible on desktop. */

:root{
  --vm265-mobile-dock-h:58px;
  --vm265-mobile-icon:22px;
}

/* The phone navigation must NEVER render as a desktop footer row. */
@media (min-width:761px){
  nav.vmcn-mobile-six,
  .vmcn-mobile-six,
  nav.vm265-mobile-dock,
  .vm265-mobile-dock{
    display:none!important;
    visibility:hidden!important;
    position:static!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }

  .vm265-mobile-duplicate,
  .vm265-after-footer-extra{
    display:none!important;
  }
}

/* Phone/tablet dock: compact, accessible and constrained. */
@media (max-width:760px){
  body.vm265-has-mobile-dock{
    padding-bottom:calc(var(--vm265-mobile-dock-h) + env(safe-area-inset-bottom))!important;
  }

  nav.vmcn-mobile-six,
  .vmcn-mobile-six,
  nav.vm265-mobile-dock,
  .vm265-mobile-dock{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(52px,1fr))!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:2147482000!important;

    width:100%!important;
    height:calc(var(--vm265-mobile-dock-h) + env(safe-area-inset-bottom))!important;
    min-height:calc(var(--vm265-mobile-dock-h) + env(safe-area-inset-bottom))!important;
    max-height:calc(var(--vm265-mobile-dock-h) + env(safe-area-inset-bottom))!important;

    margin:0!important;
    padding:0 4px env(safe-area-inset-bottom)!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;

    background:#fff!important;
    border:0!important;
    border-top:1px solid #cfd8e3!important;
    box-shadow:0 -6px 20px rgba(7,29,60,.12)!important;
    border-radius:0!important;
    scrollbar-width:none!important;
  }

  nav.vmcn-mobile-six::-webkit-scrollbar,
  .vmcn-mobile-six::-webkit-scrollbar,
  nav.vm265-mobile-dock::-webkit-scrollbar,
  .vm265-mobile-dock::-webkit-scrollbar{
    display:none!important;
  }

  nav.vmcn-mobile-six > a,
  nav.vmcn-mobile-six > button,
  .vmcn-mobile-six > a,
  .vmcn-mobile-six > button,
  nav.vm265-mobile-dock > a,
  nav.vm265-mobile-dock > button,
  .vm265-mobile-dock > a,
  .vm265-mobile-dock > button{
    min-width:52px!important;
    width:auto!important;
    min-height:44px!important;
    height:var(--vm265-mobile-dock-h)!important;
    max-height:var(--vm265-mobile-dock-h)!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;

    margin:0!important;
    padding:3px 2px!important;
    overflow:hidden!important;

    background:transparent!important;
    border:0!important;
    border-radius:8px!important;
    box-shadow:none!important;

    color:#0b58c9!important;
    font-size:10px!important;
    font-weight:750!important;
    line-height:1.05!important;
    text-align:center!important;
    text-decoration:none!important;
  }

  /* Critical: never allow the dock's icon art to use intrinsic/native dimensions. */
  nav.vmcn-mobile-six svg,
  nav.vmcn-mobile-six img,
  nav.vmcn-mobile-six picture,
  .vmcn-mobile-six svg,
  .vmcn-mobile-six img,
  .vmcn-mobile-six picture,
  nav.vm265-mobile-dock svg,
  nav.vm265-mobile-dock img,
  .vm265-mobile-dock svg,
  .vm265-mobile-dock img{
    display:block!important;
    width:var(--vm265-mobile-icon)!important;
    height:var(--vm265-mobile-icon)!important;
    min-width:var(--vm265-mobile-icon)!important;
    min-height:var(--vm265-mobile-icon)!important;
    max-width:var(--vm265-mobile-icon)!important;
    max-height:var(--vm265-mobile-icon)!important;
    flex:0 0 var(--vm265-mobile-icon)!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }

  nav.vmcn-mobile-six svg *,
  .vmcn-mobile-six svg *,
  nav.vm265-mobile-dock svg *,
  .vm265-mobile-dock svg *{
    vector-effect:non-scaling-stroke;
  }

  .vm265-mobile-duplicate{
    display:none!important;
  }

  /* Don't expose helper creator shortcut rows below the legal footer.
     The real Creator Categories remain available in the header/modules drawer. */
  .vm265-after-footer-extra{
    display:none!important;
  }
}

/* Footer itself stays compact; phone-dock spacing belongs on body, not the footer. */
footer,
[role="contentinfo"]{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
}

footer svg,
[role="contentinfo"] svg{
  max-width:32px!important;
  max-height:32px!important;
}

/* Internal system diagnostics belong on the diagnostics page, not under the public footer. */
.vm265-public-system-diagnostic{
  display:none!important;
}


/* =========================================================
   v26.5 Horizontal content rails / carousels
   Primary target: Creator Spotlight Network.
   Reusable for selected homepage content grids.
   ========================================================= */

.vm265-slider-shell{
  position:relative!important;
  min-width:0!important;
  margin-top:12px!important;
}

.vm265-slider-track{
  display:flex!important;
  grid-template-columns:none!important;
  gap:14px!important;

  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;

  scroll-snap-type:x proximity!important;
  scroll-behavior:smooth!important;
  scrollbar-width:none!important;

  padding:4px 42px 12px 2px!important;
  margin:0!important;
}

.vm265-slider-track::-webkit-scrollbar{
  display:none!important;
}

.vm265-slider-track > *{
  flex:0 0 clamp(248px,28vw,330px)!important;
  width:clamp(248px,28vw,330px)!important;
  max-width:330px!important;
  min-width:248px!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
  margin-bottom:0!important;
}

.vm265-slider-controls{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  pointer-events:none!important;
}

.vm265-slider-prev,
.vm265-slider-next{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:13!important;

  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:42px!important;
  max-height:42px!important;

  display:grid!important;
  place-items:center!important;

  padding:0!important;
  margin:0!important;
  border:1px solid #bfd0e2!important;
  border-radius:999px!important;

  background:rgba(255,255,255,.97)!important;
  color:#0759c7!important;
  box-shadow:0 5px 18px rgba(7,29,60,.18)!important;

  font:900 27px/1 Arial,sans-serif!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}

.vm265-slider-prev{left:-10px!important}
.vm265-slider-next{right:-10px!important}

.vm265-slider-prev:hover,
.vm265-slider-next:hover{
  border-color:#0759c7!important;
  background:#f3f8ff!important;
}

.vm265-slider-prev:focus-visible,
.vm265-slider-next:focus-visible{
  outline:3px solid #ffcc4d!important;
  outline-offset:2px!important;
}

.vm265-slider-prev[disabled],
.vm265-slider-next[disabled]{
  opacity:.28!important;
  cursor:default!important;
}

.vm265-slider-hint{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:7px 0 0!important;
  color:#66758a!important;
  font-size:.76rem!important;
}

.vm265-slider-hint::before{
  content:"↔"!important;
  font-weight:900!important;
  color:#0759c7!important;
}

/* Creator network should occupy one compact horizontal row. */
#creator-spotlight-network .cs-home-creator-grid.vm265-slider-track{
  grid-template-columns:none!important;
}

#creator-spotlight-network .cs-home-creator-card{
  height:auto!important;
}

/* Preserve thumbnails/card text without making rails excessively tall. */
.vm265-slider-track .cs-thumb,
.vm265-slider-track img{
  object-fit:cover;
}

/* Mobile: swipe is primary, arrows remain small but accessible. */
@media(max-width:760px){
  .vm265-slider-track{
    gap:10px!important;
    padding:2px 18px 10px 0!important;
    scroll-snap-type:x mandatory!important;
  }

  .vm265-slider-track > *{
    flex:0 0 min(82vw,310px)!important;
    width:min(82vw,310px)!important;
    min-width:min(82vw,310px)!important;
    max-width:min(82vw,310px)!important;
  }

  .vm265-slider-prev,
  .vm265-slider-next{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
    font-size:23px!important;
  }

  .vm265-slider-prev{left:-6px!important}
  .vm265-slider-next{right:-6px!important}

  /* Hide arrows during touch-dominant browsing; swipe still works.
     They remain available on keyboard/mouse-capable small devices. */
  @media(pointer:coarse){
    .vm265-slider-prev,
    .vm265-slider-next{
      display:none!important;
    }
  }
}

/* Reduced motion: respect OS preference. */
@media(prefers-reduced-motion:reduce){
  .vm265-slider-track{scroll-behavior:auto!important}
}