/* ==========================================================================
   Raelize brand overrides for the CTFd core theme
   Direction: minimal & precise, matching raelize.com — generous whitespace,
   hairline rules, oversized Anaheim headings, teal used sparingly.
   Palette: teal #37abc8 | green #6cb670 | charcoal #292f36 | slate #4e595f
   ========================================================================== */

:root {
  --raelize-teal: #37abc8;
  --raelize-teal-rgb: 55, 171, 200;
  --raelize-teal-dark: #2b89a1;
  --raelize-green: #6cb670;
  --raelize-green-rgb: 108, 182, 112;
  --raelize-charcoal: #292f36;
  --raelize-charcoal-dark: #21262c;
  --raelize-slate: #4e595f;
  --raelize-hairline: #e4e8ea;
  --raelize-hairline-dark: rgba(255, 255, 255, 0.1);

  --bs-font-sans-serif: "Quattrocento Sans", -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-primary: var(--raelize-teal);
  --bs-primary-rgb: var(--raelize-teal-rgb);
  --bs-focus-ring-color: rgba(var(--raelize-teal-rgb), 0.25);
}

/* Readable teal for links: darker on light backgrounds, lighter on dark */
:root,
[data-bs-theme="light"] {
  --bs-link-color: var(--raelize-teal-dark);
  --bs-link-color-rgb: 43, 137, 161;
  --bs-link-hover-color: #226d80;
  --bs-link-hover-color-rgb: 34, 109, 128;
  --bs-primary-text-emphasis: #1d5c6c;
  --bs-primary-bg-subtle: #e1f2f7;
  --bs-primary-border-subtle: #afdde9;
}

[data-bs-theme="dark"] {
  --bs-link-color: #6cc5dc;
  --bs-link-color-rgb: 108, 197, 220;
  --bs-link-hover-color: #8ed3e6;
  --bs-link-hover-color-rgb: 142, 211, 230;
  --bs-primary-text-emphasis: #8ed3e6;
  --bs-primary-bg-subtle: #123a45;
  --bs-primary-border-subtle: #1d5c6c;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Anaheim", var(--bs-font-sans-serif);
  letter-spacing: 0.02em;
}

::selection {
  background: rgba(var(--raelize-teal-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   Buttons & form controls
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--raelize-teal);
  --bs-btn-border-color: var(--raelize-teal);
  --bs-btn-hover-bg: var(--raelize-teal-dark);
  --bs-btn-hover-border-color: var(--raelize-teal-dark);
  --bs-btn-active-bg: #226d80;
  --bs-btn-active-border-color: #226d80;
  --bs-btn-disabled-bg: var(--raelize-teal);
  --bs-btn-disabled-border-color: var(--raelize-teal);
  --bs-btn-focus-shadow-rgb: var(--raelize-teal-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--raelize-teal-dark);
  --bs-btn-border-color: var(--raelize-teal);
  --bs-btn-hover-bg: var(--raelize-teal);
  --bs-btn-hover-border-color: var(--raelize-teal);
  --bs-btn-active-bg: var(--raelize-teal-dark);
  --bs-btn-active-border-color: var(--raelize-teal-dark);
  --bs-btn-disabled-color: var(--raelize-teal);
  --bs-btn-disabled-border-color: var(--raelize-teal);
  --bs-btn-focus-shadow-rgb: var(--raelize-teal-rgb);
}

.btn-success {
  --bs-btn-bg: var(--raelize-green);
  --bs-btn-border-color: var(--raelize-green);
  --bs-btn-hover-bg: #57a35c;
  --bs-btn-hover-border-color: #57a35c;
  --bs-btn-active-bg: #4c8f50;
  --bs-btn-active-border-color: #4c8f50;
  --bs-btn-disabled-bg: var(--raelize-green);
  --bs-btn-disabled-border-color: var(--raelize-green);
  --bs-btn-focus-shadow-rgb: var(--raelize-green-rgb);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--raelize-teal-rgb), 0.6);
  box-shadow: 0 0 0 0.25rem rgba(var(--raelize-teal-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--raelize-teal);
  border-color: var(--raelize-teal);
}

.form-check-input:focus {
  border-color: rgba(var(--raelize-teal-rgb), 0.6);
  box-shadow: 0 0 0 0.25rem rgba(var(--raelize-teal-rgb), 0.25);
}

/* --------------------------------------------------------------------------
   Navs, pagination, misc components
   -------------------------------------------------------------------------- */

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--raelize-teal);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--raelize-teal);
}

.pagination {
  --bs-pagination-active-bg: var(--raelize-teal);
  --bs-pagination-active-border-color: var(--raelize-teal);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--raelize-teal-rgb), 0.25);
}

.text-bg-primary {
  background-color: var(--raelize-teal) !important;
}

.progress-bar {
  background-color: var(--raelize-teal);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--raelize-teal) !important;
}

/* --------------------------------------------------------------------------
   Navbar — white with the gray wordmark in light mode (like raelize.com),
   charcoal with the white wordmark in dark mode. The template carries the
   navbar-dark class, so the color variables are overridden per mode here.
   -------------------------------------------------------------------------- */

