/*======================================
Theme Name: Divi Child
Theme URI: https://loudcanvas.com
Description: A Child theme of Divi with some basic stylings for our favorite plugins and a shortcode for the year attached.
Version: 1.3.1
Author: Samuel Wood - Loud Canvas Media
Author URI: https://loudcanvas.com
Template: Divi
======================================*/

/*This stylesheet is required by Wordpress to function with the Parent Divi theme.
 * You can alter anything below here. Ready made mobile queries and a table of contents has been
 * created for you. Including basic Gravity Forms styling, :selection styling, and some helper classes.
 * 
 * Happy Coding! 
 * -Samuel Wood
*/

/*
 * Table of Contents
 * a. Helper Classes
 * 1. Typography
 * 2. Global Elements
 * 3. Modules
 * 4. Page Specific CSS
 * 5. Mobile
 * 
*/

:root {
  --circuit-color-primary: #003466;
  --circuit-color-secondary: #900001;
  --circuit-color-primary-light: #76a5d1;
  --circuit-color-neutral: #6d7d8d;
  --circuit-color-neutral-light: #E9EBED;
  --circuit-color-neutral-dark: #18161f;
}

/* Enable Smooth Scrolling */
html,
body {
  scroll-behavior: smooth;
  scroll-padding-top: calc(3rem + var(--wp-admin--admin-bar--height));
}

/* 
********
a. Helper Classes
********
*/


.text-right {
  text-align: right;
}

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

img.img-square,
.img-square img {
  aspect-ratio: 1;
  object-fit: cover;
}

img.img-landscape,
.img-landscape img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/** Add to a Divi text module with H2 + H3
 * Many designs utilize a small heading (H3) directly ABOVE a larger heading (H2).
 * However, headings should always be listed in descending order for SEO & accessibility purposes.
 * This class will reverse the visible order using CSS, while maintaining the heirarchical heading structure.
 */
.heading-reverse .et_pb_text_inner {
  display: flex;
  flex-direction: column;
}

.heading-reverse h3 {
  order: -1;
}

@media (min-width: 768px) {
  .inline-buttons .et_pb_button {
    float: left;
    margin-right: 1.6em;
  }
}

.column-50-sm {
  width: 50%;
  float: left;
  font-size: 16px;
}

/* Small mobile */
@media only screen and (max-width : 450px) {
  .column-50-sm {
    width: 100%;
    float: none;
  }
}

/* Tablet and smaller */
@media only screen and (max-width: 980px) {

  /*Add the mflip class to the custom css of a row to reverse order of elements on mobile*/
  .mflip {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    display: flex;
    flex-direction: column-reverse !important;
    gap: 3rem;
  }

  /*Add the two-columns class on row css to keep modules in two columns on mobile*/
  .two-columns .et_pb_column {
    --two-col-gap: 5vw;
    width: calc(50% - var(--two-col-gap) / 2) !important;
  }

  .two-columns .et_pb_column:nth-of-type(2n -1) {
    margin-right: var(--two-col-gap) !important;
  }

  .two-columns .et_pb_column:nth-of-type(3).et-last-child {
    width: 100% !important;
    margin-right: 0 !important;
    display: flex;
    gap: var(--two-col-gap);
  }

  /* Always show desktop menu in footer */
  footer .et_pb_menu__menu {
    display: flex !important;
  }

  footer .et_mobile_nav_menu {
    display: none !important;
  }
}



/* 
********
1. Typography
********
*/

/** Heading Levels 
 * (use classes to style headings w/o breaking proper semantic heading structure) 
 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: bold;
  line-height: 1.3em;
  overflow-wrap: normal;
  /* prevents single words breaking onto multiple lines */
  text-wrap: pretty;
}

@media screen and (max-width: 768px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    text-align: center;
  }
}

/** Responsive Font Size 
  * (check out this fun tool --> https://chrisburnell.com/clamp-calculator)
  * font-size: clamp( MIN, (SUGGESTED), MAX )
  */
:is(h1, .h1) {
  font-size: clamp(48px, (5vw + 1rem), 84px);
  line-height: 1;
}

:is(h2, .h2) {
  font-size: clamp(20px, (0.75vw + 1rem), 32px);
}

:is(h3, .h3) {
  font-size: clamp(19px, (0.5vw + 1rem), 24px);
}

:is(h4, .h4) {
  font-size: clamp(18px, (0.5vw + 1rem), 22px);
}

:is(h5, .h5) {
  font-size: clamp(18px, (0.5vw + 1rem), 20px);
}

:is(h6, .h6) {
  font-size: 18px;
}

/* Prevent rampant textarea resizing */
textarea {
  resize: vertical;
}

/* List Items */
li::marker {
  color: var(--circuit-color-primary);
}

