/**
 * CosmeticsBridge Child — site chrome & dual-brief building blocks.
 * Tokens come from tokens.css. Prefer var(--color-*) / var(--space-*).
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
.cosmeticsbridge-child {
  background-color: var(--color-bg);
  color: var(--color-neutral-700);
  font-family: var(--font-body);
}

.cosmeticsbridge-child h1,
.cosmeticsbridge-child h2,
.cosmeticsbridge-child h3,
.cosmeticsbridge-child h4,
.cosmeticsbridge-child h5,
.cosmeticsbridge-child h6,
.cosmeticsbridge-child .entry-title {
  font-family: var(--font-title);
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

.cosmeticsbridge-child a {
  color: var(--color-link);
}

.cosmeticsbridge-child a:hover,
.cosmeticsbridge-child a:focus {
  color: var(--color-link-hover);
}

/* Astra buttons → brand */
.cosmeticsbridge-child .ast-button,
.cosmeticsbridge-child .button,
.cosmeticsbridge-child button[type="submit"],
.cosmeticsbridge-child input[type="submit"],
.cosmeticsbridge-child .wp-block-button__link {
  border-radius: var(--radius-md) !important;
}

/* -------------------------------------------------------------------------
 * Utility
 * ---------------------------------------------------------------------- */
.cb-container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.cb-eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-700);
  margin-bottom: var(--space-3);
}

.cb-lead {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--color-neutral-600);
  max-width: 42rem;
}

.cb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-neutral-700);
}

.cb-badge--eu { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.cb-badge--us { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.cb-badge--member {
  border-color: var(--color-secondary-50);
  background: var(--color-secondary-50);
  color: var(--color-secondary-700);
}
.cb-badge--risk-high {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--color-danger);
}
.cb-badge--risk-med {
  border-color: var(--color-accent-100);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.cb-badge--risk-low {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--color-success);
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cb-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.cb-btn--primary {
  background: var(--color-primary);
  color: #fff !important;
  border-color: var(--color-primary);
}
.cb-btn--primary:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff !important;
}

.cb-btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}
.cb-btn--secondary:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700) !important;
}

.cb-btn--teal {
  background: var(--color-secondary);
  color: #fff !important;
  border-color: var(--color-secondary);
}
.cb-btn--teal:hover {
  background: var(--color-secondary-700);
  border-color: var(--color-secondary-700);
  color: #fff !important;
}

.cb-btn--ghost {
  background: transparent;
  color: var(--color-neutral-700) !important;
  border-color: var(--color-border);
}
.cb-btn--ghost:hover {
  border-color: var(--color-neutral-400);
  background: var(--color-neutral-100);
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */
.cb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.cb-card--hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-neutral-300);
}

/* -------------------------------------------------------------------------
 * Dual Brief (Owner + RA) — news single building blocks
 * ---------------------------------------------------------------------- */
.cb-dual-brief {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

@media (min-width: 900px) {
  .cb-dual-brief {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.cb-brief {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cb-brief__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-neutral-100);
}

.cb-brief--owner .cb-brief__header {
  border-top: 3px solid var(--color-accent);
}

.cb-brief--ra .cb-brief__header {
  border-top: 3px solid var(--color-secondary);
}

.cb-brief__label {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
}

.cb-brief__meta {
  font-size: var(--fs-xs);
  color: var(--color-neutral-500);
  margin-left: auto;
}

.cb-brief__body {
  padding: var(--space-5);
  flex: 1;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-neutral-700);
}

.cb-brief__body > :first-child { margin-top: 0; }
.cb-brief__body > :last-child { margin-bottom: 0; }

.cb-brief__actions {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Locked RA teaser */
.cb-brief--gated .cb-brief__body {
  position: relative;
}
.cb-brief--gated .cb-brief__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface) 85%);
  pointer-events: none;
}
.cb-gate-cta {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-neutral-300);
  background: var(--color-primary-50);
  font-size: var(--fs-sm);
  color: var(--color-neutral-700);
}

/* -------------------------------------------------------------------------
 * News meta strip
 * ---------------------------------------------------------------------- */
.cb-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cb-meta-strip__date {
  font-size: var(--fs-sm);
  color: var(--color-neutral-500);
  margin-left: auto;
}

/* -------------------------------------------------------------------------
 * Section shells (for later page templates / Elementor HTML widgets)
 * ---------------------------------------------------------------------- */
.cb-section {
  padding: var(--space-12) 0;
}

.cb-section--muted {
  background: var(--color-neutral-100);
  border-block: 1px solid var(--color-border);
}

.cb-section__title {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--space-3);
}

.cb-section__sub {
  color: var(--color-neutral-600);
  max-width: 40rem;
  margin: 0 0 var(--space-8);
  line-height: 1.6;
}

/* CTA band */
.cb-cta-band {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.cb-cta-band h2,
.cb-cta-band h3 {
  color: #fff !important;
  margin: 0 0 var(--space-2);
}
.cb-cta-band p {
  margin: 0;
  color: rgba(255,255,255,.88);
  max-width: 32rem;
}

/* -------------------------------------------------------------------------
 * Anti-slop guardrails (light)
 * ---------------------------------------------------------------------- */
.cosmeticsbridge-child .has-drop-cap:not(:focus)::first-letter {
  /* keep sober; no giant decorative drop caps */
  float: none;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

/* Prefer solid focus over glow */
.cosmeticsbridge-child :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Marketing layout system (Elementor HTML widgets + pages)
 * ---------------------------------------------------------------------- */
.elementor-widget-html .cb-wrap,
.cb-wrap {
  width: 100%;
}

.cb-hero {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 960px) {
  .cb-hero {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-12);
  }
}

.cb-hero__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.cb-hero__panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--color-secondary);
}

