/* blogs-style.css
  This file contains styles ONLY for blogs.html
  It assumes style.css is already loaded.
*/

/* Header & Back Link */
.back-link {
    @apply text-cyber-green text-lg inline-block mt-6 border border-cyber-green px-4 py-2 transition-all duration-300;
}
.back-link:hover {
    @apply bg-cyber-green text-black shadow-lg shadow-green-500/20;
}
.back-link::after {
    content: '_';
    animation: blink 0.7s infinite;
    display: inline-block;
    color: #00ff7f;
}

/* Search Bar */
.search-bar-container {
    @apply flex items-center bg-gray-900 border border-gray-700 py-4 px-0 transition-all duration-300;
    position: relative;
}
.search-bar-container:focus-within {
    @apply border-cyber-green shadow-lg shadow-green-500/20;
}

/* Terminal-style prompt */
.search-bar-container::before {
    content: 'vicky@logs:~$';
    color: #00ff7f; /* cyber-green */
    font-family: 'Roboto Mono', monospace;
    padding-left: 1rem; /* 16px */
    padding-right: 0.5rem; /* 8px */
    white-space: nowrap;
}

/* Hide the original search icon */
.search-bar-container .fa-search {
    display: none;
}

.search-bar {
    @apply w-full bg-transparent text-white placeholder-gray-500 outline-none pr-4;
    font-family: 'Roboto Mono', monospace;
    caret-color: #00ff7f; /* Blinking cursor color */
}

/* Filter Buttons */
.filter-btn {
    @apply text-gray-400 border border-gray-700 px-4 py-2 text-sm transition-all duration-300;
}
.filter-btn:hover {
    @apply border-gold text-gold;
}
.filter-btn.active {
    @apply bg-gold text-black border-gold shadow-lg shadow-yellow-400/20;
}

/* Pagination */
.pagination-link {
    @apply text-gray-500 border border-gray-700 px-3 py-1 transition-all duration-300;
}
.pagination-link:hover {
    @apply border-gold text-gold;
}
.pagination-link.active {
    @apply border-cyber-green text-cyber-green;
}
.pagination-link.disabled {
    @apply text-gray-800 border-gray-800 cursor-not-allowed;
}