/* Since we don't have the full build pipeline (esbuild, sass, bootstrap), */
/* we'll try to include a CDN link for Bootstrap in the HTML and add the custom CSS here. */
/* This is a simplified version of what would be compiled from SCSS. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f5f9fd;
}

/* Custom colors based on SCSS variables */
.text-primary {
    color: #9c27b0 !important;
}

.btn-primary {
    background-color: #9c27b0 !important;
    border-color: #9c27b0 !important;
}

.btn-primary:hover {
    background-color: #7b1fa2 !important; /* Slightly darker shade for hover */
    border-color: #7b1fa2 !important;
}

img.landing-page-image {
  height: 360px;
  object-fit: contain;
  max-width: 100%;
}

.user-timing {
  right: 9px;
  bottom: 9px;
  color: #fff;
}

.views-content {
  color: #606271;
}

.views {
  font-size: 12px;

}

.dots {
  display: flex;
  height: 10px;
  width: 10px;
  background-color: green;
  border-radius: 50%;
  margin-left: 5px;
  margin-bottom: 6px;
}

.days-ago {
  margin-top: -10px;
  color: #606271;
}

.blog-thumbnail {
  height: 200px;
  object-fit: cover;
}

.blog-img-top {
  height: 400px;
  object-fit: cover;
}

/* Alerts */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert p {
  margin-bottom: 0;
}

.alert:empty {
  display: none;
}

.invalid-feedback {
  color: #dc3545;
  display: block;
  margin-top: 0.5rem;
  margin-left: 1rem;
}

/* LiveView specific classes (kept for compatibility) */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-loading {
  cursor: wait;
}