/* ============================
   SHARED STYLES
   Used across all public pages: home.html, about.html, program.html, gallery.html
   (Reset, Navigation, Footer, CTA Banner)
============================ */

/* Reserves scrollbar space on every page, even ones short enough not to
   need it — prevents the whole layout shifting left/right when
   navigating between a tall page and a short one. scrollbar-gutter
   alone (without forcing overflow-y: scroll) reserves that space
   WITHOUT showing a permanently-visible scrollbar track on pages that
   don't actually need to scroll. */
html {
    scrollbar-gutter: stable;
}

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

body {
    font-family: 'Montserrat', sans-serif;
}

/* NAVIGATION */
.uh-navbar {
    width: 100%;
    height: 116px;
    background: #FFFFFF;
    box-shadow: 0 8px 17.3px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: relative;
    z-index: 10;
}

/* Fades the rest of the page in on load, while the nav bar itself stays
   put and renders immediately — targets every sibling AFTER .uh-navbar
   specifically (not body itself), since animating body's opacity would
   visually fade the nav too, as its child. */
.uh-navbar ~ * {
    animation: sikContentFadeIn 0.3s ease;
}
@keyframes sikContentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.uh-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uh-logo-icon {
    width: 64px;
    height: 63px;
    object-fit: contain;
}

.uh-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #343866;
}

.uh-nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}

.uh-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #656565;
    text-decoration: none;
    transition: color 0.35s ease;
}

.uh-nav-link.active {
    color: #F47A20;
}

.uh-nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.uh-login-link {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #656565;
    text-decoration: none;
}

.uh-login-link svg {
    width: 33.75px;
    height: 33.75px;
    flex-shrink: 0;
}

.uh-volunteer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176px;
    height: 53px;
    padding: 18px 46px 15px 45px;
    gap: 10px;
    background: #F47A20;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #FFFBFB;
    text-decoration: none;
    white-space: nowrap;
}


/* FOOTER */
.uh-footer {
    background: #002148;
    box-shadow: 0 -19px 16.1px rgba(0, 0, 0, 0.25);
    padding: 50px 5% 24px;
}

.uh-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.uh-footer-brand {
    flex: 2 1 300px;
}

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

.uh-footer-logo-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.uh-footer-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

