/*!
 * Start Bootstrap - Modern Business (http://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */
/* Font Classes */

/*
BEANSTALK 2021 Colors:
TEAL: 43a7a5
BLACK: 000000
ORANGE: ea852d

SNOWSTALK 2021 Colors:
Maroon: 904951
Silverblue: cfe2e8
Darkerlight Blue: a0d7dc
BG blue: cde5e9
light Marroon: e3b4bc

BEANSTALK 2022 Colors:
Dark Purple: 7858a4
Light Purple: 9b7dc3
Seafoam Green: 56a19a
White
Black

SNOWSTALK 2022 Colors:
Brown: 6e4728
Green: 7baa59
Light Blue: 248fb9
Dark Blue: 2c5362

Beanstalk 2023 Colors:
Mustard White: f5f4c4
Burnt Orange: f15f27
Olive Green: c0c46a
Yellow: fbcf0c
Turqoise: 00aba3

Snowstalk 2023 Colors:
dark blue = 03366b
purple pink = f6c1f5
silver = bdd1dc
white
black
violet = b491f7

Beanstalk 2024 Colors:
ORANGE RED #f04f28
DARK BLUE #1a64ac
LIGHT BLUE #2c9ac7
YELLOW #fec230

Beanstalk 2025 Colors:
DARK BLUE: #4066af
TEAL: #40b6e8
AQUAMARINE: #8ed4de
PURPLE: #6255a5
YELLOW: #fae72b

Beanstalk 2026 Colors:
   Sun Yellow:   #f5cd46
   Cream/Sand:   #eae3d3
   Sky Blue:     #a2d1e5
   River Blue:   #65a1d1
   Light River:  #77bbdf
   Warm Orange:  #ec8f5d
   Deep Red:     #963320
   Canyon Brown: #ad5938
   Cactus Green: #82a13d
   Ink/Dark:     #2b1a12
   Deep Blue*:   #1a4e7a  (chosen to anchor nav/footer)
*/

/* Element positioning */


/* Font import */
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");

/* Theme tokens */
:root {
  --bs-sun: #f5cd46;
  --bs-sand: #eae3d3;
  --bs-sky: #a2d1e5;
  --bs-river: #65a1d1;
  --bs-river-light: #77bbdf;
  --bs-orange: #ec8f5d;
  --bs-red: #963320;
  --bs-brown: #ad5938;
  --bs-cactus: #82a13d;
  --bs-ink: #2b1a12;
  --bs-deepblue: #1a4e7a;
}

/* Element positioning */
nav {
  padding-bottom: 0;
}

.bean-container {
  width: 100%;
  height: 1275px;
  background-color: var(--bs-sky);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  margin: 0;
  padding: 0;
}

.responsive {
  max-width: 100%;
  height: auto;
}

/* Hero / CTA text */
.stalk-text {
  font-family: "Lilita One", sans-serif;
  color: #ffffff;
  text-shadow:
    -2px -2px 0 var(--bs-ink),
    2px -2px 0 var(--bs-ink),
    -2px 2px 0 var(--bs-ink),
    2px 2px 0 var(--bs-ink);
  font-size: 3rem;
}

/* Optional font class kept */
.font-Titan-One {
  font-family: "Titan One", cursive;
  color: #ffffff;
  text-shadow:
    -1px 0 var(--bs-deepblue),
    0 1px var(--bs-deepblue),
    1px 0 var(--bs-deepblue),
    0 -1px var(--bs-deepblue);
}

.artist-lineup-frontpage {
  width: 700px;
  height: 400px;
}

/* Gradient border box (updated to match 2026 palette) */
#logoborderbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoborderbox-gradient-border {
  --borderWidth: 3px;
  background: var(--bs-ink);
  position: relative;
  border-radius: var(--borderWidth);
}

.logoborderbox-gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(
    60deg,
    var(--bs-deepblue),
    var(--bs-river),
    var(--bs-sun),
    var(--bs-orange),
    var(--bs-cactus)
  );
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Page background (updated gradient) */
body {
  background: linear-gradient(
    -45deg,
    var(--bs-sky),
    var(--bs-river),
    var(--bs-sand),
    var(--bs-sun),
    var(--bs-orange)
  );
  background-size: 400% 400%;
  animation: gradient 18s ease infinite;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Buttons */
.btn-secondary {
  background-color: var(--bs-river);
  border: 2px solid var(--bs-deepblue);
  color: #ffffff;
  font-family: "Lilita One", sans-serif;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-orange);
  border-color: var(--bs-brown);
  color: #ffffff;
}

.carousel-indicators {
  color: var(--bs-ink);
}

