/* Used by the project page template (single.html). */

@import url("https://fonts.googleapis.com/css2?family=Calistoga&family=DM+Sans:wght@400;500;700&family=Poppins:wght@600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");

/* Navbar bar itself has no background or shadow.
   The Projects dropdown keeps its normal dark background. */
body.project-page header,
body.project-page .navbar {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

}

/* Text shadow so the cream text stays readable on any background */
body.project-page .navbar .nav-link,
body.project-page .navbar .dropdown-item,
body.project-page .navbar .join-us-btn {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(0, 0, 0, 0.35);
}

/* Projects dropdown: same colour as the hero band */
body.project-page #projects-dropdown .nav-dropdown-menu {
    background-color: var(--bg-sage-main) !important;
}

body.project-page #projects-dropdown .dropdown-item:hover,
body.project-page #projects-dropdown .dropdown-item:focus {
    background-color: var(--card-green) !important;
    /* a shade darker for hover */
    color: var(--neutral) !important;
}


/* ---------- Theme colours (green, default) ---------- */
body.project-page {
    --bg-sage-main: #C8D5B9;
    --bg-sage-sub: #DCE1DE;
    --text-dark: #1F2421;
    --card-green: #9CC5A1;
    --card-text: #1F2421;
    --card-impact-text: #FFFFFF;
    --bg-timeline: #9CC5A1;
    --pill-timeline: #DCE1DE;
    --text-timeline: #000000;
    --card-contrib: #49A078;
    --card-contrib-text: #FFFFFF;
    --bg-team: #478C78;
    --team-text: #1F2421;
    --wave-dark: #2A716C;
    --wave-light: #8FC0A9;
    --social-color: #5E6457;
}

/* ---------- Theme colours (blue, St Kilda) ---------- */
body.project-page.theme-blue {
    --bg-sage-main: #97B2E5;
    --bg-sage-sub: #E3ECF8;
    --text-dark: #103477;
    --card-green: #7BA1DE;
    --card-text: #103477;
    --card-impact-text: #FFFFFF;
    --bg-timeline: #7BA1DE;
    --pill-timeline: #E3ECF8;
    --text-timeline: #103477;
    --card-contrib: #1B4588;
    --card-contrib-text: #FFFFFF;
    --bg-team: #153A73;
    --team-text: #FFFFFF;
    --wave-dark: #0E2650;
    --wave-light: #507ABF;
    --social-color: #103477;

    --secondary: #FFFFFF;
    --dark2: #1B4588;       
}

/* ---------- Page base ---------- */
body.project-page {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-sage-sub);
    overflow-x: hidden;
}

/* ---------- Section 1: Hero ---------- */
.hero-top-band {
    background-color: var(--bg-sage-main);
    padding-top: 110px;
    padding-bottom: 25px;
    position: relative;
}

.project-title {
    font-family: 'Calistoga', serif;
    font-size: 3.8rem;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.project-tagline {
    font-size: 1.25rem;
    color: var(--text-dark);
    font-weight: 500;
    margin: 0;
}

.hero-circle-illustration {
    max-width: 240px;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.torn-divider {
    width: 100%;
    height: 24px;
    display: block;
    overflow: hidden;
    line-height: 0;
}

.torn-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-summary-band {
    background-color: var(--bg-sage-sub);
    padding: 45px 0 55px 0;
    position: relative;
}

.summary-photo {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 6px 18px rgba(31, 36, 33, 0.08);
}

.summary-text {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: 400;
}

/* ---------- Section 2: Challenge, solution & stats ---------- */
.section-two-band {
    background-color: var(--bg-sage-main);
    padding: 50px 0 70px 0;
    position: relative;
}

.section-two-photo {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 6px 18px rgba(31, 36, 33, 0.08);
}

.challenge-title {
    font-family: 'Calistoga', serif;
    font-size: 2.3rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.challenge-text {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.impact-card-sampled {
    background-color: var(--card-green);
    border-radius: 22px;
    color: var(--card-impact-text);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(31, 36, 33, 0.04);
}

.tall-stat-card-sampled {
    background-color: var(--card-green);
    border-radius: 24px;
    padding: 2.25rem 1.5rem;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    color: var(--card-text);
    box-shadow: 0 4px 15px rgba(31, 36, 33, 0.04);
}

.tall-stat-card-sampled h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--card-text);
    margin-bottom: 1.5rem;
}

.tall-stat-content {
    color: var(--card-text);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- Section 3: Timeline ---------- */
.section-timeline-band {
    background-color: var(--bg-timeline);
    padding: 60px 0 80px 0;
    position: relative;
}

.timeline-outline-title {
    font-family: 'Calistoga', serif;
    font-size: 3.8rem;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2.5rem;
    letter-spacing: 1px;
}

.timeline-pill-sampled {
    background-color: var(--pill-timeline);
    border-radius: 26px;
    padding: 1.5rem 2rem;
    color: var(--text-timeline);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.timeline-pill-sampled strong {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-timeline);
}

.timeline-pill-sampled span {
    font-size: 1.05rem;
    color: var(--text-timeline);
}

/* ---------- Section 4: Contributions ---------- */
.section-contrib-band {
    background-color: var(--bg-sage-main);
    padding: 65px 0 85px 0;
    position: relative;
}

.contrib-card-sampled {
    background-color: var(--card-contrib);
    border-radius: 26px;
    overflow: hidden;
    border: none;
    color: var(--card-contrib-text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.contrib-card-sampled img {
    height: 190px;
    width: 100%;
    object-fit: cover;
}

.contrib-card-sampled h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--card-contrib-text);
}

.contrib-card-sampled p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- Section 5: Team ---------- */
.section-team-band {
    background-color: var(--bg-team);
    color: var(--team-text);
    padding: 70px 0 0 0;
    position: relative;
}

.team-title {
    font-family: 'Calistoga', serif;
    font-size: 3.4rem;
    color: var(--team-text);
    text-align: center;
    margin-bottom: 2rem;
}

.team-photo {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(31, 36, 33, 0.1);
}

.team-lead-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--team-text);
    margin-bottom: 0.4rem;
}

.team-lead-names {
    font-size: 1.15rem;
    color: var(--team-text);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.team-members-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--team-text);
    margin-bottom: 1rem;
}

