/*
Copyright (c) 2026 Doe & Co. Mechanical LLC

Theme Name: Doe & Co. HVAC
Theme URI: https://richpinsoftware.com
Description: Custom Theme for Doe & Co. Mechanical LLC
Version: 1.0
Author: Richard Pinegar | Rich Pin Software
Author URI: https://richpinsoftware.com
Tested up to: 7.0.1
Requires at least: 6.9.4
Requires PHP: 8.5.3
License: GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

TABLE OF CONTENTS:
 **  1.0 - Global Variables
 **  2.0 - CSS Reset
 **  3.0 - Wrappers
 **  4.0 - Header
 **  5.0 - Footer
 **  6.0 - Pages
 **  7.0 - Media Queries
 *
 **  Font styles at /assets/css/fonts.css
*/

/* 1.0 - Global Variables */
:root {
  --primary-rgb: 253, 147, 61;
  --secondary-rgb: 33, 157, 211;
  --light-rgb: 255, 255, 255;
  --shade-rgb: 240, 240, 240;
  --dark-rgb: 0, 0, 0;
  --primary-color: rgb(253, 147, 61);
  --secondary-color: rgb(33, 157, 211);
  --light-color: rgb(255, 255, 255);
  --shade-color: rgb(240, 240, 240);
  --dark-color: rgb(0, 0, 0);

  --header-height: 8.0rem;
  --site-max: 1400px;
  --space-xs: 0.5rem;
  --space-s: 1.0rem;
  --space-m: 1.5rem;
  --space-l: 2.0rem;
  --space-xl: 2.5rem;

  --text-shadow: clamp(0.05rem, 0.1vw, 0.08rem);
}

/* 2.0 - CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; /* Remove default margins */
}

html {
  scroll-behavior: smooth;
}

html, body {
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  line-height: clamp(2.0rem, 1.5vw + 1.0rem, 2.5rem);
  background-color: var(--light-color);
  min-height: 100dvh; /* Use dynamic viewport height for better mobile support */
}

.admin-bar { /* Adjust the min-height ONLY when the WP admin bar is present */
  min-height: calc(100vh - 2.0rem); /* 32px */
}

main, section {
  padding: 0;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fit, auto);
  margin-inline: auto;
}

h1, h3 {
  line-height: clamp(2.5rem, 3.0vw + 1.0rem, 5.0rem);
}

address {
  display: block;
}

button, i {
  display: inline-block;
}

button, a {
  cursor: pointer;
}

button, ul {
  padding: 0;
}

button {
  background: inherit;
  border: none;
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* 3.0 - Wrappers */
.wrapper,
.grid-wrapper,
.grid {
  display: grid;
}

.wrapper {
  gap: var(--space-s);
  max-width: var(--site-max);
  margin-inline: auto;
  padding: clamp(1.0rem, 1.5vw + 1.0rem, 2.5rem);
}

.grid-wrapper {
  gap: var(--space-s);
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fit, 1fr);
}

header .wrapper {
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  gap: 0;
  padding: clamp(0.5rem, 0.1vw + 0.5rem, 2.0rem) clamp(0.5rem, 0.25vw + 0.5rem, 1.0rem);
}

footer .wrapper {
  grid-template-columns: auto 1fr;
}

#home .wrapper {
  position: relative;
  min-height: 50vh;
}

#about .wrapper,
#services .grid-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
}

/* 4.0 - Header */
header .nav-links { /* Hide dropdown when not active */
  display: none;
}

header {
  align-content: center;
  height: var(--header-height);
  z-index: 1000;
  border-bottom: 0.0625rem solid var(--shade-color);
  box-shadow: 0px 0px 0.0625rem var(--secondary-color);
  background-color: var(--light-color);
}

header nav {
  justify-self: end; /* Push hamburger-button to the right */
}

header .hamburger-button svg {
  line-height: 1;
  vertical-align: middle;
  width: calc(var(--header-height) / 2);
  height: auto;
}

header .nav-links.active { /* Styles when nav menu is open */
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0px 0.125rem 0.25rem rgba(var(--dark-rgb), 0.2);
  background-color: var(--light-color);
  margin-inline: auto;
  max-width: calc(var(--site-max) + 3.125rem);
  & li {
    border-bottom: 0.0625rem solid var(--shade-color);
  }
  & a {
      display: flex;
      padding: var(--space-xs) 0;
      justify-content: center;
  }
  & a:hover, a:focus {
      color: var(--primary-color);
      border-right: 0.0625rem solid var(--shade-color);
      border-left: 0.0625rem solid var(--shade-color);
      background-color: rgba(var(--shade-rgb), 0.2);
  }
}

.admin-bar header .nav-links.active { /* Adjust the menu position ONLY when the WP admin bar is present */
  top: calc(var(--header-height) + 2.0rem); /* 32px */
}

header .logo-link { /* Company logo header link that wraps img */
  align-self: center;
  width: fit-content;
}

header .logo { /* Company logo header img */
  justify-self: start; /* Push to the left */
  width: auto;
  height: calc(var(--header-height) / 2);
}

/* 5.0 - Footer */
footer { /* Top border for definition and set font color */
  background-color: var(--primary-color);
  border-top: 0.0625rem solid var(--shade-color);
  color: var(--light-color);
}

footer nav {
  justify-self: end;
  text-align: right;
}

footer nav .grid {
  grid-template-rows: repeat(auto-fit, minmax(auto, 1fr));
}

footer .nav-links a:hover,
footer .nav-links a:focus {
  color: var(--secondary-color);
}

