/*
Theme Name: AV Tech Talks
Theme URI: https://avtechtalks.test
Author: Radish Concepts
Description: Minimal single-page pre-launch theme for AV Tech Talks. One landing page with a Gravity Forms signup form.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: avtechtalks
*/

/* ---------- Design tokens ---------- */
:root {
	--color-blue: #315FF2;
	--color-orange: #ED4B00;
	--color-card: #F3F3F4;
	--color-ink: #16181D;
	--color-line: #C7C9CF;
	--font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--content-width: 930px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background-color: var(--color-blue);
	color: #fff;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* ---------- Layout ---------- */
.site {
	/* Add the horizontal padding (2 × 24px) on top of the content width, so the
	   content area is a true --content-width wide (box-sizing is border-box). */
	max-width: calc(var(--content-width) + 48px);
	margin: 0 auto;
	padding: 64px 24px 96px;
	text-align: center;
}

/* ---------- Brand ---------- */
.brand__logo {
	width: 168px;
	height: auto;
	margin: 0 auto 22px;
	display: block;
}

.brand__initiative {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 72px;
	font-size: 17px;
	font-style: italic;
	opacity: 0.95;
}

.brand__initiative img {
	height: 34px;
	width: auto;
}

/* ---------- Content typography ---------- */
.content h1 {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(30px, 6vw, 42px);
	line-height: 1.15;
	margin: 0 0 40px;
}

.content h2 {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	margin: 72px 0 0;
}

.content p {
	max-width: none;
	margin: 0 auto 24px;
}

.content p:last-of-type { margin-bottom: 0; }

/* Date line just above the form.
   Uses `p.signup-date` so it outranks the `.content p:last-of-type` reset
   above (the date is the last <p> in .content, but it is followed by the form). */
.content p.signup-date {
	font-size: 18px;
	margin: 29px auto 55px;
}

/* ---------- Gravity Forms: styled as a white card ---------- */
.gform_wrapper.gravity-theme,
.gform_wrapper {
	max-width: 473px;
	margin: 8px auto 0;
	/* Padding measured from the PDF card (scaled): ~56 top, ~51 sides, ~34 bottom. */
	padding: 54px 50px 38px;
	background: var(--color-card);
	border-radius: 20px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
	color: var(--color-ink);
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
}

/* Hide GF meta chrome we don't want in this design */
.gform_wrapper .gform_required_legend,
.gform_wrapper .gfield_required { display: none; }

.gform_wrapper .gfield { margin: 0 0 28px; }
.gform_wrapper .gfield:last-child { margin-bottom: 0; }

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--color-ink);
	margin: 0 0 14px;
	padding: 0;
	float: none;
	width: auto;
}

.gform_wrapper fieldset { border: 0; margin: 0; padding: 0; }

/* Radio choices */
.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}
.gform_wrapper .gfield_radio .gchoice:last-child { margin-bottom: 0; }

.gform_wrapper .gfield_radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--color-line);
	border-radius: 50%;
	background: #fff;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked { border-color: var(--color-orange); }
.gform_wrapper .gfield_radio input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--color-orange);
}
.gform_wrapper .gfield_radio label {
	font-weight: 400;
	font-size: 15px;
	color: var(--color-ink);
	margin: 0;
	cursor: pointer;
}

/* Text & email inputs: underline only */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"] {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	background: transparent;
	padding: 8px 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-ink);
	outline: none;
}
.gform_wrapper .ginput_container input[type="text"]:focus,
.gform_wrapper .ginput_container input[type="email"]:focus {
	border-bottom-color: var(--color-orange);
}

/* Consent / opt-in checkbox */
.gform_wrapper .ginput_container_consent,
.gform_wrapper .ginput_container_checkbox .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"],
.gform_wrapper .ginput_container_checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 2px solid var(--color-line);
	border-radius: 4px;
	background: #fff;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"]:checked,
.gform_wrapper .ginput_container_checkbox input[type="checkbox"]:checked {
	background: var(--color-orange);
	border-color: var(--color-orange);
}
.gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::after,
.gform_wrapper .ginput_container_checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.gform_wrapper .gfield_consent_label,
.gform_wrapper .ginput_container_consent label,
.gform_wrapper .ginput_container_checkbox label {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink);
	margin: 0;
	cursor: pointer;
}
.gform_wrapper .gfield_consent_label a,
.gform_wrapper .ginput_container_checkbox label a { color: var(--color-orange); }

/* Submit button */
.gform_wrapper .gform_footer {
	margin: 32px 0 0;
	padding: 0;
	text-align: center;
}
.gform_wrapper .gform_button {
	appearance: none;
	border: 0;
	background: var(--color-orange);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 30px;
	border-radius: 26px;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.gform_wrapper .gform_button:hover { filter: brightness(0.94); }

/* Validation */
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .validation_message {
	color: #c0392b;
	font-size: 13px;
	margin-top: 6px;
}
.gform_wrapper .gform_validation_errors {
	color: #c0392b;
	font-size: 14px;
	margin: 0 0 20px;
}

/* Confirmation message */
.gform_confirmation_wrapper,
.gform_confirmation_message {
	max-width: 473px;
	margin: 8px auto 0;
	padding: 32px 36px;
	background: var(--color-card);
	border-radius: 20px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
	color: var(--color-ink);
	text-align: center;
	font-size: 16px;
}
.gform_confirmation_message p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
	.site { padding: 28px 18px 72px; }
	/* Logo 30% smaller on mobile (168px → ~118px) and pulled up a little. */
	.brand__logo { width: 118px; margin-bottom: 16px; }
	.gform_wrapper { padding: 32px 24px; }
}