/* OpenPress Contact page template (page-templates/contact-page.php). Loaded on that template only,
   after home.css (hero, section rhythm, tinted band, call-to-action panel). Theme tokens only, so light and
   dark mode follow the rest of the site. No new motion.

   The theme does not build the form. A form plugin (or an embedded form) is placed in the page editor and
   rendered inside .op-contact__form; the rules below only make that markup look like the theme's own form
   controls (.op-label / .op-input / .op-btn in components.css). */

/* The page ends in the dark call-to-action panel, so the footer sits directly below it (as on the homepage). */
.op-contact ~ .op-footer { margin-top: 0; }

/* Hero: one column. */
.op-contact .op-hero__inner { grid-template-columns: minmax(0, 1fr); }
.op-contact .op-hero__content { max-width: 46rem; }
.op-contact__crumbs { margin-bottom: var(--op-space-4); color: var(--op-text-muted); }
.op-contact__crumbs a { text-decoration: none; }
.op-contact__crumbs a:hover,
.op-contact__crumbs a:focus-visible { color: var(--op-text); text-decoration: underline; }

/* Layout: form first, topics beside it on desktop. Same order in the markup and on screen. */
.op-contact-layout { display: grid; gap: var(--op-space-6); }
.op-contact-main,
.op-contact-side { min-width: 0; }
@media (min-width: 1024px) {
	.op-contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--op-space-7); align-items: start; }
}
.op-contact .op-contact__heading { margin: 0 0 var(--op-space-5); font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); letter-spacing: var(--op-tracking-heading); }

/* Form card */
.op-contact-card {
	padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow);
}
.op-contact__notice + .op-contact__setup { margin-top: var(--op-space-4); }
.op-contact__notice a { overflow-wrap: anywhere; }

/* Form plugin markup ------------------------------------------------------------------------- */
.op-contact__form { min-width: 0; }
.op-contact__form > :first-child { margin-top: 0; }
.op-contact__form > :last-child { margin-bottom: 0; }
.op-contact__form form { margin: 0; }
.op-contact__form p { margin: 0 0 var(--op-space-4); }
.op-contact__form label { display: block; margin-bottom: var(--op-space-2); color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-semibold); line-height: 1.3; }

.op-contact__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
.op-contact__form select,
.op-contact__form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: var(--op-control-height);
	padding: 0.625rem 0.875rem;
	background: var(--op-bg);
	border: 1px solid var(--op-border-strong);
	border-radius: var(--op-radius);
	color: var(--op-text);
	font-size: 1rem; /* 16px: no iOS zoom on focus */
	line-height: 1.4;
}
.op-contact__form textarea { min-height: 9rem; resize: vertical; }
.op-contact__form input::placeholder,
.op-contact__form textarea::placeholder { color: var(--op-text-muted); opacity: 1; }
.op-contact__form input:hover,
.op-contact__form select:hover,
.op-contact__form textarea:hover { border-color: color-mix(in srgb, var(--op-link) 50%, var(--op-border-strong)); }
.op-contact__form input:focus-visible,
.op-contact__form select:focus-visible,
.op-contact__form textarea:focus-visible { border-color: var(--op-focus); box-shadow: var(--op-ring); outline: 2px solid transparent; }
.op-contact__form input[aria-invalid="true"],
.op-contact__form select[aria-invalid="true"],
.op-contact__form textarea[aria-invalid="true"] { border-color: var(--op-danger); }
.op-contact__form input[type="checkbox"],
.op-contact__form input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0 var(--op-space-2) 0 0; accent-color: var(--op-btn-bg); }

/* Submit button: same look as .op-btn--primary. */
.op-contact__form input[type="submit"],
.op-contact__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	background: var(--op-btn-bg);
	border: 1px solid transparent;
	border-radius: var(--op-radius);
	color: var(--op-on-accent);
	font-family: var(--op-font-display);
	font-size: 1rem;
	font-weight: var(--op-weight-bold);
	cursor: pointer;
}
.op-contact__form input[type="submit"]:hover,
.op-contact__form button[type="submit"]:hover { background: var(--op-btn-bg-hover); }
.op-contact__form input[type="submit"]:disabled,
.op-contact__form button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }

/* Validation and result messages. Class names are those of Contact Form 7 and WPForms; messages from another
   form plugin use that plugin's own styling. Each message carries its own text, so state never relies on colour alone. */
.op-contact__form .wpcf7-not-valid-tip,
.op-contact__form .wpforms-error,
.op-contact__form label.wpforms-error { display: block; margin: var(--op-space-2) 0 0; color: var(--op-danger); font-size: var(--op-text-meta); font-weight: var(--op-weight-semibold); line-height: 1.4; }
.op-contact__form .wpcf7-not-valid,
.op-contact__form .wpforms-error:is(input, select, textarea) { border-color: var(--op-danger); }
.op-contact__form .wpcf7-response-output,
.op-contact__form .wpforms-confirmation-container-full,
.op-contact__form .wpforms-error-container {
	margin: var(--op-space-4) 0 0;
	padding: var(--op-space-3) var(--op-space-4);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border-strong);
	border-left: 4px solid var(--op-link);
	border-radius: var(--op-radius);
	color: var(--op-text);
	font-size: var(--op-text-small);
	line-height: 1.5;
}
.op-contact__form form.invalid .wpcf7-response-output,
.op-contact__form form.failed .wpcf7-response-output,
.op-contact__form form.spam .wpcf7-response-output,
.op-contact__form form.unaccepted .wpcf7-response-output,
.op-contact__form form.aborted .wpcf7-response-output,
.op-contact__form .wpforms-error-container { border-left-color: var(--op-danger); background: var(--op-danger-bg); }
.op-contact__form form.sent .wpcf7-response-output,
.op-contact__form .wpforms-confirmation-container-full { border-left-color: var(--op-success); background: var(--op-success-bg); }

/* Inquiry topics: ruled rows, no cards or pills. */
.op-contact-topics { margin: 0; padding: 0; list-style: none; }
.op-contact-topics__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--op-space-4);
	padding-block: var(--op-space-4);
	border-top: 1px solid var(--op-border-strong);
}
.op-contact-topics__item:last-child { border-bottom: 1px solid var(--op-border-strong); }
.op-contact-topics__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--op-border-strong);
	border-radius: var(--op-radius);
	color: var(--op-link);
}
.op-contact-topics__body { min-width: 0; }
.op-contact-topics__title { margin: 0 0 var(--op-space-1); font-size: var(--op-text-h4); letter-spacing: -0.02em; overflow-wrap: break-word; }
.op-contact-topics__text { margin: 0; color: var(--op-text-muted); font-size: var(--op-text-small); line-height: 1.55; overflow-wrap: break-word; }

/* Optional email block (only rendered when an address is configured). */
.op-contact-email { margin-top: var(--op-space-5); }
.op-contact-email__title { margin: 0 0 var(--op-space-1); font-size: var(--op-text-h4); letter-spacing: -0.02em; }
.op-contact-email__text { margin: 0; overflow-wrap: anywhere; }
.op-contact-email__text a { display: inline-block; padding-block: 0.375rem; }

/* Text link inside the dark call-to-action panel (--op-link is the light-on-dark blue there). */
.op-contact-links { display: flex; flex-wrap: wrap; gap: var(--op-space-1) var(--op-space-5); margin: var(--op-space-4) 0 0; padding: 0; list-style: none; font-size: var(--op-text-small); }
.op-contact-links a { display: inline-block; padding-block: 0.375rem; color: var(--op-link); }
.op-contact-links a:hover { color: #fff; }