/* RE//verse CTF Theme
 * Faithful adaptation of re-verse.io stylesheet for CTFd
 *
 * Fonts: Place Interstate-Black.ttf, Interstate-Bold.ttf, Interstate-Regular.ttf
 *        in /themes/reverse/static/webfonts/ to enable the brand font.
 */

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Interstate';
    src: url('../webfonts/Interstate-Black.ttf') format('truetype');
    font-weight: 900;
}
@font-face {
    font-family: 'Interstate';
    src: url('../webfonts/Interstate-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Interstate';
    src: url('../webfonts/Interstate-Regular.ttf') format('truetype');
    font-weight: normal;
}

/* ─── Reset / Force Light Mode ───────────────────────────────────────────── */
/* Override Bootstrap dark mode variables so the theme stays light */
[data-bs-theme="dark"],
[data-bs-theme="light"],
:root {
  --bs-body-bg:          #ffffff;
  --bs-body-color:       #000000;
  --bs-secondary-color:  #444444;
  --bs-border-color:     #231F20;
  --bs-link-color:       #000000;
  --bs-link-hover-color: #ED3F95;

  /* Card */
  --bs-card-bg:           #ffffff;
  --bs-card-color:        #000000;
  --bs-card-border-color: #231F20;

  /* Navbar */
  --bs-navbar-color:          #ffffff;
  --bs-navbar-hover-color:    #ED3F95;
  --bs-navbar-active-color:   #ED3F95;
  --bs-navbar-brand-color:    #ffffff;
  --bs-nav-link-color:        #ffffff;
  --bs-nav-link-hover-color:  #ED3F95;

  /* Modal */
  --bs-modal-bg:          #ffffff;
  --bs-modal-color:       #000000;
  --bs-modal-border-color:#231F20;

  /* Table */
  --bs-table-bg:          #ffffff;
  --bs-table-color:       #000000;
  --bs-table-border-color:#231F20;
  --bs-table-striped-bg:  rgba(237,63,149,0.04);

  /* Input */
  --bs-input-bg:          #ffffff;
  --bs-input-color:       #000000;
  --bs-input-border-color:#231F20;
  --bs-input-focus-bg:    #ffffff;
  --bs-input-focus-color: #000000;

  /* Dropdown */
  --bs-dropdown-bg:           #ffffff;
  --bs-dropdown-color:        #000000;
  --bs-dropdown-border-color: #231F20;
  --bs-dropdown-link-color:   #000000;
  --bs-dropdown-link-hover-bg:#fce4f3;

  /* RE//verse brand pink */
  --rv-pink:       #ED3F95;
  --rv-pink-hover: #DD2F85;
  --rv-shadow:     8px 8px 0px 0px #000000;
  --rv-shadow-sm:  6px 6px 0px 0px #000000;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html,
body {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
  overflow-x: hidden;
}

a {
  color: #000000 !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--rv-pink) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 800 !important;
  color: #000000 !important;
}

h1 {
  font-size: 25px !important;
  line-height: 100% !important;
  margin-bottom: 1em !important;
}

h2 {
  font-size: 25px !important;
  font-weight: 700 !important;
}

hr {
  opacity: 1 !important;
  border-color: #231F20 !important;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.navbar.bg-dark,
.navbar.navbar-dark {
  background-color: #000000 !important;
  border-bottom: none !important;
}

.navbar-brand {
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

.navbar .nav-link {
  color: #ffffff !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--rv-pink) !important;
}

/* Highlight the last nav action (login/logout) like the site's CTA button */
.navbar-nav.ms-md-auto .nav-item:last-of-type .nav-link {
  background-color: var(--rv-pink);
  padding: 0.3rem 0.8rem !important;
  box-shadow: var(--rv-shadow-sm);
  color: #ffffff !important;
}

.navbar-nav.ms-md-auto .nav-item:last-of-type .nav-link:hover {
  background-color: var(--rv-pink-hover);
  color: #ffffff !important;
}

/* ─── Jumbotron / Hero ───────────────────────────────────────────────────── */
.jumbotron {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-bottom: none !important;
  padding: 4rem 1rem !important;
}

.jumbotron h1,
.jumbotron h2 {
  color: #ffffff !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 12px 12px 8px !important;
  line-height: 1.2 !important;
  background-color: var(--rv-pink) !important;
  color: #ffffff !important;
  box-shadow: var(--rv-shadow) !important;
  transition: background-color 0.2s ease !important;
}

.btn:hover,
.btn:focus {
  background-color: var(--rv-pink-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--rv-shadow) !important;
}

.btn:active {
  background-color: var(--rv-pink-hover) !important;
  /* shift shadow on press */
  box-shadow: 4px 4px 0px 0px #000000 !important;
  transform: translate(4px, 4px) !important;
}

/* Secondary / outline variant */
.btn-secondary,
.btn-outline-secondary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: #f0f0f0 !important;
  color: #000000 !important;
}

.btn-danger {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background-color: #333333 !important;
}

/* ─── Forms & Inputs ─────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2.08px solid #231F20 !important;
  border-radius: 0 !important;
  margin: 0.3em 0 !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: var(--rv-pink) !important;
  box-shadow: 4px 4px 0px 0px var(--rv-pink) !important;
}

.form-control::placeholder {
  color: #999999 !important;
}

.form-label {
  color: #000000 !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
}

/* ─── Challenge Board ────────────────────────────────────────────────────── */
.challenge-button {
  background-color: #ffffff !important;
  border: 2px solid #231F20 !important;
  color: #000000 !important;
  border-radius: 0 !important;
  box-shadow: var(--rv-shadow-sm) !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease !important;
}

.challenge-button:hover {
  background-color: #fce4f3 !important;
  color: #000000 !important;
  box-shadow: 8px 8px 0px 0px var(--rv-pink) !important;
  transform: translate(-2px, -2px) !important;
}

.challenge-button.challenge-solved {
  background-color: var(--rv-pink) !important;
  border-color: var(--rv-pink) !important;
  color: #ffffff !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

.challenge-button.challenge-solved:hover {
  background-color: var(--rv-pink-hover) !important;
  box-shadow: 8px 8px 0px 0px #000000 !important;
  transform: translate(-2px, -2px) !important;
}

/* ─── Category Headers ───────────────────────────────────────────────────── */
.category-header h3 {
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--rv-pink) !important;
  border-bottom: 2px solid #000000 !important;
  padding-bottom: 0.4rem !important;
  margin-bottom: 0 !important;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background-color: #ffffff !important;
  border: 2px solid #231F20 !important;
  border-radius: 0 !important;
  color: #000000 !important;
  box-shadow: var(--rv-shadow) !important;
}

.card-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #231F20 !important;
  border-radius: 0 !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.card-body {
  color: #000000 !important;
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-content {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  border-radius: 0 !important;
  color: #000000 !important;
  box-shadow: 12px 12px 0px 0px var(--rv-pink) !important;
}

.modal-header {
  background-color: #000000 !important;
  border-bottom: 2px solid #231F20 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
}

.modal-title {
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
}

.modal-header .btn-close {
  filter: invert(1) !important;
}

.modal-footer {
  border-top: 2px solid #231F20 !important;
  background-color: #f8f8f8 !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table {
  color: #000000 !important;
  border-color: #231F20 !important;
}

.table thead th {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border-color: #231F20 !important;
}

.table tbody tr {
  border-color: #231F20 !important;
  color: #000000 !important;
}

.table tbody td {
  color: #000000 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(237, 63, 149, 0.04) !important;
  color: #000000 !important;
}

.table-hover tbody tr:hover > * {
  background-color: rgba(237, 63, 149, 0.08) !important;
  color: #000000 !important;
}

/* ─── List Group (Scoreboard) ────────────────────────────────────────────── */
.list-group-item {
  background-color: #ffffff !important;
  border: 1px solid #231F20 !important;
  color: #000000 !important;
}

.list-group-item:hover {
  background-color: rgba(237, 63, 149, 0.04) !important;
}

/* Top 3 accents */
.list-group-item:nth-child(1) { border-left: 4px solid #ffd700 !important; }
.list-group-item:nth-child(2) { border-left: 4px solid #c0c0c0 !important; }
.list-group-item:nth-child(3) { border-left: 4px solid #cd7f32 !important; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge.bg-success {
  background-color: var(--rv-pink) !important;
  color: #ffffff !important;
}

.badge.bg-primary {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 0 !important;
  border: 2px solid #231F20 !important;
  color: #000000 !important;
}

.alert-success {
  background-color: rgba(237, 63, 149, 0.08) !important;
  border-color: var(--rv-pink) !important;
  color: #000000 !important;
}

.alert-danger {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

.alert-info {
  background-color: rgba(237, 63, 149, 0.05) !important;
  border-color: var(--rv-pink) !important;
  color: #000000 !important;
}

/* ─── Dropdown ───────────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: #ffffff !important;
  border: 2px solid #231F20 !important;
  border-radius: 0 !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

.dropdown-item {
  color: #000000 !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(237, 63, 149, 0.08) !important;
  color: #000000 !important;
}

.dropdown-item.bg-primary {
  background-color: var(--rv-pink) !important;
  color: #ffffff !important;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background-color: #000000 !important;
  border-top: 2px solid #231F20 !important;
  height: 64px;
}

.footer a,
.footer .text-muted,
.footer small {
  color: #888888 !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.footer a:hover {
  color: var(--rv-pink) !important;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.text-muted {
  color: #666666 !important;
}

.text-secondary {
  color: #444444 !important;
}

.bg-dark {
  background-color: #000000 !important;
}

blockquote {
  border-left: 4px solid var(--rv-pink) !important;
  padding-left: 15px;
}

/* Spinner */
.fa-spin.spinner {
  color: var(--rv-pink);
}

/* Hide the theme toggle button — no dark/light switch in this theme */
.theme-switch {
  display: none !important;
}

/* ─── Nav Tabs (challenge modal) ─────────────────────────────────────────── */
/* Force readable colors regardless of Bootstrap's dark/light mode state */
.nav-tabs {
  --bs-nav-tabs-link-active-color:         #000000;
  --bs-nav-tabs-link-active-bg:            #ffffff;
  --bs-nav-tabs-border-color:              #231F20;
  --bs-nav-tabs-link-hover-border-color:   #231F20;
  --bs-nav-tabs-link-active-border-color:  #231F20 #231F20 #ffffff;
  border-bottom-color: #231F20 !important;
}

.nav-tabs .nav-link {
  color: #666666 !important;
  background-color: transparent !important;
  font-family: 'Interstate', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  border-radius: 0 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--rv-pink) !important;
  border-color: #231F20 #231F20 transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link[aria-selected="true"] {
  color: #000000 !important;
  background-color: #ffffff !important;
  border-color: #231F20 #231F20 #ffffff !important;
  font-weight: 900 !important;
}

/* ─── Snackbar / Toast ───────────────────────────────────────────────────── */
.toast,
.snackbar {
  border-radius: 0 !important;
  border: 2px solid #000000 !important;
  box-shadow: var(--rv-shadow-sm) !important;
}



/* Sponsor logo responsive sizing */
.sponsor-logo {
  max-width: 90%;
}
@media (max-width: 576px) {
  .sponsor-logo {
    max-width: 80%;
  }
  .ps-md-5, .pe-md-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Utility classes to replace inline styles */
.bell-icon {
  height: 30px;
}
.header-main-logo {
  max-width: 860px;
}
.join-us-section {
  margin-top: 6rem;
}
.sponsors-section {
  margin-top: 5rem;
}
.review-board-title {
  text-transform: uppercase;
}
.footer-logo {
  width: 228px;
}
.footer-divider {
  border-width: 2px;
  border-color: #231F20;
}
.contact-text {
  font-weight: 900;
  text-transform: uppercase;
}
.section-padding-bottom {
  padding-bottom: 100px;
}

#sponsors h1 {
  padding-bottom: 0.5em;
  border-bottom: 2px solid black;
}

@media (min-width: 768) {
  #sponsors .RE-padding {
    margin-left: 70px;
    padding-left: 0;
  }
}

#diamond-sponsor {
  padding: 4%;
  background: black;
  width: 100%;
  text-align: center;
  max-height: 400px;
}
#diamond-sponsor h1 {
  color: #FFF;
}
#diamond-sponsor img {
  max-width: 500px;
  width: 80%;
}
.sponsor {
  margin: 24px 0;
  padding: 48px 96px;
  background: transparent center center / cover no-repeat;
  position: relative;
  background-position: right center;
}
@media (max-width: 576px) {
  .sponsor {
    padding: 24px;
  }
}
.sponsor .image-title {
  max-width: 100%;
}
.sponsor--diamond {
  background-image: url('/files/e8fe93d6205a692a6ba52a245f9f2d24/diamond-bg.jpg');
}
.sponsor--platinum {
  background-image: url('/files/d4a1ad823534c33b51e36fb2d04fa745/platinum-bg.jpg');
}
.sponsor--gold {
  background-image: url('/files/e7cfda25cbc365d9a7753250c8652317/gold-bg.jpg');
}

.sponsor--diamond::before,
.sponsor--platinum::before,
.sponsor--gold::before {
  content: ' ';
  position: absolute;
  height: 100%;
  width: 22px;
  left: 50px;
  bottom: 0;
  z-index: 2;
  mix-blend-mode: screen;
}

@media (max-width: 576px) {
  .sponsor--diamond::before,
  .sponsor--platinum::before,
  .sponsor--gold::before {
    display: none;
  }
}
.sponsor--diamond::before {
  background: url("/files/7588bcfbafae2db19fc0b464ef5d2e20/diamond-border.svg") center top no-repeat, linear-gradient(to bottom, transparent 100px, #ED3F95 100px);
}
.sponsor--platinum::before {
  background: url("/files/2543fb9da6cf8ca5de57a412ae33a1eb/platinum-border.svg") center top no-repeat, linear-gradient(to bottom, transparent 100px, #00adee 100px);
}
.sponsor--gold::before {
  background: url("/files/0a33ffbf9a5cfaaf6fceafbfff7b6e14/gold-border.svg") center top no-repeat, linear-gradient(to bottom, transparent 100px, #ffd38e 100px);
}
.sponsor--gold {
  padding-top: 80px;
  padding-bottom: 80px;
}
.sponsor .white-block img {
  max-width: 100%;
  height: auto;
}
.sponsor .white-block a {
  display: block;
  background: white;
  border: 1px solid;
  box-shadow: 8px 8px 0px 0px #000000;
  padding: 30px;
  max-width: 100%;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
}
.w-50-max {
  max-width: 50%;
}
@media (max-width: 768px) {
  .sponsor .white-block a {
    padding: 16px;
  }
  .w-50-max {
    max-width: 100%;
  }
}
.sponsor .image-title {
  max-width: 100%;
  mix-blend-mode: screen;
}

/* Custom tooltips for sponsor logos */
.sponsor .white-block a[data-tooltip],
.sponsor > a[data-tooltip] {
  position: relative;
}

.sponsor .white-block a[data-tooltip]::after,
.sponsor > a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100;
  text-align: left;
  font-weight: normal;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

/* Tooltip size variants */
.sponsor > a.tooltip-lg::after {
  font-size: 32px;
  line-height: 1.5;
  padding: 40px 60px;
  top: 24px; /* account for image margin-top */
  right: 4px;
  bottom: 4px;
}

.sponsor .white-block a.tooltip-md::after {
  font-size: 15px;
  line-height: 1.55;
  padding: 24px 28px;
}

.sponsor .white-block a.tooltip-sm::after {
  font-size: 12px;
  line-height: 1.5;
  padding: 16px 20px;
}

.sponsor .white-block a[data-tooltip]:hover::after,
.sponsor > a[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* On mobile/touch, disable hover tooltips - we use a modal instead */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .sponsor .white-block a[data-tooltip]::after,
  .sponsor > a[data-tooltip]::after {
    display: none;
  }
}

/* Sponsor info modal for mobile */
.sponsor-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sponsor-modal-overlay.active {
  display: flex;
}

.sponsor-modal {
  background: #fff;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 12px 12px 0px 0px #ED3F95;
  border: 2px solid #000;
}

.sponsor-modal-content {
  padding: 24px;
}

.sponsor-modal-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  white-space: pre-line;
}

.sponsor-modal-buttons {
  display: flex;
  gap: 12px;
}

.sponsor-modal-buttons .btn {
  flex: 1;
  width: auto;
  font-size: 16px;
  padding: 12px 16px;
}

.sponsor-modal-buttons .btn-secondary {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 4px 4px 0px 0px #000;
}

.sponsor-modal-buttons .btn-secondary:hover {
  background: #eee;
}