/* ═══════════════════════════════════════════════════════════════════════════
   REBIRTH IN CHRIST FOUNDATION - MAIN STYLESHEET
   Agent 2 Build: Shell, Navigation, Hero Section, Loading Animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* Import Design System */
@import url('design-system.css');


/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg,
            var(--ric-scripture-navy) 0%,
            var(--ric-scripture-navy-light) 50%,
            var(--ric-living-water-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: ric-loading-fadeout 0.5s ease-out 2s forwards;
}

.ric-loading-content {
    text-align: center;
    animation: ric-loading-content-fadein 0.8s ease-out forwards;
}

.ric-loading-logo-wrapper {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--ric-space-lg);
    animation: ric-loading-pulse 1.5s ease-in-out infinite;
    position: relative;
    z-index: 10;
    /* High z-index to stay above background silhouette */
}

.ric-loading-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.4));
    position: relative;
    z-index: 2;
}

.ric-loading-silhouette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Changed from cover to prevent cropping */
    object-position: center 15%;
    /* Position head slightly below the top edge */
    opacity: 0.2;
    /* Slightly increased for visibility as it's smaller now */
    z-index: 1;
    filter: brightness(1.3) contrast(1.1);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: ric-silhouette-fadein 3s ease-out forwards;
}

@keyframes ric-silhouette-fadein {
    from {
        opacity: 0;
        transform: scale(1.05);
        /* Gentle zoom in */
    }

    to {
        opacity: 0.2;
        transform: scale(1);
    }
}

.ric-loading-title {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-3xl);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-pure-white);
    margin-bottom: var(--ric-space-sm);
    opacity: 0;
    animation: ric-loading-text-fadein 0.6s ease-out 0.3s forwards;
}

.ric-loading-subtitle {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-lg);
    color: var(--ric-divine-gold);
    letter-spacing: var(--ric-tracking-wide);
    opacity: 0;
    animation: ric-loading-text-fadein 0.6s ease-out 0.6s forwards;
}

/* Loading Screen Animations */
@keyframes ric-loading-fadeout {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes ric-loading-content-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ric-loading-text-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ric-loading-pulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.4));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(201, 162, 39, 0.6));
    }
}

/* Loading screen hidden state (JS backup) */
.ric-loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--ric-space-md) 0;
    background-color: transparent;
    transition: background-color var(--ric-transition-normal),
        box-shadow var(--ric-transition-normal),
        padding var(--ric-transition-normal);
}

.ric-navbar.navbar-scrolled {
    background-color: var(--ric-pure-white);
    box-shadow: var(--ric-shadow-md);
    padding: var(--ric-space-sm) 0;
}

.ric-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--ric-container-xl);
    margin: 0 auto;
    padding: 0 var(--ric-space-md);
}

@media (min-width: 768px) {
    .ric-nav-container {
        padding: 0 var(--ric-space-xl);
    }
}

/* Logo */
.ric-nav-logo {
    display: flex;
    align-items: center;
    gap: var(--ric-space-sm);
    text-decoration: none;
    transition: opacity var(--ric-transition-fast);
}

.ric-nav-logo:hover {
    opacity: 0.9;
}

.ric-nav-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.ric-nav-logo-text {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-xl);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-pure-white);
    transition: color var(--ric-transition-normal);
}

.ric-navbar.navbar-scrolled .ric-nav-logo-text {
    color: var(--ric-scripture-navy);
}

/* Navigation Menu */
.ric-nav-menu {
    display: flex;
    align-items: center;
    gap: var(--ric-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ric-nav-link {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    font-weight: var(--ric-font-medium);
    color: var(--ric-pure-white);
    text-decoration: none;
    padding: var(--ric-space-sm) 0;
    position: relative;
    transition: color var(--ric-transition-fast);
}

.ric-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--ric-divine-gold);
    transition: width var(--ric-transition-normal);
}

.ric-nav-link:hover::after,
.ric-nav-link:focus::after {
    width: 100%;
}

.ric-nav-link:hover,
.ric-nav-link:focus {
    color: var(--ric-divine-gold-light);
}

.ric-navbar.navbar-scrolled .ric-nav-link {
    color: var(--ric-scripture-navy);
}

.ric-navbar.navbar-scrolled .ric-nav-link:hover,
.ric-navbar.navbar-scrolled .ric-nav-link:focus {
    color: var(--ric-divine-gold);
}

/* Navigation CTA Button */
.ric-nav-cta {
    padding: 10px 24px;
    min-height: 40px;
}

/* Hamburger Toggle */
.ric-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.ric-nav-toggle-bar {
    width: 100%;
    height: 2px;
    background-color: var(--ric-pure-white);
    border-radius: 2px;
    transition: all var(--ric-transition-fast);
}

.ric-navbar.navbar-scrolled .ric-nav-toggle-bar {
    background-color: var(--ric-scripture-navy);
}

/* Hamburger Animation to X */
.ric-nav-toggle.active .ric-nav-toggle-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.ric-nav-toggle.active .ric-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.ric-nav-toggle.active .ric-nav-toggle-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Navigation */
@media (max-width: 1023px) {
    .ric-nav-toggle {
        display: flex;
    }

    .ric-nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--ric-pure-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--ric-space-xl);
        padding: var(--ric-space-3xl) var(--ric-space-xl);
        box-shadow: var(--ric-shadow-xl);
        transition: right var(--ric-transition-normal);
    }

    .ric-nav-menu.active {
        right: 0;
    }

    .ric-nav-link {
        color: var(--ric-scripture-navy);
        font-size: var(--ric-font-lg);
    }

    .ric-nav-link:hover,
    .ric-nav-link:focus {
        color: var(--ric-divine-gold);
    }

    .ric-nav-cta {
        margin-top: var(--ric-space-md);
    }
}

