/*
  custom.css - Monstermix.dk

  Egne tilføjelser til temaets style.css, holdt i en separat fil så de
  er lette at finde/vedligeholde uden at rode i selve temaet.
*/

/*
  "Lyt med nu"-boksen findes to steder i HTML'en (se
  objects/NowPlay.php -> mm_render_nowplaying_widget()):
   - .mm-nowplay-top   : lige efter <div id="main">, øverst på siden
   - .mm-nowplay-sidebar: inde i den almindelige sidebar

  Kun én af dem skal være synlig ad gangen, afhængig af skærmbredde.
  767px matcher det punkt hvor temaets egen grid.css allerede lægger
  sidebaren (grid_4) og hovedindholdet (grid_8) ved siden af hinanden
  i stedet for at stable dem.
*/

/*
  Bemærk margin-bottom: -20px herunder - det er bevidst, ikke en fejl.
  #primary (grid_8) har selv en indbygget 20px top-margen fra
  gitter-systemet, som lægger sig oveni denne boks' egen bundmargen.
  De -20px modvirker præcis den ekstra margen, så afstanden ned til
  næste sektion matcher den normale afstand mellem to bokse et andet
  sted på siden (målt og bekræftet til 40px begge steder).
*/
.mm-nowplay-wrap {
    margin-top: 0;
    margin-bottom: -20px;
}

.mm-nowplay-top {
    display: none;
}

@media only screen and (max-width: 767px) {
    .mm-nowplay-top {
        display: block;
    }

    .mm-nowplay-sidebar {
        display: none;
    }

    /*
      Når hovedindholdet (#primary, grid_8) og sidebaren (#secondary,
      grid_4) stables oven på hinanden på mobil, lægger begges egen
      indbyggede gitter-margen (20px hver) sig oveni den almindelige
      afstand mellem bokse - så overgangen bliver dobbelt så stor (80px)
      som normalt (40px). Denne linje modvirker præcis det, så
      afstanden matcher resten af siden. Gælder kun i dette
      mobil-breakpoint - på desktop står kolonnerne jo side om side, og
      denne regel er derfor irrelevant der.
    */
    #secondary.grid_4 {
        margin-top: -20px;
    }
}