/*-----------------------------------------------------------------------------

    Upthrust Humanitarian Initiative — Brand Overrides
    Loaded after style.css / responsive.css.
    Brand palette: #090f88 (deep blue), #00aeef (sky blue), #000c66 (navy), #ffffff (white)

-----------------------------------------------------------------------------*/

/* ---------- Logo preloader ---------- */
.preloader {
    background-color: #ffffff !important;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader .preloader-inner {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader .preloader-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(9, 15, 136, 0.12);
    border-top-color: #00aeef;
    border-right-color: #090f88;
    animation: uhi-spin 1.1s linear infinite;
}

.preloader .preloader-logo {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 4px #ffffff;
    animation: uhi-pulse 1.6s ease-in-out infinite;
}

.preloader .preloader-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@keyframes uhi-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes uhi-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.93); opacity: 0.85; }
}

/* ---------- Top bar ---------- */
.top-bar {
    background: #090f88;
    color: #ffffff;
}
.top-bar .top-bar-text p,
.top-bar .contact-info li {
    color: #e6f7ff;
}
.top-bar .contact-info li span {
    color: #00aeef;
}
.top-bar .thm-btn.donate-box-btn {
    background: #00aeef;
}
.top-bar .thm-btn.donate-box-btn:hover {
    background: #ffffff;
    color: #090f88;
}

/* ---------- Sticky nav ---------- */
.theme_menu {
    background: #ffffff;
}
.theme_menu.stricky.stricky-fixed {
    box-shadow: 0 2px 20px rgba(9, 15, 136, 0.12);
}
.defaultmainmenu-menu > li > a {
    color: #000c66;
    /* style.css sets `padding: 40px 16px` — sized for a much taller
       hero-style desktop header. With the logo capped at 60px, that made
       each link over 100px tall and the whole bar look oversized. */
    padding-top: 18px;
    padding-bottom: 18px;
}
.main-logo {
    /* style.css's `margin: 27px 0` was the other half of the oversized bar
       — at 114px tall (60px logo + 54px margin) it was actually taller
       than the nav links above, so trimming just the links wouldn't have
       shrunk the bar at all. */
    margin: 15px 0;
}
.defaultmainmenu-menu > li:hover > a,
.defaultmainmenu-menu > li.active > a {
    color: #00aeef;
}
.main-logo img {
    max-height: 60px;
    width: auto;
}

/* style.css's `.nav_side_content .social-icon li a { color: #fff }` was
   written for the original semi-transparent dark header; the header
   background here is solid white at every scroll position (rule above),
   so those icons render white-on-white and disappear entirely until the
   scrolled/sky-blue state further down re-colors them. */
.theme_menu .nav_side_content .social-icon li a {
    color: #000c66;
}
.theme_menu .nav_side_content .social-icon li a:hover {
    color: #00aeef;
}

/* Scrolled state: the sticky bar itself turns brand sky-blue (#00aeef, set
   in style.css .theme_menu.stricky-fixed), so anything that was also
   sky-blue needs to switch to white here or it disappears into the bar. */
.theme_menu.stricky.stricky-fixed .defaultmainmenu-menu > li:hover > a,
.theme_menu.stricky.stricky-fixed .defaultmainmenu-menu > li.active > a {
    color: #ffffff;
}
.theme_menu.stricky.stricky-fixed .defaultmainmenu .showhide span {
    background: #ffffff;
}
.theme_menu.stricky.stricky-fixed .nav_side_content .social-icon li a {
    color: #ffffff;
}
.theme_menu.stricky.stricky-fixed .nav_side_content .social-icon li a:hover {
    color: #000c66;
}

/* ---------- Section title accents ---------- */
.section-title h2 .thm-color,
.thm-color {
    color: #00aeef;
}

