/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  /* Font Variables */
  --font-base: "bio-sans";
  --font-secondary: "bio-sans";

  /* Color Variables */
  --color-black: #0F2538;
  --color-white: white;
  --color-cream: #fff8e4;
  --color-gold: #b48f40;
}

/* ==========================================================================
   Typography & Font Overrides
   ========================================================================== */

  
body {
  background-image: none;
  background-color: var(--color-cream);
}
  

/* Base font family overrides */
body,
.page-body,
div,
p,
span,
.button,
a {
  font-family: var(--font-base) !important;
}

/* Heading font families */
h1, .heading1,
h2, .heading2,
h3, .heading3,
h4, .heading4,
h5, .heading5,
h6, .heading6 {
  font-family: var(--font-base) !important;
}

/* Copy text font families */
.copy-regular,
.copy--big,
.copy--big-highlight,
.copy--highlight,
.copy--small,
.copy--small-highlight,
.copy--big-label,
.copy--label,
.copy--big-cta,
.copy--cta,
.copy--link,
.copy--link-small {
  font-family: var(--font-secondary) !important;
}

/* Font sizes */
.button,
a {
  font-size: 18px;
}

/* Font weights */
body,
div {
  font-weight: 600;
}

p,
body {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6,
.heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {
  font-weight: 800 !important;
}

.heading1 *,
.heading2 *,
.heading3 *,
.heading4 *,
.heading5 *,
.heading6 * {
  font-weight: 800;
}

.button,
a {
  font-weight: 700;
}

.page-header__action-wrap .button {
  font-weight: 700;
}

.page-footer .page-footer__nav-link {
  font-weight: 700 !important;
}

.nav-link-text {
  font-weight: 800 !important;
}

/* ==========================================================================
   Component Styles
   ========================================================================== */

/* Section Backgrounds */
.recipe-slider-sec,
.product-category-slider-sec,
.article-feed-sec {
  background-color: var(--color-cream);
}

/* Article Feed */
.row.article-feed-row {
  justify-content: center;
}

.article-feed-v2-sec .article-card.card-bg-1 {
  background-color: var(--color-white);
}

/* Product Category Slider */
.product-category-slider-v1-sec .slide-card__title {
  color: var(--color-black);
}

.product-category-slider-v1-sec .slide-card__action-link {
  border-color: var(--color-black);
  color: var(--color-black);
}

.product-category-slider-v1-sec .swiper-pagination-bullet {
  border-color: var(--color-black);
  background-color: var(--color-black);
}

.product-category-slider-v1-sec .swiper-pagination-bullet-active {
  color: var(--color-black);
  background-color: transparent;
}

.product-category-slider-v1-sec .swiper-pagination-bullet-active:before {
  background-color: var(--color-black);
}

/* Benefits Component */
.benefits-component .benefits-wrap .custom-benefits .benefit-item.icon {
  grid-template-rows: 150px max-content;
}

/* Page Header V5 */
.page-header-v5 .page-header__title,
.page-header-v5 .page-header__subtitle,
.page-header-v5 .page-header__text {
  color: var(--color-black);
}

.page-header-v5 .page-header__action-wrap .button {
  background-color: var(--color-gold);
  color: var(--color-white);
  border-radius: 5px;
}

/* ==========================================================================
   Social Media Icons
   ========================================================================== */

/* Footer/Social Icons (20px) */
.social-media-link-icon--twitter .icon-twitter,
.social-media-link-icon--facebook .icon-facebook,
.social-media-link-icon--instagram .icon-instagram {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  height: 20px;
  width: 20px;
}

.social-media-link-icon--twitter .icon-twitter {
  background-image: url('../assets/icn/x.svg');
}

.social-media-link-icon--facebook .icon-facebook {
  background-image: url('../assets/icn/facebook.svg');
}

.social-media-link-icon--instagram .icon-instagram {
  background-image: url('../assets/icn/instagram.svg');
}

/* Header Social Icons (24px) */
.collapse.navbar-collapse .social-media-link-icon--twitter,
.collapse.navbar-collapse .social-media-link-icon--facebook,
.collapse.navbar-collapse .social-media-link-icon--instagram {
  align-self: center;
}

.collapse.navbar-collapse .social-media-link-icon--twitter .icon-twitter,
.collapse.navbar-collapse .social-media-link-icon--facebook .icon-facebook,
.collapse.navbar-collapse .social-media-link-icon--instagram .icon-instagram {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  height: 24px;
  width: 24px;
}

.collapse.navbar-collapse .social-media-link-icon--twitter .icon-twitter {
  background-image: url('../assets/icn/x-header.svg');
}

.collapse.navbar-collapse .social-media-link-icon--facebook .icon-facebook {
  background-image: url('../assets/icn/facebook-header.svg');
}

.collapse.navbar-collapse .social-media-link-icon--instagram .icon-instagram {
  background-image: url('../assets/icn/instagram-header.svg');
}

/* Remove default icon content */
.social-media-link-icon--twitter .icon-twitter::before,
.social-media-link-icon--facebook .icon-facebook::before,
.social-media-link-icon--instagram .icon-instagram::before {
  content: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (min-width: 992px) {
  .benefits-component .benefits-wrap .custom-benefits {
    grid-template-columns: minmax(400px, 1fr) 1fr 1fr;
    gap: 30px;
  }

  .benefits-component .benefits-wrap .custom-benefits .benefit-item.line .benefit-item-line {
    left: 0;
    right: unset;
  }

  .benefits-component .benefits-wrap .custom-benefits .benefit-item.icon {
    grid-template-columns: 200px max-content;
    grid-template-rows: initial;
    padding-left: 0;
    padding-right: 15px;
  }
}

@media (min-width: 1440px) {
  .benefits-component .benefits-wrap .custom-benefits {
    grid-template-columns: minmax(350px, 1fr) 1fr 1fr;
  }
}