/*!
 * bricks-mcp-polish.css — default polish layer for Bricks MCP-built sites.
 * Auto-enqueued on the frontend (gated by the `bricks_mcp_polish_enabled` filter).
 * Scope is #brx-content so it never touches the WP admin or Bricks builder UI.
 *
 * Design intent: every site built with this service gets a baseline of
 * agency-grade refinement WITHOUT the author opting in. Rules here are
 * deliberately ADDITIVE and non-destructive — they refine rendering
 * (typography, focus, motion, depth-on-hover) but never override authored
 * colors, fonts, font-sizes, or layout, so a bespoke design is never clobbered.
 * Everything is reduced-motion-safe.
 */

/* ---- motion tokens ---- */
:root{
  --bmcp-ease: cubic-bezier(.22,1,.36,1);
}

/* ============ A. TYPOGRAPHY REFINEMENT (rendering only, no size/font override) ============ */
#brx-content{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* Flagship headings read tighter + balanced; no font-size/weight/color override. */
#brx-content h1, #brx-content h2{ letter-spacing:-0.02em; line-height:1.1; text-wrap:balance; }
#brx-content h3, #brx-content h4{ letter-spacing:-0.01em; text-wrap:balance; }
#brx-content p, #brx-content li{ text-wrap:pretty; }

/* ============ B. LINK / BUTTON MICRO-INTERACTION ============ */
#brx-content a, #brx-content button{ transition:color .2s var(--bmcp-ease), background-color .2s var(--bmcp-ease), border-color .2s var(--bmcp-ease), box-shadow .2s var(--bmcp-ease), transform .2s var(--bmcp-ease); }

/* ============ C. FOCUS-VISIBLE (a11y + polish) ============ */
#brx-content a:focus-visible, #brx-content button:focus-visible,
#brx-content input:focus-visible, #brx-content textarea:focus-visible,
#brx-content select:focus-visible, #brx-content [tabindex]:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px currentColor;
  border-radius:6px;
}

/* ============ D. MEDIA ============ */
#brx-content img{ -webkit-user-drag:none; }

/* ============ E. SCROLL-REVEAL (JS-driven, FOUC-safe) ============ */
/* The hidden state is applied ONLY by JS, and ONLY to off-screen elements.
   No CSS rule hides anything on its own → if JS never runs, all content shows. */
#brx-content [data-bmcp-reveal].bmcp-hidden{ opacity:0; transform:translateY(20px); }
#brx-content [data-bmcp-reveal].bmcp-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--bmcp-ease), transform .7s var(--bmcp-ease);
}

/* ============ F. CARD-GRID MOBILE CENTERING (JS-tagged) ============ */
/* JS tags card grids that shrink-wrap + pin left on small screens. */
@media (max-width:1024px){
  #brx-content [data-bmcp-grid]{ width:100% !important; justify-content:center !important; }
}

/* ============ smooth anchor scroll (reduced-motion gated) ============ */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ============ REDUCED MOTION: neutralize this layer's motion ============ */
@media (prefers-reduced-motion:reduce){
  #brx-content [data-bmcp-reveal].bmcp-hidden{ opacity:1 !important; transform:none !important; }
  #brx-content [data-bmcp-reveal]{ transition:none !important; }
  #brx-content a, #brx-content button{ transition:none !important; }
}