/**
Theme Name: Blown Gasket Creative Spectra One
Author: Blown Gasket Creative
Author URI: http://blowngasketcreative.com
Description: Custom theme built on Spectra One
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blown-gasket-spectra-one
Template: spectra-one
*/
/* Typography Scale
   Mobile Base: 18px, Scale: 1.20, Viewport: < 440px
   Desktop Base: 20px, Scale: 1.25, Viewport: > 440px
*/

:root {
  font-size: 18px; /* Mobile base font size */
}

body.home {
	#breadcrumbs {
		display: none;
	}
}

.alignright {
	float: right;
	margin-left: 10px
}

.alignleft {
	float: left;
	margin-right: 10px
}

.bgc-pages-content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 16px;
}
.bgc-footer-container {
  padding: 16px;
}

.inline-block {
	display: inline-block;
}

.navparent { 
  position: relative; 
  justify-content: center;
  align-items: center;

}
.hidden { display: none !important; }
.subnav { 
  position: absolute;
  z-index: 10; 
  top: 85px;
  width: 100%;
  left: 0;
  right: 0;
}
.nav-description {
	min-width: 300px;
}

.wp-block-query li.wp-block-post {
	display: flex;
}

.wpcf7 {
  input[type=text],
  input[type=tel],
  input[type=email] {
    padding: 10px;
    width: 100%;
    border: 1px solid #797979;
    border-radius: 5px;
    background: #e9e9e9;
  }
  textarea {
    padding: 10px;
    width: 100%;
    border: 1px solid #797979;
    border-radius: 5px;
    background: #e9e9e9;
  }
  input[type=submit] {
    padding: 12px;
    background-color: var(--wp--preset--color--primary);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 5px;
    border: 0;
    color: var(--wp--preset--color--background);
    cursor: pointer;

    &:hover {
            background-color: color-mix(in srgb, var(--wp--preset--color--primary), white 20%);
            color: var(--wp--preset--color--background);
    }
  }
  .wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 12px;
  }
}

/* Mobile Typography (< 440px) */
@media screen and (max-width: 440px) {
  .bgc-footer {
    padding: 16px 60px;
  }

  h1 {
    font-size: 2.798rem;  /* 44.8px */
    line-height: 1.2;     /* 53.76px */
  }

  h2 {
    font-size: 2.332rem;  /* 37.3px */
    line-height: 1.2;     /* 44.84px */
  }

  h3 {
    font-size: 1.938rem;  /* 31.1px */
    line-height: 1.2;     /* 37.3px */
  }

  h4 {
    font-size: 1.62rem;   /* 25.9px */
    line-height: 1.2;     /* 31.1px */
  }

  h5 {
    font-size: 1.35rem;   /* 21.6px */
    line-height: 1.2;     /* 25.9px */
  }

  .body {
    font-size: 1.125rem;  /* 18px */
    line-height: 1.2;     /* 21.6px */
  }

  .small {
    font-size: 0.9rem;    /* 15px */
    line-height: 1.2;     /* 18px */
  }

  .caption {
    font-size: 0.72rem;   /* 12.5px */
    line-height: 1.2;     /* 15px */
  }
}

/* Desktop Typography (≥ 440px) */
@media screen and (min-width: 440px) {
  :root {
    font-size: 20px; /* Desktop base font size */
  }

  .bgc-pages-content {
	gap: 30px;
	margin: 20px;
  }
  .bgc-footer-container {
    padding: 16px;
  }

  h1 {
    font-size: 3.052rem;  /* 61.04px */
    line-height: 1.25;    /* 76.3px */
  }

  h2 {
    font-size: 2.441rem;  /* 48.83px */
    line-height: 1.25;    /* 61.04px */
  }

  h3 {
    font-size: 1.953rem;  /* 39.06px */
    line-height: 1.25;    /* 48.83px */
  }

  h4 {
    font-size: 1.563rem;  /* 31.25px */
    line-height: 1.25;    /* 39.06px */
  }

  h5 {
    font-size: 1.25rem;   /* 25px */
    line-height: 1.25;    /* 31.25px */
  }

  .body {
    font-size: 1rem;      /* 20px */
    line-height: 1.25;    /* 25px */
  }

  .small {
    font-size: 0.8rem;    /* 16px */
    line-height: 1.25;    /* 20px */
  }

  .caption {
    font-size: 0.64rem;   /* 12.8px */
    line-height: 1.25;    /* 16px */
  }
}

