/* Root (base) variables */
:root {
  --binary-blue: #00447c;
  --yaml-yellow: #ffc90d;
  --analog-aquamarine: #0e9ed5;
  --light-gray: #f8fafc;
  --font-primary: "Arial Nova", Arial, sans-serif;
  --font-heading: "Digital Dare", "Arial Nova", Arial, sans-serif;
  --gradient-hero-overlay: linear-gradient(rgba(0, 68, 124, 0.9), rgba(14, 158, 213, 0.8));
  --gradient-event: linear-gradient(135deg, #0e9ed5 0%, #00447c 100%);
  --gradient-cta: linear-gradient(135deg, #ffc90d 0%, #0e9ed5 100%);
}

/* Fonts. Loaded from static via django. */
@font-face {
    font-family: 'DigitalDare';
    src: url('/static/digital-dare-Dk5qTeu9.ttf') format('truetype');
}

@font-face {
    font-family: 'ArialNova';
    src: url('/static/arial-nova.ttf') format('truetype');
}

.font-digital-dare {
    font-family: 'DigitalDare', sans-serif;
}

.font-arial-nova {
    font-family: 'ArialNova', sans-serif;
}

/* Body CSS */
body {
  font-family: var(--font-primary);
  background-color: var(--light-gray);
}

/* Headings CSS */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--analog-aquamarine);
  text-shadow: -2px 0 2px #f0f;
  letter-spacing: 4px;
}

/* Background Color CSS */
.bg-binary-blue { background-color: var(--binary-blue); }
.bg-yaml-yellow { background-color: var(--yaml-yellow); }
.bg-analog-aquamarine { background-color: var(--analog-aquamarine); }

/* Text Color CSS */
.text-binary-blue { color: var(--binary-blue); }
.text-yaml-yellow { color: var(--yaml-yellow); }
.text-analog-aquamarine { color: var(--analog-aquamarine); }

/* Navigation Bar CSS */
nav.navbar.bg-binary-blue {
  background-color: var(--binary-blue);
  box-shadow: 0 6px 16px #000000 !important;
  border-bottom: thin solid #000000 !important;
  z-index: 10;
}

.navbar .navbar-brand {
  font-family: var(--font-heading);
  color: var(--yaml-yellow);
  letter-spacing: 2px;
  text-shadow: -1px 0 1px var(--analog-aquamarine);
}

.navbar .navbar-nav .nav-item .nav-link {
  font-family: var(--font-primary);
  color: #fff;
  transition: color 0.2s ease;
  margin-left: 10px;
  margin-right: 10px;
  border: 2px dashed #fffc3d;
  border-radius: 10px;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: var(--yaml-yellow);
  border: 2px solid #ebe081;
}

.navbar .dropdown-menu {
  background-color: var(--binary-blue);
  border: 1px solid var(--analog-aquamarine);
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.navbar .dropdown-menu .dropdown-item {
  color: #fff;
  font-family: var(--font-primary);
  padding: 0.5rem 1.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .dropdown-menu .dropdown-item:hover {
  background-color: #000000;
  color: gold !important;
}

.navbar .dropdown-menu .dropdown-item.text-danger {
  color: #ffc0c6 !important;
}

.navbar .dropdown-menu .dropdown-item.text-danger:hover {
  background-color: #ffc0c6;
  color: #000000 !important;
}

.navbar .dropdown-divider {
  border-color: var(--analog-aquamarine);
  opacity: 0.4;
}

/* Main content CSS */
main.container {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  background: #e8e8ff;
  border-radius: 20px;
}

/* Gold-hover CSS */
.gold-hover {
    transition: background-color 0.2s ease-in-out;
}
.gold-hover:hover {
    background-color: rgb(255, 236, 131);
    color: #000000;
}

.list-group-item.active {
  background-color: var(--analog-aquamarine) !important;
  color: var(--binary-blue) !important;
  border-color: var(--analog-aquamarine) !important;
}

.table th {
  font-family: var(--font-heading);
  letter-spacing: 1px;
  font-size: 0.9rem;
  background-color: var(--light-gray);
  color: var(--binary-blue);
}

.badge {
  font-family: var(--font-primary);
  font-weight: 600;
  padding: 0.5em 0.75em;
}

.eventdeets {
  border-radius: 4px;
  margin: 4px;
  padding: 4px;
  color: #000000;
  text-align: left;
}

.footer-otc-link {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-otc-link:hover {
  color: white;
  text-decoration: underline !important;
}