/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
  /* Colors */
  --color-yellow: #ffe749;
  --color-yellow-hover: #fcf2b2;
  --color-pink: #ff3aac;
  --color-pink-hover: #ff7cc8;
  --color-green: #c1ff44;
  --color-green-hover: #d5ff81;
  --color-white: #ffffff;
  --color-white-hover: #928f8f;
  --color-black: #000000;
  --color-text-white: #fff;
  
  /* Typography */
  --font-primary: "Montserrat", sans-serif;
  --font-heading: "Barlow Semi Condensed", sans-serif;
  
  /* Spacing */
  --spacing-arrow: 20px;
  --spacing-arrow-position: 25px;
  --spacing-card-margin: 10px;
  --spacing-card-header-height: 55px;
  --spacing-card-padding: 1.25rem;
  
  /* Transitions */
  --transition-hover: background-color 0.2s ease-in-out;
  --transition-link: all 0.2s ease-in-out;
  
  /* Breakpoints */
  --breakpoint-mobile: 600px;
}

/* ============================================
   Base Styles
   ============================================ */
body {
  font-family: var(--font-primary);
}

h2,
h3 {
  font-family: var(--font-heading);
}

h3 {
  font-weight: bold;
}

/* ============================================
   Background Color Utilities
   ============================================ */
.bg-yellow {
  background-color: var(--color-yellow);
  transition: var(--transition-hover);
}

.bg-yellow:hover {
  background-color: var(--color-yellow-hover);
}

.bg-pink {
  background-color: var(--color-pink);
  transition: var(--transition-hover);
}

.bg-pink:hover {
  background-color: var(--color-pink-hover);
}

.bg-green {
  background-color: var(--color-green);
  transition: var(--transition-hover);
}

.bg-green:hover {
  background-color: var(--color-green-hover);
}

.bg-white {
  background-color: var(--color-white);
  transition: var(--transition-hover);
}

.bg-white:hover {
  background-color: var(--color-white-hover);
}

/* ============================================
   Typography Utilities
   ============================================ */
.font-color {
  color: var(--color-text-white);
}

.font-weight-bolder {
  font-weight: 900 !important;
}

/* ============================================
   Arrow/Icon Styles
   ============================================ */
.arrow-img {
  width: var(--spacing-arrow);
  position: absolute;
  top: var(--spacing-arrow-position);
  right: var(--spacing-arrow-position);
}

.arrow-opened,
.arrow-closed {
  width: var(--spacing-arrow);
  margin-right: 10px;
}

/* ============================================
   Accordion Component
   ============================================ */
#accordion h5 button {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-black);
  font-size: 1.5rem;
}

#accordion .card {
  margin: var(--spacing-card-margin) 0;
  border: 0;
  border-radius: 0;
}

#accordion .card-body {
  border: 0;
  border-radius: 0;
}

#accordion .card-header {
  border: 0;
  border-radius: 0;
  height: var(--spacing-card-header-height);
  padding: 0 var(--spacing-card-padding);
}

/* ============================================
   Component Styles
   ============================================ */
.bf-box {
  width: 100%;
  height: 90%;
}

.bf-card-content {
  padding-left: calc(var(--spacing-arrow) + var(--spacing-card-padding) + 0.75rem);
}

.link {
  color: var(--color-black);
  transition: var(--transition-link);
}

.link:hover {
  text-decoration: none;
  color: var(--color-text-white);
  background-color: var(--color-black);
}

.active {
  border-bottom: 1px solid var(--color-text-white);
}

/* ============================================
   Responsive Styles
   ============================================ */
@media only screen and (max-width: 600px) {
  .bf-card-content {
    padding-left: inherit;
  }
}