/* =========================================================
   Digital Potion – Core Brand System
   ========================================================= */

/* Brand tokens */
:root {
    --dp-slate: #3d4d4a;
    --dp-yellow: #e3e52b;
    --dp-green: #5aba47;
    --dp-white: #ffffff;
    --dp-black: #000000;
    --dp-pink: #ee4c9b;
    --dp-cyan: #00afdf;
    --dp-blue: #51758c;
    --dp-navy: #4c646c;
    --dp-grey: #c7dcea;
    --dp-slate-mid: #4b646a;
    /* System tokens (consistent with Bootstrap) */
    --radius: 0.5rem;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Bootstrap variable mapping */
    --bs-primary: var(--dp-slate);
    --bs-body-bg: var(--dp-white);
    --bs-body-color: var(--dp-slate);
    --bs-link-color: var(--dp-green);
    --bs-link-hover-color: var(--dp-yellow);
    --bs-border-color: rgba(61, 77, 74, 0.2);
    --bs-tertiary-bg: #f6f8f8;
    /* Component tokens */
    --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);
}


/* =========================================================
   Brand Backgrounds 
   ========================================================= */

.bg-dp-slate {
    background-color: var(--dp-slate);
    color: #fff;
}

.bg-dp-yellow {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
}

.bg-dp-green {
    background-color: var(--dp-green);
    color: #fff;
}

.text-dp-slate {
    color: var(--dp-slate);
}


.bg-dp-slate {
    background-color: var(--dp-slate);
    color: #fff;
}

.bg-dp-yellow {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
}

.bg-dp-green {
    background-color: var(--dp-green);
    color: #fff;
}

.bg-dp-pink {
    background-color: var(--dp-pink);
    color: #fff;
}

.bg-dp-cyan {
    background-color: var(--dp-cyan);
    color: #fff;
}

.bg-dp-grey {
    background-color: var(--dp-grey);
    
}




/* =========================================================
   Typography
   ========================================================= */
body,
p,
li,
blockquote,
small,
label,
input,
textarea,
button {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--dp-slate);
}




body {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    color: var(--dp-slate);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

.fw-bold, strong, b {
    font-weight: 700;
}

.lead{
    font-size:1.8rem;
}

/* Base typography tweaks – keep content clean, green as accent for links */
a, a:visited {
    color: var(--dp-green);
    text-decoration: none;
    text-underline-offset: 2px;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

    a:hover, a:focus {
        color: var(--dp-yellow);
        text-decoration: underline;
    }


#main a {
    color: var(--dp-slate);
    text-decoration: underline;
}

    #main a:hover {
        color: var(--dp-green);
        text-decoration: underline;
    }



/* =========================================================
   DP Buttons – Brand-consistent versions
   ========================================================= */

/* Base button – unify typography and rounding */
.btn {
    border-radius: var(--radius);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    padding: 0.6rem 1.2rem;
}

.btn:hover
{
    text-decoration:underline;

}

/* Primary: DP Yellow */
.btn-dp-yellow {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
    border: none;
    box-shadow: var(--shadow);
}

    .btn-dp-yellow:hover,
    .btn-dp-yellow:focus {
        background-color: #fff94b; /* lighter yellow */
        color: var(--dp-slate);
        text-decoration: none;
    }


/* Primary: DP Yellow */
.btn-yellow-swap {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
    border: none;
    box-shadow: var(--shadow);
}

    .btn-yellow-swap:hover,
    .btn-yellow-swap:focus {
        background-color: #fff94b; /* lighter yellow */
        color: var(--dp-slate);
        text-decoration: none;
    }


/* Secondary: DP Green (if ever used) */
.btn-dp-green {
    background-color: var(--dp-green);
    color: #fff;
    border: none;
    box-shadow: var(--shadow);
}

    .btn-dp-green:hover,
    .btn-dp-green:focus {
        background-color: #7cd86a;
        color: #fff;
    }

/* Outline version */
.btn-outline-dp-yellow {
    background: transparent;
    color: var(--dp-yellow);
    border: 2px solid var(--dp-yellow);
}

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

/* --- Ensure buttons stay visible on dark backgrounds (footer, header) --- */
.dp-header .btn-dp-yellow,
.dp-footer .btn-dp-yellow {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
}

    .dp-header .btn-dp-yellow:hover,
    .dp-footer .btn-dp-yellow:hover {
        background-color: #fff94b;
        color: var(--dp-slate);
    }


/* =========================================================
   Bootstrap Primary Button → DP Yellow
   ========================================================= */

/* Map Bootstrap's .btn-primary to DP Yellow look */
.btn-primary {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
    border: none;
    box-shadow: var(--shadow);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.2s ease-in-out;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #fff94b; /* slightly lighter yellow */
        color: var(--dp-slate);
        text-decoration: underline; /* subtle underline on hover */
        text-underline-offset: 0.15em;
    }

    /* Make sure Bootstrap doesn't override the text colour */
    .btn-primary:active,
    .btn-primary:disabled {
        color: var(--dp-slate) !important;
        background-color: var(--dp-yellow) !important;
        border: none !important;
    }

