/* ABOUTME: Front-end styles for the EventRail RSVP panel on single events.
   ABOUTME: Reads the site's own theme tokens with literal fallbacks, so a brand change follows
   ABOUTME: automatically and a theme without those tokens still gets a coherent panel. */

.tder-rsvp {
	/* Brand, from Ironwood's custom properties, then EventRail's, then literals. */
	--rsvp-navy:   var(--ironwood-primary-color, var(--tder-accent, #385988));
	--rsvp-deep:   var(--ironwood-primary-color-20, hsl(215 42% 20%));
	--rsvp-mid:    var(--ironwood-primary-color-30, hsl(215 42% 30%));
	--rsvp-orange: var(--ironwood-secondary-color, #ff9f37);
	--rsvp-ink:    var(--ironwood-primary-color-10, hsl(215 42% 10%));
	--rsvp-font:   var(--ironwood-font-primary, inherit);

	margin: var(--tder-gap, 1.5rem) 0;
	padding: clamp(1.75rem, 4vw, 3rem);

	/* A solid brand block rather than a bordered white card: the panel should read as a
	   distinct "do this" zone, not as another content box in the reading flow. */
	background: linear-gradient(158deg, var(--rsvp-mid) 0%, var(--rsvp-deep) 100%);
	border: 0;
	border-radius: 16px;
	color: #fff;
	box-shadow: 0 20px 45px -22px rgba(0, 0, 0, .55);
	overflow: hidden;
	position: relative;

	/* Clears the theme's sticky header when the hero button jumps down to the form. Without
	   enough room here the anchor lands with the heading hidden behind the header, and the
	   visitor has to scroll back up to find the top of the form. */
	scroll-margin-top: 110px;
}

@media (min-width: 960px) {
	.tder-rsvp { scroll-margin-top: 200px; }
}

/* A soft brand-orange bloom in the top corner — enough personality to stop it reading as a
   generic form, subtle enough to keep text contrast intact. A radial gradient rather than a
   flat circle: a hard edge reads as a stray grey blob, not as design. */
.tder-rsvp::after {
	content: "";
	position: absolute;
	top: -140px;
	right: -140px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle closest-side, rgba(255, 159, 55, .30), rgba(255, 159, 55, 0) 100%);
	pointer-events: none;
}

.tder-rsvp > * { position: relative; z-index: 1; }

/* ---------- Heading + availability ---------- */

.tder-rsvp .tder-rsvp__heading {
	margin: 0 0 .35em;
	color: #fff;
	font-family: var(--rsvp-font);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Reads like a ticket stub rather than body copy. */
.tder-rsvp .tder-rsvp__spots {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: .45em 1.1em;
	border-radius: 999px;
	background: var(--rsvp-orange);
	color: var(--rsvp-ink);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tder-rsvp .tder-rsvp__notice {
	margin: 0 0 1.5rem;
	padding: 1em 1.25em;
	border-radius: 10px;
	border-left: 4px solid var(--rsvp-orange);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1rem;
}

.tder-rsvp .tder-rsvp__intro { color: rgba(255, 255, 255, .9); }
.tder-rsvp .tder-rsvp__intro > :last-child { margin-bottom: 0; }

/* ---------- Closed sign-ups ----------
   The panel keeps its shape but holds plain copy — no heading, no inner box. Editors can
   replace the wording per event, so this has to cope with paragraphs and links. */

.tder-rsvp--closed { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem); }

.tder-rsvp .tder-rsvp__closed-text {
	margin: 0;
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.5;
}

.tder-rsvp .tder-rsvp__closed-text p { margin: 0 0 .75em; }
.tder-rsvp .tder-rsvp__closed-text > :last-child { margin-bottom: 0; }

.tder-rsvp .tder-rsvp__closed-text a {
	color: var(--rsvp-orange);
	text-decoration: underline;
}

/* ---------- Gravity Forms inside the panel ----------
   Scoped to .tder-rsvp so nothing here reaches the site's other forms. Selectors lead with
   the `section` element on purpose: Gravity Forms' own theme.min.css uses
   `.gform_wrapper.gravity-theme <thing>` — the same three-class weight as ours — and loads
   after this file, so every tie went to GF (labels came out 700 not 600, inputs 8px not
   0.8em, the required marker GF's red not the brand orange). The element takes ours to
   (0,3,1) and decides it on specificity rather than load order. Fields are targeted by
   the classes set on them in rsvp-form.json, never by numeric field ID: Gravity Forms assigns
   its honeypot the next free ID, so an ID-based selector silently drifts onto an invisible
   field the moment a field is added or removed. */

section.tder-rsvp .gform_wrapper,
section.tder-rsvp .gform_wrapper form { margin: 0; }

@media (min-width: 40em) {
	section.tder-rsvp .gform_wrapper .gform_fields { grid-column-gap: 1.25rem; }
}

section.tder-rsvp .gform_wrapper .gfield_label,
section.tder-rsvp .gform_wrapper .gform-field-label {
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
}

section.tder-rsvp .gform_wrapper .gform-field-label--type-sub,
section.tder-rsvp .gform_wrapper .gfield_description {
	color: rgba(255, 255, 255, .72);
	font-weight: 400;
}

section.tder-rsvp .gform_wrapper .gfield_required { color: var(--rsvp-orange); }

section.tder-rsvp .gform_wrapper input[type="text"],
section.tder-rsvp .gform_wrapper input[type="email"],
section.tder-rsvp .gform_wrapper input[type="tel"],
section.tder-rsvp .gform_wrapper input[type="number"],
section.tder-rsvp .gform_wrapper select,
section.tder-rsvp .gform_wrapper textarea {
	width: 100%;
	padding: .8em 1em;
	border: 2px solid transparent;
	border-radius: 10px;
	background: #fff;
	color: var(--rsvp-ink);
	font-family: var(--rsvp-font);
	font-size: 1rem;
	box-shadow: none;
}

section.tder-rsvp .gform_wrapper input:focus,
section.tder-rsvp .gform_wrapper select:focus,
section.tder-rsvp .gform_wrapper textarea:focus {
	border-color: var(--rsvp-orange);
	outline: 3px solid rgba(255, 159, 55, .35);
	outline-offset: 1px;
}

/* Placeholders. Two selectors, not one: the phone field uses a real placeholder attribute,
   while the select's "Choose one" is an <option class="gf_placeholder"> — greying the closed
   select needs :has(), and without the option rule below the real options inherit that grey
   and the open dropdown looks washed out. Placeholders are supplementary here (every field
   has a visible label), so ~2.1:1 against white is deliberate. */
section.tder-rsvp ::placeholder,
section.tder-rsvp .gf_placeholder,
section.tder-rsvp select:has(.gf_placeholder:checked) { color: #aab3c0; opacity: 1; }

section.tder-rsvp option { color: var(--rsvp-ink); }

/* Consent checkbox: bigger hit area, brand accent, baseline-aligned with its label. */
section.tder-rsvp .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: .6em;
}

section.tder-rsvp .gform_wrapper .ginput_container_consent label {
	margin: 0;
	color: #fff;
	font-weight: 400;
	cursor: pointer;
}

section.tder-rsvp .gform_wrapper input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	accent-color: var(--rsvp-orange);
	cursor: pointer;
}

/* ---------- Submit ----------
   Selectors carry .gform_wrapper to outrank the theme's `.entry-content .button` rules
   (0-2-0), which otherwise repaint this button in the site's default colours. */

section.tder-rsvp .gform_wrapper .gform_footer { margin-top: 1.75rem; }

section.tder-rsvp .gform_wrapper .gform_footer .gform_button {
	background: var(--rsvp-orange);
	/* Dark ink, not white: white on this orange is about 2:1 and fails badly. */
	color: var(--rsvp-ink);
	border: 0;
	border-radius: 999px;
	padding: 1em 2.4em;
	font-family: var(--rsvp-font);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
}

section.tder-rsvp .gform_wrapper .gform_footer .gform_button:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .65);
}

