/* ------------------------------------------------------------------
   2026 SITE UPDATES
   Only the existing brand palette is used:
   #3E87CB blue, #382E2C charcoal, #929497 grey, #EFEFEF light grey, #FFF.

   Icon rule: every icon sits on the LEFT of its text (like the header
   location marker) and inherits the text's font size - no resizing.
   ------------------------------------------------------------------ */

/* External link marker - before the text, inherits size */
.icon-external {
    margin-right: 0.35em;
}

/* Header / mobile menu link to the national Carpet Court site */
.national-link {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #3E87CB;
    color: #3E87CB;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

    .national-link:hover {
        background: #3E87CB;
        color: #fff;
        text-decoration: none;
    }

    .national-link--block {
        padding: 10px 15px;
        min-width: 210px;
    }

/* Home page side banner (replaces the old COVID banner) */
.national-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    background: #3E87CB;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

    .national-banner:hover {
        color: #fff;
        text-decoration: none;
    }

    .national-banner__eyebrow {
        display: inline-block;
        background: #382E2C;
        padding: 2px 12px;
        font-size: 14px;
        letter-spacing: 0.06em;
        margin-bottom: 8px;
    }

    .national-banner__heading {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.05;
        margin-bottom: 6px;
    }

    .national-banner__sub {
        font-size: 13px;
        letter-spacing: 0.04em;
        opacity: 0.9;
    }

    .national-banner__site {
        display: block;
        width: 220px;
        max-width: 90%;
        height: auto;
        margin: 6px auto 18px;
    }

    .national-banner__button {
        border: 1px solid #fff;
        padding: 4px 16px;
        font-size: 14px;
        font-weight: 700;
        transition: background-color .3s ease-in-out, color .3s ease-in-out;
    }

    .national-banner__site--text {
        width: auto;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .national-banner:hover .national-banner__button {
        background: #fff;
        color: #3E87CB;
    }

/* Red "Sale on now" version of the same banner (red from the existing sale banner artwork) */
.national-banner--sale {
    background: #EE443D;
}

    .national-banner--sale:hover .national-banner__button {
        background: #fff;
        color: #EE443D;
    }

/* Product page call-to-action to the national site */
.national-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 30px;
    background: #EFEFEF;
}

    .national-cta__text {
        flex: 1 1 380px;
    }

    .national-cta__heading {
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        color: #3E87CB;
        margin-bottom: 8px;
    }

    .national-cta__copy {
        color: #382E2C;
    }

    .national-cta__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        flex: 0 0 auto;
    }

        .national-cta__buttons .btn {
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
        }

.btn-outline-primary {
    color: #3E87CB;
    background-color: #fff;
    border-color: #3E87CB;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #3E87CB;
        border-color: #3E87CB;
    }

/* Red outline button (promotions), same red as the sale banner */
.btn-outline-sale {
    color: #EE443D;
    background-color: #fff;
    border-color: #EE443D;
}

    .btn-outline-sale:hover {
        color: #fff;
        background-color: #EE443D;
        border-color: #EE443D;
    }

/* Social feeds (home page) - both panels share one fixed height */
:root {
    --social-feed-height: 600px; /* keep in sync with FeedHeight in _SocialFeeds.cshtml */
}

.social-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: 'brother_1816regular', Helvetica, Arial, sans-serif;
}

    .social-panel__header {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 20px 25px;
        color: #3E87CB;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .3s ease-in-out;
    }

        .social-panel__header:hover {
            color: #382E2C;
            text-decoration: none;
        }

        /* icon styled like the site's other social icons; only the icon reacts on hover */
        .social-panel__header .fa-social {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            margin: 0 10px 0 0;
            font-size: 16px;
            background: #3E87CB;
            color: #fff;
            transition: background-color .3s ease-in-out;
        }

        .social-panel__header:hover .fa-social {
            background: #382E2C;
            opacity: 1;
        }

    .social-panel--instagram {
        position: relative;
    }

    .social-panel__note {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: rgba(239,239,239,0.95);
        padding: 8px 15px;
        color: #929497;
        font-size: 13px;
        text-align: center;
    }

    .social-panel__body {
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: 15px;
        background: #fff;
        border: 4px solid #f5f6f7;
        box-sizing: content-box;
        height: var(--social-feed-height);
        overflow: hidden;
    }

        .social-panel__body--facebook {
            padding: 15px;
            overflow: hidden;
        }

            .social-panel__body--facebook iframe {
                display: block;
                border: none;
                width: 100%;
                max-width: 500px;
                height: var(--social-feed-height);
            }

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}

    /* 2 columns x 3 rows on small screens: only the first 6 posts fit */
    .instagram-grid__item:nth-child(n+7) {
        display: none;
    }

    .instagram-grid__item {
        position: relative;
        display: block;
        overflow: hidden;
        background: #EFEFEF;
    }

        .instagram-grid__item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease-in-out, opacity .3s ease-in-out;
        }

        .instagram-grid__item:hover img {
            transform: scale(1.05);
            opacity: 0.85;
        }

    .instagram-grid__badge {
        position: absolute;
        top: 8px;
        right: 8px;
        color: #fff;
        text-shadow: 0 0 6px rgba(0,0,0,0.7);
        font-size: 16px;
    }

.instagram-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px;
    text-align: center;
    color: #382E2C;
}

    .instagram-fallback__icon {
        font-size: 64px;
        color: #3E87CB;
        margin-bottom: 15px;
    }

    .instagram-fallback__handle {
        font-size: 20px;
        font-weight: 700;
        color: #3E87CB;
        margin-bottom: 10px;
    }

    .instagram-fallback__text {
        font-size: 16px;
        max-width: 380px;
        margin: 0;
    }

/* Social icons - store brand colour everywhere (contact page, footer, mobile menu) */
.social-links {
    display: inline-flex;
    gap: 6px;
}

    .social-links .fa-social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        font-size: 16px;
        background: #3E87CB;
        color: #fff;
        transition: background-color .3s ease-in-out;
    }

        .social-links .fa-social:hover {
            background: #382E2C;
            opacity: 1;
        }

/* Service areas */
.service-areas__list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 15px;
}

    .service-areas__list li i {
        color: #3E87CB;
        margin-right: 6px;
        font-size: 0.85em;
    }

/* FAQ */
.faq-list {
    margin-bottom: 30px;
}

.faq-item {
    border-bottom: 1px solid #929497;
}

    .faq-item summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 40px 16px 0;
        position: relative;
        font-weight: 500;
        font-size: 17px;
        color: #382E2C;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: '\f067';
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            position: absolute;
            right: 8px;
            top: 16px;
            color: #3E87CB;
        }

        .faq-item summary:hover {
            color: #3E87CB;
        }

    .faq-item[open] summary::after {
        content: '\f068';
    }

    .faq-item .faq-answer {
        padding: 0 0 20px 0;
    }

        .faq-item .faq-answer p:last-child {
            margin-bottom: 0;
        }

/* Product page intro paragraph */
.sub-page-main .page-intro {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: #382E2C;
}

@media (max-width: 767.98px) {
    .national-cta {
        padding: 20px;
    }

    .national-banner__heading {
        font-size: 28px;
    }
}

@media (min-width: 576px) {
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .instagram-grid__item:nth-child(n+7) {
        display: block;
    }
}

/* Body-copy section headings (h2 for correct heading order; looks like the existing h3.special) */
.sub-page-main h2.section-heading {
    font-size: 20px;
    margin-bottom: 1.8rem;
}