/* ==========================================================================
 * NContact — mobiel en tablet, gedragsfouten
 *
 * Het ontwerp bestaat alleen op 1440. Alles hieronder is gemeten op 393 en 768
 * en repareert wat een bezoeker daar in de weg zit. Boven 1024 verandert er
 * niets, dus de pixel-exacte desktop blijft staan.
 * ========================================================================== */

@media (max-width:1024px){

  /* 1. Kaarten met een vaste hoogte uit het desktopontwerp.
   *    De mobiele tekst is hoger dan die vaste maat, dus de inhoud stak eruit.
   *    Op Home schoof de kaart "Sport ontlaadt" 200px omhoog, dwars over de
   *    donkere tekst erboven. Op Over NContact liepen de regiotags 475 tot 523px
   *    onder hun kaart uit, over de volgende sectie heen. */
  .elementor-element-s03,
  .elementor-element-s03card,
  .elementor-element-c004f,
  .elementor-element-c0060,
  .elementor-element-c0073{
    height:auto !important;
    min-height:0 !important;
  }

  /* 2. Partnerlogo's stonden in één kolom: acht blokken van 176 hoog achter
   *    elkaar, samen bijna 1500px scrollen. Twee kolommen halveert dat. */
  .elementor-element-s07loop .elementor-loop-container{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* 3. Tikdoelen. Voetnootlinks waren 25px hoog en staan dicht op elkaar;
   *    tekstlinks als "Bekijk meer" 20px. Onder de 40px mis je ze met je duim. */
  footer a,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown a,
  a.nc-link,
  .elementor-widget-button .elementor-button{
    min-height:40px;
  }
  footer a{
    display:inline-flex;
    align-items:center;
  }
  .elementor-widget-button .elementor-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

@media (max-width:767px){
  /* 4. Het contactblok op de specialisatiepagina's bleef naast elkaar staan in
   *    kolommen van 85px. "contact@ncontact.nl" werd dan vier regels van vijf
   *    tekens en "Telefonisch" brak middenin. Onder tabletbreedte stapelen. */
  .elementor-element-c0054,
  .elementor-element-c005b,
  .elementor-element-c005d{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }
  .elementor-element-c0051,
  .elementor-element-c0058,
  .elementor-element-c0055{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:1024px){
  /* 5. De regiotags op Over NContact staan absoluut op top:484px, een maat uit
   *    het desktopontwerp waar de kaart 600 hoog is. Op mobiel is de kaart 141
   *    hoog, dus landden de tags 340px onder de kaart, dwars over de volgende
   *    sectie. In de tekststroom zetten lost het op en laat de kaart meegroeien. */
  .elementor-element-c004e,
  .elementor-element-c005f,
  .elementor-element-c0072{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    width:100% !important; max-width:100% !important;
    margin-top:16px !important;
  }
}

@media (max-width:1024px){
  /* 6. Op Home trekt s03media met margin-bottom:-200px de kaart over het beeld
   *    heen: dat is de overlap uit het ontwerp. Op mobiel is dat beeld 0 hoog,
   *    dus die -200 trok de kaart dwars over de donkere tekst erboven. */
  .elementor-element-s03media{ margin-bottom:0 !important; }
}

@media (max-width:1024px){
  /* 7. In twee kolommen worden de partnerlogo's smaller dan hun natuurlijke
   *    verhouding; zonder object-fit rekt Elementor ze uit. */
  .elementor-element-s07loop img{
    object-fit:contain !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
  }

  /* 8. De regiolinks waren 26px hoog. Dat is te klein om met een duim te raken,
   *    zeker omdat ze in dichte rijen naast elkaar staan. */
  .nc-regio-balk{
    min-height:36px;
    display:inline-flex;
    align-items:center;
  }
}

@media (max-width:767px){
  /* 9. Hetzelfde als 2, maar op Over NContact staan de partnerlogo's niet in een
   *    loop maar als losse widgets in een rij die op mobiel doorbrak naar een
   *    kolom: acht blokken onder elkaar, 1456px scrollen. */
  .elementor-element-c0092 > .elementor-element{
    width:calc(50% - 8px) !important;
    max-width:calc(50% - 8px) !important;
  }
  .elementor-element-c0092 img{
    object-fit:contain !important; width:auto !important; max-width:100% !important; height:auto !important;
  }
}

@media (max-width:767px){
  /* 10. Het blauwe blokje voor een labeltekst is in het ontwerp 10x10. Op mobiel
   *     rekte het uit naar 40 breed: een streepje in plaats van een vierkantje.
   *     Twintig stuks, op elke pagina. */
  .elementor-element-aanSq,
  .elementor-element-c0003,
  .elementor-element-c0013,
  .elementor-element-c0019,
  .elementor-element-c0021,
  .elementor-element-c002a,
  .elementor-element-c0075,
  .elementor-element-c014,
  .elementor-element-c024,
  .elementor-element-lcasdot,
  .elementor-element-nc01sq,
  .elementor-element-s02dot,
  .elementor-element-s03dot,
  .elementor-element-s04dot,
  .elementor-element-s06dot,
  .elementor-element-s07dot,
  .elementor-element-sp01dot,
  .elementor-element-wws1tagsq,
  .elementor-element-wws2tagsq,
  .elementor-element-wws3tagsq{
    width:10px !important;
    min-width:10px !important;
    max-width:10px !important;
    flex:0 0 10px !important;
    /* de resterende 30px was zijpadding op een content-box */
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:767px){
  /* 11. De balk is 60 hoog en zweeft over de pagina. Op vier pagina's begon de
   *     eerste tekst op y=56, dus de bovenste regel verdween erachter. Genoeg
   *     ruimte bovenaan de eerste sectie lost het op. */
  div[data-elementor-type="wp-page"] > .e-con.e-parent:first-child,
  div[data-elementor-type="single-post"] > .e-con.e-parent:first-child{
    padding-top:88px !important;
  }
}