/* PTIT Mini Hackathon event skin for CTFd core theme. */
:root {
  --ptit-red: #b51625;
  --ptit-red-dark: #85111c;
  --ptit-ink: #18212f;
  --ptit-muted: #5b6575;
  --ptit-line: #d8dee8;
  --ptit-surface: #ffffff;
  --ptit-band: #f5f7fb;
  --ptit-accent: #0c6b74;
  --ptit-gold: #c99417;
}

body {
  background: var(--ptit-band);
  color: var(--ptit-ink);
}

.navbar.bg-dark,
.navbar.navbar-dark {
  background: #951522 !important;
  border-bottom: 3px solid var(--ptit-gold);
  box-shadow: 0 8px 28px rgba(24, 33, 47, 0.18);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0;
}

.jumbotron {
  background: linear-gradient(135deg, #951522 0%, #b51625 58%, #0c6b74 100%) !important;
  color: #fff;
  border-radius: 0;
  margin-bottom: 28px;
  padding: 38px 0 30px;
}

.jumbotron h1 {
  font-weight: 800;
  letter-spacing: 0;
}

.ptit-home {
  margin-top: -1px;
}

.ptit-hero {
  background:
    linear-gradient(90deg, rgba(10, 18, 30, 0.82), rgba(10, 18, 30, 0.42)),
    url("/themes/ptit/static/img/ptit-logo.png") right 8% center / min(34vw, 360px) auto no-repeat,
    #951522;
  color: #fff;
  min-height: 390px;
  padding: 72px 0 56px;
}

.ptit-hero h1 {
  max-width: 780px;
  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0;
}

.ptit-hero p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.06rem;
}

.ptit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ptit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.ptit-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.ptit-btn.primary {
  background: #fff;
  color: var(--ptit-red-dark);
  border-color: #fff;
}

.ptit-section {
  padding: 40px 0;
}

.ptit-panel {
  background: var(--ptit-surface);
  border: 1px solid var(--ptit-line);
  border-radius: 8px;
  padding: 22px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(24, 33, 47, 0.06);
}

.ptit-panel h2,
.ptit-panel h3 {
  letter-spacing: 0;
  font-weight: 800;
  color: var(--ptit-ink);
}

.ptit-stat {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
}

.ptit-stat strong {
  color: var(--ptit-red);
  font-size: 1.9rem;
  line-height: 1;
}

.ptit-rule-list li {
  margin-bottom: 8px;
}

main > .container {
  padding-top: 18px;
  padding-bottom: 42px;
}

.jumbotron + .container {
  padding-top: 22px;
}

form.row {
  row-gap: 10px;
}

form.row .mb-3 {
  margin-bottom: 16px !important;
}

.form-control,
.form-select {
  min-height: 42px;
  border-color: #c8d0dc;
  border-radius: 6px;
}

hr {
  margin: 22px 0 26px;
  border-top-color: var(--ptit-line);
  opacity: 1;
}

.table {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ptit-line);
  box-shadow: 0 8px 22px rgba(24, 33, 47, 0.05);
}

.table thead th {
  background: #eef2f7;
  color: var(--ptit-ink);
  font-weight: 800;
  border-bottom: 1px solid var(--ptit-line);
  padding: 14px 16px;
  white-space: nowrap;
}

.table tbody td {
  padding: 13px 16px;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f8fafc;
}

.page-select {
  min-height: 38px;
  min-width: 76px;
  margin: 10px;
}

.category-header h3 {
  color: var(--ptit-red-dark);
  font-weight: 800;
}

.challenge-button.btn-dark {
  background: #202a38;
  border-color: #202a38;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(24, 33, 47, 0.12);
}

.challenge-button.btn-dark:hover {
  background: #b51625;
  border-color: #b51625;
  transform: translateY(-1px);
}

.challenge-solved {
  background: #0c6b74 !important;
  border-color: #0c6b74 !important;
}

.modal-content,
.card,
.table {
  border-radius: 8px;
}

.btn-primary {
  background: var(--ptit-red);
  border-color: var(--ptit-red);
}

.btn-primary:hover {
  background: var(--ptit-red-dark);
  border-color: var(--ptit-red-dark);
}

@media (max-width: 767.98px) {
  .ptit-hero {
    background:
      linear-gradient(90deg, rgba(10, 18, 30, 0.86), rgba(10, 18, 30, 0.76)),
      #951522;
    min-height: 360px;
    padding: 56px 0 44px;
  }

  .ptit-actions {
    flex-direction: column;
  }

  .ptit-btn {
    width: 100%;
  }
}