/* /Pages/Home.razor.rz.scp.css */
.hero-section[b-koz2re9a1g] {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    aspect-ratio: 3/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg[b-koz2re9a1g] {
    width: 100vw;
    min-width: 100vw;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    display: block;
}

.hero-overlay[b-koz2re9a1g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0,0,0,0.2);
}

.hero-logo-oval[b-koz2re9a1g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76vw;
    height: 34vw;
    max-width: 100vw;
    max-height: 30vw;
    margin: 0 auto 10px auto;
}

.hero-logo-oval[b-koz2re9a1g]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    border-radius: 50% / 50%;
    z-index: 1;
}

.hero-logo[b-koz2re9a1g] {
    position: relative;
    z-index: 2;
    width: 70%;
    height: auto;
    display: block;
}

/* Key part for floating subtitle */
.hero-subtitle[b-koz2re9a1g] {
    position: relative;
    top: -2vw;
    left: 50%;
    transform: translateX(-50%);
    background: #2196f3;
    padding: 1vw 4vw;
    border-radius: 6px;
    font-size: 2vw;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 8px #0002;
    text-align: center;
    min-width: 200px;
    width: 50vw;
    z-index: 10;
    margin-bottom: -1vw;
}

.hero-desc[b-koz2re9a1g] {
    max-width: 76vw;
    width: 100%;
    text-align: center;
    font-size: 3vw;
    margin: 1vw 0 3vw 12vw;
    color: #333;
    overflow-wrap: break-word;
    
}

.carousel-item[b-koz2re9a1g] {
    position: relative;
    display: none;
    float: left;
    width: 100%;    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}

