/* COLOR PALETTE - Corporate Identity */
:root {
  /* Primary - Purple shades */
  --primary-900: rgb(36, 9, 82); /* (CI) */
  --primary-900-rgb: 36, 9, 82;
  --primary-700: rgb(61, 27, 122);
  --primary-700-rgb: 61, 27, 122;
  --primary-500: rgb(111, 115, 210); /* (CI) */
  --primary-500-rgb: 111, 115, 210;
  --primary-300: rgb(143, 147, 226);
  --primary-300-rgb: 143, 147, 226;
  --primary-100: rgb(181, 184, 240);
  --primary-100-rgb: 181, 184, 240;

  /* Secondary - Brown shades */
  --secondary-900: rgb(51, 47, 39); /* (CI) */
  --secondary-900-rgb: 51, 47, 39;
  --secondary-700: rgb(80, 75, 67); /* (CI) */
  --secondary-700-rgb: 80, 75, 67;
  --secondary-500: rgb(107, 102, 96);
  --secondary-500-rgb: 107, 102, 96;
  --secondary-300: rgb(187, 189, 166); /* (CI) */
  --secondary-300-rgb: 187, 189, 166;
  --secondary-100: rgb(229, 230, 216);
  --secondary-100-rgb: 229, 230, 216;

  /* Accent - Green */
  --accent-900: rgb(143, 163, 15);
  --accent-900-rgb: 143, 163, 15;
  --accent-700: rgb(168, 195, 20);
  --accent-700-rgb: 168, 195, 20;
  --accent-500: rgb(199, 230, 25); /* (CI) */
  --accent-500-rgb: 199, 230, 25;
  --accent-300: rgb(212, 236, 77);
  --accent-300-rgb: 212, 236, 77;
  --accent-100: rgb(232, 245, 163);
  --accent-100-rgb: 232, 245, 163;

  --neutral-50: rgb(248, 248, 255); /* Very light purple */
  --neutral-100: rgb(245, 245, 245);
  --neutral-200: rgb(229, 231, 235);

  --white: rgb(255, 255, 255);
  --white-rgb: 255, 255, 255;
  --black: rgb(0, 0, 0);
  --black-rgb: black;
}

body {
  background-color: var(--neutral-50);
}

#overlay {
  background-color: var(--primary-900);
}

/* form.html */
.riv-form-input,
.riv-form-textarea {
  background-color: var(--neutral-100);
  border: 1px solid var(--secondary-300);
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.riv-form-input:focus,
.riv-form-textarea:focus {
  background-color: var(--white);
  border-color: var(--primary-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.1);
}

.riv-form-btn {
  background-color: var(--primary-900);
  color: var(--white);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.riv-form-btn:hover {
  background-color: var(--primary-700);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(var(--primary-700-rgb), 0.3);
}

/* Cards & Content */
.bg-white {
  background-color: var(--white);
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-200);
}

.bg-white:hover {
  box-shadow: 0 4px 12px rgba(var(--accent-500-rgb), 0.1);
}

.bg-tlgray-200 {
  background-color: var(--neutral-200);
}

.bg-tlgray-700 {
  background-color: var(--primary-700);
}

/* Text & Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.text-gray-900 {
  color: var(--primary-900);
}

.text-gray-700 {
  color: var(--secondary-700);
}

.text-gray-600 {
  color: var(--secondary-700);
  opacity: 0.8;
}

/* Custom classes */
.riv-nav-container {
  background-color: var(--primary-900);
}

.riv-logo {
  height: 5rem;
}

.riv-nav-right {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-weight: 500;
}

.riv-nav-link {
  padding: 0.75rem;
  color: var(--white);
}

.riv-nav-link:hover {
  opacity: 1;
  color: var(--accent-500);
}

.riv-logo-footer {
  height: 4rem;
}

.riv-footer-right {
  gap: 2rem;
}

@media (max-width: 380px) {
  .riv-footer-right {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .riv-footer-right a {
    margin-top: 0;
  }
}

footer,
.bg-gray-800 {
  background-color: var(--primary-900);
}

/* Hamburgerbtn */
#hamburgerbtn.mopen .top,
#hamburgerbtn.mopen .bottom,
#hamburgerbtn.mopen .middle {
  background: var(--white);
}

#hamburgerbtn.mopen.is-open .middle {
  background: rgba(var(--white-rgb), 0);
}

#hamburgerbtn.mopen.is-open .top,
#hamburgerbtn.mopen.is-open .bottom {
  background: var(--white);
}

/* Remove underline from all links */
a:link,
a:visited,
a:active {
  text-decoration: none;
}

a .opacity-80:hover,
a .opacity-60:hover,
.riv-footer-link:hover,
body a:hover {
  color: var(--accent-500);
}

/* Arrow Up Button (Scroll to Top) */
.scroll-top {
  background-color: var(--primary-900);
  color: var(--white);
  transition: all 0.2s ease;
}

.scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 0px 12px var(--accent-500);
  border-color: var(--accent-500);
}

.scroll-top:active {
  transform: translateY(0px);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--primary-500);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-900);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-700);
  cursor: pointer;
}

::-webkit-scrollbar-corner {
  background-color: var(--primary-500);
}