/******* Do not edit this file *******
Code Snippets Manager
Saved: Sep 15 2025 | 22:33:06 */
@charset "UTF-8";
/* =========================================================
UTILITIES (token-powered, Kadence-first)
Purpose: tiny helpers you add via class (lego bricks)
Depends on: tokens.css
Load order: after tokens (priority 5–10)
========================================================= */
/* -----------------------------
1) SURFACES
----------------------------- */
.u-surface-base {
  background: var(--t-surface-base);
  color: var(--t-text-on-base);
}
.u-surface-muted {
  background: var(--t-surface-muted);
  color: var(--t-text-on-muted);
}
.u-surface-subtle {
  background: var(--t-surface-subtle);
  color: var(--t-text-on-subtle);
}
/* -----------------------------
2) ELEVATION & HOVER (variable-driven)
----------------------------- */
.u-elev-0 {
  --t-card-shadow: var(--t-shadow-flat);
}
.u-elev-1 {
  --t-card-shadow: var(--t-shadow-1);
}
.u-elev-2 {
  --t-card-shadow: var(--t-shadow-2);
}
/* Subtle lift */
.u-hover-lift {
  transition: transform var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
.u-hover-lift:hover {
  transform: translateY(-3px);
  --t-card-shadow: var(--t-shadow-2);
}
/* -----------------------------
3) RADIUS
----------------------------- */
.u-rad-sm {
  border-radius: var(--t-radius-sm);
}
.u-rad-md {
  border-radius: var(--t-radius-md);
}
.u-rad-lg {
  border-radius: var(--t-radius-lg);
}
.u-rad-pill {
  border-radius: var(--t-radius-pill);
}
/* -----------------------------
4) BORDERS
----------------------------- */
.u-border {
  border: 1px solid var(--t-border-color);
}
.u-border-0 {
  border: 0;
}
/* -----------------------------
5) PADDING (predictable set)
----------------------------- */
.u-p-0 {
  padding: 0 !important;
}
.u-p-2 {
  padding: var(--t-space-2);
}
.u-p-3 {
  padding: var(--t-space-3);
}
.u-p-4 {
  padding: var(--t-space-4);
}
.u-p-5 {
  padding: var(--t-space-5);
}
.u-px-4 {
  padding-inline: var(--t-space-4);
}
.u-py-4 {
  padding-block: var(--t-space-4);
}
/* -----------------------------
6) MARGINS (micro-rhythm)
----------------------------- */
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-2 {
  margin-top: var(--t-space-2);
}
.mb-2 {
  margin-bottom: var(--t-space-2);
}
.mt-3 {
  margin-top: var(--t-space-3);
}
.mb-3 {
  margin-bottom: var(--t-space-3);
}
.mt-4 {
  margin-top: var(--t-space-4);
}
.mb-4 {
  margin-bottom: var(--t-space-4);
}
/* -----------------------------
7) GRID HELPERS (containers)
For card walls, KPI tiles, badges, etc.
----------------------------- */
.u-grid {
  display: grid !important;
  gap: var(--t-gutter);
}
.u-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Mobile tightening — note: media queries cannot (yet) consume CSS vars */
@media (max-width: 600px) {
  .u-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--t-space-4);
  }
}
/* -----------------------------
8) TEXT TINTS
----------------------------- */
.u-text-strongest {
  color: var(--t-text-strongest);
}
.u-text-strong {
  color: var(--t-text-strong);
}
.u-text-medium {
  color: var(--t-text-medium);
}
.u-text-subtle {
  color: var(--t-text-subtle);
}
/* -----------------------------
9) LINKS (opt-in helper)
Use inside custom HTML where Kadence link styling isn’t applied.
----------------------------- */
.u-link {
  color: var(--t-link);
  text-decoration: none;
  transition: color var(--t-dur) var(--t-ease);
}
.u-link:hover, .u-link:focus-visible {
  color: var(--t-link-hover);
}
/* Occasionally helpful reset */
.u-link-clean {
  text-decoration: none !important;
}
/* -----------------------------
10) CARD PRESET (quick panel)
----------------------------- */
.u-card {
  background: var(--t-card-bg);
  color: var(--t-card-text);
  border: var(--t-card-border);
  border-radius: var(--t-radius-md);
  box-shadow: var(--t-card-shadow);
  /* uses the semantic variable */
  padding: var(--t-space-5);
  transition: transform var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
.u-card.u-hover-lift:hover {
  box-shadow: var(--t-card-shadow-h);
}
/* -----------------------------
11) STICKY HELPERS
Use for sidebar/toolbars. Pick an offset you actually use.
----------------------------- */
.u-sticky-24 {
  position: sticky;
  top: 24px;
}
.u-sticky-48 {
  position: sticky;
  top: 48px;
}
/* -----------------------------
12) PILLS (labels/badges)
Base + semantic modifiers wired to badge tokens.
----------------------------- */
.u-pill {
  display: inline-block;
  border-radius: var(--t-badge-radius);
  padding: var(--t-badge-py) var(--t-badge-px);
  font-size: 0.875rem;
  font-weight: 500;
}
.u-pill--neutral {
  background: var(--t-badge-neutral-bg);
  color: var(--t-badge-neutral-text);
}
.u-pill--success {
  background: var(--t-badge-success-bg);
  color: var(--t-badge-success-text);
}
.u-pill--info {
  background: var(--t-badge-info-bg);
  color: var(--t-badge-info-text);
}
/* -----------------------------
13) FOCUS RING (consistent a11y)
Apply to custom interactive elements lacking a default.
----------------------------- */
.u-focus-ring:focus-visible {
  box-shadow: var(--t-focus-ring);
  outline: 0;
}
/* -----------------------------
14) WRAPPER (simple shell)
Centers content and applies tokenized gutters.
Prefer Kadence rows for layout; this is a convenience helper.
----------------------------- */
.u-wrap {
  max-width: var(--t-container-max);
  margin-inline: auto;
  padding-inline: var(--t-gutter);
}
/* -----------------------------
DELIBERATELY OMITTED (per Manual):
- .section (Kadence rows/sections already handle vertical rhythm)
- .tabs-clean (use Kadence Tabs block controls)
----------------------------- */