/*
 * Elementor Helper Classes — PingNetwork Child Theme
 * Use these class names in Elementor → Advanced → CSS Classes field
 * ---------------------------------------------------------------
 *
 * SECTION BACKGROUNDS:
 *   ping-section-white    → white background
 *   ping-section-surface  → light gray (#F6F6F7)
 *   ping-section-navy     → dark navy (#121214)
 *   ping-section-accent   → red (#E31C24)
 *
 * BUTTONS (use on Button widget → CSS Classes):
 *   ping-btn-primary      → red button
 *   ping-btn-secondary    → outlined button
 *
 * TEXT:
 *   ping-eyebrow          → red uppercase label pill
 *   ping-text-muted       → gray text
 *   ping-text-accent      → red text
 *
 * CARDS:
 *   ping-card             → white card with border + hover lift
 *   ping-card-navy        → navy card (for dark sections)
 *
 * ANIMATIONS:
 *   ping-fade-in          → fade up on scroll (auto-triggered)
 */

/* ── SECTION BACKGROUNDS ─────────────────────────────────── */
.ping-section-white   { background-color: var(--bg) !important; }
.ping-section-surface { background-color: var(--surface2) !important; }
.ping-section-navy    { background-color: var(--navy) !important; }
.ping-section-accent  { background-color: var(--accent) !important; }

/* Navy section — auto white text */
.ping-section-navy .elementor-widget-heading .elementor-heading-title,
.ping-section-navy h1, .ping-section-navy h2,
.ping-section-navy h3, .ping-section-navy h4 { color: #fff !important; }
.ping-section-navy .elementor-widget-text-editor,
.ping-section-navy p { color: rgba(255,255,255,.6) !important; }

/* Accent section — white text */
.ping-section-accent .elementor-widget-heading .elementor-heading-title,
.ping-section-accent h1, .ping-section-accent h2,
.ping-section-accent h3, .ping-section-accent p { color: #fff !important; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.ping-btn-primary .elementor-button,
.elementor-widget-button.ping-btn-primary a.elementor-button {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: var(--transition) !important;
}
.ping-btn-primary .elementor-button:hover,
.elementor-widget-button.ping-btn-primary a.elementor-button:hover {
	background-color: var(--accent2) !important;
	border-color: var(--accent2) !important;
	transform: translateY(-1px) !important;
	box-shadow: none !important;
}

.ping-btn-secondary .elementor-button,
.elementor-widget-button.ping-btn-secondary a.elementor-button {
	background-color: transparent !important;
	border: 1.5px solid var(--navy) !important;
	color: var(--navy) !important;
	border-radius: var(--btn-radius) !important;
	font-weight: 600 !important;
	transition: var(--transition) !important;
}
.ping-btn-secondary .elementor-button:hover,
.elementor-widget-button.ping-btn-secondary a.elementor-button:hover {
	border-color: var(--navy) !important;
	background-color: var(--navy) !important;
	color: #fff !important;
}

.ping-btn-white .elementor-button,
.elementor-widget-button.ping-btn-white a.elementor-button {
	background-color: #fff !important;
	color: var(--accent) !important;
	border-radius: var(--btn-radius) !important;
	font-weight: 700 !important;
}

/* ── CARDS ───────────────────────────────────────────────── */
.ping-card {
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg) !important;
	padding: 32px 28px !important;
	transition: var(--transition) !important;
	position: relative;
	overflow: hidden;
}
.ping-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: var(--transition);
}
.ping-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--shadow-md) !important;
	border-color: var(--border) !important;
}
.ping-card:hover::before { transform: scaleX(1); }

.ping-card-navy {
	background: rgba(255,255,255,.05) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	border-radius: var(--radius-lg) !important;
	padding: 32px 28px !important;
	transition: var(--transition) !important;
}
.ping-card-navy:hover {
	background: rgba(255,255,255,.09) !important;
	border-color: rgba(255,255,255,.15) !important;
}

/* ── EYEBROW LABEL ───────────────────────────────────────── */
.ping-eyebrow-el .elementor-heading-title {
	display: inline-block !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .14em !important;
	color: var(--accent) !important;
	background: rgba(227,28,36,.09) !important;
	padding: 5px 14px !important;
	border-radius: 100px !important;
}

/* ── STAT NUMBER ─────────────────────────────────────────── */
.ping-stat-el .elementor-heading-title {
	font-size: clamp(2.5rem, 5vw, 3.8rem) !important;
	font-weight: 800 !important;
	color: var(--navy) !important;
	letter-spacing: -.03em !important;
	line-height: 1 !important;
}
.ping-section-navy .ping-stat-el .elementor-heading-title { color: #fff !important; }

/* ── DIVIDER LINE ────────────────────────────────────────── */
.ping-divider hr { border-color: var(--border) !important; }
.ping-section-navy .ping-divider hr { border-color: rgba(255,255,255,.08) !important; }

/* ── ICON BOX HELPER ─────────────────────────────────────── */
.ping-icon-box .elementor-icon-box-icon .elementor-icon {
	width: 48px !important;
	height: 48px !important;
	line-height: 48px !important;
	background: rgba(227,28,36,.1) !important;
	border-radius: 14px !important;
	color: var(--accent) !important;
}

/* ── HERO SECTION ────────────────────────────────────────── */
.ping-hero-section {
	background: var(--navy) !important;
	position: relative;
	overflow: hidden;
}
.ping-hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 60% at 70% 50%, rgba(227,28,36,.12) 0%, transparent 70%),
		radial-gradient(ellipse 40% 40% at 20% 80%, rgba(227,28,36,.07) 0%, transparent 70%);
	pointer-events: none;
}
.ping-hero-section .elementor-heading-title { color: #fff !important; }
.ping-hero-section .elementor-widget-text-editor { color: rgba(255,255,255,.6) !important; }

/* ── FORM CARD (dark glass — for hero) ───────────────────── */
.ping-form-dark {
	background: rgba(255,255,255,.05) !important;
	border: 1px solid rgba(255,255,255,.1) !important;
	border-radius: var(--radius) !important;
	backdrop-filter: blur(8px) !important;
}
.ping-form-dark .elementor-field-label { color: rgba(255,255,255,.55) !important; }
.ping-form-dark .elementor-field-textual {
	background: rgba(255,255,255,.07) !important;
	border-color: rgba(255,255,255,.12) !important;
	color: #fff !important;
	border-radius: 12px !important;
}
.ping-form-dark .elementor-field-textual:focus { border-color: var(--accent) !important; }
.ping-form-dark .elementor-button { width: 100% !important; justify-content: center !important; }

/* ── WHY CARDS (dark section) ────────────────────────────── */
.ping-why-num-el .elementor-heading-title {
	font-size: .7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	color: var(--accent) !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.ping-footer-section {
	background: var(--navy) !important;
}
.ping-footer-section .elementor-heading-title,
.ping-footer-section h5 { color: rgba(255,255,255,.4) !important; }
.ping-footer-section .elementor-widget-text-editor,
.ping-footer-section p { color: rgba(255,255,255,.55) !important; }
.ping-footer-section a { color: rgba(255,255,255,.55) !important; transition: var(--transition) !important; }
.ping-footer-section a:hover { color: #fff !important; }

/* ── GLOBAL RADIUS on Elementor widgets ──────────────────── */
.elementor-widget-image img { border-radius: var(--radius); }