/*
 * Custom Bootstrap Theme Overrides for CampaignTools.Pro
 * REVISED AND IMPROVED VERSION
 */

:root {
    /* --- Your Custom Colors --- */
    --ctp-white:    #ffffff;
    --ctp-light:    #d6e2eb; /* Main Text */
    --ctp-dark:     #55bf9f; /* Teal */
    --ctp-primary:  #ffa32d; /* Orange */
    --ctp-secondary:#e56c13; /* Red */
    --ctp-info:     #658bc2;
    --ctp-success:  #57b100;
    --ctp-warning:  #ffc468;
    --ctp-danger:   #f80062;
    --ctp-accent1:  #2d2f4d; /* Darker, less saturated purple for main BG */
    --ctp-accent2:  #3a3c68; /* Original dark blue/purple, now for surfaces */
    --ctp-accent3:  #a8b5ce; /* Light Blue/Gray */

    /* --- Override Bootstrap Core Variables --- */
    --bs-body-bg: var(--ctp-accent1);
    --bs-body-color: var(--ctp-light);
    --bs-emphasis-color: var(--ctp-white);
    --bs-secondary-color: rgba(214, 226, 235, 0.75);
    --bs-secondary-bg: var(--ctp-accent2);
    --bs-tertiary-bg: #262840; /* Even darker shade for subtle layering */
    --bs-border-color: rgba(168, 181, 206, 0.25);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-heading-color: var(--ctp-white);

    /* Remap Bootstrap semantic colors */
    --bs-primary: var(--ctp-primary);
    --bs-secondary: var(--ctp-secondary);
    --bs-success: var(--ctp-success);
    --bs-info: var(--ctp-info);
    --bs-warning: var(--ctp-warning);
    --bs-danger: var(--ctp-danger);
    --bs-light: var(--ctp-light);
    --bs-dark: var(--ctp-dark);

    /* Ensure text contrasts well with remapped backgrounds */
    --bs-primary-text-emphasis: #212529;
    --bs-secondary-text-emphasis: var(--ctp-white);
    --bs-success-text-emphasis: var(--ctp-white);
    --bs-info-text-emphasis: var(--ctp-white);
    --bs-warning-text-emphasis: #212529;
    --bs-danger-text-emphasis: var(--ctp-white);
    --bs-light-text-emphasis: var(--ctp-accent1);
    --bs-dark-text-emphasis: var(--ctp-white);

    /* RGB versions needed for Bootstrap's rgba() functions */
    --bs-primary-rgb: 255, 163, 45;
    --bs-secondary-rgb: 229, 108, 19;
    --bs-light-rgb: 214, 226, 235;
    --bs-white-rgb: 255, 255, 255;
    --bs-body-color-rgb: 214, 226, 235;

    /* Other core overrides */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--bs-primary), white 15%);
    --bs-code-color: var(--bs-danger);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-sm: .3rem;
    --bs-card-bg: var(--ctp-accent2); /* Set a default card background */
}

/* --- Basic Theme Structure --- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex-grow: 1; }

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-heading-color);
}

/* --- Component Style Tweaks for a Cohesive Dark Theme --- */

/* Navbar */
.navbar-dark {
    background-color: var(--bs-body-bg) !important; /* Match the body background */
    border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand .pro {
    color: var(--bs-primary);
    font-weight: 700;
}

/* Hero Section */
.hero-section {
    background-color: var(--bs-tertiary-bg); /* Use a slightly different dark shade */
}

/* Trust Bar */
.trust-bar {
    background-color: var(--bs-tertiary-bg); /* Match the hero section for a cohesive feel */
    color: var(--ctp-accent3) !important;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Solution Section (with Mockup) */
#toolbox {
    background-color: var(--bs-tertiary-bg);
}

/* Cards */
.card {
    background-color: var(--bs-card-bg); /* Use the CSS variable for consistency */
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius-lg);
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
     color: var(--bs-heading-color);
}

/* Highlight the "Pro" card */
.product-card-pro {
    border-color: var(--bs-primary) !important;
}

/* Accordion */
.accordion-item {
    background-color: transparent; /* Let the section background show through */
    border-color: var(--bs-border-color);
}
.accordion-button {
    background-color: var(--ctp-accent2); /* Use the surface color for buttons */
    color: var(--bs-heading-color);
}
.accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(--ctp-accent2), black 10%); /* Slightly darker when active */
    color: var(--bs-heading-color);
    box-shadow: none; /* Cleaner look */
}
.accordion-button::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d6e2eb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Footer */
footer {
    background-color: var(--bs-tertiary-bg); /* Use the darkest shade for a solid base */
    color: var(--bs-secondary-color);
}
footer h5 { color: var(--bs-heading-color); }
footer a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
footer a:hover {
    color: var(--bs-body-color);
}
footer small { opacity: 0.6; }

/* --- Custom Utility Classes --- */
.bg-accent1 { background-color: var(--ctp-accent1) !important; }
.text-accent1 { color: var(--ctp-accent1) !important; }
.bg-accent2 { background-color: var(--ctp-accent2) !important; }
.text-accent2 { color: var(--ctp-accent2) !important; }
.bg-accent3 { background-color: var(--ctp-accent3) !important; }
.text-accent3 { color: var(--ctp-accent3) !important; }
.border-accent3 { border-color: var(--ctp-accent3) !important; }

/* Opacity utilities */
.opacity-75 { opacity: 0.75 !important; }
.opacity-50 { opacity: 0.50 !important; }
.opacity-25 { opacity: 0.25 !important; }

/*
 * --- Subtle Emerald Accent Integration ---
 * Use the emerald color for all checkmark icons to add a touch of
 * brand color without overwhelming the design.
 */

.fa-check {
    color: var(--ctp-dark) !important; /* --ctp-dark is #55bf9f */
}

/*
 * Optional: Tone down the orange on the testimonial "winner" text
 * to let the primary buttons be the main focus.
 */
.testimonial-card .text-primary {
   color: var(--ctp-accent3) !important;
   opacity: 0.8;
}