/* Cameo-inspired dark palette overrides for the marketing (paper-kit) theme. */
:root {
  --cameo-lime: #c5ff47;
  --cameo-lime-strong: #a7f500;
  --cameo-purple: #820ce9;
  --cameo-purple-strong: #962af4;
  --cameo-orange: #ff3c26;
  --cameo-dark: #0c0d0e;
  --cameo-dark-2: #141114;
  --cameo-dark-3: #1c1f21;
  --cameo-muted: #c8ccd0;
  --cameo-muted-strong: #858f97;
  --cameo-border: #2f3337;
  --background: var(--cameo-dark);
  --foreground: #ffffff;
  --card: var(--cameo-dark-2);
  --card-foreground: #ffffff;
  --popover: var(--cameo-dark-2);
  --popover-foreground: #ffffff;
  --primary: var(--cameo-lime);
  --primary-foreground: var(--cameo-dark);
  --secondary: var(--cameo-dark-3);
  --secondary-foreground: #ffffff;
  --muted: var(--cameo-dark-3);
  --muted-foreground: var(--cameo-muted-strong);
  --accent: var(--cameo-purple);
  --accent-foreground: #ffffff;
  --destructive: var(--cameo-orange);
  --border: var(--cameo-border);
  --input: var(--cameo-border);
  --ring: var(--cameo-lime-strong);
}

body {
  background-color: var(--cameo-dark);
  color: #ffffff;
}

.wrapper {
  background:
    radial-gradient(circle at 12% -10%, rgba(130, 12, 233, 0.2), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(197, 255, 71, 0.14), transparent 42%),
    var(--cameo-dark);
}

.landing-page .section {
  background-color: var(--cameo-dark);
  border-top: 1px solid var(--cameo-border);
}

.section-dark {
  background-color: var(--cameo-dark-2);
}

.page-header {
  background-color: var(--cameo-dark);
}

.page-header .filter::after {
  background:
    linear-gradient(135deg, rgba(189, 0, 255, 0.35), rgba(255, 60, 38, 0.35)),
    rgba(12, 13, 14, 0.7);
}

a {
  color: var(--cameo-lime);
}

a:hover,
a:focus {
  color: var(--cameo-lime-strong);
}

.title,
.title a,
.card-title,
.card-title a,
.info-title,
.info-title a,
.footer-brand,
.footer-brand a {
  color: #ffffff;
}

.description,
.card .card-description {
  color: var(--cameo-muted);
}

.text-muted {
  color: var(--cameo-muted-strong);
}

.text-primary,
.text-primary:hover {
  color: var(--cameo-lime) !important;
}

.text-info,
.text-info:hover {
  color: var(--cameo-purple) !important;
}

.text-danger,
.text-danger:hover {
  color: var(--cameo-orange) !important;
}

.bg-primary {
  background-color: var(--cameo-lime) !important;
}

.bg-info {
  background-color: var(--cameo-purple) !important;
}

.bg-danger {
  background-color: var(--cameo-orange) !important;
}

.badge-primary {
  background-color: var(--cameo-lime);
  color: var(--cameo-dark);
}

.badge-info {
  background-color: var(--cameo-purple);
}

.badge-success {
  background-color: var(--cameo-lime);
  color: var(--cameo-dark);
}

.badge-warning {
  background-color: var(--cameo-lime-strong);
  color: var(--cameo-dark);
}

.badge-danger {
  background-color: var(--cameo-orange);
}

.badge-default {
  background-color: var(--cameo-dark-3);
}

.btn-danger,
.btn-primary {
  background-color: var(--cameo-lime);
  border-color: var(--cameo-lime);
  color: var(--cameo-dark);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--cameo-lime-strong);
  border-color: var(--cameo-lime-strong);
  color: var(--cameo-dark);
}

.btn-danger.btn-link,
.btn-primary.btn-link {
  color: var(--cameo-lime);
}

.btn-danger.btn-link:hover,
.btn-danger.btn-link:focus,
.btn-primary.btn-link:hover,
.btn-primary.btn-link:focus {
  color: var(--cameo-lime-strong);
}

.btn-neutral {
  background-color: transparent;
  border-color: var(--cameo-muted);
  color: #ffffff;
  box-shadow: none;
}

.btn-neutral:hover,
.btn-neutral:focus,
.btn-neutral:active,
.btn-neutral.active,
.show > .btn-neutral.dropdown-toggle {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--cameo-dark);
}

.btn-neutral.btn-link {
  color: #ffffff;
}

.btn-neutral.btn-link:hover,
.btn-neutral.btn-link:focus {
  color: var(--cameo-lime);
}

.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-color: var(--cameo-lime);
  color: var(--cameo-lime);
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li.active > a,
.pagination > li.active > span {
  background-color: var(--cameo-lime);
  border-color: var(--cameo-lime);
  color: var(--cameo-dark);
}

.card {
  background-color: var(--cameo-dark-2);
  border: 1px solid var(--cameo-border);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.card:not(.card-plain):hover {
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
}

.card a:not(.btn) {
  color: #ffffff;
}

.card a:not(.btn):hover,
.card a:not(.btn):focus {
  color: var(--cameo-lime);
}

.card .card-category {
  letter-spacing: 0.12em;
}
.expert-card {
  display: block;
  height: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.expert-card:hover,
.expert-card:focus {
  box-shadow: none;
  transform: none;
  text-decoration: none;
}

.expert-card .card-avatar {
  width: 120px;
  height: 120px;
}

.expert-card .card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.locale-switcher {
  background: rgba(12, 13, 14, 0.75);
  border: 1px solid var(--cameo-border);
  color: #ffffff;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}

.locale-switcher label {
  color: var(--cameo-muted);
}

.locale-switcher select {
  background: var(--cameo-dark-3);
  border-color: var(--cameo-border);
  color: #ffffff;
}