/******* Do not edit this file *******
Code Snippets Manager
Saved: Oct 11 2025 | 07:44:33 */
@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)
Purpose: apply spacing INSIDE an element (box → content).
Naming: u-p-* = all sides, u-px-* = horizontal, u-py-* = vertical
----------------------------- */
/* All sides */
.u-p-xxs {
  padding: var(--t-space-xxs);
}
/* 8px padding on all sides */
.u-p-xs {
  padding: var(--t-space-xs);
}
/* 16px padding on all sides */
.u-p-sm {
  padding: var(--t-space-sm);
}
/* 24px padding on all sides */
.u-p-md {
  padding: var(--t-space-md);
}
/* 32px padding on all sides */
.u-p-lg {
  padding: var(--t-space-lg);
}
/* 48px padding on all sides */
/* Horizontal only */
.u-px-xs {
  padding-inline: var(--t-space-xs);
}
/* 16px left + right */
.u-px-sm {
  padding-inline: var(--t-space-sm);
}
/* 24px left + right */
.u-px-md {
  padding-inline: var(--t-space-md);
}
/* 32px left + right */
.u-px-lg {
  padding-inline: var(--t-space-lg);
}
/* 48px left + right */
/* Vertical only */
.u-py-xs {
  padding-block: var(--t-space-xs);
}
/* 16px top + bottom */
.u-py-sm {
  padding-block: var(--t-space-sm);
}
/* 24px top + bottom */
.u-py-md {
  padding-block: var(--t-space-md);
}
/* 32px top + bottom */
.u-py-lg {
  padding-block: var(--t-space-lg);
}
/* 48px top + bottom */
/* Surgical resets (strip padding just on one side) */
.u-pt-0 {
  padding-top: 0 !important;
}
/* remove top padding */
.u-pb-0 {
  padding-bottom: 0 !important;
}
/* remove bottom padding */
.u-pl-0 {
  padding-left: 0 !important;
}
/* remove left padding */
.u-pr-0 {
  padding-right: 0 !important;
}
/* remove right padding */
/* -----------------------------
6) MARGINS (micro-rhythm)
Purpose: apply spacing OUTSIDE an element (separate from neighbors).
Naming: mt-* = margin-top, mb-* = margin-bottom
----------------------------- */
/* Resets */
.mt-0 {
  margin-top: 0;
}
/* remove top margin */
.mb-0 {
  margin-bottom: 0;
}
/* remove bottom margin */
/* Smallest step */
.mt-xxs {
  margin-top: var(--t-space-xxs);
}
/* 8px margin above */
.mb-xxs {
  margin-bottom: var(--t-space-xxs);
}
/* 8px margin below */
/* Extra small */
.mt-xs {
  margin-top: var(--t-space-xs);
}
/* 16px margin above */
.mb-xs {
  margin-bottom: var(--t-space-xs);
}
/* 16px margin below */
/* Small */
.mt-sm {
  margin-top: var(--t-space-sm);
}
/* 24px margin above */
.mb-sm {
  margin-bottom: var(--t-space-sm);
}
/* 24px margin below */
/* Medium */
.mt-md {
  margin-top: var(--t-space-md);
}
/* 32px margin above */
.mb-md {
  margin-bottom: var(--t-space-md);
}
/* 32px margin below */
/* Large */
.mt-lg {
  margin-top: var(--t-space-lg);
}
/* 48px margin above */
.mb-lg {
  margin-bottom: var(--t-space-lg);
}
/* 48px margin below */
/* -----------------------------
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: var(--t-bp-sm)) {
  .u-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--t-space-sm);
  }
}
/* -----------------------------
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-md);
  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);
}
/* Modifiers (safer specificity, always override base) */
.u-card.u-card-sm {
  padding: var(--t-space-sm);
}
/* 24px */
.u-card.u-card-lg {
  padding: var(--t-space-lg);
}
/* 48px */
/* -----------------------------
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)
----------------------------- */