/* Bulma Variable Overrides */
:root {
  /* --primary-color: #F5F5DD; */
  --primary-color: #86b9b0;
  --primary-color-hover: #FFA800;
  color: #000 !important;
}

.has-black-text {
  color: #201d18 !important;
}

.has-white-text {
  color: white;
}

.has-text-primary {
  color: var(--primary-color) !important;
}

.is-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.is-primary:hover {
  background-color: var(--primary-color-hover) !important;
  border-color: var(--primary-color-hover) !important;
}

.has-rounded-corners {
  border-radius: 10px !important;
}

.has-primary-background {
  background-color: var(--primary-color) !important;
}

.card {
  background-color: var(--primary-color) !important;
  border: 1px solid #777 !important;
}

.input, .textarea {
  background-color: #FFF !important;
  color: #000 !important;
}

.button:hover {
  background-color: #FFF !important;
}

#white-button:hover {
  background-color: #EEE !important;
}

#nav-button:hover {
  background-color: #a4cac4 !important;
}

.has-underline {
  text-decoration: underline;
}

/* Header Styles */

#logo {
  margin: -8px 0px -8px -8px;
  min-height: 80px !important;
}

.dark-logo {
  display: none;
}

.navbar-brand a:hover {
  background-color: transparent !important;
}

.navbar-brand > a:hover {
  border-radius: 10px !important;
  padding: auto 0 !important;
}

#has-shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.navbar span {
  color: white;
}

/* Homepage Styles */

.hero {
  background-image: url("../images/hero-bg.webp");
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

.hero-container {
  background-color: rgb(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 30px;
}

/* Secondary Page Styles */

.sp-bg-img {
  background-image: url("../images/sp-bg.webp");
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

/* Footer Styles */

.footer {
  background-color: var(--primary-color) !important;
}

.logo-container {
  max-width: 350px !important;
}

.logo-text {
  margin-left: 48px;
}

.ul-link:hover {
  text-decoration: underline !important;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 15px 0;
}

@media (prefers-color-scheme: dark) {

  :root {
    color: #000;
  }

  .light-logo {
    display: none;
  }

  .dark-logo {
    display: block;
  }

 .has-background-light {
    background-color: #333 !important;
  }

  .has-text-black {
    color: #DDD !important;
  }

  footer figure {
    margin-left: 10px;
    width: 300px;
  }
}

@media (max-width: 1024px) {
  div#navMenu.navbar-menu.is-active {
    background-color: #a4cac4 !important;
    border-radius: 15px !important;
    padding-bottom: 20px !important;
  }

  div#navMenu.navbar-menu.is-active div.buttons {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
  }

  a#white-button.navbar-item.button.is-medium.has-background-white.has-black-text.has-text-weight-semibold.ml-2 {
    margin-left: 0 !important;
  }

  #logo {
    margin-left: -20px;
    min-height: 65px !important;
  }

  .logo-container {
    max-width: 300px !important;
  }

  .logo-text {
    margin-left: 40px;
  }
}

@media (max-width: 500px) {
  .is-flex-direction-column-mobile {
    flex-direction: column !important;
  }

  .hero {
    background-image: url("../images/hero-bg-mobile.webp");
  }

  .sp-bg-img {
    background-image: url("../images/sp-bg-mobile.webp");
  }
}