/*

Theme Name: Pro – MCC
Theme URI: https://theme.co/pro/
Author: Foundation Software
Author URI: https://foundationsoft.com/
Description: Cornerstone Child Theme for McCormick.
Version: 2025.11.1
Template: pro

*/
:root {
  --mcc-green: #009345;
  --mcc-green-dark: #074625;
  --mcc-green-darker: #05351C;
  --mcc-green-darkest: #042312;
  --foundation-black: #000000;
  --foundation-white: #ffffff;
  --lime-80-lighter: #E8F3D9;
  --lime-60-lighter: #D1E8B2;
  --lime-40-lighter: #B9DC8C;
  --lime-20-lighter: #A2D165;
  --lime: #8BC53F;
  --orange: #F28225;
  --yellow: #F8C01B;
  --turquoise: #1D8599;
  --sky-blue: #00AEEF;
  --sky-blue-20-ligher: #33BEF2;
  --sky-blue-40-ligher: #66CEF5;
  --sky-blue-60-ligher: #99DFF9;
  --sky-blue-80-ligher: #CCEFFC;
  --royal-blue: #254E77;
  --lt-gray-80-lighter: #EEEFEE;
  --lt-gray-60-lighter: #DEDEDE;
  --lt-gray-40-lighter: #CDCECD;
  --lt-gray-20-lighter: #BDBDBD;
  --lt-gray: #ACADAC;
  --gray: #58585A;
  --dk-gray: #353434;
  --link: #0C92D0;
  --link-interaction: #535353;
  --link-alt: #009354;
  --link-interaction-alt: #8DC63F;
  --brand-secondary: #333333;
  --brand-primary: #F8C01B;
  --link-interaction-dark: #0a0b0f;
  --link-dark: #393939;
  --brand-secondary-alt: #edbf45;
}

body {
  font-family: "proxima-nova", sans-serif;
}

.x-text.x-content a {
  text-decoration: underline;
}

.lime-blue-gradient {
  background: linear-gradient(90deg, var(--lime) 0%, var(--sky-blue) 100%);
}

.multi-gradient {
  background: linear-gradient(282deg, var(--mcc-green) 0%, var(--lime-40-lighter) 50%, var(--sky-blue) 100%);
}

.hp-gradient {
  background: linear-gradient(282deg, var(--mcc-green) 0%, var(--lime-40-lighter) 19.98%, var(--foundation-white) 40.43%, var(--foundation-white) 86.55%, var(--lime-40-lighter) 100%);
}

.interior-gradient {
  background: linear-gradient(282deg, var(--lime) 0%, var(--lime-80-lighter) 19.98%, var(--foundation-white) 40.43%, var(--foundation-white) 86.55%, var(--lime-40-lighter) 100%);
}

.gradient-border {
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, var(--lime) 0%, var(--sky-blue) 100%);
}

.x-section.interior-gradient {
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, var(--lime) 0%, var(--sky-blue) 100%);
}

/* for full width component buttons, resources buttons on hp for example */
.full-width {
  width: 100%;
  height: 100%;
}

/* green checkmark ul list */
.checked ul {
  list-style-type: none;
  margin-left: 17px;
}
.checked ul li {
  margin-bottom: 16px;
  position: relative;
  padding-left: 16px;
}
.checked ul li:before {
  content: "\f058";
  font-family: "FontAwesome";
  color: var(--mcc-green);
  position: absolute;
  left: -16px;
  top: 1px;
}

/* styling faq h3 */
.custom-faq-header h3 {
  font-size: 18px;
  line-height: 1.2;
  font-family: proxima-nova;
  margin: 0;
}

/* Highlight Box */
.highlight-box {
  background: var(--lime-60-lighter);
  padding: 40px;
  margin: 40px 0;
}
.highlight-box p,
.highlight-box li,
.highlight-box a,
.highlight-box a:hover,
.highlight-box a:active,
.highlight-box a:focus {
  color: var(--foundation-black) !important;
}

/* custom link with arrow */
.link-arrow,
.link-arrow .x-text,
.link-arrow .x-icon {
  color: var(--mcc-green-dark) !important;
}
.link-arrow:hover, .link-arrow:active, .link-arrow:focus,
.link-arrow .x-text:hover,
.link-arrow .x-text:active,
.link-arrow .x-text:focus,
.link-arrow .x-icon:hover,
.link-arrow .x-icon:active,
.link-arrow .x-icon:focus {
  color: var(--gray) !important;
}

figure.blog-video {
  max-width: 500px;
  margin: 0 auto 1em;
  aspect-ratio: 16/9;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* for text sizes other than the default */
.x-text.large-text {
  font-size: 22px !important;
  line-height: 30px !important;
}

.x-text.small-text {
  font-size: 16px !important;
  line-height: 24px !important;
}

.x-text.xs-text {
  font-size: 14px !important;
  line-height: 22px !important;
}

/* MD */
@media (min-width: 767px) and (max-width: 978.98px) {
  .page-header {
    padding: 60px;
  }
}
/* SM and XS (removed min-width: 480px) */
@media (max-width: 766.98px) {
  .page-header {
    padding: 30px;
  }
}
@media (min-width: 979px) {
  #cs-content,
  main.x-layout {
    margin-top: -134px;
  }
  .custom-faq-header h3 {
    font-size: 22px;
    line-height: 1.1;
    font-family: proxima-nova;
  }
}
/* for extra margin top to offset absolute positioned header */
@media (min-width: 1092px) {
  #cs-content,
  main.x-layout {
    margin-top: -120px;
  }
}