/* ---------- Focus-area / program cards ---------- */
.focus-area-card {
    background: #ffffff;
    border-radius: 6px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(9, 15, 136, 0.08);
    transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
}
.focus-area-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(9, 15, 136, 0.16);
}
.focus-area-card .icon_box {
    width: 74px;
    height: 74px;
    line-height: 74px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #090f88, #00aeef);
    color: #ffffff;
    font-size: 30px;
}
.focus-area-card h4 {
    color: #000c66;
    margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.thm-btn {
    letter-spacing: .5px;
}
.thm-btn.style-2 {
    background: #000c66;
}
.thm-btn.style-2:hover {
    background: #00aeef;
}

/* ---------- Stat / impact strip ---------- */
.fact-counter-2 {
    background-color: #090f88 !important;
    background-blend-mode: multiply;
}
.fact-counter-2 .count-text,
.fact-counter-2 .counter-title {
    color: #ffffff;
}
.fact-counter-2 .icon i {
    color: #00aeef;
}

/* ---------- Footer ---------- */
.main-footer {
    background: #000c66 !important;
}
.main-footer .footer-widget .section-title h4 {
    color: #ffffff;
}
.main-footer .link-column li a,
.main-footer .contact-column .contact-info li,
.main-footer .about-column .text p,
.main-footer .post-column .post-info {
    color: #cfd6f7;
}
.main-footer .contact-column .contact-info li span {
    color: #ffffff;
}
.main-footer .link-column li a:hover,
.main-footer .link-column li a:hover:before,
.main-footer .about-column .default_link {
    color: #00aeef;
}
.main-footer .social-icon li a {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.main-footer .social-icon li a:hover {
    background: #00aeef;
    color: #000c66;
}
.footer-bottom {
    background: #090f88 !important;
    color: #cfd6f7;
}
.footer-bottom a {
    color: #ffffff;
}
.footer-bottom .get-text a {
    color: #00aeef;
}

/* ---------- Scroll-to-top ---------- */
.scroll-top {
    background: #00aeef !important;
    color: #ffffff !important;
}
.scroll-top:hover {
    background: #090f88 !important;
}

/* ---------- Events page: category groups, filter, pagination ---------- */
.event-group-title {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
    padding-bottom: 12px;
    color: #000c66;
    font-weight: 700;
}
.event-group-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: #00aeef;
}
.event-filter .tab-buttons li {
    user-select: none;
}
.event-card {
    display: block;
}
.event-empty {
    padding: 30px 0;
    text-align: center;
    color: #949494;
}
.event-pager {
    text-align: center;
}
.event-pager li a {
    cursor: pointer;
}

/* ==========================================================================
   Intrinsic image sizing
   ==========================================================================
   Every <img> now carries width/height attributes so the browser can reserve
   the correct box before the file arrives (this is what removes layout shift
   / CLS). style.css already caps images with max-width:100%, but without a
   matching height:auto a narrow container would squeeze the width while the
   height attribute held firm, stretching the picture.

   brand.css loads last, so this wins the tie against style.css's bare `img`
   rule. It deliberately stays at single-element specificity: any component
   that sets a deliberate fixed height (.event-section .img-holder img and
   friends) is more specific and still overrides this. */
img {
    height: auto;
}

/* ==========================================================================
   Consistent image-card sizing
   ==========================================================================
   Real uploaded photos come in whatever aspect ratio the camera/phone shot
   them at. Left to `height: auto` (above), cards in the same row end up
   different heights depending on each photo's native shape. Every card
   component below gets a fixed height + object-fit: cover, so the box stays
   identical across a row and the photo crops to fill it instead of
   stretching or leaving gaps. Logos (partner strip) use `contain` instead,
   since cropping a logo can cut off part of it. */
.about-2 .single-item .img-box img,
.urgent-cause2 .item figure.img-box img,
.about .left-column .img-box img,
.gallery .inner-box img,
.classic-blog-news .img-holder img,
.default-blog-news .img-holder img,
.event-section .item .img-holder img,
.team-style-1 .single-team-member .img-box img,
.team-style-2 .item .img-box img,
.author-thumb img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.about-2 .single-item .img-box img { height: 210px; }
.urgent-cause2 .item figure.img-box img { height: 240px; }
/* style.css makes .urgent-cause2 .img-box `display: inline-block` (it was
   designed as a small inline badge on the old donation-progress cards).
   That's a shrink-to-fit box, so the `width: 100%` above can't resolve
   against it — the browser falls back to auto-sizing the image from its
   own intrinsic aspect ratio instead, which for a portrait source photo
   in a landscape card renders far narrower than the text block below it.
   Forcing the figure to a normal full-width block fixes that for every
   photo regardless of its native orientation. */
.urgent-cause2 .item figure.img-box {
    display: block;
    width: 100%;
}
.about .left-column .img-box img { height: 220px; }
.gallery .inner-box img { height: 290px; }
.classic-blog-news .img-holder img,
.default-blog-news .img-holder img { height: 325px; }
.event-section .item .img-holder img { height: 250px; }
.team-style-1 .single-team-member .img-box img { height: 220px; }
.team-style-2 .item .img-box img { height: 270px; }
.author-thumb img { height: 80px; }

/* team-style-3's circular avatar is a fixed 220px frame (.img-box) with the
   190px photo centered inside it via 15px margins (style.css) — width:100%
   here would fight that margin and blow the photo out past the circle, so
   it keeps its own fixed pixel box instead of the width:100% pattern above. */
.team-style-3 .single-team-member .img-box img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    object-position: center;
}

