/* Global mobile safety net */
html, body { overflow-x: hidden; }
img, iframe, video { max-width: 100%; }

.mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border:none;background:transparent;
  cursor:pointer;padding:0;flex:0 0 auto;
}

@media (max-width: 880px){
  header{
    flex-wrap:wrap;
    padding:16px 20px !important;
  }
  .mobile-menu-btn{display:flex;}
  .site-nav{
    display:none !important;
    width:100%;
    flex-direction:column;
    align-items:flex-start !important;
    gap:2px !important;
    padding-top:12px;
    order:3;
  }
  .site-nav.is-open{display:flex !important;}
  .site-nav > a{width:100%;padding:12px 0 !important;border-bottom:1px solid rgba(30,61,56,0.08) !important;}
  .site-nav .nav-dropdown{width:100%;}
  .site-nav .nav-dropdown > a{width:100%;padding:12px 0 !important;border-bottom:1px solid rgba(30,61,56,0.08) !important;display:block;}
  .site-nav .dropdown-menu{
    display:block !important;
    position:static !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:4px 0 8px 16px !important;
    margin-top:0 !important;
  }
  .site-nav > a[href*="app.mint-natuurgeneeskunde"]{
    margin-top:8px;border-bottom:none !important;text-align:center;
  }

  section, header, footer{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  footer{
    padding-top:40px !important;
    padding-bottom:24px !important;
  }
  footer > div{ gap:32px !important; }

  h1{ font-size:28px !important; line-height:1.3 !important; }
  h2{ font-size:22px !important; }

  .hero-section{
    flex-wrap:wrap !important;
    padding-top:40px !important;
    padding-bottom:32px !important;
    gap:32px !important;
  }
  .hero-section > div:first-child{
    max-width:100% !important;
  }
  .intro-cards{
    flex-wrap:wrap !important;
  }
  .intro-cards > div{
    flex:1 1 100% !important;
  }

  .hero-photo, .about-photo{
    width:200px !important;
    height:200px !important;
    overflow:hidden;
    border-radius:24px;
  }
  .hero-photo > div, .about-photo > div{
    width:200px !important;
    height:200px !important;
  }

  .blog-card{ max-width:100% !important; flex-basis:100% !important; }

  form input[type="email"], form input[type="text"], form input[type="tel"], form textarea{
    min-width:0 !important;
    width:100%;
  }

  .post table{
    display:block !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr !important;
  }
}