/* =====================================================================
   Bangladesh Scouts Dhaka Region — Brand Theme  (Phase 3 redesign)
   Scout green #6CF230 · Amber #D99200 · Dark #0B0B0B · Light #F7F9F6
   Professional · animated · responsive. Class names & --bsd-* tokens are
   preserved so the admin Appearance controls keep working.
   ===================================================================== */

:root {
    --bsd-green:        #6CF230;
    --bsd-green-dark:   #4fb81f;
    --bsd-amber:        #D99200;
    --bsd-amber-dark:   #b67900;
    --bsd-dark:         #0B0B0B;
    --bsd-light:        #F7F9F6;
    --bsd-text:         #1b1f1a;
    --bsd-muted:        #5d6b58;
    --bsd-border:       rgba(217, 146, 0, 0.30);

    --bsd-green-soft:   rgba(108, 242, 48, 0.12);
    --bsd-amber-soft:   rgba(217, 146, 0, 0.12);

    --bsd-radius:       14px;
    --bsd-radius-sm:    10px;
    --bsd-shadow:       0 6px 22px rgba(11, 20, 8, 0.08);
    --bsd-shadow-lg:    0 16px 40px rgba(11, 20, 8, 0.16);
    --bsd-transition:   .28s cubic-bezier(.4, 0, .2, 1);

    --bs-primary:       var(--bsd-green-dark);
}

