/* dp-brand.css — Potion Sounds */
:root {
    /* Core palette from your guide */
    --dp-slate: #3d4d4a;
    --dp-navy: #4c646c;
    --dp-blue: #51758c;
    --dp-grey: #c7dcea;
    --dp-green: #5aba47;
    --dp-yellow: #e3e52b;
    --dp-cyan: #00afdf;
    --dp-pink: #ee4c9b;
    /* Semantic tokens (adjust as you like) */
    --brand-bg: #ffffff;
    --brand-fg: var(--dp-slate);
    --brand-primary: var(--dp-blue);
    --brand-secondary: var(--dp-yellow);
    --brand-accent: var(--dp-pink);
    --brand-muted: var(--dp-grey);
    --brand-success: var(--dp-green);
    --brand-warning: var(--dp-yellow);
    /* UI */
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
}

html, body {
    color: var(--brand-fg);
    background: var(--brand-bg);
}

/* Sticky header look */
header.sticky-top {
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(1.1) blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Anchor offset so content doesn't sit under the sticky header */
section[id] {
    scroll-margin-top: 96px;
}

/* Links & buttons */
a {
    color: var(--brand-primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.btn-brand {
    --btn-bg: var(--brand-primary);
    --btn-fg: #fff;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--radius);
    border: 0;
    padding: .7rem 1.1rem;
    box-shadow: var(--shadow);
}

    .btn-brand:hover {
        filter: brightness(0.95);
    }

.btn-outline-brand {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius);
    padding: .6rem 1rem;
}

    .btn-outline-brand:hover {
        background: var(--brand-primary);
        color: #fff;
    }


.yellowLink a {
    color: #e3e52b;
}

    .yellowLink a:hover {
        color: #5aba47;
        text-decoration: underline;
    }


/* Cards */
.card-brand {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 0;
}

/* Pills for tabs */
.nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    color: var(--brand-secondary);
}

    .nav-tabs .nav-link.active {
        background: var(--brand-primary);
        color: #fff;
    }


/* Header + Footer for Potion Sounds */
.site-header,
.site-footer {
    background-color: var(--dp-slate);
    color: var(--dp-yellow);
}

    .site-header .navbar-brand,
    .site-header .nav-link,
    .site-footer a,
    .site-footer strong {
        color: var(--dp-yellow);
    }

        .site-header .nav-link:hover,
        .site-header .nav-link.active,
        .site-footer a:hover {
            color: #fff; /* subtle contrast on hover */
        }

.footer-inner {
    color: var(--dp-yellow);
}


/* --- Pink buttons (solid + outline) — complete definitions --- */


.btn-outline-pink {
    color: var(--dp-pink, #e83e8c); /* fallback if var missing */
    border-color: var(--dp-pink, #e83e8c);
}

    .btn-outline-pink:hover,
    .btn-outline-pink:focus {
        color: #fff;
        background-color: var(--dp-pink, #e83e8c);
        border-color: var(--dp-pink, #e83e8c);
    }



/* Solid yellow that inverts on hover */
.btn-yellow-swap {
    --btn-yellow: var(--dp-yellow, #e3e52b);
    --btn-slate: var(--dp-slate, #3d4d4a);
    color: var(--btn-slate);
    background-color: var(--btn-yellow);
    border-color: var(--btn-yellow);
}

    .btn-yellow-swap:hover,
    .btn-yellow-swap:focus,
    .btn-yellow-swap:active {
        color: var(--btn-yellow);
        background-color: var(--btn-slate);
        border-color: var(--btn-slate);
    }

/* Optional: outline version that inverts on hover */
.btn-outline-yellow-swap {
    --btn-yellow: var(--dp-yellow, #e3e52b);
    --btn-slate: var(--dp-slate, #3d4d4a);
    color: var(--btn-slate);
    background-color: transparent;
    border-color: var(--btn-yellow);
}

    .btn-outline-yellow-swap:hover,
    .btn-outline-yellow-swap:focus,
    .btn-outline-yellow-swap:active {
        color: var(--btn-yellow);
        background-color: var(--btn-slate);
        border-color: var(--btn-slate);
    }


/* Default link styling inside page content */
main a,
.page-body a {
    color: var(--dp-green);
    text-decoration: underline; /* optional */
    font-weight: 600;
}

    main a:hover,
    .page-body a:hover {
        color: var(--dp-slate); /* nice hover accent */
    }

/* Nav-specific links (keep yellow) */
.navbar-nav .nav-link {
    color: var(--dp-yellow);
}

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


.btn-pink-swap {
    --btn-pink: var(--dp-pink, #ee4c9b);
    --btn-navy: var(--dp-navy, #4c646c);
    color: var(--btn-navy);
    background-color: var(--btn-pink);
    border-color: var(--btn-pink);
}

    .btn-pink-swap:hover,
    .btn-pink-swap:focus,
    .btn-pink-swap:active {
        color: var(--btn-pink);
        background-color: var(--btn-navy);
        border-color: var(--btn-navy);
    }

.btn-pink-solid {
    --btn-pink: var(--dp-pink, #ee4c9b);
    --btn-navy: var(--dp-navy, #4c646c);
    color: #fff;
    background-color: var(--btn-pink);
    border-color: var(--btn-pink);
}

    .btn-pink-solid:hover,
    .btn-pink-solid:focus,
    .btn-pink-solid:active {
        color: #fff;
        background-color: var(--btn-navy);
        border-color: var(--btn-navy);
    }


.btn-outline-pink-navy {
    --btn-pink: var(--dp-pink, #ee4c9b);
    --btn-navy: var(--dp-navy, #4c646c);
    color: var(--btn-pink);
    border: 2px solid var(--btn-pink);
    background-color: transparent;
}

    .btn-outline-pink-navy:hover,
    .btn-outline-pink-navy:focus,
    .btn-outline-pink-navy:active {
        color: var(--btn-pink);
        background-color: var(--btn-navy);
        border-color: var(--btn-navy);
    }


/* === Accordion Branding Overrides === */
.accordion .accordion-item {
    border: none;
    margin-bottom: .5rem;
    border-radius: .25rem;
    overflow: hidden;
}

.accordion .accordion-button {
    background-color: var(--dp-slate) !important; /* navy bar */
    color: var(--dp-yellow) !important; /* yellow title */
    font-weight: 600;
}

    .accordion .accordion-button:not(.collapsed) {
        background-color: var(--dp-slate) !important;
        color: var(--dp-yellow) !important;
        box-shadow: none;
    }

    .accordion .accordion-button::after {
        filter: invert(77%) sepia(89%) saturate(600%) hue-rotate(25deg);
        /* caret icon yellow */
    }

.accordion .accordion-collapse {
    background-color: var(--dp-grey); /* grey panel bg */
    color: var(--dp-black); /* black text */
}

.accordion .accordion-body {
    background-color: var(--dp-grey);
    color: var(--dp-black);
}