/*---------------------------------------------
828 Hope design refresh

Loaded after style.css and responsive.css, so these rules win without
editing the template. Colors keep the brand palette but use deeper shades
wherever text sits on them, so everything meets WCAG AA contrast:

  ink          #424242   headings (unchanged)
  body text    #5f5f5f   was #818181 (3.9:1, now 6.4:1 on white)
  deep teal    #01718a   the hero's teal; small teal text and teal panels
                         that carry white text (5.6:1)
  deep coral   #ba5645   coral buttons and cards with white text (4.7:1)
  gold         #f1ae44   unchanged, but with dark text (5.2:1) instead of
                         white (1.9:1)
----------------------------------------------*/

/*==== Body text and small labels ====*/
body,
.form-shared form .form-control,
.form-shared form .textarea {
    color: #5f5f5f;
}
.header-area .header-top .ostion-top-wrap .ostion-menu .ostion-menu-content .navigation-top .main-navigation ul li a,
.header-area .header-top-action .top-action-content .info-box ul.top-action-list li a {
    color: #555;
}
.section-heading .section__meta {
    color: #01718a;
}
/* Labels that sit on dark or colored backgrounds stay light */
.section-heading .section__meta.text__white,
.mixer-area .section-heading .section__meta {
    color: #fff;
}
a {
    color: #01718a;
}

/*==== Buttons ====*/
.theme-btn,
.theme-btn-noside,
.theme-btn:after {
    color: #2b2b2b;
}
.theme-btn:hover,
.theme-btn:hover:after,
.theme-btn-noside:hover,
.header-area .header-top .ostion-top-wrap .header-btn .theme-btn,
.header-area .header-top .ostion-top-wrap .header-btn .theme-btn:after,
.service-area .button-shared .theme-btn,
.service-area .button-shared .theme-btn:after {
    background-color: #ba5645;
    color: #fff;
}
.header-area .header-top .ostion-top-wrap .header-btn .theme-btn:hover,
.header-area .header-top .ostion-top-wrap .header-btn .theme-btn:hover:after,
.service-area .button-shared .theme-btn:hover,
.service-area .button-shared .theme-btn:hover:after {
    background-color: #f1ae44;
    color: #2b2b2b;
}
.theme-btn-noside:hover {
    background-color: #ba5645;
}

/*==== Teal and coral panels that carry text ====*/
.cta-area,
.cta-area:after,
.helping-area2 .helping-form,
.helping-area2:after,
.contact-area .contact-detail-action .contact-item,
.contact-area .contact-detail-action .contact-item:after,
.helping-area .helping-item .helping-box,
.helping-area .helping-item .helping-box:after,
.team-area .team-content-wrap .team-item .team__title:before,
.team-area .team-content-wrap .team-item .team__title:after {
    background-color: #01718a;
}
.team-area .team-content-wrap .team-item .team__title .team__title-title {
    color: #fff;
}
.contact-area .contact-detail-action .contact-item2,
.contact-area .contact-detail-action .contact-item2:after,
.helping-area .helping-item .helping-box2,
.helping-area .helping-item .helping-box2:after {
    background-color: #ba5645;
}
.helping-area .helping-item .helping-box3,
.helping-area .helping-item .helping-box3:after {
    background-color: #f1ae44;
}
.helping-area .helping-item .helping-box3,
.helping-area .helping-item .helping-box3 h4 {
    color: #2b2b2b;
}
.mixer-area2 .fun-content-slide .fun-slide-item .funslide__name {
    color: #222;
}

/*==== Secondary text link (e.g. "Learn More" beside a button) ====*/
.text-link {
    display: inline-block;
    margin-left: 18px;
    color: #01718a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (max-width: 767px) {
    .text-link {
        padding: 10px 0;
    }
}
.text-link:hover {
    color: #ba5645;
}

