:root {
    --dp-slate: #3d4d4a;
    --dp-yellow: #e3e52b;
    --dp-black: #000;
    --dp-white: #fff;
    /* Tabs */
    --tab-bg: var(--dp-slate);
    --tab-fg: var(--dp-white);
    --tab-hover-bg: var(--dp-yellow);
    --tab-hover-fg: var(--dp-slate);
    --tab-active-bg: var(--dp-yellow);
    --tab-active-fg: var(--dp-slate);
    --tab-border: var(--dp-slate);
    /* Global accents */
    --link-color: var(--dp-yellow);
    --link-hover: var(--dp-white);
}

/* === Header / Navbar === */
header.sticky-top {
    background: var(--dp-slate);
    border-bottom: 1px solid var(--dp-slate);
}

.navbar-brand {
    color: var(--dp-yellow) !important;
    font-weight: 700;
}

    .navbar-brand:hover {
        color: var(--dp-white) !important;
    }

.navbar-nav .nav-link {
    color: var(--dp-yellow);
    font-weight: 600;
    transition: color .2s ease;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: var(--dp-white);
    }

/* === Tabs (Projects) === */
.projects-tabs .nav-tabs {
    border-bottom: 0;
}

    .projects-tabs .nav-tabs .nav-link {
        border: 1px solid var(--tab-border);
        border-bottom: none;
        background: var(--tab-bg);
        color: var(--tab-fg);
        font-weight: 700;
        padding: .85rem 1.25rem;
        border-radius: .5rem .5rem 0 0;
        margin: 0;
        transition: background-color .2s ease, color .2s ease;
    }

    .projects-tabs .nav-tabs .nav-item + .nav-item .nav-link {
        margin-left: -1px;
    }

    .projects-tabs .nav-tabs .nav-link:hover,
    .projects-tabs .nav-tabs .nav-link:focus {
        background: var(--tab-hover-bg);
        color: var(--tab-hover-fg);
    }

    .projects-tabs .nav-tabs .nav-link.active {
        background: var(--tab-active-bg);
        color: var(--tab-active-fg);
        z-index: 2;
    }

.projects-tabs .tab-content {
    border: 1px solid var(--tab-border);
    border-top: 0;
    border-radius: 0 0 .75rem .75rem;
    background: var(--dp-white);
}

/* === Links site-wide === */
a {
    color: var(--link-color);
    text-decoration: none;
}

    a:hover {
        color: var(--link-hover);
        text-decoration: underline;
    }


/* === Brand Buttons === */

/* Slate → Yellow/Navy rollover */
.btn-dp {
    --bs-btn-bg: var(--dp-slate);
    --bs-btn-border-color: var(--dp-slate);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--dp-yellow);
    --bs-btn-hover-border-color: var(--dp-yellow);
    --bs-btn-hover-color: var(--dp-navy);
}

/* Yellow outline → fill on hover */
.btn-outline-brand {
    --bs-btn-color: var(--dp-yellow);
    --bs-btn-border-color: var(--dp-yellow);
    --bs-btn-hover-color: var(--dp-navy);
    --bs-btn-hover-bg: var(--dp-yellow);
    --bs-btn-hover-border-color: var(--dp-yellow);
}

/* Pink solid → white rollover */
.btn-pink {
    --bs-btn-bg: #ee4c9b;
    --bs-btn-border-color: #ee4c9b;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #ee4c9b;
    --bs-btn-hover-color: #ee4c9b;
}

/* Pink outline → fill on hover */
.btn-outline-pink {
    --bs-btn-color: #ee4c9b;
    --bs-btn-border-color: #ee4c9b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ee4c9b;
    --bs-btn-hover-border-color: #ee4c9b;
}




/* === Navbar mobile === */
.navbar-toggler {
    border-color: #e3e52b !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(227,229,43,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* === Project mobile styles === */
.project-mobile img {
    object-fit: cover;
}

.project-mobile h3 {
    color: var(--dp-slate);
    margin-bottom: .5rem;
}

.project-mobile .project-mobile-summary {
    font-size: .95rem;
    line-height: 1.5;
}

/* === Mobile adjustments === */
@media (max-width: 767.98px) {
    .project-list-mobile .card-brand {
        border-radius: .75rem;
    }
}


/* =========================
   GLOBAL ANCHOR / SCROLL TWEAKS
   ========================= */
:root {
    --header-h: 96px; /* JS will update this */
}

/* Sections won’t hide under the sticky header */
section[id] {
    scroll-margin-top: var(--header-h);
}

/* Smooth scrolling already set in your page; keep it here as a backup */
html {
    scroll-behavior: smooth;
}

/* =========================
   NAV: MOBILE COLLAPSE POLISH
   ========================= */
/* Dark background for the dropdown menu */
.navbar .navbar-collapse {
    background: var(--dp-slate);
}

/* Make mobile menu items comfy to tap */
@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        padding: .75rem 0;
        font-size: 1.1rem;
    }
}

