@import url("grids.css");
@import url("packages.css");

* {
box-sizing: border-box;  /* set width regardless of padding */
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Roboto", sans-serif;
  color: #111;
}

h1 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 30px "Roboto", sans-serif;
  color: #111;
  margin-top:0;
  text-align:center;
}
  .hero h1 {
    font-weight: bold;
    margin:0;
  }
.darktextbox h1 {
  color: #FFF;
}
  .darktextbox p {
    font-weight: 300;
  }
h2 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 28px "Roboto", sans-serif;
  color: #111;
  margin-top:0;
  text-align:center;
}
.darktextbox h2 {
  color: #FFF;
}
h3 {
  letter-spacing: 0px;
  line-height: 160%;
  font: 20px "Roboto", sans-serif;
  color: #C2CF10;
  margin-top:0;
}
h4 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 18px "Roboto", sans-serif;
  color: #111;
  margin-top:0;
}
.darktextbox h4 {
  color: #FFF;
}


p {
  margin-top: 0;
}


.overflow {
width: 100%;
overflow: auto;
}

a {
  color: #C2CF10;
  text-decoration: none;
}
a.calltoaction {
  display: inline-block;
  border: none;
  background: #C2CF10;
  color: #fff;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
  transition: 0.2s ease;
  padding: 10px 14px;
  margin-top: 24px;
}
#newboiler a.calltoaction {
   background: #FF0083;
}
  a.calltoaction:hover {
    color: #FFF !important;
    background: #4F622B;
  }

a.call {
  font-size: 20px;
  color: #C2CF10;
  cursor: pointer;
}
  .midtextbox a.call {
    color: #282E34;
  }

.larger {
  font-size: 120%;
  text-decoration: underline;
}
.note {
  font-size: 80%;
  margin-bottom: 5px;
}

.left, .lft {
    float: left;
}
.right, .rgt {
    float: right;
}
.clear, .clr {
    clear: both;
}
.hidden {
  visibility: collapse;
}


hr {
  border: none;
  height: 1px;
  background: #e5e5e5;
  margin: 30px 0;
}

.tick {
  font-size: 1.2rem;
  color: #C2CF10;
}



/* Header */
#header {
  padding: 0;
  position: fixed;
  height: 100px;
  background: #fff;
  z-index: 100;
  border-bottom: 3px solid #282E34;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.header-first {
  padding: 5px 15px;
  background-color: #c9c7c0;
  background-color: #1CA1C9;
  background-color: #EB7F20;
  background-color: #0AD1CE;
  background-color: #C2CF10;
}
.header-second {
  background-color: #fff;
  padding: 0 15px;
}
.header-inner {
  max-width: 1200px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.header-left {
}
  .header-left p.logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin: 0;
  }
    .header-left p.logo span {
      display: inline-block;
      margin-top: 8px;
      margin-right: 8px;
    }

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-beginning;
}

  .contact-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    color: #282E34;
  }
  .contact-link:hover {
    color: #C2CF10;
  }

  .contact-text { white-space: nowrap; }

/* Desktop nav */
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-end;
}

  .topnav a {
    color: #282E34;
    text-decoration: none;
  }
  .topnav a:hover {
    color: #C2CF10;
  }

:root {
  --header-height: 50px; /* set this to your sticky header height */
}

/* Global fix for all anchor jumps */
html {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth; /* optional - remove if you don’t want smooth scroll */
}

/* Extra safety for headings/sections (works even if scroll-padding is ignored) */
[id] {
  scroll-margin-top: var(--header-height);
}


.header-spacer { height: 100px; width: 1px; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: #282E34;
  color: #fff;
  padding: 10px 12px;
  z-index: 10000;
}
.skip-link:focus { left: 10px; }

  /* Hamburger button */
  .menu-btn {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
  }

  .menu-bars {
    display: inline-block;
    width: 26px;
    height: 2px;
    background: #282E34;
    position: relative;
  }
  .menu-bars:before,
  .menu-bars:after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 2px;
    background: #282E34;
  }
  .menu-bars:before { top: -8px; }
  .menu-bars:after { top: 8px; }

  /* Mobile drawer */
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(260px, 85vw);
    background: #282E34;
    color: #fff;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 10001;
    padding: 14px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.35);
  }

  .mobile-drawer.open {
    transform: translateX(0);
  }

  .mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }

  .menu-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 6px 8px;
  }

  .mobile-nav {
    display: grid;
    gap: 10px;
  }

  .mobile-nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 8px;
    border-radius: 6px;
  }

  .mobile-nav a:hover {
    color: #C2CF10;
  }

  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
  }

  /* Mobile rules:
     - show hamburger
     - hide desktop nav
     - show only icons for tel/email (hide text) */
  @media (max-width: 820px) {
    .topnav { display: none; }
    .menu-btn { display: inline-flex; }
    .contact-text { display: none; }
    .header-right { justify-items: end; }
  }


  .contact {
    float: right;
    text-align: left;
    padding: 10px 0;
  }
    .contact p {
      margin: 0;
    }
    .contact p img {
      margin-right: 10px;
      position: relative;
      top: 5px;
    }
    .contact p a {
      color: #282E34;
      font-size: 17px;
      padding-bottom: 5px;
    }
    .contact p span {
      display: none;
    }