/* Hide Mobile Elements on Desktop */
@media (min-width: 1024px) {
    .ric-mobile-menu-btn {
        display: none;
    }
}

/* Mobile Menu Overlay */
.ric-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(44, 62, 80, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ric-transition-normal), visibility var(--ric-transition-normal);
    z-index: 999;
}

.ric-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Hero Background */
.ric-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.ric-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.9;
}

.ric-hero-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.ric-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Increased transparency to let video shine through */
    background: linear-gradient(135deg,
            rgba(26, 43, 73, 0.6) 0%,
            rgba(26, 43, 73, 0.4) 25%,
            rgba(74, 144, 164, 0.3) 50%,
            rgba(77, 161, 169, 0.2) 75%,
            rgba(164, 216, 222, 0.2) 100%);
    z-index: 1;
}

/* Subtle pattern overlay for texture */
.ric-hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 30% 20%,
            rgba(201, 162, 39, 0.15) 0%,
            transparent 50%),
        radial-gradient(ellipse at 70% 80%,
            rgba(74, 144, 164, 0.2) 0%,
            transparent 50%);
    opacity: 0.4;
    /* Reduced opacity for video visibility */
    z-index: 2;
    pointer-events: none;
}

/* Hero Content */
.ric-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--ric-space-4xl) var(--ric-space-md);
    max-width: 900px;
    margin: 0 auto;
}

.ric-hero-logo {
    display: block;
    width: clamp(150px, 25vw, 220px);
    height: auto;
    margin: 0 auto var(--ric-space-xl);
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.3));
    animation: ric-hero-fadein 0.8s ease-out 2s both;
}

.ric-hero-title {
    color: var(--ric-pure-white);
    margin-bottom: var(--ric-space-lg);
    text-shadow: 0 2px 20px rgba(44, 62, 80, 0.3);
    animation: ric-hero-fadein 0.8s ease-out 2.2s both;
}

.ric-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--ric-space-2xl);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: var(--ric-leading-relaxed);
    animation: ric-hero-fadein 0.8s ease-out 2.4s both;
}

.ric-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ric-space-md);
    justify-content: center;
    animation: ric-hero-fadein 0.8s ease-out 2.6s both;
}

.ric-hero-buttons .ric-btn-secondary {
    background-color: transparent;
    border-color: var(--ric-pure-white);
    color: var(--ric-pure-white);
}

.ric-hero-buttons .ric-btn-secondary:hover {
    background-color: var(--ric-pure-white);
    color: var(--ric-scripture-navy);
}

/* Hero Scroll Indicator */
.ric-hero-scroll {
    position: absolute;
    bottom: var(--ric-space-2xl);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    animation: ric-hero-fadein 0.8s ease-out 2.8s both;
}

.ric-hero-scroll-text {
    display: block;
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--ric-space-sm);
    letter-spacing: var(--ric-tracking-wide);
}

.ric-hero-scroll-icon {
    font-size: var(--ric-font-xl);
    color: var(--ric-divine-gold);
    animation: ric-scroll-bounce 2s ease-in-out infinite;
}

/* Hero Animations */
@keyframes ric-hero-fadein {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ric-scroll-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

/* Hero Responsive */
@media (max-width: 767px) {
    .ric-hero-content {
        padding: var(--ric-space-3xl) var(--ric-space-md);
        padding-top: calc(var(--ric-space-4xl) + 60px);
    }

    .ric-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .ric-hero-buttons .ric-btn {
        width: 100%;
        max-width: 280px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION PLACEHOLDERS
   Baseline styles for sections that other agents will populate
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure empty placeholder sections have min-height for visibility during development */
#section-how-it-works:empty,
#section-about:empty,
#section-signup:empty,
#section-cards:empty,
#section-churches:empty,
#section-faq:empty,
.ric-footer:empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove placeholder styles when content is added */
#section-how-it-works:not(:empty),
#section-about:not(:empty),
#section-signup:not(:empty),
#section-cards:not(:empty),
#section-churches:not(:empty),
#section-faq:not(:empty),
.ric-footer:not(:empty) {
    min-height: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER PLACEHOLDER STYLES
   Base styles for footer (Agent 6 will complete)
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-footer {
    background-color: var(--ric-scripture-navy);
    color: var(--ric-pure-white);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION UTILITY
   Used by JS for scroll-triggered animations
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ric-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ric-reveal-delay-1 {
    transition-delay: 0.1s;
}

.ric-reveal-delay-2 {
    transition-delay: 0.2s;
}

.ric-reveal-delay-3 {
    transition-delay: 0.3s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION - ACCESSIBILITY
   Override animations for users who prefer reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ric-loading-screen {
        animation: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ric-loading-logo-wrapper {
        animation: none;
    }

    .ric-loading-title,
    .ric-loading-subtitle {
        animation: none;
        opacity: 1;
    }

    .ric-hero-title,
    .ric-hero-subtitle,
    .ric-hero-buttons,
    .ric-hero-scroll {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .ric-hero-scroll-icon {
        animation: none;
    }

    .ric-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONAL UTILITY OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure body doesn't scroll when mobile menu is open */
body.nav-open {
    overflow: hidden;
}

/* Focus visible for keyboard navigation */
.ric-nav-link:focus-visible,
.ric-btn:focus-visible,
.ric-nav-toggle:focus-visible {
    outline: 2px solid var(--ric-divine-gold);
    outline-offset: 2px;
}

/* Smooth scrolling for anchor links */
html {
    scroll-padding-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS SECTION (Agent 3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Steps Grid - 3 columns on desktop, stacked on mobile */
.ric-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-lg);
    margin-top: var(--ric-space-xl);
}

@media (min-width: 768px) {
    .ric-steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ric-space-xl);
    }
}

/* Step Card */
.ric-step-card {
    background-color: var(--ric-pure-white);
    border: 1px solid var(--ric-border);
    border-radius: var(--ric-radius-lg);
    box-shadow: var(--ric-shadow-md);
    padding: var(--ric-space-xl);
    text-align: center;
    position: relative;
    transition: box-shadow var(--ric-transition-normal),
        transform var(--ric-transition-normal);
}

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

/* Step Number Badge */
.ric-step-number {
    position: absolute;
    top: calc(-1 * var(--ric-space-md));
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--ric-divine-gold);
    color: var(--ric-pure-white);
    border-radius: var(--ric-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-lg);
    font-weight: var(--ric-font-bold);
    box-shadow: var(--ric-shadow-gold);
}

/* Step Icon */
.ric-step-icon {
    width: 72px;
    height: 72px;
    margin: var(--ric-space-lg) auto var(--ric-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--ric-living-water-rgb), 0.1);
    border-radius: var(--ric-radius-full);
    color: var(--ric-living-water);
    font-size: var(--ric-font-3xl);
    transition: background-color var(--ric-transition-normal),
        color var(--ric-transition-normal);
}

.ric-step-card:hover .ric-step-icon {
    background-color: rgba(var(--ric-divine-gold-rgb), 0.15);
    color: var(--ric-divine-gold);
}

/* Step Title */
.ric-step-title {
    margin-bottom: var(--ric-space-sm);
    color: var(--ric-scripture-navy);
}

/* Step Description */
.ric-step-description {
    color: var(--ric-text-light);
    line-height: var(--ric-leading-relaxed);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT SECTION (Agent 3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background color override for about section */
.ric-bg-cream-dark {
    background-color: var(--ric-warm-cream-dark);
}

/* Two Column Layout */
.ric-about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-2xl);
    margin-bottom: var(--ric-space-2xl);
}

@media (min-width: 768px) {
    .ric-about-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--ric-space-3xl);
        align-items: start;
    }
}

/* Mission Statement */
.ric-about-mission {
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-md);
}

.ric-about-mission .ric-body-lg {
    color: var(--ric-scripture-navy);
    font-weight: var(--ric-font-medium);
}

.ric-about-mission .ric-body {
    color: var(--ric-text-light);
    line-height: var(--ric-leading-relaxed);
}

/* Values Container */
.ric-about-values {
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-md);
}

