/*
 * Sirajul Huda v1.0.6
 * Form confirmation, translated alignment, full-height mobile navigation,
 * inline/bottom related stories, labelled pagination, and surface skins.
 */

/* Form confirmation with a direct WhatsApp continuation. */
.form-success-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 24px;
    padding: 18px 20px;
}

.form-success-alert > span {
    font-weight: 700;
}

.form-success-whatsapp {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid #a7d9bd;
    border-radius: 12px;
    background: #effaf4;
    color: #087a43;
    font-size: 12px;
    font-weight: 800;
}

.form-success-whatsapp i {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 50%;
    background: #18a957;
    color: #fff;
    font-size: 18px;
}

.form-success-whatsapp:hover {
    background: #18a957;
    color: #fff;
}

/* Google Translate must not change LTR pages into visually right-aligned text. */
html[lang="en"][dir="ltr"] .article-header .content-container,
html[lang="en"][dir="ltr"] .article-body,
html[lang="en"][dir="ltr"] .page-hero .site-container,
html[lang="en"][dir="ltr"] .unit-hero .site-container,
html[lang="en"][dir="ltr"] .hero-copy {
    direction: ltr !important;
    text-align: left !important;
}

html[lang="en"][dir="ltr"] .article-header h1,
html[lang="en"][dir="ltr"] .article-header p,
html[lang="en"][dir="ltr"] .article-meta,
html[lang="en"][dir="ltr"] .breadcrumb {
    margin-right: 0;
    margin-left: 0;
    text-align: left !important;
}

/* The mobile menu always occupies the usable viewport and remains scrollable. */
#mobileMenu.offcanvas {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
}

#mobileMenu .offcanvas-header {
    flex: 0 0 auto;
    padding-top: max(18px, env(safe-area-inset-top));
}

#mobileMenu .offcanvas-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(38px, calc(22px + env(safe-area-inset-bottom)));
    -webkit-overflow-scrolling: touch;
}

#mobileMenu .offcanvas-body > nav {
    flex: 0 0 auto;
}

#mobileMenu .language-control-mobile {
    margin-bottom: 12px;
}

/* WhatsApp remains a prominent first-class share target. */
.share-button.share-whatsapp {
    border-color: #a7d9bd;
    background: #effaf4;
    color: #087a43;
}

.share-button.share-whatsapp:hover,
.share-button.share-whatsapp:focus-visible {
    border-color: #18a957;
    background: #18a957;
    color: #fff;
}

/* Three related links inserted at a safe block boundary inside the article. */
.inline-related {
    clear: both;
    margin: clamp(32px, 5vw, 52px) 0;
    padding: clamp(20px, 3.5vw, 30px);
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(18, 61, 46, .07);
}

.inline-related-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--theme-primary, var(--green));
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.inline-related ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: related-story;
}

.inline-related li {
    counter-increment: related-story;
}

.inline-related li + li {
    border-top: 1px solid var(--border);
}

.inline-related a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 0;
    color: var(--green-dark);
    text-decoration: none;
}

.inline-related a::before {
    content: "0" counter(related-story);
    color: var(--theme-accent, var(--gold));
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 850;
}

.inline-related a > span {
    display: none;
}

.inline-related a > strong {
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.45;
}

.inline-related a > i {
    color: var(--theme-primary, var(--green));
}

.inline-related-style-accent {
    border: 0;
    border-left: 6px solid var(--theme-accent, var(--gold));
    background: color-mix(in srgb, var(--theme-primary, var(--green)) 7%, #fff);
}

.inline-related-style-accent a > span {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.inline-related-style-accent a > strong {
    display: block;
}

.inline-related-style-minimal {
    padding-right: 0;
    padding-left: 0;
    border-width: 1px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Pagination combines accessible text controls with compact page numbers. */
.article-pagination-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.article-page-numbers {
    display: flex;
    align-items: center;
    gap: 7px;
}

.article-pagination .article-page-nav {
    display: inline-flex;
    width: auto;
    min-width: 118px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
}

/* Four selectable designs for the related-story block below a post. */
.related-posts-style-editorial-list .related-posts-grid {
    grid-template-columns: 1fr;
}

.related-posts-style-editorial-list .related-post-card {
    display: grid;
    grid-template-columns: minmax(210px, 32%) minmax(0, 1fr);
}

.related-posts-style-editorial-list .related-post-image {
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto;
}

.related-posts-style-editorial-list .related-post-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(22px, 4vw, 38px);
}

.related-posts-style-editorial-list .related-post-card h3 {
    font-size: clamp(20px, 2.2vw, 28px);
}

.related-posts-style-compact .related-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-posts-style-compact .related-post-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    border-radius: 12px;
}

.related-posts-style-compact .related-post-image {
    height: 100%;
    min-height: 132px;
    aspect-ratio: auto;
}

.related-posts-style-compact .related-post-card > div {
    padding: 16px;
}

.related-posts-style-compact .related-post-card h3 {
    margin-top: 5px;
    font-size: 15px;
}

.related-posts-style-image-overlay .related-post-card {
    position: relative;
    min-height: 310px;
    border: 0;
    background: #0b251b;
}

.related-posts-style-image-overlay .related-post-image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}