.uh-footer-tagline {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 156%;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.uh-footer-desc {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 156%;
    color: #FFFFFF;
    max-width: 340px;
}

.uh-footer-col {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uh-footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: #FDD01E;
    margin-bottom: 4px;
}

.uh-footer-col a {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 156%;
    color: #FFFFFF;
    text-decoration: none;
}

.uh-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uh-footer-divider {
    max-width: 1400px;
    margin: 40px auto 20px;
    border-top: 2px solid #4E4D4D;
}

.uh-footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.uh-footer-copyright {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 156%;
    color: #FFFFFF;
}

.uh-footer-legal {
    display: flex;
    gap: 32px;
}

.uh-footer-legal a {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 156%;
    color: #FFFFFF;
    text-decoration: none;
}

@media (max-width: 900px) {
    .uh-footer-top {
        flex-direction: column;
    }

    .uh-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* CTA BANNER */
.uh-cta {
    background: #F47A20;
    padding: 40px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.uh-cta-title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: #F8F8F8;
    flex: 1 1 250px;
}

.uh-cta-title em {
    font-style: italic;
    color: #FFFFFF;
}

.uh-cta-desc {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #FFFFFF;
    flex: 2 1 300px;
    max-width: 400px;
}

.uh-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #002148;
    border-radius: 7px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #FFFBFB;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .uh-cta {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================
   PHOTO LIGHTBOX — click any photo (Gallery grid, or elsewhere reusing
   the same pattern) to view it full-size in an overlay.
   ============================ */
.uh-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 40px;
}
.uh-lightbox-overlay--open {
    display: flex;
}
.uh-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}
.uh-lightbox-close {
    position: fixed;
    top: 24px;
    right: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uh-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Optional "Download" action inside the lightbox - only shown when
   openLightbox() is called with a filename (currently: the donation QR
   code preview). Ordinary photo lightbox use never shows this. */
.uh-lightbox-download {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #F47A20;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.uh-lightbox-download:hover {
    background: #DD6810;
}

/* Clickable photos "pop" on hover, then open full-size in a lightbox
   when clicked. Lives here (not gallery.css) since this same class is
   now reused across the Gallery, Home, About, and Program pages.
   position:relative + z-index keep the scaled-up photo above its
   neighbours in the grid instead of being clipped by them. */
.gl-photo--clickable {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
.gl-photo--clickable:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 28px rgba(244, 122, 32, 0.45);
    z-index: 2;
}

/* Continuously-scrolling photo belts (Home page, Program page) pause on
   hover so a photo can actually be looked at / clicked, instead of
   sliding out from under the cursor mid-hover. */
.uh-photos-belt:hover,
.pg-photo-belt:hover {
    animation-play-state: paused;
}

/* Photo belts (Home page, Program page) clip horizontally via
   overflow:hidden so the continuous scroll's off-screen portion stays
   hidden — but that same overflow:hidden was also clipping the top/
   bottom of a photo's hover "pop" scale effect, since the wrapper's
   height exactly matched the photo's resting height with zero room to
   grow into. Adding vertical padding gives the scaled-up photo
   somewhere to go without affecting the horizontal scroll/mask at all. */
.uh-photos-belt-wrapper,
.pg-photo-belt-wrapper {
    padding: 14px 0;
}

/* About Us "Values" icons — same situation as the Home page's mission/
   vision/values and stat icons: about.css (not directly editable here)
   likely has a leftover ::before placeholder dot from before real SVG
   icons existed. Neutralizing it here rather than guessing at and
   rewriting the rest of that container's rules blind. */
.ab-value-icon::before {
    display: none;
}
.ab-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab-value-icon svg {
    width: 100%;
    height: 100%;
    max-width: 42px;
    max-height: 42px;
}

/* ============================
   THIN SCROLLBAR — applies to every public page's main window
   scrollbar (Home, About, Program, Gallery, and the legal pages), same
   slimmer/modern look used on the admin Story modal, rather than the
   default bulky browser scrollbar. Lives here (not home.css) since
   shared.css is the one file actually loaded on all of them.
   ============================ */
html {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #D1A574 transparent;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #D1A574;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F47A20;
}

/* ============================================================
   PUBLIC SITE — PHONE NAVIGATION  (<= 860px)
   ============================================================
   The nav links sat in a fixed 40px-gap row that ran off the right of
   a phone screen: HOME and ABOUT US were visible, PROGRAM and GALLERY
   were not, and nothing revealed them. Below 860px they collapse
   behind a menu button and drop down as a full-width panel. The button
   is injected by ensurePublicMobileNav() in script.js.

   NOTE ON SPECIFICITY — these selectors are deliberately written as
   `nav.uh-navbar` and `.uh-navbar .uh-nav-links` rather than the bare
   class. Every public page loads shared.css FIRST and then its own
   stylesheet (home.css, about.css, gallery.css...), several of which
   carry their own older mobile-nav rules -- home.css, for one, sets
   .uh-navbar { flex-wrap: wrap } below 900px. A plain `.uh-nav-links`
   here would lose to those on source order alone. The extra
   specificity makes this block the one that decides.
   ============================================================ */

.uh-nav-toggle { display: none; }

@media (max-width: 860px) {

    nav.uh-navbar {
        height: 72px;
        min-height: 72px;
        padding: 0 14px;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .uh-navbar .uh-logo { flex-shrink: 1; min-width: 0; }
    .uh-navbar .uh-logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
    .uh-navbar .uh-logo-text {
        font-size: 14px;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .uh-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        order: 3;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        background: #FFFFFF;
        color: #343866;
        cursor: pointer;
        padding: 0;
    }

    .uh-nav-toggle:active { background: #F1F5F9; }

    .uh-navbar .uh-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        order: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        padding: 4px 0 8px;
        background: #FFFFFF;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
        border-top: 1px solid #EDF2F7;
    }

    .uh-navbar .uh-nav-links--open { display: flex; }

    .uh-navbar .uh-nav-link {
        justify-content: flex-start;
        font-size: 15px;
        padding: 14px 20px;
    }

    .uh-navbar .uh-nav-link + .uh-nav-link { border-top: 1px solid #F3F6FA; }

    /* Sign-in and Volunteer stay in the bar rather than being buried in
       the menu -- they're the two things a visitor most often wants.
       The word "Login" is dropped so the icon alone stands for it; at
       this width the logo plus three controls will not otherwise fit on
       one line. */
    .uh-navbar .uh-nav-right { order: 2; gap: 8px; margin-left: auto; flex-shrink: 0; }
    .uh-navbar .uh-login-link { gap: 0; }
    .uh-navbar .uh-login-link span { display: none; }
    .uh-navbar .uh-login-link svg { width: 30px; height: 30px; }
    .uh-navbar .uh-volunteer-btn { padding: 9px 14px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 600px) {
    .uh-navbar .uh-logo-text { font-size: 12px; }
    .uh-navbar .uh-logo-icon { width: 32px; height: 32px; }
    .uh-navbar .uh-volunteer-btn { padding: 8px 11px; font-size: 11px; }
}