.team-column-txt {
    font-size: 1rem;
    color: var(--team-text);
    line-height: 1.9;
}

.team-wave-divider {
    width: 100%;
    display: block;
    margin-bottom: -2px;
    line-height: 0;
}

/* ---------- Section 6: Future planning ---------- */
.section-future-band {
    background-color: var(--bg-sage-main);
    padding: 70px 0 50px 0;
    position: relative;
}

.future-planning-container {
    max-width: 820px;
    text-align: left;
}

.future-title {
    font-family: 'Calistoga', serif;
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.future-body-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 720px;
    margin-bottom: 2.5rem;
}

.learn-more-card-figma {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    max-width: 620px;
    box-shadow: 0 8px 24px rgba(31, 36, 33, 0.06);
}

.learn-more-card-figma img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
}

.learn-more-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
}

.learn-more-link-btn {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
}

.learn-more-link-btn:hover {
    text-decoration: underline;
    color: var(--text-dark);
}

/* ---------- Section 7: Socials ---------- */
.section-social-band {
    background-color: var(--bg-sage-main);
    padding: 40px 0 70px 0;
    text-align: center;
}

.social-title {
    font-family: 'Calistoga', serif;
    font-size: 1.8rem;
    color: var(--social-color);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.social-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 2.5rem;
}

.social-icon-link {
    color: var(--social-color);
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.social-icon-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
    color: var(--social-color);
}

@media (max-width: 991.98px) {
    body.project-page .navbar {
        transition: background-color 0.2s ease;
    }

    body.project-page .navbar:has(.navbar-collapse.show),
    body.project-page .navbar:has(.navbar-collapse.collapsing) {
        background-color: var(--wave-dark) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    }

    body.project-page .navbar:has(.navbar-collapse.show) .nav-link,
    body.project-page .navbar:has(.navbar-collapse.show) .join-us-btn {
        text-shadow: none;
    }
}

body.project-page #projects-dropdown .nav-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.project-page #projects-dropdown .dropdown-item {
    text-shadow: none;
}

body.project-page #projects-dropdown .dropdown-item:hover,
body.project-page #projects-dropdown .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--secondary) !important;
}

body.project-page .project-title,
body.project-page .project-tagline,
body.project-page .summary-text,
body.project-page .challenge-title,
body.project-page .challenge-text,
body.project-page .future-title,
body.project-page .future-body-text {
    color: var(--text-dark) !important;
}

.member-columns {
    column-count: 4;
    column-gap: 2rem;
}

.member-columns > div {
    break-inside: avoid;
}

@media (max-width: 991.98px) {
    .member-columns { column-count: 3; }
}

@media (max-width: 575.98px) {
    .member-columns { column-count: 2; }
}

@media (min-width: 992px) {
    body.project-page #projects-dropdown .nav-dropdown-menu {
        background-color: var(--bg-sage-main) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    }

    body.project-page #projects-dropdown .dropdown-item:hover,
    body.project-page #projects-dropdown .dropdown-item:focus {
        background-color: var(--card-green) !important;
        color: var(--neutral) !important;
    }
}