/*==== Footer: dark, as the template intended (its headings are white) ====*/
.footer-area {
    background-image: none;
    background-color: #2f2f2f;
    padding-top: 0;
}
.footer-area .newsletter-area {
    display: none;
}
.footer-area .footer-top {
    padding-top: 70px;
    padding-bottom: 50px;
}
.footer-area .footer-widget-wrap .footer-item p,
.footer-area .footer-widget-wrap .footer-item ul li,
.footer-area .footer-widget-wrap .footer-item ul li a,
.footer-area .footer-copyright .copyright-desc,
.footer-area .footer-copyright .copyright-desc a {
    color: #d0d0d0;
}
.footer-area .footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 30px;
    padding-bottom: 30px;
}

/*==== Hidden phone menu: its shadow bled onto the right edge of every page ====*/
.header-area .side-nav-container:not(.active) {
    box-shadow: none;
}

/*==== Decorative dots: keep them in the margins, clear of text ====*/
.service-area .heart-icon {
    pointer-events: none;
}
.service-area .heart-icon-3 { left: 2%; }
.service-area .heart-icon-4 { left: 5%; }
.service-area .heart-icon-5 { left: 1%; }
.service-area .heart-icon-6 { left: 3%; }
.service-area .heart-icon-8 { right: 2%; }
.service-area .heart-icon-9 { right: 5%; }
.service-area .heart-icon-10 { right: 1%; }
@media (max-width: 1199px) {
    .service-area .heart-icon {
        display: none;
    }
}

/*==== Bigger tap targets on phones ====*/
@media (max-width: 767px) {
    .header-area .header-top-action .top-action-content .info-box ul li a {
        display: inline-block;
        min-height: 44px;
        min-width: 44px;
        line-height: 44px;
        text-align: center;
    }
    .footer-area .footer-widget-wrap .footer-item ul li a {
        display: inline-block;
        padding: 6px 0;
    }
    .header-area .header-top .ostion-top-wrap .ostion-menu .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}

/*==== Visually hidden but available to screen readers ====*/
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*==== Calmer motion ====*/
@media (max-width: 991px) {
    /* Fixed backgrounds stutter on phones and tablets */
    .mixer-area,
    .footer-area {
        background-attachment: scroll;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .mixer-area {
        background-attachment: scroll;
    }
}

/*==== Form labels (visible above each field) ====*/
.form-shared .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #424242;
}
.helping-area2 .helping-form .form-label {
    color: #fff;
}

/*==== Hero: keep the headline on the teal side of the photo ====*/
@media (min-width: 992px) {
    .slider-area .slider-heading {
        max-width: 500px;
    }
}

/*==== Homepage: "Looking to help others?" and the scripture quotes ====*/
/* The template pulled the quote panel up into the dark section with a
   negative margin and drew extra coral blocks behind it, next to an empty
   half-width column. Now: a centered dark band, then a full-width coral
   band for the quotes. */
.help-band {
    padding-top: 90px;
    padding-bottom: 90px;
}
.help-band .mixer-heading .section-icon img {
    margin: 0 auto;
}
.help-band .mixer-heading .section__title {
    margin-bottom: 36px;
}
.quote-band.mixer-area2 {
    padding-top: 0;
    background-color: #e36955;
}
.quote-band.mixer-area2:after {
    display: none;
}
.quote-band.mixer-area2 .fun-content-slide {
    margin-top: 0;
    padding: 80px 0 60px;
    background-color: transparent;
}
.quote-band.mixer-area2 .fun-content-slide .fun-slide-item .icon-quote {
    margin-left: 0;
}
.quote-band.mixer-area2 .fun-content-slide .owl-dots {
    position: static;
    width: auto;
    margin-top: 10px;
    transform: none;
    text-align: center;
}

/*==== Homepage "Get in Touch": one clean panel instead of stepped blocks ====*/
.helping-area2:after {
    display: none;
}
@media (min-width: 992px) {
    .helping-area2 .helping-form {
        padding: 80px 60px;
    }
}

/*==== Donate page: PayPal button ====*/
.donate-paypal-btn {
    font-size: 16px;
    line-height: 58px;
    padding: 0 40px 0 44px;
}
.donate-secure-note {
    margin: 14px 0 0;
    font-size: 14px;
    color: #5f5f5f;
}