/* Value Item */
.ric-value-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ric-space-md);
    background-color: var(--ric-pure-white);
    border: 1px solid var(--ric-border);
    border-radius: var(--ric-radius-md);
    padding: var(--ric-space-lg);
    transition: box-shadow var(--ric-transition-normal),
        transform var(--ric-transition-normal);
}

.ric-value-item:hover {
    box-shadow: var(--ric-shadow-md);
    transform: translateX(4px);
}

/* Value Icon */
.ric-value-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--ric-divine-gold-rgb), 0.12);
    border-radius: var(--ric-radius-md);
    color: var(--ric-divine-gold);
    font-size: var(--ric-font-xl);
}

/* Value Content */
.ric-value-content {
    flex: 1;
}

.ric-value-title {
    margin-bottom: var(--ric-space-xs);
    color: var(--ric-scripture-navy);
}

.ric-value-description {
    color: var(--ric-text-light);
    font-size: var(--ric-font-sm);
    line-height: var(--ric-leading-relaxed);
}

/* Scripture Block */
.ric-scripture-block {
    text-align: center;
    padding: var(--ric-space-xl) var(--ric-space-md);
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.ric-scripture-block::before,
.ric-scripture-block::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--ric-divine-gold),
            transparent);
}

.ric-scripture-block::before {
    top: 0;
}

.ric-scripture-block::after {
    bottom: 0;
}

.ric-scripture-block .ric-scripture {
    font-family: var(--ric-font-heading);
    font-style: italic;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    line-height: var(--ric-leading-relaxed);
    color: var(--ric-divine-gold-dark);
    margin: 0;
    padding: 0;
    border: none;
    quotes: none;
}

.ric-scripture-cite {
    display: block;
    margin-top: var(--ric-space-md);
    font-family: var(--ric-font-body);
    font-style: normal;
    font-size: var(--ric-font-sm);
    font-weight: var(--ric-font-medium);
    color: var(--ric-text-muted);
    letter-spacing: var(--ric-tracking-wide);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .ric-about-mission {
        text-align: center;
    }

    .ric-value-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ric-value-item:hover {
        transform: translateY(-2px);
    }

    .ric-scripture-block {
        padding: var(--ric-space-lg) var(--ric-space-sm);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIGNUP SECTION (Agent 4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two Column Wrapper */
.ric-signup-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-2xl);
    align-items: start;
}

@media (min-width: 768px) {
    .ric-signup-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: var(--ric-space-3xl);
    }
}

@media (min-width: 1024px) {
    .ric-signup-wrapper {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* Form Container */
.ric-signup-form-container {
    background-color: var(--ric-pure-white);
    border: 1px solid var(--ric-border);
    border-radius: var(--ric-radius-lg);
    box-shadow: var(--ric-shadow-md);
    padding: var(--ric-space-xl);
}

@media (min-width: 768px) {
    .ric-signup-form-container {
        padding: var(--ric-space-2xl);
    }
}

.ric-signup-form-container .ric-section-header {
    margin-bottom: var(--ric-space-xl);
}

.ric-signup-form-container .ric-section-header .ric-heading-2 {
    margin-bottom: var(--ric-space-xs);
}

.ric-signup-form-container .ric-section-header .ric-body-lg {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* Signup Form */
.ric-signup-form {
    display: flex;
    flex-direction: column;
}

.ric-signup-form .ric-form-group {
    margin-bottom: var(--ric-space-md);
}

.ric-signup-form .ric-form-group:last-of-type {
    margin-bottom: var(--ric-space-lg);
}

/* Required field indicator */
.ric-required {
    color: var(--ric-error);
    font-weight: var(--ric-font-medium);
}

/* Submit Button */
.ric-signup-submit {
    width: 100%;
    margin-top: var(--ric-space-sm);
}

/* Privacy Note */
.ric-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ric-space-sm);
    margin-top: var(--ric-space-lg);
    font-size: var(--ric-font-sm);
    color: var(--ric-text-muted);
    line-height: var(--ric-leading-relaxed);
}

.ric-privacy-note i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ric-success);
}

