Qwen Qwen3.7 Plus – Religion and Spirituality

via Alibaba · Generated

  • AIMAC Debt 2.66
  • Cost $0.02
  • Total Violations 2
  • HTML Size 63 KB
  • Em Dashes 8

Screenshot

View Qwen Qwen3.7 Plus Religion and Spirituality page View Live Page

Accessibility Issues Found

2 Serious

  • color-contrast serious 2 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p>Rooted in Faith. Growing in Grace.</p>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evergreen Community Church — Rooted in Faith. Growing in Grace.</title>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --navy: #1a2744;
            --navy-light: #2a3d5e;
            --forest: #2d5a3f;
            --forest-light: #3d7a55;
            --gold: #c8a45e;
            --gold-light: #e0c882;
            --cream: #faf8f4;
            --warm-white: #ffffff;
            --text-dark: #1a1a2e;
            --text-medium: #4a4a5a;
            --text-light: #6b6b7b;
            --border-light: #e8e4dc;
            --shadow-sm: 0 2px 8px rgba(26, 39, 68, 0.06);
            --shadow-md: 0 4px 20px rgba(26, 39, 68, 0.1);
            --shadow-lg: 0 8px 40px rgba(26, 39, 68, 0.12);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            background: var(--cream);
            line-height: 1.7;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Lora', serif;
            line-height: 1.3;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ===== HEADER ===== */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-light);
            transition: var(--transition);
        }

        header.scrolled {
            box-shadow: var(--shadow-md);
        }

        .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .logo-area img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }

        .logo-text h1 {
            font-size: 1.3rem;
            color: var(--navy);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .logo-text p {
            font-size: 0.72rem;
            color: var(--gold);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        nav {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        nav a {
            padding: 8px 16px;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text-medium);
            border-radius: var(--radius-sm);
            position: relative;
        }

        nav a:hover {
            color: var(--navy);
            background: rgba(26, 39, 68, 0.04);
        }

        nav a.active {
            color: var(--forest);
            font-weight: 600;
        }

        .nav-cta {
            background: var(--forest);
            color: white !important;
            padding: 10px 22px !important;
            border-radius: 50px !important;
            font-weight: 600 !important;
            margin-left: 8px;
        }

        .nav-cta:hover {
            background: var(--forest-light) !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(45, 90, 63, 0.3);
        }

        .mobile-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
        }

        .mobile-toggle span {
            width: 24px;
            height: 2px;
            background: var(--navy);
            border-radius: 2px;
            transition: var(--transition);
        }

        /* ===== HERO ===== */
        .hero {
            margin-top: 88px;
            position: relative;
            min-height: 85vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 50%, var(--forest) 100%);
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('https://picsum.photos/1920/1080?blur=2') center/cover;
            opacity: 0.15;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 120px;
            background: linear-gradient(to top, var(--cream), transparent);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 24px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .hero-text {
            color: white;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(200, 164, 94, 0.15);
            border: 1px solid rgba(200, 164, 94, 0.3);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--gold-light);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 24px;
        }

        .hero-badge::before {
            content: '✦';
            font-size: 0.7rem;
        }

        .hero-text h2 {
            font-size: 3.2rem;
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }

        .hero-text h2 span {
            color: var(--gold-light);
        }

        .hero-text p {
            font-size: 1.1rem;
            line-height: 1.8;
            opacity: 0.85;
            margin-bottom: 36px;
            max-width: 520px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--gold);
            color: var(--navy);
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: var(--gold-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(200, 164, 94, 0.4);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: white;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            border: 2px solid rgba(255,255,255,0.3);
            transition: var(--transition);
            cursor: pointer;
        }

        .btn-secondary:hover {
            border-color: white;
            background: rgba(255,255,255,0.08);
            transform: translateY(-2px);
        }

        .hero-image {
            position: relative;
        }

        .hero-image img {
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            width: 100%;
            height: 480px;
            object-fit: cover;
        }

        .hero-image .floating-card {
            position: absolute;
            bottom: -20px;
            left: -30px;
            background: white;
            padding: 16px 24px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .floating-card .icon-circle {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--forest), var(--forest-light));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .floating-card .fc-text strong {
            display: block;
            font-size: 0.9rem;
            color: var(--navy);
        }

        .floating-card .fc-text span {
            font-size: 0.78rem;
            color: var(--text-light);
        }

        /* ===== SERVICE TIMES ===== */
        .service-times {
            padding: 100px 0;
            background: var(--warm-white);
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--forest);
            margin-bottom: 12px;
            position: relative;
        }

        .section-label::before,
        .section-label::after {
            content: '—';
            margin: 0 8px;
            color: var(--gold);
        }

        .section-header h2 {
            font-size: 2.4rem;
            color: var(--navy);
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .section-header p {
            font-size: 1.05rem;
            color: var(--text-medium);
            max-width: 600px;
            margin: 0 auto;
        }

        .times-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .time-card {
            background: var(--cream);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            padding: 36px 28px;
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .time-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--forest), var(--gold));
            opacity: 0;
            transition: var(--transition);
        }

        .time-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: transparent;
        }

        .time-card:hover::before {
            opacity: 1;
        }

        .time-card .day-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--navy), var(--navy-light));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.4rem;
        }

        .time-card h3 {
            font-size: 1.2rem;
            color: var(--navy);
            margin-bottom: 8px;
        }

        .time-card .time {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--forest);
            margin-bottom: 12px;
            font-family: 'Lora', serif;
        }

        .time-card p {
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.6;
        }

        /* ===== MINISTRIES / FAITH FORMATION ===== */
        .ministries {
            padding: 100px 0;
            background: var(--cream);
        }

        .ministries-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
        }

        .ministry-card {
            background: var(--warm-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border: 1px solid var(--border-light);
        }

        .ministry-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .ministry-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .ministry-card .card-body {
            padding: 28px;
        }

        .ministry-card .card-tag {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--forest);
            background: rgba(45, 90, 63, 0.08);
            padding: 4px 12px;
            border-radius: 50px;
            margin-bottom: 12px;
        }

        .ministry-card h3 {
            font-size: 1.3rem;
            color: var(--navy);
            margin-bottom: 12px;
        }

        .ministry-card p {
            font-size: 0.92rem;
            color: var(--text-medium);
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .ministry-card .card-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--forest);
        }

        .ministry-card .card-link:hover {
            gap: 10px;
            color: var(--forest-light);
        }

        /* ===== YOUTH PROGRAMS ===== */
        .youth {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--navy) 0%, var(--forest) 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }

        .youth::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(200, 164, 94, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .youth-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .youth-text .section-label {
            color: var(--gold-light);
        }

        .youth-text h2 {
            font-size: 2.4rem;
            margin-bottom: 20px;
            color: white;
        }

        .youth-text p {
            font-size: 1rem;
            opacity: 0.85;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .youth-features {
            list-style: none;
            margin: 28px 0;
        }

        .youth-features li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .youth-features li::before {
            content: '✦';
            color: var(--gold-light);
            font-size: 0.8rem;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .youth-image {
            position: relative;
        }

        .youth-image img {
            border-radius: var(--radius-lg);
            width: 100%;
            height: 450px;
            object-fit: cover;
            box-shadow: var(--shadow-lg);
        }

        .youth-image .stat-badge {
            position: absolute;
            top: 20px;
            right: -20px;
            background: var(--gold);
            color: var(--navy);
            padding: 16px 24px;
            border-radius: var(--radius-md);
            text-align: center;
            box-shadow: var(--shadow-lg);
        }

        .stat-badge .stat-number {
            font-size: 2rem;
            font-weight: 800;
            font-family: 'Lora', serif;
            display: block;
        }

        .stat-badge .stat-label {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        /* ===== DEVOTIONAL CALENDAR ===== */
        .devotional {
            padding: 100px 0;
            background: var(--warm-white);
        }

        .devotional-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 48px;
            align-items: start;
        }

        .calendar-widget {
            background: var(--cream);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .calendar-header {
            background: var(--navy);
            color: white;
            padding: 24px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .calendar-header h3 {
            font-size: 1.2rem;
        }

        .calendar-nav {
            display: flex;
            gap: 8px;
        }

        .calendar-nav button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
            background: transparent;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 1rem;
        }

        .calendar-nav button:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.4);
        }

        .calendar-grid {
            padding: 20px;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            text-align: center;
        }

        .calendar-days .day-name {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-light);
            padding: 8px 0;
        }

        .calendar-days .day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 500;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition);
            color: var(--text-medium);
            position: relative;
        }

        .calendar-days .day:hover {
            background: rgba(45, 90, 63, 0.08);
            color: var(--forest);
        }

        .calendar-days .day.today {
            background: var(--forest);
            color: white;
            font-weight: 700;
        }

        .calendar-days .day.has-devotion::after {
            content: '';
            position: absolute;
            bottom: 4px;
            width: 4px;
            height: 4px;
            background: var(--gold);
            border-radius: 50%;
        }

        .calendar-days .day.other-month {
            color: var(--border-light);
        }

        .devotional-sidebar {
            background: var(--cream);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: 32px;
        }

        .devotional-sidebar h3 {
            font-size: 1.2rem;
            color: var(--navy);
            margin-bottom: 8px;
        }

        .devotional-sidebar .verse-ref {
            font-size: 0.8rem;
            color: var(--gold);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 16px;
        }

        .devotional-sidebar blockquote {
            font-family: 'Lora', serif;
            font-size: 1.05rem;
            font-style: italic;
            color: var(--text-dark);
            line-height: 1.7;
            border-left: 3px solid var(--gold);
            padding-left: 20px;
            margin-bottom: 20px;
        }

        .devotional-sidebar .reflection {
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .devotional-sidebar .prayer-prompt {
            background: rgba(45, 90, 63, 0.06);
            border-radius: var(--radius-sm);
            padding: 16px;
            margin-bottom: 20px;
        }

        .devotional-sidebar .prayer-prompt strong {
            display: block;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--forest);
            margin-bottom: 6px;
        }

        .devotional-sidebar .prayer-prompt p {
            font-size: 0.88rem;
            color: var(--text-medium);
            line-height: 1.6;
        }

        /* ===== TESTIMONIALS ===== */
        .testimonials {
            padding: 100px 0;
            background: var(--cream);
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .testimonial-card {
            background: var(--warm-white);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            padding: 32px;
            transition: var(--transition);
        }

        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .testimonial-card .stars {
            color: var(--gold);
            font-size: 0.9rem;
            margin-bottom: 16px;
            letter-spacing: 2px;
        }

        .testimonial-card .quote {
            font-family: 'Lora', serif;
            font-size: 0.95rem;
            font-style: italic;
            color: var(--text-dark);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .testimonial-card .author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .testimonial-card .author img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }

        .testimonial-card .author-info strong {
            display: block;
            font-size: 0.88rem;
            color: var(--navy);
        }

        .testimonial-card .author-info span {
            font-size: 0.78rem;
            color: var(--text-light);
        }

        /* ===== OUTREACH ===== */
        .outreach {
            padding: 100px 0;
            background: var(--warm-white);
        }

        .outreach-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .outreach-image img {
            border-radius: var(--radius-lg);
            width: 100%;
            height: 420px;
            object-fit: cover;
            box-shadow: var(--shadow-md);
        }

        .outreach-text h2 {
            font-size: 2.2rem;
            color: var(--navy);
            margin-bottom: 20px;
        }

        .outreach-text p {
            font-size: 0.95rem;
            color: var(--text-medium);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .outreach-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 32px 0;
        }

        .outreach-stat {
            text-align: center;
            padding: 20px;
            background: var(--cream);
            border-radius: var(--radius-sm);
        }

        .outreach-stat .number {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--forest);
            font-family: 'Lora', serif;
            display: block;
        }

        .outreach-stat .label {
            font-size: 0.75rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        /* ===== FAQ ===== */
        .faq {
            padding: 100px 0;
            background: var(--cream);
        }

        .faq-list {
            max-width: 760px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--warm-white);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-item:hover {
            border-color: var(--forest);
        }

        .faq-question {
            padding: 22px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--navy);
            transition: var(--transition);
        }

        .faq-question:hover {
            color: var(--forest);
        }

        .faq-question .faq-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--cream);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: var(--transition);
            flex-shrink: 0;
        }

        .faq-item.active .faq-icon {
            background: var(--forest);
            color: white;
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.3s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-answer-inner {
            padding: 0 28px 22px;
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.7;
        }

        /* ===== NEWSLETTER CTA ===== */
        .newsletter {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--forest) 0%, var(--navy) 100%);
            color: white;
            text-align: center;
        }

        .newsletter h2 {
            font-size: 2rem;
            margin-bottom: 12px;
        }

        .newsletter p {
            font-size: 1rem;
            opacity: 0.8;
            margin-bottom: 32px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .newsletter-form {
            display: flex;
            gap: 12px;
            max-width: 480px;
            margin: 0 auto;
        }

        .newsletter-form input {
            flex: 1;
            padding: 14px 24px;
            border-radius: 50px;
            border: 2px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08);
            color: white;
            font-size: 0.95rem;
            outline: none;
            transition: var(--transition);
        }

        .newsletter-form input::placeholder {
            color: rgba(255,255,255,0.5);
        }

        .newsletter-form input:focus {
            border-color: var(--gold);
            background: rgba(255,255,255,0.12);
        }

        .newsletter-form button {
            padding: 14px 28px;
            border-radius: 50px;
            background: var(--gold);
            color: var(--navy);
            font-weight: 700;
            font-size: 0.9rem;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

        .newsletter-form button:hover {
            background: var(--gold-light);
            transform: translateY(-2px);
        }

        /* ===== FOOTER ===== */
        footer {
            background: var(--navy);
            color: rgba(255,255,255,0.7);
            padding: 80px 0 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px;
            margin-bottom: 60px;
        }

        .footer-about .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .footer-about .footer-logo img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .footer-about .footer-logo span {
            font-family: 'Lora', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
        }

        .footer-about p {
            font-size: 0.88rem;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .social-links {
            display: flex;
            gap: 10px;
        }

        .social-links a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            transition: var(--transition);
        }

        .social-links a:hover {
            background: var(--forest);
            border-color: var(--forest);
            color: white;
        }

        .footer-col h4 {
            color: white;
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: 10px;
        }

        .footer-col ul li a {
            font-size: 0.88rem;
            transition: var(--transition);
        }

        .footer-col ul li a:hover {
            color: var(--gold-light);
            padding-left: 4px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 24px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.8rem;
        }

        .footer-bottom-links {
            display: flex;
            gap: 24px;
        }

        .footer-bottom-links a:hover {
            color: var(--gold-light);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-text p {
                margin: 0 auto 36px;
            }

            .hero-buttons {
                justify-content: center;
            }

            .hero-image {
                display: none;
            }

            .times-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }

            .ministries-grid {
                grid-template-columns: 1fr;
            }

            .youth-content {
                grid-template-columns: 1fr;
            }

            .youth-image {
                order: -1;
            }

            .devotional-layout {
                grid-template-columns: 1fr;
            }

            .outreach-content {
                grid-template-columns: 1fr;
            }

            .testimonial-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            nav {
                display: none;
            }

            .mobile-toggle {
                display: flex;
            }

            .hero-text h2 {
                font-size: 2.2rem;
            }

            .section-header h2 {
                font-size: 1.8rem;
            }

            .outreach-stats {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }

            .newsletter-form {
                flex-direction: column;
            }
        }

        /* ===== ANIMATIONS ===== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-in {
            animation: fadeInUp 0.6s ease forwards;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
    </style>
</head>
<body>

    <!-- ===== HEADER ===== -->
    <header id="header">
        <div class="header-top">
            <a href="#" class="logo-area">
                <img src="https://placehold.co/48x48/2d5a3f/ffffff?text=EC&font=lora" alt="Evergreen Community Church Logo">
                <div class="logo-text">
                    <h1>Evergreen Community</h1>
                    <p>Rooted in Faith. Growing in Grace.</p>
                </div>
            </a>
            <nav>
                <a href="#home" class="active">Home</a>
                <a href="#services">Services</a>
                <a href="#ministries">Ministries</a>
                <a href="#resources">Resources</a>
                <a href="#outreach">Outreach</a>
                <a href="#youth">Youth</a>
                <a href="#contact">Contact</a>
                <a href="#watch" class="nav-cta">Watch Live</a>
            </nav>
            <div class="mobile-toggle" onclick="document.querySelector('nav').classList.toggle('mobile-open')">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>

    <!-- ===== HERO ===== -->
    <section class="hero" id="home">
        <div class="hero-content">
            <div class="hero-text">
                <div class="hero-badge">Welcome Home</div>
                <h2>A Place Where <span>Faith Flourishes</span> and Community Thrives</h2>
                <p>At Evergreen Community Church, we believe that every person is on a spiritual journey. Whether you're taking your first steps of faith or have walked with Christ for decades, you'll find a welcoming community here that is committed to growing together in God's love, scripture, and service to others.</p>
                <div class="hero-buttons">
                    <a href="#services" class="btn-primary">Plan Your Visit →</a>
                    <a href="#watch" class="btn-secondary">▶ Watch Service</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://picsum.photos/600/480" alt="Community gathering at Evergreen Church">
                <div class="floating-card">
                    <div class="icon-circle">🕊</div>
                    <div class="fc-text">
                        <strong>Join Us Sunday</strong>
                        <span>9:00 AM & 11:00 AM</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== SERVICE TIMES ===== -->
    <section class="service-times" id="services">
        <div class="container">
            <div class="section-header">
                <div class="section-label">Worship With Us</div>
                <h2>Service Times & Gatherings</h2>
                <p>We gather throughout the week to worship, study scripture, and build one another up in faith. All are welcome at every service.</p>
            </div>
            <div class="times-grid">
                <div class="time-card">
                    <div class="day-icon">☀</div>
                    <h3>Sunday Morning Worship</h3>
                    <div class="time">9:00 & 11:00 AM</div>
                    <p>Our primary weekly gathering featuring congregational worship, expository teaching from scripture, communion on the first Sunday of each month, and a time of prayer for our community and world.</p>
                </div>
                <div class="time-card">
                    <div class="day-icon">📖</div>
                    <h3>Wednesday Bible Study</h3>
                    <div class="time">7:00 PM</div>
                    <p>Dive deeper into God's Word through interactive small-group study. We work through books of the Bible verse by verse, applying timeless truths to our modern lives. Childcare is provided.</p>
                </div>
                <div class="time-card">
                    <div class="day-icon">🙏</div>
                    <h3>Friday Prayer Meeting</h3>
                    <div class="time">6:30 PM</div>
                    <p>A sacred time of corporate prayer, intercession, and spiritual reflection. We lift up the needs of our congregation, our city, and global missions. This is the heartbeat of our ministry.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== MINISTRIES ===== -->
    <section class="ministries" id="ministries">
        <div class="container">
            <div class="section-header">
                <div class="section-label">Faith Formation</div>
                <h2>Our Ministries</h2>
                <p>From children to seniors, we offer pathways for every stage of your spiritual journey. Discover where you belong and how you can grow.</p>
            </div>
            <div class="ministries-grid">
                <div class="ministry-card">
                    <img src="https://picsum.photos/600/300?grayscale" alt="Adult Bible Study Ministry">
                    <div class="card-body">
                        <span class="card-tag">Adults</span>
                        <h3>Adult Faith Formation</h3>
                        <p>Our adult ministries are designed to help believers mature in their faith through rigorous study of scripture, authentic community, and practical application. From new believer classes to advanced theological discussions, there's a place for everyone to learn, question, and grow deeper in their relationship with Christ.</p>
                        <a href="#" class="card-link">Explore Adult Ministries →</a>
                    </div>
                </div>
                <div class="ministry-card">
                    <img src="https://picsum.photos/600/300" alt="Children's Ministry">
                    <div class="card-body">
                        <span class="card-tag">Children</span>
                        <h3>Children's Ministry — "Little Seeds"</h3>
                        <p>We believe that planting seeds of faith early yields a lifetime of spiritual growth. Our children's ministry uses age-appropriate curriculum, creative worship, and engaging activities to help kids ages 0–12 understand God's love and the stories of scripture in ways that resonate with their hearts and minds.</p>
                        <a href="#" class="card-link">Learn About Little Seeds →</a>
                    </div>
                </div>
                <div class="ministry-card">
                    <img src="https://picsum.photos/600/300" alt="Small Groups Ministry">
                    <div class="card-body">
                        <span class="card-tag">Community</span>
                        <h3>Small Groups & Life Groups</h3>
                        <p>Life is better shared. Our small groups meet in homes throughout the city each week, creating intimate spaces for vulnerability, prayer, scripture study, and mutual encouragement. Whether you're looking for a group of peers, young professionals, or parents, we have a circle waiting for you.</p>
                        <a href="#" class="card-link">Find a Small Group →</a>
                    </div>
                </div>
                <div class="ministry-card">
                    <img src="https://picsum.photos/600/300?grayscale" alt="Worship & Arts Ministry">
                    <div class="card-body">
                        <span class="card-tag">Worship</span>
                        <h3>Worship & Creative Arts</h3>
                        <p>Our worship team leads the congregation in praise each week through a blend of contemporary and traditional hymns. Beyond music, our creative arts ministry includes drama, visual arts, and multimedia — all offered as acts of worship and avenues for creative expression of faith.</p>
                        <a href="#" class="card-link">Join the Worship Team →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== YOUTH PROGRAMS ===== -->
    <section class="youth" id="youth">
        <div class="container">
            <div class="youth-content">
                <div class="youth-text">
                    <div class="section-label">Next Generation</div>
                    <h2>Youth Programs That Transform Lives</h2>
                    <p>Our student ministry exists to partner with parents in the spiritual formation of middle and high school students. We create environments where teenagers can ask hard questions, explore scripture for themselves, and discover their God-given identity and purpose.</p>
                    <p>Through weekly gatherings, summer camps, mission trips, and mentorship relationships, we invest in the next generation of faith leaders — equipping them to live out their faith boldly at school, online, and in their communities.</p>
                    <ul class="youth-features">
                        <li>Weekly youth group meetings with dynamic worship and relevant teaching</li>
                        <li>Annual summer camp and winter retreat experiences</li>
                        <li>Local and international mission trip opportunities</li>
                        <li>One-on-one discipleship and mentorship programs</li>
                        <li>Leadership development for student volunteers</li>
                    </ul>
                    <a href="#" class="btn-primary">Sign Up for Youth Ministry →</a>
                </div>
                <div class="youth-image">
                    <img src="https://picsum.photos/600/450" alt="Youth group activities">
                    <div class="stat-badge">
                        <span class="stat-number">180+</span>
                        <span class="stat-label">Students Served</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== DEVOTIONAL CALENDAR ===== -->
    <section class="devotional" id="resources">
        <div class="container">
            <div class="section-header">
                <div class="section-label">Daily Spiritual Resources</div>
                <h2>Devotional Calendar</h2>
                <p>Stay connected to God's Word every day with our curated devotional readings, prayer prompts, and scripture reflections.</p>
            </div>
            <div class="devotional-layout">
                <div class="calendar-widget">
                    <div class="calendar-header">
                        <h3 id="calendarMonth">January 2025</h3>
                        <div class="calendar-nav">
                            <button onclick="changeMonth(-1)">‹</button>
                            <button onclick="changeMonth(1)">›</button>
                        </div>
                    </div>
                    <div class="calendar-grid">
                        <div class="calendar-days" id="calendarDays">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
                <div class="devotional-sidebar">
                    <h3>Today's Devotion</h3>
                    <div class="verse-ref">Psalm 1:1–3</div>
                    <blockquote>"Blessed is the one who does not walk in step with the wicked or stand in the way that sinners take or sit in the company of mockers, but whose delight is in the law of the Lord, and who meditates on his law day and night."</blockquote>
                    <p class="reflection">The psalmist paints a vivid picture of the blessed life — one rooted deeply in God's Word, like a tree planted by streams of water. In a world of constant distraction, this invitation to meditate on scripture is both countercultural and deeply life-giving. Today, consider how you might plant yourself beside living water.</p>
                    <div class="prayer-prompt">
                        <strong>🙏 Prayer Prompt</strong>
                        <p>Lord, help me to delight in Your Word today. Quiet my restless mind and draw me into deeper communion with You through Your scripture. May I be like a tree planted by the water, bearing fruit in every season.</p>
                    </div>
                    <a href="#" class="btn-primary" style="width:100%; justify-content:center;">Read Full Devotion →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== TESTIMONIALS ===== -->
    <section class="testimonials">
        <div class="container">
            <div class="section-header">
                <div class="section-label">Community Stories</div>
                <h2>Lives Transformed by Grace</h2>
                <p>Hear from members of our community about how God is at work in their lives through the body of Christ.</p>
            </div>
            <div class="testimonial-grid">
                <div class="testimonial-card">
                    <div class="stars">★★★★★</div>
                    <p class="quote">"When I first walked through the doors of Evergreen, I was carrying a lot of pain and doubt. The people here didn't judge me — they walked alongside me. Through small group, pastoral care, and the consistent teaching of scripture, I found healing and a faith that is truly my own."</p>
                    <div class="author">
                        <img src="https://i.pravatar.cc/44?u=maria42" alt="Maria S.">
                        <div class="author-info">
                            <strong>Maria S.</strong>
                            <span>Member since 2019</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="stars">★★★★★</div>
                    <p class="quote">"The youth ministry has been transformational for our family. My teenager went from being disinterested in faith to leading worship at our student gatherings. The leaders genuinely love these kids and point them toward Christ with authenticity and care every single week."</p>
                    <div class="author">
                        <img src="https://i.pravatar.cc/44?u=david88" alt="David & Rachel T.">
                        <div class="author-info">
                            <strong>David & Rachel T.</strong>
                            <span>Parents of youth group student</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="stars">★★★★★</div>
                    <p class="quote">"I've been a Christian for forty years, and I can honestly say that Evergreen has continued to challenge and deepen my faith. The expository preaching, the commitment to missions, and the genuine love in this community keep me growing. This is church the way it should be."</p>
                    <div class="author">
                        <img src="https://i.pravatar.cc/44?u=robert75" alt="Robert J.">
                        <div class="author-info">
                            <strong>Robert J.</strong>
                            <span>Member since 2008</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== OUTREACH ===== -->
    <section class="outreach" id="outreach">
        <div class="container">
            <div class="outreach-content">
                <div class="outreach-image">
                    <img src="https://picsum.photos/600/420" alt="Community outreach and service">
                </div>
                <div class="outreach-text">
                    <div class="section-label">Serving Others</div>
                    <h2>Outreach & Community Service</h2>
                    <p>Faith without works is dead. At Evergreen, we believe that the love of Christ must extend far beyond our walls. Our outreach ministry is dedicated to meeting tangible needs in our community while sharing the hope of the gospel through acts of compassion and justice.</p>
                    <p>From our weekly community food pantry to our partnerships with local shelters, refugee resettlement organizations, and global mission agencies, we are committed to being the hands and feet of Jesus to a world in need. Every member of our congregation is encouraged to find their place of service.</p>
                    <div class="outreach-stats">
                        <div class="outreach-stat">
                            <span class="number">2,400+</span>
                            <span class="label">Meals Served Monthly</span>
                        </div>
                        <div class="outreach-stat">
                            <span class="number">15</span>
                            <span class="label">Partner Organizations</span>
                        </div>
                        <div class="outreach-stat">
                            <span class="number">340+</span>
                            <span class="label">Active Volunteers</span>
                        </div>
                    </div>
                    <a href="#" class="btn-primary">Connect With Outreach →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== FAQ ===== -->
    <section class="faq">
        <div class="container">
            <div class="section-header">
                <div class="section-label">Common Questions</div>
                <h2>Frequently Asked Questions</h2>
                <p>We want your visit to be as comfortable as possible. Here are answers to questions we hear most often.</p>
            </div>
            <div class="faq-list">
                <div class="faq-item active">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <span>What should I expect on my first visit?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">
                            Welcome! When you arrive, our hospitality team will greet you at the entrance and help you find your way. Services typically include congregational singing, a message from scripture, and a time of prayer. Our services last approximately 75 minutes. You'll find a mix of people dressed in everything from casual to business attire — come as you are. We also have dedicated check-in areas for children's ministry during all services.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <span>What denomination or theological tradition does the church follow?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">
                            Evergreen Community Church is a non-denominational, evangelical church committed to the authority and sufficiency of scripture. We hold to a historic, orthodox understanding of the Christian faith as expressed in the Apostles' and Nicene Creeds. We are Baptist in our practice of believer's baptism by immersion and congregational governance, while maintaining warm relationships with churches across many traditions.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <span>Is there programming available for my children during services?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">
                            Absolutely! We offer age-appropriate programming for children from nursery (6 weeks) through 5th grade during both Sunday services. Our "Little Seeds" curriculum is designed to engage children with scripture through stories, activities, and worship tailored to their developmental stage. All our volunteers are background-checked and trained in child safety protocols.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <span>How can I get connected to the community?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">
                            We'd love to help you find your place! The best starting points are: attending our "Evergreen 101" class (offered monthly), joining a small group that matches your life stage, or volunteering on one of our ministry teams. You can also fill out a connection card at the welcome desk on Sunday or reach out to our pastoral staff directly. We believe that spiritual growth happens in community, and we want to help you take that next step.
                        </div>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <span>Can I watch services online if I can't attend in person?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">
                            Yes! We livestream both Sunday services on our website and YouTube channel. You can also access past sermons, small group studies, and devotional content through our online resource library. We believe that while physical gathering is essential to the life of the church, technology allows us to stay connected throughout the week and reach those who are homebound or traveling.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== NEWSLETTER ===== -->
    <section class="newsletter">
        <div class="container">
            <h2>Stay Connected to Our Community</h2>
            <p>Receive weekly devotionals, sermon notes, ministry updates, and event announcements delivered to your inbox every Monday morning.</p>
            <form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thank you for subscribing! You\'ll receive your first devotional this Monday.');">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer id="contact">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-about">
                    <div class="footer-logo">
                        <img src="https://placehold.co/40x40/2d5a3f/ffffff?text=EC&font=lora" alt="Logo">
                        <span>Evergreen Community Church</span>
                    </div>
                    <p>We are a vibrant, Bible-believing community of faith committed to worshiping God, making disciples, and serving our city with the love of Christ. Everyone is welcome here.</p>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook">f</a>
                        <a href="#" aria-label="Instagram">ig</a>
                        <a href="#" aria-label="YouTube">▶</a>
                        <a href="#" aria-label="Spotify">♪</a>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Service Times</a></li>
                        <li><a href="#">Sermon Archive</a></li>
                        <li><a href="#">Ministries</a></li>
                        <li><a href="#">Events Calendar</a></li>
                        <li><a href="#">Give Online</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="#">Daily Devotionals</a></li>
                        <li><a href="#">Bible Reading Plans</a></li>
                        <li><a href="#">Small Groups</a></li>
                        <li><a href="#">New Here?</a></li>
                        <li><a href="#">Baptism</a></li>
                        <li><a href="#">Membership</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Contact Us</h4>
                    <ul>
                        <li><a href="#">1247 Oakwood Drive<br>Springfield, IL 62704</a></li>
                        <li><a href="tel:+12175550142">(217) 555-0142</a></li>
                        <li><a href="mailto:hello@evergreencc.org">hello@evergreencc.org</a></li>
                        <li style="margin-top: 12px;"><a href="#">Office Hours:<br>Mon–Fri, 9AM–4PM</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <span>© 2025 Evergreen Community Church. All rights reserved.</span>
                <div class="footer-bottom-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Use</a>
                    <a href="#">Accessibility</a>
                    <a href="#">Statement of Faith</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // FAQ Accordion
        function toggleFaq(element) {
            const item = element.parentElement;
            const isActive = item.classList.contains('active');
            
            // Close all
            document.querySelectorAll('.faq-item').forEach(faq => {
                faq.classList.remove('active');
            });
            
            // Open clicked if it wasn't active
            if (!isActive) {
                item.classList.add('active');
            }
        }

        // Devotional Calendar
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth();
        let currentYear = currentDate.getFullYear();

        const devotionDays = [1, 3, 5, 7, 8, 10, 12, 14, 15, 17, 19, 21, 22, 24, 26, 28, 29];

        function renderCalendar() {
            const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                'July', 'August', 'September', 'October', 'November', 'December'];
            
            document.getElementById('calendarMonth').textContent = `${monthNames[currentMonth]} ${currentYear}`;
            
            const firstDay = new Date(currentYear, currentMonth, 1).getDay();
            const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
            const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate();
            
            const today = new Date();
            const isCurrentMonth = today.getMonth() === currentMonth && today.getFullYear() === currentYear;
            
            let html = '';
            const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            dayNames.forEach(day => {
                html += `<div class="day-name">${day}</div>`;
            });
            
            // Previous month days
            for (let i = firstDay - 1; i >= 0; i--) {
                html += `<div class="day other-month">${daysInPrevMonth - i}</div>`;
            }
            
            // Current month days
            for (let day = 1; day <= daysInMonth; day++) {
                let classes = 'day';
                if (isCurrentMonth && day === today.getDate()) {
                    classes += ' today';
                }
                if (devotionDays.includes(day)) {
                    classes += ' has-devotion';
                }
                html += `<div class="${classes}">${day}</div>`;
            }
            
            // Next month days
            const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7;
            const remaining = totalCells - (firstDay + daysInMonth);
            for (let i = 1; i <= remaining; i++) {
                html += `<div class="day other-month">${i}</div>`;
            }
            
            document.getElementById('calendarDays').innerHTML = html;
        }

        function changeMonth(direction) {
            currentMonth += direction;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            } else if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            renderCalendar();
        }

        renderCalendar();

        // Smooth scroll for nav links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                if (href !== '#') {
                    e.preventDefault();
                    const target = document.querySelector(href);
                    if (target) {
                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                }
            });
        });
    </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:43:11.156Z",
  "url": "https://benchmark.aimac.invalid/1a00d59d54456f88c3f269e12d2c3f45f5bc6696d3f4a74e2c85c01b6490e9f8.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"btn-primary\" style=\"width:100%; justify-content:center;\">Read Full Devotion \u2192</a>",
          "target": [
            ".devotional-sidebar > .btn-primary[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button onclick=\"changeMonth(-1)\">\u2039</button>",
          "target": [
            "button[onclick=\"changeMonth(-1)\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Evergreen Community</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>A Place Where <span>Faith Flourishes</span> and Community Thrives</h2>",
                  "target": [
                    ".hero-text > h2"
                  ]
                },
                {
                  "html": "<h2>Service Times &amp; Gatherings</h2>",
                  "target": [
                    "#services > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Sunday Morning Worship</h3>",
                  "target": [
                    ".time-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Wednesday Bible Study</h3>",
                  "target": [
                    ".time-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Friday Prayer Meeting</h3>",
                  "target": [
                    ".time-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Our Ministries</h2>",
                  "target": [
                    "#ministries > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Adult Faith Formation</h3>",
                  "target": [
                    ".ministry-card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Children's Ministry \u2014 \"Little Seeds\"</h3>",
                  "target": [
                    ".ministry-card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Small Groups &amp; Life Groups</h3>",
                  "target": [
                    ".ministry-card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Worship &amp; Creative Arts</h3>",
                  "target": [
                    ".ministry-card:nth-child(4) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2>Youth Programs That Transform Lives</h2>",
                  "target": [
                    ".youth-text > h2"
                  ]
                },
                {
                  "html": "<h2>Devotional Calendar</h2>",
                  "target": [
                    "#resources > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3 id=\"calendarMonth\">November 2026</h3>",
                  "target": [
                    "#calendarMonth"
                  ]
                },
                {
                  "html": "<h3>Today's Devotion</h3>",
                  "target": [
                    ".devotional-sidebar > h3"
                  ]
                },
                {
                  "html": "<h2>Lives Transformed by Grace</h2>",
                  "target": [
                    ".testimonials > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h2>Outreach &amp; Community Service</h2>",
                  "target": [
                    ".outreach-text > h2"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    ".faq > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h2>Stay Connected to Our Community</h2>",
                  "target": [
                    ".container > h2"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Resources</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact Us</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1a2744",
                "bgColor": "#ffffff",
                "contrastRatio": 14.81,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.81"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1>Evergreen Community</h1>",
          "target": [
            "h1"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" placeholder=\"Enter your email address\" required=\"\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/2d5a3f/ffffff?text=EC&amp;font=lora\" alt=\"Evergreen Community Church Logo\">",
          "target": [
            ".logo-area > img"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" placeholder=\"Enter your email address\" required=\"\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"card-body\">",
                  "target": [
                    ".ministry-card:nth-child(1) > .card-body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"card-link\">Explore Adult Ministries \u2192</a>",
          "target": [
            ".ministry-card:nth-child(1) > .card-body > .card-link[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-area\">",
          "target": [
            ".logo-area"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"youth-features\">",
          "target": [
            ".youth-features"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li>Weekly youth group meetings with dynamic worship and relevant teaching</li>",
          "target": [
            ".youth-features > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/2d5a3f/ffffff?text=EC&amp;font=lora\" alt=\"Evergreen Community Church Logo\">",
          "target": [
            ".logo-area > img"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 332.4,
                "height": 48
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (332.4px by 48px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-area\">",
          "target": [
            ".logo-area"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"home\">",
                  "target": [
                    "#home"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"hero-badge\">Welcome Home</div>",
          "target": [
            ".hero-badge"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c8a45e",
                "bgColor": "#ffffff",
                "contrastRatio": 2.35,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header id=\"header\">",
                  "target": [
                    "#header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.35 (foreground color: #c8a45e, background color: #ffffff, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Rooted in Faith. Growing in Grace.</p>",
          "target": [
            ".logo-text > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.35 (foreground color: #c8a45e, background color: #ffffff, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c8a45e",
                "bgColor": "#faf8f4",
                "contrastRatio": 2.21,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"devotional-sidebar\">",
                  "target": [
                    ".devotional-sidebar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.21 (foreground color: #c8a45e, background color: #faf8f4, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"verse-ref\">Psalm 1:1\u20133</div>",
          "target": [
            ".verse-ref"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.21 (foreground color: #c8a45e, background color: #faf8f4, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8748
      },
      {
        "y": 576,
        "height": 8748
      },
      {
        "y": 1152,
        "height": 8748
      },
      {
        "y": 1728,
        "height": 8748
      },
      {
        "y": 2304,
        "height": 8748
      },
      {
        "y": 2880,
        "height": 8748
      },
      {
        "y": 3456,
        "height": 8748
      },
      {
        "y": 4032,
        "height": 8748
      },
      {
        "y": 4608,
        "height": 8748
      },
      {
        "y": 5184,
        "height": 8748
      },
      {
        "y": 5760,
        "height": 8748
      },
      {
        "y": 6336,
        "height": 8748
      },
      {
        "y": 6912,
        "height": 8748
      },
      {
        "y": 7488,
        "height": 8748
      },
      {
        "y": 8028,
        "height": 8748
      }
    ],
    "scans": 16,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Religion and Spirituality" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Resources", "Outreach", "Services".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Youth Programs", "Faith Formation", "Service Times".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "outreach", "faith formation", "scripture".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Connect", "Sign Up", "Watch Service".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "devotional calendar".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "ministry updates", "member stories", "community highlights".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.