/*
 * CareerCompass Teal Background v1.0.1
 * Contrast-safe visual layer for CareerCompass USA Theme v1.0.13.
 * No content, menu, featured-image, ad, SEO or database changes.
 */

html {
    background: #eefbfd;
}

body.ccusa-teal-background-active {
    background: transparent !important;
    position: relative;
    isolation: isolate;
}

/* Site-wide decorative artwork. */
body.ccusa-teal-background-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #f8fdfe;
    background-image: var(--ccusa-teal-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Header stays clean and readable over the artwork. */
body.ccusa-teal-background-active .site-header {
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Preserve the dark utility bar and footer contrast. */
body.ccusa-teal-background-active .topline {
    background: #071f33 !important;
    color: #d8ebf8 !important;
}
body.ccusa-teal-background-active .topline a {
    color: #8be0d0 !important;
}
body.ccusa-teal-background-active .site-footer {
    background: #071f33 !important;
    color: #c7d9e5 !important;
}
body.ccusa-teal-background-active .site-footer h3,
body.ccusa-teal-background-active .site-footer .footer-brand {
    color: #fff !important;
}

/*
 * CONTRAST FIX:
 * These theme sections were designed for white/light text over dark gradients.
 * The previous plugin version accidentally stripped their gradient background,
 * leaving white text over the pale teal artwork. Restore their intended dark
 * surfaces explicitly so all text and translucent mini-cards remain readable.
 */
body.ccusa-teal-background-active .hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(48,196,171,.24), transparent 28%),
        linear-gradient(135deg,#081f33,#0e3a5b 62%,#0d5a62) !important;
    color: #fff !important;
}
body.ccusa-teal-background-active .hero p {
    color: #d7e8f1 !important;
}
body.ccusa-teal-background-active .hero .eyebrow {
    color: #7de5d0 !important;
}
body.ccusa-teal-background-active .hero .trust-row,
body.ccusa-teal-background-active .hero .pulse {
    color: #c9e4ef !important;
}
body.ccusa-teal-background-active .hero .mini-card {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #fff !important;
}
body.ccusa-teal-background-active .hero .mini-card p {
    color: #d7e8f1 !important;
}
body.ccusa-teal-background-active .hero .mini-card.active {
    background: #fff !important;
    color: #15324a !important;
}
body.ccusa-teal-background-active .hero .mini-card.active p {
    color: #61788b !important;
}

body.ccusa-teal-background-active .demand {
    background: linear-gradient(135deg,#0b2741,#10596b) !important;
    color: #fff !important;
}
body.ccusa-teal-background-active .demand p {
    color: #d1e3eb !important;
}
body.ccusa-teal-background-active .demand-list span {
    color: #c9dce5 !important;
}

body.ccusa-teal-background-active .city-band {
    background: linear-gradient(135deg,#16324a,#7f4b3c) !important;
    color: #fff !important;
}
body.ccusa-teal-background-active .city-band p {
    color: #d1e3eb !important;
}

/* Pale theme bands become glassy but retain dark text. */
body.ccusa-teal-background-active .stats-strip {
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
body.ccusa-teal-background-active .toolkit,
body.ccusa-teal-background-active .archive-hero {
    background: rgba(247,252,253,.90) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #102a43;
}

/* Cards and menus keep solid reading surfaces. */
body.ccusa-teal-background-active .post-card,
body.ccusa-teal-background-active .tool-grid > a,
body.ccusa-teal-background-active .side-box,
body.ccusa-teal-background-active .cc-mega-panel,
body.ccusa-teal-background-active .hero-search {
    background-color: rgba(255,255,255,.97);
}

/* Keep primary reading text dark and stable on the pale central artwork. */
body.ccusa-teal-background-active .article-content,
body.ccusa-teal-background-active .page-content,
body.ccusa-teal-background-active .single-post > .wrap.narrow,
body.ccusa-teal-background-active .related,
body.ccusa-teal-background-active .final-cta {
    color: #102a43;
}

/* Ads and their admin previews are left alone. */

@media (max-width: 900px) {
    body.ccusa-teal-background-active::before {
        background-position: center top;
        background-size: auto 100vh;
        background-color: #f8fdfe;
    }

    body.ccusa-teal-background-active .site-header {
        background: rgba(255,255,255,.98) !important;
    }

    body.ccusa-teal-background-active .toolkit,
    body.ccusa-teal-background-active .archive-hero {
        background: rgba(248,253,254,.94) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ccusa-teal-background-active::before {
        background-attachment: scroll;
    }
}