/* orchard-theme.css
   Load AFTER bootstrap.css
   Updated: warm typography + remove Bootstrap blue accents + unify buttons with Orchard palette
   Source base file: :contentReference[oaicite:0]{index=0}
*/

/* ------------------------------
   1) Theme tokens
--------------------------------*/
:root {
    /* Warm ink (avoid pure black) */
    --orchard-ink: #43382f;
    --orchard-ink-soft: rgba(67, 56, 47, 0.88);
    --orchard-muted: rgba(67, 56, 47, 0.62);
    --orchard-cream: #fbf7ef;
    --orchard-paper: #fffdf8;
    --orchard-mist: #f4efe6;
    --orchard-sage: #7fa38e;
    --orchard-sage-deep: #6e967f;
    --orchard-leaf: #4f7f63;
    --orchard-leaf-deep: #3f6a52;
    --orchard-border: rgba(60, 60, 60, 0.14);
    --orchard-shadow: 0 10px 28px rgba(24, 32, 28, 0.10);
    --orchard-radius: 16px;
    --orchard-radius-sm: 12px;
    /* Focus ring (replaces Bootstrap blue) */
    --orchard-focus: rgba(127, 163, 142, 0.42);
    /* Fonts (system only — no external deps) */
    --orchard-font-body: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --orchard-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ------------------------------
   2) Base page + background
--------------------------------*/
html, body {
    height: 100%;
}

body {
    font-family: var(--orchard-font-body);
    color: var(--orchard-ink);
    font-weight: 460;
    letter-spacing: 0.01em;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url("/images/orchard-bg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

    /* Gentle white veil over watercolor */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.80);
        pointer-events: none;
        z-index: -1;
    }

/* ------------------------------
   3) Global text cleanup
--------------------------------*/
p {
    color: var(--orchard-ink-soft);
}

.text-muted,
.small, small,
.form-text {
    color: var(--orchard-muted) !important;
}

a {
    color: var(--orchard-leaf);
    text-decoration: none;
}

    a:hover {
        color: var(--orchard-leaf-deep);
        text-decoration: underline;
    }

    /* Nuke Bootstrap "primary blue" link styles into Orchard palette */
    .link-primary,
    a.text-primary,
    .text-primary {
        color: var(--orchard-leaf) !important;
    }

        .link-primary:hover,
        a.text-primary:hover {
            color: var(--orchard-leaf-deep) !important;
        }

/* ------------------------------
   4) HEADINGS (warm + storybook)
--------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--orchard-font-heading);
    color: var(--orchard-ink);
    letter-spacing: -0.018em;
    text-rendering: geometricPrecision;
}

h1 {
    font-weight: 780;
    color: rgba(67, 56, 47, 0.92);
    text-shadow: 0 1px 0 rgba(255,255,255,0.70);
}

h2 {
    font-weight: 740;
}

h3 {
    font-weight: 720;
}

/* Page title like “Challenges” */
.page-title,
h1.mb-0,
h1 {
    font-size: clamp(2.5rem, 3.2vw, 3.35rem);
    line-height: 1.05;
}

/* Subtitles like “Today’s picks” */
.card .text-muted,
.card small,
.card .small {
    color: rgba(67, 56, 47, 0.55) !important;
}

/* ------------------------------
   5) Navbar (soft + warm)
--------------------------------*/
.navbar {
    background: rgba(255, 253, 248, 0.74) !important;
    border-bottom: 1px solid var(--orchard-border);
    backdrop-filter: blur(8px);
}

.navbar-brand {
    font-family: var(--orchard-font-heading);
    font-weight: 860;
    letter-spacing: -0.012em;
    color: rgba(67, 56, 47, 0.92) !important;
}

