/*
Theme Name: Modern Glow Blog
Theme URI: https://haseentools.com
Author: Haseen Ullah
Author URI: https://haseentools.com
Description: A modern glowing blog WordPress theme with dark mode and Tailwind CSS.
Version: 1.1
License: GPLv2 or later
Text Domain: modern-glow-blog
*/

:root {
  --primary: #f94f00;
  --text-light: #e2e8f0;
  --text-dark: #1a202c;
  --bg-dark: #0f172a;
  --card-bg-dark: rgba(15, 23, 42, 0.7);
  --border-dark: #1e293b;
  --blur-bg: rgba(249, 79, 0, 0.1);
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  transition: all 0.3s ease;
  min-height: 100vh;
}

.blur-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, var(--blur-bg) 0%, transparent 70%);
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}

.card {
  background: var(--card-bg-dark);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-dark);
  transition: all 0.3s ease;
}

.glow-effect {
  position: relative;
  transition: all 0.3s ease;
}
.glow-effect::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  box-shadow: 0 0 8px var(--primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.glow-effect:hover::after {
  opacity: 0.6;
}

.glow-active {
  box-shadow: 0 0 15px var(--primary);
}

.rounded-all {
  border-radius: 0.75rem;
}

a:hover, .hover-orange:hover {
  color: var(--primary) !important;
}

.search-box {
  transition: all 0.3s ease;
  background: rgba(30, 41, 59, 0.5);
}
.search-box:focus {
  box-shadow: 0 0 10px var(--primary);
  border-color: var(--primary);
}

.featured-post {
  position: relative;
  overflow: hidden;
}
.featured-post::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}
.featured-post:hover::before {
  opacity: 0.1;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(249, 79, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(249, 79, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 79, 0, 0); }
}
.pulse {
  animation: pulse-glow 2s infinite;
}