/* ==========================================================================
   FromGreen — guest-side polish
   Loaded after css/style.css. Refines the public pages without replacing the
   template, so every page picks up the same rhythm, cards and motion.
   ========================================================================== */

:root {
    --fg-900: #0B2E20;
    --fg-800: #10402C;
    --fg-700: #198754;
    --fg-500: #35C77D;
    --fg-100: #EAF4EE;
    --fg-cream: #F6F9F4;
    --fg-gold: #FFE8A5;
    --fg-ink: #17241E;
    --fg-muted: #63736B;
    --fg-line: rgba(11, 46, 32, .10);
    --fg-shadow: 0 6px 22px rgba(11, 46, 32, .07);
    --fg-shadow-lg: 0 18px 40px rgba(11, 46, 32, .16);
    --fg-radius: 18px;
}

/* ---------- Page hero / breadcrumb ---------- */
.bg-breadcrumb {
    position: relative;
    padding-bottom: 70px !important;
}

.bg-breadcrumb .display-3,
.bg-breadcrumb h3 {
    font-weight: 800;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.bg-breadcrumb p {
    color: rgba(255, 255, 255, .88) !important;
    max-width: 640px;
    margin-inline: auto;
}

/* Soft fade into the section that follows */
.bg-breadcrumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
}

/* ---------- Section rhythm ---------- */
.tt {
    color: var(--fg-700);
    letter-spacing: .15em;
    font-weight: 800;
    font-size: .8rem;
}

h1, h2, h3, h4 { color: var(--fg-900); }
h1 { font-weight: 800; }

/* ---------- Universal card lift ---------- */
.causes-item,
.blog-item,
.team-item,
.service-image,
.event-item,
.modern-event-card,
.gallery-item {
    border-radius: var(--fg-radius);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.causes-item:hover,
.blog-item:hover,
.team-item:hover,
.modern-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--fg-shadow-lg);
}

/* Images inside cards get a gentle zoom */
.causes-img img,
.blog-img img,
.team-img img,
.service-image img {
    transition: transform .5s ease;
    display: block;
}

.causes-item:hover .causes-img img,
.blog-item:hover .blog-img img,
.team-item:hover .team-img img,
.service-image:hover img {
    transform: scale(1.06);
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-hover-bg {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn-primary:hover,
.btn-hover-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(25, 135, 84, .28);
    filter: brightness(1.04);
}

/* ---------- Footer ---------- */
.footer {
    background: linear-gradient(180deg, #10402C 0%, #0B2E20 100%);
    color: rgba(255, 255, 255, .82);
}

.footer .footer-item h4 {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    position: relative;
    padding-bottom: 10px;
}

.footer .footer-item h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: var(--fg-500);
}

.footer .footer-item a {
    color: rgba(255, 255, 255, .78);
    transition: color .16s ease, padding-left .16s ease;
}

.footer .footer-item a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer .footer-item p { color: rgba(255, 255, 255, .74); }

.footer-gallery img {
    transition: transform .3s ease, opacity .3s ease;
    opacity: .9;
}

.footer-gallery img:hover { transform: scale(1.06); opacity: 1; }

.copyright .btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    transition: background .18s ease, transform .18s ease;
}

.copyright .btn-square:hover {
    background: var(--fg-500);
    transform: translateY(-2px);
}

/* ---------- Utilities ---------- */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

img { max-width: 100%; }

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.fg-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
}

.fg-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fg-reveal { opacity: 1; transform: none; transition: none; }
    .causes-item, .blog-item, .team-item, .modern-event-card,
    .causes-img img, .blog-img img, .team-img img, .service-image img { transition: none; }
    .causes-item:hover, .blog-item:hover, .team-item:hover, .modern-event-card:hover { transform: none; }
    .btn-primary:hover, .btn-hover-bg:hover { transform: none; }
}

@media (max-width: 576px) {
    .bg-breadcrumb { padding: 70px 0 0 0; }
    .bg-breadcrumb .display-3, .bg-breadcrumb h3 { font-size: 2rem; }
}


/* ==========================================================================
   Partners — compact logo strip
   Logos are normalised to a small, even size the way partner rows read on
   most sites: muted by default, full colour on hover.
   ========================================================================== */

/* Section backdrop — matches the rhythm of the other content sections.
   Defined here (not inline in the partial) so the dark override always wins. */