/* Optional: secondary buttons use DP-green */
.btn-secondary {
    background-color: var(--dp-green);
    color: #fff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: #7cd86a;
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

/* Apply underline on hover for all DP buttons */
.btn-dp-yellow:hover,
.btn-dp-green:hover,
.btn-outline-dp-yellow:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}



/* =========================================================
   Header
   ========================================================= */
.dp-header {
    background-color: var(--dp-slate-mid);
    color: #fff;
    position: relative;
    z-index: 10;
    overflow: visible;
}

    .dp-header .container {
        max-width: 1320px;
    }

    .dp-header .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 140px;
        padding: 0.5rem 0;
    }

    .dp-header .navbar-brand img.dp-logo {
        height: clamp(100px, 14vw, 140px);
        width: auto;
        margin-bottom: -4vw;
        margin-left: 0.75rem;
    }

    .dp-header .nav-link {
        color: var(--dp-yellow);
        text-transform: uppercase;
        font-weight: 600;
        margin-left: 1.5rem;
        transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
        line-height: 1
    }

        .dp-header .nav-link:hover,
        .dp-header .nav-link.active {
            color: #fff;
            text-decoration: underline;
            text-underline-offset: 0.2rem;
        }

    .dp-header .navbar-toggler {
        border: none;
        outline: none;
    }

    .dp-header .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23dfe227' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

/* =========================================================
   Footer
   ========================================================= */
.dp-footer {
    background-color: var(--dp-slate-mid);
    /*   background-image: linear-gradient(to top, rgba(61,77,74,0.9), rgba(61,77,74,0.9)), url('/dp/images/dp-footer-bg.jpg'); */
}


    .dp-footer .footer-overlay {
        background-color: rgba(75, 100, 106, 0.8);
        position: relative;
        z-index: 2;
    }

.dp-footer-logo {
    max-height: 90px;
    width: auto;
}

.dp-footer-square {
    max-height: 100px;
    width: auto;
    opacity: 0.95;
    transition: transform 0.2s ease-in-out;
}

    .dp-footer-square:hover {
        transform: scale(1.05);
        opacity: 1;
    }

.dp-footer a {
    color: var(--dp-yellow);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

    .dp-footer a:hover {
        color: #fff;
    }

.dp-footer .btn-dp-yellow {
    background-color: var(--dp-yellow);
    color: var(--dp-slate);
    font-weight: 700;
}

.dp-footer .btn-dp-yellow {
    box-shadow: var(--shadow);
}

.dp-footer p,
.dp-footer small {
    color: rgba(255,255,255,0.85);
}


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px) {
    .dp-header .navbar {
        min-height: 90px;
        align-items: flex-start;
    }

    .dp-header .navbar-brand img.dp-logo {
        height: 70px;
        margin-bottom: 0;
    }

    .dp-header .navbar-collapse {
        background-color: var(--dp-slate);
        padding: 1rem;
    }

    .dp-footer {
        background-attachment: scroll;
    }

    .dp-footer-logo {
        max-height: 70px;
        margin-bottom: 1rem;
    }

    .dp-footer-square {
        max-height: 80px;
        margin-bottom: 0.5rem;
    }
}



/* =========================================================
    DP Debug Grid Overlay — brand-themed diagnostic helper
   ========================================================= */

/* Toggle by adding .dp-debug-grid to <body> or <main> */
.dp-debug-grid .dp-section-block {
    outline: 1px dashed rgba(110, 190, 73, 0.4); /* DP-green */
    position: relative;
}

    /* Alternate background tints for readability */
    .dp-debug-grid .dp-section-block:nth-of-type(even) {
        background-color: rgba(223, 226, 39, 0.05); /* DP-yellow tint */
    }

    .dp-debug-grid .dp-section-block:nth-of-type(odd) {
        background-color: rgba(61, 77, 82, 0.05); /* DP-slate tint */
    }

    /* Highlight .container boundaries */
    .dp-debug-grid .dp-section-block > .container {
        outline: 1px solid rgba(223, 226, 39, 0.6); /* soft DP-yellow */
    }

/* Vertical alignment guides for container width */
.dp-debug-grid::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--bs-container-lg, 960px);
    border-left: 1px solid rgba(110, 190, 73, 0.5); /* DP-green */
    border-right: 1px solid rgba(110, 190, 73, 0.5); /* DP-green */
    pointer-events: none;
    z-index: 9999;
}

/* Section labels */
.dp-debug-grid .dp-section-block::before {
    content: attr(class);
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    font-size: 0.65rem;
    color: var(--dp-light, #f5f5f5);
    background: rgba(61, 77, 82, 0.85); /* DP-slate with opacity */
    padding: 0 0.35rem;
    border-radius: 3px;
    z-index: 10;
    mix-blend-mode: difference;
}