/* child-nav-grid.css */

/* Sektion – må ikke kunne klikkes og må aldrig vise kant */
.child-nav-grid{
  margin:1.25rem 0;
  pointer-events:none;
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
}
.child-nav-grid:focus,
.child-nav-grid:active{ outline:none !important; }

/* H2 over navigationen */
.child-nav-grid__title{
  margin:0 0 .75rem 0;
  font-weight:700;
  pointer-events:auto;            /* så tekst kan markeres */
}

/* Vandret scroller – klikbar uden fokus-kant */
.child-nav-grid__scroller{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  pointer-events:auto;
  -webkit-tap-highlight-color: transparent;
  outline:none;
}
.child-nav-grid__scroller:focus,
.child-nav-grid__scroller:active{ outline:none; }

/* Liste-layout */
.child-nav-grid__list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max(12rem,38vw);
  gap:.75rem;
  padding:.25rem .25rem .5rem;
  margin:0;
  list-style:none;
}
.child-nav-grid__item{ scroll-snap-align:start; }

/* Knapper – venstrestillet tekst, ens højde, ingen klik-kant/effekt */
.child-nav-grid__card{
  position:relative;
  display:flex;
  align-items:center;          /* lodret centreret */
  justify-content:flex-start;  /* venstrestil tekst */
  height:3.5rem;
  padding:.5rem .9rem;
  border-radius:.9rem;
  text-decoration:none;
  background:#f6f6f7;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
  overflow:hidden;
  text-align:left;
  -webkit-tap-highlight-color: transparent;
  outline:none;
  border:none;
}
.child-nav-grid__card:hover{ background:#efeff0; }
.child-nav-grid__card:active,
.child-nav-grid__card:focus,
.child-nav-grid__card:focus-visible{
  outline:none;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}

/* Tekst i knapper */
.child-nav-grid__label{
  position:relative;
  z-index:1;
  color:#121212;
  font-weight:600;
  line-height:1.2;
  font-size:1rem;
  margin:0;
}

/* Desktop grid */
@media (min-width:768px){
  .child-nav-grid__scroller{ overflow:visible; }
  .child-nav-grid__list{
    grid-auto-flow:row;
    grid-auto-columns:unset;
    grid-template-columns:repeat(12,1fr);
    gap:.75rem;
    padding:0;
  }
  .child-nav-grid__item{
    scroll-snap-align:unset;
    grid-column:span 6;
  }
  .child-nav-grid__card{ height:4rem; }
}
@media (min-width:1024px){
  .child-nav-grid__item{ grid-column:span 4; }
}

/* Diskret scrollbar */
.child-nav-grid__scroller::-webkit-scrollbar{ height:8px; }
.child-nav-grid__scroller::-webkit-scrollbar-track{ background:transparent; }
.child-nav-grid__scroller::-webkit-scrollbar-thumb{ background:#d6d6d8; border-radius:8px; }