.container-fluid.partners {
    background:
        radial-gradient(900px 320px at 85% -10%, rgba(25, 135, 84, .09), transparent 62%),
        linear-gradient(180deg, var(--fg-cream) 0%, #FFFFFF 100%);
}

html[data-theme="dark"] .container-fluid.partners,
html[data-theme="dark"] #partners.partners {
    background:
        radial-gradient(900px 320px at 85% -10%, rgba(53, 199, 125, .07), transparent 62%),
        linear-gradient(180deg, #0E1512 0%, #131C18 100%) !important;
}

.partners-grid {
    display: grid;
    /* auto-fit + centred so a handful of partners never hug the left edge */
    grid-template-columns: repeat(auto-fit, minmax(168px, 200px));
    justify-content: center;
    gap: 18px;
    align-items: stretch;
    max-width: 1000px;
    margin-inline: auto;
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;                     /* the logo tile is full-bleed like other cards */
    background: var(--fg-surface, #fff);
    border: 1px solid var(--fg-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(11, 46, 32, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.partner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(11, 46, 32, .16);
    border-color: rgba(25, 135, 84, .45);
}

/* Accent bar that grows in on hover */
.partner-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fg-700), var(--fg-500));
    border-radius: 3px 3px 0 0;
    transform: translateX(-50%);
    transition: width .28s ease;
}
.partner-card:hover::after { width: 60%; }

/* The actual size control — small, consistent, never stretched */
.partner-logo-wrap {
    width: 100%;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px 16px;
    /* The uploaded logos have white baked in, so the tile is a light plate in
       both themes. Full-bleed at the top of the card, exactly like the image
       block on the trophy / donation / team cards. */
    background: #FFFFFF;
    border-bottom: 1px solid var(--fg-line);
}

/* Full colour by default; the logo fills the card width without distortion. */
.partner-logo-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

/* Hover mutes it to black & white */
.partner-card:hover .partner-logo-wrap img {
    filter: grayscale(100%);
    opacity: .85;
    transform: scale(1.03);
}

/* Organisation name: fills the rest of the card so every tile in a row ends at
   the same height, whether the name runs to one line or two.
   The outer block centres; the inner span handles the two-line clamp, because
   -webkit-box (needed for line-clamp) cannot also centre vertically. */
.partner-name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 14px 16px 16px;
    background: var(--fg-surface, #fff);
    text-align: center;
}

.partner-name span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .005em;
    color: var(--fg-900);
    transition: color .18s ease;
    word-break: break-word;
}

.partner-card:hover .partner-name span { color: var(--fg-700); }

.clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 575px) {
    .partners-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
    .partner-logo-wrap { height: 46px; }
    .partner-logo-wrap img { max-height: 46px; }
}

/* ==========================================================================
   Site background (dashboard: Background-items)
   Rendered by layouts/common.blade.php as a fixed backdrop. Some sections
   stay solid for readability; others become glass so the image shows through.
   ========================================================================== */
.site-bg {
    position: fixed;
    inset: -8% 0;                /* extra bleed so parallax never shows an edge */
    z-index: -1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    will-change: transform;
}

/* Base veil — kept light so the photo stays legible behind glass sections */
.site-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .72));
}

body.has-site-bg { background: transparent; }

/* --- Solid sections: content-heavy, must stay easy to read --- */
body.has-site-bg .container-fluid.about,
body.has-site-bg .container-fluid.service,
body.has-site-bg .container-fluid.donation,
body.has-site-bg .container-fluid.team,
body.has-site-bg .container-fluid.testimonials,
body.has-site-bg .container-fluid.causes,
body.has-site-bg .container-fluid.event,
body.has-site-bg .container-fluid.volunteer,
body.has-site-bg .container-fluid.blog,
body.has-site-bg .container-fluid.bg-light {
    background: #ffffff !important;
}

/* --- Glass section: the background image reads through here --- */
body.has-site-bg .container-fluid.achievements {
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-block: 1px solid rgba(255, 255, 255, .55);
}

/* Partners stays opaque: a translucent panel washed the logos out and the
   section lost contrast against the backdrop photo. */
