/*
 * THE ASSIST V2 — UTILITIES
 * File: /assets/css/utilities.css
 *
 * Single-purpose helper classes.
 * Use directly in WPBakery "Extra class name" fields for quick adjustments.
 */

/* ── Text Alignment ── */
.ta-text-left    { text-align: left !important; }
.ta-text-center  { text-align: center !important; }
.ta-text-right   { text-align: right !important; }

/* ── Text Color ── */
.ta-text-teal    { color: var(--color-teal) !important; }
.ta-text-pink    { color: var(--color-pink) !important; }
.ta-text-navy    { color: var(--color-navy) !important; }
.ta-text-purple  { color: var(--color-purple) !important; }
.ta-text-muted   { color: var(--color-text-muted) !important; }
.ta-text-white   { color: var(--color-white) !important; }

/* ── Background Color ── */
.ta-bg-teal-light   { background-color: var(--color-teal-light) !important; }
.ta-bg-pink-light   { background-color: var(--color-pink-light) !important; }
.ta-bg-purple-light { background-color: var(--color-purple-light) !important; }
.ta-bg-green-light  { background-color: var(--color-green-light) !important; }
.ta-bg-orange-light { background-color: var(--color-orange-light) !important; }
.ta-bg-navy         { background-color: var(--color-navy) !important; }
.ta-bg-dark         { background-color: var(--color-dark-bg) !important; }
.ta-bg-white        { background-color: var(--color-white) !important; }
.ta-bg-gray         { background-color: var(--color-gray-50) !important; }

/* ── Spacing — Margin Top ── */
.ta-mt-0  { margin-top: 0 !important; }
.ta-mt-4  { margin-top: var(--space-4) !important; }
.ta-mt-6  { margin-top: var(--space-6) !important; }
.ta-mt-8  { margin-top: var(--space-8) !important; }
.ta-mt-10 { margin-top: var(--space-10) !important; }
.ta-mt-12 { margin-top: var(--space-12) !important; }

/* ── Spacing — Margin Bottom ── */
.ta-mb-0  { margin-bottom: 0 !important; }
.ta-mb-2  { margin-bottom: var(--space-2) !important; }
.ta-mb-4  { margin-bottom: var(--space-4) !important; }
.ta-mb-6  { margin-bottom: var(--space-6) !important; }
.ta-mb-8  { margin-bottom: var(--space-8) !important; }
.ta-mb-10 { margin-bottom: var(--space-10) !important; }

/* ── Spacing — Padding ── */
.ta-p-0   { padding: 0 !important; }
.ta-p-4   { padding: var(--space-4) !important; }
.ta-p-6   { padding: var(--space-6) !important; }
.ta-p-8   { padding: var(--space-8) !important; }

.ta-py-8  { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.ta-py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.ta-py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.ta-py-20 { padding-top: var(--space-20) !important; padding-bottom: var(--space-20) !important; }

/* ── Font Size ── */
.ta-text-xs   { font-size: var(--text-xs) !important; }
.ta-text-sm   { font-size: var(--text-sm) !important; }
.ta-text-base { font-size: var(--text-base) !important; }
.ta-text-lg   { font-size: var(--text-lg) !important; }
.ta-text-xl   { font-size: var(--text-xl) !important; }
.ta-text-2xl  { font-size: var(--text-2xl) !important; }
.ta-text-3xl  { font-size: var(--text-3xl) !important; }

/* ── Font Family ── */
.ta-font-display { font-family: var(--font-display) !important; }
.ta-font-mono    { font-family: var(--font-mono) !important; }

/* ── Font Weight ── */
.ta-font-regular  { font-weight: var(--weight-regular) !important; }
.ta-font-medium   { font-weight: var(--weight-medium) !important; }
.ta-font-semibold { font-weight: var(--weight-semibold) !important; }
.ta-font-bold     { font-weight: var(--weight-bold) !important; }
.ta-font-black    { font-weight: var(--weight-black) !important; }

/* ── Display ── */
.ta-flex         { display: flex !important; }
.ta-flex-center  { display: flex; align-items: center; justify-content: center; }
.ta-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ta-flex-col     { display: flex; flex-direction: column; }
.ta-flex-wrap    { flex-wrap: wrap !important; }
.ta-gap-4        { gap: var(--space-4) !important; }
.ta-gap-6        { gap: var(--space-6) !important; }
.ta-gap-8        { gap: var(--space-8) !important; }
.ta-inline-flex  { display: inline-flex !important; }
.ta-block        { display: block !important; }
.ta-hidden       { display: none !important; }

/* ── Width ── */
.ta-w-full  { width: 100% !important; }
.ta-w-auto  { width: auto !important; }
.ta-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── Max Width ── */
.ta-max-content { max-width: var(--max-content) !important; }
.ta-max-narrow  { max-width: var(--max-narrow) !important; }
.ta-max-wide    { max-width: var(--max-wide) !important; }

/* ── Border Radius ── */
.ta-rounded-sm   { border-radius: var(--radius-sm) !important; }
.ta-rounded-md   { border-radius: var(--radius-md) !important; }
.ta-rounded-lg   { border-radius: var(--radius-lg) !important; }
.ta-rounded-xl   { border-radius: var(--radius-xl) !important; }
.ta-rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.ta-rounded-pill { border-radius: var(--radius-pill) !important; }

/* ── Overflow ── */
.ta-overflow-hidden { overflow: hidden !important; }
.ta-overflow-auto   { overflow: auto !important; }

/* ── Position ── */
.ta-relative { position: relative !important; }
.ta-absolute { position: absolute !important; }

/* ── Opacity ── */
.ta-opacity-50 { opacity: 0.5 !important; }
.ta-opacity-70 { opacity: 0.7 !important; }

/* ── Animation helpers (used with animations.js) ── */
.ta-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--transition-slower) var(--ease-out),
        transform var(--transition-slower) var(--ease-out);
}

.ta-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ta-fade-in {
    opacity: 0;
    transition: opacity var(--transition-slower) var(--ease-out);
}

.ta-fade-in.is-visible {
    opacity: 1;
}

/* Stagger children animation delay */
.ta-stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.ta-stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.ta-stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.ta-stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.ta-stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.ta-stagger-children > *:nth-child(6) { transition-delay: 400ms; }

/* ── Counter animation (for stat numbers) ── */
.ta-counter {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    color: var(--color-navy);
}

/* ── Responsive Visibility ── */
@media (max-width: 768px) {
    .ta-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .ta-hide-desktop { display: none !important; }
}