/* Overlay the Beanstalk logo over the carousel */
.beanlogo-overlay {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.countdown-overlay {
  position: absolute;
  left: 70%;
  display: inline-block;
  z-index: 10;
  pointer-events: none;
}

.overlay > img {
  display: block;
  width: 85%;
  padding-top: 15px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

select {
  border-radius: 15px 15px;
  border: 2px solid var(--bs-brown);
}

/* Custom Boxes */
.beanbox {
  background-color: var(--bs-sand);
  color: var(--bs-ink);
  width: 100%;
  display: inline-block;
  border-radius: 15px 15px;
  padding: 10px;
  border: 2px solid var(--bs-brown);
  box-shadow: 0 8px 24px rgba(43, 26, 18, 0.18);
}

/* Headline ticket link */
h1 a {
  font-family: "Lilita One", sans-serif;
  color: var(--bs-sun);
  text-shadow:
    -2px 0 var(--bs-ink),
    0 2px var(--bs-ink),
    2px 0 var(--bs-ink),
    0 -2px var(--bs-ink);
  font-size: 55px;
}

h1 > a:hover {
  color: var(--bs-river-light);
}

/* Artist title text */
h4,
h4 > a {
  font-size: 1.5em;
  color: var(--bs-ink);
  text-decoration: none;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.portfolio-item {
  margin-bottom: 30px;
}

/* Custom Navigation Bar */
.navbar-left > img {
  height: auto;
  width: 90%;
}

.navbar {
  background-color: var(--bs-brown) !important;
  font-family: "Lilita One", sans-serif;
  outline: 0.2em solid var(--bs-ink);
}

.navbar .navbar-brand {
  color: #ffffff;
}

/* Dropdown styling */
.navbar-nav > li > .dropdown-menu {
  background-color: var(--bs-sand);
  border: 2px solid var(--bs-brown);
  color: var(--bs-ink);
}

.dropdown-item {
  color: var(--bs-ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(245, 205, 70, 0.55); /* sun wash */
  color: var(--bs-ink);
}

/* Hover color designation */
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ffffff;
}

.navbar .navbar-text {
  color: #ffffff;
}

.navbar .navbar-nav .nav-link {
  color: #ffffff;
  border-radius: 0.25rem;
  margin: 0 1.75em;
  font-size: 1.09em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: var(--bs-sun);
  text-shadow: 0 0 10px rgba(245, 205, 70, 0.35);
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffffff;
}

.navbar .navbar-toggle {
  border-color: var(--bs-river);
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: var(--bs-orange);
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #ffffff;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ffffff;
}

.navbar .navbar-link {
  color: var(--bs-river-light);
}

.navbar .navbar-link:hover {
  color: var(--bs-sun);
  background-color: transparent;
}

@media all and (max-width: 600px) {
  select {
    width: 100%;
    max-width: 100%;
  }
}

/* Keep your existing responsive dropdown rules (colors updated) */
@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: var(--bs-ink);
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: var(--bs-ink);
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: var(--bs-ink);
    background-color: rgba(236, 143, 93, 0.6); /* orange wash */
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: var(--bs-ink);
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: var(--bs-ink);
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: var(--bs-ink);
    background-color: rgba(245, 205, 70, 0.55);
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: var(--bs-ink);
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: var(--bs-ink);
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: var(--bs-ink);
    background-color: rgba(245, 205, 70, 0.55);
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: var(--bs-ink);
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: var(--bs-ink);
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: var(--bs-ink);
    background-color: rgba(236, 143, 93, 0.6);
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: var(--bs-ink);
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: var(--bs-ink);
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: var(--bs-ink);
  background-color: rgba(245, 205, 70, 0.55);
}

/* ---------------- Footer stuff */
.bg-footer {
  background-color: var(--bs-brown);
  outline: 0.2em solid var(--bs-ink);
}

#lab_social_icon_footer {
  padding: 40px 0;
  background-color: var(--bs-deepblue);
}

#lab_social_icon_footer a {
  color: #ffffff;
  text-decoration: none;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

#lab_social_icon_footer a:hover {
  text-decoration: none;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  color: var(--bs-sun);
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

/* Multicoloured Hover Variations (updated) */
#lab_social_icon_footer #social-fb:hover { color: var(--bs-river-light); }
#lab_social_icon_footer #social-tw:hover { color: var(--bs-river); }
#lab_social_icon_footer #social-gp:hover { color: var(--bs-orange); }
#lab_social_icon_footer #social-em:hover { color: var(--bs-cactus); }

/* Keep your custom font-face */
@font-face {
  font-family: "Kelpo";
  src: url("/fonts/KelpoTTF.ttf");
}