/* ============================================
   Custom color palette for Heat Pump Buddy
   Based on: danger=#bd2426, info=#b9c7dd
   Generated using thecolorapi.com analogic scheme
   ============================================ */

/* === Color Variables === */
:root {
    --hpb-danger: #a35a5b;
    --hpb-danger-light: #f2e6e6;
    --hpb-danger-dark: #6e3a3b;

    --hpb-info: #b9c7dd;
    --hpb-info-light: #e8edf4;
    --hpb-info-dark: #3d4f6a;

    --hpb-warning: #9a7b5a;
    --hpb-warning-light: #f2ebe3;
    --hpb-warning-dark: #6b533c;

    --hpb-success: #85bb90;
    --hpb-success-light: #e6f0e9;
    --hpb-success-dark: #2f5d3a;

    --hpb-primary: #8fa8c9;
    --hpb-secondary: #6c757d;
    --hpb-purple: #6f42c1;
    --hpb-orange: #d9812e;
    --hpb-neutral: #798897;
    --hpb-blue: #007bff;
}

/* === Alert Variants === */
.alert-danger {
    background-color: var(--hpb-danger-light) !important;
    border-color: #e4a3a4 !important;
    color: var(--hpb-danger-dark) !important;
}
.alert-danger .alert-link { color: #4a0e0f !important; }

.alert-info {
    background-color: var(--hpb-info-light) !important;
    border-color: var(--hpb-info) !important;
    color: var(--hpb-info-dark) !important;
}
.alert-info .alert-link { color: #2a3749 !important; }

.alert-warning {
    background-color: var(--hpb-warning-light) !important;
    border-color: #e0a483 !important;
    color: var(--hpb-warning-dark) !important;
}
.alert-warning .alert-link { color: #4a200e !important; }

.alert-success {
    background-color: var(--hpb-success-light) !important;
    border-color: #c8db7d !important;
    color: var(--hpb-success-dark) !important;
}
.alert-success .alert-link { color: #333c0b !important; }

/* === Badge Variants === */
.badge-danger { background-color: var(--hpb-danger) !important; }
.badge-info { background-color: var(--hpb-primary) !important; }
.badge-warning { background-color: var(--hpb-warning) !important; color: #fff !important; }
.badge-success { background-color: var(--hpb-success) !important; }

/* === Background Variants === */
.bg-danger { background-color: var(--hpb-danger) !important; }
.bg-info { background-color: var(--hpb-primary) !important; }
.bg-warning { background-color: var(--hpb-warning) !important; }
.bg-success { background-color: var(--hpb-success) !important; }
.bg-neutral { background-color: var(--hpb-neutral) !important; }

/* === Border Variants === */
.border-danger { border-color: var(--hpb-danger) !important; }
.border-info { border-color: var(--hpb-info) !important; }
.border-warning { border-color: var(--hpb-warning) !important; }
.border-success { border-color: var(--hpb-success) !important; }
.border-blue { border-color: var(--hpb-blue) !important; }

/* === Icon Colors === */
.icon-primary { color: var(--primary-color); }
.icon-danger { color: var(--hpb-danger); }
.icon-success { color: var(--hpb-success); }
.icon-warning { color: var(--hpb-warning); }
.icon-info { color: var(--hpb-info-dark); }
.icon-secondary { color: var(--hpb-secondary); }
.icon-purple { color: var(--hpb-purple); }
.icon-orange { color: var(--hpb-orange); }
.icon-blue { color: var(--hpb-blue); }

/* === Header === */
.header-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    margin-top: 10px;
}

/* === Navigation Cards === */
.nav-card {
    text-decoration: none;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.nav-card:hover {
    transform: translateY(-3px);
}

/* === Cards with colored borders === */
.card-border-left-info { border-left: 4px solid var(--hpb-info-dark); }
.card-border-left-purple { border-left: 4px solid var(--hpb-purple); }
.card-border-top-danger { border-top: 4px solid var(--hpb-danger); }
.card-border-top-info { border-top: 4px solid var(--hpb-info-dark); }
.card-border-top-warning { border-top: 4px solid var(--hpb-warning); }
.card-border-top-orange { border-top: 4px solid var(--hpb-orange); }
.card-border-top-secondary { border-top: 4px solid var(--hpb-secondary); }

/* === Process Step Boxes === */
.step-box {
    padding: 1rem;
    border-radius: 8px;
}
.step-box-info {
    background-color: var(--hpb-info-light);
}
.step-box-warning {
    background-color: var(--hpb-warning-light);
}
.step-box-danger {
    background-color: var(--hpb-danger-light);
}
.step-box-success {
    background-color: var(--hpb-success-light);
}

/* === Frequency Indicator Boxes === */
.freq-box {
    padding: 1.5rem;
    border-radius: 10px;
}
.freq-box-success {
    background: linear-gradient(135deg, var(--hpb-success-light), #c1eac9);
}
.freq-box-success h2, .freq-box-success h5 {
    color: var(--hpb-success-dark);
}
.freq-box-warning {
    background: linear-gradient(135deg, var(--hpb-warning-light), #f1d9b7);
}
.freq-box-warning h2, .freq-box-warning h5 {
    color: var(--hpb-warning-dark);
}
.freq-box-danger {
    background: linear-gradient(135deg, var(--hpb-danger-light), #eec2c2);
}
.freq-box-danger h2, .freq-box-danger h5 {
    color: var(--hpb-danger-dark);
}

/* === Feature Card (COP, CTA) === */
.card-neutral {
    background-color: var(--hpb-neutral);
    color: white;
}
.card-neutral h3, .card-neutral p {
    color: white;
}
.card-neutral p {
    opacity: 0.9;
}

/* === CTA Section === */
.cta-section {
    background-color: var(--hpb-neutral);
    color: white;
    padding: 40px;
    border-radius: 8px;
    margin-top: 30px;
}
.cta-section h2, .cta-section p {
    color: white;
}
.cta-section p {
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 20px;
}

/* === Collapsible Headers === */
.collapse-toggle {
    cursor: pointer;
}

/* === Info Card with border === */
.info-card-bordered {
    border-left: 4px solid var(--hpb-info-dark);
}

/* === Flex Row for Step Boxes === */
.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}
.flex-row > .step-box {
    flex: 1 1 calc(25% - 1rem);
    min-width: 0;
}
@media (max-width: 767px) {
    .flex-row {
        padding:  0 10px;
    }
    .flex-row > .step-box {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

/* === Print Styles === */
@media print {
    /* Expand all collapsed Bootstrap elements */
    .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Expand accordion items */
    .accordion .collapse {
        display: block !important;
    }

    /* Hide collapse toggle indicators */
    .collapse-toggle .fa-plus-circle::before {
        content: "\f056"; /* minus-circle */
    }

    /* Ensure cards are fully visible */
    .card, .avoid-breaking {
        page-break-inside: avoid;
    }

    a {
        text-decoration: none !important;
    }
    .hide-print {
        display: none !important;
    }
}