.navbar.bg-dark {
  background-color: #fff !important;
  border-bottom: 1px solid var(--raelize-hairline);
  --bs-navbar-color: rgba(41, 47, 54, 0.7);
  --bs-navbar-hover-color: var(--raelize-teal-dark);
  --bs-navbar-active-color: var(--raelize-charcoal);
  --bs-navbar-brand-color: var(--raelize-charcoal);
  --bs-navbar-brand-hover-color: var(--raelize-charcoal);
  --bs-navbar-toggler-border-color: rgba(41, 47, 54, 0.15);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2841, 47, 54, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .navbar.bg-dark {
  background-color: var(--raelize-charcoal-dark) !important;
  border-bottom: 1px solid var(--raelize-hairline-dark);
  --bs-navbar-color: rgba(255, 255, 255, 0.6);
  --bs-navbar-hover-color: #8ed3e6;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img.ctf_logo,
.navbar-brand img.raelize-logo {
  display: block;
  height: 26px;
  width: auto;
}

/* Mode swap for the navbar logo; these must outrank the display:block above */
.navbar-brand img.raelize-logo-dark {
  display: none;
}

[data-bs-theme="dark"] .navbar-brand img.raelize-logo-dark {
  display: block;
}

[data-bs-theme="dark"] .navbar-brand img.raelize-logo-light {
  display: none;
}

/* Logo variants swapped with the color mode (used in navbar and footer) */
.raelize-logo-dark {
  display: none;
}

[data-bs-theme="dark"] .raelize-logo-dark {
  display: inline;
}

[data-bs-theme="dark"] .raelize-logo-light {
  display: none;
}

/* --------------------------------------------------------------------------
   Page headers — the jumbotron becomes a quiet, oversized, left-aligned
   title on the page background, finished with a short teal datum bar.
   -------------------------------------------------------------------------- */

.jumbotron {
  background: transparent;
  color: inherit;
  text-align: center;
  padding: 3.5rem 0 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 0;
}

.jumbotron h1,
.jumbotron .h1 {
  font-family: "Anaheim", var(--bs-font-sans-serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: 0.015em;
  margin-bottom: 0;
}

.jumbotron h1::after,
.jumbotron .h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin: 0.875rem auto 0;
  background: var(--raelize-teal);
}

.jumbotron .lead {
  margin-top: 1rem;
  color: var(--raelize-slate);
}

[data-bs-theme="dark"] .jumbotron .lead {
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   Challenges — clean cards with hairline borders; teal appears on hover,
   green marks solved. [data-bs-theme] prefixes match the specificity of the
   theme-scoped rules in the built core bundle.
   -------------------------------------------------------------------------- */

[data-bs-theme] .challenge-button,
[data-bs-theme="light"] .challenge-button,
[data-bs-theme="dark"] .challenge-button {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--raelize-charcoal);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--raelize-teal-dark);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--raelize-teal-dark);
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border: 1px solid var(--raelize-hairline);
  border-radius: 0.375rem;
  box-shadow: none;
  transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

[data-bs-theme] .challenge-button:hover,
[data-bs-theme] .challenge-button:focus-visible {
  border-color: var(--raelize-teal);
  box-shadow: 0 1px 8px rgba(41, 47, 54, 0.08);
}

[data-bs-theme="dark"] .challenge-button {
  --bs-btn-bg: #2a3138;
  --bs-btn-color: rgba(255, 255, 255, 0.85);
  --bs-btn-hover-bg: #2a3138;
  --bs-btn-hover-color: #8ed3e6;
  --bs-btn-active-bg: #2a3138;
  --bs-btn-active-color: #8ed3e6;
  border-color: var(--raelize-hairline-dark);
}

[data-bs-theme] .challenge-button.challenge-solved,
[data-bs-theme="light"] .challenge-button.challenge-solved,
[data-bs-theme="dark"] .challenge-button.challenge-solved {
  background-color: #f2f9f3;
  color: #3f7a43;
  border-color: var(--raelize-green);
}

[data-bs-theme="dark"] .challenge-button.challenge-solved {
  background-color: #253328;
  color: #a4d6a7;
}

[data-bs-theme] .challenge-button.challenge-solved:hover,
[data-bs-theme] .challenge-button.challenge-solved:focus-visible {
  border-color: var(--raelize-green);
  box-shadow: 0 1px 8px rgba(var(--raelize-green-rgb), 0.25);
}

/* Category headers: small, understated labels with a hairline rule */
.category-header h3 {
  font-family: var(--bs-font-sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--raelize-slate);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

[data-bs-theme="dark"] .category-header h3 {
  color: rgba(255, 255, 255, 0.55);
}

.category-header h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--raelize-hairline);
}

[data-bs-theme="dark"] .category-header h3::after {
  background: var(--raelize-hairline-dark);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--raelize-hairline);
  padding-top: 0.75rem;
}

[data-bs-theme="dark"] .footer {
  border-top-color: var(--raelize-hairline-dark);
}

.footer .raelize-footer-logo {
  height: 18px;
  width: auto;
  opacity: 0.75;
  vertical-align: text-bottom;
}

.footer a:hover .raelize-footer-logo {
  opacity: 1;
}