/* ==========================================================================
   Contact Page + Shared Process Steps
   Jay Anderson Art — jay-anderson-art theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contact hero
   -------------------------------------------------------------------------- */

.jaa-contact-hero {
	background-color: var(--color-paper-bg);
	padding-block: var(--space-lg);
}

.jaa-contact-hero__label {
	margin-block-end: var(--space-xs);
}

.jaa-contact-hero__heading {
	font-size: var(--text-2xl);
	line-height: 1.1;
	margin-block-end: var(--space-sm);
}

.jaa-contact-hero__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-contact-hero__body {
	font-size: var(--text-sm);
	color: var(--color-black);
	max-width: 52ch;
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. Form + sidebar section
   -------------------------------------------------------------------------- */

.jaa-contact-form-section {
	background-color: var(--color-paper-bg);
	padding-block: var(--space-lg);
	border-top: var(--border-thin);
}

.jaa-contact-form-section__inner {
	display: grid;
	grid-template-columns: 1fr 0.6fr;
	gap: var(--space-lg);
	align-items: start;
}

/* --- Form column --- */

.jaa-contact-form-section__form-heading {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-style: italic;
	font-weight: 400;
	color: var(--color-black);
	margin-block-end: var(--space-md);
}

.jaa-contact-form-section__form-body {
	min-height: 200px;
}

/* WPForms overrides */
.jaa-contact-form-section__form-body .wpforms-form input,
.jaa-contact-form-section__form-body .wpforms-form textarea,
.jaa-contact-form-section__form-body .wpforms-form select {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	border: var(--border-thin);
	border-radius: 0;
	background-color: var(--color-paper-bg);
	color: var(--color-black);
	padding: 0.75rem 1rem;
	width: 100%;
}

.jaa-contact-form-section__form-body .wpforms-form input:focus,
.jaa-contact-form-section__form-body .wpforms-form textarea:focus,
.jaa-contact-form-section__form-body .wpforms-form select:focus {
	outline: none;
	border-color: var(--color-brown-accent);
}

/* Labels */
.jaa-contact-form-section__form-body .wpforms-form label,
.jaa-contact-form-section__form-body .wpforms-form legend,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-field-label {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-black);
	margin-block-end: 0.375rem;
	display: block;
}

/* Required asterisk */
.jaa-contact-form-section__form-body .wpforms-form .wpforms-required-label,
.jaa-contact-form-section__form-body .wpforms-form label .wpforms-required-label {
	color: var(--color-brown-accent) !important;
}

/* Field spacing */
.jaa-contact-form-section__form-body .wpforms-form .wpforms-field {
	margin-block-end: var(--space-sm);
	padding: 0;
}

/* Checkboxes */
.jaa-contact-form-section__form-body .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
	width: auto;
	accent-color: var(--color-brown-accent);
	margin-inline-end: 0.5rem;
}

.jaa-contact-form-section__form-body .wpforms-form .wpforms-field-checkbox label {
	font-size: var(--text-sm);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	display: inline;
}

/* Required asterisk */
.jaa-contact-form-section__form-body .wpforms-form label .wpforms-required-label,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-label-hide + .wpforms-required-label,
.jaa-contact-form-section__form-body .wpforms-form span.wpforms-required-label {
	color: var(--color-brown-accent) !important;
}

/* Confirmation / success message */
.jaa-contact-form-section__form-body .wpforms-confirmation-container-full,
div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-black) !important;
	border: var(--border-thin) !important;
	padding: var(--space-sm) !important;
	background-color: var(--color-paper-bg) !important;
}

.jaa-contact-form-section__form-body div.wpforms-container-full input[type="submit"],
.jaa-contact-form-section__form-body div.wpforms-container-full button[type="submit"],
.jaa-contact-form-section__form-body .wpforms-form button.wpforms-submit,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-submit,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-submit-container button.wpforms-submit {
	--wpforms-button-background-color: #0e0d0d;
	--wpforms-button-background-color-alt: #0e0d0d;
	--wpforms-button-text-color: #f7f4ef;

	font-family: var(--font-sans) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--color-paper-bg) !important;
	background-color: var(--color-black) !important;
	border: 1px solid var(--color-black) !important;
	padding: 0.875rem 2rem !important;
	cursor: pointer !important;
	border-radius: 0 !important;
	transition:
		background-color var(--transition-base),
		border-color var(--transition-base);
}

.jaa-contact-form-section__form-body div.wpforms-container-full input[type="submit"]:hover,
.jaa-contact-form-section__form-body div.wpforms-container-full button[type="submit"]:hover,
.jaa-contact-form-section__form-body .wpforms-form button.wpforms-submit:hover,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-submit:hover,
.jaa-contact-form-section__form-body .wpforms-form .wpforms-submit-container button.wpforms-submit:hover {
	--wpforms-button-background-color: #4f432c;
	--wpforms-button-background-color-alt: #4f432c;

	background-color: var(--color-brown-dk-accent) !important;
	border-color: var(--color-brown-dk-accent) !important;
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */

.jaa-contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.jaa-contact-sidebar__label {
	margin-block-end: 0.375rem;
}

.jaa-contact-sidebar__text {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-black);
	line-height: 1.6;
	margin: 0;
}

.jaa-contact-sidebar__social-link {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-black);
	text-decoration: none;
	transition: color var(--transition-base);
}

.jaa-contact-sidebar__social-link:hover {
	color: var(--color-brown-accent);
}

/* Collecting block — tinted background */
.jaa-contact-sidebar__block--collecting {
	background-color: var(--color-paper-dk-bg);
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.jaa-contact-sidebar__btn {
	align-self: stretch;
	text-align: center;
	margin-block-start: var(--space-xs);
}

/* --------------------------------------------------------------------------
   4. Process steps — shared across About and Contact pages
   -------------------------------------------------------------------------- */

.jaa-process {
	background-color: var(--color-paper-dk-bg);
	padding-block: var(--space-lg);
}

.jaa-process__label {
	margin-block-end: var(--space-xs);
}

.jaa-process__heading {
	font-size: var(--text-2xl);
	line-height: 1.1;
	margin-block-end: var(--space-xs);
}

.jaa-process__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-process__body {
	font-size: var(--text-sm);
	color: var(--color-black);
	max-width: 52ch;
	line-height: 1.7;
	margin-block-end: var(--space-md);
}

.jaa-process__header {
	margin-block-end: var(--space-md);
	padding-block-end: var(--space-sm);
	border-bottom: var(--border-thin);
}

.jaa-process__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	padding-block-start: var(--space-md);
}

.jaa-process__step-number {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: 300;
	color: var(--color-black);
	margin-block-end: var(--space-xs);
}

.jaa-process__step-title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-md);
	font-weight: 400;
	color: var(--color-black);
	margin-block-end: var(--space-xs);
}

.jaa-process__step-body {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-black);
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Responsive — tablet (≤ 900px)
   -------------------------------------------------------------------------- */

@media (width <= 900px) {
	.jaa-contact-form-section__inner {
		grid-template-columns: 1fr;
	}

	.jaa-process__steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   6. Responsive — mobile (≤ 600px)
   -------------------------------------------------------------------------- */

@media (width <= 600px) {
	.jaa-contact-hero__heading {
		font-size: var(--text-xl);
	}

	.jaa-process__heading {
		font-size: var(--text-xl);
	}

	.jaa-process__steps {
		grid-template-columns: 1fr;
	}
}