.related-posts-style-image-overlay .related-post-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4, 22, 16, .96), rgba(4, 22, 16, .04) 72%);
}

.related-posts-style-image-overlay .related-post-card > div {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 310px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    pointer-events: none;
}

.related-posts-style-image-overlay .related-post-card h3 a,
.related-posts-style-image-overlay .related-post-card span,
.related-posts-style-image-overlay .related-post-card time {
    color: #fff;
}

.related-posts-style-image-overlay .related-post-card span,
.related-posts-style-image-overlay .related-post-card time {
    opacity: .78;
}

/* Whole-site surface modes, independent from typography and brand colors. */
.theme-surface-warm {
    --cream: #f8f0e3;
    --border: #e4d5c1;
    background: #fffbf4;
}

.theme-surface-warm .section-about,
.theme-surface-warm .stats-section,
.theme-surface-warm .news-section,
.theme-surface-warm .units-section,
.theme-surface-warm .ppdb-wrap,
.theme-surface-warm .donation-section,
.theme-surface-warm .testimonials-style-minimal {
    background: #fffbf4;
}

.theme-surface-warm .news-card,
.theme-surface-warm .unit-card,
.theme-surface-warm .leader-card,
.theme-surface-warm .listing-card,
.theme-surface-warm .form-card,
.theme-surface-warm .testimonial-modern,
.theme-surface-warm .home-notice-panel,
.theme-surface-warm .related-post-card,
.theme-surface-warm .inline-related,
.theme-surface-warm .post-navigation-card {
    background: #fffdf9;
}

.theme-surface-dark {
    --cream: #18231d;
    --green-light: #1c3127;
    --border: #30453a;
    --ink: #edf5f0;
    --muted: #a9bbb1;
    color-scheme: dark;
    background: #0f1713;
    color: var(--ink);
}

.theme-surface-dark main,
.theme-surface-dark .section-about,
.theme-surface-dark .stats-section,
.theme-surface-dark .news-section,
.theme-surface-dark .units-section,
.theme-surface-dark .ppdb-wrap,
.theme-surface-dark .donation-section,
.theme-surface-dark .testimonials-style-minimal,
.theme-surface-dark .child-safe-section {
    background: #0f1713;
}

.theme-surface-dark .services-section,
.theme-surface-dark .leadership-section,
.theme-surface-dark .home-notice-section,
.theme-surface-dark .soft-section,
.theme-surface-dark .article-header,
.theme-surface-dark .testimonials-section,
.theme-surface-dark .video-section {
    background: #141f19;
}

.theme-surface-dark .site-header.scrolled,
.theme-surface-dark:not(.home-page) .site-header,
.theme-surface-dark .offcanvas,
.theme-surface-dark .modal-content {
    background: #111b16;
    color: var(--ink);
}

.theme-surface-dark .site-header.scrolled .navbar-brand strong,
.theme-surface-dark .site-header.scrolled .navbar-brand small,
.theme-surface-dark .site-header.scrolled .nav-link,
.theme-surface-dark:not(.home-page) .navbar-brand strong,
.theme-surface-dark:not(.home-page) .navbar-brand small,
.theme-surface-dark:not(.home-page) .nav-link,
.theme-surface-dark .mobile-nav-link {
    color: #edf5f0;
}

.theme-surface-dark .news-card,
.theme-surface-dark .unit-card,
.theme-surface-dark .leader-card,
.theme-surface-dark .listing-card,
.theme-surface-dark .form-card,
.theme-surface-dark .testimonial-modern,
.theme-surface-dark .home-notice-panel,
.theme-surface-dark .related-post-card,
.theme-surface-dark .inline-related,
.theme-surface-dark .post-navigation-card,
.theme-surface-dark .info-card,
.theme-surface-dark .program-list > a,
.theme-surface-dark .article-pagination a {
    border-color: var(--border);
    background: #17231d;
    color: var(--ink);
}

