/* ==========================================================
   SWEET VALLEY UI REFINEMENT
   Consistent visual system across public pages.
   ========================================================== */
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    color: #33453d;
    background: #fff;
    line-height: 1.7;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Saira', sans-serif; color: var(--primary-dark); line-height: 1.18; }
h1 { letter-spacing: -0.025em; }
p { color: #5d6d66; }
img { max-width: 100%; }

/* Consistent section rhythm */
.container-xxl.py-5,
.container-fluid.py-5 { padding-top: 5.25rem !important; padding-bottom: 5.25rem !important; }
.container-xxl.my-5,
.container-fluid.my-5 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

/* Page hero */
.page-header {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    padding-top: 10.5rem !important;
    padding-bottom: 4.5rem !important;
    background-position: center;
    overflow: hidden;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,34,23,.82), rgba(10,43,30,.52));
    pointer-events: none;
}
.page-header > .container { position: relative; z-index: 1; }
.page-header h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; text-shadow: 0 8px 30px rgba(0,0,0,.2); }
.page-header h2, .page-header h5 { max-width: 780px; margin-inline: auto; opacity: .95; }
.breadcrumb { font-size: .92rem; }

/* Pills / section labels */
.d-inline-block.rounded-pill.bg-secondary {
    box-shadow: 0 8px 20px rgba(224,168,46,.18);
    font-weight: 700;
    letter-spacing: .03em;
}

/* Buttons */
.btn {
    border-radius: 12px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding-inline: 1.15rem;
    box-shadow: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-color: var(--primary);
    box-shadow: 0 10px 22px rgba(27,94,32,.18);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}
.btn-outline-primary { border-width: 1.5px; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-custom-green {
    background: var(--primary);
    color: #fff !important;
    border: 1px solid var(--primary);
}
.btn-custom-green:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(224,168,46,.55);
    outline-offset: 3px;
}

/* Cards */
.service-item, .impact-card, .team-item, .testimonial-item, .gallery-item,
.causes-item, .faith-highlight, .left-sidebar .bg-white, .stat-box {
    border-radius: 18px !important;
}
.service-item, .impact-card, .team-item, .causes-item, .testimonial-item, .gallery-item {
    box-shadow: 0 12px 40px rgba(10,43,30,.08) !important;
    border: 1px solid rgba(10,43,30,.07);
}
.service-item, .impact-card, .team-item { transition: transform .25s ease, box-shadow .25s ease; }
.service-item:hover, .impact-card:hover, .team-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(10,43,30,.13) !important;
}
.service-item img, .impact-card img, .team-item img, .gallery-item img, .causes-item img { object-fit: cover; }

/* Hero carousel */
#header-carousel .carousel-item { min-height: 640px; }
#header-carousel .carousel-item > img { height: 640px; object-fit: cover; object-position: center; filter: saturate(.93); }
#header-carousel .carousel-caption { background: linear-gradient(90deg, rgba(5,34,23,.78), rgba(10,43,30,.42)); }
#header-carousel .carousel-caption .container { max-width: 1140px; }
#header-carousel .carousel-caption h1 { font-size: clamp(2.5rem, 6vw, 5.3rem); font-weight: 700; line-height: 1.02; }
#header-carousel .carousel-caption p { max-width: 720px; margin-inline: auto; font-size: 1.1rem !important; }

/* Content imagery */
.position-relative.overflow-hidden { border-radius: 20px; }
.position-relative.overflow-hidden img,
.side-image img { transition: transform .45s ease; }
.position-relative.overflow-hidden:hover img, .side-image:hover img { transform: scale(1.025); }

/* Forms */
.form-control, .form-select {
    min-height: 50px;
    border: 1px solid #d8e2dc;
    border-radius: 12px;
    padding: .7rem .95rem;
    color: #24362f;
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(46,125,50,.7);
    box-shadow: 0 0 0 .2rem rgba(46,125,50,.10);
}
textarea.form-control { min-height: 140px; resize: vertical; }
label { font-weight: 600; color: var(--primary-dark); margin-bottom: .45rem; }

