/*======================================
Theme Name: Divi 5 Child — Industrial Traffic
Theme URI: https://industrialtraffic.com
Description: A Child theme of Divi 5 with some basic stylings for our favorite plugins and a shortcode for the year attached.
Version: 2.2.0
Author: Industrial Traffic
Author URI: https://industrialtraffic.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! 
*/

:root {
    --itl-color-primary: #2c3e50;
    --itl-color-neutral: #7d7d7d;
    --itl-color-neutral-light: #f9f9f9;
    --itl-color-neutral-dark: #191919;
}

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

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

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

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

/* Line clamp utility classes */
[class^="line-clamp-"],
[class^="line-clamp-"] :where(p, div, span) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.line-clamp-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.line-clamp-5 {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.line-clamp-6 {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

[class^="line-clamp-"] :where(p, div, strong, span, a) {
  --webkit-line-clamp: inherit;
  line-clamp: inherit;
}

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

:where(h1, h2, h3, h4, h5, h6),
:where(.h1, .h2, .h3, .h4, .h5, .h6) {
  padding-bottom: 0 !important;
  overflow-wrap: normal;
  /* prevents single words breaking onto multiple lines */
  text-wrap: pretty;
}

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

/* List Items */
:where(li::marker) {
  color: currentColor;
}

/* Text/Link Selection */
:is(::selection, ::-moz-selection) {
  background-color: var(--gcid-secondary-color);
  color: white;
}

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

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

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

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;
}


/*** DIVI MODULE ENHANCEMENTS ***/

/* Show icon on open accordion items */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
  display: block !important;
  content: "\e04f" !important;
  color: #231f20 !important;
}



/*** GRAVITY FORMS STYLING ***/
.gform_wrapper .gform_fields {
  --gf-form-gap-y: 1rem;
}

.gform_wrapper .gform_required_legend {
  display: none !important;
}

.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: 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(--gcid-primary-color, var(--itl-color-neutral-dark));
}

/* ========= AGENCY SUPPORT BRANDING — EDIT THESE COLOR CODES =========
 * Colors below change only the Support Bridge FAQ, not the rest of Divi.
 * PRIMARY: buttons / selected categories
 * SECONDARY: heading / hero
 * ACCENT: support-request CTA
 * SURFACE: backgrounds
 * TEXT: body text
 */
:root {
  --itl-support-primary: #233b58;
  --itl-support-secondary: #1c2d46;
  --itl-support-accent: #a52632;
  --itl-support-surface: #f2f5f8;
  --itl-support-text: #273747;
  --itl-support-hero-end: #111d2f;
}