.navbar .nav-link {
    font-weight: 680;
    color: rgba(67, 56, 47, 0.72) !important;
    padding: 8px 12px;
    border-radius: 999px;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        background: rgba(127, 163, 142, 0.14);
        color: rgba(67, 56, 47, 0.92) !important;
    }

    /* Active nav link */
    .navbar .nav-link.active,
    .navbar .nav-link[aria-current="page"] {
        background: rgba(127, 163, 142, 0.18);
        color: rgba(67, 56, 47, 0.92) !important;
    }

/* ------------------------------
   6) Cards / panels
--------------------------------*/
.card {
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid var(--orchard-border);
    border-radius: var(--orchard-radius);
    box-shadow: 0 6px 18px rgba(24, 32, 28, 0.08);
}

.card-title {
    font-family: var(--orchard-font-heading);
    font-weight: 760;
    color: rgba(67, 56, 47, 0.92);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(60, 60, 60, 0.10);
    color: var(--orchard-ink-soft);
    font-weight: 720;
}

/* ------------------------------
   7) Buttons (remove blue + unify palette)
--------------------------------*/
.btn {
    border-radius: 999px;
    font-weight: 720;
    letter-spacing: -0.006em;
}

/* Primary = Sage pill */
.btn-primary,
.btn-success {
    background: linear-gradient(180deg, var(--orchard-sage), var(--orchard-sage-deep));
    border-color: rgba(79, 127, 99, 0.35);
    box-shadow: 0 10px 20px rgba(79, 127, 99, 0.18);
    color: rgba(255,255,255,0.98);
}

    .btn-primary:hover,
    .btn-success:hover {
        background: linear-gradient(180deg, #6e967f, #628b76);
        border-color: rgba(79, 127, 99, 0.45);
        color: rgba(255,255,255,0.98);
    }

/* Outline Secondary = warm ink + paper */
.btn-outline-secondary {
    background: rgba(255, 253, 248, 0.62);
    border-color: rgba(67, 56, 47, 0.30);
    color: rgba(67, 56, 47, 0.82);
}

    .btn-outline-secondary:hover {
        background: rgba(67, 56, 47, 0.06);
        border-color: rgba(67, 56, 47, 0.34);
        color: rgba(67, 56, 47, 0.92);
    }

/* Outline Primary (Bootstrap default blue) -> Orchard leaf */
.btn-outline-primary {
    background: rgba(255, 253, 248, 0.62);
    border-color: rgba(79, 127, 99, 0.45);
    color: var(--orchard-leaf);
}

    .btn-outline-primary:hover {
        background: rgba(127, 163, 142, 0.14);
        border-color: rgba(79, 127, 99, 0.55);
        color: var(--orchard-leaf-deep);
    }

/* Info/Link styles (Bootstrap blue) -> Orchard leaf */
.btn-info,
.btn-outline-info,
.btn-link {
    color: var(--orchard-leaf) !important;
}

.btn-outline-info {
    border-color: rgba(79, 127, 99, 0.45) !important;
    background: rgba(255, 253, 248, 0.62) !important;
}

    .btn-outline-info:hover {
        background: rgba(127, 163, 142, 0.14) !important;
        color: var(--orchard-leaf-deep) !important;
    }

/* Unified focus ring (replaces blue glow) */
.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.navbar .nav-link:focus-visible,
a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--orchard-focus) !important;
}

/* Remove Bootstrap’s default “active” blue treatment */
.btn-check:focus + .btn,
.btn:active:focus,
.btn.active:focus {
    box-shadow: 0 0 0 0.25rem var(--orchard-focus) !important;
}

/* ------------------------------
   8) Forms
--------------------------------*/
.form-control, .form-select {
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.86);
    border-color: rgba(60, 60, 60, 0.18);
    color: var(--orchard-ink);
}

    .form-control::placeholder {
        color: rgba(67, 56, 47, 0.45);
    }

/* ------------------------------
   9) Utility surfaces
--------------------------------*/
.orchard-surface {
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid var(--orchard-border);
    border-radius: var(--orchard-radius);
    box-shadow: var(--orchard-shadow);
}

