:root {
    --color-bg: #f0f2f5;
    --color-header: #ffffff;
    --color-primary: #1a1f71;
    --color-secondary: #d4af37;
    --color-text: #2d2d2d;
    --color-spec-bg: #ffffff;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Source Sans Pro', sans-serif;
}

body {
    background: var(--color-bg);
    font-family: var(--font-body);
    color: var(--color-text);
}

header {
    background: var(--color-header) !important;
}

header .container {
    background: rgba(240, 230, 210, 0.4);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 100%;
}

/* Responsive font sizing for header container */
@media (max-width: 1200px) {
    header .container .site-name {
        font-size: 2.5rem;
    }
    header .container .slogan {
        font-size: 1.2rem;
    }
    header .container .contact-link a {
        font-size: 1.5rem;
    }
}

/* Hide/show center container in header based on screen size */
@media (max-width: 767.98px) {
    header .container .col-md-4.text-center {
        display: none;
    }

    /* Keep left and right blocks on the same row */
    header .container .row {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    header .container .col-md-4:first-child,
    header .container .col-md-4:last-child {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    header .container .col-md-4:last-child {
        text-align: right;
    }

    /* Set header padding-bottom to 0 when slider is hidden */
    header.pb-5 {
        padding-bottom: 0 !important;
    }
}

@media (min-width: 768px) {
    header .container .col-md-4.text-center {
        display: block;
    }

    /* Adjust layout for larger screens */
    header .container .row {
        justify-content: space-between;
    }

    header .container .col-md-4:first-child {
        flex: 0 0 auto;
    }

    header .container .col-md-4:last-child {
        flex: 0 0 auto;
        text-align: right;
    }

    /* Remove padding-bottom from header with pb-5 class */
    header.pb-5 {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 992px) {
    header .container .site-name {
        font-size: 2.2rem;
    }
    header .container .slogan {
        font-size: 1.1rem;
    }
    header .container .contact-link a {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    header .container {
        padding: 1.5rem;
        width: 100%;
        max-width: 100%;
    }
    header .container .site-name {
        font-size: 1.8rem;
    }
    header .container .slogan {
        font-size: 1rem;
    }
    header .container .contact-link a {
        font-size: 1.2rem;
    }
    header .container .contact-link i {
        font-size: 1.2rem;
    }
}

.site-name, .title-price-row .card-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 700;
}

.slogan {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-size: 1.3rem;
}

.title-price-row {
    background: var(--color-secondary);
}
.title-price-row .price {
    color: #fff;
}

.spec-block {
    background: var(--color-spec-bg);
}

.contact-link a {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===== Section 9: Thermostat Cards Theme Adjustments ===== */

/* Title + Price Row: use theme colors and typography */
.thermostat-card .title-price-row {
    background: var(--color-secondary);
    color: #fff;
}
.thermostat-card .title-price-row .card-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}
.thermostat-card .title-price-row .price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Specs Block: use theme spec background and text color */
.thermostat-card .spec-block {
    background: var(--color-spec-bg);
}
.thermostat-card .spec-keys,
.thermostat-card .spec-values {
    color: var(--color-text);
    font-family: var(--font-body);
}
.thermostat-card .spec-keys {
    font-weight: 700;
    text-align: right;
}
.thermostat-card .spec-values {
    font-weight: 400;
    text-align: left;
}