/* ==========================================================================
   Kyber 2026 jeseň — conference branding layer over CTFd's core theme.
   Colours are lifted from the conference site: orange accent on a deep navy
   with a warm cream page background in light mode.
   ========================================================================== */

:root {
  --kyber-orange: #f07e20;
  --kyber-orange-rgb: 240, 126, 32;
  --kyber-orange-dark: #d4680f;
  --kyber-orange-light: #ff9b47;
  --kyber-navy: #12213f;
  --kyber-navy-rgb: 18, 33, 63;
  --kyber-navy-soft: #1c3053;
  --kyber-cream: #fdf6ec;
  --kyber-cream-deep: #f6e8d5;
  --kyber-ink: #1b2434;

  --bs-primary: var(--kyber-orange);
  --bs-primary-rgb: var(--kyber-orange-rgb);
  --bs-link-color: var(--kyber-orange-dark);
  --bs-link-color-rgb: 212, 104, 15;
  --bs-link-hover-color: var(--kyber-orange);
  --bs-body-bg: var(--kyber-cream);
  --bs-body-color: var(--kyber-ink);
  --bs-border-color: var(--kyber-cream-deep);
}

[data-bs-theme="dark"] {
  --bs-link-color: var(--kyber-orange-light);
  --bs-link-color-rgb: 255, 155, 71;
  --bs-link-hover-color: var(--kyber-orange);
  --bs-body-bg: #0d1830;
  --bs-body-color: #e8edf6;
  --bs-border-color: #24355a;
  --bs-emphasis-color: #ffffff;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* core reserves 100px under <main> for its absolutely-positioned footer. */
main[role="main"] {
  margin-bottom: 0;
}

/* The stock light mode paints a mountain-free flat white; give it the warm
   dawn wash from the conference hero instead. */
:root:not([data-bs-theme="dark"]) body {
  background-image: linear-gradient(180deg, #fff7ea 0%, var(--kyber-cream) 42%, #f3e6d3 100%);
  background-attachment: fixed;
}

[data-bs-theme="dark"] body {
  background-image: linear-gradient(180deg, #101d3a 0%, #0d1830 55%, #0a1327 100%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------- navbar -- */

.navbar.bg-dark {
  background-color: var(--kyber-navy) !important;
  background-image: linear-gradient(90deg, var(--kyber-navy) 0%, var(--kyber-navy-soft) 100%);
  border-bottom: 3px solid var(--kyber-orange);
  box-shadow: 0 2px 18px rgba(var(--kyber-navy-rgb), 0.28);
}

.navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--kyber-orange-light);
}

.navbar .ctf_logo {
  height: 34px;
  width: auto;
}

/* -------------------------------------------------------------- buttons -- */

.btn-primary {
  --bs-btn-bg: var(--kyber-orange);
  --bs-btn-border-color: var(--kyber-orange);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--kyber-orange-dark);
  --bs-btn-hover-border-color: var(--kyber-orange-dark);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--kyber-orange-dark);
  --bs-btn-active-border-color: var(--kyber-orange-dark);
  --bs-btn-disabled-bg: var(--kyber-orange);
  --bs-btn-disabled-border-color: var(--kyber-orange);
  --bs-btn-focus-shadow-rgb: var(--kyber-orange-rgb);
  border-radius: 999px;
  font-weight: 600;
  padding-inline: 1.35rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--kyber-orange-dark);
  --bs-btn-border-color: var(--kyber-orange);
  --bs-btn-hover-bg: var(--kyber-orange);
  --bs-btn-hover-border-color: var(--kyber-orange);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--kyber-orange);
  --bs-btn-active-border-color: var(--kyber-orange);
  --bs-btn-focus-shadow-rgb: var(--kyber-orange-rgb);
  border-radius: 999px;
  font-weight: 600;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--kyber-orange-light);
}

.btn-secondary,
.btn-dark {
  --bs-btn-bg: var(--kyber-navy);
  --bs-btn-border-color: var(--kyber-navy);
  --bs-btn-hover-bg: var(--kyber-navy-soft);
  --bs-btn-hover-border-color: var(--kyber-navy-soft);
  border-radius: 999px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--kyber-orange);
  box-shadow: 0 0 0 0.2rem rgba(var(--kyber-orange-rgb), 0.25);
}

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

/* ------------------------------------------------- cards & challenges --- */

.card,
.modal-content,
.list-group-item {
  border-color: var(--bs-border-color);
  border-radius: 14px;
}

.challenge-button,
.challenge-button .card,
button.challenge-button {
  border-radius: 14px;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.challenge-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--kyber-navy-rgb), 0.16);
}

/* Tag pills on the challenge cards. Kept quiet so the name and point value
   stay the things you read first. */
.challenge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.85rem;
}