/* Info Column */
.ric-signup-info {
    padding: var(--ric-space-lg);
}

@media (min-width: 768px) {
    .ric-signup-info {
        padding: var(--ric-space-xl);
        position: sticky;
        top: 100px;
    }
}

.ric-signup-info .ric-heading-3 {
    margin-bottom: var(--ric-space-xl);
    color: var(--ric-scripture-navy);
}

/* Benefits List */
.ric-benefit-list {
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-lg);
    margin-bottom: var(--ric-space-2xl);
}

.ric-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ric-space-md);
}

.ric-benefit-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--ric-divine-gold-rgb), 0.12);
    border-radius: var(--ric-radius-md);
    color: var(--ric-divine-gold);
    font-size: var(--ric-font-lg);
}

.ric-benefit-text {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    color: var(--ric-text);
    line-height: var(--ric-leading-relaxed);
    padding-top: var(--ric-space-xs);
}

/* Decorative Element */
.ric-signup-decoration {
    margin-top: var(--ric-space-xl);
    border-radius: var(--ric-radius-lg);
    overflow: hidden;
}

.ric-decoration-pattern {
    height: 120px;
    background: linear-gradient(135deg,
            rgba(var(--ric-living-water-rgb), 0.15) 0%,
            rgba(var(--ric-divine-gold-rgb), 0.15) 50%,
            rgba(var(--ric-living-water-rgb), 0.1) 100%);
    background-size: 400% 400%;
    animation: ric-decoration-gradient 8s ease infinite;
    position: relative;
}

.ric-decoration-pattern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle,
            rgba(var(--ric-divine-gold-rgb), 0.3) 0%,
            transparent 70%);
}

@keyframes ric-decoration-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .ric-signup-form-container .ric-section-header {
        text-align: center;
    }

    .ric-signup-info {
        text-align: center;
    }

    .ric-signup-info .ric-heading-3 {
        margin-bottom: var(--ric-space-lg);
    }

    .ric-benefit-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ric-benefit-text {
        padding-top: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CARDS PREVIEW SECTION (Agent 4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards Gallery Grid */
.ric-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-xl);
    margin-bottom: var(--ric-space-2xl);
}

@media (min-width: 480px) {
    .ric-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .ric-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ric-space-xl);
    }
}

/* Card Preview Wrapper */
.ric-card-preview-wrapper {
    text-align: center;
}

/* Card Preview Container */
.ric-card-preview {
    position: relative;
    aspect-ratio: 5 / 7;
    border-radius: var(--ric-radius-lg);
    box-shadow: var(--ric-shadow-md);
    overflow: hidden;
    margin-bottom: var(--ric-space-md);
    cursor: pointer;
    /* Transition removed - flip animation handles transforms now */
}

/* Hover lift disabled - now using flip animation instead */
/* .ric-card-preview:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--ric-shadow-xl);
} */

/* Card Preview Inner */
/* Card Preview Inner - Flex Layout for Mockup */
.ric-card-preview-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ric-space-sm);
    padding: var(--ric-space-xl);
    text-align: center;
}

/* Mockup Elements */
.ric-card-mockup-logo {
    width: 80px;
    height: auto;
    margin-bottom: var(--ric-space-sm);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.ric-card-mockup-title {
    font-family: var(--ric-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: var(--ric-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ric-card-mockup-text {
    font-family: var(--ric-font-heading);
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: var(--ric-font-medium);
    margin: 0;
    font-style: italic;
}

.ric-card-mockup-verse {
    font-family: var(--ric-font-body);
    font-size: 0.75rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--ric-space-xs);
    opacity: 0.8;
}

/* --- TACTILE CARD SYSTEM --- */
/* CONTAINER RESET: Ensure absolutely no background or borders on the wrappers */
.ric-card-preview,
.ric-card-preview-wrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Base Card Container - The "Desk" area */
.ric-card-preview {
    min-height: 500px;
    /* Give them room to breathe */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ric-space-xl);
}

/* Base Style shared by all Tactile Object Cards */
.ric-card-preview-classic,
.ric-card-preview-sunrise,
.ric-card-preview-scripture {
    width: 100%;
    height: 100%;
    min-height: 500px;
    /* Fixed height for consistency */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Object fitting */
    background-color: transparent !important;
    /* Force transparency */
    border: none !important;
    box-shadow: none !important;

    /* Layout for the Text Overlay */
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.25));
    /* Object Shadow */
}

/* 1. CLASSIC CARD: Centered, Safe Zone inside Gold Border */
.ric-card-preview-classic {
    background-image: url('../assets/website_images/card_classic_tactile.png');
    align-items: center;
    justify-content: center;
    /* PADDING IS KEY: Push text away from the inset gold border */
    padding: 32% 30% 35% 30%;
    text-align: center;
}

/* 2. SUNRISE CARD: Top-Aligned, Safe Zone above Watercolor */
.ric-card-preview-sunrise {
    background-image: url('../assets/website_images/card_sunrise_tactile.png');
    align-items: center;
    justify-content: flex-start;
    /* Start from top */
    /* Padding: Top margin, Side margins, Bottom huge margin to clear art */
    padding: 28% 20% 45% 20%;
    text-align: center;
}

