/* ==========================================================================
   SOCH shared styles. Loaded last on every page so these rules win.
   Keeps the contact bar, footer contact, WhatsApp button and mobile layout
   identical across the whole site.
   ========================================================================== */

:root {
    --soch-navy: #2c3e50;
    --soch-red: #e74c3c;
    --soch-green: #25d366;
    --soch-tap: 44px;              /* minimum comfortable tap size */
}

/* Double tap no longer zooms the page (pinch zoom still works) */
html, body { touch-action: manipulation; }
img { -webkit-user-drag: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Phone numbers and emails never turn browser blue */
a[href^="tel:"], a[href^="mailto:"] { color: inherit; text-decoration: none; }

/* ---------- Top contact bar (same on every page) ---------- */
.soch-topbar {
    background: var(--soch-navy);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
.soch-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.soch-contact { display: flex; align-items: center; gap: 24px; min-width: 0; }
.soch-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--soch-tap);
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.soch-contact-item i { color: var(--soch-red); font-size: 14px; }
.soch-contact-item:hover span { text-decoration: underline; }
.soch-social { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.soch-social a {
    width: var(--soch-tap);
    height: var(--soch-tap);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
    font-size: 19px;
    text-decoration: none !important;
}
.soch-social a:hover { background: var(--soch-red); }

@media (max-width: 767px) {
    .soch-topbar { font-size: 13px; }
    .soch-topbar-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 0;
        padding: 4px 16px 8px;
    }
    .soch-contact { display: contents; }               /* let the two items join the bar's wrapping */
    .soch-contact-item.soch-email { flex: 1 1 100%; justify-content: center; }
    .soch-contact-item.soch-phone { flex: 0 0 auto; }
    .soch-social { gap: 8px; }
    .soch-social a { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 340px) {
    .soch-topbar { font-size: 12px; }
    .soch-social a { width: 36px; height: 36px; font-size: 16px; }
}

/* ---------- Header: logo text identical on every page ---------- */
body .header-container .logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
@media (max-width: 767px) {
    body .header-container .logo-text { font-size: 13px; }
}

/* ---------- Press effect for buttons and icons ---------- */
.soch-press {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
    will-change: transform;
}
.soch-press:active,
.soch-press.is-pressed { transform: scale(1.15); }

/* ---------- WhatsApp chat button (same on every page) ---------- */
#whatsapp-widget { position: fixed; right: 16px; bottom: 16px; z-index: 1030; }
#whatsapp-widget a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    background: var(--soch-green);
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
#whatsapp-widget i { font-size: 24px; margin: 0; }
@media (max-width: 767px) {
    #whatsapp-widget { right: 12px; bottom: 12px; }
    #whatsapp-widget a { min-height: 52px; padding: 0 16px 0 14px; font-size: 14px; }
}

/* ---------- Footer contact block (same on every page) ---------- */
footer ul.soch-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
footer .footer-contact ul.soch-footer-contact li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
footer .footer-contact ul.soch-footer-contact li i {
    position: static !important;
    color: var(--soch-red);
    margin: 3px 0 0 !important;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
footer ul.soch-footer-contact a { color: rgba(255, 255, 255, 0.75) !important; overflow-wrap: anywhere; }
footer ul.soch-footer-contact a:hover { color: #fff !important; }
@media (max-width: 767px) {
    footer ul.soch-footer-contact { align-items: center; }
    footer .footer-contact ul.soch-footer-contact li { justify-content: center; text-align: left; max-width: 340px; font-size: 13px; }
    /* keep the copyright line clear of the WhatsApp button */
    footer .footer-bottom { padding-bottom: 80px !important; }
}

/* Footer social icons: bigger and easy to tap */
footer .footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
footer .footer-social a {
    width: var(--soch-tap) !important;
    height: var(--soch-tap) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    margin: 0 !important;
}
footer .footer-social a:hover { background: var(--soch-red) !important; }
@media (max-width: 767px) { footer .footer-social { justify-content: center; } }

/* ---------- Home slideshow ---------- */
/* Only the visible slide can be tapped (hidden slides used to catch taps) */
.slideshow-container .slide { pointer-events: none; z-index: 1; }
.slideshow-container .slide.active { pointer-events: auto; z-index: 2; }
.slideshow-container { touch-action: pan-y; }
/* The full width dot row must not block the arrows; the dots stay tappable */
.slideshow-container .slideshow-nav { pointer-events: none; }
.slideshow-container .slideshow-dot { pointer-events: auto; }

.soch-slide-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.soch-slide-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.soch-slide-arrow.prev { left: 20px; }
.soch-slide-arrow.next { right: 20px; }

.soch-quick {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 0 12px;
}
.soch-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.soch-quick a span.soch-quick-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--soch-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-shadow: none;
}
.soch-quick a:hover span.soch-quick-icon { background: var(--soch-red); color: #fff; }

/* Desktop: leave room for the icon row under the slide text */
@media (min-width: 768px) {
    .slideshow-container { height: 560px !important; }
    .slideshow-container .slide-content { top: 42% !important; }
}

@media (max-width: 767px) {
    .slideshow-container { height: 560px !important; }
    .slideshow-container .slide-content { top: 38% !important; padding: 0 18px !important; }
    .slideshow-container .slide-content h1 { font-size: 26px !important; line-height: 1.25; }
    .slideshow-container .slide-content p { font-size: 14px !important; margin-bottom: 18px !important; }
    .slideshow-container .slide-buttons { flex-direction: row !important; flex-wrap: wrap; gap: 10px !important; }
    .slideshow-container .slide-buttons .btn { width: auto !important; margin: 0 !important; padding: 10px 18px !important; font-size: 14px !important; }
    .soch-quick { bottom: 54px; gap: 4px; }
    .soch-quick a { width: 66px; font-size: 11px; }
    .soch-quick a span.soch-quick-icon { width: 44px; height: 44px; font-size: 17px; }
    /* Arrows sit beside the dots on phones so they never cover the text */
    .soch-slide-arrow { top: auto; bottom: 6px; margin-top: 0; width: 40px; height: 40px; font-size: 16px; }
    .soch-slide-arrow.prev { left: calc(50% - 110px); }
    .soch-slide-arrow.next { right: calc(50% - 110px); }
    .slideshow-nav { bottom: 20px !important; }
}

/* ---------- Phone menu (same on every page) ----------
   Just under half the screen (46%), slides in from the right. The current page is
   orange-red with a light peach background and an underline. The dark area
   around the panel is the panel's own shadow, so nothing can cover the menu. */
@media (max-width: 992px) {
    body .header-container #navbar-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 46vw !important;
        max-width: 46vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 64px 0 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        background: #fff !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 1020 !important;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s, box-shadow 0.3s ease !important;
        box-shadow: none !important;
    }
    body .header-container #navbar-nav.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s, box-shadow 0.3s ease !important;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45), -6px 0 24px rgba(0, 0, 0, 0.2) !important;
    }
    body.mobile-menu-open { overflow: hidden !important; }
    body.mobile-menu-open #whatsapp-widget { display: none !important; }

    /* Contact page's old dark layer used to sit on top of the menu */
    body .menu-overlay { display: none !important; }
    /* "Donate Now" only appeared in some menus */
    body #navbar-nav .mobile-only-action { display: none !important; }

    body #navbar-nav #menu-close {
        position: absolute !important;
        top: 14px !important;
        right: 10px !important;
        left: auto !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--soch-red) !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1 !important;
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.35) !important;
        transform: none !important;
    }

    body #navbar-nav > li {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: none !important;
        border: 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    body #navbar-nav > li:last-of-type { border-bottom: 0 !important; }

    body #navbar-nav > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px 14px 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #2c3e50 !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 15.5px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-shadow: none !important;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    /* page-specific underlines and highlights are replaced by .soch-current */
    body #navbar-nav > li > a::before { display: none !important; }
    body #navbar-nav > li:not(.dropdown) > a::after { display: none !important; }

    /* the page you are on */
    body #navbar-nav > li > a.soch-current {
        color: var(--soch-red) !important;
        background: #fdeeec !important;
        text-decoration: underline !important;
        text-decoration-thickness: 3px !important;
        text-underline-offset: 7px !important;
        text-decoration-color: var(--soch-red) !important;
    }
    /* tap feedback */
    body #navbar-nav a:active,
    body #navbar-nav a.is-tapped {
        color: var(--soch-red) !important;
        background: #fbd9d3 !important;
    }

    /* Our Team / Downloads: arrow and sub-menu */
    body #navbar-nav > li.dropdown > a::after {
        content: '\25BE' !important;
        display: inline-block !important;
        position: static !important;
        margin: 0 !important;
        border: 0 !important;
        font-size: 13px !important;
        color: inherit !important;
        transform: none !important;
        transition: transform 0.2s ease !important;
    }
    body #navbar-nav > li.dropdown.open > a::after { transform: rotate(180deg) !important; }
    body #navbar-nav > li.dropdown.open > a { color: var(--soch-red) !important; }

    body #navbar-nav .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 0 6px !important;
        background: #fafafa !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    body #navbar-nav .dropdown-menu::before { display: none !important; }
    body #navbar-nav > li.dropdown.open > .dropdown-menu { display: block !important; }
    body #navbar-nav .dropdown-menu li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; }
    body #navbar-nav .dropdown-menu a {
        display: block !important;
        margin: 0 !important;
        padding: 10px 8px 10px 16px !important;
        background: transparent !important;
        color: #5d6778 !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        border: 0 !important;
    }
    body #navbar-nav .dropdown-menu a::before,
    body #navbar-nav .dropdown-menu a::after { display: none !important; }
    body #navbar-nav .dropdown-menu a i { display: none !important; }
}
@media (max-width: 370px) {
    body #navbar-nav > li > a { font-size: 14.5px !important; padding-left: 12px !important; }
    body #navbar-nav .dropdown-menu a { font-size: 12px !important; padding-left: 14px !important; padding-right: 6px !important; }
}

/* ---------- No breadcrumbs ("Home / Our Mission") on any page ---------- */
.page-header .breadcrumb, .breadcrumb { display: none !important; }

/* ---------- Mobile proportions ---------- */
@media (max-width: 767px) {
    body h1 { font-size: 28px !important; line-height: 1.25 !important; }
    body h2 { font-size: 24px !important; line-height: 1.3 !important; }
    /* Contact page: columns used to be forced wider than the phone */
    body .contact-container { grid-template-columns: minmax(0, 1fr) !important; }
}