.theme-surface-dark .section-title,
.theme-surface-dark .news-body h2 a,
.theme-surface-dark .news-body h3 a,
.theme-surface-dark .unit-card h3,
.theme-surface-dark .leader-card h3,
.theme-surface-dark .listing-card h2,
.theme-surface-dark .form-card h2,
.theme-surface-dark .testimonial-modern > p,
.theme-surface-dark .testimonial-modern footer strong,
.theme-surface-dark .home-notice-heading h2,
.theme-surface-dark .home-notice-list h3 a,
.theme-surface-dark .article-header h1,
.theme-surface-dark .prose,
.theme-surface-dark .prose h2,
.theme-surface-dark .prose h3,
.theme-surface-dark .prose h4,
.theme-surface-dark .post-navigation-card,
.theme-surface-dark .related-post-card h3 a,
.theme-surface-dark .inline-related a {
    color: #edf5f0;
}

.theme-surface-dark .form-control,
.theme-surface-dark .form-select,
.theme-surface-dark .language-selector,
.theme-surface-dark .newsletter-form input {
    border-color: var(--border);
    background-color: #111b16;
    color: #edf5f0;
}

.theme-surface-dark .child-safe-card {
    border-color: var(--border);
    background: linear-gradient(135deg, #182820, #121c17);
}

.theme-surface-dark .photo-stack .photo-small {
    border-color: #0f1713;
}

.theme-surface-dark .location-tag {
    background: #17231d;
    color: var(--muted);
}

.theme-surface-dark .inline-related-style-accent {
    background: #162820;
}

.theme-surface-contrast {
    --cream: #fff;
    --green-light: #fff;
    --border: #000;
    --ink: #000;
    --muted: #222;
    --shadow: none;
    background: #fff;
    color: #000;
}

.theme-surface-contrast main > section:not(.hero):not(.unit-hero):not(.page-hero):not(.site-footer),
.theme-surface-contrast .article-header,
.theme-surface-contrast .services-section,
.theme-surface-contrast .leadership-section,
.theme-surface-contrast .home-notice-section,
.theme-surface-contrast .testimonials-section,
.theme-surface-contrast .video-section {
    background: #fff;
}

.theme-surface-contrast .news-card,
.theme-surface-contrast .unit-card,
.theme-surface-contrast .leader-card,
.theme-surface-contrast .listing-card,
.theme-surface-contrast .form-card,
.theme-surface-contrast .testimonial-modern,
.theme-surface-contrast .home-notice-panel,
.theme-surface-contrast .related-post-card,
.theme-surface-contrast .inline-related,
.theme-surface-contrast .post-navigation-card {
    border: 2px solid #000;
    background: #fff;
    box-shadow: none;
}

.theme-surface-contrast a:focus-visible,
.theme-surface-contrast button:focus-visible,
.theme-surface-contrast input:focus-visible,
.theme-surface-contrast select:focus-visible,
.theme-surface-contrast textarea:focus-visible {
    outline: 4px solid #ffde00;
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .form-success-alert {
        grid-template-columns: 1fr;
    }

    .site-alert {
        top: 82px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .form-success-whatsapp {
        width: 100%;
    }

    .article-pagination {
        align-items: stretch;
    }

    .article-pagination-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .article-page-numbers {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .article-pagination .article-page-nav {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .inline-related {
        margin: 30px 0;
        padding: 19px 17px;
    }

    .inline-related a {
        grid-template-columns: 31px minmax(0, 1fr) auto;
    }

    .related-posts-style-editorial-list .related-post-card,
    .related-posts-style-compact .related-post-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .related-posts-style-editorial-list .related-post-image,
    .related-posts-style-compact .related-post-image {
        min-height: 132px;
    }

    .related-posts-style-editorial-list .related-post-card > div,
    .related-posts-style-compact .related-post-card > div {
        padding: 15px;
    }

    .related-posts-style-editorial-list .related-post-card h3,
    .related-posts-style-compact .related-post-card h3 {
        margin: 5px 0 8px;
        font-size: 15px;
    }
}

@media (max-width: 389.98px) {
    #mobileMenu.offcanvas {
        width: 100vw !important;
        max-width: 100vw;
    }

    .article-pagination .article-page-nav span {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .related-post-card img,
    .post-navigation-card,
    .form-success-whatsapp {
        transition: none;
    }
}