/*
  BGS Promo Styles
  Source of truth: src/styles/styles.css
  Deployed to: /content/promo/styles.css
*/

:root {
--primary        : #c4161c;
--primary-dark   : #94070a;
--secondary      : #2d96cd;
--secondary-dark : #096fa4;
--tertiary       : #FF6600;
--tertiary-dark  : #c0550e;
--white          : #FFFFFF;
--gray-100       : #f8f9fa;
--gray-200       : #e9ecef;
--gray-300       : #dee2e6;
--gray-400       : #ced4da;
--gray-500       : #adb5bd;
--gray-600       : #6c757d;
--gray-700       : #495057;
--gray-800       : #343a40;
--gray-900       : #212529;
--black          : #000000;
--soft-blue      : #a9cfda;
--navy-blue      : #1d4683;
--link-color       : var(--primary);
--link-hover-color : var(--primary-dark);
}

/* EVENT */
.category-event {
  --primary         : #172d41;
  --primary-dark    : #001e3a;
  --secondary       : #f36523;
  --secondary-dark  : #ba4b18;
  --tertiary        : #aad7e0;
  --tertiary-dark   : #48a8bb;
}

body {
  font-family: Saira;
  font-weight: 400;
}

/************************************************************
 ************************************************************
 * COLORS
 ************************************************************
 ************************************************************/

/* Text */
.text-primary {
  color:var(--primary) !important;
}
.text-primary-dark {
  color:var(--primary-dark) !important;
}
.text-secondary {
  color:var(--secondary) !important;
}
.text-secondary-dark {
  color:var(--secondary-dark) !important;
}
.text-tertiary {
  color:var(--tertiary) !important;
}
.text-tertiary-dark {
  color:var(--tertiary-dark) !important;
}
.text-navy-blue {
  color:var(--navy-blue) !important;
}

/* Border */
.border-primary {
  border-color:var(--primary) !important;
}
.border-primary-dark {
  border-color:var(--primary-dark) !important;
}
.border-secondary {
  border-color:var(--secondary) !important;
}
.border-secondary-dark {
  border-color:var(--secondary-dark) !important;
}
.border-tertiary {
  border-color:var(--tertiary) !important;
}
.border-tertiary-dark {
  border-color:var(--tertiary-dark) !important;
}

/* Backaground */
.bg-primary {
  background-color:var(--primary) !important;
}
.bg-primary-dark {
  background-color:var(--primary-dark) !important;
}
.bg-secondary {
  background-color:var(--secondary) !important;
}
.bg-secondary-dark {
  background-color:var(--secondary-dark) !important;
}
.bg-tertiary {
  background-color:var(--tertiary) !important;
}
.bg-tertiary-dark {
  background-color:var(--tertiary-dark) !important;
}
.bg-gray {
  background-color:var(--gray-300) !important;
}
.bg-black  {
  background-color:var(--black) !important;
}
.bg-soft-blue  {
  background-color:var(--soft-blue) !important;
}
.bg-navy-blue  {
  background-color:var(--navy-blue) !important;
}

/* Background Gradient  */
.bg-gradient-dark {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* SVG */
.svg-black {
  filter: brightness(0) saturate(100%);
}
.svg-white {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Links  */
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

/************************************************************
 ************************************************************
 * TYPOGRAPHY
 ************************************************************
 ************************************************************/
.text-shadow {
  text-shadow: 2px 2px 2px var(--black);
}

/************************************************************
 ************************************************************
 * CONTAINER
 ************************************************************
 ************************************************************/
.mw-sm,.mw-md,.mw-lg {
  margin-right: auto;
  margin-left: auto;
}
.mw-sm {
  max-width: 600px;
}
.mw-md {
  max-width: 800px;
}
.mw-lg {
  max-width: 1000px;
}

/************************************************************
 ************************************************************
 * BUTTONS
 ************************************************************
 ************************************************************/
.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-color:  var(--white);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
}
.btn-secondary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--secondary-dark);
  --bs-btn-hover-border-color: var(--secondary-dark);
  --bs-btn-active-color:  var(--white);
  --bs-btn-active-bg: var(--secondary-dark);
  --bs-btn-active-border-color: var(--secondary-dark);
}
.btn-tertiary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--tertiary);
  --bs-btn-border-color: var(--tertiary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--tertiary-dark);
  --bs-btn-hover-border-color: var(--tertiary-dark);
  --bs-btn-active-color:  var(--white);
  --bs-btn-active-bg: var(--tertiary-dark);
  --bs-btn-active-border-color: var(--tertiary-dark);
}

/************************************************************
 ************************************************************
 * ACCORDIONS
 ************************************************************
 ************************************************************/
.accordion-button:not(.collapsed) {
  --bs-accordion-active-color: var(--white);
  --bs-accordion-active-bg: var(--primary);
}

/************************************************************
 ************************************************************
 * HERO
 ************************************************************
 ************************************************************/
.hero__container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Hero Height */
.hero--full .hero__container {
  min-height: 100vh;
}
.hero--tall .hero__container {
  min-height: 80vh;
  @media screen and (min-width:768px) {
    min-height: 50vh;
  }
}
/* Hero Content */
.hero__content {
  position: relative;
  z-index: 100;
  color: inherit;
}
/* Hero Background Image */
.hero__img-bgnd {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__img-bgnd img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Hero Overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
}
/* Hero Offset Image */
.hero--offset .hero__container {
  padding-bottom: 16rem !important;
}
.hero__img-offset {
  position: relative;
  z-index: 50;
  margin-top: -15rem;
}

/************************************************************
 ************************************************************
 * HIGHLIGHT BAR
 ************************************************************
 ************************************************************/
.highlight-bar {
  color: var(--white);
  background-color: var(--primary);
}
.highlight-bar span + span {
  border-top: 1px solid var(--primary-dark);
}
@media (min-width: 768px) {
  .highlight-bar span + span {
    border-top: 0;
    border-left: 1px solid var(--primary-dark);
  }
}

/************************************************************
 ************************************************************
 * FEATURE LIST
 ************************************************************
 ************************************************************/
.product-card__features {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.product-card__features li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
}
.product-card__features li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--primary);
  font-size: 1.2rem;
}

/************************************************************
 ************************************************************
 * PRODUCT IMAGE
 ************************************************************
 ************************************************************/
.layout-section--products.bg-black .product-card__img {
  background: linear-gradient(
    180deg,
    #0b0b0b 0%,
    #1a0f0a 45%,
    #3a1208 75%,
    #8b1a0e 100%
  );
  border-radius: 0.5em;
}