:root {
  /* Primary (Blue) */
  --blue-lightest: #e7eff2;      /* rgb(231, 239, 242) */
  --blue-lighter: #dbe6ec;       /* rgb(219, 230, 236) */
  --blue-light: #b4ccd7;         /* rgb(180, 204, 215) */
  --blue: #0d5a7f;               /* rgb(13, 90, 127) */
  --blue-hover: #0c5172;         /* rgb(12, 81, 114) */
  --blue-active: #0a4866;        /* rgb(10, 72, 102) */
  --blue-dark: #0a445f;          /* rgb(10, 68, 95) */
  --blue-darker: #08364c;        /* rgb(8, 54, 76) */
  --blue-darkest: #051f2c;       /* rgb(5, 31, 44) */

  /* Secondary (Green) */
  --green-lightest: #eaf8f0;     /* rgb(234, 248, 240) */
  --green-lighter: #e0f4e8;      /* rgb(224, 244, 232) */
  --green-light: #bfe8cf;        /* rgb(191, 232, 207) */
  --green: #31b564;              /* rgb(49, 181, 100) */
  --green-hover: #2ca35a;        /* rgb(44, 163, 90) */
  --green-active: #279150;       /* rgb(39, 145, 80) */
  --green-dark: #25884b;         /* rgb(37, 136, 75) */
  --green-darker: #1d6d3c;       /* rgb(29, 109, 60) */
  --green-darkest: #113f23;      /* rgb(17, 63, 35) */

  /* Tertiary (Yellow) */
  --yellow-lightest: #fdf7ed;    /* rgb(253, 247, 237) */
  --yellow-lighter: #fdf3e4;     /* rgb(253, 243, 228) */
  --yellow-light: #fae6c8;       /* rgb(250, 230, 200) */
  --yellow: #efad4d;             /* rgb(239, 173, 77) */
  --yellow-hover: #d79c45;       /* rgb(215, 156, 69) */
  --yellow-active: #bf8a3e;      /* rgb(191, 138, 62) */
  --yellow-dark: #b3823a;        /* rgb(179, 130, 58) */
  --yellow-darker: #8f682e;      /* rgb(143, 104, 46) */
  --yellow-darkest: #543d1b;     /* rgb(84, 61, 27) */

  /* Supporting (Orange) */
  --orange-lightest: #faeeea;    /* rgb(250, 238, 234) */
  --orange-lighter: #f7e6df;     /* rgb(247, 230, 223) */
  --orange-light: #efcbbc;       /* rgb(239, 203, 188) */
  --orange: #cb5828;             /* rgb(203, 88, 40) */
  --orange-hover: #b74f24;       /* rgb(183, 79, 36) */
  --orange-active: #a24620;      /* rgb(162, 70, 32) */
  --orange-dark: #98421e;        /* rgb(152, 66, 30) */
  --orange-darker: #7a3518;      /* rgb(122, 53, 24) */
  --orange-darkest: #471f0e;     /* rgb(71, 31, 14) */

  /* Neutral 1 (Cool Grey) */
  --cool-grey-lightest: #eeeeee; /* rgb(238, 238, 238) */
  --cool-grey-lighter: #e6e6e6;  /* rgb(230, 230, 230) */
  --cool-grey-light: #cbcbcc;    /* rgb(203, 203, 204) */
  --cool-grey: #565759;          /* rgb(86, 87, 89) */
  --cool-grey-hover: #4d4e50;    /* rgb(77, 78, 80) */
  --cool-grey-active: #454647;   /* rgb(69, 70, 71) */
  --cool-grey-dark: #414143;     /* rgb(65, 65, 67) */
  --cool-grey-darker: #343435;   /* rgb(52, 52, 53) */
  --cool-grey-darkest: #1e1e1f;  /* rgb(30, 30, 31) */

  /* Neutral 2 (Warm Grey) */
  --warm-grey-lightest: #f6f5f5; /* rgb(246, 245, 245) */
  --warm-grey-lighter: #f1f0f0;  /* rgb(241, 240, 240) */
  --warm-grey-light: #e2e1e1;    /* rgb(226, 225, 225) */
  --warm-grey: #a39e9e;          /* rgb(163, 158, 158) */
  --warm-grey-hover: #938e8e;    /* rgb(147, 142, 142) */
  --warm-grey-active: #827e7e;   /* rgb(130, 126, 126) */
  --warm-grey-dark: #7a7777;     /* rgb(122, 119, 119) */
  --warm-grey-darker: #625f5f;   /* rgb(98, 95, 95) */
  --warm-grey-darkest: #393737;  /* rgb(57, 55, 55) */
}

