/* Alert 360 — Video Submissions contest page + /social-terms/ legal page.
 * The contest page is an Elementor page built on the sales-rep/location
 * design system (location-pages.css + sales-rep-pages.css are enqueued
 * alongside this file). This file only adds the contest-specific pieces
 * and the /social-terms/ typography.
 */

/* Suppress the theme's default title banner on both pages. */
body.a360-vsub-page #pxl-page-title-default,
body.a360-terms-page #pxl-page-title-default {
	display: none !important;
}

/* The theme gives #pxl-main 110-120px top padding by default; the native
 * page families all override it to 8px via their body classes (see
 * location-pages.css / sales-rep-pages.css). Same treatment here so the
 * hero card sits at the same distance from the nav as every other page.
 * !important needed: the theme's .elementor-page:not():not() selector
 * outguns a simple body-class rule. */
body.a360-vsub-page #pxl-main,
body.a360-terms-page #pxl-main {
	padding-top: 8px !important;
}

/* ---- Contest page extras ---- */

.a360-vsub-disclaimer {
	font-size: 12px;
	line-height: 1.6;
	color: #767676;
}
.a360-srp-panel--dark .a360-vsub-disclaimer { color: #b8b8b8; }

/* The family CSS whitens h2/h3/p inside dark panels but no rep page ever
 * put an h1 in one — this page does (the hero). */
.a360-srp-page .a360-srp-panel--dark h1 {
	color: #fff;
}

/* Hero background: the live page's radial green gradient, captured verbatim
 * from the 2026-06-10 content-archive snapshot of www.alert360.com. Rides on
 * top of --dark, which keeps the white text treatment. */
.a360-srp-page .a360-srp-panel--dark.a360-vsub-hero-gradient {
	background: radial-gradient(circle at center, #13d455 0%, #08a63e 28%, #047533 52%, #015b4b 78%, #00495a 100%);
}
/* The family eyebrow rule uses !important, so this override must too. */
.a360-srp-page .a360-vsub-hero-gradient .a360-srp-eyebrow,
.a360-srp-page .a360-vsub-hero-gradient .a360-srp-eyebrow .elementor-widget-container,
.a360-srp-page .a360-vsub-hero-gradient .a360-srp-eyebrow .elementor-heading-title {
	color: #fff !important;
}
.a360-srp-page .a360-vsub-hero-gradient .a360-vsub-disclaimer {
	color: rgba(255, 255, 255, 0.78);
}
.a360-vsub-disclaimer a { color: inherit; text-decoration: underline; }

.a360-vsub-gif img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
}

/* Split section: form takes the wide column (~62%), pitch copy the narrow
 * one — inverse of the rep pages' lead-card proportions. Loads after
 * sales-rep-pages.css, same specificity, so this wins the cascade. */
.a360-srp-page .a360-vsub-split > .e-con-inner {
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
	align-items: start;
}

.a360-srp-page .a360-vsub-form-card {
	width: 100%;
	max-width: 760px;
	margin: 0;
}

/* The copy headline would overwhelm the narrow column at theme h2 scale. */
.a360-srp-page .a360-vsub-why h2,
.a360-srp-page .a360-vsub-why h2.elementor-heading-title {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.3;
}

/* Bullets stack in the narrow column. */
.a360-srp-page .a360-vsub-why .a360-srp-feature-list {
	grid-template-columns: 1fr;
}

/* The family lead-card CSS forces a two-column field grid — right for the
 * four-field rep lead form, wrong for this taller form (name next to email,
 * upload next to phone reads as chaos). Single column here. Loads after
 * sales-rep-pages.css so the tie-broken !important wins. */
.a360-srp-page .a360-vsub-form-card .gform_fields {
	grid-template-columns: 1fr !important;
	gap: 18px !important;
}

/* Consent checkbox label inherits the uppercase 850-weight field-label
 * treatment — a full sentence of legal text should not shout. */
.a360-srp-page .a360-vsub-form-card .gform-field-label--type-inline {
	text-transform: none !important;
	font-weight: 500 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0 !important;
	line-height: 1.55 !important;
}

/* GF inputs the sales-rep stylesheet doesn't cover (file + textarea). */
.a360-srp-page .a360-vsub-form-card textarea {
	width: 100%;
	border: 1px solid #e2e5e8;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 15px;
	min-height: 110px;
}
.a360-srp-page .a360-vsub-form-card input[type="file"] {
	width: 100%;
	font-size: 14px;
	padding: 10px 0;
}
.a360-srp-page .a360-vsub-form-card .gfield_description {
	font-size: 13px;
	color: #767676;
}
.a360-srp-page .a360-vsub-form-card .gfield_checkbox label {
	font-size: 14px;
	line-height: 1.5;
}

/* Stats panel transparent + unpadded so the gaps between cards show the
 * page background, not the white panel behind them. */
.a360-srp-page .a360-vsub-stats-panel {
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-shadow: none !important;
}

/* Stats row */
.a360-vsub-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.a360-vsub-stat {
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 16px;
	padding: 24px 20px;
	text-align: center;
}
.a360-vsub-stat__value {
	font-size: 32px;
	font-weight: 600;
	color: #00964B;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}
.a360-vsub-stat__label {
	font-size: 13px;
	font-weight: 600;
	color: #1B1B1B;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

/* FAQ accordion */
.a360-vsub-faq-item {
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}
.a360-vsub-faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 48px 18px 20px;
	font-weight: 600;
	font-size: 16px;
	color: #1B1B1B;
	position: relative;
}
.a360-vsub-faq-item > summary::-webkit-details-marker { display: none; }
.a360-vsub-faq-item > summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: 400;
	color: #00964B;
	line-height: 1;
}
.a360-vsub-faq-item[open] > summary::after { content: "\2212"; }
.a360-vsub-faq-item[open] > summary { border-bottom: 1px solid #F0F0F0; }
.a360-vsub-faq-item > p {
	padding: 16px 20px 20px;
	margin: 0;
	color: #3a3a3a;
	font-size: 16px;
	line-height: 1.6;
}
.a360-vsub-faq-cta { margin-top: 18px; }

/* ---- /social-terms/ ---- */

.a360-terms-wrap {
	font-family: inherit;
	line-height: 1.6;
	color: #1B1B1B;
}
.a360-terms-wrap a {
	color: #00964B;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.a360-terms-wrap a:hover { color: #007a3d; }
.a360-terms-body p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 18px;
	color: #2a2a2a;
}