section.tder-rsvp .gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Some themes decorate every `.entry-content .button` with a pseudo-element icon, and Gravity
   Forms ships its submit as class="gform_button button" — so that icon lands on top of the
   label. (On mhagc.org it is a bell, from clb-custom-ironwood-styles.css. The same collision
   affects every Gravity Form in post content there; fixing it site-wide is a theme change.) */
section.tder-rsvp .gform_wrapper .gform_footer .gform_button::before,
section.tder-rsvp .gform_wrapper .gform_footer .gform_button:before { content: none; }

/* ---------- Validation + confirmation ---------- */

section.tder-rsvp .gform_wrapper .gfield_validation_message,
section.tder-rsvp .gform_wrapper .validation_message {
	border-radius: 8px;
	border: 0;
	border-left: 4px solid #ffb4a2;
	background: rgba(255, 120, 90, .18);
	color: #ffd9d0;
	font-weight: 600;
}

section.tder-rsvp .gform_wrapper .gform_validation_errors {
	border-radius: 10px;
	border: 0;
	background: rgba(255, 120, 90, .18);
	box-shadow: none;
}

section.tder-rsvp .gform_wrapper .gform_validation_errors > h2 { color: #ffd9d0; }

section.tder-rsvp .gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	border-left: 4px solid var(--rsvp-orange);
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.05rem;
}

section.tder-rsvp .gform_confirmation_message > :last-child { margin-bottom: 0; }