/* Background Colors */
.bg-blue-lightest { background-color: var(--blue-lightest); }
.bg-blue-lighter { background-color: var(--blue-lighter); }
.bg-blue-light { background-color: var(--blue-light); }
.bg-blue { background-color: var(--blue); }
.bg-blue-dark { background-color: var(--blue-dark); }
.bg-blue-darker { background-color: var(--blue-darker); }
.bg-blue-darkest { background-color: var(--blue-darkest); }

.bg-green-lightest { background-color: var(--green-lightest); }
.bg-green-lighter { background-color: var(--green-lighter); }
.bg-green-light { background-color: var(--green-light); }
.bg-green { background-color: var(--green); }
.bg-green-dark { background-color: var(--green-dark); }
.bg-green-darker { background-color: var(--green-darker); }
.bg-green-darkest { background-color: var(--green-darkest); }

.bg-yellow-lightest { background-color: var(--yellow-lightest); }
.bg-yellow-lighter { background-color: var(--yellow-lighter); }
.bg-yellow-light { background-color: var(--yellow-light); }
.bg-yellow { background-color: var(--yellow); }
.bg-yellow-dark { background-color: var(--yellow-dark); }
.bg-yellow-darker { background-color: var(--yellow-darker); }
.bg-yellow-darkest { background-color: var(--yellow-darkest); }

.bg-orange-lightest { background-color: var(--orange-lightest); }
.bg-orange-lighter { background-color: var(--orange-lighter); }
.bg-orange-light { background-color: var(--orange-light); }
.bg-orange { background-color: var(--orange); }
.bg-orange-dark { background-color: var(--orange-dark); }
.bg-orange-darker { background-color: var(--orange-darker); }
.bg-orange-darkest { background-color: var(--orange-darkest); }

.bg-cool-grey-lightest { background-color: var(--cool-grey-lightest); }
.bg-cool-grey-lighter { background-color: var(--cool-grey-lighter); }
.bg-cool-grey-light { background-color: var(--cool-grey-light); }
.bg-cool-grey { background-color: var(--cool-grey); }
.bg-cool-grey-dark { background-color: var(--cool-grey-dark); }
.bg-cool-grey-darker { background-color: var(--cool-grey-darker); }
.bg-cool-grey-darkest { background-color: var(--cool-grey-darkest); }

.bg-warm-grey-lightest { background-color: var(--warm-grey-lightest); }
.bg-warm-grey-lighter { background-color: var(--warm-grey-lighter); }
.bg-warm-grey-light { background-color: var(--warm-grey-light); }
.bg-warm-grey { background-color: var(--warm-grey); }
.bg-warm-grey-dark { background-color: var(--warm-grey-dark); }
.bg-warm-grey-darker { background-color: var(--warm-grey-darker); }
.bg-warm-grey-darkest { background-color: var(--warm-grey-darkest); }

/* Text Colors */
.text-blue-lightest { color: var(--blue-lightest); }
.text-blue-lighter { color: var(--blue-lighter); }
.text-blue-light { color: var(--blue-light); }
.text-blue { color: var(--blue); }
.text-blue-dark { color: var(--blue-dark); }
.text-blue-darker { color: var(--blue-darker); }
.text-blue-darkest { color: var(--blue-darkest); }

.text-green-lightest { color: var(--green-lightest); }
.text-green-lighter { color: var(--green-lighter); }
.text-green-light { color: var(--green-light); }
.text-green { color: var(--green); }
.text-green-dark { color: var(--green-dark); }
.text-green-darker { color: var(--green-darker); }
.text-green-darkest { color: var(--green-darkest); }

.text-yellow-lightest { color: var(--yellow-lightest); }
.text-yellow-lighter { color: var(--yellow-lighter); }
.text-yellow-light { color: var(--yellow-light); }
.text-yellow { color: var(--yellow); }
.text-yellow-dark { color: var(--yellow-dark); }
.text-yellow-darker { color: var(--yellow-darker); }
.text-yellow-darkest { color: var(--yellow-darkest); }