/* 3. SCRIPTURE CARD: Centered, Clean Safe Zone */
.ric-card-preview-scripture {
    background-image: url('../assets/website_images/card_scripture_tactile.png');
    align-items: center;
    justify-content: center;
    padding: 25% 20%;
    text-align: center;
}

/* Inner Container Reset - No more styles here, just structure */
.ric-card-preview-inner {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* TYPOGRAPHY TUNING FOR CARD SCALE */
.ric-card-mockup-title {
    font-family: var(--ric-font-heading);
    font-size: 0.85rem;
    /* Small, elegant Caps */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--ric-space-sm);
    font-weight: 700;
}

.ric-card-mockup-text {
    font-family: var(--ric-font-heading);
    font-size: 1.05rem;
    /* Readable but not huge */
    line-height: 1.5;
    font-style: italic;
    margin-bottom: var(--ric-space-sm);
}

.ric-card-mockup-verse {
    font-family: var(--ric-font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    font-weight: 500;
}

/* Color Overrides per Card */
.ric-card-preview-classic .ric-card-mockup-text,
.ric-card-preview-classic .ric-card-mockup-title {
    color: #8B7355;
}

.ric-card-preview-sunrise .ric-card-mockup-text,
.ric-card-preview-sunrise .ric-card-mockup-title {
    color: var(--ric-scripture-navy);
}

.ric-card-preview-scripture .ric-card-mockup-text,
.ric-card-preview-scripture .ric-card-mockup-title {
    color: #333;
}

.ric-card-preview-scripture .ric-card-preview-icon {
    color: var(--ric-scripture-navy);
}

.ric-card-preview-scripture .ric-card-preview-name {
    color: var(--ric-scripture-navy);
}

/* Card Label */
.ric-card-label {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-lg);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-scripture-navy);
    margin-bottom: var(--ric-space-xs);
}

/* Card Description */
.ric-card-desc {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: var(--ric-text-light);
    line-height: var(--ric-leading-relaxed);
    max-width: 250px;
    margin: 0 auto;
}

/* Cards Note */
.ric-cards-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ric-space-sm);
    padding: var(--ric-space-lg);
    background-color: var(--ric-pure-white);
    border: 1px solid var(--ric-border);
    border-radius: var(--ric-radius-md);
    font-size: var(--ric-font-sm);
    color: var(--ric-text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.ric-cards-note i {
    color: var(--ric-divine-gold);
    flex-shrink: 0;
}

/* Mobile Responsive for Cards */
@media (max-width: 479px) {
    .ric-card-preview {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .ric-cards-note {
        flex-direction: column;
        gap: var(--ric-space-sm);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD FLIP ANIMATION SYSTEM
   Hover on desktop, tap on mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flip Container - Establishes 3D space */
.ric-card-flip-container {
    perspective: 1000px;
    width: 100%;
    max-width: 350px;
    min-height: 500px;
    margin: 0 auto;
    /* Ensure hover detection stays on container */
    position: relative;
}

/* Inner container that actually flips */
.ric-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
    transform-origin: center center;
}

/* Flip on hover for devices that support hover */
@media (hover: hover) {
    .ric-card-flip-container:hover .ric-card-flip-inner {
        transform: rotateY(180deg);
    }
}

/* Flip on tap for mobile - toggle class via JS */
.ric-card-flip-inner.flipped {
    transform: rotateY(180deg);
}

/* Both faces share these properties */
.ric-card-front,
.ric-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent faces from capturing hover events */
    pointer-events: none;
}

/* Front face - default visible */
.ric-card-front {
    z-index: 2;
}

/* Back face - rotated and hidden by default */
.ric-card-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Back content styling */
.ric-card-back-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ric-space-sm);
}

/* Milestone badge (Year X) */
.ric-card-milestone-badge {
    display: inline-block;
    padding: var(--ric-space-xs) var(--ric-space-md);
    background: linear-gradient(135deg, var(--ric-divine-gold) 0%, var(--ric-divine-gold-light) 100%);
    color: var(--ric-pure-white);
    font-family: var(--ric-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}

/* Milestone title (e.g., "A Decade of Faith") */
.ric-card-milestone-title {
    font-family: var(--ric-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: var(--ric-space-xs) 0;
    color: inherit;
}

/* Milestone description text */
.ric-card-milestone-text {
    font-family: var(--ric-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    max-width: 90%;
    color: inherit;
    opacity: 0.9;
}

/* Encouragement statement */
.ric-card-milestone-encourage {
    font-family: var(--ric-font-heading);
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 500;
    margin-top: var(--ric-space-sm);
    color: inherit;
    opacity: 0.85;
}

/* Color overrides for back cards - inherit from parent card type */
.ric-card-preview-classic .ric-card-milestone-title,
.ric-card-preview-classic .ric-card-milestone-text,
.ric-card-preview-classic .ric-card-milestone-encourage {
    color: #8B7355;
}

.ric-card-preview-sunrise .ric-card-milestone-title,
.ric-card-preview-sunrise .ric-card-milestone-text,
.ric-card-preview-sunrise .ric-card-milestone-encourage {
    color: var(--ric-scripture-navy);
}

.ric-card-preview-scripture .ric-card-milestone-title,
.ric-card-preview-scripture .ric-card-milestone-text,
.ric-card-preview-scripture .ric-card-milestone-encourage {
    color: #333;
}

/* Flip hint for users */
.ric-card-preview-wrapper::after {
    content: 'Hover to flip';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--ric-text-muted);
    margin-top: var(--ric-space-xs);
    opacity: 0.6;
}

/* Mobile: Change hint to tap */
@media (hover: none) {
    .ric-card-preview-wrapper::after {
        content: 'Tap to flip';
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOR CHURCHES SECTION (Agent 5)
   Dark theme section with navy background
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section Dark Theme */
.ric-section-dark,
#section-churches {
    background-color: var(--ric-scripture-navy);
    color: var(--ric-pure-white);
}

/* Light Section Header for Dark Backgrounds */
.ric-section-header-light .ric-heading-2 {
    color: var(--ric-pure-white);
}

.ric-section-header-light .ric-body-lg {
    color: rgba(255, 255, 255, 0.8);
}

/* Church Features Grid */
.ric-church-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-lg);
    margin-bottom: var(--ric-space-3xl);
}

@media (min-width: 768px) {
    .ric-church-features {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ric-space-xl);
    }
}

