/**
 * CodeBaby Labs — site-wide brand skin.
 * A light layer over the Twenty Twenty-Five block theme: brand color system,
 * refined header/footer, typographic polish. Enqueued on every front-end page
 * by the plugin (disable with option cbl_site_skin = 0). Deliberately scoped to
 * theme chrome — the demo index and the labs app bring their own styles.
 */

:root {
  --cbls-brand: #5c2cc9;
  --cbls-brand-2: #cc3366;
  --cbls-ink: #141516;
  --cbls-dim: #6b7280;
  --cbls-tint: #f5f3ff;
  --cbls-line: #e5e0f4;
}

body {
  color: var(--cbls-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(92, 44, 201, 0.16); }

:focus-visible {
  outline: 2px solid var(--cbls-brand);
  outline-offset: 2px;
}

/* ── Links (theme content only — cbl components style their own) ─────────── */
.wp-site-blocks a:where(:not(.wp-element-button):not([class*="cbl-"])) {
  color: var(--cbls-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wp-site-blocks a:where(:not(.wp-element-button):not([class*="cbl-"])):hover {
  color: var(--cbls-brand-2);
}

/* ── Header: sticky, translucent, bordered ────────────────────────────────── */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 990;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cbls-line);
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

.wp-block-site-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wp-block-site-title a {
  color: var(--cbls-ink) !important;
  text-decoration: none !important;
}
/* The wordmark period, in raspberry. */
.wp-block-site-title a::after {
  content: ".";
  color: var(--cbls-brand-2);
}
.wp-block-site-title a:hover { color: var(--cbls-brand) !important; }

nav.wp-block-navigation a {
  color: #3a3f4a !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.12s ease;
}
nav.wp-block-navigation a:hover { color: var(--cbls-brand) !important; }
nav.wp-block-navigation .current-menu-item > a,
nav.wp-block-navigation a[aria-current="page"] {
  color: var(--cbls-brand) !important;
  font-weight: 700;
}

/* ── Headings & page titles ───────────────────────────────────────────────── */
h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* Page/post title gets the brand underline (same motif as the demo index). */
main h1.wp-block-post-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cbls-brand), var(--cbls-brand-2));
}

/* ── Theme buttons ────────────────────────────────────────────────────────── */
.wp-element-button,
.wp-block-button__link {
  background-color: var(--cbls-brand) !important;
  color: #fff !important;
  border: none;
  border-radius: 10px !important;
  font-weight: 600;
  transition: filter 0.12s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover { filter: brightness(1.08); }

/* ── Footer: quiet lavender band ──────────────────────────────────────────── */
.wp-site-blocks > footer.wp-block-template-part {
  margin-top: 56px;
  border-top: 1px solid var(--cbls-line);
  background: linear-gradient(180deg, #ffffff 0%, var(--cbls-tint) 100%);
}
.wp-site-blocks > footer.wp-block-template-part a:where(:not([class*="cbl-"])) {
  color: var(--cbls-dim);
  text-decoration: none;
}
.wp-site-blocks > footer.wp-block-template-part a:where(:not([class*="cbl-"])):hover {
  color: var(--cbls-brand-2);
}

/* The lab-skin homepage is a full-bleed corkboard — let it own its edges. */
#cbl-app { position: relative; z-index: 1; }