/* ---- Base + typography ---------------------------------------------- */
html { scroll-behavior: smooth; }
html[lang="bn"] body, .bn-text {
    font-family: "Noto Sans Bengali", "SolaimanLipi", "Hind Siliguri", system-ui, sans-serif;
    line-height: 1.9;
}
html[lang="en"] body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
body { background: var(--bsd-light); color: var(--bsd-text); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
a { color: var(--bsd-green-dark); text-decoration: none; transition: color var(--bsd-transition); }
a:hover { color: var(--bsd-amber-dark); }
img { max-width: 100%; }
::selection { background: var(--bsd-green); color: #06210a; }

/* Decorative brand progress bar pinned to the very top */
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 2000;
    background: linear-gradient(90deg, var(--bsd-green), var(--bsd-amber));
}

/* ---- Top bar -------------------------------------------------------- */
.bsd-topbar { background: var(--bsd-dark); color: #e9efe6; font-size: .85rem; }
.bsd-topbar a { color: var(--bsd-green); text-decoration: none; }
.bsd-topbar i { color: var(--bsd-amber); }
.lang-switch a { font-weight: 700; opacity: .85; }
.lang-switch a.active, .lang-switch a:hover { color: var(--bsd-green); opacity: 1; }

/* ---- Navbar --------------------------------------------------------- */
.bsd-navbar {
    background: var(--bsd-dark);
    border-bottom: 3px solid var(--bsd-amber);
    transition: padding var(--bsd-transition), box-shadow var(--bsd-transition);
    padding-top: .6rem; padding-bottom: .6rem;
}
.bsd-navbar.scrolled { padding-top: .25rem; padding-bottom: .25rem; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.bsd-navbar .navbar-brand { color: #fff; font-weight: 800; }
.bsd-navbar .nav-link {
    color: #e9efe6 !important; font-weight: 600; position: relative; margin: 0 .1rem;
    padding-left: .85rem !important; padding-right: .85rem !important;
}
.bsd-navbar .nav-link::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px;
    background: var(--bsd-green); transform: scaleX(0); transform-origin: left; transition: transform var(--bsd-transition);
}
.bsd-navbar .nav-link:hover::after, .bsd-navbar .nav-link.active::after { transform: scaleX(1); }
.bsd-navbar .nav-link:hover, .bsd-navbar .nav-link.active { color: var(--bsd-green) !important; }
.bsd-navbar .dropdown-menu {
    border: 0; border-top: 3px solid var(--bsd-green); border-radius: 0 0 var(--bsd-radius-sm) var(--bsd-radius-sm);
    box-shadow: var(--bsd-shadow-lg); padding: .4rem; margin-top: .4rem; animation: ddIn .22s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bsd-navbar .dropdown-item { border-radius: 8px; font-weight: 600; padding: .5rem .8rem; transition: background var(--bsd-transition); }
.bsd-navbar .dropdown-item:hover { background: var(--bsd-green-soft); color: var(--bsd-green-dark); }
.navbar-brand-text { font-size: 1.4rem; font-weight: 800; line-height: 1.3; }

/* ---- Buttons -------------------------------------------------------- */
.btn { border-radius: var(--bsd-radius-sm); font-weight: 700; transition: all var(--bsd-transition); }
.btn-bsd {
    background: linear-gradient(135deg, var(--bsd-green), var(--bsd-green-dark));
    border: 0; color: #06210a; box-shadow: 0 4px 14px rgba(79, 184, 31, .35);
}
.btn-bsd:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79, 184, 31, .5); }
.btn-bsd-amber {
    background: linear-gradient(135deg, var(--bsd-amber), var(--bsd-amber-dark));
    border: 0; color: #fff; box-shadow: 0 4px 14px rgba(217, 146, 0, .35);
}
.btn-bsd-amber:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(217, 146, 0, .5); }
.btn-outline-bsd { border: 2px solid var(--bsd-green-dark); color: var(--bsd-green-dark); background: transparent; }
.btn-outline-bsd:hover { background: var(--bsd-green-dark); color: #fff; }

/* ---- Section + titles ---------------------------------------------- */
.section { padding: 4rem 0; }
.section-light { background: #fff; }
.section-title { position: relative; font-weight: 800; padding-bottom: .65rem; margin-bottom: 1.75rem; display: inline-block; }
.section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
    background: linear-gradient(90deg, var(--bsd-green), var(--bsd-amber)); border-radius: 3px;
}
.section-title.text-center { display: block; }
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* ---- Hero slider ---------------------------------------------------- */
.hero-slider .carousel-item { height: 560px; overflow: hidden; }
.hero-slider .carousel-item img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-slider .hero-overlay {
    position: absolute; inset: 0; display: flex; align-items: center;
    background: linear-gradient(90deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.45) 55%, rgba(11,11,11,.08) 100%);
}
.hero-slider .hero-caption { max-width: 680px; color: #fff; }
.hero-slider .hero-caption h2 { font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.15; }
.hero-slider .hero-caption .lead { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .92; }
.hero-slider .hero-caption .accent { color: var(--bsd-green); }
.carousel-item.active .hero-caption > * { animation: heroUp .7s ease both; }
.carousel-item.active .hero-caption > *:nth-child(2) { animation-delay: .12s; }
.carousel-item.active .hero-caption > *:nth-child(3) { animation-delay: .24s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero-slider .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; border: 0; }
.hero-slider .carousel-indicators .active { background: var(--bsd-green); }
@media (max-width: 991px){ .hero-slider .carousel-item { height: 440px; } }
@media (max-width: 575px){ .hero-slider .carousel-item { height: 360px; } }

/* ---- Page banner --------------------------------------------------- */
/* A branded gradient (green → deep forest → dark) so the banner never blends
   into the solid-black navbar above it. A thin light hairline at the very top
   guarantees visual separation even when the header background is pure black. */
.page-banner {
    background:
        radial-gradient(1200px 380px at 12% -40%, rgba(108,242,48,.20), transparent 60%),
        linear-gradient(115deg, var(--bsd-green-dark) 0%, #0f3d16 42%, var(--bsd-dark) 100%);
    background-size: cover; background-position: center; color: #fff;
    padding: 3.25rem 0; border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 3px solid var(--bsd-amber); position: relative; overflow: hidden;
}
/* Subtle diagonal texture for depth */
.page-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 22px);
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 {
    font-weight: 800; margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
/* When a page sets its own banner image, dim it but keep the brand tint. */
.page-banner.has-image {
    background-position: center;
}
.page-banner.has-image::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(20,70,26,.82), rgba(11,11,11,.78));
}
.page-banner h1 { position: relative; z-index: 2; }

.breadcrumb-bar { background: #eff3ec; border-bottom: 1px solid var(--bsd-border); }
.breadcrumb-bar .breadcrumb { margin: 0; padding: .65rem 0; }
.breadcrumb-bar a { color: var(--bsd-green-dark); }

/* ---- Cards --------------------------------------------------------- */
.content-card {
    border: 1px solid var(--bsd-border); border-radius: var(--bsd-radius); overflow: hidden;
    background: #fff; height: 100%; transition: transform var(--bsd-transition), box-shadow var(--bsd-transition);
    box-shadow: var(--bsd-shadow);
}
.content-card:hover { transform: translateY(-6px); box-shadow: var(--bsd-shadow-lg); }
.content-card .thumb { height: 200px; object-fit: cover; width: 100%; background: #e9efe6; transition: transform .5s ease; }
.content-card:hover .thumb { transform: scale(1.06); }
.content-card .card-body { padding: 1.1rem; }
.content-card .meta { font-size: .8rem; color: var(--bsd-muted); }
.content-card .meta i { color: var(--bsd-amber-dark); }
.card-bsd { border: 1px solid var(--bsd-border); border-radius: var(--bsd-radius); box-shadow: var(--bsd-shadow); }
.badge-bsd { background: var(--bsd-amber); color: #fff; }

/* ---- Leadership / member cards ------------------------------------- */
.leader-card { text-align: center; background: #fff; }
.leader-card .photo, .member-card img, .member-card .ph {
    width: 110px; height: 110px; object-fit: cover; border-radius: 50%;
    border: 3px solid var(--bsd-amber); margin: 0 auto .75rem;
    display: flex; align-items: center; justify-content: center; background: #eef2ec; color: #9bb18f;
    transition: transform var(--bsd-transition), border-color var(--bsd-transition);
}
/* Anchor portrait crops to the top so heads are not cut off by circular frames. */
.leader-card .photo, .member-card img { object-position: top center; }
/* Reserve two lines for every leader name so all card content stays aligned. */
.leader-card h6.leader-name {
    width: 100% !important;
    height: 1.6rem !important;
    min-height: 1.6rem !important;
    margin: 0 !important;
    padding: 0 .15rem !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    line-height: 1.6rem !important;
    font-size: 1rem;
    font-weight: 700;
}
.leader-card:hover .photo, .member-card:hover img { transform: scale(1.05); border-color: var(--bsd-green); }
.member-card { text-align: center; border: 1px solid var(--bsd-border); border-radius: var(--bsd-radius); padding: 1.4rem .8rem; height: 100%; transition: transform var(--bsd-transition), box-shadow var(--bsd-transition); }
.member-card:hover { transform: translateY(-5px); box-shadow: var(--bsd-shadow-lg); }

/* ---- Notice board -------------------------------------------------- */
.notice-item { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px dashed var(--bsd-border); transition: background var(--bsd-transition); }
.notice-item:hover { background: var(--bsd-green-soft); }
.notice-item .date-chip {
    flex: 0 0 auto; background: linear-gradient(135deg, var(--bsd-green-dark), var(--bsd-amber-dark));
    color: #fff; border-radius: 10px; padding: .4rem .65rem; text-align: center; min-width: 60px;
}
.notice-item .date-chip .d { font-weight: 800; font-size: 1.15rem; display: block; line-height: 1; }
.notice-item .date-chip .m { font-size: .7rem; text-transform: uppercase; }

/* ---- Quick links --------------------------------------------------- */
.quick-link {
    display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; background: #fff;
    border: 1px solid var(--bsd-border); border-radius: 10px; color: var(--bsd-text); font-weight: 600;
    transition: all var(--bsd-transition);
}
.quick-link:hover { background: var(--bsd-green); color: #06210a; transform: translateY(-2px); }

/* ---- Gallery ------------------------------------------------------- */
.gallery-grid a { display: block; overflow: hidden; border-radius: 10px; }
.gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; transition: transform var(--bsd-transition), filter var(--bsd-transition); }
.gallery-grid a:hover img { transform: scale(1.08); filter: saturate(1.1); }

/* ---- Downloads list ------------------------------------------------ */
.list-group-item-action:hover { background: var(--bsd-green-soft); }

/* ---- Article body -------------------------------------------------- */
.article-body { line-height: 1.95; font-size: 1.05rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--bsd-radius-sm); }
.article-body h2, .article-body h3 { margin-top: 1.5rem; }

/* ---- Contact ------------------------------------------------------- */
.contact-info i { color: var(--bsd-green-dark); width: 22px; }

/* ---- Footer -------------------------------------------------------- */
.bsd-footer { background: var(--bsd-dark); color: #cdd6c8; }
.bsd-footer h5, .bsd-footer h6 { color: #fff; }
.bsd-footer a { color: #cdd6c8; }
.bsd-footer a:hover { color: var(--bsd-green); padding-left: 3px; }
.bsd-footer .footer-bottom { background: #000; border-top: 1px solid var(--bsd-amber); }
.bsd-footer i { color: var(--bsd-amber); }
.bsd-footer .btn-outline-light:hover { background: var(--bsd-green); border-color: var(--bsd-green); color: #06210a; }

/* ---- Scroll reveal (driven by main.js) ----------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero-slider .carousel-item img { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---- Back-to-top (injected by main.js) ----------------------------- */
#backToTop {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040; width: 46px; height: 46px;
    border: 0; border-radius: 50%; color: #06210a; font-size: 1.2rem; cursor: pointer;
    background: linear-gradient(135deg, var(--bsd-green), var(--bsd-green-dark));
    box-shadow: var(--bsd-shadow-lg); opacity: 0; pointer-events: none;
    transform: translateY(12px); transition: all var(--bsd-transition);
}
#backToTop.show { opacity: 1; pointer-events: auto; transform: none; }
#backToTop:hover { transform: translateY(-3px); }

/* ---- Utility ------------------------------------------------------- */
.text-bsd { color: var(--bsd-green-dark) !important; }
.bg-bsd-soft { background: var(--bsd-green-soft) !important; }
.shadow-bsd { box-shadow: var(--bsd-shadow) !important; }

/* =====================================================================
   MOBILE REFINEMENTS  (header, navbar, footer, banners)
   ===================================================================== */
@media (max-width: 991.98px) {
    /* Top bar: stack neatly and stay centered on small screens */
    .bsd-topbar { font-size: .78rem; }
    .bsd-topbar .container { gap: .15rem .75rem; justify-content: center; text-align: center; }
    .bsd-topbar .container > div { width: 100%; }
    .bsd-topbar .lang-switch { width: auto; }

    /* Navbar: give the collapsed menu its own panel so links are easy to tap */
    .bsd-navbar .navbar-collapse {
        margin-top: .6rem; padding: .5rem .25rem;
        border-top: 1px solid rgba(255,255,255,.10);
        max-height: 78vh; overflow-y: auto;
    }
    .bsd-navbar .navbar-nav { gap: .1rem; }
    .bsd-navbar .nav-link { padding: .6rem .25rem !important; }
    .bsd-navbar .nav-link::after { display: none; }   /* underline animation off on mobile */
    .bsd-navbar .dropdown-menu {
        background: rgba(255,255,255,.04); border-top: 0; border-radius: 10px;
        margin: .15rem 0 .35rem .5rem; padding: .25rem;
    }
    .bsd-navbar .dropdown-item { color: #e9efe6; }
    .bsd-navbar .dropdown-item:hover, .bsd-navbar .dropdown-item:focus { color: var(--bsd-green-dark); }
    .navbar-toggler { padding: .3rem .55rem; border-color: rgba(255,255,255,.4); }
    .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--bsd-green-soft); }

    /* Show the brand text on phones too (was hidden), but compact */
    .navbar-brand-text { font-size: .95rem !important; line-height: 1.15 !important; white-space: normal !important; }

    /* Banner + sections: tighter vertical rhythm on phones */
    .page-banner { padding: 2.1rem 0; }
    .section { padding: 2.4rem 0; }
}

@media (max-width: 767.98px) {
    /* Footer: center everything and add breathing room between blocks */
    .bsd-footer { text-align: center; }
    .bsd-footer .row > [class*="col-"] { margin-bottom: 1.25rem; }
    .bsd-footer .d-flex.align-items-center { justify-content: center; }
    .bsd-footer .row .col-6 { text-align: left; }
    .bsd-footer .d-flex.gap-2 { justify-content: center; }
    .bsd-footer a:hover { padding-left: 0; }   /* avoid layout shift on centered links */

    .bsd-topbar i { font-size: .8rem; }
    .navbar-brand img { height: 42px !important; }
}

@media (max-width: 575.98px) {
    .navbar-brand-text { font-size: .82rem !important; }
    .page-banner h1 { font-size: 1.45rem; }
}

/* ---- Rich-editor output on the public site ------------------------- */
/* Quill stores alignment as ql-align-* classes; map them so images and
   text align correctly on pages that don't load the Quill stylesheet. */
.ql-align-center { text-align: center; }
.ql-align-right  { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-align-center img, .ql-align-right img { display: inline-block; }

/* ---- DRC three-line cards ------------------------------------------ */
.drc-leader-grid { grid-template-columns: repeat(3, 1fr) !important; }
.drc-leader-grid .leader-card { display: flex; flex-direction: column; align-items: center; }
.drc-leader-grid .leader-card .drc-fixed-role {
    display: block; width: 100%; min-height: 0;
    margin: .25rem 0 0; color: var(--bsd-muted);
}
.drc-leader-grid .leader-card .drc-department {
    display: block; width: 100%; min-height: 2.2em;
    margin: .2rem 0 .5rem;
    color: var(--bsd-muted); font-size: .85rem; line-height: 1.35;
}
.drc-leader-grid .leader-card .mob { margin-top: auto; }
@media (max-width: 991.98px) { .drc-leader-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575.98px)  { .drc-leader-grid { grid-template-columns: 1fr !important; } }