/* ===== Matrangal Trust - Custom Site Styles ===== */

/* Progress bar color fix */
.progress-bar {
    background-color: #e85d04;
}

/* Service item hover */
.service-item:hover,
.causes-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Page header spacing fix (behind fixed navbar) */
.page-header {
    padding-top: 100px;
}

/* Spinner hide after load */
#spinner.show {
    display: flex !important;
}

/* Footer link styles */
footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s;
}

footer a:hover {
    color: #e85d04;
}

/* Form focus outline */
.form-control:focus,
.form-select:focus {
    outline: none;
}

/* Quick amount button active state */
.quick-amount-btn.btn-primary {
    background-color: #e85d04;
    border-color: #e85d04;
    color: white;
}

/* Team member image uniform size */
.team-item img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

/* Carousel caption mobile sizing moved into the unified #hero-slide
   768px breakpoint below, so it changes together with the container
   height (previously split across two different breakpoints -- 576px vs
   768px -- which left a gap where the shorter container kept full-size
   desktop text/padding and overflowed). */

/* Hero carousel: single source of truth for height (previously the outer
   <section>, .carousel-inner's inline style, and .carousel-item all set
   their own height independently, which could disagree and leave blank
   space). Only .carousel-inner sets an explicit height now; everything
   else fills 100% of it. Explicit z-index guarantees the caption always
   renders above the slide image, regardless of DOM/stacking ambiguity. */
#hero-slide .carousel-inner {
    height: 85vh;
    min-height: 540px;
}

#hero-slide .carousel-item {
    height: 100%;
}

#hero-slide .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#hero-slide .carousel-caption {
    z-index: 2;
}

@media (max-width: 768px) {
    /* Height intentionally left unchanged from desktop (85vh / 540px, set
       above) -- per explicit request, the container stays the same on
       mobile; only the caption's CONTENT is pared down below, to title
       only, so the photo has as much visible room as possible. */

    /* Caption: the desktop version uses fixed inline sizes (3rem side
       padding, 2.2rem heading, 600px paragraph max-width) that overflow a
       narrow viewport horizontally -- title was getting clipped at the
       screen edge rather than wrapping. */
    #hero-slide .carousel-caption {
        padding: 0.85rem 1.2rem 1.2rem !important;
        max-width: 100%;
        overflow-wrap: break-word;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }

    #hero-slide .carousel-caption h1 {
        font-size: 1.35rem !important;
        line-height: 1.2;
        margin-bottom: 0 !important;
    }

    /* Title only on mobile -- description and buttons both hidden so the
       caption stays a slim strip and the photo keeps most of the height. */
    #hero-slide .carousel-caption p,
    #hero-slide .carousel-caption .d-flex.flex-wrap {
        display: none;
    }
}