body.has-site-bg .container-fluid.partners,
body.has-site-bg #partners.partners {
    background:
        radial-gradient(900px 320px at 85% -10%, rgba(25, 135, 84, .09), transparent 62%),
        linear-gradient(180deg, var(--fg-cream) 0%, #FFFFFF 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Cards inside the glass section lift off the photo */
body.has-site-bg .achievements .trophy-card {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 30px rgba(11, 46, 32, .16);
}

/* Counters/volunteers keep their own imagery — leave them alone */
body.has-site-bg .container-fluid.counter { background-blend-mode: multiply; }

@media (max-width: 991px) {
    /* A fixed, oversized image is expensive on mobile — pin it instead */
    .site-bg { position: absolute; inset: 0; height: 100vh; will-change: auto; }
    body.has-site-bg .container-fluid.achievements { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.88) !important; }
    html[data-theme="dark"] body.has-site-bg .container-fluid.achievements { background: rgba(14,21,18,.90) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site-bg { transform: none !important; will-change: auto; }
}

/* ==========================================================================
   Visitor-selectable dark mode
   Toggled by the button in the header; the choice is stored in localStorage
   and applied to <html data-theme> before first paint. Rules are scoped to
   html[data-theme="dark"] so they outrank the per-section <style> blocks.
   ========================================================================== */

/* Toggle button */
.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(11, 46, 32, .16);
    background: transparent;
    color: var(--fg-800, #10402C);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-theme-toggle:hover { background: var(--fg-100, #EAF4EE); transform: translateY(-1px); }
.site-theme-toggle .fa-sun  { display: none; }
.site-theme-toggle .fa-moon { display: inline; }

html[data-theme="dark"] .site-theme-toggle { border-color: rgba(255,255,255,.22); color: #FFE8A5; }
html[data-theme="dark"] .site-theme-toggle:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .site-theme-toggle .fa-sun  { display: inline; }
html[data-theme="dark"] .site-theme-toggle .fa-moon { display: none; }

/* ---------- Dark palette ---------- */
html[data-theme="dark"] {
    --fg-surface:   #17211C;
    --fg-surface-2: #1D2823;
    --fg-ink-d:     #E4EDE8;
    --fg-muted-d:   #98ABA1;
    --fg-line-d:    rgba(255, 255, 255, .11);
    color-scheme: dark;
}

html[data-theme="dark"] body { background: #0E1512; color: var(--fg-ink-d); }

/* Section backdrops */
html[data-theme="dark"] .container-fluid.about,
html[data-theme="dark"] .container-fluid.service,
html[data-theme="dark"] .container-fluid.donation,
html[data-theme="dark"] .container-fluid.team,
html[data-theme="dark"] .container-fluid.testimonials,
html[data-theme="dark"] .container-fluid.causes,
html[data-theme="dark"] .container-fluid.event,
html[data-theme="dark"] .container-fluid.volunteer,
html[data-theme="dark"] .container-fluid.blog,
html[data-theme="dark"] .container-fluid.achievements,
html[data-theme="dark"] .gallery-section,
html[data-theme="dark"] .container-fluid.bg-light {
    background: #0E1512 !important;
}

html[data-theme="dark"] body.has-site-bg .container-fluid.about,
html[data-theme="dark"] body.has-site-bg .container-fluid.service,
html[data-theme="dark"] body.has-site-bg .container-fluid.donation,
html[data-theme="dark"] body.has-site-bg .container-fluid.team,
html[data-theme="dark"] body.has-site-bg .container-fluid.testimonials,
html[data-theme="dark"] body.has-site-bg .container-fluid.causes,
html[data-theme="dark"] body.has-site-bg .container-fluid.event,
html[data-theme="dark"] body.has-site-bg .container-fluid.volunteer,
html[data-theme="dark"] body.has-site-bg .container-fluid.blog {
    background: rgba(14, 21, 18, .95) !important;
}

html[data-theme="dark"] body.has-site-bg .container-fluid.achievements {
    background: rgba(14, 21, 18, .62) !important;
}

html[data-theme="dark"] body.has-site-bg .container-fluid.partners,
html[data-theme="dark"] body.has-site-bg #partners.partners {
    background:
        radial-gradient(900px 320px at 85% -10%, rgba(53, 199, 125, .07), transparent 62%),
        linear-gradient(180deg, #0E1512 0%, #131C18 100%) !important;
}

html[data-theme="dark"] .site-bg::after {
    background: linear-gradient(180deg, rgba(6, 14, 10, .68), rgba(6, 14, 10, .82));
}

/* Typography */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .ach-title,
html[data-theme="dark"] .service-heading,
html[data-theme="dark"] .trophy-name,
html[data-theme="dark"] .member-name,
html[data-theme="dark"] .donate-title { color: #F2F8F4 !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .ach-lead,
html[data-theme="dark"] .service-body,
html[data-theme="dark"] .trophy-desc,
html[data-theme="dark"] .donate-desc,
html[data-theme="dark"] .partner-name span { color: var(--fg-muted-d) !important; }

html[data-theme="dark"] .tt,
html[data-theme="dark"] .ach-kicker,
html[data-theme="dark"] .member-role,
html[data-theme="dark"] .donate-kicker { color: #35C77D !important; }

/* Cards and surfaces */
html[data-theme="dark"] .trophy-card,
html[data-theme="dark"] .member-card,
html[data-theme="dark"] .donate-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .donate-help,
html[data-theme="dark"] .gallery-tile,
html[data-theme="dark"] .news-rail,
html[data-theme="dark"] .testimonials .testimonial-item,
html[data-theme="dark"] .card {
    background: var(--fg-surface) !important;
    border-color: var(--fg-line-d) !important;
    color: var(--fg-ink-d);
}

html[data-theme="dark"] .tab-class.bg-light,
html[data-theme="dark"] .bg-light { background: var(--fg-surface-2) !important; }
html[data-theme="dark"] .bg-white { background: var(--fg-surface) !important; }
html[data-theme="dark"] .border { border-color: var(--fg-line-d) !important; }
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-sm { box-shadow: 0 10px 30px rgba(0, 0, 0, .55) !important; }

/* News rail */
html[data-theme="dark"] .news-rail-title { color: #F2F8F4; }
html[data-theme="dark"] .news-rail-meta { color: var(--fg-muted-d); }
html[data-theme="dark"] .news-rail-link:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .news-rail-head { border-bottom-color: var(--fg-line-d); }
html[data-theme="dark"] .news-rail-item + .news-rail-item { border-top-color: var(--fg-line-d); }

/* Navbar */
html[data-theme="dark"] .navbar.bg-light,
html[data-theme="dark"] .navbar-collapse.bg-light { background: #101A15 !important; }
html[data-theme="dark"] .navbar .nav-link { color: #CFE3D8 !important; }
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link.active { color: #35C77D !important; }

/* Forms (contact page) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
    background: var(--fg-surface-2);
    color: var(--fg-ink-d);
    border-color: var(--fg-line-d);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--fg-muted-d); }
html[data-theme="dark"] .form-floating > label { color: var(--fg-muted-d); }

/* Partner cards follow the theme instead of being stark white. The logo
   itself sits on a light plate so brand marks stay legible in dark mode. */
html[data-theme="dark"] .partner-card {
    background: var(--fg-surface) !important;
    border-color: var(--fg-line-d) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .partner-card:hover {
    border-color: rgba(53, 199, 125, .55) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .60);
}

/* Only the logo tile stays light (the uploaded logos have white baked in);
   the card body is the same dark surface used by every other card. */
html[data-theme="dark"] .partner-logo-wrap {
    background: #F2F6F3;
    border-bottom-color: rgba(255, 255, 255, .10);
}

html[data-theme="dark"] .partner-name { background: var(--fg-surface) !important; }
html[data-theme="dark"] .partner-name span { color: #E4EDE8 !important; }
html[data-theme="dark"] .partner-card:hover .partner-name span { color: #35C77D !important; }

/* The sheen is invisible on a dark card - warm it up slightly */
html[data-theme="dark"] .partner-shine {
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
}

/* Separators */
html[data-theme="dark"] .service-row + .service-row { border-top-color: var(--fg-line-d); }

/* ==========================================================================
   About section — light + dark
   ========================================================================== */
.about-shell {
    background: #fff;
    border: 1px solid var(--fg-line);
    border-radius: 22px;
    box-shadow: 0 10px 34px rgba(11, 46, 32, .08);
}

.about-media {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(11, 46, 32, .14);
}
.about-media img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }

.about-kicker { letter-spacing: .15em; font-size: .8rem; font-weight: 800; margin-bottom: .6rem; }
.about-heading { font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1rem; color: var(--fg-900); }
.about-lead { font-size: 1.02rem; line-height: 1.85; color: var(--fg-muted); margin-bottom: 1.1rem; }

.about-tabs {
    background: var(--fg-cream);
    border: 1px solid var(--fg-line);
    border-radius: 16px;
    padding: 18px;
}

.about-pills { gap: 8px; border: 0; }
.about-pills .nav-link {
    border-radius: 999px;
    padding: .5rem 1.15rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--fg-800) !important;
    background: transparent;
    border: 1px solid var(--fg-line);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.about-pills .nav-link:hover { background: rgba(25, 135, 84, .10); border-color: rgba(25, 135, 84, .35); }
.about-pills .nav-link.active {
    background: var(--fg-700) !important;
    border-color: var(--fg-700);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(25, 135, 84, .28);
}

.about-panes { padding-top: 4px; }
.about-panes p { color: var(--fg-muted); line-height: 1.85; font-size: .98rem; margin: 0; }

/* ==========================================================================
   Event cards — used by both the welcome carousel and the events page.
   These classes previously had no styling at all.
   ========================================================================== */
.modern-event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--fg-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(11, 46, 32, .08);
}

.event-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--fg-100); }
.event-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.modern-event-card:hover .event-img-wrap img { transform: scale(1.06); }

.event-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,46,32,0) 55%, rgba(11,46,32,.55) 100%);
}

.event-date-badge {
    position: absolute; top: 12px; left: 12px;
    background: #fff; color: var(--fg-900);
    border-radius: 12px; padding: 6px 10px;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    box-shadow: 0 6px 16px rgba(0,0,0,.20);
}
.event-day { font-weight: 800; font-size: 1.05rem; }
.event-month { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-700); font-weight: 700; }

.event-location-pill {
    position: absolute; right: 12px; bottom: 12px;
    background: rgba(11,46,32,.88); color: #fff;
    font-size: .72rem; font-weight: 600;
    padding: .3rem .7rem; border-radius: 999px;
}

.event-content { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; background: #fff; }
.event-title { color: var(--fg-900); font-weight: 800; font-size: 1.05rem; line-height: 1.35; margin-bottom: .5rem; }
.event-desc { color: var(--fg-muted); font-size: .88rem; line-height: 1.65; margin-bottom: 0; }
.event-date-text { color: var(--fg-muted); font-size: .78rem; }
.event-btn {
    background: var(--fg-700); color: #fff;
    border-radius: 999px; font-size: .78rem; font-weight: 700;
    padding: .35rem .9rem; text-decoration: none;
    transition: filter .16s ease;
}
.event-btn:hover { color: #fff; filter: brightness(1.08); }

/* ---------- Dark mode: About ---------- */
html[data-theme="dark"] .about-shell {
    background: var(--fg-surface) !important;
    border-color: var(--fg-line-d);
    box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
html[data-theme="dark"] .about-heading { color: #F2F8F4 !important; }
html[data-theme="dark"] .about-lead { color: var(--fg-muted-d) !important; }
html[data-theme="dark"] .about-tabs {
    background: var(--fg-surface-2) !important;
    border-color: var(--fg-line-d);
}
html[data-theme="dark"] .about-pills .nav-link {
    color: #CFE3D8 !important;
    border-color: var(--fg-line-d);
    background: transparent;
}
html[data-theme="dark"] .about-pills .nav-link:hover {
    background: rgba(53, 199, 125, .14);
    border-color: rgba(53, 199, 125, .45);
}
html[data-theme="dark"] .about-pills .nav-link.active {
    background: #35C77D !important;
    border-color: #35C77D;
    color: #082116 !important;
    box-shadow: 0 6px 16px rgba(53, 199, 125, .30);
}
html[data-theme="dark"] .about-panes p { color: var(--fg-muted-d) !important; }
html[data-theme="dark"] .about-media { box-shadow: 0 12px 30px rgba(0,0,0,.6); }

/* ---------- Dark mode: Events ---------- */
html[data-theme="dark"] .modern-event-card {
    background: var(--fg-surface) !important;
    border-color: var(--fg-line-d) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
html[data-theme="dark"] .event-content { background: var(--fg-surface) !important; }
html[data-theme="dark"] .event-title { color: #F2F8F4 !important; }
html[data-theme="dark"] .event-desc,
html[data-theme="dark"] .event-date-text { color: var(--fg-muted-d) !important; }
html[data-theme="dark"] .event-date-badge { background: var(--fg-surface-2); color: #F2F8F4; }
html[data-theme="dark"] .event-month { color: #35C77D; }
html[data-theme="dark"] .event-btn { background: #35C77D; color: #082116; }
html[data-theme="dark"] .event-img-wrap { background: var(--fg-surface-2); }

/* The template hardcodes a light panel on carousel event cards */
html[data-theme="dark"] .event .event-carousel .event-item .event-content {
    background: var(--fg-surface) !important;
    border-color: var(--fg-line-d) !important;
}

@media (prefers-reduced-motion: reduce) {
    .event-img-wrap img { transition: none; }
    .modern-event-card:hover .event-img-wrap img { transform: none; }
}

/* ==========================================================================
   Announcement marquee (dashboard: Announcements)
   ========================================================================== */
.site-marquee {
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, #0B2E20, #176b45);
    color: #fff;
    overflow: hidden;
    position: relative;
    /* Sits inside .fixed-top above the top bar; keep it over page content */
    z-index: 1031;
    width: 100%;
}

.site-marquee-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(0, 0, 0, .22);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-marquee-viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }

.site-marquee-track {
    display: flex;
    width: max-content;
    animation: fgMarquee 38s linear infinite;
}
.site-marquee-track.is-paused,
.site-marquee:hover .site-marquee-track { animation-play-state: paused; }

@keyframes fgMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.site-marquee-run { display: flex; align-items: center; white-space: nowrap; }

.site-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px;
    font-size: .86rem;
}
.site-marquee-item i { font-size: .78rem; color: #A3E635; }
.site-marquee-item a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.55); }
.site-marquee-item a:hover { color: #A3E635; border-bottom-color: #A3E635; }

.site-marquee-sep { padding: 0 14px; opacity: .45; }

.site-marquee-toggle {
    flex-shrink: 0;
    width: 38px;
    border: 0;
    background: rgba(0, 0, 0, .22);
    color: #fff;
    cursor: pointer;
    font-size: .72rem;
    transition: background .16s ease;
}
.site-marquee-toggle:hover { background: rgba(0, 0, 0, .38); }

html[data-theme="dark"] .site-marquee { background: linear-gradient(90deg, #08150F, #10402C); }

@media (max-width: 575px) {
    .site-marquee-item { font-size: .78rem; }
    .site-marquee-label { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-marquee-track { animation: none; }
    .site-marquee-viewport { overflow-x: auto; }
}

/* ==========================================================================
   Carousel caption — always sits on a photo, so it must stay light in BOTH
   themes. The dark-mode text rules use !important and would otherwise dim
   the subtitle and description to muted grey over the image.
   ========================================================================== */
.carousel-caption,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption h5,
.carousel-caption p,
html[data-theme="dark"] .carousel-caption,
html[data-theme="dark"] .carousel-caption h1,
html[data-theme="dark"] .carousel-caption h2,
html[data-theme="dark"] .carousel-caption h3,
html[data-theme="dark"] .carousel-caption h4,
html[data-theme="dark"] .carousel-caption h5,
html[data-theme="dark"] .carousel-caption p {
    color: #FFFFFF !important;
}

/* The subtitle is the small kicker above the headline — give it presence */
.carousel-caption h4 {
    color: #FFE8A5 !important;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}
html[data-theme="dark"] .carousel-caption h4 { color: #FFE8A5 !important; }

.carousel-caption h1 { text-shadow: 0 3px 20px rgba(0, 0, 0, .70); }

.carousel-caption p {
    background: rgba(11, 46, 32, .55) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-color: rgba(255, 255, 255, .75) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .60);
}

/* Darken the photo slightly so any caption stays readable */
.carousel-header .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50));
    pointer-events: none;
}
.carousel-header .carousel-item { position: relative; }
.carousel-header .carousel-caption { z-index: 2; }

/* ==========================================================================
   Achievements — keep the row centred so 1-3 trophies do not hug the left
   ========================================================================== */
.achievements .row { justify-content: center; }
.trophies-carousel .owl-stage { margin-inline: auto; }