/*
 * pbl.css — Applied PBL Handbook
 * Custom styles for the PBL Handbook site
 * Extends the GRC SDEV design system
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --green-dark:   #205b10;
    --green-btn:    #2c882b;
    --green-hover:  #1c7430;
    --green-pale:   #d4edda;
    --green-light:  #eaf7ee;
    --red-pale:     #f8d7da;
    --red-text:     #721c24;
    --red-accent:   #c0392b;
    --dark-footer:  #1d2023;
    --text-dark:    #212529;
    --text-muted:   #6c757d;
    --border:       #dee2e6;
    --bg-page:      #fafafa;
    --bg-white:     #ffffff;
    --card-header:  #212529;
    --transition:   0.25s ease;
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: var(--bg-page);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

/* ── Navbar overrides ─────────────────────────────────────────────────────── */
.navbar {
    background-color: var(--green-dark) !important;
}

.navbar .nav-link.active-section {
    color: greenyellow !important;
    font-weight: 600;
}

.sdev-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-btn);
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-align: center;
}

/* ── Scroll offset for sticky nav ────────────────────────────────────────── */
section[id], div[id].scroll-target {
    scroll-margin-top: 60px;
}

/* ── Section spacing ──────────────────────────────────────────────────────── */
.pbl-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--border);
}

.pbl-section:last-of-type { border-bottom: none; }

.pbl-section.bg-white { background-color: var(--bg-white); }
.pbl-section.bg-light  { background-color: var(--bg-page); }

/* ── Section labels (green pills) ────────────────────────────────────────── */
.section-label {
    display: inline-block;
    background: var(--green-btn);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* ── Section headings ────────────────────────────────────────────────────── */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 780px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
#hero {
    background-color: var(--bg-white);
    border-bottom: 3px solid var(--green-btn);
    padding: 4rem 0 3rem;
}

.hero-badge {
    display: inline-block;
    background: var(--green-btn);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 3px;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 640px;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem 1rem;
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--green-btn);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.instructor-cta {
    background: var(--green-light);
    border: 1px solid var(--green-btn);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.instructor-cta p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--green-dark);
}

.instructor-cta a {
    color: var(--green-btn);
    font-weight: 600;
    text-decoration: none;
}

.instructor-cta a:hover { text-decoration: underline; }

/* ── Cycle cards (Learn→Build→Reflect) ───────────────────────────────────── */
.cycle-card {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-white);
    text-align: center;
}

.cycle-card-header {
    padding: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    letter-spacing: 0.05em;
}

.cycle-card-body {
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.cycle-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--green-btn);
    padding: 0 0.5rem;
}

/* ── PBL Cards (general) ─────────────────────────────────────────────────── */
.pbl-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.pbl-card-header {
    background: var(--card-header);
    color: white;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.pbl-card-header.green { background: var(--green-btn); }

.pbl-card-body {
    padding: 1rem;
}

.pbl-card-body ul {
    margin: 0;
    padding-left: 1.2rem;
}

.pbl-card-body li {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

/* ── Timeline (curriculum journey) ──────────────────────────────────────── */
.timeline-stage {
    position: relative;
}

.timeline-stage-label {
    background: var(--green-btn);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    padding: 5px 8px;
    border-radius: 4px 4px 0 0;
    letter-spacing: 0.03em;
}

.timeline-stage-card {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: var(--bg-white);
    padding: 1rem;
}

.timeline-stage-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
}

.timeline-stage-card ul {
    padding-left: 1.1rem;
    margin: 0;
}

.timeline-stage-card li {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.timeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-btn);
    font-size: 1.4rem;
    padding-top: 2rem;
}

.subsection-anchors {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.subsection-anchors strong {
    font-size: 0.9rem;
    color: var(--text-dark);
    white-space: nowrap;
}

.anchor-btn {
    display: inline-block;
    background: var(--green-light);
    border: 1px solid var(--green-btn);
    color: var(--green-dark);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background var(--transition);
}

.anchor-btn:hover {
    background: var(--green-pale);
    color: var(--green-dark);
    text-decoration: none;
}

/* ── Agile tabs ──────────────────────────────────────────────────────────── */
.agile-tabs .nav-link {
    color: var(--text-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 0 4px 4px 0;
    font-size: 0.9rem;
    padding: 6px 16px;
    background: var(--bg-white);
}

.agile-tabs .nav-link.active {
    background: var(--green-btn);
    color: white;
    border-color: var(--green-btn);
}

.agile-tabs .nav-link:hover:not(.active) {
    background: var(--green-light);
    border-color: var(--green-btn);
}

.agile-content-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 0.5rem;
    border-left: 4px solid var(--green-btn);
}

.agile-content-panel h5 {
    color: var(--green-dark);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* ── Capstone tools bar ──────────────────────────────────────────────────── */
.capstone-tools {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.tool-badge {
    display: inline-block;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 14px;
    font-size: 0.88rem;
    color: var(--text-dark);
    margin: 3px;
}

/* ── Lessons learned ─────────────────────────────────────────────────────── */
.lesson-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    transition: box-shadow var(--transition);
}

.lesson-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.lesson-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
    border-left: 4px solid var(--green-btn);
}

.lesson-card-header.didnt { border-left-color: var(--red-accent); }

.lesson-card-header h6 {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-dark);
}

