/* ===================================================================
   responsive-enhancements.css — detectaleak.co.nz
   Supplements Bootstrap 3 + tpl-buddy-012 responsive styles.
   =================================================================== */

/* ------------------------------------------------------------------
   1. Images: always scale proportionally with their container.
      height:auto ensures existing img { max-width:100% } works
      correctly when HTML width/height attributes are present.
   ------------------------------------------------------------------ */
img {
  height: auto;
}

/* ------------------------------------------------------------------
   2. Thumbnail gallery blocks (.smallpic / .smallpic2 / .smallpic3)
      The existing CSS sets width:200px on these images which beats
      max-width at narrow containers. Force fluid below 600px.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .smallpic,
  .smallpic2,
  .smallpic3 {
    width: 50%;
    box-sizing: border-box;
    padding: 2px;
  }
  .smallpic img,
  .smallpic2 img,
  .smallpic3 img {
    width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------------
   3. Services section — 4 cols desktop › 2×2 tablet › 1 col mobile
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {
  .services .col-sm-3 {
    width: 50%;
    float: left;
    margin-bottom: 20px;
  }
  .services .col-sm-3:nth-child(2n+1) {
    clear: left;
  }
}
@media (max-width: 767px) {
  .services .col-sm-3 {
    margin-bottom: 12px;
  }
  .services h4 {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
   4. Contact forms
      - Inputs and select: full width on mobile
      - Textarea: max-width stops cols="80" causing horizontal scroll
        at all viewport sizes; full-width + shorter on mobile
      - Submit button: full width, tap-friendly on mobile
   ------------------------------------------------------------------ */
.formbuddy input[type="text"],
.formbuddy input[type="email"],
.formbuddy select,
.formbuddy textarea,
.cms_textarea {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .formbuddy input[type="text"],
  .formbuddy input[type="email"],
  .formbuddy select,
  .formbuddy textarea,
  .cms_textarea {
    width: 100% !important;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
  .formbuddy .submit input[type="submit"],
  .formbuddy .submit .cms_submit {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
  .formbuddy label {
    display: block;
    margin-bottom: 4px;
  }
  .formbuddy .required,
  .formbuddy div {
    margin-bottom: 12px;
  }
}

/* ------------------------------------------------------------------
   5. Contact page sidebar — centre-align when it stacks below form
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .mainContent .col-sm-4 h5,
  .mainContent .col-sm-4 p,
  .mainContent .col-sm-6:last-child h5,
  .mainContent .col-sm-6:last-child p {
    text-align: center !important;
  }
}

/* ------------------------------------------------------------------
   6. Responsive typography — scale headings down at mobile
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  h1 { font-size: 24px !important; line-height: 1.3; }
  h2 { font-size: 20px !important; line-height: 1.35; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 15px; }
}

/* ------------------------------------------------------------------
   7. Multicol suburb lists — 2 columns at 991px (already in CSS),
      1 column at 479px where 2 columns are too narrow.
   ------------------------------------------------------------------ */
@media (max-width: 479px) {
  .multicol {
    width: 100% !important;
    float: none;
  }
}

/* ------------------------------------------------------------------
   8. Footer — centre on small screens
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  footer {
    text-align: center;
  }
  footer .address {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ------------------------------------------------------------------
   9. General layout breathing room on mobile
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  section.mainContent {
    padding: 20px 0;
  }
  p {
    font-size: 15px;
    line-height: 1.6;
  }
}