.clients-section .item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   Mobile header: logo, hamburger and social icons in one row; the link
   list itself stays a normal hidden-until-tapped dropdown
   ==========================================================================
   style.css positions .right-column with `position:absolute; right:-30px`
   and leaves .col-md-3 / .menu-column as plain Bootstrap columns — that's
   fine at desktop widths where .defaultmainmenu floats right, but neither
   of those rules has a mobile fallback, so below 992px the three pieces
   (logo, nav/hamburger, social icons) just stack as separate full-width
   blocks instead of sitting in one row.

   An earlier pass here forced .defaultmainmenu-menu to `display: flex
   !important`, which — because it's a stylesheet rule with !important —
   overrode jQuery's own inline `display:none`/`display:block` toggle
   (menu.js's showMobileBar()), so the link list was stuck permanently
   visible as a horizontally-scrolling row instead of hiding until the
   hamburger is tapped. That rule is gone: menu.js's own vertical,
   one-link-per-line dropdown (menu.css lines ~460-495) is exactly the
   standard hamburger pattern and needs no override, just something to
   position it under the header row. */
/* ==========================================================================
   Nav header row: one shared vertical center for logo, nav links and
   social icons, at every width
   ==========================================================================
   style.css lays this out with floats (.col-md-3 logo, .col-md-9 nav
   floated right inside it) plus an absolutely-positioned .right-column for
   the social icons — three independently-positioned pieces, each with its
   own unrelated margin/padding (logo: 27px margin, nav links: 40px
   padding, .nav_side_content: 40px top margin), so they land at three
   different heights instead of sharing a center line — confirmed by
   measuring their centers at 45px/29px/51px respectively. Flexbox with
   align-items: center fixes that at any width; .right-column has to come
   out of `position: absolute` to become a real flex item instead of
   escaping the row into its own coordinate space. With all three now
   sized to their own content (flex: 0 0 auto) instead of Bootstrap's
   25%/75% column split, `justify-content: space-between` spaces them
   logo-left / nav-middle / icons-right — a standard, modern arrangement
   that no longer depends on the old column-width math lining up with
   .right-column's `right: -30px` offset. */
.theme_menu .container > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
}
/* Bootstrap's `.row` clearfix (`:before{display:table}` / `:after{clear:both}`)
   is meant for a float-based row — once the row is `display:flex` those
   two pseudo-elements become real (invisible) flex items themselves, with
   the default `order: 0`, so on mobile (where the three columns are
   reordered below) they'd sort ahead of every real child. */
.theme_menu .container > .row::before,
.theme_menu .container > .row::after {
    display: none;
}
.theme_menu .col-md-3,
.theme_menu .menu-column,
.theme_menu .right-column {
    float: none;
    width: auto;
    min-height: 0;
    position: static;
    padding: 0;
    flex: 0 0 auto;
}
.theme_menu .nav_side_content {
    margin-top: 0;
}