.orchard-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(60,60,60,0.18), transparent);
    margin: 14px 0;
}

/* -------------------------------------------------------------------------- */
/* Bootstrap Accordion (Orchard Theme)                                         */
/* -------------------------------------------------------------------------- */

/* Theme tokens (safe fallbacks) */
:root {
    --orchard-ink: var(--ink, #3c352f);
    --orchard-ink-muted: var(--ink-muted, #6a6158);
    --orchard-paper: var(--paper, rgba(255,255,255,0.78));
    --orchard-paper-strong: var(--paper-strong, rgba(255,255,255,0.90));
    --orchard-stroke: var(--stroke, rgba(130,118,104,0.28));
    --orchard-stroke-strong: var(--stroke-strong, rgba(130,118,104,0.40));
    --orchard-sage: var(--sage, #6f8a74);
    --orchard-sage-soft: var(--sage-soft, rgba(111,138,116,0.16));
    --orchard-sage-strong: var(--sage-strong, #5f7c66);
    --orchard-shadow: var(--shadow, 0 10px 26px rgba(20, 16, 12, 0.10));
    --orchard-shadow-soft: var(--shadow-soft, 0 6px 14px rgba(20, 16, 12, 0.08));
}

/* Accordion container */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 18px;
    --bs-accordion-inner-border-radius: 14px;
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(111,138,116,0.22);
}

    /* Each item becomes a soft “paper card” */
    .accordion .accordion-item {
        background: var(--orchard-paper);
        border: 1px solid var(--orchard-stroke);
        border-radius: 18px;
        box-shadow: var(--orchard-shadow-soft);
        overflow: hidden;
    }

        .accordion .accordion-item + .accordion-item {
            margin-top: 14px;
        }

    /* Header button */
    .accordion .accordion-button {
        font-family: var(--heading-font, inherit);
        color: var(--orchard-ink);
        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.70));
        padding: 16px 18px;
        letter-spacing: 0.2px;
    }

        .accordion .accordion-button .badge,
        .accordion .accordion-button .pill,
        .accordion .accordion-button .xp-pill {
            margin-left: 12px;
        }

        /* Active/open state */
        .accordion .accordion-button:not(.collapsed) {
            color: var(--orchard-ink);
            background: linear-gradient(180deg, var(--orchard-sage-soft), rgba(255,255,255,0.66));
            box-shadow: inset 0 -1px 0 rgba(130,118,104,0.18);
        }

        /* Chevron icon color */
        .accordion .accordion-button::after {
            filter: grayscale(1);
            opacity: 0.65;
        }

    /* Body */
    .accordion .accordion-body {
        padding: 14px 18px 18px;
        color: var(--orchard-ink);
    }

        /* Subtle inner separators for lists inside the body */
        .accordion .accordion-body .list-group,
        .accordion .accordion-body .list-group-item {
            background: transparent;
            border-color: rgba(130,118,104,0.20);
        }

        .accordion .accordion-body .list-group-item {
            color: var(--orchard-ink);
        }

    /* XP badge/pill inside accordion rows */
    .accordion .badge,
    .accordion .xp-pill {
        background: rgba(111,138,116,0.22);
        color: var(--orchard-ink);
        border: 1px solid rgba(111,138,116,0.28);
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 600;
    }

    /* Hover polish */
    .accordion .accordion-button:hover {
        background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
    }

    .accordion .accordion-button:not(.collapsed):hover {
        background: linear-gradient(180deg, rgba(111,138,116,0.22), rgba(255,255,255,0.70));
    }


/* Home Welcome (scoped) */
.orchard-welcome-card {
    border-radius: 20px;
    border: 1px solid rgba(120, 120, 120, 0.20);
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    padding: 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.orchard-welcome-title {
    letter-spacing: 0.2px;
}

.orchard-welcome-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(20,20,20,0.78);
    max-width: 52ch;
}

.orchard-welcome-quote {
    border-left: 4px solid rgba(120, 140, 120, 0.55);
    padding-left: 14px;
    color: rgba(20,20,20,0.70);
}

.orchard-welcome-quote-line {
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 6px;
}

.orchard-welcome-caretaker-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: rgba(20,20,20,0.78);
}

