/* Define custom color variables */
:root {
    /* New Professional Color Palette */
    --primary-color: #0D47A1;     /* Deep Blue - Headers, Menu BG */
    --secondary-color-1: #1976D2; /* Medium Blue - Subheadings, Highlights */
    --secondary-color-2: #B0BEC5; /* Blue Gray - Subtle Highlights, Borders */
    --accent-color: #FFC107;      /* Amber/Gold - Buttons, CTAs */
    --alert-color: #E53935;       /* Soft Red - Alerts (Unchanged) */
    --neutral-bg: #F8F9FA;        /* Very Light Gray - Main Background */
    --neutral-text: #212529;      /* Near Black - Body Text */
    --neutral-light: #FFFFFF;     /* White - Contrasting Elements */

    --bs-body-font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--neutral-bg); /* Use new neutral background */
    color: var(--neutral-text); /* Use new text color */
}

/* Infographic connectors */
@media (min-width: 768px) {
    .infographic-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 45px;
        right: -50%;
        transform: translateX(50%);
        width: calc(100% - 40px);
        height: 2px;
        background-color: var(--primary-color);
        z-index: -1;
    }
    .infographic-step:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 39px;
        right: calc(-50% + (100% - 40px)/2);
        transform: translateX(50%) rotate(45deg);
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--primary-color);
        border-right: 2px solid var(--primary-color);
    }
}

@media (max-width: 767.98px) {
    .infographic-step:not(:last-child) {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px dashed var(--primary-color);
    }
    .infographic-step:not(:last-child)::after,
    .infographic-step:not(:last-child)::before {
        display: none;
    }
}

/* Hero section title */
.hero-section h1 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* HubSpot form container padding */
.contact-form-container {
    padding: 2rem;
}

/* Bootstrap icons */
[class^="bi-"]::before,
[class*=" bi-"]::before {
    color: var(--primary-color) !important;
}

/* Optional: override table header color if needed */
/*
#costos .table > :not(caption) > * > * {
    background-color: var(--primary-color);
    color: var(--neutral-light);
}
*/
/*
#costos .table tbody tr:hover (handled by .table-hover)
.cost-highlight (replaced by fw-bold, text-dark)
.notes (replaced by small, text-muted)
.success-note (replaced by small, text-dark, fw-bold, mt-*)
*/