/* Slightly smoother collapse animation (Bootstrap has one; we just tune it) */
.collapsing {
    transition: height .28s ease;
}

/* Optional subtle drop shadow when menu is open */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse.show {
        box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
}

/* =========================
   FOOTER: MATCH HEADER THEME
   ========================= */
footer.site-footer {
    background: var(--dp-slate); /* was #000 */
    color: var(--dp-yellow); /* was #e7e7e7 */
    border-top: 1px solid var(--dp-slate);
}

    footer.site-footer .brand {
        color: var(--dp-yellow);
        font-weight: 700;
    }

    footer.site-footer a {
        color: var(--dp-yellow);
        text-decoration: none;
    }

        footer.site-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

    footer.site-footer .muted {
        color: #b8b8b8;
    }


    /* Space and rhythm */
    footer.site-footer .footer-inner {
        gap: 1rem;
    }

/* Optional back-to-top */
.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    border: 1px solid #e3e52b;
    border-radius: .5rem;
    padding: .4rem .7rem;
}

    .back-to-top:hover {
        background: #e3e52b;
        color: #3d4d4a;
    }


/* === Footer Back-to-Top button === */
.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    border: 1px solid #e3e52b; /* yellow border */
    border-radius: .5rem;
    padding: .4rem .7rem;
    color: #e3e52b; /* yellow text by default */
    background: transparent;
    transition: all .2s ease;
}

    .back-to-top:hover {
        background: #e3e52b; /* yellow background */
        color: #4c646c; /* navy text on hover */
        border-color: #e3e52b;
        text-decoration: none;
    }



    /* always at the end - important !!  

    */

/* ensure brand navy is available (add only if you don't already have it) */
:root {
    --dp-navy: #4c646c;
}

/* Back-to-top — force navy text on hover */
footer.site-footer .back-to-top {
    color: #e3e52b; /* default = yellow */
    background: transparent;
    border: 1px solid #e3e52b;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    border-radius: .5rem;
    padding: .4rem .7rem;
    transition: all .2s ease;
}

    footer.site-footer .back-to-top:hover,
    footer.site-footer .back-to-top:focus {
        background: #e3e52b; /* yellow bg */
        color: var(--dp-navy) !important; /* NAVY text overrides global a:hover */
        border-color: #e3e52b;
        text-decoration: none;
    }

    /* if you ever use an icon/SVG inside, make it follow the text color */
    footer.site-footer .back-to-top svg {
        fill: currentColor;
        stroke: currentColor;
    }


/* --- Ensure buttons keep their Bootstrap look inside .prose blocks --- */
.prose .btn,
.prose a.btn {
    display: inline-block; /* not inline */
    text-decoration: none; /* kill underline */
    padding: var(--bs-btn-padding-y, .5rem) var(--bs-btn-padding-x, 1rem);
    font-weight: var(--bs-btn-font-weight, 600);
    line-height: 1.5;
    border: 1px solid var(--bs-btn-border-color, currentColor);
    border-radius: var(--bs-btn-border-radius, .5rem);
    background-color: var(--bs-btn-bg, transparent);
    color: var(--bs-btn-color, inherit);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

    .prose .btn:hover,
    .prose a.btn:hover {
        background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg));
        color: var(--bs-btn-hover-color, inherit);
        border-color: var(--bs-btn-hover-border-color, currentColor);
        text-decoration: none;
    }





/* project overlay */


.bg-dark {
    background-color: var(--dp-slate) !important;
    opacity: 0.85;
}


/* Optional: slightly translucent dark toast */
.text-bg-dark.toast {
    background-color: rgba(0,0,0,.8) !important;
    backdrop-filter: blur(2px);
}





@media (max-width:576px) {
    p.hero.h5 {
        font-size: 0.85rem;
    }
}