/* end header */




/* CONTENT */

.bgimg-1 {
  position: relative;
  opacity: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-2, .bgimg-3 {
/*  position: relative;
  opacity: 1;                  */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */
    .bgimg-2, .bgimg-3 {
      background-attachment: fixed;
    }
}
.bgimg-1 {
  background-image: url("../images/engineer-and-owner.webp");
  min-height: 300px;
  border-bottom: 3px solid #C2CF10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 30px;
}
    #home .bgimg-1 {
    background-image: url("../images/engineer-and-owner.webp");
    min-height: 400px;
    }
    #blog .bgimg-1 {
    background-image: url("");
    min-height: 250px;
    }
    #post .bgimg-1 {
    background-image: url("");
    min-height: 120px;
    }

.bgimg-2 {
  background-image: url("../images/inspector.webp");
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgimg-3 {
  background-image: url("../images/energy-rating.webp");
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caption {
  width: 100%;
  text-align: center;
  background-color: none;
  border-radius: 10px;
  padding: 20px;
}
  .bgimg-1 .caption {
    background-color: rgba(255, 255, 255, 0.9); /* white, 70% */
  }
  .caption h1 {
    color: #282E34;
    margin:0;
  }
  .caption p {
    color: #C2CF10;
    font-size: 22px;
    font-weight: 400;
    margin:0;
  }



.lighttextbox {
  color:#282E34;
  background-color:#fff;
  text-align:center;
  padding:70px 10%;
}
.midtextbox {
  color:#282E34;
  background-color:#E6E6E6;
  text-align:center;
  padding:70px 10%;
}
.darktextbox {
  color:#fff;
  background-color:#282E34;
  text-align:center;
  padding:70px 10%;
}
  .lighttextbox#newsletter {
    padding:40px 10%;
    background-color:#E6E6E6;

  }

.overimgtextbox {
    background-color:transparent;
    font-size:25px;
    color: #f7f7f7;
    text-transform: uppercase;
    text-shadow: 2px 2px 6px  #282E34;
}

/* columns */
.twocol1,
.twocol2 {
  text-align: left;
}
    #cal-outer.twocol1 {
        width: 100%;
        padding-top: 0px;
    }
    #frm-outer.twocol2 {
        width: 100%;
        padding-top: 0px;
    }
    #map-outer.twocol1 {
        width: 100%;
        padding-top: 0px;
    }
    #tbl-outer.twocol2 {
        width: 100%;
        padding-top: 0px;
    }


