/* ==========================================================================
   AK ENTERPRISES — UTILITY CLASSES
   Small, single-purpose helpers to apply via Elementor's "CSS Classes" field
   instead of repeating inline styles.
   ========================================================================== */

/* Text gradient (headline accents) */
.ak-text-gradient {
	background: var(--ak-gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Backgrounds */
.ak-bg-navy { background-color: var(--ak-navy) !important; }
.ak-bg-blue { background-color: var(--ak-blue) !important; }
.ak-bg-teal { background-color: var(--ak-teal) !important; }
.ak-bg-light-grey { background-color: var(--ak-light-grey) !important; }
.ak-bg-dark { background-color: var(--ak-dark-bg) !important; }
.ak-bg-gradient-primary { background: var(--ak-gradient-primary) !important; }
.ak-bg-gradient-accent { background: var(--ak-gradient-accent) !important; }

/* Text colors
   NOTE: Elementor's "CSS Classes" control lands on a widget's *wrapper* div,
   not the rendered heading/paragraph tag inside it, and that inner tag
   usually carries its own explicit color from global.css/Elementor's own
   generated CSS. The universal "* " descendant selector + !important below
   guarantees the color actually reaches the visible text regardless of
   which inner tag Elementor rendered (h1-h6, p, span, li...). */
.ak-text-navy, .ak-text-navy * { color: var(--ak-navy) !important; }
.ak-text-blue, .ak-text-blue * { color: var(--ak-blue) !important; }
.ak-text-teal, .ak-text-teal * { color: var(--ak-teal) !important; }
.ak-text-white, .ak-text-white * { color: var(--ak-white) !important; }
.ak-text-muted, .ak-text-muted * { color: var(--ak-text-muted) !important; }

/* Shadows (also cover a nested <img>, since these are frequently applied to Image widgets) */
.ak-shadow-sm, .ak-shadow-sm img { box-shadow: var(--shadow-sm) !important; }
.ak-shadow-md, .ak-shadow-md img { box-shadow: var(--shadow-md) !important; }
.ak-shadow-lg, .ak-shadow-lg img { box-shadow: var(--shadow-lg) !important; }
.ak-shadow-glow, .ak-shadow-glow img { box-shadow: var(--shadow-glow) !important; }
.ak-shadow-none, .ak-shadow-none img { box-shadow: none !important; }

/* Radius (also cover a nested <img>, since these are frequently applied to Image widgets) */
.ak-radius-sm, .ak-radius-sm img { border-radius: var(--radius-sm) !important; }
.ak-radius-md, .ak-radius-md img { border-radius: var(--radius-md) !important; }
.ak-radius-lg, .ak-radius-lg img { border-radius: var(--radius-lg) !important; }
.ak-radius-xl, .ak-radius-xl img { border-radius: var(--radius-xl) !important; }
.ak-radius-pill, .ak-radius-pill img { border-radius: var(--radius-pill) !important; }

/* Spacing (margin-top helpers most commonly needed between stacked Elementor widgets) */
.ak-mt-1 { margin-top: var(--space-1) !important; }
.ak-mt-2 { margin-top: var(--space-2) !important; }
.ak-mt-3 { margin-top: var(--space-3) !important; }
.ak-mt-4 { margin-top: var(--space-4) !important; }
.ak-mt-5 { margin-top: var(--space-5) !important; }
.ak-mt-6 { margin-top: var(--space-6) !important; }
.ak-mt-7 { margin-top: var(--space-7) !important; }

/* Visibility helpers (in addition to Elementor's own responsive visibility) */
.ak-hide-mobile { }
@media (max-width: 767px) { .ak-hide-mobile { display: none !important; } }
.ak-hide-desktop { }
@media (min-width: 768px) { .ak-hide-desktop { display: none !important; } }

/* Animation-ready base state (Phase 4 GSAP toggles these via ScrollTrigger) */
.ak-reveal { opacity: 0; }
.ak-reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.ak-reveal { opacity: 1 !important; }
}

/* Border helpers */
.ak-border-top { border-top: 1px solid rgba(11,31,58,0.08); }
.ak-border-bottom { border-bottom: 1px solid rgba(11,31,58,0.08); }

/* Max-width content wrapper for long-form text inside wide containers */
.ak-prose { max-width: 720px; }