/* Blog app specific styles extracted from inline template styles */

/* Scope styles only inside the container */
.container body,
.container p,
.container span,
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6,
.container a,
.container small,
.container strong,
.container label,
.container div {
  color: #ffffff !important;
}

.container label {
  color: #ffffff !important;
}

.container input,
.container textarea,
.container select {
  background-color: #2c3e50;
  color: #ffffff !important;
  border-color: #ffffff3b;
}

.container input::placeholder,
.container textarea::placeholder {
  color: #cccccc;
}

.container .btn {
  color: #ffffff;
}

.container .text-muted {
  color: #cccccc !important;
}

.container a {
  color: #ffffff;
}
.container a:hover {
  color: #dddddd;
}

.container .badge {
  color: #ffffff;
}

.container .card {
  background-color: #1c1c1c;
  border-color: #ffffff3b;
}

/* Like button state */
.like-btn.liked {
  background-color: #dc3545; /* bootstrap danger */
  color: #fff;
  border-color: #b02a37;
}
.like-btn.liked i {
  color: #fff;
}
.like-btn {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

/* Edit/Create form card styling */
.card {
    background-color: #34495e;
}

/* Blog edit uses a green/orange palette for action buttons and accents */
.card.header-highlight-orange {
    border: 1px solid #f39c12;
}

.card-header {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}

.card-header h2 {
    font-family: "Bebas Neue", serif;
    margin: 0;
    color: white;
}

.form-label {
    color: #ecf0f1;
    font-family: "Lemon", serif;
    font-weight: bold;
}

.form-control, .form-select {
    background-color: #2c3e50;
    border: 1px solid #f39c12;
    color: #ecf0f1;
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    background-color: #34495e;
    border-color: #e67e22;
    color: #ecf0f1;
    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25);
}

.form-text { color: #bdc3c7; }
.form-check-label { color: #ecf0f1; font-family: "Lemon", serif; }

.blog-stats { background-color: rgba(52, 152, 219, 0.1) !important; border: 1px solid #3498db; color: #ecf0f1; }
.blog-stats h6 { color: #3498db; margin-bottom: 1rem; }

.btn-warning { background: linear-gradient(135deg, #f39c12, #e67e22); border: none; color: white; border-radius: 20px; padding: 10px 20px; font-family: "Bebas Neue", serif; }
.btn-warning:hover { background: linear-gradient(135deg, #e67e22, #f39c12); transform: translateY(-1px); }

.btn-secondary { background-color: #6c757d; border: none; color: white; border-radius: 20px; padding: 10px 20px; font-family: "Bebas Neue", serif; }
.btn-secondary:hover { background-color: #5a6268; transform: translateY(-1px); }

.btn-danger { background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; color: white; border-radius: 20px; padding: 10px 20px; font-family: "Bebas Neue", serif; }
.btn-danger:hover { background: linear-gradient(135deg, #c0392b, #e74c3c); transform: translateY(-1px); }

.alert-danger { background-color: #e74c3c; color: white; border: none; border-radius: 8px; }

textarea { min-height: 200px; }
select[multiple] { min-height: 120px; }

.img-thumbnail { background-color: #2c3e50; border: 1px solid #f39c12; }

/* Create page variations (green) */
.btn-success { background: linear-gradient(135deg, #1ac888, #45a049); border: none; color: white; border-radius: 20px; padding: 10px 20px; font-family: "Bebas Neue", serif; }
.btn-success:hover { background: linear-gradient(135deg, #45a049, #1ac888); transform: translateY(-1px); }

/* Small helper styles used by create/edit gallery previews */
.preview-thumb img { max-height: 100px; display:block; border:1px solid #fff; padding:4px; }

/* Category / Tag list styles */
.category-title, .tag-title { font-family: "Bebas Neue", serif; color: #ecf0f1; font-size: 2.5rem; }
.category-description, .tag-description { color: #bdc3c7; font-size: 1.1rem; margin-bottom: 1rem; }

.blog-card { background-color: #34495e; border: 1px solid #4a7ef0; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(50, 109, 238, 0.3); }
.blog-image { height: 200px; object-fit: cover; }
.blog-card .card-title a { color: #ecf0f1; text-decoration: none; }
.blog-card .card-title a:hover { color: lime; }
.blog-card .card-text { color: #bdc3c7; }
.blog-meta { color: #95a5a6; font-size: 0.85rem; }
.badge-tag { background: linear-gradient(135deg, #1ac888, #45a049); color: white; font-size: 0.7rem; }
.badge-category { background: linear-gradient(135deg, #326dee, #4a7ef0); color: white; font-size: 0.7rem; }
.badge-tag.current-tag { background: linear-gradient(135deg, #e74c3c, #c0392b); box-shadow: 0 2px 4px rgba(231, 76, 60, 0.4); }

.pagination .page-link { background-color: #34495e; border-color: #4a7ef0; color: #ecf0f1; }
.pagination .page-link:hover { background-color: #4a7ef0; border-color: #4a7ef0; color: white; }
.pagination .page-item.active .page-link { background-color: #326dee; border-color: #326dee; }

.related-tags-section h3 { color: #ecf0f1; font-family: "Bebas Neue", serif; margin-bottom: 1rem; }