.orchard-welcome-caretaker-body {
    color: rgba(20,20,20,0.70);
    line-height: 1.55;
    max-width: 56ch;
}

.orchard-btn-soft {
    border-radius: 999px;
    border-color: rgba(120, 140, 120, 0.55);
    color: rgba(40, 70, 55, 0.90);
    background: rgba(255, 255, 255, 0.65);
    padding: 10px 14px;
}

    .orchard-btn-soft:hover {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(110, 135, 115, 0.75);
        color: rgba(30, 60, 45, 0.95);
    }

.orchard-host-frame {
    border-radius: 18px;
    padding: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(120, 140, 120, 0.35);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.orchard-host-img {
    display: block;
    width: min(320px, 100%);
    height: auto;
    border-radius: 14px;
    background: rgba(255,255,255,0.90);
}

.orchard-host-caption {
    text-align: center;
    color: rgba(20,20,20,0.62);
    font-style: italic;
    line-height: 1.45;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* Challenge Card: left “points” well (like the textbox lane)                 */
/* -------------------------------------------------------------------------- */

.orchard-challenge-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.orchard-challenge-points {
    width: 78px;
    min-width: 78px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid var(--orchard-border);
    background: var(--orchard-mist);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orchard-challenge-points__value {
    font-family: var(--orchard-font-heading);
    font-weight: 820;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--orchard-ink);
}

.orchard-challenge-points__label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--orchard-muted);
    margin-top: 2px;
}

.orchard-challenge-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

/* Tier color hooks (adjust freely) */
.orchard-challenge-points.tier-1 {
    border-color: rgba(127, 163, 142, 0.35);
    background: rgba(127, 163, 142, 0.14);
}

.orchard-challenge-points.tier-2 {
    border-color: rgba(127, 163, 142, 0.45);
    background: rgba(127, 163, 142, 0.20);
}

.orchard-challenge-points.tier-3 {
    border-color: rgba(79, 127, 99, 0.45);
    background: rgba(79, 127, 99, 0.18);
}

.orchard-challenge-points.tier-4 {
    border-color: rgba(63, 106, 82, 0.55);
    background: rgba(63, 106, 82, 0.16);
}

/* Enable dropdown on hover (optional) */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Prevent Bootstrap from closing immediately */
.dropdown-menu {
    margin-top: 0;
    z-index: 1060;
}
.navbar {
    position: relative;
    z-index: 1050;
}

/* Ensure dropdown menus appear above everything */
.dropdown-menu {
    
}

/* SkillTree grid + card polish (no behavior changes) */
.skilltree-grid .card {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 120, 120, 0.18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}

.skilltree-card {
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

    .skilltree-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
    }

    .skilltree-card .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(120, 120, 120, 0.14);
        font-weight: 650;
    }

    .skilltree-card .card-footer {
        background: transparent;
        border-top: 1px solid rgba(120, 120, 120, 0.14);
    }

/* Equal-height rows rely on a consistent media height */
.skilltree-card-img {
    width: 100%;
    height: 160px; /* adjust if you want taller/shorter cards */
    object-fit: cover; /* key for consistent cards */
    display: block;
}

/* Slightly smaller images in the narrow maker column */
@media (min-width: 992px) {
    .skilltree-makercol .skilltree-card-img {
        height: 140px;
    }
}

/* Seed footer styling */
.skilltree-seed-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(110, 110, 110, 0.22);
    background: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    white-space: nowrap;
}




@media (max-width: 575px) {
    .orchard-welcome-card {
        padding: 20px;
    }

    .orchard-host-img {
        width: min(280px, 100%);
    }


}