/* =====================================================================
   JYDO — Site-wide typography & spacing polish
   ---------------------------------------------------------------------
   * Loaded LAST in <head> on every page so it refines the page styles.
   * Only fonts and spacing are touched — colours, layout, components
     and all PHP/JS behaviour stay exactly as before.
   * English text  -> Inter (body) / Poppins (headings)
     Bangla text   -> Hind Siliguri (picked automatically for Bangla
                      characters, because Inter/Poppins have no Bangla)
   ===================================================================== */

:root {
    --jydo-font-body: 'Inter', 'Hind Siliguri', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --jydo-font-head: 'Poppins', 'Hind Siliguri', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --jydo-font-bn:   'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', sans-serif;
}

/* ---------- 1. Fonts ---------- */
html body {
    font-family: var(--jydo-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3,
html body .h4, html body .h5, html body .h6,
html body .section-title, html body .navbar-brand,
html body .display-1, html body .display-2, html body .display-3,
html body .display-4, html body .display-5, html body .display-6 {
    font-family: var(--jydo-font-head);
    letter-spacing: -0.01em;
}

html body .navbar-nav .nav-link,
html body .btn,
html body .badge,
html body .dropdown-item {
    font-family: var(--jydo-font-head);
}

/* Form fields don't inherit fonts by default */
html body input, html body select, html body textarea,
html body button, html body .form-control, html body .form-select {
    font-family: var(--jydo-font-body);
}

/* Anything explicitly marked as Bangla uses the Bangla font first */
html body :lang(bn), html body .bn, html body .bangla {
    font-family: var(--jydo-font-bn);
    letter-spacing: 0;
    line-height: 1.75;
}

/* Keep icon fonts untouched */
html body .fa, html body .fas, html body .far, html body .fab,
html body .fa-solid, html body .fa-regular, html body .fa-brands,
html body [class^="fa-"], html body [class*=" fa-"] {
    letter-spacing: 0;
}

/* ---------- 2. Spacing: sections ---------- */
/* Bootstrap .py-5 = 3rem top + 3rem bottom -> two sections stacked gave
   ~96px of empty space. Trim it. */
html body section.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}
html body section.py-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
html body .mb-5 { margin-bottom: 2rem !important; }
html body .mt-5 { margin-top: 2rem !important; }

/* Page hero / banner blocks (were 80–100px padding + 40–50px margin) */
html body .page-header,
html body .events-hero,
html body .event-hero,
html body .training-hero,
html body .gallery-hero,
html body .contact-hero,
html body .business-hero,
html body .order-hero {
    padding-top: 3.25rem;
    padding-bottom: 3rem;
}
html body .about-hero,
html body .page-header,
html body .events-hero,
html body .event-hero,
html body .training-hero,
html body .gallery-hero,
html body .business-hero,
html body .order-hero {
    margin-bottom: 0.5rem;
}
html body .news-header {
    padding-top: 2.5rem;
    padding-bottom: 1.75rem;
}

/* Custom tall sections */
html body .program-highlights,
html body .impact-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
html body .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
html body .impact-cycle,
html body .chui-jhal-section,
html body .sustainability-section,
html body .cta-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
html body .impact-cycle,
html body .chui-jhal-section,
html body .product-showcase,
html body .donation-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
html body .order-form-container,
html body .order-confirmation {
    margin-bottom: 2rem;
}

/* ---------- 3. Spacing: headings & text ---------- */
html body .section-title {
    padding-bottom: 12px;
    margin-bottom: 1.25rem;
}
html body .lead { margin-bottom: 1rem; }

/* No dead space under the last line inside cards / boxes */
html body .card-body > :last-child,
html body .card > :last-child,
html body [class*="-card"] > :last-child,
html body [class*="-item"] > :last-child,
html body .carousel-caption > :last-child,
html body .notice-board > :last-child {
    margin-bottom: 0;
}

/* ---------- 4. Spacing: footer ---------- */
html body footer {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    margin-top: 0;
}
html body footer .footer-title { margin-bottom: 0.9rem; }
html body footer .copyright {
    margin-top: 1.25rem;
    padding-top: 1rem;
}

/* ---------- 5. Tablet & mobile ---------- */
@media (max-width: 991.98px) {
    html body .page-header,
    html body .events-hero,
    html body .event-hero,
    html body .training-hero,
    html body .gallery-hero,
    html body .contact-hero,
    html body .business-hero,
    html body .order-hero {
        padding-top: 2.5rem;
        padding-bottom: 2.25rem;
    }
    html body .program-highlights,
    html body .impact-section,
    html body .cta-section {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

@media (max-width: 767.98px) {
    html body section.py-5 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    html body section.py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    html body .mb-5 { margin-bottom: 1.5rem !important; }
    html body .mt-5 { margin-top: 1.5rem !important; }
    html body .mb-4 { margin-bottom: 1rem !important; }

    html body .page-header,
    html body .events-hero,
    html body .event-hero,
    html body .training-hero,
    html body .gallery-hero,
    html body .contact-hero,
    html body .business-hero,
    html body .order-hero {
        padding-top: 2rem;
        padding-bottom: 1.75rem;
    }
    html body .news-header {
        padding-top: 1.75rem;
        padding-bottom: 1.25rem;
    }
    html body .impact-cycle,
    html body .chui-jhal-section,
    html body .sustainability-section,
    html body .cta-section {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    html body .impact-cycle,
    html body .chui-jhal-section,
    html body .product-showcase,
    html body .donation-section,
    html body .program-highlights,
    html body .impact-section,
    html body .cta-section {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
    html body .section-title { margin-bottom: 1rem; }
    html body footer { padding-top: 2rem; }

    /* Justified text on a narrow phone creates big gaps between words
       (index page justifies every <p>). 'inherit' = normal alignment
       of the parent, so centred text stays centred. */
    html body p {
        text-align: inherit;
    }
}

/* ---------- 6. Cards that are full-height AND had a bottom margin
   (h-100 + margin pushed them 30px out of their row) ---------- */
@media (min-width: 768px) {
    html body .row > [class*="col-"] > .program-card.h-100 {
        margin-bottom: 0;
    }
}
@media (max-width: 767.98px) {
    html body .program-card { margin-bottom: 1rem; }
}