.text-orange-lightest { color: var(--orange-lightest); }
.text-orange-lighter { color: var(--orange-lighter); }
.text-orange-light { color: var(--orange-light); }
.text-orange { color: var(--orange); }
.text-orange-dark { color: var(--orange-dark); }
.text-orange-darker { color: var(--orange-darker); }
.text-orange-darkest { color: var(--orange-darkest); }

.text-cool-grey-lightest { color: var(--cool-grey-lightest); }
.text-cool-grey-lighter { color: var(--cool-grey-lighter); }
.text-cool-grey-light { color: var(--cool-grey-light); }
.text-cool-grey { color: var(--cool-grey); }
.text-cool-grey-dark { color: var(--cool-grey-dark); }
.text-cool-grey-darker { color: var(--cool-grey-darker); }
.text-cool-grey-darkest { color: var(--cool-grey-darkest); }

.text-warm-grey-lightest { color: var(--warm-grey-lightest); }
.text-warm-grey-lighter { color: var(--warm-grey-lighter); }
.text-warm-grey-light { color: var(--warm-grey-light); }
.text-warm-grey { color: var(--warm-grey); }
.text-warm-grey-dark { color: var(--warm-grey-dark); }
.text-warm-grey-darker { color: var(--warm-grey-darker); }
.text-warm-grey-darkest { color: var(--warm-grey-darkest); }

/* Border Colors */
.border-blue-lightest { border-color: var(--blue-lightest); }
.border-blue-lighter { border-color: var(--blue-lighter); }
.border-blue-light { border-color: var(--blue-light); }
.border-blue { border-color: var(--blue); }
.border-blue-dark { border-color: var(--blue-dark); }
.border-blue-darker { border-color: var(--blue-darker); }
.border-blue-darkest { border-color: var(--blue-darkest); }

.border-green-lightest { border-color: var(--green-lightest); }
.border-green-lighter { border-color: var(--green-lighter); }
.border-green-light { border-color: var(--green-light); }
.border-green { border-color: var(--green); }
.border-green-dark { border-color: var(--green-dark); }
.border-green-darker { border-color: var(--green-darker); }
.border-green-darkest { border-color: var(--green-darkest); }

.border-yellow-lightest { border-color: var(--yellow-lightest); }
.border-yellow-lighter { border-color: var(--yellow-lighter); }
.border-yellow-light { border-color: var(--yellow-light); }
.border-yellow { border-color: var(--yellow); }
.border-yellow-dark { border-color: var(--yellow-dark); }
.border-yellow-darker { border-color: var(--yellow-darker); }
.border-yellow-darkest { border-color: var(--yellow-darkest); }

.border-orange-lightest { border-color: var(--orange-lightest); }
.border-orange-lighter { border-color: var(--orange-lighter); }
.border-orange-light { border-color: var(--orange-light); }
.border-orange { border-color: var(--orange); }
.border-orange-dark { border-color: var(--orange-dark); }
.border-orange-darker { border-color: var(--orange-darker); }
.border-orange-darkest { border-color: var(--orange-darkest); }

.border-cool-grey-lightest { border-color: var(--cool-grey-lightest); }
.border-cool-grey-lighter { border-color: var(--cool-grey-lighter); }
.border-cool-grey-light { border-color: var(--cool-grey-light); }
.border-cool-grey { border-color: var(--cool-grey); }
.border-cool-grey-dark { border-color: var(--cool-grey-dark); }
.border-cool-grey-darker { border-color: var(--cool-grey-darker); }
.border-cool-grey-darkest { border-color: var(--cool-grey-darkest): }

/* Hover state classes */
.hover\:bg-blue:hover { background-color: var(--blue-hover); }
.hover\:bg-green:hover { background-color: var(--green-hover); }
.hover\:bg-yellow:hover { background-color: var(--yellow-hover); }
.hover\:bg-orange:hover { background-color: var(--orange-hover); }
.hover\:bg-cool-grey:hover { background-color: var(--cool-grey-hover); }
.hover\:bg-warm-grey:hover { background-color: var(--warm-grey-hover); }

/* Active state classes */
.active\:bg-blue:active { background-color: var(--blue-active); }
.active\:bg-green:active { background-color: var(--green-active); }
.active\:bg-yellow:active { background-color: var(--yellow-active); }
.active\:bg-orange:active { background-color: var(--orange-active); }
.active\:bg-cool-grey:active { background-color: var(--cool-grey-active); }
.active\:bg-warm-grey:active { background-color: var(--warm-grey-active); }