/* =====================================================================
 * Paris Map — Ninja Forms overrides (v0.6.14)
 * ---------------------------------------------------------------------
 *
 * Flattens Ninja Forms' default "opinionated" styling into the sharp,
 * black/white, square-cornered aesthetic the rest of the site uses —
 * same visual family as the map UI chrome (map-compass, yearbar,
 * zoom buttons, map-key, map-menu-btn in framed mode).
 *
 * Design tokens:
 *   - #000 borders, 1px, square corners (no radius)
 *   - #fff fills for inputs; #000/#fff inverted for the submit button
 *   - 0.04em letter-spacing + uppercase on labels and the submit button
 *     to echo the treatment used on yearbar, map-key__title, etc.
 *   - Focus = the border doubles up to 2px #000; no outline ring.
 *
 * Selector strategy:
 *   Ninja Forms ships a `display-opinions.css` stylesheet with higher-
 *   specificity selectors than plain tag/class (e.g. `.nf-form-content
 *   input.ninja-forms-field`). We match or beat that specificity here
 *   by scoping most rules through `.nf-form-cont` or `.nf-form-content`.
 *   If you ever find a default that won't budge, the cleanest escape
 *   hatch is to switch NF's "Opinionated Styles" setting to None
 *   (Forms → Settings → Styles) rather than nesting more !important.
 *
 * Loaded globally via `paris_map_enqueue_scripts` in functions.php —
 * we want any Ninja Form dropped into any page to pick up these styles,
 * not just forms on the Contact template.
 * ================================================================== */

/* ---------- Form-wide hidden elements ---------- */

/* Ninja Forms prints a "Fields marked with an * are required" line at
 * the top of every form (rendered by the `app-before-fields.html`
 * template into `.nf-form-fields-required`). Our required fields are
 * already visually flagged by the `*` next to their labels and by the
 * inline error state on submit, so the banner is redundant noise.
 * `display: none` hides it from both sighted users and assistive tech,
 * which is fine here: the per-field `required` attribute on inputs
 * still announces the requirement to screen readers when they reach
 * each field, so we don't lose that information. */
.nf-form-cont .nf-form-fields-required { display: none; }

/* ---------- Form container ---------- */

.nf-form-cont {
	/* Rein in NF's default width handling and give the form a clear
	 * maximum width that pairs with `.pm-container` (min(92vw, 980px)
	 * from generic.css). 560px keeps field lines readable rather than
	 * sprawling across a wide desktop viewport. */
	max-width: 560px;
	margin: 1.5rem 0;
	color: #000;
}

.nf-form-cont .nf-form-content {
	padding: 0;
	margin: 0;
}

/* Field rows — NF default is `margin-bottom: 25px`. That's fine; we
 * just tidy spacing so labels sit close to their inputs. */
.nf-form-cont .nf-field-container {
	margin-bottom: 20px;
}

/* ---------- Labels ---------- */

.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label-span {
	display: inline-block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #000;
	line-height: 1.2;
}

/* Required-field asterisk. NF outputs this as `.ninja-forms-req-symbol`. */
.nf-form-cont .ninja-forms-req-symbol {
	color: #000;
	margin-left: 2px;
}

/* ---------- Inputs (text, email, tel, url, number, password) + textarea + select ---------- */

