/*
 Theme Name: OnPoint Mechanical Child Theme
 Description: Child theme to hold site-specific CSS for OnPoint Mechanical.
 Author: JBWeb
 Version: 1.0.0
 Template: genesis-block-theme
 Text Domain: onpoint-mechanical-child
*/

/* =========================================================
   Global Styles (Consolidated)
   ======================================================= */

/* ------------------------------
   Root Tokens
   ------------------------------ */
   :root{
    /* Radii & Spacing */
    --radius: .5125rem;
    --padding: clamp(2rem, 4vw, 2rem);
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
  
    /* Borders & Effects */
    --border: 2px;
    --border-thick: 3px;
    --transition-fast: .15s ease-in-out;
    --shadow-soft: 5px 8px 10px rgba(0,0,0,.06);
  
    /* Colors */
    --color-cta: #ffc834;
    --color-primary: #296595;
    --color-secondary: #185AA8;
    --color-dark: #0F2F4F;
    --color-dark-grey: #333333;
    --color-light-grey: #f3f3f3;
    --color-light: #ffffff; 
  
    --color-text-on-dark: #ffffff;
    --color-text-on-light: #0f1b2d;
  
    /* Layout */
    --content-max: 1200px; /* static */
    --content-max-fluid: clamp(1100px, 65vw, 1800px); /* fluid responsive */
    --content-pad: clamp(16px, 4vw, 40px);
  
    /* Hero Section */
    --hero-neg-margin: -3rem;
    --hero-form-offset: -7vh;
    --hero-form-width: 30vw;
    --hero-logo-width-desktop: 13vw;
    --hero-logo-gap: 1rem;
  }
  
  /* ------------------------------
     Hide Default WP Elements
     ------------------------------ */
  .entry-header,
  .site-title,
  .site-description,
  .footer-tagline { display: none; }
  
  /* ------------------------------
     Utilities & Custom Classes
     ------------------------------ */
  .custom-logo { width: 15rem; max-width: 100%; }
  .has-padding { padding: var(--padding); }
  .has-radius { border-radius: var(--radius); }
  .section-spacing { padding: var(--space-xl) var(--space-xl) 0; }
  .testimonial-stars { margin-top: calc(-1 * var(--space-xl)); }
  .negative-margin { margin-top: calc(-2 * var(--space-xl)); }
  .stack-tablet {display: flex;
		flex-wrap: wrap;}
  @media (max-width: 999px) and (min-width: 780px) {
  .stack-tablet {
    flex-direction: column;
    align-items: center; 
    text-align: center;  }
  .stack-tablet > * {
    width: 100%;  }
   }

	@media (max-width: 780px) {
  .force-full-mobile {
    max-width: 100% !important;
    margin-inline: 0 !important; }
  }

 .mobile-break { display: none; }
 @media (max-width: 780px) { 
	 .mobile-break { display: inline; } }


  /* =========================================================
     Gutenberg Alignments
     ======================================================= */
  .wp-block[data-align="wide"],
  .alignwide {
    max-width: var(--content-max-fluid);
    margin-inline: auto;
  }
  
  .alignfull {
    max-width: 100%;
    margin-inline: 0;
  }

  li + li {margin-top: 0 !important;}
  
  /* =========================================================
     Navigation
     ======================================================= */
  
  .main-navigation a,
  .wp-block-navigation a{
    text-decoration: none;
    font-weight: 500 !important;
    color: var(--color-text-on-light);
    padding-top: 1.6rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
  
  .mobile-navigation,
  .drawer,
  .sub-menu,
  .toggle-sub { background-color: var(--color-dark) !important; }
  
  .sub-menu { margin-top: var(--space-sm) !important; }
  ul.sub-menu::before { display: none !important; }
  
  /* =========================================================
     Buttons
     ======================================================= */
  
  /* Base */
  .btn,
  .wp-block-button .wp-block-button__link,
  input[type='submit']{
    display: inline-block;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    transition: all var(--transition-fast);
  }
  
  /* Filled / Primary */
  .btn-primary,
  .wp-block-button:not(.is-style-outline, .service-btns) .wp-block-button__link,
  .wp-block-button.is-style-fill .wp-block-button__link,
  input[type='submit']{
    background: var(--color-cta);
    border: var(--border) solid var(--color-cta);
    color: var(--color-text-on-light) !important;
  }
  
  .btn-primary:hover,
  .wp-block-button:not(.is-style-outline, .service-btns) .wp-block-button__link:hover,
  .wp-block-button.is-style-fill .wp-block-button__link:hover,
  input[type='submit']:hover{
    background: var(--color-cta);
    color: var(--color-text-on-dark) !important;
    text-decoration: none !important;
  }
  
  /* Outline */
  .btn-outline,
  .wp-block-button.is-style-outline .wp-block-button__link{
    background: transparent;
    color: var(--color-text-on-dark) !important;
    border: var(--border-thick) solid var(--color-text-on-dark);
  }
  
  .btn-outline:hover,
  .wp-block-button.is-style-outline .wp-block-button__link:hover{
    border-color: var(--color-text-on-dark);
    color: var(--color-text-on-dark) !important;
    text-decoration: none !important;
  }
  
  .service-btns {color: var(--color-text-on-light)!important;
  border-color: var(--color-text-on-dark);}
  
  .service-btns:hover {
    border-color: var(--color-text-on-light);
    color: var(--color-text-on-light);
    text-decoration: none !important;
  }
  
  .call-button {
    font-size: 1rem;
    color: var(--color-light) !important;
    font-weight: bold;
    box-shadow: none !important;
  }
  
  /* =========================================================
     Lists / Cards
     ======================================================= */
  
  .value-card{
    padding: var(--space-sm) var(--space-lg);
    border: var(--border) solid var(--color-light-grey);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
  }
  
  .value-card ul{
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
  }
  
  .value-card li,
  .proof-list li{
    position: relative;
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0;
    line-height: 1.5;
  }
  
  .value-card li::before,
  .proof-list li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
  }
  
  .proof-list{
    list-style: none;
    padding: 0;
    margin: var(--space-2xs) 0 0;
  }
  
  .cta-pills{
    list-style: none;
    margin-left: calc(-1 * var(--space-xl));
    margin-bottom: calc(-.5 * var(--space-xl));
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  
  .cta-pills li{
    border: var(--border) solid var(--color-light-grey);
    border-radius: var(--radius);
    padding: var(--space-2xs) var(--space-sm);
    line-height: 1.3;
  }

  @media (max-width: 900px){
    .value-card { margin-top: var(--space-md); }
  }
  
  /* =========================================================
     Carousel
     ======================================================= */
 .carousel{
    margin-left: var(--space-2xl);
    margin-right: var(--space-2xl);
    margin-top: calc(-2 * var(--space-xl));
    padding: var(--space-xl);
  }
  
  .carousel-slide{
    background: var(--color-light);
    color: var(--color-text-on-light);
    padding: var(--space-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
  }

   @media (max-width: 780px){ 
	 .carousel { 
		 padding: var(--space-sm) !important; 
		 }
		 
		 .carousel-slide {padding: var(--space-sm) !important;
		 box-shadow: none !important;}
		 
		 .cb-button-prev {
			 padding: 1.5rem;
			 margin-left: -1rem;
             }
		 .cb-button-next {
			 padding: 1.5rem;
			 margin-right: -1rem;
             }
    }
  
  /* =========================================================
     Contact Form 7
     ======================================================= */
  .wpcf7 form input[type="tel"]{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block;
  }

  @media (max-width: 780px){
    .wpcf7 form input[type="tel"]{ width: 100% !important; }
  }
  
  /* =========================================================
     Footer
     ======================================================= */
  
  .site-footer{
    color: var(--color-text-on-dark);
    background: transparent;
    transform: none !important;
    margin-bottom: 0;
    margin-top: calc(-1.5 * var(--space-xl));
    padding-bottom: 0;
    display: flow-root;
  }
  
  .footer-section{ width: 100%; position: relative; }
  .has-bg-primary{ background: var(--color-primary); }
  .has-bg-dark{ background: var(--color-dark); }
  
  .footer-wrap{
    max-width: var(--content-max-fluid);
    margin-inline: auto;
    padding-inline: var(--content-pad);
    padding-block: clamp(2rem, 4vw, 4rem);
  }
  
  .footer-wrap--narrow{ max-width: calc(var(--content-max) - 80px); }
  
  .footer-learn-more{ color: var(--color-text-on-dark); }
  
  .footer-learn-more__inner{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
  }
  
  .footer-learn-more__text h2{ margin-bottom: var(--space-sm); }
  .footer-learn-more__text p{ margin: 0 0 var(--space-sm); max-width: 58ch; }
  
  .footer-learn-more__media video,
  .footer-learn-more__media iframe{
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-text-on-light);
    border: 0;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
  }
  
  .footer-quick-info{ color: var(--color-text-on-dark); border: none; }
  
  .footer-quick-info__grid{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  
  .footer-quick-info h3{ margin-bottom: var(--space-xs); }
  .footer-contact p,
  .footer-hours p{ margin: 0 0 var(--space-xs); }
  
  .footer-bottom{
    background: var(--color-dark-grey);
    color: var(--color-text-on-dark);
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  .footer-bottom .footer-wrap{
    padding-block: clamp(10px, 1.2vw, 18px);
  }
  
  .footer-legal__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    justify-content: center;
    text-align: center;
  }
  
  .footer-legal__list a{
    color: var(--color-text-on-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-size: clamp(.95rem, 0.2vw + .9rem, 1rem);
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
  
  .footer-legal__list a:hover{
    color: var(--color-secondary);
    border-color: var(--color-secondary);
  }
  
  .footer-navigation{ margin-top: .5rem; text-align: center; }
  
  .footer-navigation a{
    color: var(--color-text-on-dark);
    text-decoration: none;
    font-size: clamp(.95rem, 0.2vw + .9rem, 1rem);
    transition: color var(--transition-fast);
  }
  
  .footer-navigation a:hover{
    color: var(--color-secondary);
    text-decoration: none;
  }
  
  .site-footer > :last-child{ margin-bottom: 0; }

  @media (max-width: 960px){
    .footer-learn-more__inner,
    .footer-quick-info__grid{
      grid-template-columns: 1fr;
    }
    .footer-learn-more__media{ order: -1; }
  }

  @media (max-width: 680px){
    .footer-legal__list{ gap: .5rem .75rem; }
  }
 
  
  /* =========================================================
     Hero Section
     ======================================================= */
  
  .hero-magnitude-signals {
    margin-top: var(--hero-neg-margin);
    padding-top: var(--space-xl);
  }
  
  .hero-h1 { margin-bottom: .25em !important; }
  
  .hero-separator {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  @media (min-width: 1000px) {
    .hero-cover-sync { overflow: visible; }
  
    .hero-cover-sync .form-container {
      position: absolute;
          max-width: 550px;
      left: 75%;
      transform: translateX(-70%);
    }
  
    .form-container {
      margin-top: var(--hero-form-offset);
      width: var(--hero-form-width);
      z-index: 9999;
    }
  
    .hero-logo-row img {
      padding-left: var(--space-2xs);
      padding-right: var(--space-2xs);
      width: var(--hero-logo-width-desktop);
    }
    
    .hero-logo-row {
      display: grid !important;
      /*grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));*/
		grid-template-columns: 1fr 1fr;
      padding: var(--space-sm);
      margin-bottom: var(--space-xl);
      width: 42vw;
      margin-left: -1em;
    } 
  
    .hero-logo-row img {
      display: block;
      margin: 0 auto;
      height: auto;
    }
  }
  @media (min-width: 400px) and (max-width: 999px) {
    .hero-logo-row {
      display: grid !important;
    /*  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));*/
	  grid-template-columns: 1fr 1fr;
      gap: 20% 10%;
      width: 100% !important;
      margin-bottom: var(--space-xl);
      margin-inline: auto;
      padding: var(--space-sm);
      justify-content: center;
      justify-items: center;
      align-items: center;
    }
}
  @media (max-width: 400px) {
    .hero-logo-row {
      display: grid !important;
	  grid-template-columns: 1fr;
      gap: 40px;
    }
}
  @media (min-width: 1000px) and (max-width: 1399px) {
	  input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="tel"], input[type="time"], input[type="month"], input[type="tel"], textarea, select, .select2-container .select2-selection--single{
		  padding: 10px;
	  }
}
  
  @media (max-width: 999px) {
    .hero-cover-2 { padding: var(--space-xl); }
  
    .hero-h1 { margin-top: var(--space-xl); }
  
    .hero-magnitude-signals { text-align: center !important; }
    
    .hero-separator { margin-top: calc(-1 * var(--space-xl)) !important; }
  }

	/* Form Headshot Image */

	.form-container {
	  position: relative;
		padding-top: 2em;
	}

	.form-headshot {
	  position: absolute;
	  top: -4em; 
	  left: 65%;
	  z-index: 10;
	}

	.form-headshot img {
	  border: 6px solid var(--color-primary);
	}

	@media (max-width: 999px) {
	  .form-headshot {
		top: -2.5em;
		left: 65%; 
        transform: translateX(2%);
	  }
	}

	@media (max-width: 780px) {
	  .form-headshot {
		left: 60%; 
		transform: translateX(-3%);
	  }
	  .form-headshot img {
		width: 75px;
		height: 75px;
		border: 5px solid var(--color-primary);
	  }
	  .form-container {
		padding-top: 4rem;
	  }
	}

	/* Alternative Hero Form Headshot Image */

	.form-container-alt {
	  position: relative;
	  padding-top: 2em; 
		margin-top: 3em;
	}

	.form-headshot-alt {
	  position: absolute;
	  top: -4em;
	  left: 65%;
	  z-index: 10;
	}

	.form-headshot-alt img {
	  width: 100px;
	  height: 100px;
	  border-radius: 50%;
	  border: 6px solid var(--color-primary);
	  object-fit: cover;
	}

    @media (max-width: 1285px) {
	  .form-headshot-alt {
		top: -1.7em;
		left: 55%;
		transform: translateX(-5%);
	  }
		.form-container-alt {
	  padding-top: 4.2em; 
	 }
	}

	@media (max-width: 999px) {
	  .form-headshot-alt {
		top: -3em;
		left: 55%;
		transform: translateX(2%);
	  }
		.form-container-alt {
	  padding-top: 4.2em; 
	 }
	}

	@media (max-width: 780px) {
	  .form-headshot-alt {
		top: -3.2em;
		left: 60%; 
		transform: translateX(-3%);
	  }

	  .form-headshot-alt img {
		width: 75px;
		height: 75px;
		border: 5px solid var(--color-primary);
	  }

	  .form-container-alt {
		padding-top: 3em; 
				margin-top: 1em;
	  }
	}