/* ── Per-client brand layer — All Around Tampa Paver Services ──────────────────────
   Brand: light blue #1AB2E9 (primary), #2B97E6, black, white (GC brand_colors_v2).
   WHITE header (the logo has a white background, so it blends), blue accents, and
   deep-blue dark sections/overlays. Fonts: Sora (headings) + Inter (body).
   Brand only — structure + standards live in the synced components.css; never fork it. */

body.theme-growth {
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Structural ramp remapped from green → BLUE (brand). */
  --color-green-900: #082841;  /* deep navy-blue: dark sections + image overlays */
  --color-green-800: #0d3a5e;
  --color-green-700: #145b8f;
  --color-green-600: #1AB2E9;  /* brand light blue */
  --color-green-100: #e9f6fd;  /* light blue tint */
  --color-primary:   #1565a8;  /* readable blue: buttons, links, accents on white */

  --color-accent: #1AB2E9;     /* bright accent */
}

/* ── Eyebrows / kickers: dark blue on light sections; bright on dark/photo sections ── */
body.theme-growth .eyebrow,
body.theme-growth .kicker { color: #1565a8; }
body.theme-growth .hero .eyebrow,
body.theme-growth .final-cta .eyebrow,
body.theme-growth .eyebrow-light { color: #6fd3f7; }

/* ── Primary CTA — accessible blue with white text ──────────────────────────────── */
body.theme-growth .btn-primary { background: #1565a8; color: #ffffff; }
body.theme-growth .btn-primary:hover { background: #11507f; color: #ffffff; }
body.theme-growth .primary-nav .nav-cta .btn-primary { background: #1565a8; color: #ffffff; }

/* nav underline + active marker → bright blue (white header stays default) */
body.theme-growth .primary-nav > ul > li > a::after { background: #1AB2E9; }
/* mobile call + hamburger boxes → brand blue */
body.theme-growth .nav-toggle,
body.theme-growth .header-call-btn { background: #1565a8; }
body.theme-growth .nav-toggle span:not(.sr-only) { background: #ffffff; }

/* ── Template mint (#AEE6B7) → on-brand + legible ──────────────────────────────── */
body.theme-growth .hero-title-location { color: #ffffff; }
body.theme-growth .city-list-more a { color: #73c2ff; }
body.theme-growth .city-list li::before { background: #1AB2E9; }
body.theme-growth .site-footer a:hover { color: #1AB2E9; }

/* ── Footer (deep blue): the white-bg logo sits on a white chip so it reads cleanly ── */
body.theme-growth .brand-logo--footer { background: #ffffff; padding: 10px 14px; border-radius: 10px; filter: none; }

/* ── Closing CTA card on the photo band — deep-blue glass with a bright edge ──────── */
body.theme-growth .cta-panel {
  background: linear-gradient(180deg, rgba(13, 58, 94, 0.92) 0%, rgba(8, 40, 65, 0.94) 100%);
  border: 1px solid rgba(26, 178, 233, 0.5);
  box-shadow: 0 30px 70px -42px rgba(0, 0, 0, 0.75);
}

/* Closing CTA band shows the photo on EVERY page (the homepage also sets it inline, which
   is what makes it a swappable slot in the Image Manager). One swap updates all CTAs. */
body.theme-growth .final-cta {
  background-image: linear-gradient(rgba(8, 40, 65, 0.88), rgba(8, 40, 65, 0.88)), url('/images/site/home--cta.jpg');
  background-size: cover;
  background-position: center;
}

/* light-blue tint behind the service-area band */
body.theme-growth .areas-section { background: #f2f8fc; }

/* ── Image-section fallbacks (deep blue) — pages set real photos inline; this only shows
      if a photo is missing so nothing renders pure-white. ───────────────────────────── */
body.theme-growth .hero--image-overlay,
body.theme-growth .final-cta,
body.theme-growth .hero--legal,
body.theme-growth .hero--blog,
body.theme-growth .hero--about,
body.theme-growth .hero--services,
body.theme-growth .hero--service-page,
body.theme-growth .hero--service-areas,
body.theme-growth .hero--service-area-page,
body.theme-growth .hero--gallery,
body.theme-growth .hero--careers,
body.theme-growth .hero--contact {
  background-color: #082841;
  background-size: cover;
  background-position: center;
}

/* ── Blog empty state (no published articles yet) ──────────────────────────────── */
body.theme-growth .empty-state {
  max-width: 640px; margin: 2.5rem auto 0; padding: 3rem 2rem; text-align: center;
  background: #fff; border: 1px solid rgba(8, 40, 65, 0.1); border-radius: 18px;
  box-shadow: 0 24px 60px -36px rgba(8, 40, 65, 0.45);
}
body.theme-growth .empty-state-icon {
  display: inline-grid; place-items: center; width: 64px; height: 64px;
  margin-bottom: 1.25rem; border-radius: 16px; background: rgba(26, 178, 233, 0.12); color: #1565a8;
}
body.theme-growth .empty-state-icon svg { width: 30px; height: 30px; }
body.theme-growth .empty-state h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 1.85rem); color: #082841; margin: 0 0 .75rem; }
body.theme-growth .empty-state p { color: #4a5a6a; margin: 0 auto 1.75rem; max-width: 48ch; }
body.theme-growth .empty-state .button-row { justify-content: center; }