.lesson-icon {
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.lesson-icon.worked { color: #27ae60; }
.lesson-icon.didnt  { color: var(--red-accent); }

.lesson-toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.lesson-card.open .lesson-toggle { transform: rotate(180deg); }

.lesson-body {
    display: none;
    padding: 0 1.1rem 1rem 2.8rem;
    font-size: 0.93rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.lesson-card.open .lesson-body { display: block; }

/* Key insights */
.insight-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.insight-header {
    background: var(--green-light);
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.insight-num {
    background: var(--green-btn);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-dark);
    padding-top: 2px;
}

.insight-body {
    padding: 1rem 1.1rem;
    font-size: 0.93rem;
    line-height: 1.65;
}

.insight-tip {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    color: var(--green-dark);
    font-style: italic;
    margin-top: 0.75rem;
}

/* ── Partners ────────────────────────────────────────────────────────────── */
.partner-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.partner-card-header {
    background: var(--card-header);
    color: white;
    padding: 0.7rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.partner-card-body {
    padding: 1rem;
    font-size: 0.93rem;
}

.partner-card-body ul {
    padding-left: 1.15rem;
    margin: 0;
}

.partner-card-body li { margin-bottom: 0.35rem; }

/* ── Assessment ──────────────────────────────────────────────────────────── */
.progression-bar {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.progression-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.prog-before {
    color: var(--text-muted);
    font-style: italic;
}

.prog-arrow {
    color: var(--green-btn);
    font-weight: 700;
    font-size: 1.1rem;
}

.prog-after {
    color: var(--green-dark);
    font-weight: 600;
}

/* ── Resources grid ──────────────────────────────────────────────────────── */
.resource-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.resource-card-header {
    background: var(--card-header);
    color: white;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.resource-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.resource-list li {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.resource-list li:last-child { border-bottom: none; }

.resource-list a {
    color: var(--text-dark);
    text-decoration: none;
    flex: 1;
}

.resource-list a:hover { color: var(--green-btn); }

.resource-dl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--green-light);
    border: 1px solid var(--green-btn);
    border-radius: 3px;
    color: var(--green-btn);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: 0.5em;
}

.resource-coming-soon {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* ── Implement steps ─────────────────────────────────────────────────────── */
.implement-step {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    height: 100%;
    position: relative;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--green-btn);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.implement-step h5 {
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.implement-step ul {
    padding-left: 1.15rem;
    margin: 0;
    font-size: 0.93rem;
}

.implement-step li { margin-bottom: 0.4rem; }

.pitfalls-box {
    background: var(--red-pale);
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 1.25rem;
}

.pitfalls-box h5 {
    color: var(--red-text);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pitfalls-box li {
    color: var(--red-text);
    font-size: 0.93rem;
    margin-bottom: 0.35rem;
}

.implement-cta {
    background: var(--green-light);
    border: 1px solid var(--green-btn);
    border-radius: 6px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.implement-cta p { margin: 0; color: var(--green-dark); }
.implement-cta strong { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }

.btn-pbl {
    display: inline-block;
    background: var(--green-btn);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background var(--transition);
    white-space: nowrap;
}

.btn-pbl:hover {
    background: var(--green-hover);
    color: white;
    text-decoration: none;
}

/* ── Research & Outcomes ─────────────────────────────────────────────────── */
.grant-item {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.grant-item h6 {
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.grant-item a {
    color: var(--green-btn);
    font-size: 0.85rem;
    word-break: break-all;
}

.impact-item {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.impact-item h6 {
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

/* ── Contributors ────────────────────────────────────────────────────────── */
.contributors-box {
    background: var(--green-light);
    border: 1px solid var(--green-btn);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}

.contributors-box h6 {
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.contributors-box a {
    color: var(--green-btn);
    text-decoration: none;
}

.contributors-box a:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.page-footer {
    background-color: var(--dark-footer);
    padding: 2rem 0 1.25rem;
    margin-top: auto;
}

.page-footer h5 {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.page-footer p { color: #adb5bd; font-size: 0.9rem; margin-bottom: 0.25rem; }

.page-footer a { color: #adb5bd; font-size: 0.9rem; text-decoration: none; }
.page-footer a:hover { color: #53ff0c; }

.footer-divider {
    border-color: #3a3f44;
    margin: 1rem 0;
}

.footer-bottom {
    color: #6c757d;
    font-size: 0.82rem;
}

/* ── Responsive helpers ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .section-title { font-size: 1.6rem; }
    .hero-title    { font-size: 1.75rem; }
    .pbl-section   { padding: 2.5rem 0; }
    .cycle-arrow   { transform: rotate(90deg); padding: 0.5rem 0; }
    .timeline-arrow { display: none; }
    .implement-cta { flex-direction: column; }
}

@media (max-width: 575px) {
    .stat-card { margin-bottom: 0.75rem; }
    .subsection-anchors { flex-direction: column; align-items: flex-start; }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-green    { color: var(--green-btn); }
.text-grc-dark { color: var(--green-dark); }
.bg-green-pale { background-color: var(--green-light); }
.border-green  { border-color: var(--green-btn) !important; }