/**
 * Brand palette — primary #fbce0d (gold)
 * Complementary: charcoal secondary, teal info, forest success
 */
:root,
[data-bs-theme="light"] {
  --fn-primary: #fbce0d;
  --fn-primary-rgb: 251, 206, 13;
  --fn-secondary: #2c3340;
  --fn-secondary-rgb: 44, 51, 64;
  --fn-success: #2d9f6f;
  --fn-success-rgb: 45, 159, 111;
  --fn-info: #1e6b7a;
  --fn-info-rgb: 30, 107, 122;
  --fn-warning: #f59e0b;
  --fn-warning-rgb: 245, 158, 11;
  --fn-danger: #e5484d;
  --fn-danger-rgb: 229, 72, 77;
  --fn-dark: #1a1f2e;
  --fn-dark-rgb: 26, 31, 46;
  --fn-primary-text-emphasis: #8a7000;
  --fn-primary-bg-subtle: #fff8d6;
  --fn-primary-border-subtle: #f5e08a;
  --fn-link-color: #b89400;
  --fn-link-hover-color: #8a7000;
  --fn-explore: #0f766e;
  --fn-explore-rgb: 15, 118, 110;
}

[data-bs-theme="dark"] {
  --fn-primary: #fbce0d;
  --fn-primary-rgb: 251, 206, 13;
  --fn-secondary: #9ca3af;
  --fn-secondary-rgb: 156, 163, 175;
  --fn-success: #3ecf8e;
  --fn-success-rgb: 62, 207, 142;
  --fn-info: #4da8b8;
  --fn-info-rgb: 77, 168, 184;
  --fn-warning: #fbbf24;
  --fn-warning-rgb: 251, 191, 36;
  --fn-danger: #f07178;
  --fn-danger-rgb: 240, 113, 120;
  --fn-primary-text-emphasis: #fde68a;
  --fn-primary-bg-subtle: rgba(251, 206, 13, 0.12);
  --fn-primary-border-subtle: rgba(251, 206, 13, 0.35);
  --fn-link-color: #fbce0d;
  --fn-link-hover-color: #ffe566;
  --fn-explore: #14b8a6;
  --fn-explore-rgb: 20, 184, 166;
}

/* Gold primary needs dark text for contrast */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  --fn-btn-color: #1a1f2e;
  --fn-btn-hover-color: #1a1f2e;
  --fn-btn-active-color: #1a1f2e;
  --fn-btn-bg: #fbce0d;
  --fn-btn-border-color: #fbce0d;
  --fn-btn-hover-bg: #e6bb0c;
  --fn-btn-hover-border-color: #e6bb0c;
  --fn-btn-active-bg: #d4ac0b;
  --fn-btn-active-border-color: #d4ac0b;
  --fn-btn-disabled-color: #1a1f2e;
  --fn-btn-disabled-bg: #fbce0d;
  --fn-btn-disabled-border-color: #fbce0d;
}

.bg-primary {
  color: #1a1f2e !important;
}

.text-bg-primary {
  color: #1a1f2e !important;
  background-color: #fbce0d !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
  color: #1a1f2e !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #1a1f2e;
  background-color: #fbce0d;
}

.form-check-input:checked {
  background-color: #fbce0d;
  border-color: #fbce0d;
}

.pagination .page-link.active,
.pagination .active > .page-link {
  color: #1a1f2e;
  background-color: #fbce0d;
  border-color: #fbce0d;
}

.text-explore {
  color: var(--fn-explore) !important;
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(220px, 58vw);
  object-fit: contain;
}

@media (min-width: 768px) {
  .brand-logo {
    height: 42px;
    max-width: 240px;
  }
}

[data-bs-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1);
}

/*
 * x-responsive-img wraps <img> in <picture>. Bootstrap .ratio sizes the picture,
 * so the image must fill that box or it clips on the right/bottom (esp. mobile).
 */
.responsive-picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.responsive-picture > img,
.responsive-picture__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-position: center center;
}

.ratio > .responsive-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}