/* Text/Link Selection */
:is(::selection, ::-moz-selection) {
  background-color: var(--circuit-color-primary);
  color: var(--circuit-color-neutral-light);
}

/* Focus States */
:is(a, button, input, textarea, select, option, datalist):focus-visible {
  outline-color: var(--circuit-color-primary);
  outline-offset: 0.5rem;
}

/* Placeholder Text */
:is(::placeholder, ::-moz-placeholder, ::-webkit-input-placeholder) {
  color: var(--circuit-color-neutral);
}

/* Prevent phone numbers & email addresses from wrapping onto multiple lines */
a[href*="tel:"],
a[href*="mailto:"] {
  white-space: nowrap;
}

/* Add External Link icon to all outbound links in header */
header a[href]:not([href="/"], [href="#"], [href*="circuitrework.com"], [href*="lcmdev.net"])::after,
.external-link a::after,
a.external-link::after {
  content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4542 0H7.09068C6.78944 0 6.54523 0.24421 6.54523 0.545442C6.54523 0.846674 6.78944 1.09088 7.09068 1.09088H10.1374L4.52325 6.705C4.31028 6.91797 4.31028 7.26334 4.52325 7.47635C4.62973 7.58282 4.76932 7.6361 4.90891 7.6361C5.0485 7.6361 5.18811 7.58282 5.29456 7.47633L10.9088 1.86223V4.90893C10.9088 5.21016 11.153 5.45437 11.4542 5.45437C11.7555 5.45437 11.9997 5.21016 11.9997 4.90893V0.545442C11.9997 0.24421 11.7555 0 11.4542 0Z' fill='%2318161F'/%3E%3Cpath d='M9.2725 5.45417C8.97127 5.45417 8.72705 5.69838 8.72705 5.99962V10.9085H1.09087V3.27243H5.99986C6.3011 3.27243 6.54531 3.02822 6.54531 2.72699C6.54531 2.42575 6.3011 2.18157 5.99986 2.18157H0.545448C0.244213 2.18157 0 2.42578 0 2.72701V11.454C0 11.7552 0.244213 11.9994 0.545448 11.9994H9.27253C9.57376 11.9994 9.81797 11.7552 9.81797 11.454V5.99962C9.81795 5.69838 9.57374 5.45417 9.2725 5.45417Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  margin-left: 0.6em;
}
.external-link a::after,
a.external-link::after {
  filter: invert(1);
  -webkit-filter: invert(1);
}

/* Mega Menu/Divi fix */
p:empty {
  display: none;
}

/* 
********
2. Global Elements 
********
*/

/* Header: Add CSS for collapsible menu items for header
     * To use add .first-level to parent menu item
     * Add .second-level to child menu item
     */
.et_mobile_menu .first-level>a {
  background-color: transparent;
  position: relative;
}

.et_mobile_menu .first-level>a:after {
  font-family: 'ETmodules';
  content: '\4c';
  font-weight: normal;
  position: absolute;
  font-size: 16px;
  top: 13px;
  right: 10px;
}

.et_mobile_menu .first-level>.icon-switch:after {
  content: '\4d';
}

.second-level {
  display: none;
}

.reveal-items {
  display: block;
}

/* Mobile Menu - Prevent Overflow / Scroll Lock */
.et_pb_menu .et_mobile_menu {
  padding: 0;
  /* Full viewport height, minus the height of the menu bar (and wp-admin bar if present) */
  max-height: calc(100vh - 100px - var(--wp-admin--admin-bar--height, 0px));
  overflow-y: auto;
}



/*** FIELD STYLING ***/
.gform_wrapper input[type=text],
textarea {
  font-size: 18px;
  background: #ffffff;
  border: none;
  color: var(--circuit-color-neutral-dark);
  padding: 10px;
  border: 3px solid var(--circuit-color-primary);
}

.gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text],
.gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
  margin: 0px !important;
}

.gfield .ginput_container.ginput_recaptcha {
  float: left;
}

#gform_wrapper_1 .gform_footer {
  padding: 50px 0 10px 0;
  margin: 16px 0 0 0;
  clear: none !important;
  width: 100%;
}

.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select {
  border: 0px;
  padding: 5px 0px;
  margin-top: 10px;
  border: 3px solid var(--circuit-color-primary);
}

/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button {
  float: right;
  padding: 5px 30px;
  border-radius: 3px;
  border: 2px solid var(--circuit-color-neutral-dark);
  background: #ffffff;
  color: var(--circuit-color-neutral-dark);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: .4s ease all;
}

/*** BUTTON HOVER STYLING ***/
.gform_wrapper .gform_footer input.button:hover {
  background: var(--circuit-color-primary);
  color: #ffffff;
  border: 2px solid transparent;
}

/*
********
3. Modules 
********
*/



/* 
********
4. Page Specific CSS 
********
*/