/* Church Feature Card */
.ric-church-feature {
    text-align: center;
    padding: var(--ric-space-xl);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ric-radius-lg);
    transition: background-color var(--ric-transition-normal),
        transform var(--ric-transition-normal),
        border-color var(--ric-transition-normal);
}

.ric-church-feature:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(201, 162, 39, 0.3);
    transform: translateY(-4px);
}

/* Church Feature Icon */
.ric-church-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--ric-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(201, 162, 39, 0.2) 0%,
            rgba(201, 162, 39, 0.1) 100%);
    border-radius: var(--ric-radius-full);
    font-size: var(--ric-font-3xl);
    color: var(--ric-divine-gold);
    transition: transform var(--ric-transition-normal),
        box-shadow var(--ric-transition-normal);
}

.ric-church-feature:hover .ric-church-icon {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(201, 162, 39, 0.3);
}

/* Church Feature Title */
.ric-church-feature-title {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-xl);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-pure-white);
    margin-bottom: var(--ric-space-sm);
}

/* Church Feature Text */
.ric-church-feature-text {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--ric-leading-relaxed);
}

/* Coming Soon Box */
.ric-coming-soon {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--ric-space-2xl);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ric-radius-xl);
    text-align: center;
}

/* Coming Soon Badge */
.ric-coming-soon-badge {
    display: inline-block;
    padding: var(--ric-space-xs) var(--ric-space-md);
    background: linear-gradient(135deg,
            var(--ric-divine-gold) 0%,
            var(--ric-divine-gold-dark) 100%);
    color: var(--ric-pure-white);
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-xs);
    font-weight: var(--ric-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--ric-tracking-widest);
    border-radius: var(--ric-radius-full);
    margin-bottom: var(--ric-space-md);
}

/* Coming Soon Title */
.ric-coming-soon-title {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-2xl);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-pure-white);
    margin-bottom: var(--ric-space-sm);
}

/* Coming Soon Text */
.ric-coming-soon-text {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    color: rgba(255, 255, 255, 0.8);
    line-height: var(--ric-leading-relaxed);
    margin-bottom: var(--ric-space-xl);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Church Email Form */
.ric-church-form {
    max-width: 480px;
    margin: 0 auto var(--ric-space-lg);
}

.ric-church-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-md);
}

@media (min-width: 480px) {
    .ric-church-form-row {
        flex-direction: row;
    }
}

.ric-church-input {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    color: var(--ric-scripture-navy);
}

.ric-church-input:focus {
    border-color: var(--ric-divine-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.ric-church-input::placeholder {
    color: var(--ric-dove-gray);
}

.ric-church-form .ric-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Church Trust Statement */
.ric-church-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ric-space-sm);
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.ric-church-trust i {
    color: var(--ric-divine-gold);
    flex-shrink: 0;
}

/* Mobile Responsive for Churches Section */
@media (max-width: 767px) {
    .ric-church-feature {
        padding: var(--ric-space-lg);
    }

    .ric-church-icon {
        width: 64px;
        height: 64px;
        font-size: var(--ric-font-2xl);
    }

    .ric-coming-soon {
        padding: var(--ric-space-xl);
    }

    .ric-church-trust {
        flex-direction: column;
        text-align: center;
        gap: var(--ric-space-xs);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAQ SECTION (Agent 5)
   Light background with CSS-based accordion
   ═══════════════════════════════════════════════════════════════════════════ */

/* FAQ Background - uses ric-bg-cream from design system */
.ric-bg-cream {
    background-color: var(--ric-warm-cream);
}

/* FAQ List Container */
.ric-faq-list {
    max-width: 800px;
    margin: 0 auto var(--ric-space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-md);
}

/* FAQ Item */
.ric-faq-item {
    background-color: var(--ric-pure-white);
    border: 1px solid var(--ric-border);
    border-radius: var(--ric-radius-md);
    overflow: hidden;
    transition: box-shadow var(--ric-transition-normal),
        border-color var(--ric-transition-normal);
}

.ric-faq-item:hover {
    box-shadow: var(--ric-shadow-sm);
    border-color: var(--ric-border);
}

/* Hidden Checkbox for CSS-only Accordion */
.ric-faq-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* FAQ Question (Clickable Header) */
.ric-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ric-space-md);
    width: 100%;
    padding: var(--ric-space-lg);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--ric-transition-fast);
}

.ric-faq-question:hover {
    background-color: rgba(var(--ric-divine-gold-rgb), 0.05);
}

/* FAQ Question Text */
.ric-faq-question-text {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-scripture-navy);
    line-height: var(--ric-leading-normal);
    flex: 1;
}

@media (min-width: 768px) {
    .ric-faq-question-text {
        font-size: var(--ric-font-lg);
    }
}

/* FAQ Icon (Plus/Minus) */
.ric-faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--ric-radius-full);
    background-color: rgba(var(--ric-divine-gold-rgb), 0.15);
    transition: transform var(--ric-transition-normal),
        background-color var(--ric-transition-normal);
}

/* Plus sign using pseudo-elements */
.ric-faq-icon::before,
.ric-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--ric-divine-gold);
    transition: transform var(--ric-transition-normal),
        opacity var(--ric-transition-normal);
}

.ric-faq-icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.ric-faq-icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

/* FAQ Answer (Collapsible Content) */
.ric-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ric-transition-slow),
        padding var(--ric-transition-slow);
}

