/* 
  Global Styles for vps-hosting.site
*/

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }
}

/* Scroll animation entry classes */
.fade-up {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Prose styles for blog/review text content */
.prose { 
  max-width: 80ch; 
  margin: 0 auto; 
  color: #374151; 
  line-height: 1.8; 
}
.prose h1 { font-size: 2.25rem; font-weight: 800; margin: 2.5rem 0 1.5rem; color: #111827; letter-spacing: -0.025em; }
.prose h2 { font-size: 1.875rem; font-weight: 700; margin: 2.5rem 0 1.25rem; color: #111827; letter-spacing: -0.025em; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem; }
.prose h3 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: #111827; }
.prose p  { margin-bottom: 1.5rem; }
.prose ul { padding-left: 1.5rem; margin-bottom: 1.5rem; list-style-type: none; }
.prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; }
.prose ul li::before { content: '→'; position: absolute; left: 0; color: #2563eb; font-weight: bold; }
.prose ol { padding-left: 1.5rem; margin-bottom: 1.5rem; list-style-type: decimal; }
.prose li { margin-bottom: 0.75rem; }
.prose a  { color: #2563eb; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.prose a:hover { border-bottom-color: #2563eb; }
.prose strong { font-weight: 700; color: #111827; }
.prose blockquote { border-left: 4px solid #2563eb; background: #f9fafb; padding: 1.5rem; border-radius: 0.75rem; font-style: italic; margin: 2rem 0; color: #4b5563; }
.prose img { border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); margin: 2.5rem 0; width: 100%; height: auto; }

/* Animated banner ad gradient */
@keyframes bgSlide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.rh-banner-wrap {
  background: linear-gradient(-45deg, #1e3a8a, #1e40af, #2563eb, #3b82f6);
  background-size: 400% 400%;
  animation: bgSlide 10s ease infinite;
}

/* Shimmer effect on banner hover */
.rh-sweep {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), rgba(255,255,255,0.2), transparent);
}

/* Admin table utility classes */
.tbl-container { overflow-x: auto; border-radius: 12px; border: 1px solid #e5e7eb; }
.tbl { width: 100%; border-collapse: collapse; text-align: left; background: #fff; }
.tbl th, .tbl td { padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.tbl th { background: #f9fafb; font-weight: 700; color: #374151; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fbfcfe; }

/* Logo hover subtle scale */
.rh-logo { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.rh-logo:hover { transform: rotate(-2deg) scale(1.05); }

/* FAQ Accordion Transitions */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}
.faq-answer.open {
  max-height: 500px;
  transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

/* Stats Counter Animation */
.stat-num {
  font-variant-numeric: tabular-nums;
}