/*
   Mobile-First Approach Base Styles:
   ---------------------------------

   Device                    Breakpoint Setting
   Wide Screens              @media (min-width: 1600px)
   Wide Screens              @media (min-width: 1400px)
   Monitors / Desktops       @media (min-width: 1200px)
   Laptops / Small desktops  @media (min-width: 992px)
   Tablets                   @media (min-width: 768px)
   Larger / Landscape phones @media (min-width: 576px)
   Large portrait mobile     @media (min-width: 440px)
   Medium portrait mobile    @media (min-width: 390px)
   Small portrait mobile     @media (min-width: 360px)
   Smaller mobile devices    @media (min-width: 320px) <-- Make this the default styling if broken on iPhone SE
   Smartwatches              (No media query)
*/

/* Samsung Galaxy S8+ (360), iPhone SE (375) */
@media screen and (min-width: 360px) {
  .card-img-overlay {
    h1 {
      font-size: 36px !important;
    }
    h3 {
      font-size: 20px !important;
    }
  }

  .signature {
    .title-text {
      font-size: 20px !important;
    }
    .mailto-address {
      font-size: 18px !important;
    }
    .copyright {
      font-size: 15px !important;
    }
  }

  .heading h2 {
    font-size: 23px !important;
  }

  .wrapper-index {
    h2 {
      margin-left: 8px !important;
      font-size: 22px !important;
    }
    h4 {
      margin-left: -24px !important;
      font-size: 20px !important;
    }
    ul {
      margin-left: 4px !important;
      margin-right: 4px !important;
      font-size: 18px !important;
    }
    .custom-indent { /* Adapts indentation for quoted statements */
      padding-left: -4px !important;
      margin-right: 4px !important;
    }
    .contactme {
      margin-left: 8px !important;
      margin-right: 8px !important;
      font-size: 18px !important;
    }
    .tmmgoal { /* Override the h2 styling for this subelement (or use h3) */
      h2 {
        margin-left: -22px !important;
        margin-right: -22px !important;
      }
    }
  }

  .wrapper-approach {
    .container-lg {
	  font-size: 18px !important;
	}
    ul {
      padding-left: 32px !important;
    }
  }

/*  .wrapper-background {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }*/

  .background {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 18px !important;
  }

  .background ul { /* combine with wrapper-background ??? This background refers to the div */
    padding-left: 24px !important;
    font-size: 18px !important;
  }

  .credentials {
    h2 {
      font-size: 32px !important;
    }
    h5 {
      font-size: 17px !important;
    }
  }

  .wrapper-faq {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
} /* End min-width: 360 */

/* iPhone 12 Pro (390), Pixel 7 (412), Samsung Galaxy S20 Ultra (412),
iPhone XR (414), iPhone 14 Pro Max (430) */
@media screen and (min-width: 390px) {
  .card-img-overlay {
    h1 {
      font-size: 38px !important;
    }
    h3 {
      font-size: 24px !important;
    }
  }

  /*.signature p { TODO
    font-size: 17px !important;
  }*/
  .signature {
    .title-text {
      font-size: 21px !important;
    }
    .mailto-address {
      font-size: 19px !important;
    }
    .copyright {
      font-size: 16px !important;
    }
  }

  .heading h2 {
    font-size: 25px !important;
  }

  .wrapper-index  {
    h2 {
      margin-left: 8px !important;
      font-size: 24px !important;
    }
    h4 {
      margin-left: -24px !important;
      font-size: 22px !important;
    }
    ul {
      margin-left: 4px !important;
      margin-right: 4px !important;
      font-size: 19px !important;
    }
    .custom-indent { /* Adapts indentation for quoted statements */
      padding-left: -4px !important;
      margin-right: 6px !important;
    }
    .contactme {
      margin-left: 8px !important;
      margin-right: 8px !important;
      font-size: 19px !important;
    }
    .tmmgoal { /* Override the h2 styling for this subelement (or use h3) */
      h2 {
        margin-left: -22px !important;
        margin-right: -22px !important;
      }
    }
  }

  .wrapper-approach {
    font-size: 19px !important;
    ul {
      padding-left: 40px !important;
    }
  }

  .wrapper-background {
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*row {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    background-color: silver !important;*/
  }

  .wrapper-background row {
    /*padding-left: 50px !important;
    padding-right: 50px !important;*/
    overflow-x: hidden !important;
    /* Removes any gap/offset between rows and columns */
    gap: 0 !important; 
    row-gap: 0 !important; 

    /* Pulls rows tightly together if container has extra height */
    align-content: start !important;

    /*margin-left: -10px !important;*/
    background-color: red !important;

    display: flex !important;
    flex-direction: row !important;        /* Arranges items in a row */
    justify-content: flex-start !important; /* Aligns all items to the left edge */
  }

  .background {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 18px !important;
  }

  .nav-mobile {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    left: auto !important;
    right: 0 !important;
  }

  .credentials {
    h2 {
      font-size: 33px !important;
    }
    h5 {
      font-size: 19px !important;
    }
  }

  .wrapper-faq {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /*margin-top: -10px !important;*/
    margin-left: 0px !important; /* causing slight movement in the viewport */ 
    margin-right: 0px !important; /* causing slight movement in the viewport */ 
    .accordion-button {
      font-size: 19px !important;
    }
    .accordion-body {
      font-size: 17px !important;
    }
  }
} /* End min-width: 390 */

/* Surface Duo (540) */
@media screen and (min-width: 440px) {
  .card-img-overlay {
    h1 {
      font-size: 42px !important;
    }
    h3 {
      font-size: 26px !important;
    }
  }

  .signature p { /* TODO */
    font-size: 20px !important;
  }

  .heading h2 {
    font-size: 27px !important;
  }

  .wrapper-index {
    h2 {
      margin-left: 8px !important;
      font-size: 26px !important;
    }
    h4 {
      margin-left: -24px !important;
      font-size: 24px !important;
    }
    ul {
      margin-left: 8px !important;
      margin-right: 8px !important;
      font-size: 20px !important;
    }
    .custom-indent { /* Adapts indentation for quoted statements */
      padding-left: -4px !important;
      margin-right: 6px !important;
    }
    .contactme {
      margin-left: 8px !important;
      margin-right: 8px !important;
      font-size: 20px !important;
    }
    .tmmgoal { /* Override the h2 styling for this subelement (or use h3) */
      h2 {
        margin-left: -22px !important;
        margin-right: -22px !important;
      }
	}
  }

  .wrapper-approach {
    font-size: 20px !important;
    ul {
      padding-left: 40px !important;
    }
  }

  .background {
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 20px !important;
  }

  .credentials {
    max-width: 100% !important;
    h2 {
      font-size: 33px !important;
    }
  }

  .wrapper-faq {
    /*padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;*/
    padding-left: calc(5.9vw - 2px) !important;
    padding-right: calc(5.9vw - 2px) !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    .accordion-button {
      font-size: 20px !important;
    }
    .accordion-body {
      font-size: 18px !important;
    }
  }
} /* End min-width: 440 */