.ric-faq-answer p {
    padding: 0 var(--ric-space-lg) var(--ric-space-lg);
    margin: 0;
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-base);
    color: var(--ric-text-light);
    line-height: var(--ric-leading-relaxed);
}

/* Expanded State - When Checkbox is Checked */
.ric-faq-toggle:checked+.ric-faq-question+.ric-faq-answer {
    max-height: 300px;
}

.ric-faq-toggle:checked+.ric-faq-question {
    background-color: rgba(var(--ric-divine-gold-rgb), 0.08);
}

.ric-faq-toggle:checked+.ric-faq-question .ric-faq-icon {
    background-color: var(--ric-divine-gold);
}

.ric-faq-toggle:checked+.ric-faq-question .ric-faq-icon::before,
.ric-faq-toggle:checked+.ric-faq-question .ric-faq-icon::after {
    background-color: var(--ric-pure-white);
}

/* Rotate the vertical line to create minus sign */
.ric-faq-toggle:checked+.ric-faq-question .ric-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* Focus State for Keyboard Navigation */
.ric-faq-toggle:focus+.ric-faq-question {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ric-divine-gold);
}

.ric-faq-question:focus-visible {
    outline: 2px solid var(--ric-divine-gold);
    outline-offset: -2px;
}

/* Active Item Border Highlight */
.ric-faq-toggle:checked~.ric-faq-item,
.ric-faq-item:has(.ric-faq-toggle:checked) {
    border-color: var(--ric-divine-gold);
}

/* Workaround for :has() support - add border via sibling */
.ric-faq-toggle:checked+.ric-faq-question {
    border-left: 3px solid var(--ric-divine-gold);
    margin-left: -1px;
    padding-left: calc(var(--ric-space-lg) - 2px);
}

/* FAQ Contact Note */
.ric-faq-contact {
    text-align: center;
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: var(--ric-text-light);
    margin: 0;
}

.ric-faq-contact a {
    color: var(--ric-divine-gold-dark);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color var(--ric-transition-fast),
        color var(--ric-transition-fast);
}

.ric-faq-contact a:hover,
.ric-faq-contact a:focus {
    color: var(--ric-divine-gold);
    text-decoration-color: var(--ric-divine-gold);
}

/* Reduced Motion for FAQ */
@media (prefers-reduced-motion: reduce) {
    .ric-faq-answer {
        transition: none;
    }

    .ric-faq-icon,
    .ric-faq-icon::before,
    .ric-faq-icon::after {
        transition: none;
    }
}

/* Mobile Responsive for FAQ */
@media (max-width: 767px) {
    .ric-faq-question {
        padding: var(--ric-space-md);
    }

    .ric-faq-answer p {
        padding: 0 var(--ric-space-md) var(--ric-space-md);
    }

    .ric-faq-toggle:checked+.ric-faq-question {
        padding-left: calc(var(--ric-space-md) - 2px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER SECTION (Agent 6)
   Navy background with 4-column responsive layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Footer Base */
.ric-footer {
    background-color: var(--ric-scripture-navy);
    color: var(--ric-pure-white);
}

/* Footer Content Area */
.ric-footer-content {
    padding: var(--ric-space-3xl) 0 var(--ric-space-2xl);
}

/* Footer Grid - 4 columns on desktop */
.ric-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ric-space-2xl);
}

@media (min-width: 480px) {
    .ric-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ric-space-xl) var(--ric-space-lg);
    }
}

@media (min-width: 1024px) {
    .ric-footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: var(--ric-space-2xl);
    }
}

/* Footer Column Headings */
.ric-footer-heading {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-lg);
    font-weight: var(--ric-font-semibold);
    color: var(--ric-pure-white);
    margin-bottom: var(--ric-space-lg);
    position: relative;
    padding-bottom: var(--ric-space-sm);
}

.ric-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--ric-divine-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER BRAND COLUMN
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-footer-brand {
    max-width: 280px;
    text-align: center;
}

@media (max-width: 479px) {
    .ric-footer-brand {
        text-align: center;
        max-width: none;
        margin: 0 auto;
    }
}

.ric-footer-logo-link {
    display: inline-block;
    margin-bottom: var(--ric-space-md);
    transition: opacity var(--ric-transition-fast);
}

.ric-footer-logo-link:hover {
    opacity: 0.9;
}

.ric-footer-logo {
    max-height: 140px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.ric-footer-tagline {
    font-family: var(--ric-font-heading);
    font-size: var(--ric-font-lg);
    font-weight: var(--ric-font-medium);
    color: var(--ric-divine-gold);
    margin-bottom: var(--ric-space-sm);
}

.ric-footer-mission {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--ric-leading-relaxed);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER LINKS COLUMN
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-sm);
}

.ric-footer-link {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    display: inline-block;
    padding: var(--ric-space-xs) 0;
    transition: color var(--ric-transition-fast),
        transform var(--ric-transition-fast);
}

.ric-footer-link:hover,
.ric-footer-link:focus {
    color: var(--ric-divine-gold);
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER CONTACT COLUMN
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ric-space-md);
}

.ric-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ric-space-sm);
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--ric-leading-normal);
}

.ric-footer-contact-item i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--ric-divine-gold);
    margin-top: 2px;
}

.ric-footer-contact-item a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color var(--ric-transition-fast);
}

.ric-footer-contact-item a:hover,
.ric-footer-contact-item a:focus {
    color: var(--ric-divine-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER SOCIAL COLUMN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Social Icons */
.ric-social-icons {
    display: flex;
    gap: var(--ric-space-md);
    margin-bottom: var(--ric-space-lg);
}

.ric-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ric-radius-md);
    color: var(--ric-pure-white);
    font-size: var(--ric-font-lg);
    text-decoration: none;
    transition: background-color var(--ric-transition-fast),
        border-color var(--ric-transition-fast),
        transform var(--ric-transition-fast);
}

