body {
  margin: 0;
  overflow-x: hidden;
}

@keyframes progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Decrease all heading sizes. Bootstrap size utilities (display-*, fs-*, small)
   opt out so authors can explicitly resize a heading when needed. */
h1:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 28px !important; }
h2:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 24px !important; }
h3:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 20px !important; }
h4:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 18px !important; }
h5:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 16px !important; }
h6:not([class*="display-"]):not([class*="fs-"]):not(.small) { font-size: 14px !important; }

/* Bootstrap's .display-6 ships at 1.5rem (24px) which is smaller than the h1
   reset — force it bigger so a `.display-6` heading reads as a proper hero. */
.display-6 { font-size: 2rem !important; }
@media (min-width: 768px) {
  .display-6 { font-size: 2.25rem !important; }
}
@media (min-width: 1200px) {
  .display-6 { font-size: 2.5rem !important; }
}

img {
  max-width: 100%;
  height: auto;
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.img-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Don't show skeleton background directly on inline img tags */
img.img-skeleton {
  background: none;
  animation: none;
}

/* Page skeletons */
.sk-hero {
  width: 100%;
  height: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

.sk-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

.sk-title { width: 50%; height: 24px; margin-bottom: 16px; }
.sk-subtitle { width: 35%; height: 18px; margin-bottom: 24px; }
.sk-full { width: 100%; }
.sk-medium { width: 75%; }
.sk-short { width: 45%; }

.sk-body { margin-top: 20px; }

.sk-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.sk-card-img {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

.sk-card-body { padding: 16px; }

.ql-editor {
  min-height: 200px;
}

a {
  text-decoration: none !important;
}

/* table {
  word-break: break-all;
} */
.table {
  display: grid;
  --bs-table-bg: none !important;
}

@media (max-width: 480px) {
  th,
  td {
    display: block;
    width: 100% !important;
  }
}

.ck-content a {
  color: hsl(0, 100%, 50%);
}

.ck-content.ck-content--inline p { margin-bottom: 0; }

.btn-danger {
  background-color: hsl(0, 100%, 50%) !important;
}

.text-danger {
  color: hsl(0, 100%, 50%) !important;
}