/* Tabs */
.nav-tabs, .nav-pills { gap: .5rem; border: 0; }
.nav-tabs .nav-link, .nav-pills .nav-link {
    border: 1px solid #dbe5df !important;
    border-radius: 999px !important;
    color: var(--primary-dark);
    font-weight: 600;
    padding: .7rem 1.15rem;
    background: #fff;
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active,
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary) !important;
}

/* Tables */
table { border-collapse: separate !important; border-spacing: 0; }
.table { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(10,43,30,.06); }
.table thead th { background: var(--primary-dark); color: #fff; border: 0; padding: .9rem; }
.table td { padding: .85rem .9rem; vertical-align: middle; }

/* Footer */
.footer { border-top: 5px solid var(--secondary); }
.footer h5 { font-weight: 700; letter-spacing: .01em; }
.footer a { color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer a:hover { color: var(--secondary); }
.footer .btn-square { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }

/* Mobile */
@media (max-width: 991.98px) {
    .container-xxl.py-5, .container-fluid.py-5 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    #header-carousel .carousel-item { min-height: 560px; }
    #header-carousel .carousel-item > img { height: 560px; }
    .page-header { min-height: 300px; padding-top: 9rem !important; }
}
@media (max-width: 575.98px) {
    .container-xxl.py-5, .container-fluid.py-5 { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }
    .container { padding-inline: 18px; }
    .page-header { min-height: 255px; padding-top: 8.2rem !important; padding-bottom: 3.2rem !important; }
    .page-header h1 { font-size: 2.25rem; }
    #header-carousel .carousel-item { min-height: 500px; }
    #header-carousel .carousel-item > img { height: 500px; }
    #header-carousel .carousel-caption { padding-inline: 18px; }
    #header-carousel .carousel-caption h1 { font-size: 2.45rem; }
    #header-carousel .carousel-caption p { font-size: .98rem !important; margin-bottom: 1.75rem !important; }
    .btn { width: auto; }
    .display-6 { font-size: 1.9rem; }
    .service-item, .impact-card, .causes-item { margin-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Shared visual utility classes */
.gallery-item, .side-image { position: relative; overflow: hidden; }
.gallery-item::after, .side-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.48)); pointer-events:none; }
.gallery-overlay, .side-image > .position-absolute { z-index: 2; }
.impact-card i, .service-item i, .service-icon, .elderly-icon { color: var(--primary) !important; }
.stat-box { background:#fff; border:1px solid #e1e9e4; padding:1.25rem; box-shadow:0 10px 28px rgba(10,43,30,.06); }
.causes-item { background:#fff; }
.causes-item .text-center.p-4 { min-height: 310px; }
.causes-item .position-relative img { width:100%; height:230px; object-fit:cover; }
.testimonial-text { background:#fff; border:1px solid #e1e9e4; box-shadow:0 10px 28px rgba(10,43,30,.06); }
@media (max-width:575.98px){
    .causes-item .text-center.p-4 { min-height:0; }
    .causes-item .position-relative img { height:200px; }
}

/* ==========================================================
   Get Involved tabs: Bootstrap-independent UI
   ========================================================== */
.sv-involved-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
}
.sv-involved-tab {
    appearance: none;
    border: 1px solid #dbe5df;
    border-radius: 999px;
    background: #fff;
    color: var(--primary-dark);
    font: 600 0.98rem/1.2 'Inter', sans-serif;
    padding: .78rem 1.15rem;
    min-height: 48px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sv-involved-tab:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(10,43,30,.08);
}
.sv-involved-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-color: var(--primary);
    box-shadow: 0 10px 22px rgba(27,94,32,.16);
}
.sv-involved-tab:focus-visible {
    outline: 3px solid rgba(224,168,46,.55);
    outline-offset: 3px;
}
.sv-involved-pane[hidden] { display: none !important; }
.sv-involved-pane {
    background: #fff;
    border: 1px solid #e2eae5;
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 16px 40px rgba(10,43,30,.07);
}
@media (max-width: 575px) {
    .sv-involved-tabs { align-items: stretch; }
    .sv-involved-tab { width: 100%; }
    .sv-involved-pane { border-radius: 16px; padding: 1rem; }
}