/*
Theme Name: ContraCostaJobs (Astra child)
Template: astra
Version: 0.1.3
Description: ContraCostaJobs.com — the SacJobs-family location theme. Same design system as the SacJobs (Astra child) theme (identical CSS, identical [sj_*] shortcodes, so page content ports 1:1 between locations); only the logo, hero, footer, and pages/ copy are Contra Costa's. Keep the CSS in sync with wordpress/sacjobs-astra-child/style.css.
*/

/* ---- Brand tokens (from sacjobs.com's custom stylesheet + chat widget) ---- */
:root {
  --sj-blue: #469fef;        /* SJB theme primary */
  --sj-navy: #004aad;        /* brand navy (chat widget / hero overlay) */
  --sj-orange: #ff914d;      /* brand orange */
  --sj-ink: #494b60;
  --sj-muted: #6d6f80;
  --sj-bg: #f8f8f8;
}

body, button, input, select, textarea, .ast-container {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sj-ink);
}

/* ---- Pages are full-bleed: the ported sections bring their own containers ---- */
body.page .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
body.page .site-content .ast-container { display: block; }
body.page .ast-article-single, body.page .entry-content { padding: 0; margin: 0; }
body.page .entry-header, body.page .ast-single-post-featured-image { display: none; }
body.page .site-content > .ast-container { padding-top: 0; }
/* Astra gives .content-area a 60px top margin. On a full-bleed page that pushes the
   hero down and leaves a white band under the transparent overlaid header — where the
   white site title becomes invisible. Zero it; the sections bring their own spacing. */
body.page .site-content .content-area { margin-top: 0; }
body.page .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }
body.page .entry-content > p:empty { display: none; }
body.ast-separate-container.page .ast-article-single { background: transparent; box-shadow: none; }

/* ---- Header ----------------------------------------------------------------
   Solid white bar on EVERY page, including home. This is the deliberate departure
   from the SacJobs theme, which floats a transparent header over the hero photo.
   That trick needs a white logo; this location's primary lockup
   (ContraCostaJobs_Horizontal) is navy + orange on transparent, so it needs a light
   ground to be legible. There is a white one-colour badge in the brand kit, but
   Astra's free version only supports ONE logo site-wide — and a white logo would
   then vanish on every inner page. White bar it is.
   ------------------------------------------------------------------------------ */
/* The full-bleed rule above (body.page .ast-container) also strips the HEADER's
   container padding, which pins the logo to the left edge of the window and the nav
   to the right. The header is not full-bleed content — give it its gutters back. */
.site-header .ast-container {
  max-width: 1200px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 20px !important; padding-right: 20px !important;
}
.site-header .ast-primary-header-bar { border-bottom: 1px solid #ececf0; }
.site-header, .site-header .ast-primary-header-bar, .site-header .main-header-bar {
  background: #fff;
}
/* The horizontal lockup is ~3.3:1 — size it by width, not the square-logo max-width
   the SacJobs theme uses. */
.site-logo-img img, .site-logo-img .custom-logo-link img {
  max-width: 250px !important; width: auto !important; height: auto;
}
.main-header-menu .menu-item .menu-link { font-weight: 500; font-size: 17px; color: var(--sj-ink); }
.main-header-menu .menu-item .menu-link:hover { color: var(--sj-navy); }

/* ---- Hero (home): the SJB search banner ---- */
.sj-hero {
  position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: 50% 82%; color: #fff; text-align: center;
  padding: 90px 20px 80px;
}
.sj-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,74,173,.72), rgba(0,74,173,.6));
}
.sj-hero > * { position: relative; }
/* Hero type: this differs from the SacJobs theme on purpose. There, the H1 is a 20px
   strapline sitting well above the search box — a clone of the old SmartJobBoard banner.
   Here the H1 is the page's real headline ("Contra Costa Job Fairs & Local Hiring") with
   a supporting line under it, so it's sized like a headline and the gap is closed up. */
