/* General Theme Styles - Glassmorphism */

/* Accent Color Variable */
:root {
  --accent-color: #ffffff;
}

/* 1. Avatar: circular fixes + breathing glow (neon blue) */
.js-avatar {
  transition: all 0.5s ease;
  border: 2px solid rgba(120, 220, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.6), 0 0 24px 5px rgba(0, 200, 255, 0.5);
  animation: avatar-glow 3s ease-in-out infinite;
}

@keyframes avatar-glow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.55), 0 0 20px 4px rgba(0, 200, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 220, 255, 0.9), 0 0 42px 12px rgba(0, 200, 255, 0.75);
  }
}

.ih-item.circle .img {
  border-radius: 50% !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ih-item.circle {
  box-shadow: none !important;
  background: transparent !important;
}

/* 2. Navigation Buttons: Glassmorphism */
.blog-button {
  /* Glassmorphism Base */
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);

  /* Reset/Override existing styles */
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Ensure consistent spacing */
  display: inline-block;
}

/* Fix for profile picture link button (which also has class .blog-button) */
.ih-item.circle .blog-button {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Button Accents (Hover) */
.navigation__item .blog-button:hover,
.btn-mobile-menu__icon:hover {
  background: rgba(30, 30, 30, 0.6);
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 10px var(--accent-color);
  transform: translateY(-2px);
  opacity: 1;
}

/* Social Icons Hover */
.navigation__item a:not(.blog-button):hover {
  color: var(--accent-color) !important;
  text-shadow: 0 0 8px var(--accent-color);
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* Exclude the profile picture button from hover effects */
.ih-item.circle .blog-button:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 3. Subtitle Accent (Subtle) */
.panel-cover__subtitle {
  transition: color 0.5s ease;
}
.panel-cover__subtitle:hover {
  color: var(--accent-color);
}

/* 4. Footer: copyright + beian (bottom centered) */
.remark {
  padding-bottom: 3px;
}

.footer-copy {
  font-size: 16px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  margin: 0;
}

.footer-copy strong {
  font-weight: 700;
}

.footer-copy a {
  position: relative;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-copy a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transition: width 0.3s ease;
}

.footer-copy a:hover {
  color: #fff;
}

.footer-copy a:hover::after {
  width: 100%;
}

.footer-beian {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  margin: 4px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.footer-beian a {
  position: relative;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.footer-beian a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transition: width 0.3s ease;
}

.footer-beian a:hover {
  color: #fff;
}

.footer-beian a:hover::after {
  width: 100%;
}

.footer-beian .gwab img {
  height: 14px;
  width: 14px;
  margin-right: 4px;
}