.carousel-section[b-koz2re9a1g] {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    position: relative;
    background: #181818;
    padding: 2vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steampunk-carousel[b-koz2re9a1g] {
    position: relative;
    width: 70vw;
    max-width: 900px;
    max-height: 34vw; /* Match about-section image height */
    min-height: 320px;
    background: #232323;
    border: 4px solid #bfa76a;
    border-radius: 2vw;
    box-shadow: 0 0 40px #000a, 0 0 0 8px #333 inset;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steampunk-carousel .carousel-inner[b-koz2re9a1g] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.steampunk-carousel .carousel-item[b-koz2re9a1g] {
    position: absolute;
    inset: 0;
    display: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out, opacity .3s ease-in-out;
}

.steampunk-carousel .carousel-item.active[b-koz2re9a1g] {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.steampunk-carousel .carousel-item img[b-koz2re9a1g] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.steampunk-btn[b-koz2re9a1g] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(145deg, #bfa76a 60%, #232323 100%);
    border: 2px solid #bfa76a;
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    min-width: 40px;
    min-height: 40px;
    color: #232323;
    font-size: 2vw;
    box-shadow: 0 0 8px #bfa76a, 0 0 0 2px #232323 inset;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.steampunk-btn.carousel-control-prev[b-koz2re9a1g] {
    left: 1vw;
}

.steampunk-btn.carousel-control-next[b-koz2re9a1g] {
    right: 1vw;
}

.steampunk-btn:hover[b-koz2re9a1g] {
    background: #232323;
    color: #bfa76a;
    border-color: #bfa76a;
}

.steampunk-arrow[b-koz2re9a1g] {
    font-family: 'Segoe UI Symbol', 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 0 0 4px #bfa76a, 0 0 2px #232323;
}


.about-section[b-koz2re9a1g] {
    width: 100%;
    padding: 0;
    margin: 0;
}
.about-gradient[b-koz2re9a1g] {
    position: relative;
    background: linear-gradient(90deg, #b6d07a 0%, #b6d07a 40%, #6ec6e6 100%);
    padding: 2rem 0;
}

.about-heading[b-koz2re9a1g] {
    font-size: clamp(1.5rem, 4vw, 3rem); /* min 1.5rem, scales with 4vw, max 3rem */
    color: #fff;
    text-shadow: 0 2px 8px #0002;
    margin: 0 0 1vw 0;
    padding-left:9vw;
    text-align: left;
    font-weight: bold;
}

.about-content[b-koz2re9a1g] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}


.about-image[b-koz2re9a1g] {
    flex: 0 0 33.33vw;  /*Only take up 1/3 of the viewport width */
    max-width: 33.33vw;
}

.about-image-left[b-koz2re9a1g] {
    /* Control location and size as needed */
    flex: 0 0 30vw;
    max-width:80vw;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.about-image-left .about-image-mask[b-koz2re9a1g] {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.about-image-left .about-image-mask img[b-koz2re9a1g] {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    display: block;
}

.about-image-left .about-image-mask[b-koz2re9a1g]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(91, 128, 5, 0.55); /* greenish mask */
    pointer-events: none;
    border-radius: 8px;
}

/* RIGHT IMAGE: location, size, mask, and mask color */
.about-image-right[b-koz2re9a1g] {
    flex: 0 0 30vw;
    max-width: 80vw;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 24vw 0 0 0;
}

.about-image-right .about-image-mask[b-koz2re9a1g] {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.about-image-right .about-image-mask img[b-koz2re9a1g] {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    display: block;
}

.about-image-right .about-image-mask[b-koz2re9a1g]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(110, 198, 230, 0.45); /* blueish mask */
    pointer-events: none;
    border-radius: 8px;
}

.about-text[b-koz2re9a1g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #222;
    min-width: 320px;
}

.about-text h2[b-koz2re9a1g] {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 2px 8px #0002;
}
.about-mission-vision[b-koz2re9a1g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 2rem;
    width: 100%;
    margin: -3vw 0 1vw 0;
}
.about-mission-vision > div[b-koz2re9a1g] {
    flex: 1;
}
.about-mission-vision h3[b-koz2re9a1g] {
    font-size: 2rem;         /* Largest */
    margin-bottom: 0.5rem;
    color: #222;
    font-weight: 700;
}

/* Restore | Disciple | Reach */
.about-mission-vision p:first-of-type[b-koz2re9a1g] {
    font-size: 1.25rem;      /* Smallest */
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* To restore lost and broken... */
.about-mission-vision p:nth-of-type(2)[b-koz2re9a1g] {
    font-size: 1.5rem;       /* Medium */
    margin-bottom: 3vw;
    font-weight: 400;
    line-height: 1.25;
}

/* Add spacing between Mission and Vision blocks */
.about-mission-vision > div[b-koz2re9a1g] {
    margin-bottom: 2.5rem;
}
.about-mission-vision > div:last-child[b-koz2re9a1g] {
    margin-bottom: 0;
}

.pastor-section[b-koz2re9a1g] {
    width: 100%;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: url(content/pastor/rhk-pastor-background1-20250907.jpg) no-repeat center center;
    background-size: cover; /* Change from cover to contain */
    background-repeat: no-repeat;
    background-color: #f7f7f7;
    padding: 3vw 0 3vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.pastor-section[b-koz2re9a1g]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.7) brightness(0.7); /* Example filter */
    z-index: 0;
    pointer-events: none;
}

.pastor-bg[b-koz2re9a1g], .pastor-content[b-koz2re9a1g] {
    position: relative;
    z-index: 1;
}

.pastor-bg[b-koz2re9a1g] {
    width: 90vw;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    position: relative;
    z-index: 1;
}

.pastor-content[b-koz2re9a1g] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.pastor-text[b-koz2re9a1g] {
    flex: 1 1 0;
    color: #222;
    background: rgba(255,255,255,0.75);
    border-radius: 10px;
    padding: 2vw 2vw 2vw 2vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 45vw;
    box-shadow: 0 2px 12px #0001;
}

.pastor-text h2[b-koz2re9a1g] {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1vw;
    color: #222;
    text-align: center;
    line-height: 1.1;
}

.pastor-text p[b-koz2re9a1g] {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.pastor-image[b-koz2re9a1g] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    max-width: 400px;
}

.pastor-image img[b-koz2re9a1g] {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 12px #0002;
    object-fit: cover;
    display: block;
}

.doctrine-section[b-koz2re9a1g] {    
    background: #e3f2fd; /* This is your section's blue */
    padding: 2rem 0 2rem 0;
    text-align: center;
}
.doctrine-header[b-koz2re9a1g] {
    font-size: 2rem;
    font-weight: 600;
    color: #2a5d8f; /* Change to blue */
    margin-bottom: 1rem;
    text-shadow: 0 4px 12px #b6d07a, 0 1px 0 #b6d07a; /* Drop shadow in green */
}
.doctrine-tabs[b-koz2re9a1g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem; /* Reduce gap for all screens */
    background: #e3f2fd;
    padding: 0.5rem 0.2rem 0 0.2rem; /* Less horizontal padding */
    border-radius: 1rem 1rem 0 0;
    max-width: 76vw;
    margin-left: auto;
    margin-right: auto;
    /* Optional: add horizontal scroll for overflow */
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.doctrine-tabs[b-koz2re9a1g]::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Webkit browsers */
}
.doctrine-tabs span[b-koz2re9a1g] {
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 140px;
    margin-bottom: -2px;
    margin-right: 0;
    border-radius: 1rem 1rem 0 0;
    padding: 0.4rem 0.7rem;
    font-size: 1rem;
    white-space: nowrap;
    background: #2a5d8f; /* Ensure unselected tabs are dark blue */
    color: #fff;
    border: 1px solid transparent;
    border-bottom: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
    font-weight: 500;
}

.doctrine-tabs span.active[b-koz2re9a1g] {
    background: #b6d07a;
    color: #222;
    border: 2px solid #b6d07a;
    border-bottom: 2px solid #fff;
    z-index: 1;
}

.doctrine-tabs span:hover:not(.active)[b-koz2re9a1g] {
    background: #1a3a5b; /* Slightly darker blue on hover for unselected */
    color: #fff;
}
.doctrine-content[b-koz2re9a1g] {
    background: #fff;
    border: 2px solid #2a5d8f;
    border-radius: 0 1rem 1rem 1rem;
    padding: 1.5rem;
    margin-top: 0;                 /* Remove space above content */
    box-shadow: 0 2px 8px rgba(42,93,143,0.07);
    max-width: 76vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;         /* Center the ul block itself */
    border-top-left-radius: 0;     /* Remove top left radius for seamless join */
    border-top-right-radius: 0;    /* Remove top right radius for seamless join */
}
.doctrine-content ul[b-koz2re9a1g] {
    flex: 2;
    font-size: 1.1rem;
    color: #222;
    margin-top: 0.5rem;
    list-style-position: inside;
    padding-left: 0;
    display: inline-block;
    text-align: left;
}
.doctrine-content ul li[b-koz2re9a1g] {
    text-align: center;
    margin-left: 0;
    margin-bottom: 0.55em; /* Half a line of space between bullets */
}
.doctrine-content img[b-koz2re9a1g] {
    flex: 1;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    margin-top: 0.5rem;
}

.rhk_faith_doctrinal-head3[b-koz2re9a1g] {
    font-size: 2.2rem; /* Twice the bullet point size */
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #2a5d8f;
}

.sendGrid[b-koz2re9a1g] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Modern, responsive, no media queries needed */
    overflow: hidden;
    min-height: 550px; /* Fallback for browsers not supporting aspect-ratio */
    max-width: 700px; /* Optional: limit max width for desktop */
    margin-left: auto;
    margin-right: auto;
}

.rhk_sg_signup[b-koz2re9a1g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.newsletter-link[b-koz2re9a1g] {
    margin: 1.5rem 0 0 0;
}
.newsletter-link button[b-koz2re9a1g] {
    background: #b6d07a;
    color: #222;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    cursor: pointer;
}

.trapezoid-flip[b-koz2re9a1g] {
    position: absolute;
    width: 100vw;
    height: 14.5vw; /* Adjust height as needed */
    background: #e3f2fd; /* Same as .doctrine-section */
    clip-path: polygon(0 100%, 100% 100%, 75% 0, 25% 0);
    transform: rotate(180deg);
    margin: -1vw 0 0 0;
    padding: 0;
    z-index: 2;
}

.footer-section[b-koz2re9a1g] {
    position: relative;
    background: #2196f3;
    color: #fff;
    padding: 1vw 0 1rem 0;
}

.footer-col-right a[b-koz2re9a1g],
.footer-col-left a[b-koz2re9a1g],
.footer-pastor a[b-koz2re9a1g] {
    color: #fff !important; /* Make links white */
    text-decoration: underline; /* Underline for visibility */
    font-weight: 600; /* Slightly bolder */
    transition: color 0.2s;
}

.footer-col-right a:hover[b-koz2re9a1g],
.footer-col-right a:focus[b-koz2re9a1g],
.footer-col-left a:hover[b-koz2re9a1g],
.footer-col-left a:focus[b-koz2re9a1g],
.footer-pastor a:hover[b-koz2re9a1g],
.footer-pastor a:focus[b-koz2re9a1g] {
    color: #b6d07a !important; /* Contrasting highlight on hover/focus */
    text-decoration: underline;
}

.footer-content[b-koz2re9a1g] {
    display: flex;
    justify-content: center; /* Center the oval and its siblings */
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem;
    position: relative;
}

.footer-col[b-koz2re9a1g] {
    flex: 1 1 0;
    padding: 0 1.5rem;
    min-width: 220px;
}

.footer-col-center[b-koz2re9a1g] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-col-right[b-koz2re9a1g] {
    z-index: 3;
}    

.footer-pastor[b-koz2re9a1g] {
    margin-top: 1vw;
    font-size: 1vw;
    text-align: center;
}

.footer-times[b-koz2re9a1g] {    
    text-align: center;
}

.footer-col-left[b-koz2re9a1g] {
    text-align: left;
}

.footer-logo[b-koz2re9a1g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34vw; /* Match oval width */
    min-height: 14vw; /* Match oval height */
}

.footer-logo img[b-koz2re9a1g] {
    position: relative;
    top: -2vw;
    z-index: 3;
    min-width: 10vw;
    max-width: 15vw;
}

.footer-content > div[b-koz2re9a1g] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;    
    min-width: 0;
}

.footer-content > div:first-child[b-koz2re9a1g] {
    text-align: left;
}

.footer-content > div:last-child[b-koz2re9a1g] {
    text-align: right;
}


@media (max-width: 900px) {
    .about-content[b-koz2re9a1g], .pastor-content[b-koz2re9a1g], .doctrine-content[b-koz2re9a1g], .footer-content[b-koz2re9a1g] {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .about-image img[b-koz2re9a1g], .pastor-image img[b-koz2re9a1g], .doctrine-content img[b-koz2re9a1g] {
        width: 160px;
        height: 160px;
    }

    .pastor-bg[b-koz2re9a1g] {
        flex-direction: column;
        gap: 2vw;
    }

    .pastor-text[b-koz2re9a1g], .pastor-image[b-koz2re9a1g] {
        max-width: 95vw;
    }

    .pastor-section[b-koz2re9a1g] {
        min-height: unset;
        padding: 6vw 0 6vw 0;
    }

    .footer-col-right a:hover[b-koz2re9a1g],
    .footer-col-right a:focus[b-koz2re9a1g] {
        color: #2196f3 !important; /* Contrasting highlight on hover/focus */
        text-decoration: underline;
    }

    .footer-col-right a[b-koz2re9a1g] {
        color: #000 !important; /* Make links white */
        text-decoration: underline; /* Underline for visibility */
        font-weight: 600; /* Slightly bolder */
        transition: color 0.2s;
    }

    .footer-content > div:first-child[b-koz2re9a1g] {        
        text-align: center;
        
    }

    .footer-logo img[b-koz2re9a1g] {
        position: relative;   
        top: -3.5vw;
        z-index: 2;
        min-width: 20vw;
        max-width: 25vw;
    }

    .footer-content > div:last-child[b-koz2re9a1g] {        
        text-align: left;
        margin-left: -35vw;
    }

    .footer-pastor[b-koz2re9a1g] {
        margin-top: 1vw;
        font-size: 4vw;
        text-align: center;
    }

    .footer-location[b-koz2re9a1g] {
        margin-top: 10vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .trapezoid-flip[b-koz2re9a1g] {
        position: absolute;
        width: 100vw;
        height: 53.5vw; /* Adjust height as needed */
        background: #e3f2fd; /* Same as .doctrine-section */
        clip-path: polygon(5% 100%, 95% 100%, 80% 0, 20% 0);
        transform: rotate(180deg);
        margin: -1vw 0 0 0;
        padding: 0;
        z-index: 1;
    }
}



/* /Pages/News.razor.rz.scp.css */
body[b-y0arzj9xo4] {
}
/* /Pages/TotallyFree.razor.rz.scp.css */
/*TotallyFree*/
.rhk_tf_alignments[b-vweuuuml7d] {
    background: black;
}

.rhk_tf_text_align[b-vweuuuml7d] {
    justify-content: center;
    align-items: center;
    margin: min(3vw, 2rem);
}

.rhk_tf_main_headers2[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 6.75vw;
    --max: 8.5vw;
    text-align: center;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.2rem, 6vw, 4.5rem);
}

.rhk_tf_fa_pray[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 3.75vw;
    --max: 6.5vw;
    position: relative;
    top: 4.75vw;
    z-index: 0;
    color: #38B6FF;
}

.rhk_tf_main_headers4[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 3.75vw;
    --max: 6.5vw;
    text-align: center;
    position: relative;
    left: 3vw;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: clamp(1rem, 3vw, 2.5rem);
}

.rhk_tf_headers3[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 3.75vw;
    --max: 5.5vw;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: clamp(1rem, 2.5vw, 2rem);
}

.rhk_tf_body[b-vweuuuml7d] {
    margin: min(2vw, 1.5rem);
    --min: 1.0vw;
    --val: 1.5vw;
    --max: 2.5vw;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: clamp(0.95rem, 1.5vw, 1.5rem);
}

.rhk_tf_headers[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 7.75vw;
    --max: 8.5vw;
    color: black;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.rhk_tf_footer[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 4.75vw;
    --max: 5.5vw;
    color: black;
    background-image: linear-gradient(to bottom, #8AB648, #38B6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.rhk_tf_footer_body[b-vweuuuml7d] {
    --min: 1.0vw;
    --val: 2.75vw;
    --max: 3.5vw;
    text-align: center
}

/*read more fancy stuff*/
.rhk_tf_control_panel[b-vweuuuml7d] {
    /*background-color: rgba(255, 255, 255, 0.5);*/
}

.h-divider .shadow[b-vweuuuml7d] {
    overflow: hidden;
    height: 30px;
}

    .h-divider .shadow[b-vweuuuml7d]:after {
        content: '';
        display: block;
        margin: -25px auto 0;
        width: 100%;
        height: 25px;
        border-radius: 125px/12px;
        box-shadow: 0 0 18px #38B6FF;
    }

.h-divider .text[b-vweuuuml7d] {
    width: 100px;
    height: 45px;
    padding: 10px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -33px;
    left: 50%;
    margin-left: -60px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #999;
    background: #38B6FF;
}

    .h-divider .text i[b-vweuuuml7d] {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: 4px;
        border-radius: 100%;
        border: 1px dashed #aaa;
        text-align: center;
        line-height: 50px;
        font-style: normal;
        color: #38B6FF;
    }

.h-divider .text2[b-vweuuuml7d] {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -35px;
    left: 50%;
    margin-left: -25px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #999;
    background: #38B6FF;
}

.h-divider img[b-vweuuuml7d] {
    position: absolute;
    margin: 4px;
    max-width: 60px;
    border-radius: 100%;
    border: 1px dashed #aaa;
}

/*end read more fancy stuff*/
.hidden-text[b-vweuuuml7d] {
    display: none;
    margin-top: 10px;
}

.read-more-link[b-vweuuuml7d] {
    cursor: pointer;
    color: #8BC34A !important;
    -webkit-text-fill-color: #8BC34A;
    text-decoration: underline;
    user-select: none; /* Prevents text selection on double-click */
    text-shadow: #8ab648 1px 0px;
}

/* Add or update these styles for your modal */
.verse-modal[b-vweuuuml7d] {
    position: fixed;
    z-index: 1050;
    background: #fff;
    color: #222;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.25);
    padding: 1.5rem 2rem;
    min-width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    font-size: 1rem;
    /* These will be set inline from the parent component */
}
.verse-modal h4[b-vweuuuml7d] {
    margin-top: 0;
}
.verse-modal-close[b-vweuuuml7d] {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}
@media (max-width: 600px) {
    .verse-modal[b-vweuuuml7d] {
        min-width: 90vw;
        left: 5vw !important;
        right: 5vw !important;
    }
}

/* Verse text alignment using CSS Grid */
.verse-grid[b-vweuuuml7d] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5ch;
    margin-bottom: 0.75em; /* Add space between verses */
    line-height: 1.6;
}

.verse-number[b-vweuuuml7d] {
    font-weight: bold;
    color: #666;
    margin-right: 0.5em;
}

.verse-content[b-vweuuuml7d] {
    line-height: 1.6;
}

/*.verse-number {
    font-weight: bold;
    font-size: 0.75em;
    align-self: start;
    margin-top: 0.1em;
}*/

/*.verse-content {
    align-self: start;
}*/

/* For multiple verses - add spacing between each verse */
.verse-multi[b-vweuuuml7d] {
    display: block;
}

.verse-multi .verse-grid[b-vweuuuml7d] {
    margin-bottom: 0.75em; /* Space between each verse in multi-verse passages */
}

.verse-multi .verse-grid:last-child[b-vweuuuml7d] {
    margin-bottom: 0; /* Remove margin from the last verse */
}

/* For modal verses - ensure proper styling and spacing */
.verse-modal .verse-grid[b-vweuuuml7d],
.verse-modal .verse-number[b-vweuuuml7d],
.verse-modal .verse-content[b-vweuuuml7d] {
    color: #222;
    background: none;
    -webkit-text-fill-color: #222;
}

/* Responsive adjustments for very small screens */
@media (max-width: 400px) {
    .verse-modal-content[b-vweuuuml7d] {
        width: calc(100vw - 20px);
        margin: 10px;
        padding: 1rem;
        max-height: calc(100vh - 20px);
    }

    to[b-vweuuuml7d] {
        opacity: 1;
        transform: scale(1);
    }
}

.close-btn[b-vweuuuml7d] {
    background: none;
    border: none;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    cursor: pointer;
    color: #666;
    padding: 0;
    width: clamp(24px, 6vw, 32px);
    height: clamp(24px, 6vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .close-btn:hover[b-vweuuuml7d] {
        background-color: #f5f5f5;
        color: #333;
    }

.modal-header h4[b-vweuuuml7d] {
    margin: 0;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
    color: #333;
}

.verse-grid[b-vweuuuml7d], .verse-multi[b-vweuuuml7d] {
    font-family: inherit;
}