/* ===== Global ==================== */

:root {
    --suss-blue: #001E60;
    --suss-red: #DA291C;
    --suss-blue-light: #9ADBE8;
    --suss-grey-light: #D6D2C4;
    --suss-green-lime-light: #D0DF00;

    --darkblue: #001842;

    --bar-1-left: #001E60;
    --bar-1-right: #9ADBE8;
    --bar-2-left: #9ADBE8;
    --bar-2-right: #D0DF00;
    --bar-3-left: #D0DF00;
    --bar-3-right: #DA291C;

    --danger: #dc3545; /* bootstrap danger */

    --nav-height: 92px;
}

* {
    font-family: "montserrat", sans-serif;
}

/* ---- Text ---------------- */

.text-blue {
    color: var(--suss-blue);
}
.text-red {
    color: var(--suss-red);
}

/* ---- Text > Headings ---------------- */

.header {
    font-family: 'montserrat-bold', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
}

.subheader {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.red-underline {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
    border-bottom: 4px solid var(--suss-red);
}

.red-line::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background-color: var(--suss-red);
}

.red-stroke::after {
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 8px;
    border-radius: 2px;
    background-image: url('../images/red-stroke.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ---- Buttons ---------------- */

/* overwrite default bootstrap styles */
.btn {
    padding: .5rem 1.2rem;
    font-family: 'montserrat-semibold', sans-serif;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    /* color: #fff; */
    border: none;
    border-radius: 50px;
    /* background-color: var(--darkblue); */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    outline: none;
}
/* a.btn:hover,
a.btn:focus {
    color: #fff;
} */

.btn-red {
    background-color: var(--suss-red);
}

.btn-gradient {
    color: #fff;
    background: var(--suss-blue-light);
    background: -moz-linear-gradient(245deg, #4e74bb, #3a9dbd 100%);
    background: -webkit-linear-gradient(245deg, #4e74bb, #3a9dbd 100%);
    background: linear-gradient(245deg, #4e74bb, #3a9dbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1);
}
a.btn-gradient:hover,
a.btn-gradient:focus {
    color: #fff;
}

/* ---- Backgrounds ---------------- */

/* ".bg-graident" is already used by bootstrap */
.bg-custom-gradient {
    background: var(--suss-blue-light);
    background: -moz-linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    background: -webkit-linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    background: linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1);
}

.bg-red {
    background-color: var(--suss-red);
}

.bg-1 {
    background-color: #b3dce7;
    background-image: url('../images/bg/bg-1a.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-2 {
    background-color: #e6e7e8;
    background-image: url('../images/bg/bg-2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-3 {
    /* background-color: #001f60;
    background-image: url('../images/bg/bg-3.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; */

    background-color: #032251;
}
.bg-4 {
    background-color: #fff;
    background-image: url('../images/bg/bg-4.jpg');
    background-position: right top;
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-5 {
    background-color: #f7f7f7;
}
.bg-6 {
    background-color: #fff;
    background-image: url('../images/bg/bot-rig.png');
    background-repeat: no-repeat;
    background-size: 33% auto;
    background-position: right bottom;
}
.bg-7 {
    background-color: #fff;
    background-image: url('../images/bg/bg-7.jpg');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 40% auto;
}
.bg-8 {
    background-color: #f9f9f9;
    background-image: url('../images/bg/lef1.jpg'), url('../images/bg/rig1.jpg');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, auto 100%;
}
@media (max-width: 767px) {
.bg-8 {
    background-color: #f9f9f9;
    background-image: url('../images/bg/lef1.jpg');
    background-position: left center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%;
}
}
.bg-9 {
    background-color: #f2f9fb;
    background-image: url('../images/bg/bg-9.jpg');
    background-position: center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
}
.bg-10 {
    background-color: #fff;
    background-image: url('../images/bg/bg-10-top.jpg'), url('../images/bg/bg-10-bottom.jpg');
    background-position: top center, bottom center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% auto;
}
@media (max-width: 767px) {
.bg-10 {
    background-color: #fff;
    background-image: url('../images/bg/bg-10-top.jpg');
    background-position: top center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto;
}
}
.bg-11 {
    background-color: #f6f6f7;
    background-image: url('../images/bg/bg-11.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-12 {
    background-color: #fff;
    background-image: url('../images/bg/half-donut-w-stripe-left.jpg'), url('../images/bg/half-donut-w-stripe-right.jpg');
    background-position: left top, right bottom;
    background-repeat: no-repeat;
    background-size: 20vw, 20vw;
}
@media (max-width: 991px) {
.bg-12 {
    background-color: #fff;
    background-image: none;
}
}

.bg-cat-1,
.bg-cat-2,
.bg-cat-3,
.bg-cat-4 {
    background-color: #fff;
    background-position: 200px center;
    background-size: contain;
    background-repeat: no-repeat;

    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.bg-cat-1 {
    background-color: #fff;
    background-image: url('../images/bg/cat-1-v3.jpg');
}
.bg-cat-2 {
    background-color: #fff;
    background-image: url('../images/bg/cat-2.jpg');
}
.bg-cat-3 {
    background-color: #fff;
    background-image: url('../images/bg/cat-3-v2.jpg');
}
.bg-cat-4 {
    background-color: #fff;
    background-image: url('../images/bg/cat-4-v2.jpg');
}
@media (max-width: 1400px) {
    .bg-cat-1,
    .bg-cat-2,
    .bg-cat-3,
    .bg-cat-4 {
        background-position: right center;
    }
}
@media (max-width: 767px) {
    /* Stack the illustration BELOW the text (text is full-width here). Reserve a
       bottom strip equal to the image's height at full width — the cat images are
       1096x618, so height = 618/1096 = 56.4% of width — and paint the image
       full-width into that strip. The text sits in the box above it, no overlap. */
    .bg-cat-1,
    .bg-cat-2,
    .bg-cat-3,
    .bg-cat-4 {
        background-position: center bottom;
        background-size: 100% auto;
        padding-bottom: 56.4%;
    }
}

.bg-parallax-1,
.bg-parallax-2 {
    min-height: 500px;
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-parallax-1 {
    background-image: url('../images/bg/parallax-1.jpg');
}
.bg-parallax-2 {
    background-image: url('../images/bg/parallax-2.jpg');
}

.bg-parallax-2x {
    max-height: 500px;
    overflow-y: hidden;
}

.bg-activities {
    height: 180px;
    margin-top: 40px;
    background-image: url('../images/icons-activities-4.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width: 767px) {
    .bg-activities {
        height: 120px;
    }
}
@media (max-width: 576px) {
    .bg-activities {
        height: 100px;
    }
}
@media (max-width: 480px) {
    .bg-activities {
        height: 80px;
    }
}

/* ---- Borders ---------------- */

.border-left-right {
    border-left: 1px solid var(--darkblue);
    border-right: 1px solid var(--darkblue);
}
.border-left {
    border-left: 1px solid var(--darkblue);
}
.border-right {
    border-right: 1px solid var(--darkblue);
}
.border-bottom {
    border-bottom: 1px solid var(--darkblue);
}

.border-w-shadow {
    border: 4px solid #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

/* ---- Forms ---------------- */

input.readonly {
    margin-bottom: 0;
    padding: .375rem 0;
    border: 0;
    cursor: default;
}

/* Bootstrap strips the native OS chevron on <select.form-control>. Re-add it
   (matching Bootstrap's .form-select arrow) so users see it's a dropdown. */
select.form-control,
select.form-control-user {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}
input.readonly2 {
    background-color: lightgray;
    cursor: default;
}

/* ---- Spacing ---------------- */

.spacer {
    display: block;
}
.spacer.h100 {
    height: 100px;
}
.spacer.h50 {
    height: 50px;
}

/* ---- Reusable event details ---------------- */

.event-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
    font-family: system-ui, sans-serif;
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.icon-circle {
  color: var(--suss-blue);
}

.icon-white {
    color: #ffffff;
}

.event-item .fa-stack {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===== Header and Navigation ==================== */

/*
 * CUSTOM NAVBAR BREAKPOINT — 1600px.
 *
 * The top menu stays a hamburger all the way up to 1600px and only becomes a
 * horizontal bar above it. Bootstrap can't express this: its largest breakpoint
 * is xxl (1400px), so navbar-expand-xxl would flip 200px too early.
 *
 * How it works: components/nav.php carries NO navbar-expand-* class, and a
 * Bootstrap navbar without one is collapsed at every width — that already gives
 * the hamburger everywhere. The min-width rule below re-creates what
 * navbar-expand-* does, but at our own 1601px cut-off.
 *
 * Change the two numbers together if the breakpoint ever moves: 1600px on the
 * max-width rules, 1601px on the min-width one.
 */

/* Visibility helpers, replacing d-none/d-lg-block and d-block/d-lg-none so the
   desktop buttons and the collapsed-menu links swap at the SAME point as the
   hamburger. Without these the right-hand Donate/Login buttons would appear
   from 992px while the menu was still collapsed. */
.nav-1600-up {
    display: none !important;
}

@media (min-width: 1201px) {
    .nav-1600-up {
        display: block !important;
    }

    .nav-1600-down {
        display: none !important;
    }

    /* The navbar-expand-* equivalent, applied at our own breakpoint. */
    .navbar-expand-1600 {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-1600 .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-1600 .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .navbar-expand-1600 .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-1600 .navbar-toggler {
        display: none;
    }

    /* Replaces justify-content-lg-around, which was keyed to the old breakpoint. */
    .justify-content-nav-around {
        justify-content: space-around !important;
    }

    /* Logo and the links sit on one row once expanded. Below the breakpoint
       .nav-left stays block-level, which is what lets the opened menu drop
       BENEATH the logo instead of alongside it. */
    .nav-left {
        display: flex;
        align-items: center;
    }
}

/* Site logo in the navbar. Always visible now — on narrow screens it pairs with
   the hamburger on the right, so it is capped to leave room for the toggler. */
.navbar-logo img {
    height: 60px;
    width: auto;
    max-width: 100%;
}

/* @media (max-width: 575.98px) {
    .navbar-logo img {
        height: 44px;
    }
} */

/* Collapsed-menu panel styling — applies wherever the hamburger is in use. */
@media (max-width: 1200px) {
    .navbar-container .navbar {
        position: relative;
    }

    /* The open menu is taken OUT of the flow and floated under the bar. In flow it
       stretched .nav-left, and the navbar's align-items:center then shifted the
       logo up and the hamburger down as the menu opened. Absolute keeps the bar a
       fixed height, so logo and hamburger stay put whether it's open or closed. */
    .navbar-container .navbar-collapse {
        position: absolute;
        top: 100%;
        /* Anchored right so the panel drops directly beneath the hamburger that
           opens it, rather than across on the logo side. max-width keeps it from
           reaching past the left edge on narrow screens. */
        right: 0;
        left: auto;
        z-index: 1030;
        min-width: 240px;
        max-width: calc(100vw - 1.5rem);
        background-color: #fff;
        padding: 1rem 1.25rem;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

nav {
    height: var(--nav-height);
}

.nav-link {
    padding: 0;
    font-weight: 700;
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 14px;
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--suss-blue-light);
}

.nav-item {
    margin-left: 20px;
    /* border-bottom: 2px solid transparent; */
}
/* .nav-item:hover {
    border-bottom: 2px solid #fff;
} */
/* Stacked spacing for the items while the menu is collapsed — must match the
   1600px hamburger breakpoint above, not Bootstrap's lg. */
@media (max-width: 1200px) {
    .nav-item {
        margin-left: 0;
        padding: 10px 15px 15px;
    }
}

.header_logo {
    width: 50px;
}
@media screen and (min-width: 768px) {
    .header_logo {
        width: auto;
    }
}

/* ===== Section #section_banner ==================== */

#section_banner {
    margin-top: var(--nav-height);
}

/* ===== Body ==================== */

/* .page-content {} */

.row-icon {
    display: flex;
    position: relative;
    /* margin-left: 72px; */
    align-items: flex-start;
    gap: 20px;
    padding: 14px 26px 14px 14px;
}
.row-icon.center {
    align-items: center;
}

.row-icon-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.row-icon-label {
    font-weight: bold;
    color: var(--suss-red);
}

/* ===== Section #section_intro ==================== */

#section_intro {
    text-align: center;
}

.intro-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* aspect-ratio: 1 / 1; */
    padding: 50px;
    /* color: #fff; */
    border-radius: 10px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    outline: none;
}
@media screen and (max-width: 991px) {
    .intro-panel {
        padding: 40px;
    }
}
@media screen and (max-width: 767px) {
    .intro-panel {
        padding: 30px;
    }
}
@media screen and (max-width: 576px) {
    .intro-panel {
        padding: 30px 20px;
    }
}

.intro-panel p {
    margin-bottom: 0;
    text-align: center;
}

.intro-panel-img {
    margin: 0 auto;
}

.intro-panel-img img {
    max-width: 70%;
    margin: 0 auto;
}

/* ===== Section Intro > Counter container ==================== */

.counter-panel {
    padding: 1.75rem;
    border-radius: 20px;
    /* background-color: rgba(250, 250, 250, 0.5); */
    background-color: #9ADBE880;
}

.counter-panel-divider {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 30, 96, 0.15);
}

@media screen and (min-width: 992px) {
    .counter-panel-divider {
        margin-top: 0;
        padding-top: 0;
        /* padding-left: 2rem; */
        border-top: 0;
        border-left: 1px solid rgba(0, 30, 96, 0.15);
    }
}

@media screen and (max-width: 576px) {
    .counter-panel {
        padding: 1.25rem 1rem;
    }
}

/* ===== Section Intro > Counter container > info stats ==================== */

/* Icon + label/value tile. Transparent — the surrounding .counter-panel
   supplies the only background. height:100% keeps a side-by-side pair level. */
.info-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.5rem 0;
}

.info-stat-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    color: #fff;
    border-radius: 50%;
    background-color: var(--suss-blue);
}

.info-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let long values wrap instead of overflowing the tile */
}

.info-stat-body > * {
    text-align: left;
}

.info-stat-label {
    font-weight: 700;
    line-height: 1.2;
    color: var(--suss-blue);
}

.info-stat-value {
    font-size: 0.9rem;
    line-height: 1.35;
}

@media screen and (max-width: 991px) {
    .info-stat {
        gap: 0.7rem;
    }

    .info-stat-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .info-stat-value {
        font-size: 0.85rem;
    }
}

/* ===== Section Intro > Counter container > Counter ==================== */

/* Transparent — the surrounding .counter-panel supplies the only background. */
.counter {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.counter-container {
    max-width: 780px;
    margin: 1rem auto 0;
    font-size: 1.25rem;
    font-weight: 300;
}

.counter-number-text > * {
    min-width: 140px;
    padding: 10px 20px;
}

.counter-number {
    margin-bottom: 10px;
    font-size: 4.2rem;
    font-weight: 600;
    color: var(--darkblue);
    line-height: 1em;
}

@media screen and (max-width: 991px) {
    .counter-container {
        font-size: 1rem;
    }

    .counter-number-text > * {
        min-width: 95px;
    }

    .counter-number {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .counter-container {
        font-size: 1rem;
    }

    .counter-number-text > * {
        min-width: 65px;
    }

    .counter-number {
        font-size: 22px;
    }
}

@media screen and (max-width: 576px) {
    .counter-container {
        font-size: 1rem;
    }

    .counter-number-text > * {
        /* min-width: 60px; */
        padding: 0;
    }

    .counter-number {
        font-size: 20px;
    }
}

/* ===== Section Intro > Footer ==================== */

.intro-footer-wrap {
    position: relative;
}
.intro-footer {
    position: relative;
}
.intro-footer-wide   { z-index: 1; } /* below bot-rig */
.intro-footer-narrow { z-index: 3; } /* above bot-rig */

.img-bot-rig {
    position: absolute;
    right: 0;
    bottom: 0;                 /* bottom-aligns to the intro footer */
    width: 30%;                /* controls the graphic size (and how far it pokes up) */
    aspect-ratio: 1712 / 2385; /* bot-rig's own ratio; taller than the footer, so the
                                  top extends up (overlaps) into the section above */
    background-image: url('../images/bg/bot-rig-v2.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;                /* above w4000 (1); below w0800 (3) and the section text */
    pointer-events: none;
}
/* @media screen and (max-width: 991px) {
    .img-bot-rig {
        width: 50%;
    }
} */
@media screen and (max-width: 576px) {
    .img-bot-rig {
        display: none;
    }
}

/* Lift the intro section's content so the bot-rig graphic that overlaps up from
   the footer stays BEHIND the text (but still above the section's white bg). */
#section_intro > .col-12 {
    position: relative;
    z-index: 3;
}

/* ===== KEYDATES ==================== */

.key-dates-list-item {
    display: inline-block;
    width: 310px;
    padding: 20px 30px;
    text-align: center;
    color: #fff;
    border-radius: 50px;

    background: var(--suss-blue);
    background: -moz-linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    background: -webkit-linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    background: linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1);
}
.key-dates-list-item.alt {
    color: #fff;

    background: var(--suss-blue);
    background: -moz-linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    background: -webkit-linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    background: linear-gradient(10deg, var(--suss-blue), var(--suss-blue-light) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1);
}

/* ===== KEY DATES timeline ==================== */

.key-dates {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}
.header-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

.header-row-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--suss-blue);
    color: #fff;
    font-size: 26px;
    z-index: 9;
}
.header-row-icon.blue-light {
    background-color: #4FB6DA;
}
.header-row-icon.red {
    background-color: var(--suss-red);
}
.header-row-icon.green-lime-light {
    background-color: #A2C037;
}

.header-row-icon img {
    width: 30px;
    height: 30px;
}

.header-row-title {
    margin: 0;
    color: var(--suss-blue);
    font-family: 'montserrat-bold', sans-serif;
    letter-spacing: 1px;
    font-size: 28px;
    line-height: 1.2;
}

.key-dates__timeline {
    position: relative;
}
/* vertical timeline line — runs up to the calendar icon and down to the last dot */
.key-dates__timeline::before {
    content: "";
    position: absolute;
    top: -40px;
    bottom: 48px;
    left: 31px;
    width: 2px;
    background-color: #dcdcdc;
    z-index: 0;
}
.key-dates__item {
    position: relative;
    margin-bottom: 20px;
}
.key-dates__item:last-child {
    margin-bottom: 0;
}
/* coloured dot sitting on the line */
.key-dates__item::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--kd-color, var(--suss-blue));
    z-index: 2;
}
/* dotted connector from the dot to the card */
.key-dates__item::after {
    content: "";
    position: absolute;
    left: 40px;
    top: 50%;
    width: 32px;
    border-top: 2px dotted #cfcfcf;
    z-index: 0;
}
.key-dates__card {
    position: relative;
    margin-left: 72px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 26px 14px 14px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}
.key-dates__title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--suss-blue);
    font-family: 'montserrat-bold', sans-serif;
    font-size: 21px;
    line-height: 1.25;
}
.key-dates__divider {
    align-self: stretch;
    width: 2px;
    margin: 8px 0;
    background-color: #d3d3d3;
}
.key-dates__date {
    flex-shrink: 0;
    min-width: 150px;
    text-align: right;
    color: var(--suss-blue);
    font-family: 'montserrat-bold', sans-serif;
    font-size: 21px;
    line-height: 1.3;
}

/* per-row accent colour (dot + icon circle) */
.key-dates__item--navy { --kd-color: #001E60; }
.key-dates__item--blue { --kd-color: #4FB6DA; }
.key-dates__item--lime { --kd-color: #A2C037; }
.key-dates__item--red  { --kd-color: #DA291C; }

@media (max-width: 767px) {
    .header-row-icon { 
        width: 52px; 
        height: 52px; 
        font-size: 22px; }
    .header-row-title { 
        font-size: 24px; 
    }
    .key-dates__timeline { 
        padding-left: 0; 
    }
    .key-dates__timeline::before,
    .key-dates__item::before,
    .key-dates__item::after { 
        display: none; 
    }
    .key-dates__card {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 14px;
        padding: 14px;
    }
    .key-dates__title { 
        flex-basis: calc(100% - 70px); 
        font-size: 18px; 
    }
    .key-dates__divider { 
        display: none; 
    }
    .key-dates__date {
        width: 100%;
        min-width: 0;
        text-align: left;
        font-size: 17px;
    }
    .key-dates__date {
        text-align: center;
    }
}

/* ===== Weekly Challenge brief ===== */
.challenge-brief {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 30px 36px;
    background-color: #eaf4fb;
    border-radius: 20px;
    margin-bottom: 26px;
}
.challenge-brief__icon {
    flex-shrink: 0;
    width: 120px;
    text-align: center;
    color: var(--suss-blue);
    font-size: 66px;
    line-height: 1;
}
.challenge-brief__title {
    margin: 0 0 10px;
    color: var(--suss-blue);
    font-family: 'montserrat-bold', sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 1.2;
}
.challenge-brief__desc {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

/* Small "Week of XX" pill — same light-blue box as .challenge-brief, no header,
   smaller padding. Inline so it hugs its content (centre it via a wrapper). */
.challenge-weekbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 22px;

    font-family: 'montserrat-bold', sans-serif;
    text-align: center;
    color: var(--suss-blue);

    border-radius: 14px;
    background-color: #eaf4fb;
}
.challenge-weekbox i {
    font-size: 1.4rem;
}

.challenge-meta {
    display: flex;
    align-items: stretch;
    padding: 26px 20px;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    margin-bottom: 30px;
}
.challenge-meta__col {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 4px 24px;
}
.challenge-meta__divider {
    width: 1px;
    align-self: stretch;
    background-color: #e2e2e2;
}
.challenge-meta__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cm-color, var(--suss-blue));
    color: #fff;
    font-size: 26px;
}
.challenge-meta__col--winner   { 
    --cm-color: var(--suss-red); 
}
.challenge-meta__col--criteria { 
    --cm-color: var(--suss-blue); 
}
.challenge-meta__label {
    margin: 0 0 4px;
    color: var(--suss-blue);
    font-family: 'montserrat-bold', sans-serif;
    font-size: 18px;
}
.challenge-meta__text {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.45;
}

/* submit button + notes */
.challenge-submit {
    text-align: center;
    margin-top: 10px;
}
.challenge-submit .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.challenge-submit__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 0;
    color: #6c757d;
    font-size: 14px;
}

@media (max-width: 576px) {
    .challenge-brief {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px;
    }
    .challenge-brief__icon { 
        width: auto; 
        font-size: 52px; 
    }
    .challenge-meta { 
        flex-direction: column; 
        gap: 22px; 
        padding: 24px; 
    }
    .challenge-meta__col { 
        padding: 0; 
    }
    .challenge-meta__divider { 
        width: auto; 
        height: 1px; 
    }
}

/* ===== Prizes ===== */
.prize-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.prize-card__num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--suss-red);
    color: #fff;
    font-family: 'montserrat-bold', sans-serif;
    font-size: 20px;
}
.prize-card__media {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px 4px;
}
.prize-card__media img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
}
.prize-card__footer {
    position: relative;
    margin-top: -6px;
    padding: 42px 22px 30px;
    text-align: center;
    background-color: var(--pc-color, var(--suss-blue));
    border-radius: 45% 45% 0 0 / 34px 34px 0 0;
}
.prize-card__name {
    margin: 0;
    color: var(--pc-text, #fff);
    font-family: 'montserrat-bold', sans-serif;
    font-size: 20px;
    line-height: 1.3;
}
.prize-card__name::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    margin: 14px auto 0;
    background-color: var(--suss-red);
    border-radius: 2px;
}
.prize-card--navy { --pc-color: #001E60; --pc-text: #fff; }
.prize-card--blue { --pc-color: #9ADBE8; --pc-text: var(--suss-blue); }
.prize-card--lime { --pc-color: #C4D600; --pc-text: var(--suss-blue); }

/* ===== Section #section_challengeCat ==================== */

#section_challengeCat {
    text-align: center;
    background-color: #e6e7e8;
}

#section_challengeCat .headerImg {
    width: 100%;
    max-width: 520px;
    padding-bottom: 3rem;
}

#section_challengeCat p {
    color: var(--suss-blue);
}

.challengeCat-list {
    display: inline-block;
    width: auto;
    margin: .5rem auto 1rem;
    padding: .5rem 1rem;
    /* color: #fff;
    transform: skew(-20deg);
    background: rgb(222,139,193);
    background: -moz-linear-gradient(90deg, rgba(222,139,193,1) 0%, rgba(0,107,170,1) 60%, rgba(0,79,150,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(222,139,193,1) 0%, rgba(0,107,170,1) 60%, rgba(0,79,150,1) 100%);
    background: linear-gradient(90deg, rgba(222,139,193,1) 0%, rgba(0,107,170,1) 60%, rgba(0,79,150,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1); */
}

/* .challengeCat-list span {
    display: inline-block;
    transform: skew(20deg);
} */

/* ===== Section #leaderboard ==================== */

.leaderboard-panel {}

.leaderboard-table {
    min-height: 170px;
}

/* ---- Leaderboard toggle buttons & rows ---------------- */
/* Toggle buttons styled as text links with an underline-style active state */
.lb-toggles .btn,
.lb-toggles .btn.btn-outline-primary {
    margin: .15rem .4rem;
    padding: .35rem .25rem;
    font-size: .9rem;
    color: var(--darkblue, #001842);
    background: transparent;
    border: none;
    border-bottom: 4px solid transparent;
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
    transition: color .15s ease, border-color .15s ease;
}

.lb-toggles .btn:hover,
.lb-toggles .btn.btn-outline-primary:hover,
.lb-toggles .btn:focus,
.lb-toggles .btn.btn-outline-primary:focus {
    color: var(--suss-red, #DA291C);
    background: transparent;
    border-bottom-color: rgba(220, 53, 69, .35);
    box-shadow: none;
    outline: none;
}

.lb-toggles .btn.active,
.lb-toggles .btn.btn-outline-primary.active {
    color: var(--darkblue, #001842);
    background: transparent;
    border-bottom: 4px solid var(--suss-red, #DA291C);
    box-shadow: none;
}

.lb-toggles .btn-group {
    margin: 0 .25rem .25rem 0;
    box-shadow: none;
}

/* ---- Pill (bill) buttons for the leaderboard toggles ---------------- */
.lb-toggles .btn,
.lb-toggles .btn.btn-outline-primary {
    margin: 0;
    padding: .35rem 1rem;
    border-radius: 0;
    border: 2px solid;
    background-color: #fff;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

/* Round only the outer edges of each toggle group, so the buttons sit flush
    against each other in the middle and form one pill at the ends. */
.lb-toggles .lb-toggle-group .btn:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
.lb-toggles .lb-toggle-group .btn:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* Mode group — blue */
.lb-toggles [data-toggle="mode"] .btn,
.lb-toggles [data-toggle="mode"] .btn.btn-outline-primary {
    color: var(--suss-blue, #001E60);
    border-color: var(--suss-blue, #001E60);
    background-color: #fff;
}
.lb-toggles [data-toggle="mode"] .btn.active {
    color: #fff;
    background-color: var(--suss-blue, #001E60);
}

/* Activity group — red */
.lb-toggles [data-toggle="activity"] .btn,
.lb-toggles [data-toggle="activity"] .btn.btn-outline-primary {
    color: var(--suss-red, #DA291C);
    border-color: var(--suss-red, #DA291C);
    background-color: #fff;
}
.lb-toggles [data-toggle="activity"] .btn.active {
    color: #fff;
    background-color: var(--suss-red, #DA291C);
}

/* Participant Category group — black */
.lb-toggles [data-toggle="cat"] .btn,
.lb-toggles [data-toggle="cat"] .btn.btn-outline-primary {
    color: #000;
    border-color: #000;
    background-color: #fff;
}
.lb-toggles [data-toggle="cat"] .btn.active {
    color: #fff;
    background-color: #000;
}

.lb-table th,
.lb-table td {
    vertical-align: middle;
}

.lb-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.lb-name:hover {
    color: var(--darkblue, #0d3d6b);
    text-decoration: underline;
}

.lb-name-group {
    color: inherit;
    text-decoration: none;
}
.lb-name-group:hover {
    color: var(--darkblue, #0d3d6b);
    text-decoration: underline;
}

.lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #e9ecef;
}

.lb-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #6c757d;
    font-size: .8rem;
    font-weight: 600;
}

/* ---- 'podium' leaderboard preset (leaderboard-table.php $lb_layout='podium')
 *
 * Top-3 showcase, all three cells inside ONE coloured box. The box's background
 * and text colour are supplied inline from the $lb_podium_bg / $lb_podium_fg
 * knobs, so everything below inherits `color` (currentColor) rather than
 * hard-coding a colour. Mobile: cells stack in natural 1-2-3 order. Desktop
 * (>=768px): cells sit in a row re-ordered to 2nd · 1st · 3rd via flex `order`,
 * bottom-aligned so the taller 1st-place cell stands proud in the centre. The
 * 1st-place cell always gets a larger portrait and larger type.
 */
.lb-podium {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;

    border: 4px solid #fff;

    border-radius: 12px;
    border-bottom-left-radius: 400px 200px;
    border-bottom-right-radius: 400px 200px;

    /* box-shadow: 0 6px 18px rgba(0, 0, 0, .18); */
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    /* background + color are set inline via $lb_podium_bg / $lb_podium_fg */
}
@media screen and (max-width: 767px) {
    .lb-podium {
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
    }
}
@media screen and (max-width: 576px) {
    .lb-podium {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}

.lb-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 240px;
    transition: transform .15s ease;
}
.lb-podium-item:hover {
    color: inherit;
    transform: translateY(-3px);
}

.lb-podium-pos {
    font-family: 'montserrat-bold', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    opacity: .85;
}

.lb-podium-portrait img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #e9ecef;
    border: 4px solid currentColor;
}

.lb-podium-name {
    margin-top: .75rem;
    font-weight: 600;
    word-break: break-word;
}

.lb-podium-value {
    margin-top: .25rem;
    font-family: 'montserrat-bold', sans-serif;
    font-weight: 700;
}

/* 1st place — larger portrait and larger type, everywhere. */
.lb-podium-1 .lb-podium-pos    { font-size: 1.4rem; opacity: 1; }
.lb-podium-1 .lb-podium-portrait img {
    width: 140px;
    height: 140px;
}
.lb-podium-1 .lb-podium-name   { font-size: 1.2rem; }
.lb-podium-1 .lb-podium-value  { font-size: 1.35rem; }

/* 1st place — render the "1st" label sitting inside a gold crown icon. */
.lb-podium-pos-crown {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lb-podium-pos-crown .fa-crown {
    color: #FFD700; /* gold */
    font-size: 2.8rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.lb-podium-pos-crown .lb-podium-pos-label {
    position: absolute;
    left: 50%;
    top: 64%; /* sit on the crown's lower band, not the points */
    transform: translate(-50%, -50%);
    font-size: .8rem;
    color: var(--suss-blue);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .45);
}

/* 1st place — sunburst rays around the portrait. The container is sized to the
   portrait so each ray can radiate out from its centre (see inline transforms
   in components/leaderboard-table.php). */
.lb-podium-1 .lb-podium-portrait {
    position: relative;
    display: inline-block;
    line-height: 0; /* drop the inline-image baseline gap so the centre is true */
}
.lb-podium-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background-color: #FFD700; /* gold */
}

.lb-podium-empty {
    width: 100%;
    color: inherit;
}

@media (min-width: 768px) {
    .lb-podium {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;
    }
    /* Desktop visual order: 2nd · 1st · 3rd */
    .lb-podium-1 { order: 2; }
    .lb-podium-2 { order: 1; }
    .lb-podium-3 { order: 3; }
}

/* Small phones: shrink the type/avatars a touch. The row-to-card stacking
   itself happens at <768px — see the .lb-table mobile block further down. */
@media (max-width: 575.98px) {
    .lb-table {
        font-size: .85rem;
    }
    .lb-avatar {
        width: 28px;
        height: 28px;
    }
    .lb-toggles .btn {
        font-size: .8rem;
        padding: .3rem .6rem;
    }
}

#leaderboard .h3 {}

/* #leaderboard .h4 {
    padding: .5rem;
    border-radius: 20px;
    background-color: rgba(250, 250, 250, .4);
} */

#leaderboard .h5 {}



.col-lb-rank            { width: 80px !important; text-align: center !important; background-color:red; }
.col-lb-individual-name,
.col-lb-group-name,
.col-lb-group-leader    { width: auto; }
.col-lb-activity        { width: 130px; }
.col-lb-category        { width: 130px; }
.col-lb-metric          { width: 180px; text-align: right !important; }

@media (max-width: 767px) {
    .col-lb-rank,
    .col-lb-individual-name,
    .col-lb-group-name,
    .col-lb-group-leader,
    .col-lb-activity,
    .col-lb-category,
    .col-lb-metric          { width: auto !important; }
}



/* OVERWRITE dataTables.min.css */
table.table.dataTable>:not(caption)>*>* {
    background-color: transparent !important;
}

/* ===== Section category ==================== */

.ico-num {
    max-width: 60px;
}

.ico-activities {
    max-height: 40px;
    padding: 0 .5rem;
}

/* 2x2 "fee grid" (index.php): a 1px line always separates the cells, with no
   border on the outer edges. Right border on the left column draws the vertical
   divider; bottom border on the top row draws the horizontal one. */
.fee-grid > .col {
    padding: 1rem;
}
.fee-grid > .col:nth-child(odd) {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}
.fee-grid > .col:nth-child(-n + 2) {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* ===== Section category > impact ==================== */


/* ===== Section #progress ==================== */

/* ---- info boxes ---------------- */

.stat-col { 
    border: none; 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
}

/* Coloured circle with a white icon above each stat's number/label */
.stat-col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
}
/* <md (mobile): stack, dividers below all but last */
.stat-col:not(:last-child) { 
    border-bottom: 1px solid var(--darkblue); 
}

@media (min-width: 768px) {
    /* md: 2x2 — right border on odd items, bottom border only on top row */
    .stat-col:not(:last-child) { border-bottom: none; }
    .stat-col:nth-child(odd)   { border-right: 1px solid var(--darkblue); }
    .stat-col:nth-child(-n+2)  { border-bottom: 1px solid var(--darkblue); }
}

@media (min-width: 992px) {
    /* lg+: 4 in a row — only right borders on items 1-3, no bottom borders */
    .stat-col:nth-child(-n+2)  { border-bottom: none; }
    .stat-col                  { border-right: 1px solid var(--darkblue); }
    .stat-col:last-child       { border-right: none; }
}

/* ---- progress bars ---------------- */

.progress-box {
    /* height: 340px; */
    padding: 3px;
    border-radius: 65px;
}
@media screen and (max-width: 767px) {
    .progress-box {
        border-radius: 15px;
    }
}

.progress {
    height: 35px;
    /* padding: 3px; */
    border: 4px solid transparent;
    border-radius: 16px;

    /* COMBINED BAR: */
    height: 60px;
    border-radius: 30px;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .progress {
        border-radius: 15px;
    }
}

.progress-1 {
  background: 
    linear-gradient(#02217b, #02217b) padding-box, /* Inner background color */
    linear-gradient(to right, var(--bar-1-left), var(--bar-1-right)) border-box;
}
.progress-2 {
  background: 
    linear-gradient(#02217b, #02217b) padding-box, /* Inner background color */
    linear-gradient(to right, var(--bar-2-left), var(--bar-2-right)) border-box;
}
.progress-3 {
  background: 
    linear-gradient(#02217b, #02217b) padding-box, /* Inner background color */
    linear-gradient(to right, var(--bar-3-left), var(--bar-3-right)) border-box;
}

.progress-bar {
    /* border-radius: 16px; */

    /* COMBINED BAR: */
    /* height: 47px; */
    /* border-radius: 30px; */
}
.progress-1 .progress-bar {
    background-image: linear-gradient(to right, var(--bar-1-left), var(--bar-1-right));
}
.progress-2 .progress-bar {
    background-image: linear-gradient(to right, var(--bar-2-left), var(--bar-2-right));
}
.progress-3 .progress-bar {
    background-image: linear-gradient(to right, var(--bar-3-left), var(--bar-3-right));
}

.progress-bar-radius.tl {
    border-top-left-radius: 30px;
}
.progress-bar-radius.tr {
    border-top-right-radius: 30px;
}
.progress-bar-radius.bl {
    border-bottom-left-radius: 30px;
}
.progress-bar-radius.br {
    border-bottom-right-radius: 30px;
}
@media screen and (max-width: 767px) {
    .progress-bar-radius.tl {
        border-top-left-radius: 10px;
    }
    .progress-bar-radius.tr {
        border-top-right-radius: 10px;
    }
    .progress-bar-radius.bl {
        border-bottom-left-radius: 10px;
    }
    .progress-bar-radius.br {
        border-bottom-right-radius: 10px;
    }
}

/* ---- Flat unified progress bar with white frame + 3D drop shadow ----
 *
 * The 3D gloss/groove gradients have been removed — each segment keeps only its
 * flat left-to-right colour gradient. The unified track is framed with a white
 * border and lifted off the page with an outer drop shadow, so the whole bar
 * reads as 3D without any gloss overlay. The combined-bar segments
 * (bg-success/warning/info) are remapped to the three --bar-* gradient pairs so
 * colour identity matches the per-activity bars.
 */
.progress-box .progress {
    background-color: rgba(0, 0, 0, .25);
    border: 4px solid #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

.progress-box .progress-bar {
    position: relative;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Combined-bar segments: remap Bootstrap colour classes to the --bar-* gradients */
.progress-box .progress-bar.bg-success {
    background: linear-gradient(to right, var(--bar-1-left), var(--bar-1-right)) !important;
}
.progress-box .progress-bar.bg-warning {
    background: linear-gradient(to right, var(--bar-2-left), var(--bar-2-right)) !important;
}
.progress-box .progress-bar.bg-info {
    background: linear-gradient(to right, var(--bar-3-left), var(--bar-3-right)) !important;
}


/* ---- Floating, slightly-skewed rows for leaderboard tables ----
 *
 * Each row reads as a flat parallelogram-shaped "card", separated from its
 * neighbours by vertical whitespace. The skew lives on a positioned ::before
 * pseudo so the row's text stays upright; `isolation: isolate` keeps the
 * negative-z-index ::before behind the cell content without it falling
 * behind the table itself.
 *
 * `.table-responsive`'s overflow:auto would clip the skewed corners and add
 * a horizontal scrollbar, so we override it (and DataTables') to visible.
 */
.table-responsive:has(.lb-table) {
    overflow: visible;
}

.lb-table {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}

.lb-table thead th {
    border: none;
    background: transparent;
    color: var(--darkblue, #001842);
    font-weight: 700;
    padding-bottom: 0;
}

.lb-table tbody tr td,
.lb-table tbody tr th {
    position: relative;
    isolation: isolate;
    border: none;
    padding: 14px 16px;
    vertical-align: middle;
    background: transparent !important;
}

/* Skewed card sitting behind the cell content — light-blue-grey top fading to
   a touch darker at the bottom, just enough to suggest depth without the
   strong 3D bevels we backed away from. */
.lb-table tbody tr td::before,
.lb-table tbody tr th::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #f3f7fc 0%, #d6dfeb 100%);
    transform: skewX(-6deg);
}

/* Round only the outer corners of the parallelogram so it reads as one pill */
.lb-table tbody tr > *:first-child::before { border-radius: 14px 0 0 14px; }
.lb-table tbody tr > *:last-child::before  { border-radius: 0 14px 14px 0; }

/* Hover: slight tone shift, still flat */
.lb-table tbody tr:hover td::before,
.lb-table tbody tr:hover th::before {
    background: linear-gradient(180deg, #ebf2fa 0%, #c4d2e4 100%);
}

@media (max-width: 767.98px) {
    .lb-table tbody tr td::before,
    .lb-table tbody tr th::before {
        background: none !important;
    }
}

/* Neutralise Bootstrap's .table-striped AND DataTables' own .odd/.even
   row tints — both apply alternating darker backgrounds that fight the
   flat parallelogram card. */
.lb-table.table-striped > tbody > tr:nth-of-type(odd) > *,
.lb-table.table-striped > tbody > tr:nth-of-type(even) > *,
.lb-table > tbody > tr.odd > *,
.lb-table > tbody > tr.even > *,
.lb-table > tbody > tr.odd,
.lb-table > tbody > tr.even {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Mobile: a 4-6 column leaderboard can't fit a phone, so each row stacks into
   a single-column card. The <thead> is hidden and every cell prints its column
   name (from data-label) beside its value. The skewed per-cell pill is dropped:
   the card background moves up to the <tr>, so one row = one card.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .lb-table thead {
        display: none;
    }

    .lb-table,
    .lb-table tbody,
    .lb-table tbody tr,
    .lb-table tbody tr td {
        display: block;
        width: 100%;
    }

    .lb-table {
        border-spacing: 0 !important;
    }

    /* The card is now the whole row, not each cell. */
    .lb-table tbody tr {
        margin-bottom: 14px;
        padding: 4px 2px;
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(180deg, #f3f7fc 0%, #d6dfeb 100%);
    }
    .lb-table tbody tr:hover {
        background: linear-gradient(180deg, #ebf2fa 0%, #c4d2e4 100%);
    }

    .lb-table tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 8px 14px;
        text-align: right;
    }
    .lb-table tbody tr td + td {
        border-top: 1px solid rgba(0, 30, 96, 0.08);
    }

    /* Re-purpose the ::before that drew the skewed pill — it now prints the
       column name in front of the value. Every positioning prop is reset. */
    .lb-table tbody tr td::before {
        content: attr(data-label);
        position: static;
        inset: auto;
        z-index: auto;
        transform: none;
        background: none;
        border-radius: 0;
        flex: 0 0 auto;
        font-weight: 700;
        text-align: left;
        color: var(--darkblue, #001842);
    }

    /* The name is the card's title: full width, no label in front of it. */
    .lb-table tbody tr td.col-lb-individual-name,
    .lb-table tbody tr td.col-lb-group-name {
        display: block;
        padding-bottom: 10px;
        font-size: 1rem;
        font-weight: 700;
        text-align: left;
    }

    /* Cells that must not show a label: the card title and the empty states
       (ours, plus the one DataTables injects when a search matches nothing). */
    .lb-table tbody tr td.col-lb-individual-name::before,
    .lb-table tbody tr td.col-lb-group-name::before,
    .lb-table tbody tr td.lb-empty::before,
    .lb-table tbody tr td.dataTables_empty::before {
        content: none;
    }

    .lb-table tbody tr td.lb-empty,
    .lb-table tbody tr td.dataTables_empty {
        display: block;
        text-align: center;
    }

    /* Leader keeps avatar + name, but aligned to the value (right-hand) side. */
    .lb-table tbody tr td.col-lb-group-leader .lb-name {
        justify-content: flex-end;
    }
}


/* ===== Section #sponsors ==================== */

.partner-logos {
    gap: 20px;
}

.partner-logo {
    padding: 3rem;
    align-content: center;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
    .partner-logo {
        padding: 1rem;
    }
}

/* ===== Section #section_faq ==================== */

/* #section_faq {
    text-align: center;
    background-color: #e6e7e8;
}

#section_faq .card {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

#section_faq .card-header {
    border: none !important;
    background-color: transparent !important;
}

#section_faq .card-body {
    padding: 1.25rem 2rem;
}

#section_faq .btn,
#section_faq .btn:hover {
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

.faq-app {
    padding-bottom: 1rem;
    font-size: smaller;
}

.faq-app img {
    width: 48px;
    height: 48px;
} */

/* ===== Users > #section_register ==================== */

#registerTabs { flex-direction: row !important; flex-wrap: nowrap; }
#registerTabs .nav-item { flex: 1 1 50%; }
#registerTabs .nav-link { width: 100%; white-space: normal; text-align: center; }

#section_register .card {
    border: none !important;
}

/* #section_register .preSuccess {
    display: none;
}

#section_register .preSuccess {
    display: none;
} */

/* ===== Users > #section_login ==================== */

/* ===== Users > #section_recoverpw ==================== */

/* ===== Users > #section_member ==================== */

.member-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 50px;
    color: #fff;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    outline: none;
}

.member-panel.one {
    background-image: url('../images/intro-panel-1-bg.png');
}
.member-panel.two {
    background-image: url('../images/intro-panel-2-bg.png');
}
.member-panel.three {
    background-image: url('../images/intro-panel-3-bg.png');
}

a.member-panel,
a.member-panel:hover,
a.member-panel:active {
    text-decoration: none;
}

a.member-panel > .subheader {
    color: #fff;
    text-align: center;
    text-decoration: none;
    /* border-bottom: 2px solid transparent; */
}
/* a.member-panel:hover > .subheader,
a.member-panel:active > .subheader {
    border-bottom: 2px solid #fff;
} */

.member-panel p {
    margin-bottom: 0;
}

/* ===== Users > #section_profile ==================== */

#section_profile .card {
    border: none !important;
}

/* ---- Activity progress bar (components/activity-progress.php) ---------------- */
.activity-progress {
    padding: 1rem 1rem 2rem;
    color: #fff;
    border-radius: 30px;
    
    background: var(--suss-blue-light);
    background: -moz-linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    background: -webkit-linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    background: linear-gradient(90deg, #4e74bb, #3a9dbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de8bc1",endColorstr="#004f96",GradientType=1);
}

.activity-progress .ap-bar {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 32px;
    margin: .5rem auto 0;
    border: 3px solid #fff;
    border-radius: 999px;
    background-color: #e9ecef;
    overflow: hidden;
}

.activity-progress .ap-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(245deg, #4e74bb, #3a9dbd 100%);
    transition: width .4s ease;
}

.activity-progress .ap-bar-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: 26px;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---- Share URL button (member.php) ---------------- */

.share-url-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .5rem 1rem;
    font-family: monospace;
    font-size: .95rem;
    color: var(--darkblue, #001842);
    background-color: #f7f7f7;
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    word-break: break-all;
}

.share-url-btn:hover {
    background-color: #eef3f9;
    border-color: var(--darkblue, #001842);
}

.share-url-copied {
    display: none;
    color: var(--suss-red, #DA291C);
    font-weight: 600;
}

.share-url-btn.share-url-copied-state .share-url-text {
    display: none;
}

.share-url-btn.share-url-copied-state .share-url-copied {
    display: inline;
}

/* ===== Public profile pages ==================== */

.pp-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #e9ecef;
}

.pp-photo-sm {
    width: 80px;
    height: 80px;
}

.pp-photo-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #6c757d;
    font-size: 2rem;
    font-weight: 600;
}

.pp-photo-sm.pp-photo-initials {
    font-size: 1.2rem;
}

/* ===== Footer ==================== */

.footer {
    color: #fff;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer-address {}

.footer-links {}

.footer-social {}

.footer-social .social-links li {
    margin: 0;
}

.footer-social .social-links {
    display: flex;
    margin: 1rem 0 2rem;
    padding: 0;
    list-style-type: none;
}

.footer-social a.icon-social {
    font-size: 1rem;
    line-height: 1em;
    margin-right: 1rem;
}

.footer-social .icon-social span {
    font-size: 1rem;
    line-height: 1em;
    height: 24px;
    width: 24px;
}