/* ============================================
   PAGE HEADER - Enhanced Design
   Shared dark hero band used by pages that do not have their own
   full hero section (contact, privacy, terms, blog, blog articles,
   the Indianapolis location page, and the Hifz/Athan app-legal pages).
   Extracted out of services.css so pages that only need this one
   component are not also loading the rest of that file.
   ============================================ */

.page-header {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color: var(--white);
    padding: 10rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 40% at 40% 30%, rgba(113, 23, 242, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 70% 70%, rgba(30, 31, 99, 0.3) 0%, transparent 50%);
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.page-badge svg {
    color: var(--gold);
}

.page-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 200, 87, 0.1);
    animation: float 20s ease-in-out infinite;
}

.decoration-circle:first-child {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
}

.decoration-circle:last-child {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 20px) scale(1.1); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .page-header {
        padding: 8rem 0 4rem;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 7rem 0 3rem;
    }

    .page-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .decoration-circle {
        animation: none;
        transition: none;
    }
}

/* Inline SVG icons (replaced the legacy icon font). Size and color inherit
   from each icon's context; these are the shared defaults. */
.svg-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}