/* Custom overrides */
:root {
  --carolina-red-h: 347deg;
  --carolina-red-s: 90%;
  --carolina-red-l: 39%;
  --carolina-red: hsl(
    var(--carolina-red-h) var(--carolina-red-s) var(--carolina-red-l)
  );

  --carolina-blue-h: 217deg;
  --carolina-blue-s: 100%;
  --carolina-blue-l: 20%;
  --carolina-blue: hsl(
    var(--carolina-blue-h) var(--carolina-blue-s) var(--carolina-blue-l)
  );

  --carolina-gold-h: 48deg;
  --carolina-gold-s: 100%;
  --carolina-gold-l: 50%;
  --carolina-gold: hsl(
    var(--carolina-gold-h) var(--carolina-gold-s) var(--carolina-gold-l)
  );
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

a {
  color: var(--carolina-blue);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  a {
    color: var(--carolina-gold);
  }
}

.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-menu {
  display: flex !important;
  box-shadow: none;
}

/* Custom colors */
.text-nc-red {
  color: var(--carolina-red);
}
.text-nc-blue {
  color: var(--carolina-blue);
}
.text-nc-gold {
  color: var(--carolina-gold);
}
.bg-nc-red {
  background-color: var(--carolina-red);
}
.bg-nc-blue {
  background-color: var(--carolina-blue);
}
.bg-nc-gold {
  background-color: var(--carolina-gold);
}

.h-100 {
  height: 100%;
}

/* Image slider */
.image-slider {
  position: relative;
}

.image-slider__slide {
  display: none;
}

.image-slider__slide.is-active {
  display: block;
}

.image-slider__prev,
.image-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  padding: 0.4rem 0.9rem;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  border-radius: 3px;
}

.image-slider__prev {
  left: 0.5rem;
}
.image-slider__next {
  right: 0.5rem;
}

.image-slider__prev:hover,
.image-slider__next:hover {
  background: rgba(0, 0, 0, 0.7);
}

.image-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.image-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
}

.image-slider__dot.is-active {
  background: #555;
}

ul.links {
  list-style-type: square;
  list-style-position: inside;
  padding: 0.5rem 0;
}