/* ==========================================================================
   PaySlipPro Custom Styles
   Portable to Angular - Copy this entire file
   ========================================================================== */

/* Custom Colors (CSS Variables) */
:root {
  --color-brand: #0b6e4f;
  --color-navy: #1A376B;
  --color-gold: #C9A227;
  --color-accent: #f4b400;
}

/* Hero Section Gradients */
.hero-gradient {
  background: linear-gradient(to bottom right, var(--color-navy), #1c3a66, #0e2648);
}

.hero-glow {
  background: radial-gradient(ellipse 90% 60% at 70% 0%, rgba(201,162,39,0.12), transparent 55%);
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Details/summary custom styling for FAQ */
details summary {
  cursor: pointer;
  user-select: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

/* Prose heading styles - ensuring h2 headings are properly styled */
.prose h2 {
  color: var(--color-navy);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  color: var(--color-navy);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}