.challenge-tag {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

/* Solved cards go bright green, where a translucent white pill would leave
   white text on a light background. Darken the pill instead. */
.challenge-solved .challenge-tag {
  background: rgba(9, 17, 34, 0.55);
  border-color: rgba(9, 17, 34, 0.4);
  color: #ffffff;
}

.badge.bg-primary,
.bg-primary {
  background-color: var(--kyber-orange) !important;
}

.text-primary {
  color: var(--kyber-orange-dark) !important;
}

[data-bs-theme="dark"] .text-primary {
  color: var(--kyber-orange-light) !important;
}

/* Category headings on the challenge board. */
main h1,
main h2,
main h3 {
  letter-spacing: -0.015em;
}

main .challenge-category,
main h3.text-center {
  font-weight: 700;
}

/* Connection info / code blocks read as "terminal" without going neon. */
code,
kbd,
pre {
  color: var(--kyber-orange-dark);
}

[data-bs-theme="dark"] code,
[data-bs-theme="dark"] kbd {
  color: var(--kyber-orange-light);
}

pre,
.challenge-connection-info {
  background-color: rgba(var(--kyber-navy-rgb), 0.06);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] .challenge-connection-info {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ----------------------------------------------------------- scoreboard -- */

.table > thead {
  background-color: rgba(var(--kyber-navy-rgb), 0.9);
  color: #fff;
}

[data-bs-theme="dark"] .table > thead {
  background-color: rgba(255, 255, 255, 0.06);
}

.table > thead th {
  border-bottom: 2px solid var(--kyber-orange);
  font-weight: 600;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--kyber-orange);
  color: var(--kyber-orange-dark);
  font-weight: 600;
}

.progress-bar {
  background-color: var(--kyber-orange);
}

/* Page headers ("Challenges", "Scoreboard", "Team", …) ship near-black. */
.jumbotron {
  background-color: var(--kyber-navy) !important;
  background-image: linear-gradient(120deg, var(--kyber-navy) 0%, var(--kyber-navy-soft) 100%);
  color: #fff;
  border-bottom: 3px solid var(--kyber-orange);
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------- hero ---- */
/* Used by the landing page content the seeder installs. */

.kyber-hero {
  /* The conference key visual, under a navy scrim so white text stays legible
     over both the bright sky and the dark treeline. */
  background-color: var(--kyber-navy);
  background-image: linear-gradient(
      180deg,
      rgba(18, 33, 63, 0.74) 0%,
      rgba(18, 33, 63, 0.5) 48%,
      rgba(18, 33, 63, 0.82) 100%
    ),
    url("../img/hero-konferencia.webp");
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
  color: #fff;
  border-radius: 20px;
  padding: 4.5rem 2rem;
  margin: 2rem 0 2.5rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(9, 17, 34, 0.55);
  box-shadow: 0 18px 46px rgba(var(--kyber-navy-rgb), 0.28);
}

@media (max-width: 575.98px) {
  .kyber-hero {
    padding: 3rem 1.25rem;
    background-position: center;
  }
}

.kyber-hero h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 0.35rem;
}

.kyber-hero h1 .accent {
  color: var(--kyber-orange);
}

.kyber-hero .kyber-hero-sub {
  font-size: 1.05rem;
  opacity: 0.86;
  margin-bottom: 2rem;
}

.kyber-hero .btn {
  margin: 0.25rem;
}

/* ------------------------------------------------------------- footer ---- */

.kyber-footer {
  /* core pins its footer absolutely at a fixed 60px; ours grows with content. */
  position: static;
  bottom: auto;
  height: auto;
  line-height: 1.6;
  margin-top: 3.5rem;
  padding: 2rem 0 1.5rem;
  background-color: var(--kyber-navy);
  background-image: linear-gradient(90deg, var(--kyber-navy) 0%, var(--kyber-navy-soft) 100%);
  border-top: 3px solid var(--kyber-orange);
  color: rgba(255, 255, 255, 0.72);
}

.kyber-organizers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.kyber-organizers-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kyber-orange);
}

.kyber-organizers-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.kyber-organizers-logos img {
  height: 46px;
  width: auto;
  /* Both marks are supplied for light backgrounds; lift them onto the navy. */
  background: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  opacity: 0.95;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.kyber-organizers-logos a:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* The Slovak Cyber Team mark is dark-on-dark artwork, so it gets a subtle
   frame instead of the white chip that suits the SK-CERT wordmark. */
.kyber-organizers-logos img[alt="Slovak Cyber Team"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 12px;
  height: 68px;
}

.kyber-footer-meta {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

.kyber-footer-meta a.kyber-footer-credit {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.kyber-footer-meta a.kyber-footer-credit:hover {
  color: var(--kyber-orange-light);
}

@media (max-width: 575.98px) {
  .kyber-organizers-logos {
    gap: 1.4rem;
  }

  .kyber-footer-meta {
    justify-content: center;
    text-align: center;
  }
}