/*==== Page banners (About, Resources): compact title bar ====*/
.breadcrumb-area .breadcrumb-content {
    padding-top: 64px;
    padding-bottom: 64px;
}
@media (max-width: 767px) {
    .breadcrumb-area .breadcrumb-content {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .breadcrumb-area .breadcrumb-content .breadcrumb__title {
        font-size: 38px;
        line-height: 1.15;
    }
}

/*==== Book feature: the dark slanted panel only works on wide screens ====*/
@media (max-width: 991px) {
    .entry-area:after {
        display: none;
    }
    .entry-area .entry-static-wrap .entry-static-box2 {
        margin-top: 0;
    }
    .entry-area .entry-static-wrap .entry-static-box .entry-video-img img {
        display: block;
        max-width: 340px;
        margin: 0 auto 24px;
    }
}

/*==== Phones: the template keeps 120px of desktop spacing above and below
       every section, which stacks into ~240px of blank screen ====*/
@media (max-width: 767px) {
    .about-area,
    .service-area,
    .mixer-area,
    .help-band,
    .helping-area2,
    .team-area,
    .contact-area,
    .cta-area {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    .entry-area {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/*============================================
    Motion: soft and calm, never bouncy.
    Everything here is switched off by the prefers-reduced-motion
    rule above, and main.js skips the scroll reveal entirely then.
============================================*/

/*==== Fade-in on scroll (main.js adds .reveal, then .is-visible) ====*/
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/*==== Hero entrance ====*/
@keyframes hopeFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.slider-area .slider-heading .slider__meta,
.slider-area .slider-heading .slider__title,
.slider-area .slider-heading .theme-btn {
    animation: hopeFadeUp 0.9s ease-out both;
}
.slider-area .slider-heading .slider__title { animation-delay: 0.2s; }
.slider-area .slider-heading .theme-btn { animation-delay: 0.45s; }

/*==== Hover feedback ====*/
.theme-btn,
.theme-btn:after,
.theme-btn-noside {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.service-area .service-item,
.helping-area .helping-item .helping-box {
    transition: opacity 0.7s ease-out, transform 0.4s ease;
}
.service-area .service-item:hover,
.helping-area .helping-item .helping-box:hover {
    transform: translateY(-5px);
}
.about-semi-img,
.helping-area2 .fun-content .fun-item,
.team-area .team-content-wrap .team-item .team__img {
    overflow: hidden;
}
.about-semi-img img,
.helping-area2 .fun-content .fun-item img,
.team-area .team-content-wrap .team-item .team__img img {
    transition: transform 0.8s ease;
}
.about-semi-img:hover img,
.helping-area2 .fun-content .fun-item:hover img,
.team-area .team-content-wrap .team-item:hover .team__img img {
    transform: scale(1.03);
}

/*==== Soft shadow under the header while it's pinned ====*/
.header-area .header-top.header-fixed {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/*==== Scripture quotes cross-fade (owl's fadeOut is built in) ====*/
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.owl-carousel .fadeIn {
    animation-name: fadeIn;
}
.owl-carousel .animated {
    animation-duration: 0.9s;
}

/*==== Decorative dots: a slow drift instead of a constant pulse ====*/
@keyframes dotDrift {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}
.service-area .heart-icon {
    animation: dotDrift 7s ease-in-out infinite alternate;
}
.service-area .heart-icon:nth-of-type(2n) {
    animation-duration: 9s;
    animation-delay: -3s;
}

/*==== Homepage newsletter sign-up: one tidy row, stacks cleanly ====*/
.newsletter-band .cta__title {
    margin-bottom: 0;
    text-align: left;
}
.newsletter-band .form-control-email,
.newsletter-band #mc-embedded-subscribe {
    width: 100%;
    height: 56px;
}
.newsletter-band .form-control-email {
    padding-top: 0;
    padding-bottom: 0;
}
.newsletter-band #mc-embedded-subscribe {
    line-height: 56px;
    padding: 0 20px;
}
@media (max-width: 991px) {
    .newsletter-band .cta__title {
        margin-bottom: 24px;
        text-align: center;
    }
}
@media (max-width: 767px) {
    .newsletter-band .form-control-email {
        margin-bottom: 12px;
    }
}