.nf-form-cont .nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content textarea.ninja-forms-field,
.nf-form-cont .nf-form-content select.ninja-forms-field {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	height: auto;                 /* cancel NF's fixed 50px height */
	min-height: 44px;             /* but keep a comfortable tap target */
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.nf-form-cont .nf-form-content textarea.ninja-forms-field {
	/* NF default is 200px — that's workable, but 160px feels less
	 * top-heavy on a contact form. Admins can always override. */
	min-height: 160px;
	height: auto;
	resize: vertical;
	line-height: 1.5;
}

/* Select needs its own chevron since we stripped the native appearance.
 * Inline SVG keeps this dependency-free. */
.nf-form-cont .nf-form-content select.ninja-forms-field {
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' fill='none' stroke='black' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

/* Focus: double the border weight to signal focus without an outline
 * ring (outline rings clash with the square-corner aesthetic). Inset
 * box-shadow keeps the element's size stable — no pixel reflow. */
.nf-form-cont .nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):focus,
.nf-form-cont .nf-form-content textarea.ninja-forms-field:focus,
.nf-form-cont .nf-form-content select.ninja-forms-field:focus {
	outline: none;
	border-color: #000;
	box-shadow: inset 0 0 0 1px #000;
}

/* Placeholder text — NF doesn't style these; we match the site's muted
 * secondary tone (#555, used in `.pm-meta`). */
.nf-form-cont ::placeholder { color: #888; opacity: 1; }
.nf-form-cont :-ms-input-placeholder { color: #888; }
.nf-form-cont ::-ms-input-placeholder { color: #888; }

/* ---------- Checkboxes and radios ---------- */

.nf-form-cont .nf-form-content .listcheckbox-wrap li,
.nf-form-cont .nf-form-content .listradio-wrap li {
	/* NF sets `line-height: 0` on these; restore a sane baseline. */
	line-height: 1.4;
	margin-bottom: 8px !important; /* matches NF's own !important scope */
	display: flex;
	align-items: center;
	gap: 8px;
}

.nf-form-cont input[type="checkbox"].ninja-forms-field,
.nf-form-cont input[type="radio"].ninja-forms-field {
	accent-color: #000;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}

.nf-form-cont .listcheckbox-wrap label,
.nf-form-cont .listradio-wrap label {
	font-weight: 400;
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	line-height: 1.4;
	cursor: pointer;
}

/* ---------- Submit button ---------- */

/* NF renders submit as `<input type="button" class="ninja-forms-field">`
 * inside a `.submit-wrap` field container. */
.nf-form-cont .submit-wrap input[type="button"].ninja-forms-field,
.nf-form-cont .nf-form-content input[type="submit"].ninja-forms-field,
.nf-form-cont .nf-form-content input[type="button"].ninja-forms-field {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	height: auto;
	padding: 12px 28px;
	border: 1px solid #000;
	border-radius: 0;
	background: #000;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s, color 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.nf-form-cont .submit-wrap input[type="button"].ninja-forms-field:hover,
.nf-form-cont .submit-wrap input[type="button"].ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content input[type="submit"].ninja-forms-field:hover,
.nf-form-cont .nf-form-content input[type="submit"].ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content input[type="button"].ninja-forms-field:hover,
.nf-form-cont .nf-form-content input[type="button"].ninja-forms-field:focus-visible {
	background: #fff;
	color: #000;
	outline: none;
}

.nf-form-cont .submit-wrap input[type="button"].ninja-forms-field:disabled,
.nf-form-cont .nf-form-content input[type="submit"].ninja-forms-field:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Errors ---------- */

.nf-form-cont .nf-error.field-wrap .nf-field-element input,
.nf-form-cont .nf-error.field-wrap .nf-field-element textarea,
.nf-form-cont .nf-error.field-wrap .nf-field-element select {
	border-color: #b20000;
	box-shadow: inset 0 0 0 1px #b20000;
}

.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-error-field-errors {
	color: #b20000;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 4px;
}

/* ---------- Response message (success after submit) ---------- */

.nf-form-cont .nf-response-msg {
	padding: 16px 20px;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	font-size: 1rem;
	line-height: 1.5;
}

.nf-form-cont .nf-response-msg p { margin: 0 0 0.75em; }
.nf-form-cont .nf-response-msg p:last-child { margin-bottom: 0; }

/* ---------- Honeypot + hidden fields ---------- */

.nf-form-cont .nf-form-hp,
.nf-form-cont .nf-field-container.hidden-container {
	display: none !important;
}

/* ---------- Required notice above the form ---------- */

.nf-form-cont #ninja_forms_required_items {
	font-size: 0.75rem;
	color: #555;
	letter-spacing: 0.02em;
	margin-bottom: 12px;
}

/* ---------- Date picker (if used) ---------- */

.nf-form-cont .pika-single {
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
}

/* ---------- Contact page layout hooks ---------- */

/* `.pm-contact__body` gets a little extra breathing room under the
 * admin-written intro text (before the form) so the form isn't crammed
 * directly against a paragraph. If the admin puts the form shortcode
 * at the very top with no preceding content, the margin simply doesn't
 * apply to anything and nothing is lost. */
.pm-contact__body > .nf-form-cont:not(:first-child) {
	margin-top: 1.5rem;
}