/*
Theme Name:   Victory Landing
Theme URI:    https://electoralmedia.com
Description:  Reusable splash/landing page child theme for political campaigns. Built for Elementor + Gravity Forms. Brand colors are CSS variables — restyle per client by editing :root (or overriding in Elementor site settings / custom CSS).
Author:       Electoral Media
Template:     hello-elementor
Version:      1.0.0
Text Domain:  victory-landing
*/

/* ==========================================================================
   Brand tokens — edit these per client
   Current client: #d6202b frame / #d4202a buttons / navy #1b2655
   ========================================================================== */
:root {
	--vl-bg:            #ffffff;  /* page + card background */
	--vl-frame:         #d6202b;  /* card border frame */
	--vl-primary:       #1b2655;  /* brand navy (labels, disclaimer) */
	--vl-text:          #1a1a1a;  /* body copy — near-black */
	--vl-accent:        #0d6bae;  /* secondary blue (logo banner) */
	--vl-btn:           #d4202a;  /* donate buttons */
	--vl-btn-hover:     #a5141d;
	--vl-btn-text:      #ffffff;
	--vl-signup:        #0569aa;  /* sign-up submit + field focus */
	--vl-signup-hover:  #04517e;
	--vl-panel:         #f4f5f7;  /* form panel background */
	--vl-field-border:  #bbbbbb;
	--vl-font-body:     Arial, Helvetica, sans-serif;
	--vl-font-serif:    'Cormorant', Georgia, serif;
	--vl-font-sans:     'Open Sans', Arial, sans-serif;

	/* Must match the card container's side padding in Elementor —
	   used by .vl-footer-photo to bleed edge-to-edge inside the frame. */
	--vl-card-pad-x: 96px;
}

body {
	background-color: var(--vl-bg);
	color: var(--vl-text);
}

/* ==========================================================================
   Headshot with wrapped copy
   Usage: inside an Elementor Text Editor widget, placed between paragraphs
   at the point where the wrap should begin —
   <img class="vl-headshot" src="..." alt="Candidate name" />
   Floats right; copy wraps along the subject's silhouette (shape-outside), then
   continues full-width below the image. Standard float flow — no overlap
   is possible. Below 900px it un-floats and centers between paragraphs.
   ========================================================================== */
.vl-bio-wrap {
	overflow: visible;
	width: 100%;
}

/* Paragraph spacing that survives an <img> sitting between paragraphs
   (an adjacent-sibling `p + p` rule would break there). */
.vl-bio-wrap p {
	margin: 0 0 16px;
}
.vl-bio-wrap p:last-child {
	margin-bottom: 0;
}

.vl-headshot {
	float: right;
	width: min(340px, 46%);
	height: auto;
	margin: 6px 0 16px 28px;
	shape-outside: polygon(32% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 82%, 14% 55%, 24% 28%);
	shape-margin: 20px;
}

@media (max-width: 899px) {
	.vl-headshot {
		float: none;
		display: block;
		width: min(300px, 82%);
		margin: 20px auto 20px auto;
		shape-outside: none;
	}
}

/* ==========================================================================
   Full-bleed closing photo
   Usage: an Elementor Image widget as the LAST element in the card, with
   the CSS class "vl-footer-photo" (Advanced -> CSS Classes). It bleeds
   edge-to-edge inside the frame at its full aspect ratio and sits flush
   on the bottom border (the card's bottom padding is 0).
   ========================================================================== */
.vl-footer-photo img,
img.vl-footer-photo {
	display: block;
	width: calc(100% + 2 * var(--vl-card-pad-x));
	max-width: none;
	margin: 0 calc(-1 * var(--vl-card-pad-x));
	height: auto;
}

/* Match the Elementor card padding at each breakpoint */
@media (min-width: 768px) and (max-width: 1024px) {
	:root { --vl-card-pad-x: 48px; }
}
@media (max-width: 767px) {
	:root { --vl-card-pad-x: 24px; }
}
/* ==========================================================================
   "Paid for by" disclaimer box (footer)
   Usage: <div class="vl-paid-for-box">PAID FOR BY ...</div>
   ========================================================================== */
.vl-paid-for-box {
	display: inline-block;
	border: 2px solid var(--vl-primary);
	color: var(--vl-primary);
	background: var(--vl-bg);
	font-family: var(--vl-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 16px;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.vl-paid-for-box { font-size: 11px; padding: 5px 12px; }
}

/* ==========================================================================
   Gravity Forms — light theme
   Scope: add class "vl-form-panel" to the Elementor container holding
   the Gravity Forms shortcode.
   ========================================================================== */
.vl-form-panel .gform_wrapper.gravity-theme {
	--gf-color-primary: var(--vl-btn);
}

.vl-form-panel .gform_wrapper.gravity-theme .gfield_label {
	color: var(--vl-primary);
	font-family: var(--vl-font-body);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	width: 100%;
	margin-bottom: 4px;
}
.vl-form-panel .gform_wrapper.gravity-theme .gfield_required {
	color: var(--vl-btn);
}

.vl-form-panel .gform_wrapper.gravity-theme input[type="text"],
.vl-form-panel .gform_wrapper.gravity-theme input[type="email"],
.vl-form-panel .gform_wrapper.gravity-theme input[type="tel"] {
	height: 48px;
	background-color: #ffffff;
	color: #000000;
	font-size: 15px;
	border: 1px solid var(--vl-field-border);
	border-radius: 5px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
	padding: 8px 12px;
}
.vl-form-panel .gform_wrapper.gravity-theme input:focus {
	outline: none;
	border-color: rgba(5, 105, 170, 0.55);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(5, 105, 170, 0.14);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vl-form-panel .gform_wrapper.gravity-theme .gfield {
	margin-bottom: 6px;
}

.vl-form-panel .gform_wrapper.gravity-theme .gform_footer {
	margin-top: 10px;
	padding: 0;
}
.vl-form-panel .gform_wrapper.gravity-theme input[type="submit"],
.vl-form-panel .gform_wrapper.gravity-theme .gform_button {
	width: 100%;
	height: 59px;
	background: var(--vl-signup);
	color: var(--vl-btn-text);
	font-family: var(--vl-font-body);
	font-size: 24px;
	font-weight: 700;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.vl-form-panel .gform_wrapper.gravity-theme input[type="submit"]:hover,
.vl-form-panel .gform_wrapper.gravity-theme .gform_button:hover {
	background: var(--vl-signup-hover);
}

.vl-form-panel .gform_wrapper.gravity-theme .gfield_validation_message,
.vl-form-panel .gform_wrapper.gravity-theme .validation_message {
	background: rgba(212, 32, 42, 0.08);
	border: 1px solid var(--vl-btn);
	color: #8f1119;
	border-radius: 4px;
}
.vl-form-panel .gform_wrapper.gravity-theme .gform_validation_errors {
	background: rgba(212, 32, 42, 0.08);
	border: 1px solid var(--vl-btn);
	color: var(--vl-primary);
}

@media (max-width: 640px) {
	.vl-form-panel .gform_wrapper.gravity-theme .gfield {
		grid-column: 1 / -1 !important;
	}
}