.cb-hero__panel h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
}

.cb-hero__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.cb-hero__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--color-neutral-700);
  line-height: 1.5;
}
.cb-hero__list .cb-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-secondary-50);
  color: var(--color-secondary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-title);
}

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.cb-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .cb-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cb-trust__item strong {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  line-height: 1.2;
}
.cb-trust__item span {
  font-size: var(--fs-xs);
  color: var(--color-neutral-500);
}

.cb-grid-3 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cb-grid-2 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cb-feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.cb-feature:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-neutral-300);
  transform: translateY(-2px);
}
.cb-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: var(--space-4);
}
.cb-feature__icon--teal { background: var(--color-secondary-50); color: var(--color-secondary-700); }
.cb-feature__icon--amber { background: var(--color-accent-100); color: var(--color-accent-700); }
.cb-feature h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
}
.cb-feature p {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.cb-feature a.cb-feature__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.cb-steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: cbstep;
}
@media (min-width: 900px) {
  .cb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
.cb-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
}
.cb-step::before {
  counter-increment: cbstep;
  content: counter(cbstep);
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: var(--space-3);
}
.cb-step h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base);
}
.cb-step p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-neutral-600);
  line-height: 1.6;
}

.cb-price-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .cb-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cb-price {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.cb-price--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  position: relative;
}
.cb-price--featured::after {
  content: "Recommended";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-title);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}
.cb-price__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
}
.cb-price__amount {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.02em;
}
.cb-price__amount small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-neutral-500);
}
.cb-price__desc {
  font-size: var(--fs-sm);
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-5);
  line-height: 1.55;
  flex: 1;
}
.cb-price ul {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.cb-price ul li {
  font-size: var(--fs-sm);
  color: var(--color-neutral-700);
  padding-left: 1.4em;
  position: relative;
}
.cb-price ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: 700;
}

.cb-split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .cb-split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.cb-split--reverse .cb-split__media { order: -1; }
@media (min-width: 900px) {
  .cb-split--reverse .cb-split__media { order: 0; }
  .cb-split--reverse .cb-split__copy { order: 0; }
  .cb-split--reverse { direction: rtl; }
  .cb-split--reverse > * { direction: ltr; }
}

.cb-panel-dark {
  background: linear-gradient(145deg, #0F172A 0%, #1E3A8A 100%);
  color: #E2E8F0;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.cb-panel-dark h2,
.cb-panel-dark h3 { color: #fff !important; }
.cb-panel-dark p { color: rgba(255,255,255,.88); }

.cb-quote {
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-4) var(--space-5);
  background: var(--color-secondary-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-base);
  color: var(--color-neutral-700);
  line-height: 1.65;
}

.cb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.cb-kicker--teal {
  background: var(--color-secondary-50);
  color: var(--color-secondary-700);
}

.cb-section-head {
  max-width: 40rem;
  margin-bottom: var(--space-8);
}
.cb-section-head h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 2vw, 2rem);
}
.cb-section-head p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: 1.65;
}

/* Elementor section breathing room helpers via HTML full-bleed wrappers */
.cb-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-left: max(1.25rem, calc(50vw - 570px));
  padding-right: max(1.25rem, calc(50vw - 570px));
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  box-sizing: border-box;
}
.cb-bleed--muted { background: var(--color-neutral-100); }
.cb-bleed--ink {
  background: #0F172A;
  color: #E2E8F0;
}
.cb-bleed--ink h2 { color: #fff !important; }
.cb-bleed--ink p { color: rgba(255,255,255,.86); }

/* Tighten Elementor default widget spacing inside our pages */
.elementor-widget-html { margin-bottom: 0 !important; }
.elementor-section.cb-el-tight > .elementor-container { max-width: 1140px; }

/* Form polish */
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
  border-radius: 8px !important;
  border-color: var(--color-border) !important;
}
.wpforms-container button[type="submit"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 8px !important;
  font-family: var(--font-title) !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
}

/* PMPro levels cards if default markup */
.pmpro_levels_table { width: 100%; }

/* -------------------------------------------------------------------------
 * Elementor + Astra layout fixes (native widgets)
 * ---------------------------------------------------------------------- */
.elementor-page .site-content > .ast-container,
.elementor-page #content > .ast-container,
.elementor-page .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.elementor-page .entry-content {
  margin: 0;
}
.elementor-section .elementor-container {
  max-width: 1140px;
}
.elementor-widget:not(:last-child) {
  margin-bottom: 0; /* use widget _margin from Elementor */
}
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.elementor-widget-icon-box .elementor-icon-box-title {
  margin: 0;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  margin: 0;
}
/* Prevent double huge title from theme */
.elementor-page .entry-header,
.elementor-page .page-header {
  display: none;
}

/* Equal card rows: prevent %width + gap wrap on desktop */
@media (min-width: 1025px) {
  .elementor-element.e-con.e-flex[data-settings*="\"flex_wrap\":\"nowrap\""] > .e-con,
  .elementor-element.e-con.e-flex.e-con--row > .e-con {
    /* fallback when grow is set via Elementor */
  }
  .e-con.e-flex > .e-con.e-child {
    min-width: 0;
  }
}