.sj-hero h1 {
  color: #fff; font-family: 'Rubik', 'Work Sans', sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.5px; margin: 0 0 14px;
}
.sj-hero .sj-hero-sub {
  color: rgba(255,255,255,.92); font-family: 'Work Sans', sans-serif; font-size: 16px;
  line-height: 1.6; max-width: 680px; margin: 0 auto 40px;
}
@media (min-width: 992px) {
  .sj-hero h1 { font-size: 42px; }
  .sj-hero .sj-hero-sub { font-size: 18px; margin-bottom: 46px; }
}
.sj-hero form { display: flex; gap: 28px; max-width: 1010px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.sj-hero .sj-hero-input { flex: 1 1 520px; height: 60px; border: 0; border-radius: 3px; padding: 0 20px 0 48px; font-size: 17px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236d6f80' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50% no-repeat; }
.sj-hero .sj-hero-btn { flex: 0 0 270px; height: 60px; border: 0; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.sj-hero .sj-hero-btn:hover { background: var(--sj-blue); }

/* ---- Latest jobs (WP Job Manager list styled like the SJB cards) ---- */
.sj-latest-jobs { padding: 60px 20px 40px; }
.sj-latest-jobs .sj-latest-jobs-inner { max-width: 1160px; margin: 0 auto; }
.sj-latest-jobs h2 { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 500; font-size: 32px; color: var(--sj-ink); margin: 0 0 30px; }
/* WPJM ships its own list CSS; make the reset explicit so the cards look right
   even before that stylesheet loads (and in the local preview.html, which has no WPJM). */
.sj-latest-jobs ul.job_listings { list-style: none; margin: 0; padding: 0; }
.sj-latest-jobs ul.job_listings li.job_listing { list-style: none; }
.sj-latest-jobs ul.job_listings li.job_listing a,
.sj-latest-jobs ul.job_listings li.job_listing a:hover { text-decoration: none; }
.sj-latest-jobs ul.job_listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sj-latest-jobs ul.job_listings li.job_listing { background: #fff; border: 1px solid #ececf0; border-radius: 3px; padding: 22px 18px; }
.sj-latest-jobs ul.job_listings li.job_listing a { display: block; padding: 0; }
.sj-latest-jobs ul.job_listings li.job_listing .position h3 { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 10px 0 8px; color: var(--sj-ink); }
.sj-latest-jobs ul.job_listings li.job_listing .company, .sj-latest-jobs ul.job_listings li.job_listing .location { color: var(--sj-muted); font-size: 15px; }
.sj-latest-jobs ul.job_listings li.job_listing .job-type { display: inline-block; background: #666; color: #fff; border-radius: 3px; padding: 4px 12px; font-size: 14px; }
.sj-latest-jobs .sj-view-all { text-align: center; margin-top: 30px; }
.sj-latest-jobs .sj-view-all a { display: inline-block; background: var(--sj-blue); color: #fff; font-weight: 700; padding: 18px 60px; border-radius: 3px; text-decoration: none; }
.sj-latest-jobs .sj-view-all a:hover { background: #2f8de6; color: #fff; }

/* Astra's default footer is replaced by the ContraCostaJobs footer (functions.php) */

/* WPJM card internals: stack instead of the default float layout */
.sj-latest-jobs ul.job_listings li.job_listing a > * { float: none !important; width: auto !important; display: block; text-align: left !important; padding: 0 !important; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta { margin-top: 14px; color: var(--sj-ink); font-weight: 600; font-size: 15px; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta .job-type { float: right; font-weight: 700; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta .date { display: inline-block; }
.sj-latest-jobs ul.job_listings li.job_listing a img.company_logo { width: 48px; height: 48px; float: none; margin: 0 0 6px; }

/* Astra's builder footer (copyright bar) is replaced by the ContraCostaJobs footer */
footer.site-footer#colophon { display: none; }
/* Header wordmark. The SacJobs theme hides the site title outright because that site
   has a logo image; this location has no logo yet, so hiding it would leave the header
   completely empty. Until a logo is uploaded, the site title IS the wordmark — styled to
   match the footer's. Once a real logo goes in Customizer > Site Identity, Astra swaps
   the title for the image on its own and these rules stop applying. */
.site-header .site-description { display: none; }
.site-header .site-title {
  font-family: 'Rubik', 'Work Sans', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.4px; margin: 0;
}
.site-header .site-title a { color: var(--sj-navy); text-decoration: none; }
.site-header .site-title a:hover { opacity: .85; }
/* Centered strips must beat the full-bleed rule above */


.sj-latest-jobs ul.job_listings li.job_listing a img.company_logo { position: static !important; }

/* ---- Ported SmartJobBoard static pages (pages/*.html) ---- */
.sj-page .container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.sj-page .title__primary { font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 32px; color: var(--sj-ink); text-align: center; margin: 40px 0 10px; }
.sj-page .static-pages { padding: 0; }
.sj-page .static-pages > .title__primary { max-width: 1170px; margin-left: auto; margin-right: auto; }
.sj-page .page-row-expanded { padding-bottom: 40px; }

/* ---- [sacjobs_fair_roster] (employers attending, from the CRM) ---- */
.sj-roster { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
.sj-roster-title { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 700; font-size: 30px; text-align: center; margin: 0 0 18px; }
.sj-roster-group { font-size: 18px; margin: 22px 0 10px; color: var(--sj-navy); }
.sj-roster-count { color: var(--sj-muted); font-weight: 400; }
.sj-roster-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.sj-roster-list li { background: #fff; border: 1px solid #ececf0; border-radius: 8px; padding: 10px 14px; }
.sj-roster-company { font-weight: 600; }
.sj-roster-industry { color: var(--sj-muted); font-size: 13px; margin-left: 6px; }
.sj-roster-updated { color: var(--sj-muted); font-size: 13px; text-align: center; margin-top: 16px; }

/* ---- [sacjobs_company] (My Company page) ---- */
.sj-company { max-width: 760px; margin: 30px auto; padding: 24px; background: #fff; border: 1px solid #ececf0; border-radius: 8px; }
.sj-company h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-company-notice { background: #eaf6ee; border: 1px solid #bfe3c8; padding: 10px 14px; border-radius: 6px; }
.sj-company-members { list-style: none; margin: 0 0 14px; padding: 0; }
.sj-company-members li { padding: 10px 0; border-bottom: 1px solid #f0f0f4; }
.sj-company-members li span { color: var(--sj-muted); margin: 0 8px; }
.sj-company-members li em { color: var(--sj-navy); font-style: normal; font-size: 13px; }
.sj-company-btn { background: var(--sj-blue); color: #fff; border: 0; border-radius: 4px; padding: 10px 22px; font-weight: 600; cursor: pointer; }
.sj-company-btn:hover { background: #2f8de6; }
.sj-company-x { background: none; border: 0; color: #c0392b; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0 4px; }
.sj-company-pending { color: var(--sj-muted); font-size: 14px; }

/* ---- Matched candidates panel (.sj-match) ---- */
.sj-match { max-width: 860px; margin: 40px auto; padding: 24px; background: #fff; border: 2px solid var(--sj-navy); border-radius: 10px; }
.sj-match h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-match-badge { font-size: 12px; background: #eef4ff; color: var(--sj-navy); border-radius: 999px; padding: 4px 10px; vertical-align: middle; margin-left: 8px; font-weight: 600; }
.sj-match-criteria { width: 100%; }
.sj-match-card { border: 1px solid #ececf0; border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.sj-match-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sj-match-head span { color: var(--sj-muted); font-size: 14px; }
.sj-match-pct { margin-left: auto; font-weight: 700; color: var(--sj-navy); }
.sj-match-checks { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; font-size: 14px; }
.sj-match-checks .sj-yes { color: #1e7e34; }
.sj-match-checks .sj-no { color: #b3b3bf; }
.sj-match-why { color: var(--sj-ink); font-size: 14px; background: var(--sj-bg); border-radius: 6px; padding: 8px 12px; }
.sj-match-note { color: var(--sj-muted); font-size: 13px; }
#sj-ai-draft { margin-bottom: 8px; }
#sj-ai-draft .sj-ai-btn, #sj-ai-draft .sj-ai-go { background: var(--sj-navy); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px; cursor: pointer; }
#sj-ai-draft .sj-ai-panel { border: 1px solid #ececf0; border-radius: 6px; padding: 12px; margin-top: 8px; }
#sj-ai-draft .sj-ai-facts { width: 100%; }

/* ---- Fair attendees (.sj-fa) ---- */
.sj-fa { max-width: 860px; margin: 30px auto; padding: 24px; background: #fff; border: 2px solid var(--sj-navy); border-radius: 10px; }
.sj-fa h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-fa-fairs { margin: 12px 0 18px; }
.sj-fa-closed { opacity: .5; cursor: not-allowed; }
.sj-fa-card { border: 1px solid #ececf0; border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.sj-fa-tags { margin-left: auto; }
.sj-fa-in { color: #1e7e34; font-style: normal; font-weight: 600; }
.sj-fa-res { color: var(--sj-navy); font-style: normal; }
.sj-fa-meta { display: block; color: var(--sj-muted); font-size: 14px; margin: 2px 0; }
.sj-fa .sj-reveal { margin-top: 8px; }

/* ---- Event data report ---- */
.sj-fa-tools { margin: 10px 0 20px; }
.sj-rep-cards { display: flex; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.sj-rep-card { background: var(--sj-navy); color: #fff; border-radius: 10px; padding: 14px 22px; text-align: center; }
.sj-rep-card b { display: block; font-size: 28px; font-family: 'Rubik','Work Sans',sans-serif; }
.sj-rep-card span { font-size: 13px; opacity: .85; }
.sj-rep-block { margin: 14px 0; }
.sj-rep-block h5 { margin: 0 0 6px; font-size: 14px; color: var(--sj-navy); text-transform: uppercase; letter-spacing: .4px; }
.sj-rep-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; font-size: 14px; }
.sj-rep-label { flex: 0 0 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-rep-bar { flex: 1; background: #eef2f8; border-radius: 4px; height: 14px; }
.sj-rep-bar i { display: block; height: 100%; background: var(--sj-blue); border-radius: 4px; }
.sj-rep-n { flex: 0 0 34px; text-align: right; color: var(--sj-muted); }
.sj-fa-topmatch { border-top: 1px solid #ececf0; margin-top: 18px; padding-top: 12px; }
.sj-fa-criteria, .sj-fa-job { width: 100%; }

/* ============================================================================
   HOME PAGE SECTIONS (.ccj-home)
   Styles for the pages/home-intro.html and pages/home.html blocks.

   Note the deliberate difference from the SacJobs theme: over there the home
   page's CSS is minified INSIDE pages/home.html (a 67 KB builder export). Here
   it lives in the stylesheet, so the page files are pure markup and a copy edit
   never goes near CSS. If you port a section between the two sites, remember to
   bring the matching rules across.
   ============================================================================ */

.ccj-home {
  --blue-light: #2876de;
  --blue: #004aad;
  --blue-dark: #003485;
  --orange: #ff914d;
  --orange-dark: #e77637;
  --orange-light: #fff2e8;
  --orange-border: #ffd4b5;
  --slate: #2d3748;
  --slate-light: #4a5568;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --green: #16a34a;
  --hero-gradient: linear-gradient(135deg, #2876de 0%, #004aad 100%);
  font-family: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--slate);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap/Astra reset guards — the same defence the SacJobs blocks use, so a
   theme update can't float or column-ise these sections. */
.ccj-home, .ccj-home *, .ccj-home *::before, .ccj-home *::after { box-sizing: border-box; }
.ccj-home div, .ccj-home section, .ccj-home article, .ccj-home span,
.ccj-home a, .ccj-home ul, .ccj-home li, .ccj-home p { float: none !important; clear: none !important; }
.ccj-home [class*="col-"], .ccj-home .row {
  width: auto !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; flex: initial !important;
}
.ccj-home h2, .ccj-home h3 { font-family: 'Rubik', sans-serif; line-height: 1.2; letter-spacing: -0.4px; }

.ccj-home .ccj-section { max-width: 1100px; margin: 0 auto; padding: 48px 16px; }
.ccj-home .ccj-section-alt { background: var(--gray-50); max-width: none; }
.ccj-home .ccj-section-alt > .ccj-inner { max-width: 1100px; margin: 0 auto; padding: 48px 16px; }
.ccj-home .ccj-eyebrow {
  display: inline-block; background: var(--orange-light); color: var(--orange-dark) !important;
  font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 99px;
  letter-spacing: 0.6px; text-transform: uppercase; border: 1px solid var(--orange-border);
  margin-bottom: 14px;
}
.ccj-home .ccj-title { font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 12px; color: var(--slate); }
.ccj-home .ccj-sub { font-size: 15px; color: var(--slate-light); text-align: center; margin: 0 auto 32px; max-width: 640px; line-height: 1.6; }
.ccj-home .ccj-center { text-align: center; }

/* ---- Cards ---- */
.ccj-home .ccj-grid { display: grid !important; grid-template-columns: 1fr; gap: 16px; }
.ccj-home .ccj-card {
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px;
  padding: 24px 22px; transition: transform .18s, box-shadow .18s;
}
.ccj-home a.ccj-card { display: block; text-decoration: none !important; color: inherit; }
.ccj-home .ccj-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.09); }
.ccj-home .ccj-card-icon {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue)); color: #fff;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px; box-shadow: 0 4px 12px rgba(0,74,173,.25);
}
.ccj-home .ccj-card-icon-orange { background: linear-gradient(135deg, #ffa96b, var(--orange-dark)); box-shadow: 0 4px 12px rgba(255,145,77,.3); }
.ccj-home .ccj-card h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--slate); }
.ccj-home .ccj-card p { font-size: 14px; color: var(--slate-light); line-height: 1.6; margin: 0; }

/* ---- Audience band (2 big choice cards) ---- */
.ccj-home .ccj-audience { display: grid !important; grid-template-columns: 1fr; gap: 16px; }
.ccj-home .ccj-audience-card {
  display: block; text-decoration: none !important; color: inherit;
  border-radius: 18px; padding: 32px 26px; border: 2px solid transparent;
  transition: transform .18s, box-shadow .18s;
}
.ccj-home .ccj-audience-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.ccj-home .ccj-audience-seeker { background: var(--hero-gradient); color: #fff; }
.ccj-home .ccj-audience-employer { background: linear-gradient(135deg, #ffa96b 0%, var(--orange-dark) 100%); color: #fff; }
.ccj-home .ccj-audience-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: #fff !important; }
.ccj-home .ccj-audience-card p { font-size: 14.5px; margin: 0 0 16px; color: rgba(255,255,255,.9); line-height: 1.6; }
.ccj-home .ccj-audience-go { font-size: 14px; font-weight: 700; color: #fff !important; }

/* ---- Buttons ---- */
.ccj-home .ccj-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 13px 28px; font-size: 14.5px; font-weight: 700; border-radius: 11px;
  text-decoration: none !important; transition: filter .15s, transform .15s;
}
.ccj-home .ccj-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ccj-home .ccj-btn-orange { background: var(--orange); color: #fff !important; box-shadow: 0 4px 16px rgba(255,145,77,.35); }
.ccj-home .ccj-btn-blue { background: var(--blue); color: #fff !important; box-shadow: 0 4px 16px rgba(0,74,173,.3); }
.ccj-home .ccj-btn-ghost { background: rgba(255,255,255,.15); color: #fff !important; border: 1px solid rgba(255,255,255,.35); }
.ccj-home .ccj-btn-row { display: flex !important; flex-direction: column !important; gap: 10px; max-width: 380px; margin: 28px auto 0; }

/* ---- County strip (cities + numbers) ---- */
.ccj-home .ccj-cities { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 8px; max-width: 900px; }
.ccj-home .ccj-city {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 99px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--slate);
}
.ccj-home .ccj-stats { display: grid !important; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.ccj-home .ccj-stat { background: var(--blue); color: #fff; border-radius: 14px; padding: 22px 18px; text-align: center; }
.ccj-home .ccj-stat b { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.ccj-home .ccj-stat span { font-size: 13px; opacity: .88; }

/* ---- Areas we serve (the local-SEO prose block) ---- */
.ccj-home .ccj-areas {
  max-width: 860px; margin: 0 auto; text-align: center;
  font-size: 16px; line-height: 1.75; color: var(--slate);
}
.ccj-home .ccj-areas strong { font-weight: 700; }
.ccj-home .ccj-areas-nearby { color: var(--slate-light); font-size: 15px; margin-top: 4px; }

/* ---- Coming-soon panel ---- */
.ccj-home .ccj-soon {
  background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 18px;
  padding: 32px 24px; text-align: center;
}
.ccj-home .ccj-soon-list { list-style: none; margin: 0 auto 20px; padding: 0; max-width: 520px; text-align: left; display: grid !important; gap: 8px; }
.ccj-home .ccj-soon-list li { display: flex !important; align-items: flex-start !important; gap: 10px; font-size: 14px; color: var(--slate); line-height: 1.5; }
.ccj-home .ccj-soon-list li::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }

.ccj-home .ccj-fine { font-size: 12.5px; color: var(--gray-500); font-style: italic; margin: 16px 0 0; }

/* ---- Final CTA ---- */
.ccj-home .ccj-cta {
  background: var(--hero-gradient); border-radius: 20px; padding: 36px 28px;
  color: #fff; text-align: center; overflow: hidden; position: relative;
  box-shadow: 0 12px 40px rgba(0,74,173,.25);
}
.ccj-home .ccj-cta::before {
  content: ''; position: absolute !important; top: -80px; right: -80px;
  width: 240px; height: 240px; border-radius: 50%; background: rgba(255,145,77,.18);
}
.ccj-home .ccj-cta-inner { position: relative; z-index: 2; }
.ccj-home .ccj-cta h2 { font-size: 24px; font-weight: 800; color: #fff !important; margin: 0 0 12px; }
.ccj-home .ccj-cta p { font-size: 15px; color: rgba(255,255,255,.92); margin: 0 auto 22px; max-width: 520px; line-height: 1.6; }

@media (min-width: 600px) {
  .ccj-home .ccj-section, .ccj-home .ccj-section-alt > .ccj-inner { padding: 64px 24px; }
  .ccj-home .ccj-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ccj-home .ccj-audience { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ccj-home .ccj-stats { grid-template-columns: repeat(3, 1fr); }
  .ccj-home .ccj-btn-row { flex-direction: row !important; max-width: 520px; justify-content: center; }
}
@media (min-width: 992px) {
  .ccj-home .ccj-title { font-size: 30px; }
  .ccj-home .ccj-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ccj-home .ccj-cta { padding: 48px 36px; }
  .ccj-home .ccj-cta h2 { font-size: 28px; }
}