.site-credits {
  grid-template-rows: repeat(auto-fit, minmax(auto, 1fr));
  justify-items: start;
  align-items: end; /* Place copyright and credit at bottom of footer */
}

.site-credits .footer-img-wrapper {
  align-self: start;
  border-radius: var(--space-s);
  background-color: var(--light-color);
  padding: 0 var(--space-s);
}

.site-credits img { /* Place footer img at top of footer */
  align-self: start;
  max-width: 20.0rem;
  object-fit: contain;
}

.site-credits .dev-link {
  color: var(--primary-color);
}

.site-credits .copyright {
  display:inline-block;
}

/* 6.0 - Pages */
.docusign-nav li {
  margin: var(--space-s) 0;
  background-color: var(--shade-color);
  border: 1px solid var(--shade-color);
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  max-width: 50%;

  & a {
    display: flex;
    padding: var(--space-xs);
    transition: all 0.2s ease;
  }

  & a:hover, a:focus {
    color: var(--secondary-color);
    box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
}

#home .wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background:
    linear-gradient(transparent, rgba(var(--secondary-rgb), 0.6) 70% 100%),
    url("/wp-content/themes/doeandcohvac/assets/images/bg-boston-skyline.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#home { /* Set font color and text shadow for hero section */
  color: var(--light-color);
  text-shadow:
    var(--text-shadow)
    var(--text-shadow)
    var(--text-shadow)
    rgba(var(--dark-rgb), 0.8);
}

#home h1, h3 { /* For transform effect smooth transitions */
  transition: transform 0.9s ease;
}

#home h1 { /* Place on top of 2nd row */
  align-self: end;
}

#home h3 {
  color: var(--primary-color);
}

#home:hover,
#home:focus { /* Make hero section pop out when hovering over home page */
  & h1, h3 {
    transform:scale(1.015);
  }
}

#about article span { /* Set custom font color on company name */
  color: var(--primary-color);
}

#about summary { /* Set custom font color on expand button to stand out */
  color: var(--secondary-color);
  cursor: pointer;
}

#about img {
  justify-self: center;
}

#about .signature {
  padding: var(--space-xs) 0;
}

#services .grid { /* Image grid */
  grid-template-columns: [main-start] 1fr [main-end];
  grid-template-rows: [full-start] 1fr 1fr 1fr [cap-start] 1fr [full-end cap-end];
  height: 100%;
  transition: transform 0.5s ease; /* For transform effect smooth transitions */
}

#services img {
  grid-area: full / main;
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-color: var(--shade-color); /* Set bg color in case images don't load */
}

#services .overlay {
  grid-area: cap / main;
  align-content: center;
  z-index: 10;
  color: var(--primary-color);
  text-align: center;
  text-shadow:
    var(--text-shadow)
    var(--text-shadow)
    var(--text-shadow)
    rgba(var(--dark-rgb), 0.8);
  background: linear-gradient(transparent, rgba(var(--secondary-rgb), 0.6));
}

#services .grid:hover,
#services .grid:focus {
  transform:scale(1.015);
}

#contact address h3 {
  color: var(--primary-color);
  line-height: 0.9;
}

#contact address h5 {
  color: var(--secondary-color);
  padding-bottom: clamp(0.2rem, 0.25vw + 0.25rem, 1.0rem);;
}

#contact article h3 {
  color: var(--primary-color);
}

#contact article span,
#contact address span {
  display: block;
}

#contact aside.grid { /* Banners */
  grid-template-rows: repeat(auto-fit, 1fr);
  gap: var(--space-xs);
}

#contact aside.grid div,
#contact address.grid div {
  display: grid;
  grid-template-columns: calc(var(--space-m) + 0.25rem) auto;
  gap: var(--space-s);
}

#contact address div {
  margin-bottom: var(--space-xs);
  width: fit-content;
}

#contact address a:hover,
#contact address a:focus {
  color: var(--primary-color);
}

#contact aside.grid svg,
#contact address.grid svg { /* Make sure text lines up evenly next to icon */
  max-width: 100%;
  height: 100%;
  fill: var(--secondary-color);
}

#contact aside.grid span {
  justify-self: start;
}

/* 7.0 - Media Queries */
@media (min-width: 1400px) {
  header .wrapper,
  footer .wrapper { /* Remove left/right padding when max-width is exceeded */
    padding: clamp(1.0rem, 0.5vw + 1.0rem, 2.0rem) 0;
  }
}

@media (max-width: 980px) {
  #services .grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
}

@media (max-width: 819px) {
  .docusign-nav li {
    max-width: 100%;
  }
}

@media screen and (max-width: 782px) { /* WP admin bar height changes to 46px */
  :root {
    --header-height: 6.0rem;
  }
  .admin-bar {/* Adjust the min-height ONLY when the WP admin bar is present */
    min-height: calc(100vh - 32px);
  }

  /* Adjust the menu position ONLY when the WP admin bar is present */
  .admin-bar header .nav-links.active {
    top: calc(var(--header-height) + 46px);
  }
}

@media (max-width: 767px) {
  footer .wrapper { /* One column, two rows and content centered */
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, minmax(auto, 1fr));
  }
  footer nav { /* Move footer nav on top of credits */
    grid-row: 1 / 2;
    z-index: 10;
    justify-self: center;
    text-align: center;
  }
  .site-credits {
    grid-row: 2 / 2;
    z-index: 1;
    justify-items: center;
    text-align: center;
  }
  .site-credits img {
    display: none;
  }
}

@media (max-width: 400px) {
  :root {
    --header-height: 5.0rem;
  }
}

@media (max-width: 374px) {
  .site-credits .no-wrap {
    display: block;
  }
}