.threecol1,
.threecol2,
.threecol3 {
  text-align: left;
}
    .threecol1 h2,
    .threecol2 h2,
    .threecol3 h2 {
        background: #C2CF10;
        padding: 5px;
    }



  #accreditation {

  }

    #accreditation img {
     max-height: 50px;
     width: auto;
     margin: 10px;
    }

  #newsletter {

  }



  /*------ BLOG ---------*/

  /* index */

    #blog-container {
      max-width:1200px;
      margin:80px auto;
      padding:0 20px;
      line-height:1.5;
    }

    #blog-container h2 {
      font-weight: bold;
      text-transform: none;
      text-align:left;
      margin-bottom:10px;
    }
    #blog-container h2 a {
      /* display: inline-block;
      width: 100%;
      background: #FFC60B; */
      color: #282E34;
      /* padding:2px 8px; */
    }
    #blog-container h2 a:hover {
      color: #C2CF10;
      /* background: #282E34;
      color: #fff; */
    }

    /* GRID */
    #blog-container .grid {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:30px;
    }

    /* CARD */
    .card {
      border: 0px solid #C2CF10;
      border-radius:0;
      padding:0px;
      display:flex;
      flex-direction:column;
      height:100%;
    }

    .card img{
      width:100%;
      height:180px;
      object-fit:cover;
      border-radius:0;
      margin-bottom:10px;
    }

    .meta{
      font-size:0.95rem;
      color:#282E34;
      margin-bottom:10px;
      font-style: italic;
    }

    .excerpt{
      flex:1;
      font-size:0.95rem;
      color:#282E34;
    }

    .read-more{
      margin-top:12px;
      font-weight:500;
    }
    .read-more a:hover {
      color:#282E34;
    }

    /* Pagination */
    .pagination{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      margin:26px 0 10px;
      flex-wrap:wrap;
    }
    .pagination a, .pagination span{
      border:1px solid #ddd;
      border-radius:10px;
      padding:8px 12px;
      font-size:14px;
    }
    .pagination .current{
      border-color:#282E34;
      font-weight:600;
    }
    .pagination .disabled{
      color:#999;
      border-color:#eee;
    }
    .pagination .dots{
      border:none;
      padding:0 6px;
    }

    /* post */

    #post-container {
      max-width:1000px;
      margin:40px auto 120px;
      padding:0 20px;
      line-height:1.5;
    }
    #post article {border:0px solid #e5e5e5;border-radius:0;padding:0px}
    .post h1 {
      font-size:2em;
      font-weight: bold;
      text-transform: none;
      text-align:left;
      margin-bottom:10px;
    }
    .post h2 {
      font-weight: bold;
      text-transform: none;
      text-align:left;
      margin-bottom:10px;
    }
    /* #post img {max-width:100%;height:auto;border-radius:0} */
    .post img{
      width:100%;
      height:300px !important;
      object-fit:cover;
      border-radius:0;
      margin-bottom:10px;
    }

    article table { width:100%; border-collapse:collapse; margin:12px 0; }
    article th, article td { border:1px solid #e5e5e5; padding:10px; text-align:left; }
    article thead th { font-weight:600; }
    article img { max-width:100%; height:auto; border-radius:12px; }




    /* TABLET */
    @media (max-width: 900px){
      .grid{grid-template-columns:repeat(2, 1fr);}
    }

    /* MOBILE */
    @media (max-width: 600px){
      .grid{grid-template-columns:1fr;}
      .post img{height:200px;}
    }

 /*------ BLOG ---------*/


/* footnotes */

.footnotes {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}


.footer {
  padding-top:20px !important;
  padding-bottom:20px !important;
}








/***** MEDIA QUERIES *****/


/* Small devices (mobile (landscape), 420px and up) */
@media (min-width: 368px) {

    body {
    border: 0px solid red;
    }

    #tabs a {
    padding: 4px 16px;
    }

}

/* Small devices (mobile (landscape), 620px and up) */
@media (min-width: 472px) {

    body {
    border: 0px solid cyan;
    }
    .caption {
    width: 60%;
    }


}


/* Small devices (tablets (portrait), 768px and up) */
@media (min-width: 768px) {

  body {
    border: 0px solid orange;
    }



    /* Header */
    #header {

    }

      .contact p span {
        display: inline-block;
      }
    /* end header */

}




/* Medium devices (tablets (landscape), 1024px and up)    */
@media (min-width: 1024px) {

    body {
    border: 0px solid lime;
    }

    .lighttextbox {
    }
    .darktextbox {
    }
    .twocol1 {
    float: left;
    width: 50%;
    padding: 0 20px;
    }
    .twocol2 {
    float: right;
    width: 50%;
    padding: 0 20px;
    }
        #cal-outer.twocol1 {
            width: 62%;
            padding-top: 0px;
        }
        #frm-outer.twocol2 {
            width: 34%;
            padding-top: 74px;
        }
        #map-outer.twocol1 {
            width: 40%;
            padding-top: 0px;
            overflow: auto;
        }
        #tbl-outer.twocol2 {
            width: 58%;
            padding-top: 0px;
        }

      .footnotes {
        width: 60%;
      }

    .threecol1 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }
    .threecol2 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }
    .threecol3 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }

}


/* Medium devices (desktops, 1170px and up)    */
@media (min-width: 1170px) {

    body {
    border: 0px solid blue;
    }

      .caption {
        width: 30%;
      }

    .lighttextbox {
    padding:70px 20%;
    }
    .lighttextbox#packages {
    padding:70px 10%;
    }
    .darktextbox {
    padding:70px 20%;
    }

}

/* Large devices (large desktops, 1400px and up)    */
@media (min-width: 1400px) {

    body {
    border: 0px solid lilac;
    }

    .lighttextbox#packages {
    padding:70px 15%;
    }


}



/* --- MOBILE HEADER FIX: force hamburger visible --- */
@media (max-width: 820px) {

  /* Make sure the header layout doesn't squeeze the right side off-screen */
  .header-inner {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }


}