/* ---------- Reset / base ---------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
h1 {
  font-size: 1rem;
}


/* Base (mobile-first) — up to ~479.98px */
.container {
  width: 100%;
  max-width: 320px;   /* mobile max width */
  margin: 0 auto;
  padding: 1rem;
}
.wrapper_main {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

#sitemain { width: 100%; }
/* Fix small display bug in WP pages */
.wp-block-list {
    padding-left: 20px;
    margin-top: -10px;
  }

/* ---------- Small tablets / >= 480px ---------- */
@media (min-width: 480px) {
  .container {
    max-width: 480px;
    padding: 0.75rem;
  }
  .wrapper_main { max-width: 999px; margin: 0 auto; }  
  #sitemain { width: 100%; }
  .header, #footer{width:480px; margin:0 auto;}
}

/* ---------- >= 768px: enable two-column layout ---------- */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
    //padding: 0.75rem;
  }  
  .wrapper_main {
    max-width: 768px;
    margin: 0 auto;
  }
  #sidebar {
    display: block;
    width: 24%;
    float:right;
    top: 100px !important;
    border-top: 0;
    border-left-color: #696969; border-left-width: thin; border-left-style: solid;
    padding-left: 5px;
  }
  /* changed from transparent to white so as to display regardless of current page height */
  #wpb_wmca_accordion_widget-2 {    
    background-color: canvas;
  }
  #sitemain {
    width: 74%;
    float:left;
    margin-left: 1%;
  }
  .header, #footer{width:768px; margin:0 auto;}
  h1 {
    font-size: 1.2rem;
  }
}

/* ---------- >= 1200px: larger desktop rules ---------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    padding: 1rem;
  }
  .wrapper_main {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* slightly different split for wide screens */
  #sidebar {
    max-width: 28%;
    float:right;
  }
  #sitemain {
    max-width: 70%;
    float:left;
  }
  .header, #footer{width:1200px; margin:0 auto;}
  h1 {
    font-size: 1.4rem;
  }
}