.ric-social-icon:hover,
.ric-social-icon:focus {
    background-color: var(--ric-divine-gold);
    border-color: var(--ric-divine-gold);
    transform: translateY(-2px);
}

/* Newsletter Mini-Form */
.ric-footer-newsletter {
    margin-top: var(--ric-space-md);
}

.ric-footer-newsletter-row {
    display: flex;
    gap: var(--ric-space-xs);
}

.ric-footer-newsletter-input {
    flex: 1;
    padding: 10px 14px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ric-radius-md);
    color: var(--ric-pure-white);
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    min-height: var(--ric-touch-min);
    transition: border-color var(--ric-transition-fast),
        background-color var(--ric-transition-fast);
}

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

.ric-footer-newsletter-input:focus {
    outline: none;
    border-color: var(--ric-divine-gold);
    background-color: rgba(255, 255, 255, 0.15);
}

.ric-footer-newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--ric-divine-gold);
    border: none;
    border-radius: var(--ric-radius-md);
    color: var(--ric-pure-white);
    font-size: var(--ric-font-base);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--ric-transition-fast),
        transform var(--ric-transition-fast);
}

.ric-footer-newsletter-btn:hover,
.ric-footer-newsletter-btn:focus {
    background-color: var(--ric-divine-gold-dark);
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER BOTTOM BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--ric-space-lg) 0;
}

.ric-footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ric-space-sm);
    text-align: center;
}

@media (min-width: 768px) {
    .ric-footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.ric-footer-copyright {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.ric-footer-legal {
    display: flex;
    align-items: center;
    gap: var(--ric-space-sm);
}

.ric-footer-separator {
    color: rgba(255, 255, 255, 0.3);
}

.ric-footer-legal-link {
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-sm);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--ric-transition-fast);
}

.ric-footer-legal-link:hover,
.ric-footer-legal-link:focus {
    color: var(--ric-divine-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM VALIDATION STATES (Agent 6)
   Error styling for real-time validation
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-input-error {
    border-color: var(--ric-error) !important;
    box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.15) !important;
}

.ric-input-error-msg {
    display: block;
    margin-top: var(--ric-space-xs);
    font-family: var(--ric-font-body);
    font-size: var(--ric-font-xs);
    color: var(--ric-error);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUALLY HIDDEN UTILITY (Accessibility)
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FOOTER ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
    .ric-footer-content {
        padding: var(--ric-space-2xl) 0;
    }

    .ric-footer-links,
    .ric-footer-contact,
    .ric-footer-social {
        text-align: center;
    }

    .ric-footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .ric-footer-link:hover,
    .ric-footer-link:focus {
        transform: none;
    }

    .ric-footer-contact-item {
        justify-content: center;
    }

    .ric-social-icons {
        justify-content: center;
    }

    .ric-footer-newsletter-row {
        flex-direction: column;
    }

    .ric-footer-newsletter-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END MAIN STYLESHEET
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RECIPIENT LANDING PAGE (view-card.html)
   ═══════════════════════════════════════════════════════════════════════════ */

.ric-recipient-hero {
    position: relative;
    padding: var(--ric-space-3xl) 0 var(--ric-space-xl);
    background: linear-gradient(135deg,
            var(--ric-scripture-navy) 0%,
            var(--ric-scripture-navy-light) 100%);
    color: var(--ric-pure-white);
    text-align: center;
    overflow: hidden;
}

.ric-recipient-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/jesus-silhouette.png');
    background-repeat: no-repeat;
    background-position: center 25%;
    background-size: cover;
    opacity: 0.1;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.ric-recipient-header {
    position: relative;
    z-index: 2;
    margin-bottom: var(--ric-space-3xl);
}

.ric-highlight-name {
    color: var(--ric-divine-gold);
    font-style: italic;
    font-family: var(--ric-font-heading);
}

.ric-recipient-card-showcase {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding-bottom: var(--ric-space-md);
}

/* Make the specific viewer card larger than grid cards */
.ric-recipient-card-wrapper {
    width: 100%;
    max-width: 450px;
    /* Larger max-width */
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
}

.ric-recipient-card-wrapper .ric-card-flip-container,
.ric-recipient-card-wrapper .ric-card-flip-inner {
    min-height: 650px;
    /* Taller card */
}

/* Upscale typography inside the large card */
.ric-recipient-card-wrapper .ric-card-preview-name {
    font-size: 1.8rem;
}

.ric-recipient-card-wrapper .ric-card-preview-detail {
    font-size: 1.2rem;
}

.ric-recipient-card-wrapper .ric-card-mockup-title {
    font-size: 1.2rem;
}

.ric-recipient-card-wrapper .ric-card-mockup-text {
    font-size: 1.4rem;
}

.ric-recipient-card-wrapper .ric-card-mockup-verse {
    font-size: 0.9rem;
}

.ric-recipient-card-instruction {
    margin-top: var(--ric-space-lg);
    color: var(--ric-divine-gold);
    font-family: var(--ric-font-sans);
    font-weight: 500;
    letter-spacing: 1px;
    animation: ric-pulse-opacity 2s ease-in-out infinite;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.pulse-icon {
    animation: ric-bounce-icon 2s ease-in-out infinite;
    display: inline-block;
    margin-right: var(--ric-space-xs);
}

@keyframes ric-bounce-icon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes ric-pulse-opacity {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Mobile adjustments for viewer */
@media (max-width: 768px) {
    .ric-recipient-hero {
        padding: var(--ric-space-2xl) 0 var(--ric-space-xl);
    }

    .ric-recipient-card-wrapper .ric-card-flip-container,
    .ric-recipient-card-wrapper .ric-card-flip-inner {
        min-height: 550px;
        /* Reduce height slightly on small screens */
    }
}