@media (max-width: 991px) {
    .theme_menu .container > .row {
        flex-wrap: nowrap;
        padding: 12px 0;
    }
    .theme_menu .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Desktop keeps the natural DOM order (logo, nav, icons) left-to-right.
       Mobile wants the hamburger last instead of in its DOM position
       (between the logo and the icons), so it needs an explicit reorder. */
    .theme_menu .col-md-3 { order: 1; }
    .theme_menu .right-column { order: 2; }
    .theme_menu .menu-column { order: 3; }

    /* style.css gives .main-logo a 27px top/bottom margin (sized for the
       tall desktop header), and responsive.css's own mobile rule nudges it
       down further with `position: relative; top: 22px`. Both were sized
       for the old stacked mobile header and pushed the logo out of
       vertical alignment with the hamburger and social icons in the
       flex row. */
    .theme_menu .main-logo {
        margin: 0;
        position: static;
        top: auto;
    }
    .theme_menu .main-logo img {
        max-height: 40px;
    }

    /* The hamburger sits inline in the row instead of floating.
       responsive.css's `.defaultmainmenu-responsive.defaultmainmenu` rule
       adds a 15px bottom padding (room for the old stacked dropdown below
       it) — that padding was making the nav column taller than the
       hamburger itself, so align-items: center on the row centered the
       button's *box* rather than the button, leaving it sitting high. */
    .theme_menu .defaultmainmenu-responsive.defaultmainmenu {
        padding-bottom: 0;
        /* responsive.css also makes this `position: relative`, which makes
           it (not .container further up) the nearest positioned ancestor
           for the dropdown below — so the dropdown's `left:0; right:0`
           resolved against this shrink-wrapped, hamburger-width box
           instead of spanning the header. Back to static so .container
           (also position:relative, further up) is what it sizes against. */
        position: static;
        float: none;
    }
    .theme_menu .defaultmainmenu-responsive .showhide {
        position: static;
        display: block;
        width: 26px;
        height: 22px;
    }

    /* Social icons: undo the absolute/floated desktop positioning so they
       sit in the flex row instead of overlapping the logo or the edge. */
    .theme_menu .nav_side_content .social-icon li a {
        margin-right: 10px;
        font-size: 15px;
    }

    /* Dropdown panel: menu.js toggles this with inline display:none/block
       (and slideDown/slideUp) — no !important here, so that toggle keeps
       working. It's absolutely positioned against .theme_menu .container
       (the nearest `position:relative` ancestor) so it spans the full
       header width and drops down below the row, instead of being boxed
       into the hamburger's own shrink-to-fit column width. */
    .theme_menu .defaultmainmenu-responsive .defaultmainmenu-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    }
    .theme_menu .defaultmainmenu-responsive .defaultmainmenu-menu > li > a {
        color: #000c66;
    }
}

/* ---------- Team member bio line ---------- */
.member-bio {
    font-size: 13px;
    color: #949494;
    font-style: italic;
    margin-top: 8px;
    line-height: 1.5;
}

/* ---------- Event cards: stack on narrow screens ---------- */
/* style.css floats the photo and text side by side at 47%/53% and caps the
   card at max-height:340px — fine on desktop, but on phones that squeezes
   both columns too narrow to read. Below 767px the photo goes full width on
   top and the text flows below it, so the card grows to fit its content. */
@media (max-width: 767px) {
    .event-section .item {
        max-height: none;
    }
    .event-section .item .img-column,
    .event-section .item .text-column {
        width: 100%;
        float: none;
    }
    .event-section .item .img-holder img {
        height: 220px;
    }
    .event-section .item .lower-content {
        min-height: 0;
        padding: 20px 15px 20px;
    }
}

/* team-style-3 cards are `display: inline-block` (style.css) so the box
   shrink-wraps to its longest line of text (name length varies a lot across
   real staff names) — the photo above is now a fixed 190x190, but the card
   itself was still ending up a different width per person. Force it to
   fill its Bootstrap column so every card in a row is the same width. */
.team-style-3 .single-team-member {
    display: block;
    width: 100%;
}

/* ---------- "Join our mission" call-out band, above the footer ---------- */
/* style.css lays the heading and button out with float_left/float_right and
   no width constraint on the heading, so the floated <h4> shrinks-to-fit
   almost the full row and pushes the button onto its own line below. Flex
   keeps them on one row and only wraps if the viewport is too narrow. */
.call-out .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px 30px;
}
.call-out .container .float_left {
    float: none;
    flex: 1 1 320px;
}
.call-out .container .float_right {
    float: none;
    flex: 0 0 auto;
}
.call-out h4 {
    margin-top: 0;
}
.call-out .thm-btn.style-3 {
    margin-top: 0;
}

/* ---------- Footer: rebalanced 3-column layout ---------- */
/* Was a nested 2x2 "big-column" grid (About | Useful Links / Follow Us |
   Get In Touch). With the Useful Links widget removed, About Us sat alone
   in a half-empty row above a fully-populated one. Flattened to three even
   columns side by side (About | Get In Touch | Follow Us) so there's no
   empty gap, and it collapses cleanly to 2-then-1 on tablet, 1-per-row on
   phones via the col-md-4/col-sm-6/col-xs-12 classes already on each. */
.main-footer .footer-logo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.main-footer .about-column .text p {
    color: #cfd6f7;
}

/* ---------- WhatsApp form hand-off (js/whatsapp-forms.js) ---------- */
/* No form on this site has a backend, so every one of them opens a
   pre-filled WhatsApp chat instead of actually submitting anywhere — this
   note makes that plain before someone hits Send, rather than surprising
   them with a new tab. */
.whatsapp-note {
    font-size: 13px;
    color: #949494;
    font-style: italic;
    margin-bottom: 12px;
}
.whatsapp-note i {
    color: #25d366;
    font-style: normal;
    margin-right: 4px;
}